/* Quartio panels. Tokens, layout and components ported from the old product's design
   (engine/public, as served on demo.quartio.ai): paper colours, Libre Caslon Display headings,
   DM Sans text, the sidebar with the wordmark, "Nowa rozmowa", navigation, the user at the
   bottom. No inline styles anywhere (the Content Security Policy forbids them). */

@font-face { font-family: Caslon; src: url('/assets/fonts/libre-caslon-display.ttf') format('truetype'); font-display: swap; font-weight: 400; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans.ttf') format('truetype'); font-display: swap; font-weight: 100 900; }

:root {
  --paper: #eeece5; --sidebar: #e7e5dc; --surface: #f8f7f1; --ink: #292b27; --muted: #63655c; /* text: WCAG AA on every surface (ADR 0061) */
  --line: #d6d5cb; --olive: #60684a; --sage: #dfe4d4; --sand: #ebe1cf; --blue: #dce3e7; --rose: #e8dcd5;
  --danger: #8f4638; --danger-bg: #f1e1db;
  --serif: Caslon, Georgia, serif; --sans: 'DM Sans', Arial, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 13px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body:before { content: ''; position: fixed; inset: 0; background: url('/assets/paper.svg'); opacity: .06; pointer-events: none; z-index: 999; mix-blend-mode: multiply; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; transition: background .2s, color .2s, box-shadow .2s, transform .25s var(--ease); }
button:active { transform: scale(.975); }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
input:focus, textarea:focus, select:focus { outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 2px #7f89652b; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
::selection { background: #d0d6c2; }
svg { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.icon { width: 18px; height: 18px; stroke-width: 1.55; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hidden { display: none !important; }

/* Shell */
.wordmark { display: flex; align-items: center; gap: 9px; padding: 0 10px 22px; font: 32px/1 var(--serif); letter-spacing: -1.15px; text-align: left; }
.wordmark img { width: 26px; height: 26px; }
.wordmark .dot { color: var(--olive); }
.nav-item .soon { margin-left: auto; font-size: 9px; color: #9a9d8c; }
.avatar { height: 31px; width: 31px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; background: #d5ddc6; color: #586244; border: 2px solid var(--paper); }
.page { flex: 1; min-width: 0; overflow: auto; position: relative; scrollbar-width: thin; scrollbar-color: #d1d2c5 transparent; }
.page-title { font-size: 38px; letter-spacing: -.6px; margin-bottom: 6px; }
.page-lead { color: var(--muted); margin-bottom: 28px; }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 6px; flex-shrink: 0; color: #64675b; }
.icon-button:hover { background: #e0e2d5; }

/* Components */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; white-space: nowrap; background: transparent; }
.btn:hover { background: #e3e5d9; border-color: #c0c5b1; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.dark:hover { background: #4f5b3d; }
.btn.danger { color: var(--danger); border-color: #e0c4ba; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { padding: 5px 9px; font-size: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: var(--olive); font-size: 11px; text-align: left; }
.text-link:hover { color: #303b20; }
.section-card { border: 1px solid #d2d8c5; border-radius: 7px; padding: 20px; background: #f2f3e948; margin-bottom: 22px; }
.section-card h2 { font: 25px var(--serif); margin-bottom: 14px; letter-spacing: -.3px; }
.section-card p + p { margin-top: 8px; }
.empty-state { text-align: center; padding: 55px 15px; color: var(--muted); }
.empty-state h3 { font: 28px var(--serif); margin-bottom: 9px; color: #768466; }
.empty-state p { font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: #dfe4d4; color: #56623f; }
.pill.sand { background: var(--sand); color: #6c5e43; }
.pill.rose { background: var(--rose); color: #77544c; }
.pill.blue { background: var(--blue); color: #51626e; }
.tabs { display: flex; gap: 23px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow: auto; scrollbar-width: none; }
.tab { padding: 10px 0 12px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: #5e6b45; border-color: #717f52; }
/* As wide as its words (left: 50% alone would hold it to the half of the screen right of its
   middle), at most 560 px and within the page area's margins. */
.toast-root { position: fixed; bottom: 24px; left: calc(50% + 112px); transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: min(560px, calc(100vw - 256px)); }
.toast { background: #333b2a; color: #edf2e1; border: 1px solid #566445; padding: 12px 17px; border-radius: 8px; box-shadow: 0 8px 30px #2b39272b; font-size: 12px; }
.toast.error { background: #4a2c25; border-color: #7b4436; }
.toast.toast-action { display: flex; align-items: center; gap: 16px; }
.toast-button { background: none; border: 0; padding: 4px 2px; color: #edf2e1; font: 600 12px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast-button:hover { color: #ffffff; }
.toast-button:disabled { opacity: .6; cursor: default; }

/* Forms and tables */
.form { display: grid; gap: 14px; }
.form.inline { grid-template-columns: 1fr 160px auto; align-items: end; }
.field { display: grid; gap: 5px; font-size: 11px; color: var(--muted); }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid #cbcdbd; border-radius: 6px; padding: 9px 11px; font-size: 13px; color: var(--ink); }
.check { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.error-text { color: var(--danger); font-size: 12px; min-height: 1em; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { text-align: left; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td.actions { text-align: right; white-space: nowrap; }
/* An in-page question (dom.js questions()): its sentence wraps, even in a table's actions. */
.ask > [role=alert] { white-space: normal; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.link-box { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px dashed #b9c0a6; border-radius: 6px; padding: 10px 12px; margin-top: 12px; font-size: 12px; word-break: break-all; }
.switch { display: flex; align-items: center; gap: 12px; }
/* A switch with its state in words (freeze, operator access): the words take the room left, so
   the button stays under the pointer whatever they say. */
.toggle-line { display: flex; align-items: center; gap: 12px; }
.toggle-line > :first-child { flex: 1; margin: 0; }
.qr { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 6px; }

/* Sign-in */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid #cbcdbd; border-radius: 12px; padding: 34px 32px; box-shadow: 0 4px 18px #393b2910; }
.auth-card .wordmark { padding: 0 0 22px; }
.auth-card h1 { font-size: 30px; margin-bottom: 6px; }
.auth-card .lead { color: var(--muted); margin-bottom: 22px; }
.consent-scopes { margin: 8px 0 18px; display: grid; gap: 8px; }
.consent-scope { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.consent-scope input { margin-top: 3px; }
.consent-actions { display: flex; gap: 10px; margin: 18px 0 10px; }
.ai-lead { margin: -6px 0 22px; max-width: 680px; }
.ai-address { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.ai-copy { flex: 1 1 260px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: 12px ui-monospace, monospace; color: var(--ink); }
/* The four apps share their rows evenly: four in a row, two by two, or one under another. */
.ai-guide { container-type: inline-size; }
.ai-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
@container (min-width: 1040px) { .ai-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 540px) { .ai-clients { grid-template-columns: 1fr; } }
.ai-client { border: 1px solid var(--line); border-radius: 7px; padding: 14px 16px; background: var(--surface); }
.ai-client h3 { font: 18px var(--serif); margin-bottom: 8px; }
.ai-client ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12px; }

/* Kreator's chat (builder.js); Rozmowa's own look is in chat.css. */
.chat-message { margin: 0 0 26px; }
.chat-message.user { max-width: 86%; margin-left: auto; background: #e0e5d5; border: 1px solid #d4ddc5; border-radius: 10px 10px 2px 10px; padding: 13px 16px; font-size: 13px; color: #5e6d4a; white-space: pre-wrap; width: fit-content; }
.chat-author { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 11px; font-weight: 550; }
.chat-answer { font-size: 13px; line-height: 1.85; color: #4f5741; white-space: pre-wrap; }
.chat-tool { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.chat-tool.failed { color: var(--danger); }
.confirm-card { border: 1px solid #d9c9a8; background: #f5efe2; border-radius: 9px; padding: 14px 16px; margin: 10px 0 18px; }
.confirm-card .what { font-size: 13px; color: var(--ink); margin: 6px 0 12px; }
.confirm-card .move-kind { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
.confirm-card details { margin: 0 0 12px; font-size: 12.5px; }
.confirm-card .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-card.decided { opacity: .7; }
.confirm-card .args { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }
.confirm-card pre { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; background: var(--surface); border-radius: 6px; padding: 6px 9px; margin: 4px 0 0; max-height: 160px; overflow: auto; }
.confirm-card pre.args { margin: -6px 0 12px; }

/* Phones */
@media (max-width: 760px) {
  .form.inline { grid-template-columns: 1fr; }
  .toast-root { left: 50%; max-width: calc(100vw - 32px); }
}
.table + .section-card { margin-top: 22px; }
.chat-tools { margin: 0 0 8px; }
.chat-message.assistant { max-width: 100%; }
.confirm-card .buttons { align-items: center; }
.confirm-card .reason { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid #cbcdbd; border-radius: 6px; padding: 5px 9px; font-size: 12px; }
/* Połączenia (ADR 0067): one row per system, and the Połącz dialog. */
.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cx-head .page-lead { margin-bottom: 22px; }
.cx-list { display: grid; gap: 10px; }
.cx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cx-mark { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; object-fit: contain; background: var(--sage); color: var(--olive); font: 600 17px var(--sans); }
img.cx-mark { background: #fff; border: 1px solid var(--line); padding: 4px; }
.cx-who { min-width: 0; }
.cx-name { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.cx-account { margin: 1px 0 0; overflow-wrap: anywhere; }
.cx-state { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-todo { margin: 6px 0 0; color: var(--ink); }
.cx-switch { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.cx-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .cx-row { grid-template-columns: 40px minmax(0, 1fr); }
  .cx-switch, .cx-actions { grid-column: 2; justify-content: flex-start; }
}
/* Połącz as a chat (ADR 0075): a popover the size of its conversation, a sheet on a phone. */
.cx-chat { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(440px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px #292b2733; overflow: hidden; }
.cx-chat[hidden], .cx-chat [hidden] { display: none !important; }
.cx-chat--wide { width: min(820px, calc(100vw - 32px)); }
.cx-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 16px; border-bottom: 1px solid var(--line); }
.cx-chat-head .symbol { width: 22px; height: 22px; color: var(--olive); flex-shrink: 0; }
.cx-chat-title { margin: 0; flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.cx-thread { list-style: none; margin: 0; padding: 14px 16px 6px; display: grid; gap: 12px; overflow-y: auto; overscroll-behavior: contain; flex: 0 1 auto; min-height: 0; }
.cx-msg .message-bubble { padding: 0; }
.cx-msg.message-row--assistant .message-heading { margin: 0 0 6px; font-size: 13px; }
.cx-msg.message-row--assistant .message-heading .symbol { width: 20px; height: 20px; }
.cx-msg .message-text { font-size: 14px; line-height: 1.6; }
.cx-msg .message-text p { margin: 0 0 6px; }
.cx-msg .message-text ol, .cx-msg .message-text ul { margin: 4px 0 6px; padding-left: 20px; }
.cx-msg.message-row--user .message-bubble { padding: 9px 13px; }
.cx-msg-title { margin: 0 0 4px; font-weight: 600; color: var(--ink); font-size: 14px; }
.cx-mark-line { display: inline-flex; align-items: center; gap: 6px; }
.cx-mark-line + .cx-mark-line, span + .cx-mark-line { margin-left: 8px; }
.cx-typing-line { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--muted); font-size: 13px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx-chip { display: inline-flex; align-items: center; gap: 7px; }
.btn.small.cx-chip { font-size: 13px; padding: 7px 12px; border-radius: 999px; white-space: normal; text-align: left; max-width: 100%; height: auto; }
.cx-reply, .cx-learning, .cx-field { min-width: 0; }
.cx-chip-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.cx-reply { padding: 8px 16px 14px; display: grid; gap: 8px; }
.cx-reply:empty { display: none; }
.cx-reply .cx-chips { margin-top: 0; }
.cx-field, .cx-secure, .cx-wait, .cx-learning { display: grid; gap: 8px; }
.cx-field-label { margin: 0; font-weight: 600; font-size: 13px; color: var(--ink); }
.cx-composer { display: flex; align-items: center; gap: 6px; border: 1px solid #cbcdbd; border-radius: 10px; padding: 4px 4px 4px 12px; background: #fff; }
.cx-composer:focus-within { outline: 2px solid var(--olive); outline-offset: 1px; }
.cx-chat .cx-composer .cx-input { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; background: transparent; padding: 8px 0; font-size: 16px; color: var(--ink); }
.cx-send { flex-shrink: 0; }
.cx-secure .cx-composer { background: var(--sage); border-color: #b9c0a6; }
.cx-lock { color: var(--olive); flex-shrink: 0; }
.cx-safe { margin: 0; color: var(--muted); }
.cx-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cx-end { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border: 1px solid #b9c0a6; border-radius: 10px; background: #fff; }
.cx-end-who { display: flex; gap: 10px; align-items: center; }
.cx-end-name { margin: 0; font-weight: 600; color: var(--ink); }
.cx-end-who .muted { margin: 0; }
.cx-end-proof { margin: 0; display: flex; gap: 6px; align-items: flex-start; color: var(--ink); }
.cx-end-proof .icon { color: var(--olive); flex-shrink: 0; margin-top: 3px; }
.cx-end-can { margin: 0; color: var(--muted); font-size: 13px; }
.cx-confirm { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--sand); display: grid; gap: 8px; }
.cx-confirm p { margin: 0; color: var(--ink); }
.cx-confirm .actions { display: flex; gap: 8px; justify-content: flex-end; }
.cx-chat .cx-live .live-view { max-height: 52vh; object-fit: contain; }
@media (max-width: 600px) {
  .cx-chat, .cx-chat--wide { right: 0; left: 0; bottom: 0; width: 100%; max-height: 88vh; border-radius: 14px 14px 0 0; border-bottom: 0; }
}
.live-view { display: block; width: 100%; max-width: 1280px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; min-height: 120px; }
.live-screen { position: relative; max-width: 1280px; }
.live-screen:focus-within .live-view { outline: 2px solid var(--olive); }
.live-pad { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; resize: none; opacity: 0; cursor: pointer; caret-color: transparent; font-size: 16px; }
.live-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }

/* Answers in Kreator's chat (task #8's rules, kept for builder.js). */
.chat-answer { white-space: normal; color: #4f5741; font-size: 15.5px; line-height: 1.9; }
.chat-answer > :first-child { margin-top: 0; }
.chat-answer p, .chat-answer ul, .chat-answer ol, .chat-answer pre, .chat-answer blockquote, .chat-answer .table-wrap { margin: 0 0 12px; }
.chat-answer ul, .chat-answer ol { padding-left: 22px; }
.chat-answer li { margin: 3px 0; }
.chat-answer h2, .chat-answer h3 { font: 26px/1.15 var(--serif); color: var(--ink); margin: 6px 0 14px; }
.chat-answer h4, .chat-answer h5, .chat-answer h6 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 8px; }
.chat-answer strong { font-weight: 600; color: #3f4733; }
.chat-answer a { color: var(--olive); text-decoration: underline; text-decoration-color: #b9c2a3; text-underline-offset: 3px; }
.chat-answer code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: #e7e9de; border-radius: 4px; padding: 1px 4px; }
.chat-answer pre { background: #e9ebe1; border-radius: 7px; padding: 10px 12px; overflow: auto; }
.chat-answer pre code { background: none; padding: 0; }
.chat-answer blockquote { border-left: 3px solid #c8d1b6; padding-left: 12px; color: var(--muted); }
.chat-answer .table-wrap { overflow-x: auto; }
.chat-answer .md-table { font-size: 12px; }
.chat-answer hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.chat-tool .icon { color: #9cab87; }
/* A step: a turning mark while it runs, then ✓ or – (the old product's tool activity). */
.chat-answer li.task { list-style: none; margin-left: -1.1em; }

/* Aktywność (task C) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 22px; }
.stat-tile { border: 1px solid #d2d8c5; border-radius: 7px; padding: 12px 14px; background: var(--surface); }
.stat-tile .stat-value { font: 24px var(--serif); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-tile.bad { border-color: #e0c4ba; background: var(--danger-bg); }
.stat-tile.bad .stat-value { color: var(--danger); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.bar-slot { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; min-width: 3px; }
.bar { background: var(--olive); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-slot:hover .bar { background: #4f5b3d; }
.bar-label { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--muted); overflow: hidden; }
.problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 12px; }
.problem-list .problem > p { margin: 0; }
.problems { border-color: #e0c4ba; }

/* Ustawienia → Ogólne: the dev VM says it is not sealed (task F). */
.banner.warn { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }