/* =====================================================================
   PlayFocus Chat on a phone (HELP-83, nIVK4dkrQhVCCMsECg6H): the phone
   layout of HELP-81's Chat under HELP-82's 600 px breakpoint, drawn to
   Lia's rev 2 mockup (M1 to M9) on the component sheet's tokens
   (playfocus-sheet.css), never Fenix Helper's --v2 ones.

   Everything here hangs on .pf-chat[data-phone="true"], which
   playfocus-chat.js sets from HELP-82's one width test, so the layout and
   the behaviour (Accept suggestion only filling the composer) can never
   disagree at 599 and 600 px. The one-column rules of HELP-81 below
   1024 px (playfocus.css) apply too: the list, or one agent's thread.
   ===================================================================== */

/* The screen fills what the phone shows between the header and the tab bar; with the keyboard up, the visual viewport. */
.pf-chat[data-phone="true"] {
  height: calc(var(--chat-vh, 100dvh) - var(--phone-top, 49px) - var(--phone-tabbar, 0px));
  min-height: 0;
}
/* HELP-82's shell: a 56 px header, a 72 px tab bar that hides while somebody types. */
#app[data-layout="phone"] { --phone-top: 56px; --phone-tabbar: calc(72px + env(safe-area-inset-bottom, 0px)); }
#app[data-layout="phone"][data-typing="true"] { --phone-tabbar: 0px; }
#app[data-layout="phone"] .pf-screen[data-screen="chat"] { padding: 0; }
/* The load line stays a polite live line for a screen reader; the phone has no room to show it. */
.pf-chat[data-phone="true"] .pf-chat-line { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------
   The list of agents (prototype 24, M1 and M2)
   ------------------------------------------------------------------ */

.pf-chat[data-phone="true"] .pf-chat-threads { gap: 12px; padding: 12px; background: var(--neutral-50); }
.pf-chat[data-phone="true"] .pf-search { width: 100%; }
.pf-chat[data-phone="true"] .pf-chat-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-self: stretch; border-radius: var(--radius-pill); }
.pf-chat[data-phone="true"] .pf-chat-seg button { min-height: 40px; border-radius: var(--radius-pill); }
.pf-chat[data-phone="true"] .pf-chat-list { gap: 8px; margin: 0; }

/* ChatThreadItem on a phone: each one a card of its own, 72 px at least, 12 px apart. */
.pf-chat[data-phone="true"] .pf-chat-list .pf-thread { min-height: 72px; padding: 12px; border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); background: var(--neutral-0); }

.pf-chat-phone-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px; text-align: center; color: var(--neutral-700); }
.pf-chat-phone-empty .pf-empty__title { outline: none; }
.pf-chat-phone-empty p { margin: 0; }

#app .pf-chat[data-phone="true"] > .pf-empty, #app .pf-chat[data-phone="true"] > .pf-alert { margin: 16px; }

/* ---------------------------------------------------------------------
   One agent's thread (prototype 25, M3 to M6)
   ------------------------------------------------------------------ */

.pf-chat[data-phone="true"] .pf-chat-allchats { display: none; }
.pf-chat[data-phone="true"] .pf-chat-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 12px; padding: 10px 12px 12px; }
.pf-chat-phoneback { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -4px 0 -4px -8px; border-radius: var(--radius-pill); color: var(--neutral-900); }
.pf-chat[data-phone="true"] .pf-chat-head-names { margin-right: 0; }
.pf-chat[data-phone="true"] .pf-chat-head h2 { color: color-mix(in srgb, var(--tone) 80%, var(--neutral-900)); }
/* The second row: the 'n open' pill at the left, the archive button at the right. */
.pf-chat[data-phone="true"] .pf-chat-openpill { grid-column: 1 / 3; justify-self: start; align-self: center; }
.pf-chat[data-phone="true"] #pf-chat-switch { grid-column: 3; justify-self: end; min-height: 44px; }
.pf-chat[data-phone="true"] .pf-chat-head:not(:has(.pf-chat-openpill)) #pf-chat-switch { grid-column: 1 / 4; }

.pf-chat[data-phone="true"] .pf-chat-notice { margin: 12px 12px 0; }
.pf-chat[data-phone="true"] .pf-chat-body { gap: 18px; padding: 14px 12px 20px; }
.pf-chat[data-phone="true"] .pf-question__head { scroll-margin-top: 12px; }
.pf-chat[data-phone="true"] .pf-question__box { padding: 12px; }
/* The reference never wraps its key: the title is cut instead. */
.pf-chat[data-phone="true"] .pf-chat-chip { align-self: stretch; min-width: 0; height: 32px; }
.pf-chat[data-phone="true"] .pf-chat-chip .pf-ref__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The actions full width, at least 44 px high, the primary on top. */
.pf-chat[data-phone="true"] .pf-question__actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.pf-chat[data-phone="true"] .pf-question__actions .pf-btn { justify-content: center; width: 100%; min-height: 44px; }
/* The question being answered keeps the sheet's gold focus ring while focus is in the composer (Pino's note). */
.pf-chat[data-phone="true"] .pf-question[data-replying="true"] .pf-question__box { border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
.pf-chat[data-phone="true"] .pf-question { scroll-margin-bottom: 12px; }

/* The composer at the bottom of the screen; the round send button is named 'Send answer'. */
.pf-chat[data-phone="true"] .pf-composer { padding: 10px 12px 12px; }
.pf-chat[data-phone="true"] .pf-composer-row { gap: 10px; }
.pf-chat[data-phone="true"] .pf-composer-row textarea { min-height: 48px; max-height: 30vh; border-radius: var(--radius-xl); font-size: 16px; }
.pf-chat[data-phone="true"] .pf-composer-send { width: 44px; height: 44px; border-radius: var(--radius-pill); }
.pf-chat[data-phone="true"] .pf-composer-chip { align-self: stretch; justify-content: space-between; border-radius: var(--radius-lg); }
.pf-chat[data-phone="true"] .pf-composer-chip button { min-width: 32px; min-height: 32px; justify-content: center; }

/* ---------------------------------------------------------------------
   The archive by day (prototype 26, M7)
   ------------------------------------------------------------------ */

.pf-chat-rescount { margin: 0; padding: 12px 12px 0; font-size: 16px; font-weight: 700; color: var(--neutral-900); }
/* Nothing scrolls sideways at 390 px: a long reference is cut, never stretching its card. */
.pf-chat[data-phone="true"] .pf-chatday-cards,
.pf-chat[data-phone="true"] .pf-archived,
.pf-chat[data-phone="true"] .pf-archived__meta,
.pf-chat[data-phone="true"] .pf-question,
.pf-chat[data-phone="true"] .pf-question__box { min-width: 0; }
.pf-chat[data-phone="true"] .pf-archived__meta .pf-chat-chip { flex: 1 1 100%; }
.pf-chat[data-phone="true"] .pf-archived { padding: 12px; }
.pf-chat[data-phone="true"] .pf-archived__msg--answer { margin-left: 16px; }

/* A question opened from Chat's reference (story 5): the accent edge on it, in HELP-82's requirement or story sheet. */
#app[data-layout="phone"] .pf-cthread[data-flash="true"] { box-shadow: inset 4px 0 0 var(--brand-red); }
#app[data-layout="phone"] .pf-cthread[data-flash="true"]:focus-visible { box-shadow: inset 4px 0 0 var(--brand-red), var(--focus-ring); }

/* ---------------------------------------------------------------------
   HELP-90: Chat's ribbon on a phone, over the list only — the view
   switcher Chat | Cycle across the width (44 px), then the Show filter,
   Type and Sort, and the search
   ------------------------------------------------------------------ */

.pf-chat[data-phone="true"] .pf-chat-ribbon { gap: 8px; padding: 10px 12px; border-bottom: 0; background: var(--neutral-50); }
.pf-chat[data-phone="true"][data-pane="thread"] .pf-chat-ribbon { display: none; }
.pf-chat[data-phone="true"] .pf-cy-switch { width: 100%; }
.pf-chat[data-phone="true"] .pf-cy-views { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
/* #app: above the phone's own 40 px segments (#app[data-layout="phone"] .pf-seg button). */
#app .pf-chat[data-phone="true"] .pf-cy-views button { justify-content: center; min-height: 44px; }
.pf-chat[data-phone="true"] .pf-chat-seg button { justify-content: center; }
/* A wrapping row, not the phone's column ribbon: the switcher and Show across the width, then Type, Sort and the search on one line. */
#app .pf-chat[data-phone="true"] .pf-chat-ribbon { flex-direction: row; flex-wrap: wrap; align-items: center; }
#app .pf-chat[data-phone="true"] .pf-chat-ribbon > .pf-cy-switch,
#app .pf-chat[data-phone="true"] .pf-chat-ribbon > .pf-chat-seg { flex: 1 1 100%; }
#app .pf-chat[data-phone="true"] .pf-chat-ribbon > .pf-menuwrap { flex: none; }
#app .pf-chat[data-phone="true"] .pf-chat-ribbon > .pf-ribbon-search { flex: 1 1 140px; min-width: 0; }
.pf-chat[data-phone="true"] .pf-chat-seg button { padding: 0 6px; font-size: 14px; white-space: nowrap; }