/* ============================================================================
   DagM8 · views/chat.css  —  screen-specific styles for the Chat surface.
   ----------------------------------------------------------------------------
   Reuses the dagm8.css token + component layer (.avatar .ava-sq .badge .tag
   .icon-btn .ico .send .status-dot). Everything here is chat-only and prefixed
   .chat-*. Source of truth: docs/dagm8/figma-export/04-chat.png.

   Layout: #view becomes .chat-view, a full-height flex row of three columns
   beside the persistent shell left rail —
       .chat-switch | .chat-room | .chat-main(.chat-thread + .chat-composer)
   The thread is the hero, so .chat-view spans BOTH the feed track and the
   (reserved-but-empty) right-rail track; #rail-right is hidden (.chat-rail-off).
   ========================================================================= */

/* ---- the surface owns the full height under the sticky topbar ------------ */
.chat-view {
  grid-column: 2 / -1;                       /* feed + reserved right-rail track */
  height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
}
.chat-rail-off { display: none; }            /* the chat screen has no right rail */

/* ---- column 1: compact room/DM switcher --------------------------------- */
.chat-switch {
  flex: none;
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.chat-switch__home {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--field);
  color: var(--muted);
  transition: color var(--t), background var(--t);
}
.chat-switch__home:hover { color: var(--ink-2); }
.chat-switch__tile {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: transform var(--t), background var(--t);
}
.chat-switch__tile:hover { transform: translateY(-1px); }
.chat-switch__tile.is-active { background: var(--field); }
.chat-switch__tile.is-active .ava-sq,
.chat-switch__tile.is-active .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cyan);
}
.chat-switch__tile.is-active::before {     /* active marker on the inner edge */
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: var(--cyan);
}
.chat-switch__badge {
  position: absolute;
  top: -4px;
  right: -6px;
  transform: scale(.82);
  transform-origin: top right;
}
.chat-switch__dot { position: absolute; right: -1px; bottom: -1px; }

/* ---- column 2: room header + sub-nav ------------------------------------ */
.chat-room {
  flex: none;
  width: 268px;
  padding: 22px 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.chat-room__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.chat-room__id { min-width: 0; }
.chat-room__name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
}
.chat-room__sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.chat-room__code { font-size: 13px; font-weight: 500; color: var(--muted); }
.chat-room__tag { background: var(--cyan); color: #fff; }   /* cyan "School Wide" */

.chat-room__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.chat-room__stat .ico { color: var(--muted); }
.chat-room__stat strong { font-weight: 700; color: var(--ink); }

.chat-room__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 6px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t);
}
.chat-room__link .ico { color: var(--muted); transition: color var(--t); }
.chat-room__link:hover,
.chat-room__link:hover .ico { color: var(--cyan-700); }

.chat-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.chat-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  background: none;
  border-radius: var(--r);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--t), background var(--t);
}
.chat-nav__item .ico { color: inherit; }
.chat-nav__item:hover { background: var(--field); color: var(--ink-2); }
.chat-nav__item.is-active { color: var(--ink); }
.chat-nav__item.is-active .ico { color: var(--cyan); stroke-width: 2.4; }

/* ---- column 3: the thread + the composer -------------------------------- */
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* compact room bar — only shown when the room column folds (mobile) */
.chat-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.chat-bar__name { font-weight: 700; font-size: 15px; color: var(--ink); }
.chat-bar__sub { font-size: 12px; color: var(--muted); }

.chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px 10px;
}
.chat-thread::-webkit-scrollbar { width: 8px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }

/* a message row: avatar + a vertical cluster of bubbles */
.chat-msg { display: flex; align-items: flex-end; gap: 8px; }
.chat-msg--me { justify-content: flex-end; }
.chat-msg--other { justify-content: flex-start; }
.chat-msg__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(72%, 460px);
  min-width: 0;
}
.chat-msg__col--wide { max-width: min(80%, 520px); }
.chat-msg--me .chat-msg__col { align-items: flex-end; }
.chat-msg--other .chat-msg__col { align-items: flex-start; }
.chat-msg .avatar--sm { align-self: flex-end; }

.chat-msg__who { padding: 0 4px; font-size: 12px; color: var(--muted); }
.chat-msg--other .chat-msg__who { font-weight: 600; color: var(--ink-2); }
.chat-msg__who strong { font-weight: 700; color: var(--ink-2); }

.chat-bubble {
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  overflow-wrap: anywhere;
}
.chat-bubble--me { background: var(--ink); border-bottom-right-radius: 5px; }       /* charcoal */
.chat-bubble--other { background: var(--cyan); border-bottom-left-radius: 5px; }    /* cyan */
.chat-mention { font-weight: 700; color: #fff; }

/* the little reaction tag clinging to a received bubble's lower-right edge */
.chat-react {
  align-self: flex-end;
  position: relative;
  z-index: 2;
  margin-top: -12px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.chat-react__emoji { font-size: 13px; line-height: 1; }

/* the day separator */
.chat-divider { display: flex; align-items: center; gap: 14px; margin: 4px 0; }
.chat-divider::before,
.chat-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat-divider span { font-size: 12px; font-weight: 500; color: var(--muted); }

/* the "7 photos" gallery: one tall lead tile + a 2x2 of the rest, +N overlay */
.chat-gallery {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: repeat(2, 78px);
  gap: 6px;
  width: 300px;
  max-width: 80vw;
}
.chat-gallery__cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.chat-gallery__cell:first-child { grid-row: 1 / 3; }
.chat-gallery__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 25, 40, .55);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

/* the quoted reply card (a me message that quotes a received bubble) */
.chat-quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.chat-quote .avatar--sm { align-self: flex-start; }
.chat-quote__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-quote__name { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.chat-bubble--quote { padding: 7px 11px; font-size: 13px; }

/* ---- composer (pinned to the bottom of the thread) ---------------------- */
.chat-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.chat-composer__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t), box-shadow var(--t);
}
.chat-composer__field:focus-within { border-color: var(--cyan); box-shadow: var(--ring); }
.chat-emoji {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  border-radius: 50%;
  color: var(--cyan);
  transition: background var(--t);
}
.chat-emoji:hover { background: var(--field); }
.chat-emoji .ico { color: var(--cyan); }
.chat-composer__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 14px;
  color: var(--ink);
}
.chat-composer__input::placeholder { color: var(--muted); }
.chat-composer__input:focus-visible { box-shadow: none; }   /* field shows focus */

.chat-gif {
  flex: none;
  height: 34px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  transition: background var(--t), color var(--t);
}
.chat-gif:hover { background: var(--ink); color: #fff; }
.chat-send { width: 46px; height: 46px; }   /* the prominent cyan round send */

/* ============================================================================
   RESPONSIVE  (mirrors the dagm8.css breakpoints so #view spans correctly)
   >1180 : 3-col grid — .chat-view spans feed + right-rail track
   ≤1180 : 2-col grid — 2 / -1 resolves to the single feed track (no rule)
   ≤1024 : drop the switcher first
   ≤820  : left rail goes off-canvas, grid is 1-col — span it (1 / -1)
   ≤760  : tighten the room column
   ≤600  : fold the room column + switcher; show the compact bar; thread fills
   ========================================================================= */
@media (max-width: 1024px) {
  .chat-switch { display: none; }
}
@media (max-width: 820px) {
  .chat-view { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .chat-room { width: 230px; padding: 18px 14px; }
  .chat-room__name { font-size: 20px; }
}
@media (max-width: 600px) {
  .chat-room { display: none; }
  .chat-bar { display: flex; }
  .chat-thread { padding: 16px 14px 8px; }
  .chat-composer { padding: 10px 12px 14px; gap: 8px; }
  .chat-msg__col { max-width: 82%; }
  .chat-send { width: 44px; height: 44px; }
}
@media (max-width: 400px) {
  .chat-gif { padding: 0 9px; }
  .chat-gallery { width: 250px; grid-template-rows: repeat(2, 70px); }
}