/* =====================================================================
   public/app/inbox.css: the Inbox in the Home design (14 October 2026)

   The list and the open chat are one soft card, as Home's tiles, split by a hairline (the owner: no gap between
   them; one tool, read left to right), in the list system the owner chose (version 3: 10px corners, quiet buttons,
   the plain status chip; tokens in shell.css). Each row is an avatar, who, when, what was said and at most one status
   pill; the visitor's words sit on the pale accent, UNLOOK's on a raised grey.
   Every colour and size is a token from shell.css and the sheets before it. Hover only where a pointer hovers.
   ===================================================================== */

/* ---------- one card: the list, a hairline, the chat ---------- */
.inbox.card{gap:0;overflow:hidden;border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
.inbox .ib-list{border-right:1px solid var(--hair-2)}

/* ---------- the filters and the search ---------- */
.inbox .ib-tools{gap:12px;padding:18px 16px 14px;border-bottom:1px solid var(--hair)}
.inbox .ib-tools .t-tabs{gap:6px;padding:0;border:0;border-radius:0;background:none}
.inbox .ib-tools .t-tabs-pill{display:none}
.inbox .ib-tools .t-tab{flex:none;gap:6px;height:var(--h-filter);padding:0 12px;border-radius:var(--r-btn);background:var(--chip-off);box-shadow:inset 0 0 0 1px var(--chip-off-ring);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;color:var(--ink-2);
  transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.inbox .ib-tools .t-tab[aria-selected="true"]{background:var(--chip-on);box-shadow:var(--chip-on-hi);font-weight:600;color:var(--on-chip-on)}
.inbox .ib-tools .t-tab .n{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.inbox .ib-tools .t-tab[aria-selected="true"] .n{color:var(--chip-on-n)}
@media (hover:hover){.inbox .ib-tools .t-tab:not([aria-selected="true"]):hover{background:var(--chip-off-hover);color:var(--ink)}}
.inbox .ib-tools .t-tab:active{scale:.96}
.inbox .ib-tools .search{height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--tile-ring)}
.inbox .ib-tools .search:focus-within{box-shadow:inset 0 0 0 1px var(--tile-ring),0 0 0 2px var(--focus)}

/* ---------- the rows: avatar, who and when; what was said; a quiet line and one pill ---------- */
.inbox .ib-items{padding:8px}
.inbox .ib-item{grid-template-columns:var(--av-list) minmax(0,1fr) auto;grid-template-areas:"av b t" "av p p" ". g g";column-gap:12px;row-gap:3px;padding:11px 12px;border-radius:var(--r-row-tint)}
.inbox .ib-item+.ib-item{margin-top:2px}
@media (hover:hover){.inbox .ib-item:hover{background:var(--row-hover)}}
/* the open chat: a clearly lighter row and a short accent bar on its left edge (the owner: easy to see which is open) */
.inbox .ib-item.sel{background:var(--btn-2-hover);box-shadow:var(--nav-cur-lift)}
.inbox .ib-item.sel::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--lime)}
.inbox .ib-item.sel b{color:var(--ink)}
.inbox .ib-item.is-urgent:not(.sel){background:var(--urgent-row);box-shadow:inset 0 0 0 1px var(--urgent-edge)}
.ib-av{grid-area:av;align-self:start;display:grid;place-items:center;width:var(--av-list);height:var(--av-list);border-radius:50%;background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;color:var(--avatar-ink)}
.ib-av svg.i{width:15px;height:15px;color:var(--ink-2)}
.inbox .ib-item b{grid-area:b;align-self:center;font-weight:600;color:var(--ink)}
.inbox .ib-item time{grid-area:t;align-self:center}
.inbox .ib-item .p{grid-area:p;color:var(--ink-2)}
.inbox .ib-item .tg{grid-area:g;align-items:center;gap:8px;margin-top:6px}

/* ---------- the open chat ---------- */
.inbox .cv-h{flex:none;gap:14px;min-height:76px;padding:16px 18px 16px 22px;border-bottom:1px solid var(--hair)}
.inbox .cv-h .c2 b{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.inbox .cv-h .c2 small{margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.inbox .cv-h .acts{gap:8px}
.inbox .cv-h .btn,.inbox #flag-bar .btn{gap:8px;height:var(--h-list-btn);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.inbox .cv-h .btn svg.i,.inbox #flag-bar .btn svg.i{width:16px;height:16px}
@media (hover:hover){.inbox .cv-h .btn:not(.btn-strong):hover,.inbox #flag-bar .btn:not(.btn-strong):hover{background:var(--btn-2-hover);color:var(--ink)}}
.inbox .cv-h .btn.btn-strong,.inbox #flag-bar .btn.btn-strong{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){.inbox .cv-h .btn.btn-strong:hover,.inbox #flag-bar .btn.btn-strong:hover{background:var(--lime-hover);color:var(--night)}}
.inbox #flag-bar .btn.btn-ghost{background:none;box-shadow:none;color:var(--ink-2)}
.inbox .cv-h .btn:active,.inbox #flag-bar .btn:active{scale:.96}
.inbox .cv-h .icon-btn{width:var(--h-field);height:var(--h-field);border-radius:var(--r-btn)}
.inbox .cv-lead{gap:10px 14px;padding:12px 22px;border-bottom:1px solid var(--hair)}
.inbox .cv-body{gap:12px;padding:24px 22px}
.inbox .cv-body>.reveal-wrap{gap:12px}
.inbox .msg .who{margin-bottom:5px;font-size:var(--fs-meta);font-weight:500;color:var(--ink-3)}
.inbox .msg .bub{padding:11px 15px;border-radius:var(--r-tile-sm);line-height:1.55}
.inbox .msg.us .bub{background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);color:var(--ink);border-bottom-left-radius:6px}
.inbox .msg.them .bub{background:var(--chip-on);box-shadow:var(--chip-on-hi);color:var(--on-chip-on);border-bottom-right-radius:6px}

/* ---------- one card at a time (the list, or the chat with a way back) ---------- */
@media (max-width:900px){
  .inbox .ib-list{border-right:0}
  .inbox .ib-conv .cv-h{background:var(--card-sheen)}
}
@media (max-width:720px){
  .inbox .ib-tools{padding:14px 12px 12px}
  .inbox .ib-tools .t-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .inbox .ib-tools .t-tab{flex:none;min-width:0;padding:0 14px}
  .inbox .ib-items{padding:6px}
  .inbox .cv-h{min-height:64px;padding:12px 12px 12px 8px;column-gap:6px}
  /* the header's first line is back, who, and Delete; Call and Details take a line of their own under the name */
  .inbox .cv-h .acts{display:contents}
  .inbox .cv-h .c2{order:1;flex:1 1 0;min-width:0}
  .inbox .cv-h .cv-del{order:2;align-self:flex-start}
  .inbox .cv-h::after{content:"";order:3;flex-basis:100%;height:0}
  .inbox .cv-h .btn{order:4}
  .inbox .cv-h .acts>.btn:first-child{margin-inline-start:50px}
  .inbox .cv-body{padding:18px 14px}
  .inbox .msg{max-width:86%}
}
@media (pointer:coarse){
  .inbox .ib-tools .t-tabs .t-tab{height:40px}
  .inbox .ib-tools .t-tab::after{content:"";position:absolute;inset:-2px 0}
  .inbox .ib-tools .search{height:var(--h-touch)}
  .inbox .cv-h .icon-btn{width:var(--h-touch);height:var(--h-touch)}
  .inbox .cv-h .btn,.inbox #flag-bar .btn{height:var(--h-ctl)} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
  .inbox .cv-h .c2 b a{position:relative}
  .inbox .cv-h .c2 b a::after{content:"";position:absolute;inset:-11px -4px}
  .inbox #flag-bar .icon-btn{width:var(--h-touch);height:var(--h-touch)}
}
@media (prefers-reduced-motion:reduce){
  .inbox .ib-tools .t-tab{transition:none}
  .inbox .ib-tools .t-tab:active,.inbox .cv-h .btn:active,.inbox #flag-bar .btn:active{scale:1}
}
/* the question an answer is saved under, above the answer (the check of 15 Oct): short, the owner's to change */
.fb-in .fb-q{display:block;width:100%;margin-bottom:8px}