/* View-level layout for F2. Depends on tokens.css + base.css + components.css.
 * Additive: no F1 rule is overridden. Logical properties only.
 */

/* ============================================== INBOX WORKSPACE ======== */

.inbox {
  display: grid;
  grid-template-columns: var(--thread-list-w) minmax(0, 1fr) var(--context-w);
  block-size: calc(100dvh - var(--header-h) - var(--pageheader-h));
  min-block-size: 0;
}

.inbox-list {
  display: flex; flex-direction: column;
  min-inline-size: 0; min-block-size: 0;
  background: var(--bg-sunken);
  border-inline-end: var(--bw) solid var(--border-default);
}
.inbox-list-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior-y: contain; }

.inbox-thread {
  display: flex; flex-direction: column;
  min-inline-size: 0; min-block-size: 0;
  background: var(--bg-surface);
}

.inbox-context {
  min-inline-size: 0; min-block-size: 0;
  overflow-y: auto;
  background: var(--bg-surface);
  border-inline-start: var(--bw) solid var(--border-default);
  padding: var(--s-6);
}

/* --- thread list row --------------------------------------------------- */

.thread-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  inline-size: 100%;
  padding: var(--s-4) var(--s-5);
  text-align: start;
  background: var(--bg-surface);
  border-block-end: var(--bw) solid var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.thread-row:hover { background: var(--bg-hover); }
.thread-row[aria-selected="true"] {
  background: var(--bg-selected);
  box-shadow: inset 2px 0 0 0 var(--accent-6);
}
[dir="rtl"] .thread-row[aria-selected="true"] { box-shadow: inset -2px 0 0 0 var(--accent-6); }
.thread-row:focus-visible { box-shadow: var(--focus-ring); }
/* Needs-attention carries a rule AND the ownership chip - never colour alone. */
.thread-row.is-waiting { box-shadow: inset 2px 0 0 0 var(--warning-fill); }
[dir="rtl"] .thread-row.is-waiting { box-shadow: inset -2px 0 0 0 var(--warning-fill); }
.thread-row.is-waiting[aria-selected="true"] { box-shadow: inset 2px 0 0 0 var(--accent-6); }
[dir="rtl"] .thread-row.is-waiting[aria-selected="true"] { box-shadow: inset -2px 0 0 0 var(--accent-6); }

.thread-row-icon { color: var(--text-tertiary); padding-block-start: 2px; }
.thread-row-top { display: flex; align-items: baseline; gap: var(--s-3); }
.thread-row-preview { color: var(--text-secondary); }

/* --- ownership banner -------------------------------------------------- */

.ownership {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-block-end: var(--bw) solid var(--border-subtle);
  background: var(--bg-subtle);
}
.ownership.is-waiting { background: var(--warning-1); border-block-end-color: var(--warning-2); }
.ownership.is-mine    { background: var(--accent-1);  border-block-end-color: var(--accent-2); }
.ownership.is-other   { background: var(--bg-sunken); }

/* --- message stream ---------------------------------------------------- */

.stream {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior-y: contain;
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.msg { display: flex; flex-direction: column; gap: var(--s-2); max-inline-size: 68ch; }
.msg-bubble {
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--border-subtle);
  border-radius: var(--r-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* Three authorship classes. Surface is never the only cue: each carries a chip
 * and an alignment as well. */
.msg-customer .msg-bubble { background: var(--msg-customer-bg); }
.msg-ai .msg-bubble {
  background: var(--msg-ai-bg);
  border-inline-start: 2px solid var(--msg-ai-rule);
}
.msg-human { align-self: flex-end; align-items: flex-end; }
.msg-human .msg-bubble { background: var(--msg-human-bg); border-color: var(--accent-2); }

.msg-failed .msg-bubble { border-color: var(--danger-2); background: var(--danger-1); }

.stream-day {
  align-self: center;
  padding: var(--s-1) var(--s-4);
  background: var(--bg-sunken);
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  font-size: var(--t-meta-size);
}

/* --- composer ---------------------------------------------------------- */

.composer {
  flex: none;
  border-block-start: var(--bw) solid var(--border-default);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  padding-block-end: max(var(--s-5), env(safe-area-inset-bottom));
}
.composer-row { display: flex; align-items: flex-end; gap: var(--s-4); }
.composer .textarea { min-block-size: 44px; max-block-size: 160px; }
.composer-blocked {
  display: flex; align-items: flex-start; gap: var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-secondary-size);
}

/* ============================================== RESPONSIVE ============= */

/* Laptop: context becomes a toggle, not a permanent column. */
@media (max-width: 1439px) {
  .inbox { grid-template-columns: var(--thread-list-w) minmax(0, 1fr); }
  .inbox-context { display: none; }
  .inbox.show-context .inbox-context {
    display: block;
    position: fixed; inset-block: 0; inset-inline-end: 0;
    inline-size: min(var(--drawer-w), 100%);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-2);
  }
}

/* Tablet and phone: master-detail stack. One pane at a time, so a 375px
 * viewport shows a usable conversation rather than three crushed columns. */
@media (max-width: 1023px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox .inbox-list { border-inline-end: 0; }
  .inbox[data-pane="list"] .inbox-thread { display: none; }
  .inbox[data-pane="thread"] .inbox-list { display: none; }
}
@media (min-width: 1024px) {
  .inbox-back { display: none; }
}

@media (max-width: 767px) {
  .inbox { block-size: calc(100dvh - var(--header-h) - var(--pageheader-h) - 56px); }
  .msg { max-inline-size: 100%; }
}

/* ============================================== PLACEHOLDER ============ */


/* ============================================== CONTEXT PANE CONTROL === */

/* At >=1440px the contact pane is a permanent third column, so the toggle and
 * its close button are noise. Below that the pane is a fixed overlay and the
 * controls are the ONLY way to reach it - see views/inbox.js. */
@media (min-width: 1440px) {
  .inbox-context-toggle,
  .inbox-context-close { display: none; }
}

/* The overlay form needs its own scroll and a shadow that reads on either side,
 * so the shadow is set per-direction rather than with a physical offset. */
@media (max-width: 1439px) {
  .inbox.show-context .inbox-context { overscroll-behavior: contain; }
}

/* The header's navigation toggle collapses the sidebar to a rail. Below 768px
 * the sidebar is display:none and the tab bar replaces it, so the control had
 * nothing to act on - a visible button that did nothing. The tab bar's "More"
 * covers the same need there. */
@media (max-width: 767px) {
  .app-header [data-nav-toggle] { display: none; }
}

/* ============================================== ATTENTION STRIP ======== */

/* Only non-zero segments are rendered (see data/attention.js), so this never
 * shows a row of reassuring zeroes. */
.attention { display: flex; flex-direction: column; gap: var(--s-4); }
.attention-title { color: var(--text-secondary); }
.attention-items {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.attention.is-clear {
  flex-direction: row; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-surface);
  border: var(--bw) solid var(--border-default);
  border-block-start-color: var(--border-bevel);
}
.attention-mark { display: inline-flex; margin-block: calc(var(--s-4) * -1); }
.attention-item {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--border-default);
  border-block-start-color: var(--border-bevel);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.attention-item:hover { background: var(--bg-hover); }
.attention-item:focus-visible { box-shadow: var(--focus-ring); }
.attention-item[aria-disabled="true"] { cursor: default; }
/* Severity is carried by an inline-start rule AND the label text, never by
 * colour alone. Waiting-for-a-person is the item that glows. */
.attention-item.is-warn  { border-inline-start: 2px solid var(--warning-fill); box-shadow: var(--glow-attention); }
.attention-item.is-error { border-inline-start: 2px solid var(--danger-6); }
.attention-count { line-height: 1; font-size: var(--t-metric-lg-size); }
.attention-item.is-warn .attention-count { color: var(--warning-6); }
.attention-label { color: var(--text-primary); font-size: var(--t-body-size); }
.attention-go { color: var(--text-tertiary); }
.attention-item:hover .attention-go { color: var(--text-primary); }

/* ============================================== TODAY LAYOUT ========== */

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 1023px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }

.live-row {
  display: flex; align-items: center; gap: var(--s-4);
  inline-size: 100%;
  padding: var(--s-4) var(--s-6);
  text-align: start;
  border-block-end: var(--bw) solid var(--border-subtle);
}
.live-row:last-child { border-block-end: 0; }
.live-row:hover { background: var(--bg-hover); }
.live-row:focus-visible { box-shadow: var(--focus-ring); }

.appt-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-block-end: var(--bw) solid var(--border-subtle);
}
.appt-row:last-child { border-block-end: 0; }
.appt-time { inline-size: 48px; flex: none; }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-6);
}
.metric { display: flex; flex-direction: column; gap: var(--s-2); }

/* ============================================== GAPS ================== */

.gap-row {
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-block-end: var(--bw) solid var(--border-subtle);
}
.gap-row:last-child { border-block-end: 0; }
.gap-row.is-covered { background: var(--bg-subtle); }

.gap-quote {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-sunken);
  border-inline-start: 2px solid var(--border-strong);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .gap-row { flex-direction: column; gap: var(--s-4); }
}

/* ==================================================== CALENDAR ======== *
 * One column per staff member, scrolling horizontally when there are more
 * people than fit. `grid-auto-flow: column` with a fixed track keeps every
 * column the same width whether a person has one appointment or nine, so the
 * day reads as a comparison rather than as a ragged list.
 *
 * Logical properties throughout: the columns must run right-to-left in Arabic
 * without a second stylesheet, and `padding-inline` / `border-inline-start` do
 * that on their own.
 */
.cal-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  padding-block-end: var(--s-2);
}
.cal-column {
  background: var(--bg-surface);
  border: var(--bw) solid var(--border-subtle);
  border-radius: var(--r-md);
  min-inline-size: 0;
}
.cal-column-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-block-end: var(--bw) solid var(--border-subtle);
  background: var(--bg-subtle);
  border-start-start-radius: var(--r-md);
  border-start-end-radius: var(--r-md);
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}
.cal-column-head .badge { margin-inline-start: auto; }
.cal-column > .stack { padding: var(--s-3); }

.cal-item {
  border: var(--bw) solid var(--border-subtle);
  border-inline-start: 3px solid var(--accent-6);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--bg-surface);
}
/* A finished appointment is still readable - an operator often needs to look
 * one up - but it recedes, because it is not work any more. */
.cal-item.is-terminal {
  border-inline-start-color: var(--border-strong);
  background: var(--bg-subtle);
}
.cal-item.is-terminal .t-strong { color: var(--text-secondary); }
.cal-item.is-focused { outline: 2px solid var(--accent-6); outline-offset: 2px; }

.visit-journey-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.visit-journey-step {
  min-inline-size: 0;
  padding: var(--s-4);
  border: var(--bw) solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
.visit-journey-step h3 { font-size: 0.875rem; margin: 0 0 var(--s-2); }
[data-visit-context] { overflow-wrap: anywhere; }
@media (max-width: 800px) { .visit-journey-steps { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .cal-grid { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}

/* ============================================== SETUP CHECKLIST ======= */

/* "Set up ASAS" - only while the server says tenant setup is incomplete. The
 * meter fills with the filament's gold (a fill, never a glow); the next step
 * is the one primary action on the screen. */
.setup-meter {
  block-size: 2px; margin-inline: var(--s-6); margin-block-end: var(--s-2);
  background: var(--border-default); border-radius: var(--r-full); overflow: hidden;
}
.setup-meter > span {
  display: block; block-size: 100%; background: var(--accent-3); border-radius: var(--r-full);
  transition: inline-size var(--dur-slow) var(--ease-out);
}
.setup-steps { display: flex; flex-direction: column; padding: var(--s-2) 0 var(--s-3); }
.setup-step {
  display: flex; align-items: center; gap: var(--s-4);
  min-block-size: var(--row-comfortable);
  padding: var(--s-2) var(--s-6);
  border-block-start: var(--bw) solid var(--border-subtle);
}
.setup-step:first-child { border-block-start: 0; }
.setup-state {
  display: inline-grid; place-items: center;
  inline-size: 22px; block-size: 22px; border-radius: var(--r-full);
  border: var(--bw) solid var(--border-input); color: var(--success-6);
}
.setup-step.is-done .setup-state { border-color: var(--success-6); background: var(--success-1); }
.setup-step.is-unknown .setup-state { border-style: dashed; }
.setup-step.is-next .setup-state { border-color: var(--accent-3); }
.setup-platform {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-block-start: var(--bw) solid var(--border-subtle);
  background: var(--bg-subtle);
}

/* ============================================================== USAGE ===== */

/* Meters for the tenant's own AI allowance. The fill is the filament's gold
 * while there is room, the attention colour from 80%, danger at the limit; the
 * words beside it always say the same thing, so colour is never alone. */
.usage-meter { display: flex; flex-direction: column; gap: var(--s-3); }
.usage-bar {
  block-size: 4px; border-radius: var(--r-full); overflow: hidden;
  background: var(--border-default);
}
.usage-bar > span { display: block; block-size: 100%; border-radius: var(--r-full); background: var(--accent-3); }
.usage-meter.is-warn .usage-bar > span { background: var(--warning-fill); }
.usage-meter.is-error .usage-bar > span { background: var(--danger-6); }

/* =============================================================== TEAM ===== */

/* A one-time link beside its Copy action. The link is LTR in both languages. */
.copy-field { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.copy-field > .input { flex: 1 1 16rem; min-inline-size: 0; }

/* A choice between two ways of doing something, each with its consequence. */
.choice-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.choice-group > legend { padding: 0; margin-block-end: var(--s-3); }
/* A checkbox or radio with a label and its consequence beneath it. */
.choice-line { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.choice-line > .checkbox, .choice-line > .radio { margin-block-start: 3px; }
.choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); cursor: pointer;
  border: var(--bw) solid var(--border-default);
}
.choice > .radio { margin-block-start: 3px; }
.choice:has(:checked) { border-color: var(--accent-6); }
.choice:has(:focus-visible) { box-shadow: var(--focus-ring); }

/* ============================================================ SETTINGS ==== */

/* Other names of a service: wrapping chips, each removable with a target of at
 * least 24px (WCAG 2.2, 2.5.8). */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.chip-list .chip-remove {
  min-inline-size: 24px; min-block-size: 24px; justify-content: center; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; line-height: 1;
}
.chip-list .chip-remove:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-full); }

/* What a service needs: one row per need, stacking on a phone. */
.needs-row { display: grid; grid-template-columns: 1fr 1.4fr 6rem auto; gap: var(--s-3); align-items: end; }
@media (max-width: 600px) { .needs-row { grid-template-columns: 1fr 1fr; } }

/* ============================================================= ACCOUNT ==== */

.session-list { list-style: none; margin: 0; padding: 0; }
.session-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-block: var(--s-4); border-block-end: var(--bw) solid var(--border-subtle);
}
.session-row:last-child { border-block-end: 0; }
/* A setup key or a recovery code is read and typed character by character. */
.setup-key {
  display: block; padding: var(--s-3) var(--s-4); font-size: 18px; letter-spacing: .08em;
  background: var(--bg-subtle); border: var(--bw) solid var(--border-default); overflow-wrap: anywhere;
}
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); padding-inline-start: var(--s-6); }
.steps { padding-inline-start: var(--s-6); }
.mfa-qr {
  display: block; inline-size: min(100%, 256px); margin-inline: auto;
  padding: 8px; background: #fff; border: 1px solid #d4d4d4;
}
.mfa-qr svg { display: block; inline-size: 100%; block-size: auto; }

/* ===================================================== ASAS ACCESS ======== */

.access-list { list-style: none; margin: 0; padding: 0; }
.access-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-block: var(--s-4); border-block-end: var(--bw) solid var(--border-subtle);
}
.access-row:last-child { border-block-end: 0; }