/* ============================================================
   <ChatShell /> — full-viewport interactive chat layout.

   Three-region grid (sidebar | top / center) that grows a fourth
   region (artifact) when the artifact viewer opens. Owns the
   layout, scroll regions, and composer overlay only — every
   visual element (Bubble, Composer, BrandMark, SidebarItem,
   Artifact) lives in its own components/<name>/index.css.

   Two BEM blocks live here:
     .chat-shell       — the grid + top-bar + thread + composer overlay
     .chat-sidebar     — the left column (conversations list, search)
                         promoted to its own block so descendant names
                         stay readable.
     .chat-empty       — alternate empty-state body used in place of
                         .chat-shell__thread + chat-shell__composer.

   Pairs with components/chat/index.jsx.
   ============================================================ */

/* ============================================================
   Chat shell — three-region grid (sidebar | top / center).
   Full-viewport: fills the window edge-to-edge.
   ============================================================ */
.chat-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w, 272px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar top"
    "sidebar center";
  height: 100%;
  width: 100%;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  transition: grid-template-columns var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
}
/* Opt-in: pin the shell to the viewport. Used by full-bleed previews
   (chat.html, chat-empty.html). Embedded hosts omit this and size the
   shell via their own container. */
.chat-shell--full-viewport { height: 100vh; }
.chat-shell--collapsed { --sidebar-w: 56px; }

/* ---------- Lit shadow-boundary fixes ----------
   In the React port these selectors had a single direct-child selector
   in the parent's CSS (`.chat-shell__composer > .composer-shell`). In
   the Lit port, <xm-composer> wraps .composer-shell with display:contents,
   so the selector still walks the real DOM and .composer-shell is now a
   *grand*child. The descendant variants below restore the intended sizing
   and re-enable pointer-events on the composer (the overlay sets
   pointer-events:none so it doesn't swallow clicks above the composer —
   without re-enabling on .composer-shell, the textarea is unclickable).
   Same shape for the artifact slot. */
.chat-shell__composer .composer-shell {
  width: 100%;
  max-width: 720px;
  pointer-events: auto;
}
.chat-shell__artifact-slot .artifact { flex: 1; min-height: 0; }

/* When the artifact viewer is open, a third column appears on the
   right and spans both rows — pushing top + center to the left.
   Sidebar stays put. */
.chat-shell--has-artifact {
  grid-template-columns: var(--sidebar-w, 272px) 3fr 2fr;
  grid-template-areas:
    "sidebar top    artifact"
    "sidebar center artifact";
}

.chat-shell__top { grid-area: top; }

.chat-shell__center {
  grid-area: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.chat-shell__artifact-slot {
  grid-area: artifact;
  min-height: 0;
  display: flex;
}
.chat-shell__artifact-slot > .artifact { flex: 1; min-height: 0; }

/* ---------- Sidebar block ----------
   Transparent — inherits the chat-shell surface. Only the
   right-edge hairline marks the seam to the thread. */
.chat-sidebar {
  grid-area: sidebar;
  background: transparent;
  border-right: 1px solid var(--md-sys-color-outline);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.chat-sidebar__top {
  margin: var(--s-3) var(--s-3) var(--s-2);
}
/* Pin the right-slot icon to the brand-mark chip's 24px height so both
   children present the same box for the button's `align-items: center`,
   keeping the X chip and panel-toggle icon on a single centerline. */
.chat-sidebar__top [slot="icon-right"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.chat-shell--collapsed .chat-sidebar__top {
  margin: var(--s-3) auto var(--s-2);
}

/* New chat — xm-button host. Margin matches the sidebar column gutter. */
.chat-sidebar__new {
  margin: var(--s-1) var(--s-3) var(--s-2);
}
.chat-shell--collapsed .chat-sidebar__new {
  align-self: center;
}

/* Search */
.chat-sidebar__search { padding: 0 var(--s-3) var(--s-2); }
.chat-shell--collapsed .chat-sidebar__search--full { display: none; }
.chat-sidebar__search--icon-only {
  display: none;
  margin: 0 auto var(--s-2);
}
.chat-shell--collapsed .chat-sidebar__search--icon-only { display: inline-flex; }

/* Section labels + chat list */
.chat-sidebar__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-1) var(--s-2) var(--s-3-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
}
.chat-shell--collapsed .chat-sidebar__list { padding: var(--s-2) 0 var(--s-3-5); align-items: center; gap: var(--s-4); }
.chat-shell--collapsed .sidebar-item--eyebrow { display: none; }

.chat-sidebar__divider {
  width: 28px;
  height: 1px;
  background: var(--md-sys-color-outline);
  margin: var(--s-2) auto;
  display: none;
}
.chat-shell--collapsed .chat-sidebar__divider { display: block; }

/* ---------- Top panel ---------- */
.chat-shell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  min-height: 56px;
  box-sizing: border-box;
  background: var(--md-sys-color-surface);
  z-index: 2;
}
.chat-shell__top-left { display: flex; flex-direction: column; gap: var(--s-0-5); min-width: 0; }
.chat-shell__top-title {
  font: 600 14.5px/1.2 var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-shell__top-sub {
  font: 400 11px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.chat-shell__top-sub > span { white-space: nowrap; }
.chat-shell__top-right { display: inline-flex; align-items: center; gap: var(--s-1-5); }

/* ---------- Center panel — scrollable thread ---------- */
.chat-shell__thread {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  padding: var(--s-6) var(--s-5) 132px;  /* bottom padding clears the composer */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chat-shell__thread-inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  /* Base gap is the tight, same-speaker rhythm; a speaker change adds
     extra margin below so turns read as grouped utterances, not a flat
     evenly-spaced list. */
  gap: var(--s-2-5);
}

/* Bubble row alignment is page layout — the Bubble component owns
   the visuals of each turn. */
.chat-shell__row { display: flex; }
.chat-shell__row--user { justify-content: flex-end; }
.chat-shell__row--bot  { justify-content: flex-start; }

/* Speaker-change rhythm: when the author flips, open up the gap. */
.chat-shell__row--user + .chat-shell__row--bot,
.chat-shell__row--bot + .chat-shell__row--user {
  margin-top: var(--s-3);
}

/* ---------- Empty state — centered serif greeting + composer ----------
   Used by the chat-empty variant (passed in via the `empty` prop).
   The shell renders a .chat-empty block in place of .chat-shell__thread +
   .chat-shell__composer; the caller owns its own composer and any
   suggestion chips. */
.chat-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5) var(--s-10);
}
.chat-empty__hero {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1-5);
  text-align: center;
}
.chat-empty__title {
  font:
    var(--md-sys-typescale-headline-medium-weight)
    var(--md-sys-typescale-headline-medium-size) /
    var(--md-sys-typescale-headline-medium-line-height)
    var(--md-sys-typescale-headline-medium-font);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.01em;
  margin: 0;
}
.chat-empty__sub {
  font:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
  color: var(--xm-color-on-surface-soft);
  margin: 0;
}
.chat-empty__composer {
  width: 100%;
  max-width: 720px;
}

/* ---------- Bottom panel — composer overlay ----------
   Transparent — the thread already pads its bottom by 132px so
   bubbles never sit underneath the composer card. */
.chat-shell__composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: var(--s-2) var(--s-5) 0;
  pointer-events: none;
  z-index: 2;
}
.chat-shell__composer > .composer-shell {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  padding-bottom: var(--s-5);
}