/* styles/sections/faux-app.css
 * Faux app shell, shared controls and the Brief AI chat (js/faux-app.js). Colors are the Brief web app's
 * semantic tokens (--fa-*), kept as the product shows them. The app reflows like the product:
 * type never scales, and container queries drop the side panel when the app is narrow.
 * The side panel is in styles/sections/faux-app-panel.css. */
@layer sections {

  .faux-app {
    /* --fa-* maps the Brief web app's semantic tokens (tokens.css, --app-*) to the roles the
       faux app uses, kept as the product shows them. */
    --fa-ink: var(--app-ink);                /* txt-neutral-strong */
    --fa-ink-2: var(--app-ink-2);            /* txt-neutral-default */
    --fa-muted: var(--app-ink-2);            /* txt-neutral-default */
    --fa-placeholder: var(--app-placeholder); /* txt-ghost-default */
    --fa-line: var(--app-line);              /* brd-neutral-subtle */
    --fa-line-strong: var(--app-line-strong); /* brd-neutral-strong */
    --fa-soft: var(--app-soft);              /* bkg-base-strong */
    --fa-panel: var(--app-panel);            /* bkg-base-subtle */
    --fa-surface: var(--white);              /* bkg-base-default */
    --fa-hover: var(--app-soft);             /* bkg-base-strong */
    --fa-fern: var(--fern-app);              /* bkg-progressive-default (brand-fern-030) */
    --fa-fern-hover: var(--app-fern-hover);  /* bkg-progressive-default-hover (brand-fern-040) */
    --fa-on-fern: var(--white);              /* txt-knockout-default */
    --fa-amber: var(--orange);               /* icn-warning-default (orange-060) */
    --fa-amber-ink: var(--app-amber-ink);    /* orange-040 */
    --fa-amber-soft: var(--app-amber-soft);  /* orange-060 at 8% on white */
    --fa-critical: var(--app-critical);      /* red-050 */
    --fa-done: var(--fern-app);              /* brand-fern-030 */
    --fa-track: var(--app-track);            /* brand-fern-070 */
    --fa-fern-press: var(--fern);            /* bkg-progressive-default-press (brand-fern-020) */
    --fa-subtle-hover: var(--app-line);      /* bkg-base-subtle-hover (neutral-090) */
    --fa-shadow-sm: var(--app-shadow-sm);    /* --shadow-sm, Elevation 2 */
    --fa-composer-line: var(--app-composer-line);       /* composer at rest, D and M frames */
    --fa-composer-hover-line: var(--app-composer-line);
    --fa-composer-icon: var(--app-composer-icon);       /* attach (+) glyph at rest */
    --fa-composer-icon-stroke: 0.5;                      /* glyph units: 1-unit outline + 0.5 = 1px at 16px */
    --fa-radius: 12px;
    --fa-height: 740px;
    --fa-font: var(--font-body);
    --fa-serif: var(--font-display);

    position: relative;
    width: 100%;
    height: var(--fa-height);
    container: faux-app / inline-size;
    border: 1px solid var(--line);
    border-radius: var(--fa-radius);
    background: var(--fa-surface);
    box-shadow: var(--fa-shadow, var(--elevation-subtle), var(--elevation-overlay));
    overflow: hidden;
    color: var(--fa-ink);
    font-family: var(--fa-font);
    font-size: 13px;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-align: left;
  }

  /* W frame (c09ZZd): the composer keeps the app's subtle edge at rest */
  @media (width >= 1680px) {
    .faux-app {
      --fa-composer-line: var(--fa-line);
      --fa-composer-hover-line: var(--fa-line-strong);
    }
  }

  .faux-app *,
  .faux-app *::before,
  .faux-app *::after {
    box-sizing: border-box;
  }

  /* Resets sit in :where() so every component class below outranks them. */
  :where(.faux-app) :where(button, input, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  :where(.faux-app) button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  :where(.faux-app) :where(h3, h4, p, ol, ul, li) {
    margin: 0;
    padding: 0;
  }

  :where(.faux-app) :where(ol, ul) {
    list-style: none;
  }

  :where(.faux-app) a {
    color: inherit;
    text-decoration: none;
  }

  .faux-app :focus-visible {
    outline: 2px solid var(--fa-fern);
    outline-offset: 2px;
  }

  .faux-app [hidden] {
    display: none;
  }

  .fa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .fa-icon {
    width: 16px;
    height: 16px;
    flex: none;
  }

  /* ── Shell ─────────────────────────────────────────────────────────────── */

  .fa {
    display: flex;
    height: 100%;
  }

  .fa-main {
    display: flex;
    flex: none;
    flex-direction: column;
    width: clamp(340px, 33.333%, 440px);
    padding: 20px 20px 22px;
    border-left: 1px solid var(--fa-line);
    overflow-y: auto;
    container-type: inline-size;
  }

  /* ── Shared controls ───────────────────────────────────────────── */

  .fa-icon-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 7px;
    color: var(--fa-muted);
  }

  .fa-icon-btn:hover {
    background: var(--fa-hover);
    color: var(--fa-ink);
  }

  /* ── Brief AI ──────────────────────────────────────────────────────────── */

  .fa-chat {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .fa-chat-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--fa-line);
  }

  .fa-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--fa-fern);
    color: var(--fa-on-fern);
  }

  .fa-avatar .fa-icon {
    width: 24px;
    height: 24px;
  }

  .fa-chat-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
  }

  .fa-chat-title strong {
    font-size: 13.5px;
    font-weight: 700;
  }

  .fa-chat-title span {
    color: var(--fa-muted);
    font-size: 11.5px;
  }

  .fa-chat-log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 16px max(28px, calc((100% - 560px) / 2)) 14px;
    overflow-y: auto;
  }

  /* Short conversations sit at the bottom like a real chat; long ones scroll
     (justify-content: flex-end would make the overflowed top unreachable). */
  .fa-chat-log > :first-child {
    margin-top: auto;
  }

  /* User message: the app's flat variant (chat-ui message.tsx, MessageRenderer
     variant="flat"): bkg-base-subtle fill, txt-neutral-strong text. */
  .fa-msg-user {
    align-self: flex-end;
    max-width: 85%;
    padding: 9px 14px;
    border-radius: 14px 14px 4px 14px;
    background: var(--fa-panel);
    color: var(--fa-ink);
    font-size: 14px;
  }

  .fa-msg-brief {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--fa-ink);
    font-size: 14px;
    line-height: 1.55;
  }

  .fa-lead {
    color: var(--fa-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* Decision history: the same diamonds as the roadmap's decision row. */
  .fa-history {
    position: relative;
    padding: 2px 0;
  }

  .fa-history::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    width: 1px;
    background: var(--fa-line-strong);
  }

  .fa-history li {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    padding: 3px 0 3px 18px;
    font-size: 13px;
    line-height: 1.45;
  }

  .fa-history li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 1px;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--fa-ink);
    background: var(--fa-surface);
    transform: rotate(45deg);
  }

  .fa-history li.is-latest::before {
    background: var(--fa-ink);
  }

  .fa-history time {
    color: var(--fa-muted);
    font-variant-numeric: tabular-nums;
  }

  .fa-history b {
    color: var(--fa-ink);
    font-weight: 600;
  }

  .fa-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  /* Source chips: the app's inline citation badge (chat-ui inline-citation.tsx):
     brd-neutral-subtle edge, bkg-base-strong fill, txt-neutral-default text; hover
     bkg-base-subtle-hover with txt-neutral-strong. */
  .fa-sources button {
    padding: 1px 7px;
    border: 1px solid var(--fa-line);
    border-radius: 5px;
    background: var(--fa-soft);
    color: var(--fa-ink-2);
    font-size: 12px;
    font-weight: 500;
  }

  .fa-sources button:hover {
    background: var(--fa-subtle-hover);
    color: var(--fa-ink);
  }

  .fa-followups {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Follow-ups: the app's suggestion chip (chat-ui suggestion.tsx): brd-neutral-subtle
     edge on bkg-base-default, txt-neutral-default text; hover bkg-base-strong with
     txt-neutral-strong. */
  .fa-followups button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--fa-line);
    border-radius: 9px;
    background: var(--fa-surface);
    color: var(--fa-ink-2);
    font-size: 13px;
    text-align: left;
  }

  .fa-followups .fa-icon {
    width: 14px;
    height: 14px;
  }

  .fa-followups button:hover {
    background: var(--fa-soft);
    color: var(--fa-ink);
  }

  /* Composer chrome copied from the app (BRIEF_COMPOSER_CHROME in
     packages/chat-ui prompt-input.tsx): it lifts on hover and turns fern on focus.
     No focus ring. At rest the D and M frames' snapshots draw a darker grey-green
     edge (--fa-composer-line) and no shadow; the W frame's draws the app's subtle
     border, which darkens on hover. */
  .fa-composer {
    flex: none;
    width: calc(100% - 56px);
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 10px 10px 8px 12px;
    border: 1px solid var(--fa-composer-line);
    border-radius: 12px;
    background: var(--fa-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .fa-composer:hover {
    border-color: var(--fa-composer-hover-line);
    box-shadow: var(--fa-shadow-sm);
  }

  .fa-composer:focus-within {
    border-color: var(--fa-fern);
    box-shadow: var(--fa-shadow-sm);
  }

  /* Attach: IconButton "neutral" (grey glyph, no fill until hover). The frames' snapshots
     draw the PlusRectangle glyph with crisp 1px lines in mid-grey, so the 16px glyph's
     1-unit outline takes a half-unit stroke, and the glyph moves half a pixel so its
     lines (centred 1px and 15px in) fill whole pixels. */
  .fa-composer .fa-icon-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--fa-composer-icon);
  }

  .fa-composer .fa-icon-btn .fa-icon {
    translate: 0.5px 0.5px;
  }

  .fa-composer .fa-icon-btn .fa-icon path {
    stroke: currentcolor;
    stroke-width: var(--fa-composer-icon-stroke);
  }

  .fa-composer .fa-icon-btn:hover {
    border-color: var(--fa-line-strong);
    background: var(--fa-subtle-hover);
    color: var(--fa-fern-press);
    box-shadow: var(--fa-shadow-sm);
  }

  /* iOS Safari zooms the page when a focused field's computed type is under 16px. The
     field is set at 16px and scaled to the app's 14px (0.875), so it renders at the
     design size (38px tall, 19px lines, 2px padding) without the focus zoom; pinch zoom
     is untouched. Scrollable overflow follows the transformed box, so the oversize
     layout box adds no scroll.
     The textarea's focus is shown by the composer border, as in the app. The global ring
     (utilities.css :focus-visible) sits in a later layer, so it is cleared through the
     variable it reads. */
  .fa-composer textarea {
    --fa-input-scale: 0.875;
    --focus-ring: transparent;

    display: block;
    width: calc(100% / var(--fa-input-scale));
    height: calc(38px / var(--fa-input-scale));
    margin-bottom: calc(38px - 38px / var(--fa-input-scale));
    padding: calc(2px / var(--fa-input-scale));
    border: 0;
    background: none;
    font-size: 16px;
    line-height: calc(19px / var(--fa-input-scale));
    resize: none;
    outline: none;
    transform: scale(var(--fa-input-scale));
    transform-origin: 0 0;
  }

  .fa-composer textarea::placeholder {
    color: var(--fa-placeholder);
  }

  .fa-composer-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
  }

  .fa-model {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    color: var(--fa-ink-2);
    font-size: 12px;
    font-weight: 500;
  }

  .fa-model:hover {
    background: var(--fa-hover);
  }

  .fa-model .fa-icon {
    width: 13px;
    height: 13px;
  }

  /* One trailing slot, as in the app: Waveform (start voice) while the
     composer is empty, Send (paperplane) once there is text. IconButton
     "default": fern fill; hover lifts to fern-040 with a shadow, press drops to
     fern-020. */
  .fa-send {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--fa-fern);
    color: var(--fa-on-fern);
    transition: background-color 0.15s, box-shadow 0.15s;
  }

  .fa-send:hover {
    border-color: var(--fa-fern);
    background: var(--fa-fern-hover);
    box-shadow: var(--fa-shadow-sm);
  }

  .fa-send:active {
    border-color: var(--fa-fern);
    background: var(--fa-fern-press);
    box-shadow: var(--fa-shadow-sm);
  }

  .fa-send-arrow,
  .has-text .fa-send-voice {
    display: none;
  }

  .has-text .fa-send-arrow {
    display: block;
  }

  /* ── Narrow: collapse to the chat ──────────────────────────────────────── */

  @container faux-app (max-width: 959px) {
    .fa-main {
      display: none;
    }
  }

  @container faux-app (max-width: 520px) {
    .fa-chat-log {
      padding-inline: 18px;
    }

    .fa-composer {
      width: calc(100% - 36px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faux-app :is(*, *::before, *::after) {
      transition: none;
      animation: none;
    }
  }
}