/* ============================================
   Composer — canonical chat composer
   Visual + behavior matches preview/composer.html
   Pairs with components/composer/index.jsx.
   References --md-sys-* / --xm-* tokens only.

   Two BEM blocks live here:
     .composer        — the input card (toolbar, field, send/stop)
     .att             — attachment system (chips, cards, tray, bundle)
                        kept as a separate block because the artifact
                        chip in <Bubble> reuses .att-card without the
                        composer chrome.
   ============================================ */

/* Outer wrap — stacks the composer card and the transparent
   `.composer-shell__bottom` hint strip beneath it. */
.composer-shell {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface);
}

.composer {
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 88px;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  box-shadow: var(--md-sys-elevation-level0);
  cursor: text;
}
.composer button,
.composer xm-button,
.composer a {
  cursor: pointer;
}
.composer button[disabled],
.composer xm-button[disabled] {
  cursor: not-allowed;
}
.composer:hover {
  border-color: var(--md-sys-color-outline);
}
.composer:focus-within {
  border-color: var(--md-sys-color-outline);
  box-shadow: var(--xm-state-focus-ring), var(--md-sys-elevation-level0);
}
.composer--dragging {
  border-color: var(--md-sys-color-primary);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--md-sys-color-primary) 22%, transparent),
    var(--md-sys-elevation-level0);
}

.composer__field {
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  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);
  padding: var(--s-0-5) var(--s-0-5) 0;
  min-height: 22px;
  max-height: 240px;
  outline: none;
  resize: none;
  width: 100%;
  overflow-y: auto;
}
.composer__field::placeholder { color: var(--xm-color-on-surface-soft); }

.composer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1-5); }
.composer__toolbar-left,
.composer__toolbar-right { display: flex; align-items: center; gap: var(--s-1-5); }

/* Inner shape used by the Stop xm-button — a 9px filled square that
   reads as the universal "stop" affordance inside the button chip. */
.composer__stop-icon { display: inline-block; width: 9px; height: 9px; background: currentColor; border-radius: 1px; }

.composer__hint {
  font: 500 10px/1 var(--xm-typescale-mono-font);
  color: var(--md-sys-color-on-surface);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
}
.composer__hint kbd {
  display: inline-block;
  padding: 1px var(--s-1);
  font: 600 9px/1 var(--xm-typescale-mono-font);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline);
  border-bottom-width: 2px;
  border-radius: 4px;
  margin: 0 1px;
}

/* Transparent strip that hosts the keyboard-shortcut hint below the
   composer card. Sits inside the chat shell's `.chat-shell__composer`, but is
   rendered by <Composer> so standalone previews get it too. */
.composer-shell__bottom {
  background: transparent;
  display: flex;
  justify-content: center;
  padding: var(--s-2) var(--s-1) 0;
}

.composer__counter {
  font: 500 11px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  font-feature-settings: "tnum";
}
.composer__counter--warn { color: var(--md-sys-color-on-surface); }
.composer__counter--over { color: var(--md-sys-color-on-surface); font-weight: 700; }

/* Thinking pill */
.composer__thinking {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2-5) var(--s-3-5);
  border-radius: 10px;
  background: color-mix(in oklab, var(--md-sys-color-primary-container) 70%, var(--md-sys-color-surface-container-low) 30%);
  color: var(--md-sys-color-on-primary-container);
  font: 500 13px/1 var(--md-sys-typescale-body-large-font);
}
.composer__thinking-dots { display: inline-flex; gap: var(--s-1); flex-shrink: 0; }
.composer__thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--md-sys-color-primary) 65%, var(--md-sys-color-surface-container-low) 35%);
  animation: thinkingPulse 1.2s ease-in-out infinite;
}
.composer__thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.composer__thinking-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinkingPulse {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.1);  }
}

/* ============================================
   Attachments — block: .att
   ============================================ */
.att {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-0-5) var(--s-0-5);
}

.att__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font: 500 11px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 var(--s-0-5);
}
.att__header-left { display: inline-flex; align-items: center; gap: var(--s-2); font-feature-settings: "tnum"; }
.att__pip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  font: 600 10px/1 var(--xm-typescale-mono-font);
  letter-spacing: 0.04em;
}
.att__header-right { display: inline-flex; align-items: center; gap: var(--s-3); }

.att__link {
  background: none; border: 0; padding: 0;
  font: 500 11px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.att__link:hover { color: var(--md-sys-color-on-surface); }

/* Card grid */
.att__grid {
  display: flex;
  flex-direction: row;
  gap: var(--s-2-5);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-0-5) var(--s-0-5) var(--s-2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.att-card {
  position: relative;
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-inverse-surface);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  scroll-snap-align: start;
}
.att-card:hover { border-color: var(--md-sys-color-outline); }

.att-card--media .att-card__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: top center;
  background-color: var(--md-sys-color-surface-container-high);
}
.att-card--media .att-card__ext {
  position: absolute;
  left: var(--s-2); bottom: var(--s-2);
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--xm-photo-overlay);
  color: var(--xm-photo-overlay-ink);
  font: 600 10px/1 var(--xm-typescale-mono-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.att-card--media .att-card__meta {
  position: absolute;
  right: var(--s-2); bottom: var(--s-2);
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--xm-photo-overlay);
  color: var(--xm-photo-overlay-ink);
  font: 500 10px/1 var(--xm-typescale-mono-font);
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  font-feature-settings: "tnum";
}

.att-card--text {
  background: var(--md-sys-color-surface-container-high);
  padding: var(--s-3-5) var(--s-3) var(--s-3);
  justify-content: flex-start;
}
.att-card--text .att-card__name {
  font: 500 13px/1.3 var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-inverse-on-surface);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-right: var(--s-5-5);
}
.att-card--text .att-card__sub {
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1-5);
  font: 400 11px/1.2 var(--xm-typescale-mono-font);
  color: var(--xm-color-inverse-on-surface-muted);
  font-feature-settings: "tnum";
}
.att-card--text .att-card__sub-primary { color: var(--md-sys-color-inverse-on-surface); font-weight: 500; }
.att-card--text .att-card__sub-secondary { color: var(--xm-color-inverse-on-surface-muted); font-size: 10.5px; }
.att-card--text .att-card__ext {
  position: absolute;
  left: var(--s-2-5); bottom: var(--s-2-5);
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 8%, transparent);
  color: var(--md-sys-color-inverse-on-surface);
  font: 600 10px/1 var(--xm-typescale-mono-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ----- Row variant (used in bubbles to reference an artifact) -----
   Lives inside a bot bubble that rides `surface`, so this variant
   uses the on-surface family (POLICIES rule 7a) — not the inverse-on-
   surface ink that .att-card--text uses inside the composer (which
   sits on inverse-surface). The primitives flip in light theme via
   _primitives.css, so a single rule covers both modes. */
.att-card--text-row {
  width: 100%;
  height: auto;
  margin-top: var(--s-2-5);
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2-5) var(--s-3);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  /* Reset native <button> chrome — the chip is rendered as a button
     so it can be activated by keyboard, but it must not paint a UA
     focus ring that fights the design system. */
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.att-card--text-row:hover {
  background: var(--md-sys-color-surface-container);
  border-color: var(--xm-color-on-surface-soft);
}
.att-card--text-row:focus-visible {
  border-color: var(--xm-color-on-surface-soft);
  box-shadow: var(--xm-state-focus-ring);
}
.att-card--text-row .att-card__name {
  margin: 0;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--md-sys-color-on-surface);
}
/* Folded-corner document tile — a tilted card with a clipped
   top-right corner so the chip's leading slot reads as a doc icon
   rather than a generic square. Uses tokens only; the corner is
   carved with clip-path on the tile and a tiny pseudo-element fold.
   The translucent on-surface wash auto-flips per theme: lighter than
   the chip surface in dark, darker than it in light. */
.att-card--text-row .att-card__icon {
  position: relative;
  width: 40px; height: 44px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--md-sys-color-on-surface) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 26%, transparent);
  border-radius: 4px;
  color: var(--md-sys-color-on-surface);
  transform: rotate(-4deg);
  box-shadow: var(--md-sys-elevation-level0);
  --fold: 10px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--fold)) 0,
    100% var(--fold),
    100% 100%,
    0 100%
  );
}
.att-card--text-row .att-card__icon::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--fold);
  height: var(--fold);
  background: color-mix(in oklab, var(--md-sys-color-on-surface) 32%, transparent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.att-card--text-row .att-card__icon svg {
  position: relative;
  z-index: 1;
}
.att-card--text-row .att-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
}
.att-card--text-row .att-card__sub {
  margin-top: 0;
  flex-direction: row;
  gap: var(--s-1-5);
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: var(--xm-color-on-surface-soft);
}
.att-card--text-row .att-card__sub .ds-sep { opacity: 0.5; }
.att-card--text-row .att-card__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.att-card__x {
  position: absolute;
  top: var(--s-1-5); right: var(--s-1-5);
  width: 22px; height: 22px;
  border-radius: 999px;
  border: none;
  background: color-mix(in oklab, var(--md-sys-color-inverse-surface) 88%, transparent);
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
  backdrop-filter: blur(4px);
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.att-card__x:hover { background: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-surface); box-shadow: 0 0 0 1px var(--md-sys-color-inverse-on-surface); }

/* Bundle chip + tray */
.att__bundle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2-5);
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  border-radius: 8px;
  color: var(--md-sys-color-inverse-on-surface);
  font: 500 12px/1 var(--md-sys-typescale-body-large-font);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  align-self: flex-start;
}
.att__bundle:hover { border-color: var(--md-sys-color-outline); }
.att__bundle-stack { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.att__bundle-stack span {
  position: absolute; inset: 0;
  border-radius: 5px;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.att__bundle-stack span:nth-child(1) { transform: translate(4px, -3px) rotate(6deg); opacity: 0.5; }
.att__bundle-stack span:nth-child(2) { transform: translate(2px, -1px) rotate(3deg); opacity: 0.75; }
.att__bundle-stack span:nth-child(3) {
  background: var(--md-sys-color-surface-container-high);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-sys-color-inverse-on-surface);
}
[data-theme="dark"] .att__bundle-stack span:nth-child(3) {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
.att__bundle-meta { display: flex; flex-direction: column; gap: 3px; }
.att__bundle-name { font: 500 12px/1 var(--md-sys-typescale-body-large-font); color: var(--md-sys-color-inverse-on-surface); }
.att__bundle-sub  { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--xm-color-inverse-on-surface-muted); font-feature-settings: "tnum"; }
.att__bundle-caret { color: var(--xm-color-inverse-on-surface-muted); margin-left: var(--s-1); display: inline-flex; }
.att__bundle[aria-expanded="true"] .att__bundle-caret { transform: rotate(180deg); }

.att__tray {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 10px;
  background: var(--md-sys-color-surface-container-high);
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  animation: trayIn 180ms ease;
}
@keyframes trayIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.att__row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: var(--s-2-5);
  padding: var(--s-2) var(--s-2-5);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font: 500 12px/1 var(--md-sys-typescale-body-large-font);
}
.att__row:last-child { border-bottom: 0; }
.att__row:hover { background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 4%, transparent); }
.att__row-thumb {
  width: 28px; height: 28px; border-radius: 5px;
  background-size: cover; background-position: center;
  background-color: var(--md-sys-color-primary-container);
}
.att__row-icon {
  width: 28px; height: 28px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-inverse-on-surface);
}
[data-theme="dark"] .att__row-icon {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
.att__row-name {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--md-sys-color-inverse-on-surface);
}
.att__row-size {
  font: 400 10.5px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-inverse-on-surface-muted);
  font-feature-settings: "tnum";
}
.att__row-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-feature-settings: "tnum"; text-align: right;
}
.att__row-meta-primary { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--md-sys-color-inverse-on-surface); }
.att__row-meta-secondary { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--xm-color-inverse-on-surface-muted); }
.att__row-x {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-inverse-surface);
  color: var(--xm-color-inverse-on-surface-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.att__row-x:hover { background: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-surface); border-color: var(--md-sys-color-inverse-on-surface); }

/* Inline warning — neutral surface, severity carried by <WarnIcon /> + bold label */
.att__warn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1-5) var(--s-2-5);
  border-radius: 8px;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-inverse-on-surface);
  font: 600 11px/1.3 var(--xm-typescale-mono-font);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .att__warn {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}
.att__warn svg { flex-shrink: 0; }