/* Lane C features (web/features/*): palette, menus, quiet hours ledger, catch-up, pins, follow up, ask, saved, pass
   notes. Linked from index.html and precached by sw.js. Tokens only (web/tokens.css); the Qlaas language: pills for
   controls, 28/32 cards, hairlines, flat (no gradients, no shadows, no scale). Motion: colour 240 ms ease-soft;
   the palette enters like a sheet (480 ms ease-settle, opacity + 12 px) and leaves in 240 ms; reduced motion drops
   every transform. Logical properties throughout (RTL). */

:root { --fx-d1: var(--d1); --fx-d2: var(--d2); --fx-d3: var(--d3); --fx-in: var(--ease-settle); --fx-out: var(--ease-soft); }

/* --- shared ---------------------------------------------------------------------------------------------------- */
.fx-sub { color: var(--t2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.fx-meta { color: var(--t3); font-size: var(--fs-micro); line-height: var(--lh-micro); font-feature-settings: "tnum"; }
.fx-link { color: var(--t1); font-size: var(--fs-body-s); line-height: var(--lh-body-s); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 4px 2px; min-height: 32px; flex: none; }
.fx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-acts .btn.primary { flex: 1 1 auto; }
.fx-choices { display: grid; gap: 8px; }
.fx-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 12px 24px; border-radius: var(--r-pill); background: var(--s2); color: var(--t1); text-align: start; transition: var(--tint); }
.fx-choice:hover { background: color-mix(in srgb, var(--t1) 8%, var(--s2)); }
.fx-choice > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.fx-rowbtn { width: 100%; text-align: start; color: var(--t1); }
.fx-rowbtn .cmid { display: grid; }
.fx-rowbtn .prev { color: var(--t2); }
.fx-pal kbd, .fx-keys kbd { font-family: var(--mono); font-size: var(--fs-micro); line-height: 1rem; padding: 0 4px; border: 1px solid var(--ctl); border-radius: 4px; color: var(--t2); font-feature-settings: "tnum"; }

/* --- popover menu ------------------------------------------------------------------------------------------------ */
.fx-menu { position: fixed; z-index: 70; display: grid; padding: 8px; border-radius: var(--r-row); background: var(--solid); border: 1px solid var(--line); color: var(--t1); animation: fx-pop var(--d2) var(--ease-soft); }
.fx-menu [role=menuitem] { text-align: start; min-height: var(--tap-min); padding: 8px 16px; border-radius: var(--r-in); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--t1); overflow-wrap: anywhere; transition: var(--tint); }
.fx-menu [role=menuitem]:hover, .fx-menu [role=menuitem]:focus-visible { background: var(--s2); }
.fx-menu [role=menuitem]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fx-menu .danger { color: var(--danger); }
@keyframes fx-pop { from { opacity: 0; } to { opacity: 1; } }

/* the message ⋯ (only when the app has no message menu of its own) */
.bub:has(> .fx-mact), .icard:has(> .fx-mact), .intent-card:has(> .fx-mact), .msg:has(.fx-mact) { position: relative; }
.fx-mact { position: absolute; inset-block-start: 50%; inset-inline-end: -40px; transform: translateY(-50%); }
.me > .fx-mact, .msg[data-me="1"] .fx-mact { inset-inline-end: auto; inset-inline-start: -40px; }
.icard > .fx-mact, .intent-card > .fx-mact, .msg[data-me] .intent-card > .fx-mact { inset-block-start: 12px; inset-inline-end: 12px; inset-inline-start: auto; transform: none; }
/* full-width rows (transcript; letter, theirs) keep the button inside the column: 40 px reserved at the row's end, so it never leaves the scroller */
[data-msg="transcript"] .msg:has(> .bubble > .fx-mact, > .fx-mact), [data-msg="letter"] .msg[data-me="0"]:has(.fx-mact) { padding-inline-end: 48px; }
[data-msg="transcript"] .msg .fx-mact, [data-msg="letter"] .msg[data-me="0"] .fx-mact { inset-inline-start: auto; inset-inline-end: -40px; }
.icard:has(> .fx-mact) > .cap, .intent-card:has(> .fx-mact) > .cap, .intent-card:has(> .fx-mact) > .ic-label { padding-inline-end: 32px; }
.fx-mact .icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; color: var(--t3); border-radius: var(--r-pill); display: grid; place-items: center; }
.fx-mact .icon-btn:hover { color: var(--t1); background: var(--s2); }
@media (hover: hover) {
  .fx-mact { opacity: 0; transition: opacity var(--d2) var(--ease-soft); }
  .bub:hover > .fx-mact, .bub:focus-within > .fx-mact, .icard:hover > .fx-mact, .icard:focus-within > .fx-mact,
  .msg:hover .fx-mact, .msg:focus-within .fx-mact, .fx-mact:has([aria-expanded=true]) { opacity: 1; }
}

/* --- command palette: a pane; the search field is a pill ---------------------------------------------------------- */
.fx-pal-wrap { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: transparent; transition: background var(--d2) var(--ease-soft); }
.fx-pal-wrap.in { background: var(--scrim); transition-duration: var(--d3); transition-timing-function: var(--ease-settle); }
.fx-pal { width: min(640px, 100%); max-height: min(600px, 76dvh); display: flex; flex-direction: column; background: var(--solid); color: var(--t1); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  opacity: 0; transform: translateY(12px); transition: opacity var(--d2) var(--ease-soft), transform var(--d2) var(--ease-soft); }
.fx-pal-wrap.in .fx-pal { opacity: 1; transform: none; transition-duration: var(--d3); transition-timing-function: var(--ease-settle); }
.fx-pal-field { display: flex; align-items: center; gap: 12px; margin: 12px 12px 4px; padding: 0 24px; min-height: var(--tap-primary); border-radius: var(--r-pill); background: var(--s2); color: var(--t2); }
.fx-pal-in { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: var(--t1); font-size: 1.0625rem; line-height: 1.5rem; outline: none; }
.fx-pal-in:focus-visible { outline: none; }
.fx-pal-field:focus-within { outline: 2px solid var(--ctl); outline-offset: 0; }
.fx-pal-scope { flex: none; font-size: var(--fs-body-s); padding: 4px 12px; border-radius: var(--r-pill); background: var(--solid); color: var(--t1); min-height: 32px; }
.fx-pal-scope[hidden] { display: none; }
.fx-pal-list { overflow: auto; padding: 8px 12px 12px; overscroll-behavior: contain; }
.fx-pal-cap { padding: 16px 12px 8px; }
.fx-pal-opt { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 12px; border-radius: var(--r-in); cursor: pointer; }
.fx-pal-opt[aria-selected=true] { background: var(--s2); }
.fx-pal-label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: var(--lh-body); }
.fx-pal-hint { flex: none; color: var(--t3); font-size: var(--fs-body-s); line-height: var(--lh-body-s); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-feature-settings: "tnum"; }
.fx-pal-keys { flex: none; }
.fx-pal-empty { padding: 32px 16px; color: var(--t2); text-align: center; font-size: var(--fs-body-s); }
.fx-pal-foot { display: flex; gap: 16px; padding: 12px 24px; border-block-start: 1px solid var(--line); color: var(--t3); font-size: var(--fs-micro); line-height: 1rem; }
.fx-pal-foot kbd { margin-inline-end: 2px; }
@media (max-width: 719px) {
  .fx-pal-wrap { padding: 8px; }
  .fx-pal { max-height: calc(100dvh - 16px); }
  .fx-pal-foot { display: none; }
  .fx-pal-in { font-size: var(--fs-body); }
  .fx-pal-field { padding-inline: 16px; }
}
.fx-keys { display: grid; grid-template-columns: max-content 1fr; gap: 12px 16px; margin: 0; align-items: baseline; }
.fx-keys dt { margin: 0; } .fx-keys dd { margin: 0; color: var(--t2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }

/* --- quiet hours, the ledger and the composer note --------------------------------------------------------------- */
.fx-line { display: flex; align-items: center; gap: 8px; padding: 8px 24px; color: var(--t2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-feature-settings: "tnum"; }
.fx-line .ic { color: var(--t3); }
.fx-line-t { flex: 1; min-width: 0; }
.fx-note { padding: 4px 16px; color: var(--t3); font-size: var(--fs-micro); line-height: var(--lh-micro); text-align: center; font-feature-settings: "tnum"; }
.fx-times { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; }
.fx-time { min-height: var(--tap-min); font-feature-settings: "tnum"; }
.fx-rings { display: grid; }
.fx-qh .prev.wrap { white-space: normal; }

/* --- catch-up ----------------------------------------------------------------------------------------------------- */
.fx-card { margin: 8px 12px 16px; padding: 16px 24px; border-radius: var(--r-card); background: var(--card); color: var(--t1); }
@media (min-width: 760px) { .fx-card { margin-inline: var(--gutter); } }
.fx-card-head { display: flex; align-items: flex-start; gap: 12px; }
.fx-cu-title { flex: 1; min-width: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: var(--w-heading); }
.fx-cu-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.fx-cu-link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap-min); padding: 8px 0; text-align: start; color: var(--t1); border-block-start: 1px solid var(--line); }
.fx-cu-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-body-s); }
.fx-cu-needs { color: var(--t1); font-weight: var(--w-heading); font-size: var(--fs-micro); }

/* --- pins + follow up in the list -------------------------------------------------------------------------------- */
.fx-row-pin { display: inline-flex; color: var(--t3); }
.fx-row-tag { color: var(--t2); font-size: var(--fs-micro); line-height: var(--lh-micro); white-space: nowrap; }
.fx-pins { padding: 8px 24px 8px; background: var(--bg); border-block-end: 1px solid var(--line); }
.fx-pins-head { display: flex; align-items: center; gap: 8px; color: var(--t3); }
.fx-pins-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fx-pin { display: flex; align-items: center; gap: 8px; }
.fx-pin-go { flex: 1; min-width: 0; text-align: start; min-height: 32px; padding: 4px 0; color: var(--t1); }
.fx-pin-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.fx-pins-more summary { cursor: pointer; color: var(--t2); font-size: var(--fs-micro); line-height: var(--lh-micro); padding: 4px 0; min-height: 24px; list-style: none; }
.fx-pins-more summary::-webkit-details-marker { display: none; }
@media (pointer: coarse) { .fx-pin-go { min-height: var(--tap-min); } }

/* --- per-chat nickname + tone ------------------------------------------------------------------------------------- */
.fx-tones { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fx-tones legend { margin-block-end: 8px; padding: 0; }
.fx-tone { display: grid; justify-items: start; gap: 8px; padding: 8px; border-radius: var(--r-row); border: 1px solid var(--line); cursor: pointer; font-size: var(--fs-body-s); color: var(--t1); }
.fx-tone:has(input:checked) { border-color: var(--t1); }
.fx-tone:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.fx-tone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fx-tone-sw { display: grid; gap: 3px; width: 100%; padding: 8px; border-radius: 12px; background: var(--bg); }
.fx-sw-them, .fx-sw-me { display: block; height: 6px; border-radius: 3px; width: 60%; background: var(--bub-them); }
.fx-sw-me { justify-self: end; background: var(--bub-me); }

/* --- ask ---------------------------------------------------------------------------------------------------------- */
.fx-ask-btn { display: inline-flex; align-items: center; gap: 4px; padding-inline: 8px; width: auto; color: var(--t2); }
.fx-ask-btn:hover { color: var(--t1); }
.fx-ask-t { font-size: var(--fs-body-s); }
@media (max-width: 419px) { .fx-ask-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
/* in the composer's + popover it is a menu row: the label always shows */
.menu > .fx-ask-btn .fx-ask-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: inherit; }
.fx-slots { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-slots legend { padding: 0; margin-block-end: 8px; }
.fx-slot { min-height: var(--tap-min); font-feature-settings: "tnum"; }
.fx-preview { padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); color: var(--t1); display: grid; gap: 8px; }
.fx-preview h3 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--w-heading); overflow-wrap: anywhere; }
.fx-preview-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-preview-opts li { padding: 12px 24px; border-radius: var(--r-pill); background: var(--s2); font-size: var(--fs-body); overflow-wrap: anywhere; }

/* --- saved, ack, pass notes --------------------------------------------------------------------------------------- */
.fx-saved .rows { list-style: none; margin: 0; padding: 0; }
.fx-saved-row .cmid { min-width: 0; flex: 1; }
.fx-saved-row .prev { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-gone { font-style: italic; color: var(--t3) !important; }
.fx-ack { color: var(--t3); }
.fx-passnote { display: grid; gap: 8px; }
.fx-note-in { resize: vertical; min-height: 64px; }

@supports (corner-shape: superellipse(1.25)) { .fx-menu, .fx-menu [role=menuitem], .fx-pal, .fx-pal-opt, .fx-card, .fx-tone, .fx-tone-sw, .fx-preview { corner-shape: var(--q-shape); } }
@media (prefers-reduced-motion: reduce) {
  .fx-menu { animation: none; }
  .fx-pal, .fx-pal-wrap.in .fx-pal { transform: none; transition-duration: var(--d1); }
  .fx-mact { transition: none; }
}