/* Bartix CRM — v5 (drafts/ui-v5/poczta.html and panele.html: their rules, their class names). The frame —
   top bar, left bar, the white sheet — and every screen. v4's global rules (app.css) still load for the
   windows v5 borrows, so v5's rules live under their screen's id — .top, .nav, #pmenu, #v-list, #v-search, #v-rules,
   #v-thread, #v-people, #v-person, #v-hist, #v-set, #v-sig, #v-tpl, #client-dlg, .v5-dlg, .lg, .fab, .scrim,
   .toast — and set what v4's rules would set. The phone block (≤ 720 px) is the prototype's phone design. */

/* ============================================================ the frame */
body:has(.app) { background: var(--page); overflow: hidden; }
.app { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "nav main";
  height: calc(100dvh - var(--banner)); font: 13px/1.4 var(--f); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
:where(.top, .nav, #v-list, #v-search, #v-rules, #menu, #fpop, .fab, .toast) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
:where(.top, .nav, #v-list, #v-search, #v-rules, #menu, #fpop) :is(input, select) { font: inherit; color: inherit; }
:where(.top, .nav, #v-list, #v-search, #v-rules, #menu, #fpop, .fab, .toast) :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app .sp { flex: 1; }
.app .muted { color: var(--ink-3); }
/* the text size (D11) zooms v5's own regions; v4's pages inside the sheet grow through rem */
.top, .nav, #v-list, #v-search, #v-rules, #menu, #fpop { zoom: var(--z); }

/* the avatars: a person's colour, the same on every screen */
:where(.top, #v-list, #v-search, #v-rules, #v-thread, #menu, #fpop) .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--ink-2); flex: none; }
:where(.top, #v-list, #v-search, #v-rules, #v-thread, #menu, #fpop) .av.g { background: #1F5BC4; } :where(.top, #v-list, #v-search, #v-rules, #v-thread, #menu, #fpop) .av.a { background: #16805A; } :where(.top, #v-list, #v-search, #v-rules, #v-thread, #menu, #fpop) .av.m { background: #A15F00; }

/* ---- top ---- */
.top { grid-area: top; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; }
.top .logo { display: flex; align-items: center; gap: 8px; width: calc(var(--nav) - 16px); flex: none; }
.top .logo b { font-weight: 700; font-stretch: 118%; font-size: 15px; letter-spacing: -.01em; }
.top .demo { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--red); border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px 0; line-height: 1.3; }
.top .search { flex: 1; max-width: 640px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); color: var(--ink-3); width: auto; }
.top .search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); outline: 0; }
.top .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.top .search input::placeholder { color: var(--ink-3); }
.top .me { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-2); white-space: nowrap; }
.top .ham { display: none; }

/* ---- nav ---- */
.nav { grid-area: nav; width: var(--nav); padding: 4px 10px 12px 12px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.nav > * { flex: none; }
.nav .compose { height: 40px; margin: 2px 2px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 2px rgba(23, 32, 43, .08); text-align: center; }
.nav .compose:hover { box-shadow: 0 2px 6px rgba(23, 32, 43, .16); }
.nav .it { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; color: var(--ink-2); width: 100%; }
.nav .it .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .it:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.nav .it.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav .it .n { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.nav .it.on .n, .nav .it .n.hot { color: var(--ink); font-weight: 700; }
.nav h5 { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 14px 10px 4px; display: flex; align-items: center; margin: 0; }
.nav h5 button { margin-left: auto; color: var(--ink-3); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; }
.nav h5 button:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.nav h5 .ico { width: 14px; height: 14px; }
.nav .it.more.on-more { color: var(--ink); }
:where(.nav, #v-list, #v-search, #v-rules, #menu, #fpop) .lbl { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c, var(--ink-3)); }

/* ---- the sheet ---- */
.app > .main { grid-area: main; margin: 0 14px 14px 0; background: var(--surface); border-radius: 16px; overflow: auto; position: relative; display: flex; flex-direction: column; min-width: 0; }
.view { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* tabs */
#v-list .tabs { display: flex; align-items: stretch; height: 46px; border-bottom: 1px solid var(--rule); padding: 0 8px; flex: none; }
#v-list .tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ink-2); position: relative; min-width: 150px; }
#v-list .tab:hover { background: var(--sunk); }
#v-list .tab.on { color: var(--accent); font-weight: 600; }
#v-list .tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
#v-list .tab .n { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--sunk); padding: 0 7px; border-radius: 999px; line-height: 18px; }
#v-list .tab .n:empty { display: none; }
#v-list .tab.on .n { color: var(--accent); background: var(--accent-tint); }
#v-list .tabs .pager { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; padding-right: 6px; }

/* the bulk bar */
#v-list .bar { height: 40px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--rule); flex: none; }
#v-list .bar > .chk { margin-right: 6px; }
#v-list .bar .ib { height: 30px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
#v-list .bar .ib:hover { background: var(--sunk); color: var(--ink); }
#v-list .bar .idle { display: flex; gap: 2px; }
#v-list .bar .sel { display: none; align-items: center; gap: 4px; }
#v-list .bar.has-sel .sel { display: flex; }
#v-list .bar.has-sel .idle { display: none; }
#v-list .bar .count { color: var(--ink-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
#v-list .chk { width: 16px; height: 16px; border: 1.5px solid var(--rule-2); border-radius: 4px; background: var(--surface); display: grid; place-items: center; flex: none; cursor: pointer; }
#v-list .chk.on { background: var(--accent); border-color: var(--accent); }
#v-list .chk.on::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }

/* the list: one line per conversation; read rows sunk into the sheet */
:is(#v-list, #v-search) .list { flex: 1; overflow: auto; }
:is(#v-list, #v-search) .row { display: grid; grid-template-columns: 16px 20px 20px 196px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; height: var(--row); padding: 0 12px 0 14px; border-bottom: 1px solid var(--rule); cursor: pointer; position: relative; user-select: none; }
:is(#v-list, #v-search) .row:hover { box-shadow: inset 1px 0 0 var(--rule-2), inset -1px 0 0 var(--rule-2), 0 1px 3px rgba(23, 32, 43, .18); z-index: 1; }
:is(#v-list, #v-search) .row.unread { background: var(--surface); }
:is(#v-list, #v-search) .row:not(.unread) { background: var(--read); }
:is(#v-list, #v-search) .row.sel, :is(#v-list, #v-search) .row:not(.unread).sel { background: var(--select); }
:is(#v-list, #v-search) .row .rav { display: none; }
:is(#v-list, #v-search) .row .mark { width: 20px; height: 20px; display: grid; place-items: center; color: var(--rule-2); }
:is(#v-list, #v-search) .row .mark .ico { width: 15px; height: 15px; stroke-width: 1.6; }
:is(#v-list, #v-search) .row .mark.on { color: var(--star); }
:is(#v-list, #v-search) .row .mark.on .ico { fill: var(--star); }
:is(#v-list, #v-search) .row .star { width: 20px; height: 20px; display: grid; place-items: center; color: var(--rule-2); border-radius: 4px; }
:is(#v-list, #v-search) .row .star:hover { color: var(--ink-2); }
:is(#v-list, #v-search) .row .star.on { color: var(--star); }
:is(#v-list, #v-search) .row .star .ico { width: 15px; height: 15px; }
:is(#v-list, #v-search) .row .star.on .ico { fill: var(--star); }
:is(#v-list, #v-search) .row .from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
:is(#v-list, #v-search) .row .from .cnt { color: var(--ink-3); font-weight: 400; font-size: 12px; }
:is(#v-list, #v-search) .row.unread .from, :is(#v-list, #v-search) .row.unread .subj { font-weight: 700; }
:is(#v-list, #v-search) .row .what { display: flex; align-items: center; gap: 8px; min-width: 0; }
:is(#v-list, #v-search) .row .what .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; flex: none; font-weight: 500; }
:is(#v-list, #v-search) .row .what .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:is(#v-list, #v-search) .row .what .snip { color: var(--ink-3); font-weight: 400; }
:is(#v-list, #v-search) .row .what .clip { color: var(--ink-3); flex: none; display: inline-flex; }
:is(#v-list, #v-search) .row .end { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 92px; }
:is(#v-list, #v-search) .row .end .av { width: 20px; height: 20px; font-size: 9.5px; }
:is(#v-list, #v-search) .row .when { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
:is(#v-list, #v-search) .row.unread .when { color: var(--ink); font-weight: 600; }
:is(#v-list, #v-search) .row .wait { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-tint); padding: 0 6px; border-radius: 4px; line-height: 18px; white-space: nowrap; }
:is(#v-list, #v-search) .row .wait.late { color: var(--red); background: var(--red-tint); }
:is(#v-list, #v-search) .row .wait.ok { color: var(--ok); background: var(--ok-tint); }
:is(#v-list, #v-search) .row .quick { display: none; gap: 2px; }
:is(#v-list, #v-search) .row .quick button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); }
:is(#v-list, #v-search) .row .quick button:hover { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); }
@media (hover: hover) {
  :is(#v-list, #v-search) .row:hover .quick { display: flex; }
  :is(#v-list, #v-search) .row:hover .when, :is(#v-list, #v-search) .row:hover .wait { display: none; }
}
:is(#v-list, #v-search) .empty { padding: 48px 24px; text-align: center; color: var(--ink-3); }
:is(#v-list, #v-search) .empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

/* Reguły (ticket 2): the page frame of the prototype's rules and people pages, the table, the form in place */
#v-rules .vpage { padding: 20px 28px; overflow: auto; }
#v-rules h1 { font-size: 20px; font-weight: 650; font-stretch: 112%; letter-spacing: -.012em; margin: 0 0 4px; }
#v-rules .lead { color: var(--ink-3); margin-bottom: 18px; }
#v-rules .empty { padding: 48px 24px; text-align: center; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 10px; }
#v-rules .empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
#v-rules .tbl { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); }
#v-rules .tr { display: grid; grid-template-columns: 1.15fr 120px 110px 1.4fr 130px 120px 60px; gap: 12px; align-items: center; min-height: 40px; padding: 7px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; }
#v-rules .tr:last-child { border-bottom: 0; }
#v-rules .tr.h { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--sunk); cursor: default; }
#v-rules .tr:not(.h):hover, #v-rules .tr.open { background: var(--read); }
#v-rules .tr .k { color: var(--ink-3); font-size: 12px; }
#v-rules .tr .lbl { margin-right: 6px; display: inline-block; }
#v-rules .tr code { font-family: inherit; background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; overflow-wrap: anywhere; }
#v-rules .tr .to { font-weight: 600; }
#v-rules .tr .kw { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
#v-rules .tr .kw q { quotes: "„" "”"; }
#v-rules .tr .av.sm { width: 20px; height: 20px; font-size: 9.5px; display: inline-grid; vertical-align: middle; margin-right: 6px; }
#v-rules .tr .acts { display: flex; gap: 2px; justify-self: end; }
#v-rules .tr .acts button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
#v-rules .tr .acts button:hover { background: var(--sunk); color: var(--ink); }
#v-rules .tr .acts button.del:hover { color: var(--red); }
/* a rule's row opens the rule's form in place (the form itself: „the rule's form" below, shared with its window) */
#v-rules .redit { padding: 14px; background: var(--sunk); border-bottom: 1px solid var(--rule); }
#v-rules .redit .rgrid { max-width: 760px; }
#v-rules .redit .err { color: var(--red); font-weight: 600; margin: 0 0 10px; }
#v-rules .redit .fx { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-left: 128px; max-width: 888px; }
#v-rules .redit .fx .muted { margin-left: auto; font-size: 12px; color: var(--ink-3); }
#v-rules .btn { height: 32px; padding: 0 14px; border-radius: 7px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
#v-rules .btn.pri { background: var(--accent-soft); } #v-rules .btn.pri:disabled { opacity: .6; cursor: wait; }
#v-rules .btn.sec { border: 1px solid var(--rule-2); background: var(--surface); } #v-rules .btn.sec:hover { border-color: var(--ink-3); }
#v-rules .btn.lnk { color: var(--accent-ink); padding: 0 6px; font-weight: 500; margin-top: 6px; }

/* ---- the right mouse button's menu (ticket 9; panele.html #menu, variant B): tier one 3 + 3 with its keys,
   tier two open at once in two columns — Na później and Przypisz left, Etykieta right, every choice a line —
   tier three the sender. A sheet from the bottom on a phone. v5's inks: it hangs on <body>, outside .app. ---- */
#list .row.ctx { box-shadow: inset 0 0 0 1px var(--accent-line); background: var(--accent-tint); }
#menu { --ink: #17202B; --ink-2: #4A5666; --ink-3: #7D8898; position: fixed; z-index: 50; width: 560px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 32, 43, .18), 0 1px 2px rgba(23, 32, 43, .1);
  padding: 6px; display: none; font: 13px/1.4 var(--f); color: var(--ink); }
#menu.on { display: block; }
#menu .band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; }
#menu .band > .col { min-width: 0; }
#menu .band > .col + .col { border-left: 1px solid var(--rule); padding-left: 6px; }
#menu .mi { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; width: 100%; color: var(--ink); cursor: pointer; }
#menu .t2 .mi { height: 28px; }
@media (hover: hover) { #menu .mi:hover:not(:disabled) { background: var(--sunk); } }
#menu .mi:focus-visible { outline: 0; background: var(--sunk); box-shadow: inset 0 0 0 2px var(--accent-line); }
#menu .mi > .lead { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--ink-2); }
#menu .mi > .lead .lbl { width: 11px; height: 11px; }
#menu .mi > .lead .av { width: 22px; height: 22px; font-size: 10px; }
#menu .mi > .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .mi > small { margin-left: auto; padding-left: 10px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
#menu .mi kbd { margin-left: auto; font: 600 11px/1 var(--f); color: var(--ink-2); border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px; padding: 2px 5px; background: var(--surface); }
#menu .mi > .ok { margin-left: auto; display: grid; color: var(--accent); }
#menu .mi > .ok .ico { stroke-width: 2.2; }
#menu .mi[aria-checked="true"] { font-weight: 600; }
#menu .mi:disabled { color: var(--ink-3); cursor: default; }
#menu .mi:disabled > .lead { color: var(--rule-2); }
#menu .mi:disabled kbd { opacity: .5; }
#menu .mi.danger, #menu .mi.danger > .lead { color: var(--red); }
#menu hr { border: 0; border-top: 1px solid var(--rule); margin: 5px 4px; }
#menu h6 { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 7px 10px 3px; margin: 0; }
#menu .col > h6:first-child { padding-top: 2px; }
/* „Wybierz datę…": the browser's own picker, opened by showPicker() under the line */
#menu .pickw { display: block; position: relative; }
#menu .pickw input { position: absolute; left: 10px; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ============================================================ the conversation (ticket 3), after Gmail
   The prototype's .tbar, .th, .msg, .gap and .side. v4's unscoped .th, .msg and .msg-body rules (app.css)
   still load for the dock and the pages left: every rule here is under #v-thread and resets what they set. */
:where(#v-thread .tbar, #v-thread .th, #v-thread .msgs, #v-thread .side, #v-thread .side-scrim) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
:where(#v-thread .tbar, #v-thread .th, #v-thread .msgs, #v-thread .side) :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
#v-thread .tbar, #v-thread .th, #v-thread .msgs, #v-thread .side { zoom: var(--z); }
#v-thread .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* the icon bar; every icon says what it does and its key on hover */
#v-thread .tbar { height: 46px; display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--rule); flex: none; }
#v-thread .tbar .ib { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink-2); flex: none; }
#v-thread .tbar .ib:hover { background: var(--sunk); color: var(--ink); }
#v-thread .tbar .ib:disabled { opacity: .35; cursor: default; background: none; }
#v-thread .tbar .ib.on { color: var(--accent-ink); background: var(--accent-tint); }
#v-thread .tbar .ib.star.on { color: var(--star); background: none; }
#v-thread .tbar .ib.star.on .ico { fill: var(--star); }
#v-thread .tbar .ib .ico { width: 18px; height: 18px; }
#v-thread .tbar .sep { width: 1px; height: 20px; background: var(--rule); margin: 0 8px; flex: none; }
#v-thread .tbar .pos { color: var(--ink-2); font-size: 12px; margin: 0 6px 0 8px; white-space: nowrap; }
#v-thread [data-tip] { position: relative; }
#v-thread [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font: 500 11.5px/1.4 var(--f);
  padding: 4px 8px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 70; transition: opacity .1s; }
#v-thread [data-tip]:hover::after { opacity: 1; transition-delay: .35s; }   /* it waits to come, never to go */
#v-thread .tbar .panel[data-tip]::after, #v-thread .tbar .next[data-tip]::after, #v-thread .mh .r .ib:last-child[data-tip]::after { left: auto; right: 0; transform: none; }

/* the body: the messages, and the customer beside them */
#v-thread .tbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--side) * var(--z)); min-height: 0; }
#v-thread .tbody.nos { grid-template-columns: minmax(0, 1fr); }
#v-thread .tbody.nos .side { display: none; }
#v-thread .tmain { overflow: auto; min-width: 0; display: flex; flex-direction: column; }
#v-thread .side-scrim { display: none; }

/* the subject, the largest thing on the page, with its chips */
#v-thread .th { display: flex; flex-direction: row; flex: none; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px 28px 6px 72px; min-width: 0; }
#v-thread .th h1 { font-size: 20px; font-weight: 500; font-stretch: 105%; letter-spacing: -.01em; line-height: 1.25; margin: 0 6px 0 0; overflow-wrap: anywhere; }
#v-thread .th .chips { display: contents; }
#v-thread .th .count { margin-left: auto; font-size: 12px; white-space: nowrap; }
#v-thread .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
#v-thread .chip .av { width: 16px; height: 16px; font-size: 9px; }
#v-thread .chip .lbl { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c, var(--ink-3)); }
#v-thread .chip.wait { color: var(--warn); background: var(--warn-tint); border-color: transparent; font-weight: 600; }
#v-thread .chip.wait.late { color: var(--red); background: var(--red-tint); }
#v-thread .chip.wait.ok { color: var(--ok); background: var(--ok-tint); }
#v-thread .who-chip { display: none; }

/* messages, flat: avatar, sender <address>, „do …" that opens the details, the date; folded to one line */
#v-thread .msgs { padding-bottom: 8px; flex: 1 0 auto; }
#v-thread .msg { margin: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; scroll-margin-top: 8px; }
#v-thread .msgs > :first-child { border-top: 0; }
#v-thread .msg .mh { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 1px 16px; padding: 12px 28px 12px 16px; cursor: pointer; align-items: start; }
#v-thread .msg.note .mh { cursor: default; }
#v-thread .msg .mh .av { width: 40px; height: 40px; font-size: 15px; background: var(--ink-3); grid-row: 1 / span 2; }
#v-thread .msg.ours .mh .av { background: var(--accent); }
#v-thread .msg.note .mh .av { background: var(--sunk); color: var(--ink-2); border: 1px solid var(--rule); }
#v-thread .msg.note .mh .av .ico { width: 18px; height: 18px; }
#v-thread .msg .mh .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; grid-column: 2; grid-row: 1; }
#v-thread .msg .mh .who b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#v-thread .msg .mh .who small { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
#v-thread .msg .mh .who .ty { flex: none; color: var(--ink-2); }
#v-thread .msg .mh .r { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 2px; color: var(--ink-3); font-size: 12px; white-space: nowrap; height: 20px; }
#v-thread .msg .mh .r .clipi { margin-right: 6px; display: grid; }
#v-thread .msg .mh .r .ib { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink-2); margin-left: 2px; }
#v-thread .msg .mh .r .ib:hover { background: var(--sunk); color: var(--ink); }
#v-thread .msg .mh .r .ib.star.on { color: var(--star); }
#v-thread .msg .mh .r .ib.star.on .ico { fill: var(--star); }
#v-thread .msg.fold .mh .r .ib, #v-thread .msg.fold .mh .r .dfull, #v-thread .msg:not(.fold) .mh .r .dshort { display: none; }
#v-thread .msg .mh .line2 { grid-column: 2; grid-row: 2; color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 18px; }
#v-thread .msg .mh .line2 .snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
#v-thread .msg .mh .line2 .to { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); border-radius: 4px; padding: 0 2px; min-width: 0; text-align: left; }
#v-thread .msg .mh .line2 .to:hover { background: var(--sunk); color: var(--ink); }
#v-thread .msg .mh .line2 .to .ico { width: 14px; height: 14px; }
#v-thread .msg:not(.fold) .mh .line2 .snip, #v-thread .msg.fold .mh .line2 .to { display: none; }
#v-thread .msg-sent { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; margin-right: 8px; }
#v-thread .msg-sent .ico { width: 14px; height: 14px; }
#v-thread .msg.landed { background: var(--ok-tint); }
#v-thread .msg .details { display: none; margin: 0 28px 10px 72px; font-size: 12px; color: var(--ink-2); background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; max-width: 560px; }
#v-thread .msg .details.on { display: grid; }
#v-thread .msg.fold .details { display: none; }
#v-thread .msg .details dt { color: var(--ink-3); }
#v-thread .msg .details dd { margin: 0; overflow-wrap: anywhere; }
#v-thread .msg .mb { padding: 0 28px 18px 72px; max-width: calc(100px + 78ch); overflow-wrap: anywhere; }
#v-thread .msg.fold .mb { display: none; }
#v-thread .msg.note .mb p { display: inline-block; background: var(--sunk); border-radius: 8px; padding: 8px 12px; margin: 0; white-space: pre-wrap; }
/* the mail as it came: images and tables kept inside the column; our replies carry v4's .msg-body wrapper */
#v-thread .mail { overflow-x: auto; }
#v-thread .mail p { margin: 0 0 8px; }
#v-thread .mail img { max-width: 100%; height: auto; }
#v-thread .mail img[data-src] { visibility: hidden; }   /* a held image keeps its place; the bar says why */
#v-thread .mail table { max-width: 100%; border-collapse: collapse; }
#v-thread .mail h1, #v-thread .mail h2 { font-size: 15px; margin: 0 0 .5em; }
#v-thread .mail a { color: var(--accent-ink); }
#v-thread .mail blockquote { margin: 0; border-left: 2px solid var(--rule-2); padding-left: 10px; color: var(--ink-3); }
#v-thread .mail .msg-body { max-width: none; padding: 0; font-size: inherit; line-height: inherit; }
#v-thread .mail .msg-signature { color: var(--ink-3); }
#v-thread .mail.quoted { color: var(--ink-3); border-left: 2px solid var(--rule-2); padding-left: 10px; margin-top: 10px; }
#v-thread .quoted.fold { display: inline-block; margin-top: 10px; padding: 0 8px; background: var(--sunk); border-radius: 8px; line-height: 16px; height: 16px; }
#v-thread .quoted.fold::before { content: "···"; letter-spacing: 2px; font-weight: 700; color: var(--ink-2); }
#v-thread .quoted.fold:hover { background: var(--rule); }
#v-thread .atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#v-thread .att { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; max-width: 100%; }
#v-thread a.att:hover { border-color: var(--rule-2); background: var(--sunk); }
#v-thread .att .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#v-thread .att .ico { color: var(--ink-2); }
#v-thread .att small { color: var(--ink-3); font-weight: 400; white-space: nowrap; }
#v-thread .att.blocked { border-style: dashed; color: var(--ink-2); cursor: default; }
#v-thread .att.blocked .ico { color: var(--red); }
#v-thread .imgs-held { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px 8px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); }
#v-thread .imgs-held p { margin: 0; flex: 1 1 16rem; }
#v-thread .msg-fwded { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; color: var(--ink-3); }
#v-thread .msg-fwded .ico { width: 14px; height: 14px; flex: none; }
#v-thread .lnk { color: var(--accent-ink); font-weight: 600; }
#v-thread .btn-sm { height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#v-thread .btn-sm.pri { background: var(--accent-soft); color: var(--ink); }
#v-thread .btn-sm.sec { border: 1px solid var(--rule-2); background: var(--surface); }
#v-thread .btn-sm.sec:hover { border-color: var(--ink-3); }
#v-thread .btn-sm:disabled { opacity: .6; cursor: wait; }
/* the middle of a long conversation, behind one pill */
#v-thread .gap { display: flex; align-items: center; width: 100%; height: 48px; padding-left: 16px; border-top: 1px solid var(--rule); cursor: pointer; }
#v-thread .gap .pill { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--surface); display: grid; place-items: center; font-weight: 700; color: var(--ink-2); box-shadow: 0 1px 2px rgba(23, 32, 43, .08); flex: none; }
#v-thread .gap .ln { flex: 1; height: 1px; background: var(--rule); margin-left: 16px; }
#v-thread .gap:hover .pill { background: var(--sunk); }
#v-thread .gap small { color: var(--ink-3); margin: 0 28px 0 12px; font-size: 12px; white-space: nowrap; }

/* under the messages: Odpowiedz · Przekaż as two pills on the messages' edge, until the editor takes their place */
#v-thread .reply { margin: 8px 28px 24px 72px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; zoom: var(--z); }
#v-thread .rbtn { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--rule-2); background: var(--surface); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
#v-thread .rbtn:hover { background: var(--sunk); color: var(--ink); }
#v-thread .rbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#v-thread .reply .muted { margin-left: 6px; font-size: 12px; }

/* the customer panel */
#v-thread .side { border-left: 1px solid var(--rule); background: var(--sunk); overflow: auto; padding: 18px 18px 24px; min-width: 0; }
#v-thread .side h3 { font-size: 15px; font-weight: 650; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
#v-thread .side h3 button { font-weight: inherit; font-size: inherit; color: var(--accent-ink); text-align: left; }
#v-thread .side h3 button:hover { text-decoration: underline; }
#v-thread .side .k { color: var(--ink-3); font-size: 12px; margin: 2px 0 12px; }
#v-thread .side .kv { display: flex; align-items: center; gap: 9px; min-height: 30px; min-width: 0; }
#v-thread .side .kv .ico { color: var(--ink-3); }
#v-thread .side .kv a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
#v-thread .side h4 { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; }
#v-thread .side h4.first { border: 0; margin-top: 0; padding-top: 0; }
#v-thread .side h4 button { margin-left: auto; color: var(--accent-ink); font-weight: 500; font-size: 12px; }
#v-thread .side .small { font-size: 12px; margin: 0; }
#v-thread .side .case { padding: 7px 6px; margin: 0 -6px; width: calc(100% + 12px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; border-radius: 6px; text-align: left; }
#v-thread .side .case:hover { background: rgba(255, 255, 255, .85); }
#v-thread .side .case .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-thread .side .case .d { color: var(--ink-3); font-size: 12px; }
#v-thread .side .case .s { grid-column: 1 / span 2; color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-thread .side .case.open .n::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 7px; vertical-align: 1px; }
#v-thread .side .note { display: block; width: 100%; padding: 7px 0; font-size: 12.5px; border-top: 1px dashed var(--rule); text-align: left; overflow-wrap: anywhere; }
#v-thread .side .note .d { color: var(--ink-3); font-size: 11.5px; }
#v-thread .side .kv + .btn-sm { margin-top: 8px; }
#v-thread .newsender { background: var(--star-tint); border: 1px solid #F3D27A; border-radius: 10px; padding: 12px; margin-bottom: 14px; }
#v-thread .newsender b { display: block; margin-bottom: 4px; }
#v-thread .newsender p { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; }
#v-thread .newsender .found { background: var(--surface); border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }
#v-thread .newsender .found span { display: block; overflow-wrap: anywhere; }
#v-thread .newsender .found small { color: var(--ink-3); }
#v-thread .newsender .nsb { display: flex; flex-direction: column; gap: 6px; }
#v-thread .newsender .nsb .btn-sm { justify-content: center; white-space: normal; text-align: center; }

/* ============================================================ the editor (ticket 4; poczta.html .editor, .compose-win) */
/* One white box for Odpowiedz and Przekaż under the messages (on their edge) and for Napisz in the window; a hairline
   between its rows, the blue Wyślij its one strong thing. compose.js builds it; it is not inside .app when it is the window. */
:where(.editor, .compose-win) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
:where(.editor, .compose-win) :is(input, select) { font: inherit; color: inherit; }
:where(.editor, .compose-win) :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.editor { display: flex; flex-direction: column; margin: 10px 28px 24px 72px; border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 1px 3px rgba(23, 32, 43, .08);
  background: var(--surface); font: 13px/1.4 var(--f); color: var(--ink); -webkit-font-smoothing: antialiased; zoom: var(--z); }
.editor .ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.editor .eh { display: none; }
.editor .escroll { display: flex; flex-direction: column; min-height: 0; }
.editor .ust { display: flex; gap: 6px; width: 100%; padding: 8px 14px; border-bottom: 1px solid var(--rule); background: var(--star-tint); border-radius: 10px 10px 0 0; color: var(--ink-2); font-size: 12.5px; }
.editor .ust b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.editor .ust span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor .ust[aria-expanded="true"] span { white-space: normal; }
.editor .fld { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; padding: 3px 14px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.editor .fld .l { color: var(--ink-3); flex: none; width: 40px; }
.editor .fld input { flex: 1; border: 0; outline: 0; min-width: 120px; height: 28px; padding: 0; background: transparent; }
.editor .fld input::placeholder { color: var(--ink-3); }
.editor .chips:has(.rcpt) .rin::placeholder { color: transparent; }   /* once someone is in Do, the hint only crowds the row */
.editor .fld .cc { margin-left: auto; align-self: flex-start; display: flex; padding-top: 7px; font-size: 12px; white-space: nowrap; }
.editor .fld .cc button { color: var(--ink-3); } .editor .fld .cc button:hover { color: var(--ink); }
.editor .fld.ccs { display: none; } .editor.cc .fld.ccs { display: flex; }
.editor .chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; position: relative; min-width: 0; padding: 2px 0; }
.editor .rcpt { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 4px 0 2px; border: 1px solid var(--rule-2); border-radius: 12px; font-size: 12px; background: var(--surface); }
.editor .rcpt .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor .rcpt small { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editor .av { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--ink-3); flex: none; }
.editor .av.cust, .editor .rcpt.cust .av { background: var(--ok); }
.editor .rcpt .x { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); flex: none; }
.editor .rcpt .x:hover { background: var(--sunk); color: var(--ink); }
.editor .rcpt .x .ico { width: 11px; height: 11px; }
.editor .sugg { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 340px; max-width: min(560px, calc(100vw - 24px)); padding: 4px; display: none;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(23, 32, 43, .16); }
.editor .sugg.on { display: block; }
.editor .sugg button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 10px; border-radius: 6px; }
.editor .sugg button:hover, .editor .sugg button.on { background: var(--sunk); }
.editor .sugg .av { width: 24px; height: 24px; font-size: 10px; }
.editor .sugg .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor .sugg .who small { color: var(--ink-3); margin-left: 5px; font-size: 12px; }
.editor .sugg .k { margin-left: auto; padding-left: 12px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.editor .ferr { margin: 0; padding: 6px 14px; color: var(--red); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--rule); background: var(--red-tint); }
.editor .ferr[hidden] { display: none; }
/* the text: editor.js's field without its frame; its bar only under „Formatowanie" */
.editor .ed.body { display: flex; flex-direction: column; }
.editor .ed-bar { display: none; gap: 2px; padding: 4px 10px; border-bottom: 1px solid var(--rule); }
.editor.fmt .ed-bar { display: flex; }
.editor .fb { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-2); font-size: 14px; text-align: center; }
.editor .fb:hover { background: var(--sunk); color: var(--ink); }
.editor .fb[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); }
.editor .fb .ico { width: 17px; height: 17px; }
.editor .ed-link { padding: 6px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule); gap: 8px; }
.editor .ed-link .field { height: 30px; flex: 1 1 14rem; border: 1px solid var(--rule-2); border-radius: 6px; padding: 0 8px; background: var(--surface); }
.editor .ed-link .btn { height: 30px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 15px; background: var(--surface); font-weight: 600; }
.editor .ed-link .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.editor .ed-link .ed-link-err { color: var(--red); font-weight: 600; }
.editor .ed-area { min-height: 150px; max-height: none; overflow: visible; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.editor .ed-area:focus-visible, .editor .fld input:focus-visible { outline: 0; }   /* a field without a frame: the caret says where you are */
.editor .ed-area[data-empty]::before { color: var(--ink-3); }
.editor .ed-area p, .editor .ed-area ul, .editor .ed-area ol { margin: 0 0 1.5em; }
.editor .ed-area a { color: var(--accent-ink); }
.editor .sigl { padding: 0 14px 10px; color: var(--ink-3); font-size: 12px; }
.editor .sigl:empty { display: none; }
.editor .quote { position: relative; max-height: 110px; overflow: hidden; margin: 0 14px 10px; padding-left: 10px; border-left: 2px solid var(--rule-2); color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.editor .quote p { margin: 0 0 4px; }
.editor .quote::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(transparent, var(--surface)); }
.editor .atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.editor .atts:empty { display: none; }
.editor .att-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 100%; padding: 0 4px 0 10px; border: 1px solid var(--rule); border-radius: 7px; background: var(--sunk); }
.editor .att-chip .fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.editor .att-chip small { color: var(--ink-3); white-space: nowrap; }
.editor .att-chip .x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
.editor .att-chip .x:hover { background: var(--rule); color: var(--ink); }
.editor .att-chip .x .ico { width: 12px; height: 12px; }
/* the footer: Wyślij · Szablon · Załącz · Formatowanie · Podpis … po wysłaniu · the bin */
.editor .ef { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--rule); flex: none; position: relative; }
#v-thread .editor .ef { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-radius: 0 0 10px 10px; }   /* a long reply keeps Wyślij on screen */
.editor .send { height: 34px; padding: 0 18px; border-radius: 17px; background: var(--accent); color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; white-space: nowrap; }
.editor .send:hover { background: var(--accent-ink); }
.editor .send:disabled { opacity: .7; cursor: wait; }
.editor .q { height: 30px; padding: 0 8px; border-radius: 7px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.editor .q:hover { background: var(--sunk); color: var(--ink); }
.editor .q[aria-pressed="true"], .editor .q[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent-ink); }
.editor .q .ico { width: 17px; height: 17px; }
.editor .q .ico.car { width: 13px; height: 13px; margin-left: -3px; color: var(--ink-3); }
.editor .q[hidden] { display: none; }
.editor .sigb { min-width: 0; } .editor .sigb .lbl { overflow: hidden; text-overflow: ellipsis; }
.editor .tplw { position: relative; display: inline-flex; }
.editor .pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 360px; max-height: min(420px, 60vh); overflow: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(23, 32, 43, .16); }
.editor .pop[hidden] { display: none; }
.editor .pop button { display: block; width: 100%; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; }
.editor .pop button:hover { background: var(--sunk); }
.editor .pop button small { display: block; color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor .pop .pl { padding: 7px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.editor .pop hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
.editor .after { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.editor .after select { height: 26px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--surface); font-size: 12px; padding: 0 4px; color: var(--ink); }
.editor .bin { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); margin-left: 4px; flex: none; }
.editor[data-mode="new"] .bin { margin-left: auto; }
.editor .bin:hover { background: var(--sunk); color: var(--red); }
/* a narrow editor (a pane beside the panel, a big text size) keeps the tools as icons, so „po wysłaniu" and the bin stay in the row */
.editor .ef { container: ef / inline-size; }
@container ef (max-width: 860px) {
  .editor:not([data-mode="new"]) .q { width: 32px; padding: 0; justify-content: center; }
  .editor:not([data-mode="new"]) .q .lbl, .editor:not([data-mode="new"]) .q .car { display: none; }
}
@container ef (max-width: 560px) {
  .editor .q { width: 32px; padding: 0; justify-content: center; }
  .editor .q .lbl, .editor .q .car { display: none; }
}

/* the Napisz window: bottom right, a dark title bar with Zwiń · Powiększ · Zamknij; the editor inside scrolls, its footer stays */
.compose-win { position: fixed; right: 24px; bottom: 0; z-index: 40; display: none; flex-direction: column; width: 600px; max-width: calc(100vw - 48px);
  max-height: calc((100dvh - var(--banner) - 24px) / var(--z)); background: var(--surface); border-radius: 10px 10px 0 0;
  box-shadow: 0 -2px 24px rgba(23, 32, 43, .22), 0 0 0 1px var(--rule); font: 13px/1.4 var(--f); color: var(--ink); zoom: var(--z); }
.compose-win.on { display: flex; }
.compose-win .ch { height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 16px; background: var(--ink); color: #fff; border-radius: 10px 10px 0 0; font-weight: 600; flex: none; }
.compose-win .ch .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-win .ch .sp { flex: 1; }
.compose-win .ch button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: #fff; opacity: .8; }
.compose-win .ch button:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.compose-win .ch .ico { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.compose-win.min .ch { cursor: pointer; }
.compose-win .cbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.compose-win.min .cbody { display: none; }
.compose-win .editor { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; zoom: 1; }
.compose-win .editor .escroll { flex: 1 1 auto; overflow: auto; }
.compose-win .editor .ed-area { min-height: 240px; }
.compose-win.big { width: 880px; } .compose-win.big .editor .ed-area { min-height: 420px; }
body:has(.compose-win.on) .fab { display: none; }

/* ============================================================ Klienci (ticket 5; poczta.html .page, .tbl, .tr, .ph, .ptabs,
   .kv2, .notebox, .dlg). v4's global .btn, .search and .empty would reach these pages: every rule here sets what they set. */
:where(#v-people, #v-person, #client-dlg) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
:where(#v-people, #v-person, #client-dlg) :is(input, select, textarea) { font: inherit; color: inherit; }
:where(#v-people, #v-person, #client-dlg) :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
#v-people, #v-person, #client-dlg { zoom: var(--z); font: 13px/1.4 var(--f); color: var(--ink); }
#v-people .vpage, #v-person .vpage { padding: 20px 28px 32px; }
#v-people h1, #v-person h1 { font-size: 20px; font-weight: 650; font-stretch: 112%; letter-spacing: -.012em; line-height: 1.25; margin: 0; }
:where(#v-people, #v-person) .k { color: var(--ink-3); }
:where(#v-people, #v-person, #client-dlg) .err { color: var(--red); font-weight: 600; margin: 0 0 10px; }
:where(#v-people, #v-person, #client-dlg) .btn-sm { height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
:where(#v-people, #v-person, #client-dlg) :is(.btn-sm, .btn).pri { background: var(--accent-soft); color: var(--ink); border: 1px solid transparent; }
:where(#v-people, #v-person, #client-dlg) :is(.btn-sm, .btn).pri:hover { background: #C9DCF7; }
:where(#v-people, #v-person, #client-dlg) :is(.btn-sm, .btn).sec { border: 1px solid var(--rule-2); background: var(--surface); }
:where(#v-people, #v-person, #client-dlg) :is(.btn-sm, .btn).sec:hover { border-color: var(--ink-3); background: var(--surface); }
:where(#v-people, #v-person, #client-dlg) :is(.btn-sm, .btn):disabled { opacity: .5; cursor: default; }
#v-person .btn, #client-dlg .btn { height: 32px; padding: 0 14px; border-radius: 7px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
#v-person .lnk { color: var(--accent-ink); font-weight: 500; font-size: 12px; }
#v-person .lnk:hover { text-decoration: underline; }

/* the table: name · firm, phone, e-mail, kind, „czeka na nas" in orange, the last contact */
#v-people .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#v-people .head .n { color: var(--ink-3); margin-right: auto; }
#v-people .tbl { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); }
#v-people .tr { display: grid; grid-template-columns: minmax(0, 1.3fr) 130px minmax(0, 1.4fr) minmax(0, 150px) 110px 110px; gap: 12px; align-items: center; min-height: 40px; padding: 6px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; }
#v-people .tr:last-child { border-bottom: 0; }
#v-people .tr.h { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--sunk); cursor: default; }
@media (hover: hover) { #v-people .tr:not(.h):hover { background: var(--read); } }
#v-people .tr b { font-weight: 600; }
#v-people .tr .nm { overflow-wrap: anywhere; }
#v-people .tr .k { font-size: 12px; }
#v-people .tr .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#v-people .tr .open { color: var(--warn); font-weight: 600; }
/* a client just added: lit once where they landed */
#v-people .tr.fresh { animation: people-fresh 2.6s ease-out; }
@keyframes people-fresh { 0%, 40% { background: var(--accent-tint); } 100% { background: transparent; } }
#v-people .empty, #v-person .empty { padding: 48px 24px; text-align: center; color: var(--ink-3); }
#v-people .empty { border: 1px solid var(--rule); border-radius: 10px; }
#v-people .empty b, #v-person .empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

/* the card: back, the name band, the tabs */
#v-person .tbar { position: sticky; top: 0; z-index: 2; height: 46px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--rule); background: var(--surface); flex: none; }
#v-person .tbar .back { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 16px; color: var(--ink-2); white-space: nowrap; }
#v-person .tbar .back:hover { background: var(--sunk); color: var(--ink); }
#v-person .ph { display: flex; align-items: flex-start; gap: 18px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); }
#v-person .ph .big { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 16px; font-weight: 700; color: #fff; background: var(--ink-3); }
#v-person .ph .pid { min-width: 0; }
#v-person .ph h1 { overflow-wrap: anywhere; }
#v-person .ph .k { margin-top: 2px; }
#v-person .ph .facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--ink-2); }
#v-person .ph .facts > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
#v-person .ph .facts .ico { color: var(--ink-3); }
#v-person .ph .facts a, #v-person .kv2 a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
#v-person .ph .acts { margin-left: auto; display: flex; gap: 6px; }
#v-person .ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
#v-person .ptabs button { height: 40px; padding: 0 14px; color: var(--ink-2); position: relative; font-weight: 500; white-space: nowrap; }
#v-person .ptabs button:hover { color: var(--ink); }
#v-person .ptabs button.on { color: var(--accent); font-weight: 600; }
#v-person .ptabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
#v-person .ptabs button i { font-style: normal; color: var(--ink-3); margin-left: 6px; font-size: 12px; font-weight: 400; }

/* Rozmowy: rows as the list draws them, read ones sunk */
#v-person .prow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: var(--row); padding: 0 12px 0 10px; border-bottom: 1px solid var(--rule); background: var(--read); cursor: pointer; position: relative; }
#v-person .prow.unread { background: var(--surface); }
#v-person .prow.unread .subj { font-weight: 700; }
#v-person .prow:hover { box-shadow: inset 1px 0 0 var(--rule-2), inset -1px 0 0 var(--rule-2), 0 1px 3px rgba(23, 32, 43, .18); z-index: 1; }
#v-person .prow .star { width: 20px; height: 20px; display: grid; place-items: center; color: var(--rule-2); }
#v-person .prow .star .ico { width: 15px; height: 15px; }
#v-person .prow .star.on { color: var(--star); } #v-person .prow .star.on .ico { fill: var(--star); }
#v-person .prow .what { display: flex; align-items: center; gap: 8px; min-width: 0; }
#v-person .prow .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; flex: none; font-weight: 500; }
#v-person .prow .lbl { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c, var(--ink-3)); }
#v-person .prow .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#v-person .prow .snip { color: var(--ink-3); }
#v-person .prow .cnt { color: var(--ink-3); font-size: 12px; flex: none; }
#v-person .prow .end { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
#v-person .prow .when { color: var(--ink-3); font-size: 12px; white-space: nowrap; min-width: 40px; text-align: right; }
#v-person .prow.unread .when { color: var(--ink); font-weight: 600; }
#v-person .prow .wait { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-tint); padding: 0 6px; border-radius: 4px; line-height: 18px; white-space: nowrap; }
#v-person .prow .wait.late { color: var(--red); background: var(--red-tint); }
#v-person .prow .wait.ok { color: var(--ok); background: var(--ok-tint); }
#v-person .prow .wait.done { color: var(--ink-3); background: none; font-weight: 500; padding: 0; }

/* Notatki: the box that says it stays with us, then the notes, newest first */
#v-person .notebox { max-width: 640px; border: 1px solid var(--rule-2); border-radius: 10px; margin-bottom: 14px; background: var(--surface); }
#v-person .notebox:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
#v-person .notebox textarea { display: block; width: 100%; min-height: 64px; border: 0; outline: 0; padding: 10px 12px; resize: vertical; background: transparent; }
#v-person .notebox .ef { display: flex; gap: 10px; padding: 6px 8px; border-top: 1px solid var(--rule); align-items: center; flex-wrap: wrap; }
#v-person .notebox .ef .muted { margin-left: auto; font-size: 12px; }
#v-person .notes { max-width: 640px; }
#v-person .note { padding: 8px 0; border-top: 1px dashed var(--rule); overflow-wrap: anywhere; white-space: pre-wrap; }
#v-person .note .d { color: var(--ink-3); font-size: 12px; }
#v-person .note .lnk { display: block; margin-top: 2px; white-space: normal; }
#v-person .notes .none { margin: 0; }

/* Dane: the fields and Zgody on the left, Ustalenia, Uwagi and Historia zmian on the right */
#v-person .dane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; max-width: 1180px; }
#v-person .sect { padding: 4px 0 18px; }
#v-person .sect h2 { display: flex; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 650; margin: 0 0 8px; }
#v-person .sect h2 .lnk { margin-left: auto; }
#v-person .sect + .sect { border-top: 1px solid var(--rule); padding-top: 14px; }
#v-person .sect .pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
#v-person .sect textarea { display: block; width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); resize: vertical; }
#v-person .sect .fx { display: flex; gap: 8px; margin-top: 10px; }
#v-person .checks { display: flex; flex-direction: column; gap: 6px; }
#v-person .check { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
#v-person .check input { width: 16px; height: 16px; accent-color: var(--accent); }
:where(#v-person, #client-dlg) .kv2 { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; margin: 0; }
:where(#v-person, #client-dlg) .kv2 dt { color: var(--ink-3); font-size: 12px; line-height: 24px; }
:where(#v-person, #client-dlg) .kv2 dd { line-height: 24px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
#v-person .hist { list-style: none; margin: 0; padding: 0; }
#v-person .hist li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px dashed var(--rule); }
#v-person .hist li:first-child { border-top: 0; }
#v-person .hist-meta { color: var(--ink-3); font-size: 12px; }

/* Dane as a form (Edytuj, D15): each value an input where it stood (poczta.html .kv2 input), one bar under both
   columns that sticks to the bottom of the sheet while the form runs past it */
#v-person .dane.editing .kv2 { gap: 8px 16px; }
#v-person .dane.editing .kv2 dt { line-height: 28px; }
#v-person .dane.editing :is(input:not([type="checkbox"]), select) { width: 100%; max-width: 360px; height: 28px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); }
#v-person .dane.editing :is(input:not([type="checkbox"]), select, textarea):focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
#v-person .dane.editing [aria-invalid="true"] { border-color: var(--red); }
#v-person .dane.editing .sect textarea { min-height: 88px; }
#v-person .dane.editing .checks { gap: 2px; }
#v-person .dane-bar { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 14px; border-top: 1px solid var(--rule); background: var(--surface); }
#v-person .dane-bar .err { flex-basis: 100%; margin: 0 0 2px; }

/* Dodaj klienta: a native dialog */
#client-dlg { width: 520px; max-width: calc(100vw - 32px); padding: 0; border: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
#client-dlg::backdrop { background: rgba(23, 32, 43, .35); }
#client-dlg form { padding: 20px 22px; }
#client-dlg h2 { font-size: 17px; font-weight: 650; margin: 0 0 12px; overflow-wrap: anywhere; }
#client-dlg .kv2 { grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; }
#client-dlg .kv2 dt { line-height: 28px; }
#client-dlg :is(input, select) { width: 100%; height: 28px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); }
#client-dlg :is(input, select):focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
#client-dlg .fx { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 10px 10px 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: 60;
  display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: min(640px, calc(100vw - 24px)); font: 13px/1.4 var(--f); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { color: #FFD766; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.toast button:hover { background: rgba(255, 255, 255, .12); }
.toast .x { color: #fff; opacity: .7; display: grid; place-items: center; }
.toast .x .ico { width: 14px; height: 14px; }
/* in a conversation and while Napisz is open the toast sits at the top, under the bars — never over Odpowiedz · Przekaż,
   Wyślij, the editor's tools, the window, or the conversation's own bar */
body:has(#v-thread, .compose-win.on) .toast { top: calc(var(--banner) + 110px); bottom: auto; }
@media (min-width: 721px) { body:has(#v-thread) .toast { top: calc(var(--banner) + 128px); } }

/* ---- phone-only elements, hidden on the desktop ---- */
.fab, .scrim { display: none; }

@media (max-width: 1100px) {
  :is(#v-list, #v-search) .row { grid-template-columns: 16px 20px 24px 150px minmax(0, 1fr) auto; }
  #v-list .tab { min-width: 0; }
}

/* ---- phone (≤ 720 px), after Gmail on Android: drawer, three-line rows, sheets from the bottom ---- */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .top { height: 56px; padding: 8px 12px; gap: 8px; }
  .top .ham { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2); flex: none; }
  .top .ham .ico { width: 22px; height: 22px; }
  .top .logo { width: auto; } .top .logo b, .top .logo .muted { display: none; }
  .top .search { height: 40px; border-radius: 20px; max-width: none; }
  .top .me .me-name { display: none; }
  .top .me .av { width: 30px; height: 30px; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(23, 32, 43, .4); z-index: 44; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .nav { position: fixed; top: var(--banner); left: 0; bottom: 0; width: 290px; max-width: 85vw; background: var(--page); z-index: 45; padding: 14px 10px 20px; transform: translateX(-100%); transition: transform .2s; }
  .nav.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .nav .compose { display: none; }
  .nav .it { height: 40px; border-radius: 0 20px 20px 0; margin-left: -10px; padding-left: 20px; width: calc(100% + 10px); }
  .app > .main { margin: 0; border-radius: 0; }
  .fab { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; position: fixed; right: 16px; bottom: 22px; height: 52px; padding: 0 20px 0 16px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); font: 600 14px/1 var(--f); box-shadow: 0 3px 10px rgba(23, 32, 43, .25); z-index: 30; }
  .fab .ico { width: 20px; height: 20px; }
  .app:has(.nav.open) .fab { display: none; }

  /* tabs scroll sideways; the bulk bar shows only with a selection */
  #v-list .tabs { height: 44px; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  #v-list .tabs::-webkit-scrollbar { display: none; }
  #v-list .tab { min-width: 0; flex: none; padding: 0 12px; white-space: nowrap; }
  #v-list .tabs .sp, #v-list .tabs .pager { display: none; }
  #v-list .bar { display: none; }
  #v-list .bar.has-sel { display: flex; overflow-x: auto; scrollbar-width: none; }
  #v-list .bar .ib { flex: none; }

  /* rows: avatar, sender + date, subject, snippet + chip; the star at the right. A tap on the avatar selects */
  :is(#v-list, #v-search) .row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av from end" "av what star"; gap: 2px 10px; height: auto; padding: 10px 12px; align-items: start; }
  :is(#v-list, #v-search) .row .chk, :is(#v-list, #v-search) .row .mark, :is(#v-list, #v-search) .row .quick, :is(#v-list, #v-search) .row .from .cnt { display: none; }
  :is(#v-list, #v-search) .row .rav { display: grid; grid-area: av; width: 40px; height: 40px; font-size: 16px; background: var(--ink-3); align-self: start; margin-top: 2px; }
  :is(#v-list, #v-search) .row .rav.cust { background: var(--ok); }
  :is(#v-list, #v-search) .row.sel .rav { background: var(--accent); color: transparent; position: relative; }
  :is(#v-list, #v-search) .row.sel .rav::after { content: ""; position: absolute; left: 13px; top: 12px; width: 13px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
  :is(#v-list, #v-search) .row .from { grid-area: from; font-size: 14px; }
  :is(#v-list, #v-search) .row .end { grid-area: end; min-width: 0; gap: 6px; }
  :is(#v-list, #v-search) .row .end .av { display: none; }
  :is(#v-list, #v-search) .row .what { grid-area: what; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "subj subj subj" "snip clip chip"; gap: 1px 8px; }
  :is(#v-list, #v-search) .row .what .txt { display: contents; }
  :is(#v-list, #v-search) .row .what .subj { grid-area: subj; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(#v-list, #v-search) .row .what .snip { grid-area: snip; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(#v-list, #v-search) .row .what .snip .dash { display: none; }
  :is(#v-list, #v-search) .row .what .chip { grid-area: chip; height: 18px; font-size: 11px; }
  :is(#v-list, #v-search) .row .what .clip { grid-area: clip; }
  :is(#v-list, #v-search) .row .star { grid-area: star; align-self: end; width: 28px; height: 28px; margin-right: -4px; }
  :is(#v-list, #v-search) .row .star .ico { width: 18px; height: 18px; }
  :is(#v-list, #v-search) .row:hover { box-shadow: none; }
  :is(#v-list, #v-search) .empty { padding: 60px 24px; }
  #v-rules .vpage { padding: 14px 12px 80px; }
  /* a hold opens the menu: no text selection and no callout under the finger, and no tap flash on the item
     the sheet raised under it */
  :is(#v-list, #v-search) .row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #menu { -webkit-tap-highlight-color: transparent; }

  /* the menu is a sheet from the bottom (pm11): tier one in pairs, tier two stacked — the terms as buttons,
     the people as faces, the labels as pills — so all of it fits one screen */
  #menu.on { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 90dvh; overflow: auto; border-radius: 16px 16px 0 0;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0, 0, 0, .3); z-index: 50; }
  #menu.on::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 0 auto 6px; }
  #menu .band { column-gap: 4px; }
  #menu .band > .col + .col { border-left: 0; padding-left: 0; }
  #menu .band.t2 { display: block; }
  #menu .mi, #menu .t2 .mi { height: auto; min-height: 46px; padding: 4px 8px; font-size: 14px; }
  #menu .mi > .t { white-space: normal; line-height: 1.2; }
  #menu .mi kbd { display: none; }
  #menu h6, #menu .col > h6:first-child { font-size: 12.5px; padding: 8px 8px 4px; }
  #menu .terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 8px 6px; }
  #menu .terms .mi { min-height: 44px; justify-content: center; gap: 5px; border: 1px solid var(--rule-2); border-radius: 10px; }
  #menu .terms .mi > .lead { display: none; }
  #menu .terms .mi > .t { flex: none; }
  #menu .terms .mi > small { margin-left: 0; padding-left: 0; color: var(--ink-2); font-size: 14px; }
  #menu .people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 4px 4px; }
  #menu .people .mi { flex-direction: column; justify-content: flex-start; min-height: 66px; gap: 4px; padding: 6px 0 4px; }
  #menu .people .mi > .lead, #menu .people .mi > .lead .av { width: 36px; height: 36px; font-size: 15px; }
  #menu .people .mi > .t { font-size: 12.5px; text-align: center; max-width: 100%; }
  #menu .people .mi > .ok { display: none; }
  #menu .people .mi[aria-checked="true"] .av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  #menu .labels { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 8px 6px; }
  #menu .labels .mi { width: auto; min-height: 38px; gap: 7px; padding: 0 13px 0 9px; border: 1px solid var(--rule-2); border-radius: 19px; }
  #menu .labels .mi > .lead { width: 14px; }
  #menu .labels .mi > .ok { margin-left: 0; }
  #menu .labels .mi[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
  body:has(#menu.on) .scrim { opacity: 1; pointer-events: auto; }
  body:has(#menu.on) .fab { display: none; }

  /* Reguły: rows fold into cards, the form goes to one column */
  #v-rules .tr.h { display: none; }
  #v-rules .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "key to" "kw kw" "lbl owner"; gap: 2px 10px; padding: 10px 12px; }
  #v-rules .tr > :nth-child(1) { grid-area: key; } #v-rules .tr > :nth-child(2) { grid-area: to; }
  #v-rules .tr > :nth-child(3) { grid-area: lbl; font-size: 12px; } #v-rules .tr > :nth-child(4) { grid-area: kw; }
  #v-rules .tr > :nth-child(5) { grid-area: owner; justify-self: end; font-size: 12px; }
  #v-rules .tr > :nth-child(6), #v-rules .tr .acts { display: none; }
  #v-rules .tr > :has(> .none:only-child) { display: none; }   /* a card says only what the rule has */
  #v-rules .redit { padding: 12px; }
  #v-rules .redit .fx { flex-wrap: wrap; padding-left: 0; } #v-rules .redit .fx .muted { flex-basis: 100%; margin-left: 0; }
  #v-rules .redit .fx .btn { flex: 1; justify-content: center; height: 44px; }

  .toast { left: 12px; right: 12px; bottom: 16px; max-width: none; transform: translateY(12px); }
  .toast.on { transform: none; }
}
/* ---- the conversation on a phone: six icons, bodies full width, the customer behind the chip as a sheet ---- */
@media (max-width: 720px) {
  #v-thread .tbar { padding: 0 6px; gap: 0; }
  #v-thread .tbar .ib { width: 40px; height: 40px; }
  #v-thread .tbar :is(.sep, .pos, .prev, .next, .panel, .tab, .label, .assign) { display: none; }
  #v-thread .tbody, #v-thread .tbody.nos { grid-template-columns: minmax(0, 1fr); }
  #v-thread .th { padding: 14px 16px 6px; }
  #v-thread .th h1 { font-size: 18px; flex-basis: 100%; margin: 0; }
  #v-thread .th .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
  #v-thread .who-chip { display: inline-flex; background: var(--sunk); border-color: transparent; height: 28px; padding: 0 10px 0 6px; max-width: 100%; min-width: 0; font-size: 12.5px; }
  #v-thread .who-chip .av { width: 18px; height: 18px; font-size: 9px; background: var(--ink-3); }
  #v-thread .who-chip.cust .av { background: var(--ok); }
  #v-thread .who-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
  #v-thread .who-chip .muted { overflow: hidden; text-overflow: ellipsis; }
  #v-thread .msg .mh { padding: 12px 12px 10px; gap: 0 12px; }
  #v-thread .msg .mh .r .dfull, #v-thread .msg .mh .r .ib.star { display: none; }
  #v-thread .msg:not(.fold) .mh .r .dshort { display: inline; }
  #v-thread .msg .mh .r .ib { margin-left: 0; width: 32px; height: 32px; }
  #v-thread .msg .mh .who { flex-wrap: wrap; gap: 0 6px; }
  #v-thread .msg .mh .who small { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #v-thread .msg .mh .line2 { grid-column: 2 / span 2; }
  #v-thread .msg .details { margin: 0 12px 10px; max-width: none; }
  #v-thread .msg .mb { padding: 0 16px 18px; max-width: none; }
  #v-thread .gap { padding-left: 12px; height: auto; min-height: 48px; }
  #v-thread .gap .ln { display: none; }
  #v-thread .gap small { white-space: normal; line-height: 1.3; margin-right: 12px; }
  #v-thread [data-tip]::after { display: none; }
  #v-thread .reply { margin: 10px 16px 24px; }
  #v-thread .rbtn { flex: 1; justify-content: center; height: 40px; }
  #v-thread .reply .muted { flex-basis: 100%; margin-left: 0; }
  #v-thread .tbody .side, #v-thread .tbody.nos .side { display: block; position: fixed; left: 0; right: 0; bottom: 0; max-height: 78dvh; z-index: 46; border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .3); background: var(--surface); transform: translateY(105%); transition: transform .22s; padding: 10px 18px 28px; zoom: 1; }
  #v-thread .tbody .side.open { transform: none; }
  #v-thread .side::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 0 auto 14px; }
  #v-thread .side .kv { min-height: 36px; }
  #v-thread .side .case:hover { background: var(--sunk); }
  #v-thread .side-scrim { display: block; position: fixed; inset: 0; background: rgba(23, 32, 43, .4); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
  #v-thread .side-scrim.on { opacity: 1; pointer-events: auto; }
}
/* ---- the editor on a phone: the whole screen under „← Odpowiedz / Przekaż / Nowa wiadomość", as tall as what the keyboard
   leaves (--vvh, compose.js), the footer always on screen with its tools as icons, the suggestions full width ---- */
@media (max-width: 720px) {
  #v-thread .editor, .compose-win, .compose-win.big { position: fixed; left: 0; right: 0; top: calc(var(--vvt, 0px) + var(--banner)); bottom: auto; height: calc(var(--vvh, 100dvh) - var(--banner));
    width: auto; max-width: none; max-height: none;
    margin: 0; border: 0; border-radius: 0; box-shadow: none; zoom: 1; }
  #v-thread .editor { z-index: 48; }
  .compose-win { z-index: 47; }
  .compose-win .ch { display: none; }
  .compose-win.min .cbody { display: flex; }
  .editor .eh { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px 0 4px; border-bottom: 1px solid var(--rule); flex: none; }
  .editor .eh b { font-size: 16px; font-weight: 600; }
  .editor .eh button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
  .editor .eh .ico { width: 20px; height: 20px; }
  .editor .escroll { flex: 1 1 auto; overflow: auto; }
  .editor .ust { border-radius: 0; }
  .editor .fld { padding: 3px 12px; }
  .editor .fld .l { width: 34px; }
  .editor .fld input { font-size: 14px; }
  .editor .ed.body { flex: 1 0 auto; }
  .editor .ed-area, .compose-win .editor .ed-area, .compose-win.big .editor .ed-area { flex: 1; min-height: 180px; padding: 12px; font-size: 14px; }
  .editor .rcpt small { display: none; }
  .editor .fld { position: relative; }
  .editor .chips { position: static; }   /* the suggestions take the row's width, not the chips' */
  .editor .sugg { left: 8px; right: 8px; top: calc(100% + 2px); min-width: 0; max-width: none; }
  .editor .ef, #v-thread .editor .ef { flex-wrap: wrap; gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; }
  .editor .send { height: 40px; }
  .editor .q { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .editor .q .lbl, .editor .q .car { display: none; }
  .editor .q .ico { width: 20px; height: 20px; }
  .editor .tplw { position: static; }
  .editor .pop { left: 10px; right: 10px; width: auto; }
  .editor .after { order: 2; flex-basis: 100%; margin: 4px 0 0; justify-content: space-between; }
  .editor .after select { flex: 1; height: 32px; }
  .editor .bin, .editor[data-mode="new"] .bin { order: 1; margin-left: auto; width: 40px; height: 40px; }
}
@media (max-width: 1100px) { #v-person .dane { grid-template-columns: minmax(0, 1fr); max-width: 680px; } }

/* Klienci on a phone: the table as cards (name · firm, phone, wait, last), the band wrapping with its three buttons
   in a row, the form as a sheet from the bottom in one column */
@media (max-width: 720px) {
  #v-people .vpage, #v-person .vpage { padding: 14px 12px 88px; }
  #v-people .head { flex-wrap: wrap; gap: 8px 12px; }
  #v-people .head .btn-sm { height: 36px; }
  #v-people .tr.h { display: none; }
  #v-people .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wait" "tel last"; gap: 2px 10px; padding: 10px 12px; }
  #v-people .tr > :nth-child(1) { grid-area: name; }
  #v-people .tr > :nth-child(2) { grid-area: tel; font-size: 12px; color: var(--ink-2); }
  #v-people .tr > :nth-child(3), #v-people .tr > :nth-child(4) { display: none; }
  #v-people .tr > :nth-child(5) { grid-area: wait; justify-self: end; }
  #v-people .tr > :nth-child(6) { grid-area: last; justify-self: end; }
  #v-person .tbar { height: 48px; padding: 0 4px; }
  #v-person .tbar .back { height: 40px; }
  #v-person .ph { flex-wrap: wrap; gap: 12px; }
  #v-person .ph .pid { flex: 1 1 100%; }
  #v-person .ph .facts { gap: 8px 14px; }
  #v-person .ph .acts { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }
  #v-person .ph .acts .btn-sm { height: 36px; }
  #v-person .ptabs button { padding: 0 10px; }
  #v-person .prow { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "star what end"; padding: 8px 0 8px 2px; align-items: start; }
  #v-person .prow .star { grid-area: star; }
  #v-person .prow .what { grid-area: what; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "subj n" "snip chip"; gap: 1px 8px; }
  #v-person .prow .txt { display: contents; }
  #v-person .prow .subj { grid-area: subj; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #v-person .prow .snip { grid-area: snip; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #v-person .prow .chip { grid-area: chip; height: 18px; font-size: 11px; }
  #v-person .prow .cnt { grid-area: n; }
  #v-person .prow .end { grid-area: end; flex-direction: column; align-items: flex-end; gap: 2px; padding-right: 2px; }
  #v-person .prow:hover { box-shadow: none; }
  :where(#v-person, #client-dlg) .kv2 { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  :where(#v-person, #client-dlg) .kv2 dt { line-height: 18px; margin-top: 8px; }
  #v-person .notebox, #v-person .notes { max-width: none; }
  #v-person .btn { height: 40px; }
  #client-dlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; overflow: auto; }
  #client-dlg form { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  #client-dlg .kv2 { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  #client-dlg .kv2 dt { line-height: 18px; margin-top: 8px; }
  #client-dlg :is(input, select) { height: 40px; font-size: 16px; }
  #client-dlg .fx .btn { flex: 1; height: 44px; }
  /* Edytuj on a phone: the labels over the fields, one column, 16 px so the keyboard does not zoom; the bar
     across the screen at its bottom edge */
  #v-person .vpage:has(#dane-form) { padding-bottom: 0; }
  #v-person .dane.editing .kv2 { gap: 4px 0; }
  #v-person .dane.editing .kv2 dt { line-height: 18px; margin-top: 8px; }
  #v-person .dane.editing :is(input:not([type="checkbox"]), select) { max-width: none; height: 40px; font-size: 16px; }
  #v-person .dane.editing .sect textarea { font-size: 16px; }
  #v-person .dane.editing .check { min-height: 40px; }
  #v-person .dane-bar { margin: 0 -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(23, 32, 43, .08); }
  #v-person .dane-bar .btn { flex: 1; height: 44px; }
}
@media (hover: none) { :is(#v-list, #v-search) .row:hover .when, :is(#v-list, #v-search) .row:hover .wait { display: inline; } #v-thread [data-tip]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav, .scrim, .toast, #v-thread .side, #v-thread .side-scrim { transition: none; } #v-people .tr.fresh { animation: none; background: var(--accent-tint); } }

/* ============================================================ the person menu and its pages (ticket 6; drafts/ui-v5/panele.html):
   Historia, Ustawienia (variant B), Podpisy, Szablony, the loading page, „Wyślij próbkę", the login (variant A).
   v4's global .btn, .ctab, .ed-*, .hint, .empty and .loading would reach them: every rule here sets what those set. */
:where(#pmenu, #v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg, .lg) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, .v5-dlg, .lg) :is(input, select, textarea) { font: inherit; color: inherit; }
:where(#pmenu, #v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg, .lg) :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
#v-hist, #v-set, #v-sig, #v-tpl, #v-load { zoom: var(--z); font: 13px/1.4 var(--f); color: var(--ink); }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(p, h1, h2, h3, h4, h6) { margin: 0; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.muted, .k) { color: var(--ink-3); }
:where(#v-set, #v-sig, #v-tpl) .vpage { padding: 20px 28px 40px; }
:where(#v-hist, #v-set, #v-sig, #v-tpl) h1 { font-size: 20px; font-weight: 650; font-stretch: 112%; letter-spacing: -.012em; line-height: 1.25; }
:where(#v-set, #v-sig, #v-tpl) .head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
:where(#v-set, #v-sig, #v-tpl) .head .count { color: var(--ink-3); }
:where(#v-set, #v-sig, #v-tpl) .lead { color: var(--ink-3); margin-bottom: 18px; max-width: 78ch; }

/* buttons: filled (pri), outlined (sec), a link (lnk); a row's actions are round icons */
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: none; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) .btn { height: 32px; padding: 0 14px; font-size: 13px; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) .btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm).pri { background: var(--accent-soft); }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm).pri:hover { background: #C9DCF7; border-color: transparent; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm).sec { border-color: var(--rule-2); background: var(--surface); }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm).sec:hover { border-color: var(--ink-3); background: var(--surface); }
:where(#v-set, #v-sig, #v-tpl) .btn.lnk { color: var(--accent-ink); padding: 0 6px; font-weight: 500; border: 0; }
:where(#v-set, #v-sig, #v-tpl) .btn.lnk:hover { text-decoration: underline; background: none; }
:where(#v-set, #v-sig, #v-tpl) .danger, :where(#v-set, #v-sig, #v-tpl) .btn.lnk.danger { color: var(--red); }
:where(#v-set, #v-sig, #v-tpl) .btn-sm.danger:not(.sec):hover { background: var(--red-tint); }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm):disabled { opacity: .45; cursor: default; }
:where(#v-hist, #v-set, #v-sig, #v-tpl, #v-load, .v5-dlg) :is(.btn, .btn-sm) .ico { width: 15px; height: 15px; }

/* fields, the error box, a chip, a label's colour, a piece of mail as the mail shows it */
:where(#v-set, #v-sig, #v-tpl) .fld-in { display: block; height: 32px; width: 100%; border: 1px solid var(--rule-2); border-radius: 7px; padding: 0 10px; background: var(--surface); font-size: 13px; color: var(--ink); }
:where(#v-set, #v-sig, #v-tpl) .fld-in:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
:where(#v-set, #v-sig, #v-tpl) textarea.fld-in { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
:where(#v-set, #v-sig, #v-tpl) select.fld-in { padding: 0 6px; }
:where(#v-set, #v-sig, #v-tpl) .fld-in:disabled { background: var(--sunk); color: var(--ink-2); cursor: not-allowed; }
:where(#v-set, #v-sig, #v-tpl, .v5-dlg) .ferr { display: flex; align-items: center; gap: 8px; background: var(--red-tint); color: var(--red); font-weight: 600; border-radius: 7px; padding: 8px 12px; margin-bottom: 12px; }
:where(#v-set, #v-sig, #v-tpl, .v5-dlg) .ferr[hidden] { display: none; }
:where(#v-hist, #v-set, #v-sig, #v-tpl) .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; flex: none; }
:where(#v-set, #v-sig, #v-tpl) .chip.def { background: var(--accent-tint); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
:where(#v-hist, #v-set, #v-sig, #v-tpl) .lbl { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; background: var(--c, var(--ink-3)); }
:where(#v-set, #v-sig, #v-tpl) .mailish { font: 13px/1.45 Arial, Helvetica, sans-serif; color: #222; }
:where(#v-set, #v-sig, #v-tpl) .mailish p { margin: 0 0 6px; }
:where(#v-set, #v-sig, #v-tpl) .mailish p:last-child { margin-bottom: 0; }
/* a box of my own: a checkbox drawn as the prototype's */
:where(#v-hist, #v-set) .ckl { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; cursor: pointer; }
:where(#v-hist, #v-set) .ckl input { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--rule-2); border-radius: 4px; background: var(--surface); display: grid; place-items: center; margin: 0; flex: none; cursor: pointer; }
:where(#v-hist, #v-set) .ckl input:checked { background: var(--accent); border-color: var(--accent); }
:where(#v-hist, #v-set) .ckl input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
:where(#v-hist, #v-set) .ckl input:disabled { cursor: not-allowed; }
#v-set .ckl.off { cursor: not-allowed; color: var(--ink-2); }

/* ---- the person menu: who you are, then Ustawienia · Podpisy · Szablony · Historia · Wyloguj ---- */
.top .me { height: 36px; padding: 0 6px 0 12px; border-radius: 18px; }
.top .me:hover { background: rgba(255, 255, 255, .75); color: var(--ink); }
.top .me[aria-expanded="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(23, 32, 43, .14); }
.top .me .chev { width: 14px; height: 14px; color: var(--ink-3); }
#pmenu { position: fixed; z-index: 50; right: 14px; top: calc(var(--banner) + 52px * var(--z) - 4px); width: 300px; max-width: calc(100vw - 28px); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 32, 43, .18), 0 1px 2px rgba(23, 32, 43, .1); padding: 6px; display: none; font: 13px/1.4 var(--f); color: var(--ink); }
#pmenu.on { display: block; }
#pmenu .mi { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; width: 100%; color: var(--ink); }
#pmenu .mi:hover { background: var(--sunk); }
#pmenu .mi .ico { color: var(--ink-2); }
#pmenu .mi.on { background: var(--accent-soft); font-weight: 600; }
#pmenu hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
#pmenu .pm-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }
#pmenu .pm-head > div { min-width: 0; }
#pmenu .pm-head .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background: var(--ink-2); flex: none; }
#pmenu .pm-head .av.g { background: #1F5BC4; } #pmenu .pm-head .av.a { background: #16805A; } #pmenu .pm-head .av.m { background: #A15F00; }
#pmenu .pm-head b { display: block; font-size: 14px; font-weight: 650; }
#pmenu .pm-head small { display: block; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }

/* ---- the loading page and a page that did not load ---- */
#v-load .loading { padding: 48px 24px; text-align: center; color: var(--ink-3); }
#v-load .empty { padding: 56px 24px; text-align: center; color: var(--ink-3); }
#v-load .empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
#v-load .empty .btn-sm { display: flex; margin: 14px auto 0; }

/* ---- Historia: the day's timeline on the left, the column of days on the right; each scrolls on its own ---- */
#v-hist .hgrid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 268px; grid-template-rows: minmax(0, 1fr); min-height: 0; }
#v-hist .hpage { padding: 20px 28px 40px; overflow: auto; min-height: 0; }
#v-hist .tl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
#v-hist .tl-date { color: var(--ink-2); font-size: 14px; }
#v-hist .tl-date .d-short { display: none; }
#v-hist .tl-rule { flex: 1; height: 1px; background: var(--rule); align-self: center; min-width: 20px; }
#v-hist .tl-count { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
#v-hist .tl-phonebar { display: none; }
#v-hist .tl { list-style: none; margin: 0; padding: 0; max-width: 860px; }
#v-hist .ev { position: relative; display: block; }
#v-hist .ev::before { content: ""; position: absolute; left: 77px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
#v-hist .ev:first-child::before { top: 26px; }
#v-hist .ev:last-child::before { bottom: auto; height: 26px; }
#v-hist .ev:only-child::before { display: none; }
#v-hist .ev-btn { display: grid; grid-template-columns: 48px 32px minmax(0, 1fr); gap: 0 14px; width: 100%; padding: 10px 12px 12px 0; border-radius: 10px; text-align: left; }
@media (hover: hover) { #v-hist button.ev-btn:hover { background: var(--read); } #v-hist button.ev-btn:hover .ev-card { border-color: var(--rule-2); box-shadow: 0 1px 3px rgba(23, 32, 43, .1); } }
#v-hist .ev-time { font-weight: 600; color: var(--ink-2); text-align: right; padding-top: 8px; }
#v-hist .ev-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink-2); position: relative; z-index: 1; }
#v-hist .t-out .ev-dot { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-ink); }
#v-hist .t-call .ev-dot { background: var(--ok-tint); border-color: #A9D8C2; color: var(--ok); }
#v-hist .t-star .ev-dot { background: var(--star-tint); border-color: #F3D27A; color: var(--star); }
#v-hist .t-star .ev-dot .ico { fill: var(--star); }
#v-hist .t-status .ev-dot { background: var(--sunk); border-color: var(--rule); color: var(--ink-3); }
/* the circle says its name under the pointer, as the conversation's icons do */
#v-hist .ev-dot[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font: 500 11.5px/1.4 var(--f); padding: 4px 8px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 70; }
#v-hist .ev-dot[data-tip]:hover::after { opacity: 1; transition: opacity .1s .35s; }
#v-hist .ev-body { padding-top: 7px; min-width: 0; display: block; }
#v-hist .ev-title { font-weight: 650; font-size: 13.5px; display: block; }
#v-hist .ev-facts { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 3px; font-size: 12.5px; }
#v-hist .fl { color: var(--ink-3); }
#v-hist .ev-line { display: block; margin-top: 3px; font-size: 12.5px; }
#v-hist .ev-explain { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
#v-hist .ev-card { margin-top: 8px; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); max-width: 640px; }
#v-hist .ev-card .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#v-hist .ev-note { display: block; margin-top: 8px; padding: 7px 12px; background: var(--ok-tint); border-radius: 0 8px 8px 0; border-left: 3px solid var(--ok); max-width: 640px; font-size: 13px; }
#v-hist .empty { padding: 56px 24px; text-align: center; color: var(--ink-3); max-width: 640px; }
#v-hist .empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
#v-hist .empty .btn-sm { display: flex; margin: 14px auto 0; }
#v-hist .tl-rail { border-left: 1px solid var(--rule); background: var(--sunk); overflow: auto; padding: 18px 14px 24px; }
#v-hist .tl-rail h4 { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 0 10px 6px; }
#v-hist .day-row { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 7px; width: 100%; color: var(--ink-2); }
#v-hist .day-row:hover { background: rgba(255, 255, 255, .8); color: var(--ink); }
#v-hist .day-row.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
#v-hist .day-row .n { margin-left: auto; font-size: 12px; color: var(--ink-3); }
#v-hist .day-row.on .n { color: var(--ink); font-weight: 700; }
#v-hist .pickw { position: relative; display: inline-flex; }
#v-hist .pickw input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#v-hist .tl-rail .pickw { margin: 8px 0 0 4px; }
#v-hist .tl-rail hr { border: 0; border-top: 1px solid var(--rule); margin: 14px 4px; }
#v-hist .tl-rail .ckl { padding: 0 6px; }
#v-hist .sum { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
#v-hist .tl-rail .sum { padding: 8px 6px 0; }
#v-hist .tl-rail .hint { padding: 12px 6px 0; color: var(--ink-3); font-size: 12px; display: flex; gap: 8px; line-height: 1.45; }

/* ---- Ustawienia, variant B: on the left what is yours on this device, on the right the office's ---- */
#v-set .set-b { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1180px; }
#v-set .col { min-width: 0; }
#v-set .col > h3 { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 2px 8px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
#v-set .col > h3 small { font-weight: 400; color: var(--ink-3); }
#v-set .me-col { position: sticky; top: 0; }
#v-set .card { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); margin-bottom: 16px; scroll-margin-top: 16px; }
#v-set .card > header { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; background: var(--sunk); border-bottom: 1px solid var(--rule); }
#v-set .card > header h2 { font-size: 13px; font-weight: 650; }
#v-set .card > header small { margin-left: auto; color: var(--ink-3); font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
#v-set .card > header small .ico { width: 13px; height: 13px; }
#v-set .cerr { padding: 12px 16px 0; }
#v-set .cerr .ferr { margin: 0; }
#v-set .cf { padding: 14px 16px; min-width: 0; }
#v-set .cf + .cf { border-top: 1px solid var(--rule); }
#v-set .cf > b { display: block; font-weight: 600; margin-bottom: 2px; }
#v-set .cf > p { color: var(--ink-3); font-size: 12px; margin-bottom: 9px; line-height: 1.45; max-width: 62ch; }
#v-set .cfx { padding: 10px 16px; background: var(--read); border-top: 1px solid var(--rule); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#v-set .seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--surface); flex-wrap: wrap; }
#v-set .seg button { height: 40px; padding: 0 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
#v-set .seg button + button { border-left: 1px solid var(--rule-2); }
#v-set .seg button:hover { background: var(--sunk); color: var(--ink); }
#v-set .seg button.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
#v-set .radios { display: grid; gap: 2px; }
#v-set .rad { position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; border-radius: 7px; padding: 0 8px; margin-left: -8px; }
#v-set .rad:hover { background: var(--sunk); }
/* the real radio lies on the drawn dot: a click there is a click on it */
#v-set .rad input { position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; opacity: 0; cursor: pointer; }
#v-set .rad .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule-2); display: grid; place-items: center; flex: none; background: var(--surface); }
#v-set .rad.on .dot { border-color: var(--accent); }
#v-set .rad.on .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#v-set .rad:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
#v-set .rad small { color: var(--ink-3); font-size: 12px; }
#v-set .rad.off { cursor: not-allowed; color: var(--ink-2); }
#v-set .rad.off:hover { background: none; }
#v-set .rad.off input { cursor: not-allowed; }
#v-set .ckl { margin-bottom: 8px; }
#v-set .ro-val { font-weight: 600; line-height: 30px; }
#v-set .ro-val small { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
#v-set .ro-val.muted { font-weight: 400; }
#v-set .fieldrow { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
#v-set .fieldrow:has(textarea) { align-items: flex-end; }
#v-set .fieldrow .muted { font-size: 12px; }
#v-set .domains { max-width: 340px; }
#v-set .hold { width: 110px; }
#v-set .from { max-width: 320px; }
#v-set .pprev { border: 1px solid var(--rule); border-radius: 8px; max-width: 680px; padding: 10px 12px 12px; background: var(--read); }
#v-set .pprev h6 { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
#v-set .pprev .mailish { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; overflow: auto; }
/* Etykiety: the fixed ones in a line, the office's own as rows, the box to add one */
#v-set .labels .fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
#v-set .labels .fixed > span:first-child { color: var(--ink-3); font-size: 12px; margin-right: 2px; }
#v-set .lrow { display: flex; align-items: center; gap: 10px; min-height: 42px; border-top: 1px solid var(--rule); flex-wrap: wrap; padding: 4px 0; }
#v-set .lrow .nm { font-weight: 600; overflow-wrap: anywhere; }
#v-set .lrow .k { font-size: 12px; }
#v-set .lrow .la { margin-left: auto; display: flex; gap: 4px; align-items: center; }
#v-set .lrow .fld-in { width: 220px; }
#v-set .lrow.ask { background: var(--red-tint); margin: 0 -8px; padding: 4px 8px; border-radius: 7px; border-top-color: transparent; }
#v-set .ladd { display: flex; gap: 8px; align-items: center; margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 12px; flex-wrap: wrap; }
#v-set .ladd .fld-in { width: 240px; }
#v-set .lerr { color: var(--red); font-size: 12px; font-weight: 600; flex-basis: 100%; }

/* ---- „Tekst" | „Kod HTML" (piece.js): one framed box — the tabs, the bar and the text, or the code and what the mail will show ---- */
:where(#v-set, #v-sig, #v-tpl) .piece { border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--surface); max-width: 680px; color: var(--ink); font-size: 13px; }
:where(#v-set, #v-sig, #v-tpl) .piece .ptabs { display: flex; gap: 0; margin: 0; border-bottom: 1px solid var(--rule); background: var(--sunk); }
:where(#v-set, #v-sig, #v-tpl) .piece .ctab { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); position: relative; }
:where(#v-set, #v-sig, #v-tpl) .piece .ctab:hover { color: var(--ink); }
:where(#v-set, #v-sig, #v-tpl) .piece .ctab.on { color: var(--accent); font-weight: 600; background: var(--surface); }
:where(#v-set, #v-sig, #v-tpl) .piece .ctab.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed.boxed { border: 0; border-radius: 0; background: none; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed.boxed:focus-within { outline: 0; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-bar { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--rule); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-btn { width: 30px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 400; display: grid; place-items: center; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-btn:hover { background: var(--sunk); color: var(--ink); border-color: transparent; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-btn[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-btn .ic { width: 16px; height: 16px; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-area { min-height: 104px; max-height: 50vh; padding: 10px 12px; font: 13px/1.45 Arial, Helvetica, sans-serif; color: #222; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-area:focus { box-shadow: inset 0 0 0 2px var(--accent-tint); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-area p { margin: 0 0 1.45em; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-link { gap: 6px; padding: 6px 10px; background: var(--sunk); border-bottom: 1px solid var(--rule); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-link .field { height: 30px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 0 8px; font-size: 13px; }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-link .btn { height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); }
:where(#v-set, #v-sig, #v-tpl) .piece .ed-link .btn.primary { background: var(--accent-soft); border-color: transparent; }
:where(#v-set, #v-sig, #v-tpl) .piece .pnote { font-size: 12px; color: var(--warn); background: var(--warn-tint); padding: 7px 12px; border-bottom: 1px solid var(--rule); }
:where(#v-set, #v-sig, #v-tpl) .piece .pcode-hint { font-size: 12px; color: var(--ink-3); padding: 8px 12px 0; }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-code { display: block; width: 100%; min-height: 120px; border: 0; outline: 0; padding: 8px 12px 10px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; background: var(--surface); color: var(--ink); }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-out { border-top: 1px solid var(--rule); padding: 10px 12px 12px; background: var(--read); }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-lbl { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-prev { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; overflow: auto; }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-prev img { max-width: 100%; height: auto; }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-removed { font-size: 12px; color: var(--warn); margin-top: 6px; overflow-wrap: anywhere; }
:where(#v-set, #v-sig, #v-tpl) .piece .piece-removed[hidden] { display: none; }
#v-tpl .tpl-ed .ed-area { min-height: 160px; }

/* ---- Podpisy and Szablony: the frame of Reguły — a table, every row opens for editing in place ---- */
:where(#v-sig, #v-tpl) .tbl { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); }
:where(#v-sig, #v-tpl) .tr { display: grid; gap: 12px; align-items: start; min-height: 40px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
:where(#v-sig, #v-tpl) .tr:last-child { border-bottom: 0; }
:where(#v-sig, #v-tpl) .tr.h { min-height: 32px; padding-top: 0; padding-bottom: 0; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--sunk); }
@media (hover: hover) { :where(#v-sig, #v-tpl) .tr:not(.h, .none):hover { background: var(--read); } }
:where(#v-sig, #v-tpl) .tr b { font-weight: 600; }
#v-sig .tr { grid-template-columns: 220px minmax(0, 1fr) 150px 104px; }
#v-tpl .tr { grid-template-columns: 240px minmax(0, 1fr) 150px 104px; padding-top: 11px; padding-bottom: 11px; cursor: pointer; }
#v-tpl .tr.h { cursor: default; }
#v-tpl .tr.none { display: block; padding: 14px; cursor: default; }
:where(#v-sig, #v-tpl) .tr > span { min-width: 0; }
:where(#v-sig, #v-tpl) .nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; overflow-wrap: anywhere; }
:where(#v-sig, #v-tpl) .nm .btn.lnk { height: 22px; padding: 0; font-size: 12px; }
#v-sig .prev { max-height: 120px; overflow: hidden; font-size: 12.5px; }
#v-sig .prev img { max-width: 100%; height: auto; }
#v-tpl .gist { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; overflow-wrap: anywhere; }
:where(#v-sig, #v-tpl) .acts { display: flex; gap: 2px; justify-self: end; }
:where(#v-sig, #v-tpl) .acts button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
:where(#v-sig, #v-tpl) .acts button:hover { background: var(--sunk); color: var(--ink); }
:where(#v-sig, #v-tpl) .acts button.del:hover { color: var(--red); }
:where(#v-sig, #v-tpl) .edf { padding: 14px 14px 16px; background: var(--sunk); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px 22px; align-items: start; cursor: default; }
:where(#v-sig, #v-tpl) .edf:last-child { border-bottom: 0; }
:where(#v-sig, #v-tpl) .edf .ferr { grid-column: 1 / -1; margin: 0; }
:where(#v-sig, #v-tpl) .edf .fl { display: grid; gap: 5px; font-size: 12px; color: var(--ink-3); min-width: 0; }
:where(#v-sig, #v-tpl) .edf .fl small { color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
:where(#v-sig, #v-tpl) .edf .left { display: grid; gap: 12px; align-content: start; }
:where(#v-sig, #v-tpl) .edf .fx { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
:where(#v-sig, #v-tpl) .edf .sp { flex: 1; }

/* ---- „Wyślij próbkę": a window over the page (a sheet from the bottom on a phone) ---- */
.v5-dlg { width: 520px; max-width: calc(100vw - 32px); padding: 20px 22px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); font: 13px/1.4 var(--f); }
.v5-dlg::backdrop { background: rgba(23, 32, 43, .35); }
.v5-dlg h2 { font-size: 17px; font-weight: 650; margin-bottom: 6px; }
.v5-dlg .lead { color: var(--ink-2); margin-bottom: 14px; }
.v5-dlg .kv2 { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.v5-dlg .kv2 dt { color: var(--ink-3); font-size: 12px; line-height: 28px; }
.v5-dlg .kv2 dd { margin: 0; }
.v5-dlg input { width: 100%; height: 28px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.v5-dlg input:focus { outline: 0; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
.v5-dlg .fx { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---- the login, variant A: a card in the middle of the grey page, no bars ---- */
body:has(> #app > .lg) { background: var(--page); }
.lg { min-height: calc(100dvh - var(--banner)); display: grid; place-items: center; padding: 64px 16px 32px; background: var(--page); font: 13px/1.4 var(--f); color: var(--ink); -webkit-font-smoothing: antialiased; }
.lg-card { width: 380px; max-width: 100%; background: var(--surface); border-radius: 16px; padding: 30px 32px 26px; box-shadow: 0 1px 2px rgba(23, 32, 43, .06), 0 10px 32px rgba(23, 32, 43, .08); }
.lg-brand { display: flex; align-items: center; gap: 8px; }
.lg-brand b { font-weight: 700; font-stretch: 118%; font-size: 17px; letter-spacing: -.01em; }
.lg-brand .muted { color: var(--ink-3); }
.lg-brand .demo { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--red); border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px 0; line-height: 1.3; }
.lg h1 { font-size: 22px; font-weight: 650; font-stretch: 112%; letter-spacing: -.012em; line-height: 1.25; margin: 22px 0 16px; }
.lg label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; margin-bottom: 12px; }
.lg input { height: 42px; font-size: 14px; border: 1px solid var(--rule-2); border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--ink); width: 100%; }
.lg input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
.lg input.bad { border-color: var(--red); }
.lg .go { height: 44px; width: 100%; border-radius: 22px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.lg .go:hover { background: var(--accent-ink); }
.lg .go:disabled { opacity: .7; cursor: wait; }
.lg .lerr { display: flex; gap: 9px; align-items: flex-start; background: var(--red-tint); color: var(--red); border-radius: 8px; padding: 10px 12px; font-weight: 600; margin: 0 0 14px; line-height: 1.35; }
.lg .lerr.info { background: var(--warn-tint); color: var(--warn); }
.lg .lerr .ico { margin-top: 1px; }
.lg .foot { color: var(--ink-3); font-size: 12px; margin: 16px 0 0; line-height: 1.5; }

@media (max-width: 1100px) {
  #v-set .set-b { grid-template-columns: minmax(0, 1fr); }
  #v-set .me-col { position: static; }
}
@media (max-width: 980px) {
  #v-hist .hgrid { grid-template-columns: minmax(0, 1fr) 230px; }
  #v-sig .tr, #v-tpl .tr { grid-template-columns: 170px minmax(0, 1fr) 120px 100px; }
}

/* ---- the panels on a phone: the person menu a sheet, one column, the tables as cards, 16 px fields ---- */
@media (max-width: 720px) {
  .top .me { padding: 0; height: auto; border-radius: 50%; }
  .top .me .chev { display: none; }
  #pmenu.on { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 86dvh; overflow: auto; border-radius: 16px 16px 0 0; padding: 10px 8px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0, 0, 0, .3); }
  #pmenu.on::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 0 auto 8px; }
  #pmenu .mi { height: 46px; font-size: 14px; }
  body:has(#pmenu.on) .scrim { opacity: 1; pointer-events: auto; }
  body:has(#pmenu.on) .fab { display: none; }

  :where(#v-set, #v-sig, #v-tpl) .vpage { padding: 14px 12px 80px; }
  :where(#v-set, #v-sig, #v-tpl) .fld-in { height: 40px; font-size: 16px; }
  :where(#v-set, #v-sig, #v-tpl) textarea.fld-in { height: auto; font-size: 16px; }

  #v-hist .hgrid { grid-template-columns: minmax(0, 1fr); }
  #v-hist .tl-rail { display: none; }
  #v-hist .hpage { padding: 14px 12px 80px; }
  #v-hist .tl-head { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
  #v-hist .tl-date .d-long { display: none; }
  #v-hist .tl-date .d-short { display: inline; }
  #v-hist .tl-rule { display: none; }
  #v-hist .tl-count { margin-left: auto; }
  #v-hist .tl-phonebar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  #v-hist .daynav { display: flex; gap: 6px; }
  #v-hist .daynav .btn-sm { height: 38px; }
  #v-hist .daynav .step { width: 40px; padding: 0; }
  #v-hist .tl-phonebar .ckl { margin-left: auto; }
  #v-hist .tl-phonebar .sum { flex-basis: 100%; }
  #v-hist .ev::before { left: 59px; }
  #v-hist .ev:first-child::before { top: 22px; }
  #v-hist .ev:last-child::before { height: 22px; }
  #v-hist .ev-btn { grid-template-columns: 38px 28px minmax(0, 1fr); gap: 0 10px; padding: 8px 4px 10px 0; }
  #v-hist .ev-time { font-size: 12.5px; padding-top: 6px; }
  #v-hist .ev-dot { width: 28px; height: 28px; }
  #v-hist .ev-dot .ico { width: 14px; height: 14px; }
  #v-hist .ev-dot[data-tip]::after { display: none; }
  #v-hist .ev-body { padding-top: 5px; }
  #v-hist .ev-facts { flex-direction: column; gap: 1px; }
  #v-hist .ev-card { min-height: 0; padding: 7px 10px; align-items: flex-start; flex-wrap: wrap; }
  #v-hist .ev-card .s { white-space: normal; }

  #v-set .seg { display: flex; }
  #v-set .seg button { flex: 1 1 auto; justify-content: center; padding: 0 10px; height: 44px; }
  #v-set .rad { min-height: 40px; }
  #v-set .card > header { flex-wrap: wrap; padding: 8px 14px; gap: 2px 10px; }
  #v-set .card > header small { margin-left: 0; flex-basis: 100%; }
  #v-set .cf { padding: 12px 14px; }
  #v-set .lrow .la { margin-left: 0; flex-basis: 100%; }
  #v-set .lrow .fld-in, #v-set .ladd .fld-in, #v-set .domains, #v-set .from { width: 100%; max-width: none; }
  #v-set .ladd .btn-sm, #v-set .lrow .btn-sm { height: 38px; }
  #v-set .cfx .btn { height: 40px; }

  #v-sig .tr.h, #v-tpl .tr.h { display: none; }
  #v-sig .tr, #v-tpl .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm acts" "prev prev" "use use"; padding: 12px; gap: 4px 10px; }
  #v-sig .tr > :nth-child(1), #v-tpl .tr > :nth-child(1) { grid-area: nm; }
  #v-sig .tr > :nth-child(2), #v-tpl .tr > :nth-child(2) { grid-area: prev; }
  #v-sig .tr > :nth-child(3), #v-tpl .tr > :nth-child(3) { grid-area: use; }
  #v-sig .tr > :nth-child(4), #v-tpl .tr > :nth-child(4) { grid-area: acts; }
  :where(#v-sig, #v-tpl) .use:has(.k) { display: none; }
  :where(#v-sig, #v-tpl) .acts button { width: 38px; height: 38px; }
  #v-sig .prev { border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; max-height: none; }
  :where(#v-sig, #v-tpl) .edf { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  :where(#v-sig, #v-tpl) .edf .fx .btn { height: 40px; }
  :where(#v-set, #v-sig, #v-tpl) .piece { max-width: none; }
  :where(#v-set, #v-sig, #v-tpl) .piece .ed-btn { width: 36px; height: 34px; }
  :where(#v-set, #v-sig, #v-tpl) .piece .ctab { height: 38px; }

  .v5-dlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .v5-dlg .kv2 { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .v5-dlg input { height: 40px; font-size: 16px; }
  .v5-dlg .fx .btn { flex: 1; height: 44px; }

  .lg { display: block; padding: 0 0 24px; }
  .lg-card { width: auto; margin: 16px 12px 0; padding: 24px 20px 22px; }
  .lg input { font-size: 16px; }
}

/* ============================================================ the rule's form and its window (ticket 9)
   One form (rules.js) on Reguły in place of a row and in the window the menu opens (panele.html p20, p24, p26):
   a label column, the scope as a segment, the tabs as round choices, „I zawsze" two selects, the words lines.
   :is() carries the id, so these win over .v5-dlg's own input rules. */
:is(#v-rules, .rdlg) .rgrid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px 16px; align-items: start; margin: 0; }
:is(#v-rules, .rdlg) .rgrid > dt { color: var(--ink-3); font-size: 12.5px; padding-top: 8px; }
:is(#v-rules, .rdlg) .rgrid > dd { min-width: 0; margin: 0; }
:is(#v-rules, .rdlg) .seg2 { display: inline-flex; max-width: 100%; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
/* a long address makes a button two lines rather than run out of the window: it breaks before the address */
:is(#v-rules, .rdlg) .seg2 button { min-height: 32px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); min-width: 0; line-height: 1.3; text-align: left; }
:is(#v-rules, .rdlg) .seg2 .nw { white-space: nowrap; }
:is(#v-rules, .rdlg) .seg2 button + button { border-left: 1px solid var(--rule-2); }
:is(#v-rules, .rdlg) .seg2 button:hover { background: var(--sunk); color: var(--ink); }
:is(#v-rules, .rdlg) .seg2 button.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
:is(#v-rules, .rdlg) .seg2 button .ico { width: 14px; height: 14px; color: var(--warn); }
:is(#v-rules, .rdlg) .pubwarn { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 7px 10px; border-radius: 7px; background: var(--warn-tint); color: var(--warn); font-size: 12px; line-height: 1.4; }
:is(#v-rules, .rdlg) .pubwarn .ico { width: 14px; height: 14px; margin-top: 1px; }
:is(#v-rules, .rdlg) .radios { display: grid; justify-items: start; }
:is(#v-rules, .rdlg) .rad2 { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; margin-left: -8px; border-radius: 7px; cursor: pointer; color: var(--ink); }
@media (hover: hover) { :is(#v-rules, .rdlg) .rad2:hover { background: var(--sunk); } }
:is(#v-rules, .rdlg) .rad2 input { position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
:is(#v-rules, .rdlg) .rad2 .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule-2); display: grid; place-items: center; flex: none; background: var(--surface); }
:is(#v-rules, .rdlg) .rad2.on .dot { border-color: var(--accent); }
:is(#v-rules, .rdlg) .rad2.on .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
:is(#v-rules, .rdlg) .rad2:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
:is(#v-rules, .rdlg) .rad2 small { color: var(--ink-3); font-size: 12px; }
:is(#v-rules, .rdlg) .always { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#v-rules, .rdlg) :is(.always select, .kwl input, .kwl select) { height: 32px; min-width: 0; border: 1px solid var(--rule-2); border-radius: 7px; background: var(--surface); padding: 0 10px; font-size: 13px; color: var(--ink); }
:is(#v-rules, .rdlg) :is(.always select, .kwl input, .kwl select):focus { outline: 0; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
:is(#v-rules, .rdlg) .always select { width: auto; min-width: 190px; }
:is(#v-rules, .rdlg) .always small { flex-basis: 100%; color: var(--ink-3); font-size: 12px; }
:is(#v-rules, .rdlg) .kwhelp { color: var(--ink-3); font-size: 12px; line-height: 1.4; margin: 7px 0 6px; }
:is(#v-rules, .rdlg) .kwl { display: grid; grid-template-columns: minmax(0, 1fr) auto 170px 30px; gap: 8px; align-items: center; margin-bottom: 6px; }
:is(#v-rules, .rdlg) .kwl input { width: 100%; }
:is(#v-rules, .rdlg) .kwl .arr { color: var(--ink-3); }
:is(#v-rules, .rdlg) .kwl button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
:is(#v-rules, .rdlg) .kwl button:hover { background: var(--sunk); color: var(--red); }
:is(#v-rules, .rdlg) .btn.lnk { height: 30px; padding: 0; margin: 0; color: var(--accent-ink); font-weight: 500; }

/* the window: a title and who it is about, „tylko ta rozmowa · zawsze", the form, what Zapisz will do */
.v5-dlg.rdlg { width: 640px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 40px); padding: 0; overflow: auto; }
.rdlg .rbox { position: relative; padding: 18px 24px; }
.rdlg .xbtn { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
.rdlg .xbtn:hover { background: var(--sunk); color: var(--ink); }
.rdlg h2 { margin: 0 0 2px; padding-right: 36px; }
.rdlg .who { color: var(--ink-2); margin: 0 0 14px; padding-right: 32px; overflow-wrap: anywhere; }
.rdlg .who b { font-weight: 600; color: var(--ink); }
.rdlg .who .k { color: var(--ink-3); }
:is(#v-rules, .rdlg) .seg2.mode { display: flex; margin-bottom: 16px; }
:is(#v-rules, .rdlg) .seg2.mode button { flex: 1; justify-content: center; height: 36px; }
.rdlg .rfoot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.rdlg .rfoot .eff { flex: 1; margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.rdlg .rfoot .eff b { font-weight: 600; color: var(--ink); }

@media (max-width: 720px) {
  .v5-dlg.rdlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; padding: 0; }
  .rdlg .rbox { padding: 16px 16px 0; }
  :is(#v-rules, .rdlg) .rgrid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  :is(#v-rules, .rdlg) .rgrid > dt { padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  :is(#v-rules, .rdlg) .seg2 { display: flex; flex-direction: column; width: 100%; }
  :is(#v-rules, .rdlg) .seg2 button { height: 44px; justify-content: flex-start; text-align: left; }
  :is(#v-rules, .rdlg) .seg2 button + button { border-left: 0; border-top: 1px solid var(--rule-2); }
  :is(#v-rules, .rdlg) .seg2.mode { flex-direction: row; }
  :is(#v-rules, .rdlg) .seg2.mode button { height: 44px; justify-content: center; text-align: center; }
  :is(#v-rules, .rdlg) .seg2.mode button + button { border-top: 0; border-left: 1px solid var(--rule-2); }
  :is(#v-rules, .rdlg) .rad2 { min-height: 42px; font-size: 14px; }
  :is(#v-rules, .rdlg) :is(.always select, .kwl input, .kwl select) { height: 40px; font-size: 16px; }
  :is(#v-rules, .rdlg) .always select { flex: 1; min-width: 0; }
  :is(#v-rules, .rdlg) .kwl { grid-template-columns: minmax(0, 1fr) 38px; }
  :is(#v-rules, .rdlg) .kwl .arr { display: none; }
  :is(#v-rules, .rdlg) .kwl input { grid-column: 1; grid-row: 1; }
  :is(#v-rules, .rdlg) .kwl button { grid-column: 2; grid-row: 1; width: 38px; height: 38px; }
  :is(#v-rules, .rdlg) .kwl select { grid-column: 1 / span 2; grid-row: 2; }
  :is(#v-rules, .rdlg) .btn.lnk { height: 40px; }
  /* Zapisz stays reachable on a short screen: the sentence and the buttons stick to the sheet's bottom */
  .rdlg .rfoot { position: sticky; bottom: 0; z-index: 1; flex-wrap: wrap; margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 0; box-shadow: 0 -1px 0 var(--rule); }
  .rdlg .rfoot .eff { flex-basis: 100%; }
  .rdlg .rfoot .btn { flex: 1; height: 44px; }
}

/* ============================================================ Szukaj (ticket 10; panele.html #szukaj): the filter chips
   over the results, Klienci as the table's rows, Rozmowy as the list's rows (shared above) with a chip for where each
   lies, the query marked where it was found. The filter's choices (#fpop) hang on <body>, like the menu. */
#v-search .sbar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--rule); flex: none; }
#v-search .fchip { height: 32px; padding: 0 9px 0 12px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--surface); display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; white-space: nowrap; flex: none; }
#v-search button.fchip:hover { border-color: var(--ink-3); color: var(--ink); }
#v-search .fchip .ico { width: 14px; height: 14px; }
#v-search .fchip.on { background: var(--accent-soft); border-color: transparent; color: var(--ink); font-weight: 600; padding-right: 4px; }
#v-search .fchip.on > [data-act="s-pop"] { display: inline-flex; align-items: center; gap: 6px; height: 100%; }
#v-search .fchip .lbl { width: 9px; height: 9px; }
#v-search .fchip .clr { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
#v-search .fchip .clr:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
#v-search .lnk { color: var(--accent-ink); font-weight: 500; }
#v-search .lnk:hover { text-decoration: underline; }
#v-search .sbar .clear { flex: none; padding: 0 4px; }
#v-search .sbar .count { margin-left: auto; padding-left: 12px; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
#v-search :is(.count, .scount) b { font-weight: 600; color: var(--ink); }
#v-search .scount { display: none; }
#v-search .group { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--sunk); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 2; }
#v-search .group .n { color: var(--ink-3); font-weight: 500; }
#v-search .crow { display: grid; grid-template-columns: 30px minmax(0, 1.25fr) 130px minmax(0, 1fr) 120px; gap: 0 10px; align-items: center; min-height: 44px; padding: 0 14px 0 34px; border-bottom: 1px solid var(--rule); cursor: pointer; }
@media (hover: hover) { #v-search .crow:not(.h):hover { background: var(--read); } }
#v-search .crow .av { width: 26px; height: 26px; background: var(--ok); }
#v-search .crow .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#v-search .crow .nm b { font-weight: 600; }
#v-search .crow .nm small { color: var(--ink-3); font-size: 12px; }
#v-search .crow .k { color: var(--ink-3); font-weight: 400; }
#v-search .crow .wt { font-weight: 600; color: var(--warn); font-size: 12.5px; }
#v-search .crow .wt.late { color: var(--red); }
#v-search .crow .ph { white-space: nowrap; }
#v-search .crow .em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-search .crow .ct, #v-search .crow .wt .pre { display: none; }
#v-search .crow.h { min-height: 30px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; cursor: default; }
#v-search .more-row { display: flex; align-items: center; min-height: 40px; padding: 0 14px 0 74px; border-bottom: 1px solid var(--rule); }
@media (min-width: 721px) { #v-search .row.nochk { grid-template-columns: 20px 20px 196px minmax(0, 1fr) auto; } }
#v-search .row .from .fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#v-search .where { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 10px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex: none; }
#v-search .where .ico { width: 12px; height: 12px; stroke-width: 2; }
#v-search .where.done { background: var(--ok-tint); box-shadow: none; color: var(--ok); }
#v-search .where.later { background: var(--warn-tint); box-shadow: none; color: var(--warn); }
#v-search .where.trash { background: #ECEFF3; box-shadow: none; color: var(--ink-3); }
#v-search .where.spam { background: var(--red-tint); box-shadow: none; color: var(--red); }
#v-search mark.hit { background: var(--hit); color: inherit; border-radius: 2px; padding: 0 1px; margin: 0 -1px; }
#v-search .shint { padding: 56px 24px; text-align: center; color: var(--ink-3); max-width: 560px; margin: 0 auto; line-height: 1.5; }
#v-search .shint b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
#v-search .empty .btn-sm { margin: 12px auto 0; height: 30px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--rule-2); background: var(--surface); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; }

#fpop { position: fixed; z-index: 50; min-width: 250px; max-height: calc(100dvh - 140px); overflow: auto; display: none; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 32, 43, .18), 0 1px 2px rgba(23, 32, 43, .1);
  font: 13px/1.4 var(--f); color: var(--ink); }
#fpop.on { display: block; }
#fpop h6 { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 4px 10px; margin: 0; }
#fpop .mi { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; color: var(--ink); cursor: pointer; }
@media (hover: hover) { #fpop .mi:hover { background: var(--sunk); } }
#fpop .mi:focus-visible { outline: 0; background: var(--sunk); box-shadow: inset 0 0 0 2px var(--accent-line); }
#fpop .mi .lead { width: 22px; display: grid; place-items: center; flex: none; color: var(--ink-2); }
#fpop .mi .lead .av { width: 22px; height: 22px; font-size: 10px; }
#fpop .mi .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fpop .mi small { margin-left: auto; padding-left: 12px; color: var(--ink-3); font-size: 12px; }
#fpop .mi .ok { margin-left: 8px; display: grid; color: var(--accent); }
#fpop .mi .ok .ico { stroke-width: 2.2; }
#fpop .mi[aria-checked="true"] { font-weight: 600; background: var(--accent-tint); }
#fpop .mi.zero { color: var(--ink-3); }
#fpop-scrim { display: none; }

/* Szukaj on a phone (pm13–pm15): the chips scroll sideways, the count under them, customers in two lines, conversations
   in the list's three; a filter's choices are a sheet from the bottom over the dimmed page */
@media (max-width: 720px) {
  #v-search .sbar { overflow-x: auto; scrollbar-width: none; padding: 8px 12px; gap: 6px; }
  #v-search .sbar::-webkit-scrollbar { display: none; }
  #v-search .fchip { height: 36px; border-radius: 18px; }
  #v-search .sbar .count { display: none; }
  #v-search .scount { display: block; padding: 8px 14px 6px; color: var(--ink-2); font-size: 12.5px; border-bottom: 1px solid var(--rule); }
  #v-search .crow { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av nm wt" "av ct ct"; gap: 1px 10px; padding: 10px 12px; }
  #v-search .crow.h { display: none; }
  #v-search .crow .av { grid-area: av; width: 40px; height: 40px; font-size: 16px; }
  #v-search .crow .nm { grid-area: nm; font-size: 14px; }
  #v-search .crow .wt { grid-area: wt; font-size: 12px; }
  #v-search .crow .wt .pre { display: inline; }
  #v-search .crow .wt.none, #v-search .crow :is(.ph, .em) { display: none; }
  #v-search .crow .ct { display: block; grid-area: ct; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12.5px; }
  #v-search .more-row { padding-left: 62px; }
  #v-search .row .what { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "subj subj subj subj" "where snip clip chip"; }
  #v-search .row .what .where { grid-area: where; height: 18px; font-size: 11px; }
  #v-search .row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #fpop { -webkit-tap-highlight-color: transparent; }
  #fpop.on { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; min-width: 0; max-height: 80dvh; border-radius: 16px 16px 0 0; border: 0;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0, 0, 0, .3); }
  #fpop.on::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 0 auto 8px; }
  #fpop h6 { font-size: 12.5px; padding: 6px 10px 8px; }
  #fpop .mi { height: 46px; font-size: 14px; }
  #fpop-scrim.on { display: block; position: fixed; inset: 0; background: rgba(23, 32, 43, .4); z-index: 49; }
}