/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* ════════════════════════════════════════════════════════════════
   NACHRICHTEN v3 — the office↔driver line.

   The page is src/features/chat/chat.page.ts →
   public/js/pages/chat.js; this sheet holds every .ch3-* rule.
   Token-native under .mt-scope — dark mode is a token swap, never a
   parallel rule set. The driver PWA's .chat-* rules live in its own
   sheet and are unrelated. Two panes; on the phone one at a time
   (.has-room slides the list away).
   ════════════════════════════════════════════════════════════════ */

.ch3-wrap { display: flex; flex: 1; min-height: 0; }
.ch3-ic { flex: 0 0 auto; }
.ch3-av { flex: 0 0 auto; }
.ch3-avfall { display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .68rem; font-weight: 800; flex: 0 0 auto; }

/* ── thread list ────────────────────────────────────────────────── */
.ch3-list { display: flex; flex-direction: column; width: 320px; flex: 0 0 320px; min-height: 0; overflow-y: auto; border-inline-end: 1px solid var(--border-subtle); background: var(--surface-card); }
.ch3-list-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface-card); border-block-end: 1px solid var(--border-subtle); }
.ch3-search { display: flex; align-items: center; gap: 7px; flex: 1; padding: 0 10px; height: 38px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-muted); }
.ch3-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .8rem; }
.ch3-search input:focus { outline: none; }
.ch3-search:focus-within { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.ch3-new { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--accent-fill-solid); color: var(--accent-contrast); cursor: pointer; flex: 0 0 auto; }
.ch3-new:hover { filter: brightness(1.06); }
.ch3-new:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }

.ch3-picker { display: flex; flex-direction: column; padding: 8px; gap: 2px; border-block-end: 1px solid var(--border-subtle); background: var(--surface-inset); }
.ch3-picker-h { margin: 2px 4px 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ch3-pick { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; text-align: start; }
.ch3-pick span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-pick .ch3-ic:last-child { color: var(--text-muted); }
.ch3-pick:hover { background: var(--surface-inset); }
.ch3-pick:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; }
.ch3-empty-line { margin: 8px; font-size: .76rem; color: var(--text-muted); }

.ch3-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 9px 12px; border: 0; border-block-end: 1px solid var(--border-subtle); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ch3-row:hover { background: var(--surface-inset); }
.ch3-row.is-on { background: var(--accent-soft); }
.ch3-row.is-unread .ch3-row-top b { font-weight: 800; }
.ch3-row:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; }
.ch3-row-ic { flex: 0 0 auto; }
/* a ride's thread wears the route, not a person (2026-10-29); its corner is
   the avatars' own (.rounded-md, the scope's 11 px) */
.ch3-ride-ic { display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--surface-inset); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.ch3-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ch3-row-top { display: flex; align-items: baseline; gap: 8px; }
.ch3-row-top b { flex: 1; font-size: .84rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-row-top time { font-size: .66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ch3-row-sub { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-row-prev { font-size: .74rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-row-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill-solid); color: var(--accent-contrast); font-size: .66rem; font-weight: 800; flex: 0 0 auto; }

/* ── the room ───────────────────────────────────────────────────── */
.ch3-room { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--surface-page); }
.ch3-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--border-subtle); background: var(--surface-card); }
.ch3-back { display: none; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--surface-inset); color: var(--text-secondary); cursor: pointer; }
/* the header's person: in a direct line avatar + name are ONE link to the
   Personalakte (2026-10-29) — a pointer, a quiet hover, the focus ring;
   without a file or without the section it is the same box as text. */
.ch3-head-who { display: flex; flex: 1; min-width: 0; }
.ch3-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; margin-inline-start: -6px; padding: 4px 8px 4px 6px; border-radius: 12px; color: inherit; text-decoration: none; }
.ch3-person.is-link { cursor: pointer; transition: background var(--mb-dur-fast, 150ms); }
.ch3-person.is-link:hover { background: var(--surface-inset); }
.ch3-person.is-link:hover b { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.ch3-person.is-link:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.ch3-head-av { flex: 0 0 auto; display: inline-flex; }
.ch3-head-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ch3-head-id b { font-size: .9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-head-id span { font-size: .7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-head-del { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
.ch3-head-del:hover { background: var(--status-expired-soft); color: var(--status-expired-text); }

.ch3-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
/* One spacing rule, on the containers (2026-10-29): a sender change is
   the list's gap, the same sender's next bubble the group's. No bubble
   carries a margin of its own. */
#ch3-msgs { display: flex; flex-direction: column; gap: 22px; }
.ch3-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ch3-group.is-mine { align-items: flex-end; }
.ch3-day { display: flex; justify-content: center; }
.ch3-day span { padding: 3px 12px; border-radius: 999px; background: var(--surface-inset); color: var(--text-muted); font-size: .68rem; font-weight: 700; }
.ch3-msg { display: flex; flex-direction: column; max-width: min(78%, 620px); }
/* a ride's thread: each run opens with the sender's face and whole name,
   a link to their own Personalakte when they have one (2026-10-29) */
.ch3-who { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-block-end: -2px; padding: 2px 8px 2px 2px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--text-secondary); text-decoration: none; }
.ch3-who-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch3-who.is-link { cursor: pointer; transition: background var(--mb-dur-fast, 150ms), color var(--mb-dur-fast, 150ms); }
.ch3-who.is-link:hover { background: var(--surface-inset); color: var(--text-primary); }
.ch3-who.is-link:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
/* the bubble and its actions on one line: the actions BESIDE it, toward
   the middle of the room, vertically centred — never over the words.
   row-reverse on the office's side mirrors by itself in RTL. */
.ch3-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch3-msg.is-mine .ch3-line { flex-direction: row-reverse; }
.ch3-bubble { position: relative; display: inline-flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 12px; border-radius: var(--radius-bubble); background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: .84rem; line-height: 1.45; }
.ch3-msg.is-mine .ch3-bubble { background: var(--accent-soft); border-color: transparent; }
/* the messenger shape, from the group: the sender's side of every bubble
   but the first is joined at the top, every bubble but the last at the
   bottom, and the last one carries the tail. Logical corners only. */
.ch3-msg .ch3-bubble { border-end-start-radius: var(--radius-bubble-joined); }
.ch3-msg + .ch3-msg .ch3-bubble { border-start-start-radius: var(--radius-bubble-joined); }
.ch3-msg:last-child .ch3-bubble { border-end-start-radius: var(--radius-bubble-tail); }
.ch3-msg.is-mine .ch3-bubble { border-end-start-radius: var(--radius-bubble); border-end-end-radius: var(--radius-bubble-joined); }
.ch3-msg.is-mine + .ch3-msg.is-mine .ch3-bubble { border-start-start-radius: var(--radius-bubble); border-start-end-radius: var(--radius-bubble-joined); }
.ch3-msg.is-mine:last-child .ch3-bubble { border-end-end-radius: var(--radius-bubble-tail); }
.ch3-msg.is-gone .ch3-bubble { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--text-muted); font-style: italic; font-size: .76rem; }
.ch3-text { white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; unicode-bidi: plaintext; }
.ch3-meta { font-size: .64rem; color: var(--text-muted); align-self: flex-end; font-variant-numeric: tabular-nums; }
.ch3-imgbtn { padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.ch3-img { display: block; max-width: 260px; max-height: 240px; border-radius: 10px; }
.ch3-acts { display: inline-flex; flex: 0 0 auto; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--mb-dur-fast, 150ms); }
.ch3-msg:hover .ch3-acts, .ch3-msg:focus-within .ch3-acts { opacity: 1; pointer-events: auto; }
.ch3-acts button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.ch3-acts button:hover { background: var(--surface-inset); color: var(--text-primary); }
.ch3-acts button[data-act="del-msg"]:hover { background: var(--status-expired-soft); color: var(--status-expired-text); }
.ch3-acts button:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }

.ch3-jump { position: sticky; inset-block-end: 6px; inset-inline-start: 100%; transform: translateX(-100%); display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-sm); }
.ch3-jump:hover { color: var(--text-primary); }
.ch3-jump.hidden { display: none !important; }

/* ── composer ───────────────────────────────────────────────────── */
.ch3-composer { display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 12px; border-block-start: 1px solid var(--border-subtle); background: var(--surface-card); }
.ch3-canned { display: flex; gap: 6px; flex-wrap: wrap; }
.ch3-canned button { min-height: 30px; padding: 0 11px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.ch3-canned button:hover { background: var(--surface-inset); color: var(--text-primary); }
.ch3-emoji { display: flex; gap: 2px; flex-wrap: wrap; }
.ch3-emoji button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; font-size: 1rem; cursor: pointer; }
.ch3-emoji button:hover { background: var(--surface-inset); }
.ch3-input-row { display: flex; align-items: flex-end; gap: 8px; }
.ch3-attach, .ch3-send { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; flex: 0 0 auto; }
.ch3-attach { background: var(--surface-inset); color: var(--text-secondary); }
.ch3-attach:hover { background: var(--surface-inset); color: var(--text-primary); }
.ch3-send { background: var(--accent-fill-solid); color: var(--accent-contrast); }
.ch3-send:hover:not(:disabled) { filter: brightness(1.06); }
.ch3-send:disabled { opacity: .5; cursor: default; }
.ch3-composer textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 160px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 12px; background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .84rem; resize: none; }
.ch3-composer textarea:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
/* the attachments, ABOVE the field (2026-10-29): one row, equal gaps,
   scrolling sideways when they do not fit; the remove button sits on
   each image's top end corner — always visible, a dark disc, a white ×. */
.ch3-pending { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-block: 2px; }
.ch3-thumb { position: relative; flex: 0 0 auto; display: inline-flex; }
.ch3-thumb img { display: block; height: 72px; max-width: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-subtle); }
.ch3-thumb-x { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--mt-ink) 72%, transparent); color: var(--mt-white); cursor: pointer; }
.ch3-thumb-x:hover { background: color-mix(in srgb, var(--mt-ink) 88%, transparent); }
.ch3-thumb-x:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.ch3-pending.hidden { display: none !important; }

/* ── empty / blank states ───────────────────────────────────────── */
.ch3-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 30px; text-align: center; color: var(--text-muted); }
.ch3-blank b { font-size: .92rem; color: var(--text-primary); }
.ch3-blank p { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; max-width: 52ch; line-height: 1.55; }
.ch3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--text-muted);  border-radius: 18px; border: 1px dashed var(--border-strong); margin: 4px 0;}
.ch3-empty b { font-size: .86rem; color: var(--text-primary); }
.ch3-empty p { margin: 0; font-size: .74rem; max-width: 34ch; line-height: 1.55; }
.ch3-empty.hidden { display: none !important; }

/* ── phone: one pane at a time ──────────────────────────────────── */
@media (max-width: 860px) {
  .ch3-list { width: 100%; flex: 1; border-inline-end: 0; }
  .ch3-wrap .ch3-room { display: none; }
  .ch3-wrap.has-room .ch3-room { display: flex; flex: 1; }
  .ch3-wrap.has-room .ch3-list { display: none; }
  .ch3-back { display: inline-grid; }
  .ch3-msg { max-width: 92%; }
  /* a phone has no hover: the actions stay beside the bubble */
  .ch3-acts { opacity: 1; pointer-events: auto; }
  .ch3-row, .ch3-canned button { min-height: 44px; }
}

/* ── calm by default ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ch3-wrap * { transition: none !important; animation: none !important; }
  .ch3-scroll { scroll-behavior: auto !important; }
}