/* The Asystent AI screen's own styles (packages/assistant/public/aiInbox.js).
   Cut verbatim from Estate ID's public/style.css and kept in source order; the
   host page loads this file right after its own stylesheet. Everything here is
   either scoped under .aii-* / #ai-inbox-view, or .aip-* / .aiq-* for
   aiInboxAutomation.js (Propozycje, Testy), or an @keyframes of
   theirs, and it draws with the host's design tokens (var(--accent), var(--muted), …), which
   the host's stylesheet defines — see the list in the task report. */

/* An e-mail's attachments in Asystent AI: the same rows, a size beside the name,
   and a fade while the file is fetched from the mailbox. */
.aii-atts { margin: 8px 0 0; max-width: 760px; }
.aii-atts .att { margin-bottom: 6px; transition: border-color .16s ease, background .16s ease, opacity .2s ease; }
.aii-atts .att.is-busy { opacity: .55; pointer-events: none; }
.aii-att-size { flex: none; font-size: 12px; color: var(--muted); }
/* The bare .card is the STANDALONE card — 520px wide and centred, which is what
   a login box or a settings panel wants. Inside a module view it has to fill the
   column instead, or every card sits narrower than, and indented from, the
   heading above it.
   Same override .checklist-card, .usage-card and .neighbors-card already make
   (dashboard.js writes `class="card checklist-card"`), but scoped by view rather
   than by a modifier class: those three share a screen with cards that must stay
   narrow, and here EVERY card is a full-width one, so a class on each of the
   five would be five chances to forget it. */
.aii-chatbot-host .card, .aii-chatbot-topics .card { max-width: none; margin: 0 0 16px; }
/* The "?" sits at the far right of its heading, the same place .set-head-row
   puts the "+" on the account screen. */
/* The "?" belongs BESIDE the title it explains, not at the far edge of the
   card. .set-head-row's own rule pushes a trailing control out with
   margin-left: auto — right for the account screen's "+", which is an action on
   the section, wrong for a help marker, which is part of the heading and has to
   read as attached to the words. Applies to every "?" on this screen. */
.aii-chatbot-host .set-head-row { margin: 0 0 6px; font-size: 17px; justify-content: flex-start; }
.aii-chatbot-host .set-head-row .help-btn { margin-left: 0; }
/* The badge reads as part of the title, so it sits inline with the h2 rather
   than floating between the title and the switch, where it belonged to neither.
   Centred on the title's box, not sat on its baseline: against 1.7rem display
   type a baseline-aligned pill hangs visibly low, because the pill's own text
   is 11px and its padding lifts nothing. */
.aii-chatbot-host .dev-title h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The hazard-stripe warning opens and shuts instead of appearing. .method-expand
   is the app's own collapse — a grid whose single row animates 0fr → 1fr, which
   is the one way to transition to a height the content decides — so this adds
   only the spacing. Its own bottom margin has to go while it is shut, or a gap
   stays open under a card nobody can see. */
.aii-chatbot-host .dev-off-card { margin-bottom: 0; }

/* ---- Asystent AI (public/aiInbox.js) ----------------------------------------
   The management company's AI inbox. Assembled from the app's own parts — .card,
   .tabs, the status .timeline (one message's path), .dev-switch (live/test), the
   shared composer and bubbles (the chat), .check-line, .method-expand for all
   that opens — so only layout and the few pieces that are this screen's own
   live here. Colours are tokens only, so both themes follow. */
#ai-inbox-view { --view-max: 1180px; }
#ai-inbox-view .card { max-width: none; margin: 0 0 16px; }
/* The one line under the title. Not .mod-sub, which every view hides: this one
   carries the fact the whole screen rests on — test mode sends nothing. */
.aii-lead { color: var(--muted); margin: -8px 0 20px; font-size: 0.95rem; max-width: 80ch; }
.aii-h { margin: 0 0 4px; font-size: 16px; }
/* Rozmowy's chat of one thread (aiInbox.js threadHtml): the app's own message
   bubbles (.msg), the sender's on the left, the company's on the right, each
   with who and when above it. */
.aii-thread { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.aii-thread-msg { display: flex; flex-direction: column; }
.aii-thread-msg .msg { margin: 0; }
.aii-thread-meta { font-size: 12px; color: var(--muted); margin: 0 4px 3px; }
.aii-t-company .aii-thread-meta { align-self: flex-end; }
.aii-thread-empty { margin: 0; }
.aii-thread-sig { margin-top: 6px; white-space: normal; }
.aii-thread-sig .aii-text { margin: 6px 0 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.aii-mail-sig { margin: 6px 0 0; }
.aii-mail-sig-rule { display: block; color: var(--muted); font-size: 13px; white-space: pre; }
.aii-mail-sig .aii-text { margin-top: 0; color: var(--muted); }
.aii-thread-count { margin-left: 6px; white-space: nowrap; }
/* An e-mail thread as a list of headers (conversation.js threadHtml): one
   bordered list, a row per e-mail — who, when, the start of the words — that
   folds its body out with the shared .method-expand grid. The preview line
   folds away as the body opens (the same 0fr/1fr grid), the chevron turns.
   The office's own e-mails carry an accent edge; the opened one a tint. */
.aii-thread:has(> .aii-tl-row) { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.aii-tl-row + .aii-tl-row { border-top: 1px solid var(--line); }
.aii-tl-row.aii-t-company { box-shadow: inset 3px 0 0 var(--accent-line); }
.aii-tl-row.is-current { background: var(--panel-2); }
.aii-tl-head {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start;
  width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; background: none; border: 0; border-radius: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.aii-tl-head:hover { filter: none; background: var(--panel-2); }
.aii-tl-head > .act-chev { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); transition: transform .2s ease; }
.aii-tl-head[aria-expanded="true"] > .act-chev { transform: rotate(90deg); }
.aii-tl-line { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 20px; }
.aii-tl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.aii-tl-tag { flex: none; padding: 0 7px; font-size: 10.5px; line-height: 16px; color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.aii-tl-cur { flex: none; font-size: 12px; font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.aii-tl-att { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.aii-tl-att svg { width: 13px; height: 13px; }
.aii-tl-when { flex: none; margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.aii-tl-prev { grid-column: 2; display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease, opacity .25s ease; }
.aii-tl-prev > span { min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 20px; color: var(--muted); }
.aii-tl-head[aria-expanded="true"] > .aii-tl-prev { grid-template-rows: 0fr; opacity: 0; }
.aii-tl-body { padding: 0 12px 12px 36px; }
.aii-tl-body > :first-child { margin-top: 0; }
.aii-tl-steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 12px 10px 36px; list-style: none; }
.aii-tl-step-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 4px 0;
  background: none; border: 0; border-radius: 0; font: inherit; font-size: 13px; color: inherit; text-align: left;
}
button.aii-tl-step-head { cursor: pointer; }
button.aii-tl-step-head:hover { filter: none; color: var(--accent-strong); }
.aii-tl-step-ic { flex: none; display: inline-flex; color: var(--muted); }
.aii-tl-step-ic svg { width: 14px; height: 14px; }
.aii-tl-step-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aii-tl-step-head .aii-chip { flex: none; }
.aii-tl-step-head > .act-chev { flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.aii-tl-step-head[aria-expanded="true"] > .act-chev { transform: rotate(90deg); }
.aii-tl-step-text { margin-top: 4px; }
@media (max-width: 520px) {
  .aii-tl-body, .aii-tl-steps { padding-left: 12px; }
}
/* Ustawienia's Kanały: a heading over the channel cards rather than a card of its own. */
.aii-set-h { margin: 2px 0 10px; }
.aii-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.aii-mono { font: 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

/* Motion. fadeSwap (aiInbox.js) takes content out and back in through
   .aii-out; `size` adds the height transition from .aii-sized. Fades stay under
   reduced motion, as on the Developer screen — they carry no travel. */
.aii-fade { transition: opacity .15s ease; }
.aii-fade.aii-out { opacity: 0; }
/* Rozmowy's list on its way out (another view or channel picked): the loaded
   list is already gone, so a click on one of its fading rows would open
   nothing — and opening it from a copy would leave the dialog's buttons acting
   on a list about to be replaced. It takes no clicks; the next list does. */
#aii-convs-box.aii-out { pointer-events: none; }
.aii-sized { overflow: hidden; transition: opacity .15s ease, height .25s ease; }
/* .method-expand's inner box. Not .expand-inner, which also stretches every
   button inside it to full width (the login screen's forms). Once a box has
   folded shut its fields leave the tab order; the delay lets the fold finish. */
.aii-expand-in { overflow: hidden; min-height: 0; }
.method-expand:not(.open) > .aii-expand-in { visibility: hidden; transition: visibility 0s linear .3s; }
.aii-rise { animation: rise .35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes aiiIn { from { opacity: 0; } to { opacity: 1; } }
.aii-collapsing { overflow: hidden; transition: height .22s ease, opacity .15s ease, padding .22s ease, margin .22s ease; }
@media (prefers-reduced-motion: reduce) { .aii-rise, .aii-chat-new { animation-name: aiiIn; } }

/* LIVE / TEST. Both words share one grid cell and cross-fade — out, then in,
   as the Developer switch's label does — so the pill never re-measures. */
.aii-pill {
  display: inline-grid; flex: none; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line);
  font: 700 10.5px/1.6 var(--sans); letter-spacing: .08em; vertical-align: middle;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.aii-pill[data-mode="live"] { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.aii-pill > span { grid-area: 1 / 1; text-align: center; opacity: 0; transition: opacity .13s ease; }
.aii-pill[data-mode="live"] .aii-pill-live,
.aii-pill[data-mode="test"] .aii-pill-test { opacity: 1; transition-delay: .13s; }

/* The menu's „Do zatwierdzenia” count beside Asystent AI (syncNavCount): in
   the accent — it waits for a click, it is no alarm. It fades and grows in,
   fades and shrinks out at 0, and its number cross-fades. */
.side-link .aii-nav-count { background: var(--accent); font-variant-numeric: tabular-nums; transition: opacity .2s ease, transform .2s ease; }
.side-link .aii-nav-count.aii-nav-out { opacity: 0; transform: scale(.6); }
.aii-nav-in { animation: aiiNavIn .28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes aiiNavIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aii-nav-in { animation-name: aiiIn; }
  .side-link .aii-nav-count.aii-nav-out { transform: none; }
}

/* ---- the header: the channels' modes ---- */
.aii-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }
.aii-modes { font-weight: 600; max-width: 100%; }
/* The summary's words fade and its width glides when a channel's mode flips. */
#aii-modes-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease, width .25s ease; }
/* Polls failing a few times in a row (pollLive): one line, unfolding, never a toast each time. */
.aii-live-warn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; }

/* ---- Kanały: a grid of small tiles; a tile opens its settings in a dialog.
   Not .card-list: its entrance animation fills `both`, which would pin
   opacity at 1 and stop a deleted mailbox's tile fading as it folds away
   (collapseOut). ---- */
.aii-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
#ai-inbox-view .aii-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; }
.aii-ch-tile { cursor: pointer; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.aii-ch-tile:hover { border-color: var(--accent); }
.aii-ch-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aii-ch-tile:active { transform: scale(.99); }
.aii-ch-tile .aii-card-status { min-width: 0; }
.aii-ch-tile .aii-status { max-width: 100%; }
.aii-ch-tile .aii-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aii-ch-tile .aii-card-foot { margin-top: auto; }
.aii-ch-dialog { display: flex; flex-direction: column; gap: 10px; }
.aii-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aii-logo { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--solid); border: 1px solid var(--line); }
.aii-logo img { display: block; }
.aii-logo-icon svg { width: 22px; height: 22px; color: var(--accent); }
/* The Chatbot dialog holds the former Deweloper screen: its cards sit flat. */
.aii-chatbot-host .card, .aii-chatbot-topics .card { box-shadow: none; margin: 10px 0 0; }
.aii-chatbot-host .card:first-child, .aii-chatbot-topics .card:first-child { margin-top: 0; }
/* The dialog's two folds (chatbotSectionHtml, channels.js): a heading row and
   a hairline between them, not a box — the cards inside are the boxes. */
.aii-cb-sec + .aii-cb-sec { border-top: 1px solid var(--line); }
.aii-cb-sec-head {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 2px;
  background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.aii-cb-sec-head:hover { filter: none; }
.aii-cb-sec-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aii-cb-sec-title strong { font-size: 15px; }
.aii-cb-sec-title .hint { margin: 0; }
.aii-cb-sec-head .act-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.aii-cb-sec-head[aria-expanded="true"] > .act-chev { transform: rotate(90deg); }
.aii-cb-sec-body { padding: 2px 0 16px; }
.aii-card-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aii-card-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aii-card-ch { font-size: 12px; color: var(--muted); }
.aii-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.aii-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .6; transition: background .2s ease, box-shadow .2s ease, opacity .2s ease; }
.aii-dot.ok { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px var(--ok-soft); }
.aii-dot.bad { background: var(--danger); opacity: 1; box-shadow: 0 0 0 3px var(--danger-soft); }
.aii-soon { font-size: 13px; color: var(--muted); font-style: italic; }
.aii-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.aii-nums { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); }
.aii-nums b { margin-left: 3px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.aii-switch-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* A channel's mode in words beside its switch: both in one grid cell,
   cross-fading as the switch flips — as the pill does. */
.aii-mode-words { display: inline-grid; }
.aii-mode-words > span { grid-area: 1 / 1; justify-self: end; text-align: right; opacity: 0; transition: opacity .13s ease; }
/* The words before the switch, the switch flush with the card's right edge —
   on a narrow card too, where the foot wraps it onto a line of its own. */
.aii-card-foot > .dev-switch, .aii-mode-slot { margin-left: auto; padding-right: 0; }
/* The chatbot tile's own live/test (channels.js chatbotModeHtml): at the
   foot's left, its words after the knob, fading as every tile's do. */
.aii-card-foot > .aii-cb-mode { margin-left: 0; padding-left: 0; }
.aii-cb-mode .aii-mode-words > span { justify-self: start; text-align: left; }
.aii-mode-slot { display: inline-flex; }
.aii-mode-slot > .dev-switch { padding-right: 0; }
.aii-mode-hint { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.aii-card .dev-switch[aria-checked="true"] .aii-mw-live, .aii-card .dev-switch[aria-checked="false"] .aii-mw-test { opacity: 1; transition-delay: .13s; }
.aii-card > .aii-toggle { align-self: flex-start; margin-top: 0; }
/* Messenger & co. cannot go live yet: the switch is shown, muted; a click
   only explains (toggleMode). */
.aii-card .dev-switch[aria-disabled="true"] { cursor: not-allowed; }
.aii-card .dev-switch[aria-disabled="true"] > * { opacity: .5; }
/* Shut, a card's settings must not leave the column's gap behind them — the
   same trick as .aii-hosts-slot below. */
.aii-card > .method-expand { transition: grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease; }
.aii-card > .method-expand:not(.open) { margin-top: -10px; }
.aii-card-set { max-width: 640px; padding-top: 4px; }
.aii-card-set > .aii-label:first-child { margin-top: 4px; }
.aii-add-more { margin-top: 18px; }
.aii-nokey { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--brass-soft); border: 1px solid var(--brass-line); color: var(--brass); font-size: 13.5px; }
.aii-off p { margin: 0; }
.aii-hosts { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 0 10px; }
/* Shut, the server fields must not leave their labels' margin behind: the
   grid between two labels stops those margins collapsing into one. */
.aii-hosts-slot { transition: grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease; }
.aii-hosts-slot:not(.open) { margin-top: -14px; }
/* One reserved line under a form: a result arriving fades in without pushing
   the buttons down. */
.aii-result { min-height: 1.5em; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.aii-result[data-state="ok"] { color: var(--ok); }
.aii-result[data-state="bad"] { color: var(--danger); }
.aii-result[data-state="warn"] { color: var(--warning); }

/* ---- the tabs ---- */
.aii-inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.aii-main { min-width: 0; }
.aii-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* Rozmowy: one list across channels, the chips filter it by channel. */
.aii-filter { margin-bottom: 14px; }
.aii-filter .chip { display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.aii-filter .chip img { display: block; flex: none; }
.aii-convs { gap: 8px; }
.aii-conv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s ease; }
.aii-conv.open { border-color: var(--accent-line); }
/* A row folding away („Załatwione”) or opening in (a new message, live):
   its height, its fade and the list's 8 px gap all glide — the list's
   entrance animation (.card-list, fill both) would otherwise pin its opacity,
   and the row's own transition would snap its height. */
.aii-convs > .aii-conv.aii-collapsing, .aii-convs > .aii-conv.aii-growing { animation: none; overflow: hidden; transition: height .22s ease, opacity .2s ease, padding .22s ease, margin .22s ease; }
.aii-convs > .aii-conv.aii-collapsing { margin-bottom: -8px !important; }
.aii-conv-head {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px;
  background: transparent; color: inherit; border: 0; border-radius: 0; text-align: left; font: inherit; font-weight: 400;
}
.aii-conv-head:hover { filter: none; background: var(--panel-2); }
.aii-conv-time { flex: none; width: 92px; padding-top: 2px; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--muted); }
.aii-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aii-conv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aii-conv-ch { flex: none; display: block; width: 16px; height: 16px; }
.aii-conv-from { min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What they wrote: the subject in bold, then the start of the words — two lines at most. */
.aii-conv-subj { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Unread (the mailbox's \Seen not set): a dot in the row's left margin, the
   subject in bold. The dot sits outside the flow, so read and unread rows
   line up, and it fades and grows in — and out; the subject's weight changes
   behind a fade (aiInbox.js paintSeen). */
.aii-conv-head { position: relative; }
.aii-conv-dot { position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease; }
.aii-unread .aii-conv-dot { opacity: 1; transform: none; }
.aii-unread .aii-conv-subj { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .aii-conv-dot { transition: opacity .2s ease; transform: none; } }
.aii-conv-out { font-size: 12.5px; color: var(--muted); }
/* „Co z tym zrobić”: a row's right column — its status, what is proposed or
   was done, why, and „Załatwione”. Its ground takes the status's colour (the
   badge's own: to approve in the accent, to decide in brass, done in green),
   and fades to the next one. A click on it opens the mail, as the head does. */
.aii-conv-dec { position: relative; flex: 0 0 clamp(220px, 36%, 400px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-left: 1px solid var(--line); background: var(--panel-2); cursor: pointer; transition: background .2s ease; }
.aii-conv-dec:has(> .aii-b-prepared, > .aii-b-approving) { background: var(--accent-soft); }
.aii-conv-dec:has(> .aii-b-kept) { background: var(--brass-soft); }
.aii-conv-dec:has(> .aii-b-approved) { background: var(--ok-soft); }
.aii-conv-decision { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
/* The column's lines keep its full width, so a line going empty never jumps sideways. */
.aii-conv-dec > .aii-conv-decision, .aii-conv-dec > .aii-conv-out { align-self: stretch; }
/* Why: three lines at most — the whole reason is in the mail dialog. */
.aii-conv-dec .aii-conv-out { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aii-conv-dec .aii-conv-card { align-self: stretch; }
/* The person's own rating, in the column's top right corner, beside the
   status badge — a long badge wraps rather than run under it. */
.aii-conv-rate-slot { position: absolute; top: 12px; right: 14px; }
.aii-conv-dec:has(.aii-conv-rate) > .aii-badge { max-width: calc(100% - 84px); }
.aii-conv-rate {
  display: block; padding: 0 7px; border-radius: 999px; border: 1px solid var(--rate); background: var(--rate); color: var(--solid);
  font-size: 10.5px; font-weight: 700; line-height: 1.7; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.aii-conv-dec .aii-conv-quick, .aii-picking .aii-conv-dec .aii-conv-quick { margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.aii-conv-quick.aii-busy { opacity: .8; transition: opacity .2s ease; }
/* The two columns named once, above the list (desktop only). */
.aii-convs-cols { display: flex; padding: 0 1px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.aii-convs-cols > span:first-child { flex: 1; min-width: 0; padding-left: 118px; transition: padding-left .22s ease; }
.aii-convs-cols:has(+ .aii-picking) > span:first-child { padding-left: 162px; }
.aii-convs-cols > span:last-child { flex: 0 0 clamp(220px, 36%, 400px); padding-left: 14px; }
/* Rozmowy as a mailbox (variant 7): folders at the left, today's list beside them. */
.aii-mbx { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; align-items: start; }
.aii-mbx-folders { position: sticky; top: calc(var(--topbar-h, 0px) + 12px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* „Nowa wiadomość” (composer.js): the column's first thing; on a phone also in the list's bar. */
.aii-mbx-compose { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.aii-mbx-compose svg { width: 16px; height: 16px; flex: none; }
.aii-mbx-compose-top { display: none; margin-left: auto; flex: none; }
.aii-mbx-inbox { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--solid); color: var(--text); font: inherit; font-size: 13px; transition: border-color .15s ease; }
.aii-mbx-inbox:hover, .aii-mbx-inbox:focus { border-color: var(--accent-line); outline: 0; }
.aii-mbx-folder { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.aii-mbx-folder:hover { background: var(--panel-2); }
.aii-mbx-folder.sel { background: var(--accent-soft); color: var(--accent-strong); }
.aii-mbx-ficon { flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
.aii-mbx-ficon svg { width: 16px; height: 16px; }
.aii-mbx-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: font-weight .2s ease; }
.aii-mbx-folder.sel .aii-mbx-fname { font-weight: 600; }
.aii-mbx-count { margin-left: auto; min-width: 18px; text-align: right; font-size: 12px; font-weight: 600; color: var(--accent-strong); font-variant-numeric: tabular-nums; transition: opacity .15s ease; }
.aii-mbx-count.aii-zero { opacity: 0; }
.aii-mbx-count.aii-dim { color: var(--muted); }
.aii-mbx-flabel { margin: 10px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.aii-mbx-main { min-width: 0; }
.aii-mbx-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.aii-mbx-title { margin: 0; font-size: 16px; font-weight: 650; }
.aii-mbx-back { display: none; align-items: center; gap: 2px; }
.aii-mbx-back svg { width: 18px; height: 18px; }
/* Room inside the clip for the chip's focus ring. */
.aii-pick-wrap { display: inline-flex; max-width: 130px; padding: 4px; margin: -4px; overflow: hidden; transition: max-width .22s ease, opacity .2s ease, padding .22s ease, margin .22s ease; }
/* Folded, it takes no room at all — its padding and the row's 8px gap go too
   (a negative margin cancels the gap), so on a phone it never wraps onto an
   empty line of its own and on a desktop the picker stays flush right. */
.aii-pick-wrap.aii-gone { max-width: 0; padding: 0; margin: 0 0 0 -8px; opacity: 0; pointer-events: none; }
.aii-mbx-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A tile's marks at the end of its top line (mailList.js markHtml): files, and the star — which fades and grows in or out. */
.aii-conv-marks { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
.aii-clip { display: inline-grid; }
.aii-clip svg { width: 14px; height: 14px; }
.aii-star-mark { display: inline-grid; color: var(--brass); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease; }
.aii-star-mark svg { width: 14px; height: 14px; fill: currentColor; }
.aii-star-mark.on { opacity: 1; transform: none; }
/* A plain e-mail's quiet word where an AI tile has its decision. */
.aii-conv-dec-plain { justify-content: center; }
.aii-mbx-wait { display: flex; align-items: center; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .aii-star-mark { transform: none; } }
@media (max-width: 560px) {
  /* flex-start: each pane keeps its own height — setLevel's box follows the shown one's. */
  .aii-mbx { display: flex; align-items: flex-start; gap: 0; overflow: hidden; transition: height .3s cubic-bezier(.2, .7, .2, 1); }
  /* The view chips as one row that scrolls sideways (variant 7), today's chips unchanged.
     Room above and below for a focus ring, taken back by the margin — never at the sides:
     a row wider than the bar would let the bar's clip (.aii-expand-in) be scrolled. */
  .aii-mbx .aii-convbar .aii-filter { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 0; margin: -4px 0; }
  .aii-mbx .aii-convbar .aii-filter::-webkit-scrollbar { display: none; }
  .aii-mbx .aii-convbar .aii-filter .chip { flex: none; }
  .aii-mbx > .aii-mbx-folders, .aii-mbx > .aii-mbx-main { position: static; flex: 0 0 100%; min-width: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, max-height 0s; }
  .aii-mbx[data-level="list"] > * { transform: translateX(-100%); }
  /* The pane slid away fades out, then takes no height — the box shrinks to the one shown. */
  .aii-mbx[data-level="list"] > .aii-mbx-folders, .aii-mbx[data-level="folders"] > .aii-mbx-main { opacity: 0; pointer-events: none; max-height: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, max-height 0s .3s;
    /* max-height from `none` is discrete: without this its .3s delay is ignored and the pane collapses mid-fade. */
    transition-behavior: allow-discrete; }
  .aii-mbx-back { display: inline-flex; }
  .aii-mbx-compose-top { display: inline-flex; }
  .aii-mbx-head .aii-mbx-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  /* The slide's motion goes, never its place: on a phone the list is in view by its transform alone. */
  .aii-mbx, .aii-mbx[data-level] > .aii-mbx-folders, .aii-mbx[data-level] > .aii-mbx-main { transition: opacity .2s ease; }
}
/* Who wrote it, under the name: how it was checked, as the app's chips
   (.aii-chip) — faded to new ones when the sender's standing changes. */
.aii-conv-who { display: block; min-width: 0; }
.aii-conv-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.aii-conv-chips .aii-chip { font-size: 11px; line-height: 17px; white-space: nowrap; }
/* The opened row's „Nadawca”: the name, then every line of who and where. */
.aii-who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
.aii-who-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.aii-who .aii-conv-chips { margin-top: 4px; }
.aii-conv-head .act-chev, .aii-toggle .act-chev {
  flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease;
}
.aii-conv-head .act-chev { margin-top: 3px; }
/* By this module's own toggles only: a bare [aria-expanded] > .act-chev also
   matched the notice board's fold button and turned its arrow down. Not by
   #ai-inbox-view either — .aii-toggle also renders in the rule sheet,
   which is mounted on <body>. */
:is(.aii-conv-head, .aii-toggle)[aria-expanded="true"] > .act-chev { transform: rotate(90deg); }
.aii-conv-flow { padding: 2px 16px 16px; border-top: 1px solid var(--line); }
.aii-badge { flex: none; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; line-height: 1.7; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* A row's status (spec addendum "night, 4"): what waits for a person stands
   out — to approve in the accent, to decide in brass; what is done is green;
   what came to nothing, and test mode, stay muted. */
.aii-badge { white-space: nowrap; overflow: hidden; transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .15s ease, width .25s ease; }
.aii-b-prepared, .aii-b-approving { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.aii-b-kept { color: var(--brass); border-color: var(--brass-line); background: var(--brass-soft); }
.aii-b-approved { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.aii-conv-out.aii-conv-bad { color: var(--danger); }
/* A guest's report filed from the chat (conversation.js filedHtml): its link, and „test”. */
.aii-conv-filed { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.aii-conv-report { font-weight: 600; color: var(--accent-strong); text-decoration: none; }
.aii-conv-report:hover { text-decoration: underline; }
.aii-flow-why { margin-top: 2px; color: var(--muted); }
/* Rozmowy's filters: what it shows, each with its count, and the channel. */
.aii-convbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.aii-convbar .aii-filter { margin-bottom: 0; }
.aii-fcount { display: inline-block; font-variant-numeric: tabular-nums; }
.dd-trigger.aii-conv-channel { width: auto; min-width: 180px; margin: 0; }
/* „Flow przygotowany”: under its row, the steps in plain words, the reply as
   it will go out, and „Zatwierdź i wyślij” · „Odrzuć”. A decided flow's
   card fades to how it went; its box resizes (fadeSwap size). */
.aii-flowcard { margin: 0 14px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); transition: opacity .2s ease, border-color .2s ease; }
.aii-conv > .aii-conv-card .aii-flowcard { margin-left: 120px; }
.aii-fc-prepared, .aii-fc-approving { border-color: var(--accent-line); }
.aii-fc-approved { border-color: var(--ok-line); }
.aii-fc-test { border-style: dashed; }
.aii-flowcard.aii-busy { opacity: .8; }
.aii-flow .aii-flowcard { margin: 4px 0 0; }
.aii-flowcard-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.aii-flowcard-title { font-weight: 700; font-size: 14px; }
.aii-fc-prepared .aii-flowcard-title, .aii-fc-approving .aii-flowcard-title { color: var(--accent-strong); }
.aii-flowcard-rule { font-size: 12.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.aii-flowcard-who { margin: 2px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.aii-plan { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aii-plan-step { padding: 9px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.aii-plan-text .aii-text { background: var(--panel-2); }
.aii-plan-text .aii-toggle { min-height: 32px; }
.aii-draft { display: block; margin: 8px 0 0; }
.aii-draft textarea { margin-top: 4px; }
.aii-draft-err { margin: 6px 0 0; font-size: 13px; }
.aii-draft-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aii-flowcard-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Going busy (busyButton), a button's words fade and its width glides. */
:is(.aii-flowcard-acts, .aii-draft-acts) > button { white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, width .25s ease; }
/* ...as do the other buttons that go busy and back (busyButton / restoreButton). */
.aii-rtools-end > button, .aii-more-row > button, .aii-trial-form button[type="submit"], .aii-restore, .aii-conv-quick > button, .aii-replay-foot button, .aii-compose-foot > button { white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, width .25s ease; }
.aii-more-row { display: flex; justify-content: center; margin-top: 14px; }
/* A flow that can no longer be approved says why, above its steps. */
.aii-flowcard .aii-flowcard-held { margin: 8px 0 0; }
/* „Załatwione” under a row that waits for a person, in the row's text column. */
.aii-conv-quick { margin: 0 14px 12px 120px; }
.aii-empty p { margin: 0 0 4px; }
/* „Zaznacz”: a checkbox column opens at each row's left — the head's padding
   and the text column under it glide aside while the box fades in — and the
   bar with „Usuń zaznaczone (N)” opens under the filters. */
.aii-convbar-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.aii-pickbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding-bottom: 12px; }
.aii-pickbar .hint { flex: 1 1 260px; margin: 0; font-size: 12.5px; }
.aii-pickbar > button { white-space: nowrap; }
.aii-conv-line { display: flex; align-items: stretch; }
.aii-conv-line > .aii-conv-pick { align-self: flex-start; }
/* Hovered, the whole line lights — the checkbox column with the head, no seam between. */
.aii-conv-line:hover { background: var(--panel-2); }
.aii-conv-line > .aii-conv-head { flex: 1; min-width: 0; }
.aii-conv-pick {
  flex: none; display: grid; place-items: center; width: 0; height: 44px; margin: 0; overflow: hidden; cursor: pointer;
  opacity: 0; visibility: hidden; transition: width .22s ease, opacity .15s ease, visibility 0s linear .22s;
}
.aii-picking .aii-conv-pick { width: 44px; opacity: 1; visibility: visible; transition: width .22s ease, opacity .2s ease .08s, visibility 0s; }
.aii-conv-pick input { width: 18px; height: 18px; margin: 0 0 0 8px; accent-color: var(--accent); cursor: inherit; }
.aii-conv-pick:has(input:disabled) { cursor: not-allowed; }
.aii-conv > .aii-conv-card .aii-flowcard, .aii-conv-quick { transition: opacity .2s ease, border-color .2s ease, margin-left .22s ease; }
.aii-picking .aii-conv > .aii-conv-card .aii-flowcard, .aii-picking .aii-conv-quick { margin-left: 164px; }
/* A row brought into view (Cofnij) stops clear of the phone's sticky top bar. */
.aii-conv { scroll-margin: calc(var(--topbar-h, 0px) + 12px) 0 12px; }
/* „Usuń rozmowę” at the foot of an opened row, with what it leaves alone. */
.aii-conv-del { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.aii-conv-del .hint { margin: 0; font-size: 12.5px; }
.aii-conv-del > button { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .aii-conv-pick { transition: opacity .15s ease, visibility 0s linear .15s; }
  .aii-picking .aii-conv-pick { transition: opacity .2s ease, visibility 0s; }
  .aii-conv > .aii-conv-card .aii-flowcard, .aii-conv-quick { transition: opacity .2s ease, border-color .2s ease; }
}

/* The flow: the report status timeline, with smaller dots and plain text. */
.aii-flow { margin-top: 14px; }
.aii-flow > li { font-weight: 400; color: var(--text); padding-bottom: 14px; }
.aii-flow > li::before { left: 6px; top: 17px; }
.aii-flow .dot { left: 0; top: 3px; width: 14px; height: 14px; border-width: 2px; }
.aii-flow-k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); line-height: 20px; }
.aii-flow-v { font-size: 13.5px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.aii-flow-subj { font-weight: 600; }
.aii-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0;
  background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600;
}
.aii-toggle:hover { filter: none; color: var(--accent-strong); }
.aii-toggle .act-chev { width: 14px; height: 14px; color: currentColor; }
.aii-text { margin: 6px 0 0; padding: 10px 12px; max-height: 320px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.aii-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.aii-fact { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12.5px; }
.aii-rule-sup { color: var(--brass); }
.aii-fact-missing { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--panel-2)); }
.aii-fact > span { color: var(--muted); }
/* Ukryte przed AI: … — shown only when something was masked, never a "safe"
   badge when nothing was (mask.ts). */
.aii-masked-chip { display: inline-flex; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.aii-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Steps are list items inside the timeline, so .timeline li's indent, weight
   and connector line would reach them too — undone here. */
.aii-flow :is(.aii-steps, .aii-plan) > li { padding: 0; font-weight: 400; }
.aii-flow :is(.aii-steps, .aii-plan) > li::before { display: none; }
.aii-flow .aii-plan > .aii-plan-step { padding: 9px 11px; color: var(--text); }
.aii-flow .aii-steps > .aii-step { padding: 9px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.aii-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; font-size: 13.5px; }
.aii-step-head > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.aii-chip { padding: 1px 9px; border-radius: 999px; border: 1px solid; font-size: 11.5px; font-weight: 600; }
.aii-s-done { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.aii-s-planned { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.aii-s-skipped { color: var(--brass); border-color: var(--brass-line); background: var(--brass-soft); }
.aii-s-failed { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
/* What the mailbox did not get after a flow ran (mailboxNoteLabel): a quiet
   line under the step — in brass, not red: the step itself went as it went. */
.aii-step-note { margin: 5px 0 0; font-size: 12.5px; color: var(--brass); }
/* Why a message was forwarded — the panel's alone, never the e-mail's. */
.aii-step-why { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
/* The e-mail a step will send, in full (outgoingHtml): To and subject as a
   mail client heads a message, then the body — a forward's original folded
   under „Pokaż całość”. */
.aii-mail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.aii-mail-h { display: grid; grid-template-columns: 46px minmax(0, 1fr); margin: 0; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.aii-mail-h > span { color: var(--muted); }
.aii-mail-rest .aii-text { color: var(--muted); }
.aii-mail-gone, .aii-mail-later { margin: 6px 0 0; font-size: 12.5px; }
/* A contractor's notification (noticeHtml): the HTML mail as it renders —
   read-only, it takes no clicks; its height follows the mail once loaded. */
.aii-mail-frame { display: block; width: 100%; height: 420px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; pointer-events: none; }
/* A received mail (openMail): its links work and a wide one scrolls inside;
   white in a dark theme too — mails are written for white. */
.aii-mail-frame.aii-mail-in { pointer-events: auto; background: #fff; transition: height .25s ease; }

/* Zasady as a list: the rules as sentences, in the order they are checked,
   and the locked last row — what happens when none takes a message. */
.aii-warn { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--brass-soft); border: 1px solid var(--brass-line); color: var(--brass); font-size: 13px; }
.aii-rules { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* A row: grip (a fine pointer drags it), number, the sentence and its count
   (a button: it opens the rule), then its switch, Wyżej / Niżej and ⋯. On a
   narrow screen the controls wrap onto a line of their own. */
.aii-rule { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; padding: 2px 8px 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); transition: border-color .2s ease, opacity .2s ease, box-shadow .15s ease; }
.aii-rule:hover { border-color: var(--accent-line); }
.aii-rule.aii-rule-off { border-style: dashed; opacity: .7; }
.aii-rule.aii-dragging { opacity: .45; }
/* What „Znajdź regułę albo osobę” does not find steps back. */
.aii-rule.aii-rule-miss { opacity: .35; }
.aii-rule.aii-drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.aii-rule.aii-drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.aii-rule-grip { display: none; flex: none; color: var(--muted); cursor: grab; }
.aii-rule-grip svg { width: 16px; height: 16px; }
@media (pointer: fine) { .aii-rule-grip { display: grid; place-items: center; } }
.aii-rule-nr { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 700 12px/24px var(--sans); text-align: center; }
.aii-rule-open { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 9px 4px; background: transparent; border: 0; border-radius: 6px; color: var(--text); font: inherit; font-weight: 400; text-align: left; }
.aii-rule-open:hover { filter: none; }
.aii-rule-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aii-rule-when { font-size: 13.5px; overflow-wrap: anywhere; }
.aii-rule-count { font-size: 12px; color: var(--muted); }
.aii-rule-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.aii-rule-acts .dev-switch { margin-right: 4px; }
.aii-rules-hint { margin: 0; }
.aii-rule-end { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--muted); }
.aii-rule-end b { color: var(--text); }
.aii-rule-lock { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.aii-rule-lock svg { width: 16px; height: 16px; }
.aii-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); }
.aii-icon:hover { filter: none; background: var(--panel); border-color: var(--line); color: var(--text); }
.aii-icon svg { width: 16px; height: 16px; }
.aii-add-rule-row { margin-top: 12px; }
.aii-changes { list-style: none; margin: 12px 0 0; padding: 0; }
.aii-changes li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.aii-change-meta { font-size: 12px; color: var(--muted); }
.aii-changes-none { margin: 12px 0 0; }

/* ---- Zasady as a graph (public/aiInboxGraphView.js; the model is aiInboxGraph.js).
   The demo's flow (public/demo/asystent-ai-flow.html): React Flow's cards and
   edges, its dotted background and controls. Cards are moved by the view
   frame by frame (so the edges follow them); colour, fade in/out and a
   card's height are CSS. ---- */
.aii-view-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(96px, auto)); margin-bottom: 12px; }
.aii-view-tabs .tab { transition: background .18s ease, color .18s ease; }
.aii-gnote { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13px; }
.aii-gnote > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.aii-gnote-preview { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.aii-gnote-actions { display: flex; gap: 8px; }
.aii-gnote .chip { padding: 4px 12px; }
.aii-gfail { margin: 0 0 12px; }
/* Type is sized for the smallest scale the view ever fits the graph at
   (FLOOR, 0.85): every 13 px line still reads at 11 px or more. */
.aii-graph { position: relative; height: 640px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; transition: height .3s ease; }
.aii-graph > .card-list { padding: 16px; }
/* Touch (the same condition as one-finger panning, aiInboxGraphView.js): the
   box is a share of the screen, so the page above and below it always
   scrolls, and the zoom buttons are big enough to tap. */
.aii-graph.aii-graph-touch:not(.aii-graph-fill) { height: clamp(380px, 64dvh, 640px); }
.aii-graph.aii-graph-touch .react-flow__controls-button { width: 44px; height: 44px; }
.aii-graph.aii-graph-touch .react-flow__controls-button svg { max-width: 16px; max-height: 16px; }
.aii-graph .react-flow { --xy-background-color: var(--panel-2); --xy-edge-stroke: var(--line); --xy-controls-button-background-color: var(--panel); --xy-controls-button-background-color-hover: var(--panel-2); --xy-controls-button-color: var(--text); --xy-controls-button-color-hover: var(--text); --xy-controls-button-border-color: var(--line); }
.aii-graph .aii-graph-fullbtn svg { fill: none; stroke: currentColor; }
.aii-graph .react-flow__node-step { padding: 0; border: 0; background: none; box-shadow: none; }
/* A card arriving fades in and grows to size; one leaving fades and shrinks —
   a group's members out of its card and back into it — its "+" with it. */
.aii-graph .react-flow__node.aii-g-enter .aii-gn, .aii-graph .react-flow__node.aii-g-exit .aii-gn { opacity: 0; transform: scale(.9); }
.aii-graph .aii-gn { position: relative; width: 220px; transition: opacity .24s ease-out, transform .24s ease-out; }
.aii-graph .fnode { position: relative; box-sizing: border-box; width: 220px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow); cursor: pointer; overflow: hidden;
  transition: border-color .35s, opacity .24s ease-out, box-shadow .35s, transform .24s ease-out, background .35s, height .28s ease-out; }
.aii-graph .fnode:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The card's lines, keyed by their words: new words fade in over the old. */
.aii-graph-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; animation: aiiIn .25s ease both; }
/* Every line keeps its own height: in a fixed-height card a flex line
   would otherwise be squeezed instead of the card's spare room. */
.aii-graph-body > * { flex: none; }
.aii-graph .fnode .kind { display: flex; align-items: center; gap: 6px; font: 600 13px/17px var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.aii-graph-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aii-graph-lock { flex: none; display: grid; }
.aii-graph-lock svg { width: 13px; height: 13px; }
/* „Propozycja”: the chat's one proposed card. */
.aii-graph-badge { flex: none; margin-left: auto; padding: 0 7px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 700 11px/15px var(--sans); letter-spacing: 0; text-transform: none; }
.aii-graph .fnode b { min-width: 0; font-size: 16px; line-height: 21px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aii-graph .fnode b.aii-graph-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.aii-graph .fnode b.aii-graph-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; }
/* margin 0: the app-wide .desc has 12 px above and below, which a card
   sized line by line has no room for. */
.aii-graph .fnode .desc { margin: 0; font-size: 13px; line-height: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aii-graph .fnode .desc.aii-graph-d2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.aii-graph .fnode .desc.aii-graph-d3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; }
.aii-graph .fnode .val { margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aii-graph .fnode .val.aii-graph-v2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 17px; }
.aii-graph .fnode.aii-fn-start, .aii-graph .fnode.aii-fn-who, .aii-graph .fnode.aii-fn-assistant { cursor: default; }
/* A card is moved by dragging it (aiInboxGraphView.js): Start, which opens
   nothing, shows it can be grabbed; a card being dragged lifts off the canvas. */
.aii-graph .react-flow__node.draggable .fnode.aii-fn-start, .aii-graph .react-flow__node.draggable .fnode.aii-fn-who, .aii-graph .react-flow__node.draggable .fnode.aii-fn-assistant { cursor: grab; }
.aii-graph .react-flow__node.dragging .fnode { cursor: grabbing; box-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 0 0 1.5px var(--accent-line); }
.aii-graph .react-flow__node.dragging { z-index: 5 !important; }
/* The end card: locked — nothing is ever below it but „+ Dodaj regułę”, a
   button of its own just under the card. */
.aii-graph .fnode.aii-fn-end { border-color: var(--accent-line); }
/* The assistant: a fixed step of every flow, between the rules before it
   and after it — locked like the end card, and drawn in the accent. */
.aii-graph .fnode.aii-fn-assistant { border-color: var(--accent); }
.aii-graph-add { position: absolute; left: 0; right: 0; margin: 0; padding: 0 10px; border: 1px dashed var(--accent-line); border-radius: 9px; background: var(--panel); color: var(--accent-strong); font: 600 13px/1 var(--sans); transition: background .2s ease, border-color .2s ease, opacity .24s ease-out; }
.aii-graph-add:hover { filter: none; background: var(--accent-soft); border-color: var(--accent); }
/* "+" on the „nie” edge below a card: a new rule at that place. The button is
   a 44 px target; the circle drawn inside it is smaller. */
.aii-graph-plus { position: absolute; left: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent-strong); transition: opacity .24s ease-out, color .2s ease; }
.aii-graph-plus::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--accent-line); border-radius: 50%; background: var(--panel-2); box-shadow: var(--shadow); transition: background .2s ease, border-color .2s ease; }
.aii-graph-plus:hover { filter: none; }
.aii-graph-plus:hover::before { background: var(--accent-soft); border-color: var(--accent); }
.aii-graph-plus svg { position: relative; width: 14px; height: 14px; }
.aii-graph-plus:focus-visible, .aii-graph-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A group: folded, a card like any other with a summary; open, a header over its members. */
.aii-graph .fnode.aii-fn-group { border-style: dashed; padding-right: 44px; }
.aii-graph .fnode.aii-fn-open { background: var(--panel-2); box-shadow: none; }
.aii-graph-chev { position: absolute; top: 10px; right: 10px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); }
.aii-graph-chev:hover { filter: none; color: var(--text); border-color: var(--accent-line); }
.aii-graph-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aii-graph-chev:disabled { opacity: .45; cursor: default; }
.aii-graph-chev svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .25s ease; }
.aii-graph-chev[aria-expanded="true"] svg { transform: rotate(-90deg); }
/* Touch: a 40 px target; the box drawn inside it keeps its size. */
.aii-graph.aii-graph-touch .aii-graph-chev { top: 5px; right: 5px; width: 40px; height: 40px; border-color: transparent; background: transparent; }
.aii-graph.aii-graph-touch .aii-graph-chev::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.aii-graph.aii-graph-touch .aii-graph-chev svg { position: relative; }
/* A rule switched off: drawn dashed and grey, and skipped. */
.aii-graph .fnode.aii-g-off { border-style: dashed; background: var(--panel-2); box-shadow: none; }
.aii-graph .fnode.aii-g-off b, .aii-graph .fnode.aii-g-off .desc { color: var(--muted); }
/* A chat proposal, previewed: its one card a dashed ghost, a new place it
   leads to dashed, what it would remove fading red — everything else dims. */
.aii-graph .fnode.aii-g-ghost { border-style: dashed; border-color: var(--accent); background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
.aii-graph .fnode.aii-g-new { border-style: dashed; border-color: var(--accent-line); }
.aii-graph .fnode.aii-g-removed { border-style: dashed; border-color: var(--danger); opacity: .6; }
.aii-graph .fnode.aii-g-removed .aii-graph-badge { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.aii-graph .aii-gn.aii-g-dim > .fnode { opacity: .45; }
/* A conversation's path, as the demo lights one: on the path, and stepped
   back; where it stopped short of a place — an unsure topic, a rule that
   still left it in the mailbox — amber. */
.aii-graph .fnode.done { border-color: var(--accent); }
.aii-graph .aii-gn.skip > .fnode { opacity: .35; transform: scale(.96); }
.aii-graph .aii-gn.skip > .aii-graph-plus, .aii-graph .aii-gn.aii-g-dim > .aii-graph-plus { opacity: .4; }
.aii-graph .fnode.aii-g-stop { border-color: var(--brass); box-shadow: 0 0 0 4px var(--brass-soft); }
.aii-graph .fnode.aii-g-stop .val { color: var(--brass); }
/* A rule the path passed unjudged, waiting for the subprocessor consent:
   amber like a stop, and a click asks for the consent. */
.aii-graph .fnode.aii-g-ignored { border-color: var(--brass); background: color-mix(in srgb, var(--brass-soft) 100%, var(--panel)); }
.aii-graph .fnode.aii-g-ignored .val { color: var(--brass); }
.aii-trial-ignored { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; color: var(--brass); font-weight: 600; }
/* „Znajdź regułę albo osobę”: what it does not find steps back. */
.aii-graph .aii-gn.aii-g-miss > .fnode { opacity: .3; }
.aii-graph .aii-gn.aii-g-miss > .aii-graph-plus { opacity: .3; }
/* A "+" that cannot insert now (a proposal's card, an open group's header)
   fades out in place, and back — after the dims above, which it outranks. */
.aii-graph .aii-gn > .aii-graph-plus.aii-graph-plus-off { opacity: 0; pointer-events: none; }
.aii-graph .react-flow__edge-path { transition: stroke .35s, opacity .35s; }
.aii-graph .react-flow__edge { transition: opacity .3s ease; }
.aii-graph .react-flow__edge.aii-g-enter, .aii-graph .react-flow__edge.aii-g-exit { opacity: 0; }
.aii-graph .react-flow__edge.aii-e-no .react-flow__edge-path { stroke-dasharray: 4 5; }
.aii-graph .react-flow__edge.path-on .react-flow__edge-path { stroke: var(--accent); stroke-width: 2; }
.aii-graph .react-flow__edge.path-off .react-flow__edge-path { stroke-dasharray: 4 5; opacity: .5; }
.aii-graph .react-flow__edge.path-off .aii-graph-label { opacity: .35; }
.aii-graph .react-flow__edge.aii-g-new .react-flow__edge-path { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.aii-graph .react-flow__edge.aii-g-removed .react-flow__edge-path { stroke: var(--danger); stroke-dasharray: 5 4; opacity: .7; }
.aii-graph .react-flow__edge.aii-g-dim { opacity: .35; }
/* A stop's line round the ladder to the end card. */
.aii-graph .react-flow__edge.aii-e-unsure .react-flow__edge-path, .aii-graph .react-flow__edge.aii-e-kept .react-flow__edge-path { stroke: var(--brass); stroke-width: 2; stroke-dasharray: 5 4; }
/* A switched-off rule's „tak”: it never leads anywhere now. */
.aii-graph .react-flow__edge.aii-e-off .react-flow__edge-path { stroke-dasharray: 3 5; opacity: .45; }
.aii-graph .react-flow__edge.aii-e-off .aii-graph-label { opacity: .45; }
.aii-graph .react-flow__edge.aii-g-miss { opacity: .2; }
/* An edge's words fade in whenever they change („nie ↓” → „nie 12%”) —
   `backwards`, so once in, a faded path's opacity applies to them again. */
.aii-graph-label { font-size: 13px; font-weight: 600; fill: var(--muted); paint-order: stroke; stroke: var(--panel-2); stroke-width: 4px; stroke-linejoin: round; animation: aiiIn .25s ease backwards; }
.aii-graph .react-flow__edge.aii-g-new .aii-graph-label { fill: var(--accent-strong); }
.aii-graph .react-flow__edge.aii-g-removed .aii-graph-label { fill: var(--danger); }
.aii-graph .react-flow__edge.path-on .aii-graph-label { fill: var(--accent-strong); }
.aii-graph .react-flow__handle { width: 7px; height: 7px; background: var(--line); border: 0; }
/* Full screen: a fixed layer over the app, not the Fullscreen API (iOS
   Safari lacks it) — under the app's dialogs (.app-modal-overlay, 90) and
   toasts, so a confirmation opened from it is seen. It fades and settles in,
   and out. */
.aii-graph-full { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); transition: opacity .22s ease, transform .22s ease; }
.aii-graph-full.aii-g-enter, .aii-graph-full.aii-g-exit { opacity: 0; transform: scale(.985); }
/* The canvas and its cards fade with the layer, in and out. */
.aii-graph-full .aii-graph-fill { transition: opacity .22s ease; }
.aii-graph-full.aii-g-enter .aii-graph-fill, .aii-graph-full.aii-g-exit .aii-graph-fill,
.aii-graph-full.aii-g-exit .fnode { opacity: 0; }
.aii-graph-full-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aii-graph-full-acts { display: flex; align-items: center; gap: 8px; }
/* „Ułóż automatycznie” — in the toolbar and in full screen — is there only
   while a layout is saved: it opens and closes sideways (the 0fr → 1fr grid
   .method-expand uses for rows), taking its gap with it, and fades. The ring
   of a focused button has room inside the clip. */
.aii-auto-slot { display: inline-grid; grid-template-columns: 0fr; opacity: 0; margin-right: -8px; transition: grid-template-columns .28s ease, opacity .2s ease, margin-right .28s ease; }
.aii-auto-slot.open { grid-template-columns: 1fr; opacity: 1; margin-right: 0; }
.aii-auto-in { min-width: 0; overflow: hidden; padding: 3px; margin: -3px; }
.aii-auto-in > button { white-space: nowrap; }
.aii-graph-full-title { font-weight: 700; font-size: 16px; }
.aii-graph-full .aii-gnote { margin-bottom: 0; }
.aii-graph.aii-graph-fill { flex: 1; min-height: 0; height: auto; }
.aii-ghint { margin: 8px 2px 0; font-size: 12.5px; }
.aii-conv-graph { margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
/* Under an opened row: a rule made from it (a message left in the mailbox),
   and its way on the graph — or why it cannot be drawn any more. */
.aii-conv-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.aii-conv-rule { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--brass-line); border-radius: var(--radius-sm); background: var(--brass-soft); font-size: 13.5px; }
.aii-conv-rule > span { font-weight: 600; }
.aii-conv-stale { margin: 0; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .aii-graph .fnode, .aii-graph .aii-gn, .aii-graph, .aii-graph-full { transition: opacity .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
}

/* Ustawienia, and a channel's name */
.aii-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.aii-inline input { flex: 1 1 220px; margin: 0; }

/* Czat — the import screen's chat pane, filling its panel (openChat): only
   the thread scrolls, the composer stays at the panel's foot. */
.aii-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; padding: 4px 16px calc(12px + env(safe-area-inset-bottom)); }
.aii-chat .thread { flex: 1; min-height: 0; }
/* Nothing to attach here; hidden the way the widget hides it (.embed-mode). */
.aii-chat .intake-clip { display: none; }
.aii-chat .msg { max-width: 92%; }
.aii-chat .msg-bubble { padding: 9px 12px; font-size: 13.5px; }
.aii-chat-new { animation: rise .3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.aii-chat-intro { margin: auto 8px; text-align: center; }
.aii-chips { gap: 6px; margin: 0 0 10px; }
.aii-chips .chip { padding: 6px 11px; font-size: 12px; text-align: left; }
.aii-chat-err { margin: 6px 4px 0; }
.aii-chat-err:empty { display: none; }
/* „Zgłoś problem”: under the composer, opening as every .method-expand does. */
.aii-chat-report-form { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; }
.aii-chat-report-form label, .aii-chat-report-form .hint { margin: 0; }
.aii-chat-report-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; font: inherit; }
.aii-chat-report-err { margin: 0; }
.aii-chat-report-err:empty { display: none; }
.aii-chat-report-act { display: flex; justify-content: flex-end; gap: 8px; }
.aii-proposal { align-self: stretch; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); font-size: 13px; transition: opacity .2s ease, filter .2s ease, background .2s ease, border-color .2s ease; }
.aii-proposal-h { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); }
.aii-proposal ul { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding-left: 18px; }
/* A chat proposal's tests (ruleChat.js testsHtml): what each must do, how it ran. */
.aii-ptests { margin: 0 0 10px; }
.aii-ptests-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-weight: 600; }
.aii-proposal .aii-ptests-list { gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.aii-ptest { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); transition: border-color .2s ease, background .2s ease; }
.aii-ptest-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aii-ptest-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aii-ptest-head svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .2s ease; }
.aii-ptest-head[aria-expanded="true"] svg { transform: rotate(90deg); }
.aii-ptest-more .aii-ptest-words { padding: 0 10px 10px 36px; }
.aii-ptest-mark { flex: none; width: 18px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--muted); }
.aii-ptest-ok .aii-ptest-mark { color: var(--ok); }
.aii-ptest-bad { border-color: var(--danger-line); background: var(--danger-soft); }
.aii-ptest-bad .aii-ptest-mark { color: var(--danger); }
.aii-ptest-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.aii-ptest-msg, .aii-ptest-reply { color: var(--muted); }
.aii-ptest-why { color: var(--danger); }
.aii-ptest-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.aii-ptests .hint { margin: 0; }
/* Every state the card can be in, stacked in one cell: the buttons fade out,
   the outcome fades in, and the card never re-renders under the click. */
.aii-proposal-foot { display: grid; }
.aii-proposal-foot > * { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
.aii-proposal-actions { display: flex; gap: 8px; }
.aii-proposal[data-state="pending"] .aii-proposal-actions,
.aii-proposal[data-state="edited"] .aii-ps-edited,
.aii-proposal[data-state="applied"] .aii-ps-applied,
.aii-proposal[data-state="rejected"] .aii-ps-rejected,
.aii-proposal[data-state="stale"] .aii-ps-stale { opacity: 1; visibility: visible; transition: opacity .15s ease .15s, visibility 0s; }
.aii-ps-applied { font-weight: 600; color: var(--ok); }
.aii-ps-rejected, .aii-ps-stale, .aii-ps-edited { color: var(--muted); }
.aii-proposal[data-state="applied"] { border-color: var(--ok-line); background: var(--ok-soft); }
.aii-proposal[data-state="rejected"], .aii-proposal[data-state="stale"], .aii-proposal[data-state="edited"] { opacity: .55; filter: grayscale(1); border-color: var(--line); background: var(--panel-2); }
/* A reply's **bold** and bullet lists (chatHtml): laid out as markup, not as the bubble's pre-wrapped text. */
.aii-chat .aii-md { white-space: normal; }
.aii-md p { margin: 0 0 6px; }
.aii-md p:last-child, .aii-md ul:last-child { margin-bottom: 0; }
.aii-md ul { margin: 4px 0 6px; padding-left: 18px; }
/* „Dodać kolejną?” after Zastosuj: the question and its one-click answer. */
.aii-next { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.aii-next .chip { padding: 6px 11px; font-size: 12.5px; }

/* „Wypróbuj wiadomość” (inside the app's own dialog, __openModal). The
   channel picker is the shared .chip, with the channel's logo. */
.aii-sim-channels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.aii-sim-ch { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.aii-sim-ch img { display: block; flex: none; }
.aii-sim-ch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aii-sim-err { margin: 0 0 6px; }

@media (max-width: 560px) {
  /* Five equal columns are narrower than "Ustawienia": each tab takes its
     word's width and the spare room is shared out — and „Propozycje” with
     its count still fits a 360 px phone at 12 px (spec 2026-10-02). */
  .aii-tabs { grid-auto-columns: auto; gap: 2px; }
  .aii-tab { padding: 8px 3px; font-size: 12px; letter-spacing: -0.01em; }
  .aii-conv-head { flex-wrap: wrap; row-gap: 2px; }
  .aii-conv-time { width: 100%; padding-top: 0; }
  /* The decision goes under the message, the full width of the row. */
  .aii-conv-line { flex-wrap: wrap; }
  .aii-conv-dec { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--line); }
  .aii-convs-cols { display: none; }
  .aii-conv > .aii-conv-card .aii-flowcard { margin-left: 14px; }
  .aii-conv-quick { margin-left: 14px; }
  .aii-picking .aii-conv > .aii-conv-card .aii-flowcard, .aii-picking .aii-conv-quick { margin-left: 58px; }
  .dd-trigger.aii-conv-channel { width: 100%; }
  .aii-icon { width: 40px; height: 40px; }
  .aii-hosts { grid-template-columns: minmax(0, 1fr) 84px; }
}

/* ---- Reguły: the intro, the toolbar and the notes over the rules ---- */
.aii-intro { margin: 0 0 12px; max-width: 90ch; font-size: 13px; }
.aii-rtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.aii-rtools .aii-view-tabs { margin-bottom: 0; }
.aii-gnote-else { border-color: var(--accent-line); background: var(--accent-soft); }
.aii-rtools-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
#aii-rules-search { flex: 1 1 180px; max-width: 280px; margin: 0; }
/* Jev not set up, or down lately; a trial message's way; „Sprawdź wszystko”. */
.aii-gnote-warn { border-color: var(--brass-line); background: var(--brass-soft); color: var(--brass); }
.aii-gnote-trial { border-color: var(--violet-line); background: var(--violet-soft); align-items: flex-start; }
/* „Wypróbuj”: what the trial came to — the rule and what would be prepared,
   and the reply it would write under a fold. */
/* „Wypróbuj wiadomość”: the body field's margin would not collapse through the
   folded files below it — the hint under the fields sits at its own. */
.aii-trial-edit label:last-child { margin-bottom: 0; }
/* „Kto pisze?” and the chatbot's visitor line fold in place: their first
   line's margin would not collapse with the hint above them. */
.aii-trial-who > .aii-expand-in > :first-child, .aii-trial-visitor > .aii-expand-in > :first-child { margin-top: 0; }
.aii-trial-res { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.aii-trial-out { font-weight: 600; }
.aii-trial-reply .aii-toggle { min-height: 32px; }
.aii-trial-reply .aii-text { background: var(--panel); max-height: 180px; }
.aii-gnote-check { border-color: var(--accent-line); }
/* No rules yet: what that means, and the three ways to start. */
#ai-inbox-view .aii-empty-rules { margin-bottom: 12px; }
.aii-empty-lead { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.aii-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* ---- the rule sheet (aiInbox.js openSheet): a 440 px drawer on the right; on
   a phone a full-height bottom sheet with its footer pinned. It slides in and
   out over a scrim — above the floating assistant button (70–72), under the
   app's dialogs (90) and dropdowns (200). Reduced motion: it only fades. ---- */
.aii-sheet-layer, .aii-mail-layer, .aii-chat-layer { position: fixed; inset: 0; z-index: 80; }
.aii-sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); transition: opacity .28s ease; }
.aii-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--solid); border-left: 1px solid var(--line); box-shadow: var(--shadow-lift); transition: transform .3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .3s ease; }
.aii-sheet-layer.aii-sheet-enter .aii-sheet, .aii-sheet-layer.aii-sheet-exit .aii-sheet,
.aii-mail-layer.aii-sheet-enter .aii-sheet, .aii-mail-layer.aii-sheet-exit .aii-sheet,
.aii-chat-layer.aii-sheet-enter .aii-sheet, .aii-chat-layer.aii-sheet-exit .aii-sheet { transform: translateX(100%); opacity: 0; }
.aii-sheet-layer.aii-sheet-enter .aii-sheet-scrim, .aii-sheet-layer.aii-sheet-exit .aii-sheet-scrim,
.aii-mail-layer.aii-sheet-enter .aii-sheet-scrim, .aii-mail-layer.aii-sheet-exit .aii-sheet-scrim,
.aii-chat-layer.aii-sheet-enter .aii-sheet-scrim, .aii-chat-layer.aii-sheet-exit .aii-sheet-scrim { opacity: 0; }
.aii-sheet-layer.aii-sheet-exit, .aii-mail-layer.aii-sheet-exit, .aii-chat-layer.aii-sheet-exit { pointer-events: none; }
/* An opened mail (aiInbox.js openMail): the sheet, wide enough for a 600 px
   mail — its head, the mail and what the assistant did scrolling, its
   actions pinned at the foot. */
.aii-mail-sheet { width: min(760px, 100%); }
.aii-mail-dlg { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aii-mail-head { align-items: flex-start; flex-wrap: nowrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
/* In the mailbox (mailDialog.js mountMailLayer: .aii-mbx-sheet) the icons keep to the
   title's first line — .aii-sheet-head, later in this file, would centre them on a
   wrapped title. Flag off, today's sheet is left exactly as it was. */
.aii-mbx-sheet .aii-mail-head { align-items: flex-start; }
.aii-mail-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.aii-mail-titles .aii-sheet-title { overflow-wrap: anywhere; }
.aii-mail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.aii-mail-from { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
/* A phone, in the mailbox: the title beside the icons, the meta line under both at full width —
   never squeezed into the title's column, the sender broken over three lines. */
@media (max-width: 560px) {
  .aii-mbx-sheet .aii-mail-head { row-gap: 6px; }
  .aii-mbx-sheet .aii-mail-titles { display: contents; }
  .aii-mbx-sheet .aii-mail-titles .aii-sheet-title { flex: 1 1 0; min-width: 0; }
  .aii-mbx-sheet .aii-mail-meta { order: 1; flex-basis: 100%; }
}
/* A chat's contact (aiInbox.js contactHtml): no gap of its own while there is
   none; on a phone a line of its own, never a column beside the name. */
.aii-mail-contact-slot:empty { display: none; }
.aii-mail-contact { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .aii-mail-contact-slot { flex-basis: 100%; }
}
.aii-mail-msg .aii-mail-frame { margin-top: 0; }
.aii-mail-msg > .aii-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.aii-mail-msg .aii-thread { margin: 0; }
/* „Odpowiedz” under a website chat (aiInbox.js chatReplyHtml): where a reply
   goes and the button; then the field in its place. Nothing for any other
   conversation — the box stays empty and takes no room. */
.aii-chat-reply > :first-child { margin-top: 12px; }
.aii-chat-reply-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.aii-chat-reply-row .hint { flex: 1 1 220px; margin: 0; }
.aii-chat-reply > p.hint { margin-bottom: 0; }
.aii-mail-sec { margin: 22px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aii-mail-flow .aii-flow { margin-top: 4px; }
/* „Więcej” (aiInbox.js openMailMenu): every action of the opened mail, one
   row each, under ⋯ at its right — the rating card's look and motion. A
   click beside it lands on the catch and closes it. */
.aii-mail-menu-catch { position: absolute; inset: 0; z-index: 5; }
.aii-mail-dlg .aii-mail-menu { z-index: 6; width: min(300px, calc(100% - 32px)); padding: 0; overflow-y: auto; transform-origin: top right; }
.aii-menu-in { display: flex; flex-direction: column; padding: 6px; }
.aii-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 40px; padding: 9px 12px;
  background: none; border: 0; border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.aii-menu-item:hover:not([disabled]), .aii-menu-item:focus-visible { background: var(--panel); filter: none; }
.aii-menu-item[disabled] { opacity: .55; cursor: default; }
.aii-menu-item .hint { margin: 0; font-size: 12.5px; color: var(--muted); }
/* Red words, never the red block a lone .danger button gets (shell.css). */
.aii-menu-in .aii-menu-item.danger { background: none; color: var(--danger); }
.aii-menu-in .aii-menu-item.danger:hover:not([disabled]), .aii-menu-in .aii-menu-item.danger:focus-visible { background: var(--danger-soft); }
.aii-menu-item .btn-spinner { width: 12px; height: 12px; margin-right: 6px; }
.aii-menu-note { margin: 0; padding: 9px 12px; font-size: 12.5px; }
.aii-menu-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
/* An e-mail of a thread that came with HTML: the mail itself in its bubble,
   as wide as the chat — the frame is its own white page. */
.aii-thread-msg.aii-t-html .msg { max-width: 100%; width: 100%; }
.aii-thread-msg.aii-t-html .msg-bubble { padding: 0; overflow: hidden; white-space: normal; }
.aii-thread-msg.aii-t-html .aii-mail-frame { margin: 0; border: 0; border-radius: 0; }
/* A row opens its mail in the dialog: its chevron points there. */
.aii-conv-head > svg:last-child { transform: rotate(-90deg); }
.aii-sheet-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px 8px; }
.aii-sheet-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; }
/* The chat's header: its title and the two icons on one line, the text
   buttons (Ustaw ręcznie, Zgłoś problem) on the next — beside the title they
   squeezed it to a word per line on a phone. */
.aii-chat-sheet .aii-sheet-head .aii-icon { order: 1; }
.aii-chat-sheet .aii-sheet-head::after { content: ""; order: 2; flex-basis: 100%; height: 0; margin-top: -8px; }
.aii-chat-sheet .aii-sheet-head .ghost.small { order: 3; }
/* Two lines kept from the start: the sentence grows as it is typed, and most
   rules fit two — the steps under it do not jump at every word. */
.aii-sentence { margin: 0 16px 10px; padding: 10px 12px; min-height: calc(3em + 22px); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.aii-sentence-part { display: inline; padding: 0; margin: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 400; text-align: left; border-radius: 4px; }
.aii-sentence-part:hover { filter: none; background: var(--accent-soft); }
.aii-sentence-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aii-sentence-part b { color: var(--accent-strong); }
/* The message a rule is made from („Utwórz regułę z tej wiadomości”). */
.aii-sheet-source { margin: -2px 16px 10px; padding: 8px 12px; border: 1px solid var(--brass-line); border-radius: var(--radius-sm); background: var(--brass-soft); font-size: 13px; overflow-wrap: anywhere; }
.aii-sheet-source .aii-label { display: inline; margin: 0 4px 0 0; }
.aii-sheet-source .hint { margin: 2px 0 0; font-size: 12.5px; }
.aii-sheet-steps { margin: 0 16px 4px; grid-template-columns: repeat(3, 1fr); }
.aii-sheet-steps .tab { transition: background .18s ease, color .18s ease; }
.aii-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 18px; }
/* The assistant's knowledge (aiInbox.js openKnowledge): the company's text
   fills what the sheet has left — counts above, the communities below. */
.aii-kn-body { display: flex; flex-direction: column; }
/* Nothing shrinks: an opened community adds height, and the sheet scrolls —
   a shrinking block let its headings overlap the next one's. */
.aii-kn-body > * { flex-shrink: 0; }
.aii-kn-company { flex: 1 0 auto; display: flex; flex-direction: column; }
.aii-kn-company .aii-kn-text { flex: 1 1 auto; min-height: 220px; resize: none; }
.aii-kn-org .aii-kn-text { min-height: 45vh; }
.aii-sheet-foot { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--solid); }
.aii-sheet-foot .wiz-nav { margin-top: 8px; }
.aii-sheet-err { margin: 0; padding-bottom: 2px; font-size: 13px; }
.aii-place { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: 13.5px; }
.aii-place .dd-trigger { width: auto; min-width: 110px; }
/* Step 1: the conditions, each with Jev's question under it. */
.aii-cond { margin-bottom: 10px; }
.aii-cond-row { display: flex; align-items: flex-end; gap: 6px; }
.aii-cond-label { flex: 1; min-width: 0; margin: 0; }
.aii-cond-row .aii-icon { margin-bottom: 4px; }
.aii-ask { margin: 6px 0 2px; font-size: 13px; color: var(--accent-strong); overflow-wrap: anywhere; }
.aii-cond .hint { margin: 2px 0 0; font-size: 12.5px; }
.aii-listwarn .aii-warn { margin-top: 8px; }
.aii-more-slot { margin: 2px 0 12px; }
.aii-reuse { margin: 0 0 12px; }
.aii-reuse .chips { gap: 6px; }
.aii-reuse .chip { padding: 6px 11px; font-size: 12.5px; text-align: left; }
.aii-field { display: block; margin: 12px 0 4px; }
/* „Podpis” (channels.js signatureEditorHtml): a toolbar over a formatted field. The toolbar
   wraps on a phone; a wide pasted table scrolls inside the field, never the dialog. */
.aii-sig { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); transition: border-color .15s ease; }
.aii-sig:focus-within { border-color: var(--accent-line); }
.aii-sig-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--line); }
.aii-sig-text { display: inline-flex; align-items: center; gap: 6px; }
.aii-sig-text svg { width: 15px; height: 15px; flex: none; }
.aii-sig-slot { overflow: hidden; transition: opacity .15s ease, height .25s ease; }
.aii-sig-edit { min-height: 5.5em; max-height: 360px; overflow: auto; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; outline: none; transition: opacity .15s ease, height .25s ease; }
.aii-sig-edit:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.aii-sig-edit img { max-width: 100%; height: auto; }
.aii-sig-edit a { color: var(--accent); }
.aii-sig-skel { display: grid; gap: 8px; padding: 12px; }
.aii-sig-err { display: grid; gap: 8px; justify-items: start; padding: 12px; }
.aii-sig-err .error { margin: 0; }
.aii-sig-msg { margin-top: 6px; }
@media (max-width: 560px) { .aii-sig-text { min-height: 40px; } }
.aii-sheet-alt { margin: 14px 0 0; }
/* The label and its picker, called for by a template: the picker to fill. */
.aii-hl .dd-trigger { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: aiiHl 1.6s ease 2; }
@keyframes aiiHl { 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }
/* Step 2: four tiles in one column — each an icon and one sentence. */
.aii-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.aii-tile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; font-size: 13.5px; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.aii-tile-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--accent-strong); }
.aii-tile-ico svg { width: 18px; height: 18px; }
.aii-tile-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aii-tile-words > span { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
.aii-tile.sel .aii-tile-words b { color: var(--accent-strong); }
.aii-tile-opts { margin-top: 6px; }
.aii-tiles-note { margin: 0 0 10px; font-size: 12.5px; }
.aii-other { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.aii-trade { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 13px; }
.aii-trade p { margin: 0 0 8px; }
/* Step 3: the check — skeleton rows while it runs, then the messages. */
.aii-check-src { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.aii-check-sum { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.aii-check-note { margin: 0 0 6px; font-size: 13px; }
.aii-check-note .ghost { margin-left: 6px; }
.aii-check-how { margin: 8px 0 0; font-size: 12.5px; }
.aii-check-rows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aii-crow { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13px; }
.aii-crow-skel { display: flex; flex-direction: column; gap: 8px; }
.aii-check-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.aii-crow-from { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.aii-crow-line { font-weight: 600; overflow-wrap: anywhere; }
.aii-crow-body { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.aii-crow .aii-toggle { margin-top: 2px; white-space: nowrap; overflow: hidden; transition: color .15s ease, opacity .15s ease, width .25s ease; }
.aii-crow-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.aii-pchip { padding: 1px 9px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--panel); }
.aii-p-yes { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.aii-p-unsure { color: var(--brass); border-color: var(--brass-line); background: var(--brass-soft); }
.aii-crow-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.aii-verdict { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.aii-v-yes { color: var(--ok); }
.aii-v-unsure { color: var(--brass); }
.aii-crow-acts { display: flex; gap: 6px; }
.aii-crow-acts .chip { min-width: 64px; padding: 4px 12px; font-size: 12.5px; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.aii-crow-acts .chip[aria-pressed="true"] { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.aii-better .aii-toggle { margin-top: 8px; }
.aii-paste { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.aii-paste label { margin: 0; }
.aii-paste .hint { margin: 4px 0 8px; font-size: 12.5px; }
#aii-save-warn { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--brass-line); border-radius: var(--radius-sm); background: var(--brass-soft); font-size: 13px; }
#aii-save-warn p { margin: 0 0 8px; }
.aii-regress { margin: 8px 0 0; padding-left: 18px; }
/* The templates, in the sheet. */
.aii-templates-lead { margin: 0 0 10px; }
.aii-templates { display: flex; flex-direction: column; gap: 8px; }
.aii-template { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; transition: border-color .15s ease, background .15s ease; }
.aii-template:hover { filter: none; border-color: var(--accent-line); background: var(--accent-soft); }
.aii-template:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aii-template-then { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); font-weight: 600; font-size: 12.5px; }
.aii-template-then svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .aii-sheet { left: 0; width: 100%; border-left: 0; }
  /* A phone's height is short: the head, the sentence and the steps stay compact. */
  .aii-sheet-head { padding: 10px 16px 6px; }
  .aii-sentence { margin-bottom: 8px; padding: 8px 10px; font-size: 13.5px; min-height: calc(3em + 18px); }
  .aii-sheet-steps .tab { padding: 8px 4px; font-size: 13px; white-space: nowrap; }
  .aii-sheet-layer.aii-sheet-enter .aii-sheet, .aii-sheet-layer.aii-sheet-exit .aii-sheet,
  .aii-mail-layer.aii-sheet-enter .aii-sheet, .aii-mail-layer.aii-sheet-exit .aii-sheet,
  .aii-chat-layer.aii-sheet-enter .aii-sheet, .aii-chat-layer.aii-sheet-exit .aii-sheet { transform: translateY(100%); opacity: 0; }
  .aii-other { grid-template-columns: minmax(0, 1fr); }
  /* The composer on a phone: the bottom sheet, its labels narrower, „Wyślij” pinned at the foot. */
  .aii-cmp-label { width: 44px; }
}
/* Touch: every control in the sheet is a 44 px target. */
@media (pointer: coarse) {
  .aii-sheet button, .aii-sheet .dd-trigger { min-height: 44px; }
  .aii-sheet .aii-icon { width: 44px; height: 44px; }
  .aii-sheet .aii-sentence-part { min-height: 0; }
  .aii-restore, .aii-empty-link, .aii-rtools button, .aii-gnote button, .aii-add-rule-row button, .aii-trial-form button, .aii-graph-full-acts button { min-height: 44px; }
  /* Kanały: a channel's switch and its settings. Rozmowy: an opened row's
     toggles and actions, and a flow card's buttons. */
  .aii-card .dev-switch, .aii-card > .aii-toggle { min-height: 44px; }
  .aii-conv-flow .aii-toggle, .aii-conv-acts button, .aii-flowcard button, .aii-more-row button, .aii-conv-quick button { min-height: 44px; }
  .aii-pick-mode, .aii-pickbar button { min-height: 44px; }
  .aii-mbx-compose, .aii-mbx-head .aii-mbx-back, .aii-mbx-trashbar button { min-height: 40px; }
  .aii-sheet .aii-cmp-links { padding-top: 0; margin-top: -8px; } /* a 44 px link: centred on the chips' first line */
  .aii-sheet .aii-cmp-x { min-height: 0; width: 28px; height: 28px; margin: -4px -2px -4px 0; }
}
/* A toast while the sheet is open keeps clear of it: beside the drawer on a
   wide screen, above its pinned footer on a phone (the footer's height is
   measured into --aii-sheet-foot-h, aiInbox.js mountSheet). It glides there
   and back. */
body:has(.aii-mail-layer:not(.aii-sheet-exit)) #toast-host { right: min(760px, 100%); }
body:has(.aii-sheet-layer:not(.aii-sheet-exit)) #toast-host,
body:has(.aii-chat-layer:not(.aii-sheet-exit)) #toast-host { right: min(440px, 100%); }
body:has(.aii-sheet-layer, .aii-mail-layer, .aii-chat-layer) #toast-host { transition: bottom .3s ease, right .3s ease; }
@media (max-width: 760px) {
  body:has(.aii-sheet-layer:not(.aii-sheet-exit)) #toast-host,
  body:has(.aii-mail-layer:not(.aii-sheet-exit)) #toast-host { right: 0; bottom: calc(var(--aii-sheet-foot-h, 120px) + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .aii-sheet { transition: opacity .2s ease; }
  .aii-sheet-layer.aii-sheet-enter .aii-sheet, .aii-sheet-layer.aii-sheet-exit .aii-sheet,
  .aii-mail-layer.aii-sheet-enter .aii-sheet, .aii-mail-layer.aii-sheet-exit .aii-sheet,
  .aii-chat-layer.aii-sheet-enter .aii-sheet, .aii-chat-layer.aii-sheet-exit .aii-sheet { transform: none; opacity: 0; }
  .aii-hl .dd-trigger { animation: none; }
}
/* The rule chat's status in the corner, app-wide (ruleChat.js syncPill):
   while a turn runs in the background and once it ended, until opened. Under
   the panels (80) and the toasts (100); beside Estate ID's assistant button
   when that is on screen; it slides up in and down out, its colours glide
   between the states and its words cross-fade (fadeSwap). */
.aii-cs {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 75;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 10px 16px 10px 12px; border-radius: 999px; font: 500 14px/20px var(--sans); white-space: nowrap;
  background: var(--solid); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-lift); cursor: pointer;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .7, .2, 1), background-color .24s ease, border-color .24s ease, color .24s ease;
}
.aii-cs:hover { filter: none; border-color: var(--accent-line); }
.aii-cs.aii-cs-off { opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; }
.aii-cs-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease, width .24s ease; }
.aii-cs-mark { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: aiiCsSpin .9s linear infinite; transition: border-color .24s ease, background-color .24s ease; }
.aii-cs[data-status="done"] { background: var(--accent-fill); border-color: var(--accent-line); color: var(--accent-strong); }
.aii-cs[data-status="done"] .aii-cs-mark,
.aii-cs[data-status="failed"] .aii-cs-mark { animation: none; border-width: 4px; }
.aii-cs[data-status="done"] .aii-cs-mark { border-color: var(--accent); }
.aii-cs[data-status="failed"] { background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--solid); border-color: var(--danger-line); color: var(--danger); }
.aii-cs[data-status="failed"] .aii-cs-mark { border-color: var(--danger); }
@keyframes aiiCsSpin { to { transform: rotate(360deg); } }
body:has(#assistant-fab:not(.hidden)) .aii-cs { right: 92px; }
@media (max-width: 760px) {
  .aii-cs { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  body:has(#assistant-fab:not(.hidden)) .aii-cs { right: 84px; }
  /* A phone's toasts are as wide as the screen: they rise above the pill. */
  body:has(.aii-cs:not(.aii-cs-off)) #toast-host { bottom: calc(72px + env(safe-area-inset-bottom)); transition: bottom .3s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .aii-cs.aii-cs-off { transform: none; }
  .aii-cs-mark { animation-duration: 2.4s; }
}
/* Lista: the rules on either side of the assistant, under a heading each,
   and the assistant's own locked row between them. */
.aii-rules-side { margin: 14px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.aii-rules-side + .aii-rules { margin-top: 6px; }
.aii-rule-end.aii-rule-assistant { margin-top: 12px; border-style: solid; border-color: var(--accent); }
.aii-flow-assistant { font-weight: 600; }

/* ---- Asystent AI: what the assistant learned (spec 2026-10-02) ------------------
   Propozycje, Testy, „Usprawnienie” in an opened
   mail and „Porównaj” in Historia zmian — aiInboxAutomation.js (.aip-*, .aiq-*). The
   tokens, chips and motion of the rest of the panel; nothing new to learn. */
.aii-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.aii-tab-badge { display: inline-flex; overflow: hidden; }
.aii-tab-n { margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-strong); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.aii-tab-n-bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

.aip-body, .aiq-body { min-height: 120px; }
.aip-skel, .aip-cards, .aiq-list { display: grid; gap: 8px; }
.aip-skel-card { display: grid; gap: 10px; padding: 16px; }
.aip-card { display: grid; gap: 12px; padding: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.aip-card:hover { border-color: var(--accent-line); }
.aip-flash { animation: aip-flash 1.6s ease; }
@keyframes aip-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.aip-head { display: flex; align-items: flex-start; gap: 12px; }
.aip-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); }
.aip-ico svg { width: 18px; height: 18px; }
.aip-ico-knowledge { background: var(--ok-soft); color: var(--ok); }
.aip-ico-community { background: var(--brass-soft); color: var(--brass); }
.aip-ico-tune { background: var(--violet-soft); color: var(--violet); }
.aip-titles { flex: 1; min-width: 0; }
.aip-title { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.aip-evidence { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.aip-kind { flex: none; color: var(--muted); border-color: var(--line); white-space: nowrap; }
.aip-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13.5px; }
.aip-when, .aip-then { min-width: 0; overflow-wrap: anywhere; }
.aip-arrow { display: inline-flex; color: var(--accent); }
.aip-arrow svg { width: 16px; height: 16px; }
.aip-then { font-weight: 600; }
.aip-then-open { font-weight: 500; font-style: italic; color: var(--muted); }
.aip-ex-toggle { justify-self: start; }
/* A finger needs ~40 px: the toggle's hit area grows, its line does not move. */
@media (pointer: coarse) { .aip-ex-toggle { padding-block: 10px; margin-block: -10px; } }
.aip-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
/* A message as a line — when · subject · what came of it: a proposal's examples, and „Wybierz rozmowę”'s rows. */
.aip-examples li, .aiq-pick-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.aip-ex-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.aip-ex-subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aip-ex-did { color: var(--muted); font-size: 12px; text-align: right; }
.aip-acts, .aip-assess-acts, .aiq-acts, .aiq-sum-acts, .aip-empty-acts, .aii-change-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aip-acts .aip-more { margin-left: auto; }
.aip-never, .aip-assess-acts .ghost { display: inline-flex; align-items: center; gap: 6px; }
.aip-never svg, .aip-assess-acts svg { width: 15px; height: 15px; flex: none; }
.aip-sec { margin-top: 24px; }
.aip-sec-h { display: flex; align-items: center; gap: 8px; }
.aip-sec-n { padding: 0 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.aip-sec-lead { margin: 0 0 8px; font-size: 13px; }
.aip-minis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aip-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.aip-mini-ico { flex: none; display: inline-flex; color: var(--muted); }
.aip-mini-ico svg { width: 18px; height: 18px; }
.aip-mini-ico.aip-ok { color: var(--ok); }
.aip-mini-ico.aip-no { color: var(--danger); }
.aip-mini-main { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; overflow-wrap: anywhere; }
.aip-mini-main .hint { font-size: 12.5px; margin: 0; }
.aip-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; }
.aip-empty p { margin: 0; max-width: 56ch; }
.aip-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 4px; animation: aip-breathe 3.2s ease-in-out infinite; }
.aip-empty-ico svg { width: 24px; height: 24px; }
.aip-empty-acts { justify-content: center; margin-top: 8px; }
@keyframes aip-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.aip-error { display: grid; gap: 8px; justify-items: start; padding: 16px; }
.aip-never-dlg p { margin: 0 0 10px; }
.aip-scopes { display: grid; gap: 8px; margin: 0 0 12px; }
.aip-scope { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.aip-scope:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.aip-scope input { margin-top: 3px; flex: none; }
.aip-never-dlg textarea { width: 100%; margin-bottom: 8px; }
.aip-dlg-acts { justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* Short of room a button moves to the next line whole, never mid-label. */
.aip-dlg-acts button { white-space: nowrap; }
/* „Nigdy takich” opens over a sheet or an opened mail (z-index 80)
   and over the full-screen graph (85), whose switches change rules too: the
   shared dialog layer (60) would sit under them, unreachable. Below the app's
   own confirm (90) and the toasts (100). */
.debt-modal-overlay.aip-over-sheet { z-index: 86; }

/* „Usprawnienie” in an opened mail */
.aip-assess-wait { display: grid; gap: 8px; padding: 6px 0; }
.aip-assess { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13.5px; }
.aip-assess[data-state="proposal"] { border-color: var(--accent-line); background: var(--accent-soft); }
.aip-assess[data-state="excluded"] { border-color: var(--danger-line); }
.aip-assess p { margin: 0; }
.aip-assess-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aip-assess-lead { min-width: 0; overflow-wrap: anywhere; }
.aip-topic { color: var(--muted); border-color: var(--line); background: var(--panel); }
.aip-meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.aip-meter span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--accent); animation: aip-meter .6s cubic-bezier(.2, 0, 0, 1) both; transform-origin: left; }
@keyframes aip-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Testy */
.aiq-sum-slot { margin-bottom: 12px; }
.aiq-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; transition: border-color .25s ease, background .25s ease; }
.aiq-summary[data-state="pass"] { border-color: var(--ok-line); }
.aiq-summary[data-state="fail"] { border-color: var(--danger-line); background: var(--danger-soft); }
.aiq-summary[data-state="stale"] { border-color: var(--brass-line); }
.aiq-sum-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); color: var(--muted); }
.aiq-sum-ico svg { width: 22px; height: 22px; }
.aiq-summary[data-state="pass"] .aiq-sum-ico { background: var(--ok-soft); color: var(--ok); }
.aiq-summary[data-state="fail"] .aiq-sum-ico { background: var(--panel); color: var(--danger); }
.aiq-summary[data-state="stale"] .aiq-sum-ico { background: var(--brass-soft); color: var(--brass); }
.aiq-sum-main { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.aiq-sum-title { font-size: 15px; }
.aiq-sum-main .hint { margin: 0; font-size: 12.5px; }
.aiq-row { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; transition: border-color .2s ease; }
.aiq-row[data-state="fail"] { border-color: var(--danger-line); }
.aiq-row-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.aiq-dot { flex: none; display: inline-flex; }
.aiq-dot svg { width: 20px; height: 20px; }
.aiq-pass { color: var(--ok); }
.aiq-fail { color: var(--danger); }
.aiq-stale, .aiq-notrun { color: var(--brass); }
.aiq-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aiq-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiq-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiq-res { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.aiq-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform .25s ease; }
.aiq-chev svg { width: 18px; height: 18px; }
.aiq-row-head[aria-expanded="true"] .aiq-chev { transform: rotate(180deg); }
.aiq-detail { display: grid; gap: 10px; padding: 0 14px 14px 46px; font-size: 13.5px; }
.aiq-msg { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); overflow-wrap: anywhere; }
.aiq-msg p { margin: 4px 0 0; white-space: pre-line; color: var(--text); }
.aiq-res-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ok); }
.aiq-res-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--brass); }
.aiq-res-ok svg, .aiq-res-warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.aiq-res-bad { padding: 10px 12px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: var(--danger-soft); }
.aiq-res-bad p { margin: 0 0 4px; }
.aiq-why { margin: 6px 0 0; padding-left: 18px; color: var(--danger); }
.aiq-scores { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.aiq-scores .aiq-score-miss { color: var(--danger); }
.aiq-exact-toggle { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.aiq-exact-toggle .aiq-chev svg { width: 16px; height: 16px; }
.aiq-exact-toggle[aria-expanded="true"] .aiq-chev { transform: rotate(180deg); }
.aiq-meta { margin: 0; font-size: 12px; }

/* the test editor */
.aiq-sheet-body input:not([type="radio"]), .aiq-sheet-body select, .aiq-sheet-body textarea { width: 100%; }
.aiq-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aiq-seg-opt { position: relative; display: flex; margin: 0; } /* a <label>: never the form's label margin — the grid's gap spaces the rows */
.aiq-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.aiq-seg-opt span { flex: 1; display: grid; place-items: center; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.aiq-seg-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.aiq-seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.aiq-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aiq-tile { display: grid; gap: 4px; align-content: start; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.aiq-tile b { font-size: 13.5px; }
.aiq-tile span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.aiq-tile.sel { border-color: var(--accent); background: var(--accent-soft); }
.aiq-foot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.aiq-now { padding: 10px 0 0; }
.aiq-now-line { margin: 0; }
.aiq-reply { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent-line); background: var(--panel-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; white-space: pre-line; }
/* A test's way through the flow (trailHtml): Rozmowy's timeline, every rule
   asked numbered as on the list, the one that took it in full colour, the
   step where it ended marked. */
/* „Wybierz rozmowę”: the last conversations laid out as a proposal's examples
   (when · subject · what came of it), each row a button that makes a test. */
.aiq-pick { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(60vh, 520px); overflow: auto; font-size: 13px; }
/* ...as a button: full width, the page's text, no button chrome. */
.aiq-pick-row {
  width: 100%; padding: 9px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--text); font: inherit; text-align: left; transition: background-color .15s ease;
}
.aiq-pick-row:hover, .aiq-pick-row:focus-visible { background: var(--panel-2); filter: none; }
@media (max-width: 560px) { .aiq-pick-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .aiq-pick-row .aip-ex-did { text-align: left; } }
/* A test's last result and its way, one part a run refills in place (syncTests). */
.aiq-run { display: grid; gap: 10px; }
.aiq-trail-box > .aii-label { margin: 0; }
.aiq-trail { margin-top: 6px; }
.aiq-asked { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
/* A row of a list inside a stage, not a stage: .timeline li's indent, gap and connector stay off it. */
.aiq-asked li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 0; color: var(--muted); font-weight: 400; }
.aiq-asked li::before { display: none; }
.aiq-asked li.aiq-hit { color: var(--text); font-weight: 600; }
.aiq-asked .aii-rule-nr { width: 20px; height: 20px; font-size: 11px; line-height: 20px; }
.aiq-ask-v { white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.aiq-end-chip { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; line-height: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; vertical-align: 1px; }
.aiq-trail > li.aiq-end .dot { box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) {
  .aiq-asked li { grid-template-columns: auto minmax(0, 1fr); }
  .aiq-ask-v { grid-column: 2; }
}

/* Historia zmian: „Porównaj” */
.aii-change-acts { margin-top: 6px; }
.aip-change-tests { display: inline-block; margin-top: 6px; }
.aip-change-override { margin: 6px 0 0; }
.aip-diff-slot { margin-top: 8px; }
.aip-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aip-diff li { display: flex; gap: 8px; padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel-2); font-size: 13px; overflow-wrap: anywhere; }
.aip-diff-sign { flex: none; width: 12px; font-weight: 700; text-align: center; }
.aip-diff li.aip-diff-added { border-left-color: var(--ok); }
.aip-diff-added .aip-diff-sign { color: var(--ok); }
.aip-diff li.aip-diff-removed { border-left-color: var(--danger); }
.aip-diff-removed .aip-diff-sign { color: var(--danger); }
.aip-diff li.aip-diff-changed { border-left-color: var(--accent); }
.aip-diff-changed .aip-diff-sign { color: var(--accent); }
.aip-diff-moved .aip-diff-sign { color: var(--muted); }
.aip-diff-none { margin: 0; }

@media (max-width: 560px) {
  /* The tabs' count, a tighter pill on a phone; scrolling sideways stays only
     as the last resort, should a longer word ever not fit. */
  .aii-tabs { overflow-x: auto; scrollbar-width: none; }
  .aii-tabs::-webkit-scrollbar { display: none; }
  .aii-tab-n { margin-left: 3px; min-width: 15px; padding: 0 4px; font-size: 10px; line-height: 14px; }
  .aip-examples li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .aip-ex-did { text-align: left; }
  .aip-acts > button:not(.aip-more) { flex: 1 1 auto; }
  .aiq-detail { padding-left: 14px; }
  .aiq-tiles { grid-template-columns: minmax(0, 1fr); }
  /* No room beside the name: the state word takes its own line under it, past the icon. */
  .aiq-row-head { flex-wrap: wrap; row-gap: 2px; }
  .aiq-res { order: 1; flex-basis: 100%; padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .aip-empty-ico, .aip-meter span, .aip-flash { animation: none; }
}

/* Pracownicy biura (Ustawienia), the assistant's note and „Zmień osobę” (Rozmowy). */
/* A person is one row, like a rule: a bordered card, the name over the e-mail over a two-line description, one „⋯” centred on the right. */
.aii-staff-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; }
.aii-staff-card, .aii-staff-form { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.aii-staff-who { flex: 1; min-width: 0; padding: 4px 0; }
.aii-staff-name, .aii-staff-email { display: block; overflow-wrap: anywhere; }
.aii-staff-desc { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aii-staff-empty { margin: 8px 0 0; }
.aii-staff-addwrap { margin-top: 12px; }
.aii-staff-form { display: grid; gap: 8px; padding: 12px 14px; min-width: 0; }
.aii-staff-form label { display: grid; gap: 4px; }
.aii-staff-count { text-align: right; margin: 0; }
.aii-flow-note { margin-top: 2px; }
.aii-flow-note span, .aii-to-pick { font-weight: 600; }
/* The „Do:” line holds a button or a picker: a wrapping row, not .aii-mail-h's two columns. */
.aii-mail-to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* .aii-sized clips (overflow: hidden): a little padding, taken back by a margin, keeps a focus ring whole. */
.aii-mail-to, .aii-staff-row.aii-sized { padding: 3px; margin: -3px; }
.aii-staff { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.aii-staff-addwrap > [hidden] { display: none; }
/* Where the host assigns communities: the account's state as a .aii-badge
   (active in the accent, invited in brass — something still to happen), and
   the communities beside it. The form's „Wspólnoty” is a borderless fieldset
   around a searchable multiple dropdown (dropdown.js) — a company may run dozens;
   the invitation note folds in and out under it. */
.aii-staff-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.aii-staff-orgnames { min-width: 0; overflow-wrap: anywhere; }
.aii-staff-state[data-state="active"] { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.aii-staff-state[data-state="invited"] { color: var(--brass); border-color: var(--brass-line); background: var(--brass-soft); }
.aii-staff-orgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
.aii-staff-orgs legend { padding: 0; margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.aii-staff-invite-note { margin: 6px 0 0; }
.aii-staff-invite > [hidden] { display: none; }
.aii-staff-lock { margin: -4px 0 0; }
.aii-staff-form input[readonly] { color: var(--muted); background: transparent; cursor: default; }
.aii-mail-to > span:first-child { flex: none; min-width: 38px; }
.aii-to-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aii-to-pick select { min-width: 0; max-width: 100%; }

/* „Przypisanie do osoby” (spec 2026-10-05 §5): every staff score as a bar — in
   Rozmowy's „Decyzja” and on the schema's card, the same row. One fixed
   template (name · meter · number), so the meters line up and a bar's length
   is its score; the shared meter grows in (.aip-meter), the threshold is a
   notch on it (--t), the chosen one is the accent, the others muted. */
.aii-assign { display: grid; gap: 4px; margin-top: 6px; }
.aii-assign-h { font-weight: 600; }
.aii-assign-bar { display: grid; grid-template-columns: minmax(0, 12em) minmax(40px, 1fr) 2.8em; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.aii-assign-name, .aii-assign-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aii-assign .aii-assign-name { display: flex; align-items: center; gap: 6px; }
.aii-assign-pick { flex: none; padding: 0 6px; border-radius: 999px; font-size: 11.5px; line-height: 17px; font-weight: 600; background: var(--accent-soft); color: var(--accent-strong); }
.aii-assign-n { text-align: right; font-variant-numeric: tabular-nums; }
.aii-assign-chosen { color: var(--text); font-weight: 700; }
.aii-assign-bar .aip-meter { position: relative; }
.aii-assign-bar .aip-meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--t, 70%); width: 2px; background: var(--panel); }
.aii-assign-bar:not(.aii-assign-chosen) .aip-meter span { background: var(--muted); opacity: .55; }
/* On the schema's card a bar is one 17 px line of it (aiInboxGraphView.js cardH). */
.aii-graph .aii-assign-bar { height: 17px; grid-template-columns: minmax(0, 1fr) 64px 2.8em; gap: 6px; font-size: 12px; line-height: 17px; }
.aii-graph .aii-assign-bar .aip-meter { height: 5px; }
/* Its sheet: who is on the list, a name over what they handle — and the way to Ustawienia kept clear of the last card. */
.aii-as-body .form-actions { margin-top: 16px; }
.aii-as-staff { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aii-as-staff li { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); overflow-wrap: anywhere; }
.aii-graph .fnode.aii-fn-assign { border-color: var(--accent); }
/* The Karta sprawy sheet (aiInbox/graph.js openCard): the description, its
   buttons, and „Tak to rozumiem” under them — the area opens by growing to its
   table, the table fades in, and a table no longer what was checked dims. */
.aii-card-body .aii-kn-text { min-height: 180px; resize: vertical; }
.aii-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aii-card-acts > button { white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, width .25s ease; }
.aii-card-summary { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s ease, opacity .2s ease; }
.aii-card-summary--open { grid-template-rows: 1fr; opacity: 1; }
.aii-card-summary-in { min-height: 0; }
.aii-card-summary--open .aii-card-table { animation: aiiIn .2s ease .12s backwards; }
.aii-card-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; transition: opacity .2s ease; }
.aii-card-table caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 8px; }
.aii-card-table th, .aii-card-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.aii-card-table th { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.aii-card-stale { opacity: .45; }
.aii-card-error { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .aii-card-summary, .aii-card-table, .aii-card-acts > button { transition-duration: 0s; }
  .aii-card-summary--open .aii-card-table { animation-duration: 0s; animation-delay: 0s; }
}

/* „Oceń rozmowę” (aiInbox/mailDialog.js): five scores under what the assistant did,
   each tinted from red (1) through amber (3) to green (5) on hover and when
   picked — the app's own danger/brass/ok, mixed between. A score's card opens
   beside it on a clear layer of its own: the mail's scrim already dims the
   page, and a second blur over it would double it. */
.aii-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.aii-review { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 4px; }
.aii-review .hint { flex: 1 1 240px; margin: 0; }
.aii-rate-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.aii-rate-row { display: flex; gap: 8px; }
.aii-rate-note { flex: 1 0 100%; display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.aii-rate-comment { margin: 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(.aii-rate-btn, .aii-conv-rate)[data-score="1"] { --rate: var(--danger); }
:is(.aii-rate-btn, .aii-conv-rate)[data-score="2"] { --rate: color-mix(in srgb, var(--danger) 55%, var(--brass)); }
:is(.aii-rate-btn, .aii-conv-rate)[data-score="3"] { --rate: var(--brass); }
:is(.aii-rate-btn, .aii-conv-rate)[data-score="4"] { --rate: color-mix(in srgb, var(--brass) 45%, var(--ok)); }
:is(.aii-rate-btn, .aii-conv-rate)[data-score="5"] { --rate: var(--ok); }
.aii-rate-btn {
  width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.aii-rate-btn:hover, .aii-rate-btn:focus-visible { color: var(--rate); border-color: color-mix(in srgb, var(--rate) 60%, transparent); background: color-mix(in srgb, var(--rate) 12%, var(--panel-2)); }
.aii-rate-btn.on { color: var(--solid); border-color: var(--rate); background: var(--rate); }
.aii-rate-layer { position: fixed; inset: 0; z-index: 90; }
.aii-rate-catch { position: absolute; inset: 0; }
.aii-rate-pop, .aii-mail-menu, .aii-cmp-suggest {
  position: absolute; width: min(340px, calc(100vw - 32px)); padding: 16px; box-sizing: border-box;
  background: var(--solid); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
  transform-origin: top center; transition: opacity .2s ease, transform .2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aii-rate-pop.aii-pop-up { transform-origin: bottom center; }
.aii-rate-layer.aii-pop-enter .aii-rate-pop, .aii-rate-layer.aii-pop-exit .aii-rate-pop { opacity: 0; transform: translateY(-4px) scale(.96); }
.aii-rate-layer.aii-pop-enter .aii-pop-up, .aii-rate-layer.aii-pop-exit .aii-pop-up { transform: translateY(4px) scale(.96); }
.aii-rate-layer.aii-pop-exit { pointer-events: none; }
.aii-mail-menu.aii-pop-enter, .aii-mail-menu.aii-pop-exit, .aii-cmp-suggest.aii-pop-enter, .aii-cmp-suggest.aii-pop-exit { opacity: 0; transform: translateY(-4px) scale(.96); }
.aii-cmp-suggest.aii-pop-up.aii-pop-enter, .aii-cmp-suggest.aii-pop-up.aii-pop-exit { transform: translateY(4px) scale(.96); }
.aii-mail-menu.aii-pop-exit, .aii-cmp-suggest.aii-pop-exit { pointer-events: none; }
.aii-rate-title { margin: 0 0 12px; font-size: 15px; }
.aii-rate-pop .aii-draft { margin-top: 12px; }
.aii-rate-pop textarea { width: 100%; box-sizing: border-box; resize: vertical; }
@media (prefers-reduced-motion: reduce) {
  .aii-rate-layer.aii-pop-enter .aii-rate-pop, .aii-rate-layer.aii-pop-exit .aii-rate-pop, .aii-mail-menu.aii-pop-enter, .aii-mail-menu.aii-pop-exit,
  .aii-cmp-suggest.aii-pop-enter, .aii-cmp-suggest.aii-pop-exit { transform: none; }
  .aii-compose .aii-cmp-chip, .aii-cmp-field, .aii-cmp-filelist { transition: opacity .2s ease; }
}

/* „Przepuść przez obecny flow” (aiInbox/mailDialog.js openReplay): the chat
   as it went beside the same words run again — side by side where there is
   room, one under the other on a phone. */
/* Room for both columns, as .debt-modal-wide:has(.ann-form) makes room for its form. */
.debt-modal-wide:has(.aii-replay) { max-width: 1080px; }
.aii-replay { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 24px; margin-top: 8px; }
.aii-replay-col { min-width: 0; }
.aii-replay-col .aii-mail-sec { margin-top: 8px; }

/* A row being run again on today's flow: its mark opens with its height
   (.method-expand) and closes the same way when the replay is done. */
.aii-replay-mark { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent-strong); }
.aii-replay-mark .btn-spinner, .aii-conv-graph .btn-spinner { width: 12px; height: 12px; }
/* Sized (.aii-sized clips): 4px of padding, taken back by the margin, keeps its buttons' focus ring (2px + 2px offset) whole. */
.aii-replay-foot { margin: 8px -4px -4px; padding: 4px; }
.aii-replay-apply { margin-bottom: 10px; }
/* „Wykonaj” done: the hint's size, in the colour of a step done. */
.aii-replay-done { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ok); }

/* ---- a folder's plain mail or thread in the sheet: mail cards (mailDialog.js openPlainMail) ---- */
.aii-mail-msgs { display: flex; flex-direction: column; gap: 10px; }
.aii-mmsg { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; transition: border-color .2s ease; }
.aii-mmsg.open { border-color: var(--accent-line); }
.aii-mmsg-head { width: 100%; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.aii-mmsg-head:hover { background: var(--panel-2); }
.aii-mmsg-from { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aii-mmsg-when { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aii-mmsg-to { margin: 0; padding: 0 14px 8px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.aii-mmsg-body { padding: 0 14px 14px; }
/* „Odpowiedz”, „Odpowiedz wszystkim”, „Przekaż” under a loaded mail (mailDialog.js answerRowHtml). */
.aii-mmsg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.aii-mmsg-acts button { display: inline-flex; align-items: center; gap: 6px; }
.aii-mmsg-acts svg { width: 15px; height: 15px; flex: none; }
/* „AI przygotowało odpowiedź” (mailDialog.js aiReplyOf): the chat reply's row, opening and shutting with its height. */
/* 4px each side inside its clip (.aii-expand-in), taken back by the margin: the button's focus ring stays whole. */
.aii-ai-reply { margin: 0 -4px; }
.aii-ai-reply .aii-chat-reply-row { padding: 12px 4px 4px; }
.aii-mail-star svg { transition: fill .2s ease, color .2s ease; }
.aii-mail-star.on { color: var(--brass); }
.aii-mail-star.on svg { fill: currentColor; }

/* ---- the composer (composer.js): a person's own mail in the sheet ----
   Rows of a mail client — a label, then the field — over the body; „Wyślij”
   pinned at the sheet's foot, the body scrolling under it. Chips (.aii-badge)
   in the case they were typed in: an address is never shouted in capitals. */
/* Its title is one short line: centred against „Zamknij”, not hung from its top. */
.aii-mbx-sheet .aii-mail-dlg:has(.aii-compose) .aii-mail-head { align-items: center; }
.aii-mbx-sheet .aii-mail-dlg:has(.aii-cmp-load) .aii-mail-head { align-items: center; }
.aii-mail-body:has(> .aii-compose, > .aii-cmp-load) { display: flex; flex-direction: column; padding-bottom: 0; scroll-padding-bottom: 72px; }
/* .aii-cmp-load: a draft's skeleton the composer fades in over (composer.js loadInto); once in, it clips no more, so „Wyślij” stays pinned. */
.aii-compose, .aii-cmp-load { flex: 1 0 auto; display: flex; flex-direction: column; }
.aii-cmp-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); transition: border-color .15s ease; }
.aii-cmp-row:focus-within { border-bottom-color: var(--accent-line); }
.aii-compose .aii-cmp-label { flex: none; width: 52px; margin: 0; padding: 7px 0; font-size: 13px; line-height: 20px; color: var(--muted); }
/* Room inside the eased height's clip for a chip's focus ring, taken back by the margin. */
.aii-cmp-field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px; margin: -3px; transition: height .25s ease; }
.aii-cmp-easing { overflow: hidden; }
/* The field takes what a line has left — 48px at least, so it rarely wraps onto an empty line of its own. */
.aii-compose .aii-cmp-input, .aii-compose .aii-cmp-subject { flex: 1 1 48px; min-width: 48px; width: auto; margin: 0; padding: 6px 0; border: 0; border-radius: 0; background: none; font-size: 14px; line-height: 22px; }
.aii-compose .aii-cmp-subject { flex: 1; min-width: 0; }
/* At rest after its chips (composer.js idleNow): no width, the row's gap taken back. */
.aii-compose .aii-cmp-field.aii-cmp-idle > .aii-cmp-input { flex: 0 1 0; min-width: 0; margin-left: -6px; padding-inline: 0; }
.aii-compose .aii-cmp-input:focus, .aii-compose .aii-cmp-subject:focus, .aii-compose .aii-compose-text:focus { box-shadow: none; border-color: transparent; }
.aii-cmp-links { flex: none; display: flex; padding-top: 4px; }
.aii-cmp-link { max-width: 56px; overflow: hidden; padding: 4px 7px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: max-width .22s ease, padding .22s ease, opacity .2s ease, color .15s ease, background .15s ease; }
.aii-cmp-link:hover { filter: none; color: var(--accent-strong); background: var(--panel); }
.aii-cmp-link.aii-gone { max-width: 0; padding-inline: 0; opacity: 0; pointer-events: none; }
.aii-compose .aii-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 2px 3px 2px 10px; font-size: 13px; font-weight: 500; line-height: 22px; letter-spacing: 0; text-transform: none; color: var(--text); background: var(--panel-2);
  transition: width .25s ease, padding .25s ease, margin .25s ease, opacity .2s ease, color .2s ease, background .2s ease, border-color .2s ease; }
.aii-cmp-chip-t, .aii-cmp-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aii-cmp-file-size { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aii-compose .aii-cmp-chip.bad { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
/* Growing in from nothing, or going: no width, no padding, and the row's gap taken back. */
.aii-compose .aii-cmp-chip.aii-shut { padding-left: 0; padding-right: 0; margin-right: -6px; opacity: 0; }
.aii-cmp-chip.aii-gone { pointer-events: none; }
.aii-cmp-x { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); }
.aii-cmp-x:hover { filter: none; background: var(--panel); color: var(--text); }
.aii-cmp-x svg { width: 13px; height: 13px; }
.aii-compose .aii-compose-text { display: block; width: 100%; min-height: 15em; margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; line-height: 1.5; resize: none; overflow: hidden; }
/* The inbox's signature under the text, read-only: the server adds it on send (composer.js). */
/* A fold (.method-expand), shut while it is fetched; it opens, fading in, when it is here. */
.aii-cmp-sig { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; transition: grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease; }
.aii-cmp-sig:not(.open) { margin-top: 0; }
.aii-cmp-sig-rule { color: var(--muted); white-space: pre; }
.aii-cmp-sig-body { max-width: 100%; overflow-x: auto; opacity: 0; transition: opacity .25s ease; }
.aii-cmp-sig.open .aii-cmp-sig-body { opacity: 1; }
.aii-cmp-sig-body img { max-width: 100%; height: auto; }
.aii-cmp-sig-body table { max-width: 100%; }
.aii-cmp-sig-body a { color: var(--accent); }
.aii-cmp-files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 12px 0; }
.aii-cmp-attach { display: inline-flex; align-items: center; gap: 6px; }
.aii-cmp-attach svg { width: 15px; height: 15px; }
.aii-cmp-filelist { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px; margin: -3px; transition: height .25s ease; }
.aii-cmp-filelist:empty { display: none; }
.aii-compose-foot { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: auto -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--solid); }
.aii-cmp-send { display: inline-flex; align-items: center; gap: 6px; }
/* „Zapisywanie…” / „Zapisano w Szkicach” after the buttons: they keep their place and size,
   it takes the room left and ends in an ellipsis on a phone. */
.aii-cmp-status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.aii-compose-foot > button { flex: none; }
/* The address list: the popovers' look (.aii-mail-menu), its rows the menu's. */
.aii-cmp-suggest { z-index: 2; padding: 0; overflow-y: auto; transform-origin: top left; }
.aii-cmp-suggest.aii-pop-up { transform-origin: bottom left; }
.aii-cmp-suggest .aii-menu-item { cursor: pointer; }
.aii-cmp-suggest .aii-menu-item[aria-selected="true"] { background: var(--panel); }
.aii-cmp-opt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „Opróżnij kosz” over Kosz's list, at its right edge (mailFolders.js). */
.aii-mbx-trashbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }