/* 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: #77796e;
  --line: #d6d5cb; --olive: #666e4e; --sage: #dfe4d4; --sand: #ebe1cf; --blue: #dce3e7; --rose: #e8dcd5;
  --danger: #9a4b3c; --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: .10; 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 */
.shell { height: 100dvh; display: grid; grid-template-columns: 224px minmax(0, 1fr); overflow: hidden; }
.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 26px 17px 16px; z-index: 35; min-height: 0; overflow: auto; }
.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); }
.new-chat { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--surface); border-radius: 7px; padding: 11px 13px; margin: 0 0 11px; font-size: 12px; width: 100%; text-align: left; }
.new-chat:hover { background: #44483c; box-shadow: 0 4px 14px #292b2715; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 6px; text-align: left; position: relative; color: #64675b; font-size: 12px; width: 100%; }
.nav-item:hover { background: #dcded150; color: var(--ink); }
.nav-item.active { background: #d9ddce; color: #454c37; font-weight: 550; }
.nav-item.active:before { content: ''; position: absolute; left: -17px; height: 20px; width: 3px; background: var(--olive); border-radius: 0 3px 3px 0; }
.nav-item .soon { margin-left: auto; font-size: 9px; color: #9a9d8c; }
.nav-count { margin-left: auto; font-size: 10px; min-width: 19px; height: 18px; border-radius: 4px; display: grid; place-items: center; background: #d5dcca; color: #56623f; }
.nav-heading { margin: 19px 12px 6px; }
.nav-separator { height: 1px; background: var(--line); margin: 17px 10px; }
.sidebar-bottom { margin-top: auto; padding-top: 25px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.sidebar-bottom .who { flex: 1; min-width: 0; }
.sidebar-bottom strong { display: block; font-size: 12px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom small { display: block; font-size: 10px; color: var(--muted); }
.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: #5b6546; border: 2px solid var(--paper); }
.main-wrap { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 67px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.breadcrumbs { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.breadcrumbs .current { color: var(--ink); }
.breadcrumbs .slash { color: #b2b2a7; }
.page { flex: 1; min-width: 0; overflow: auto; position: relative; scrollbar-width: thin; scrollbar-color: #d1d2c5 transparent; }
.content { max-width: 920px; margin: 0 auto; padding: 36px 42px 60px; }
.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.olive { background: #dce4d0; border-color: #c5d0b4; color: #5f6e48; }
.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: #666f50; 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: #8f9880; }
.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: #8d7b57; }
.pill.rose { background: var(--rose); color: #95695f; }
.pill.blue { background: var(--blue); color: #617684; }
.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: #91947f; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: #5e6b45; border-color: #717f52; }
.toast-root { position: fixed; bottom: 24px; left: calc(50% + 112px); transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.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; }

/* 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; }
.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; }
.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); }
.ai-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.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-left: 18px; display: grid; gap: 6px; font-size: 12px; }

/* Chat */
.chat-view { height: 100%; display: flex; flex-direction: column; max-width: 850px; margin: 0 auto; padding: 0 40px; }
.chat-scroll { flex: 1; overflow: auto; padding: 28px 0 25px; scrollbar-width: thin; scrollbar-color: #d7deca transparent; }
.chat-hero { font: 52px/1.1 var(--serif); letter-spacing: -1px; text-align: center; margin: 12vh 0 30px; }
.chat-hero .accent { color: var(--olive); }
.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-author img { height: 20px; width: 20px; }
.chat-author .meta { margin-left: auto; font-size: 10px; font-weight: 400; color: #a4ac95; }
.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); }
.composer { background: var(--surface); border: 1px solid #cbcdbd; border-radius: 12px; padding: 14px 15px 10px; box-shadow: 0 4px 18px #393b2910; margin-bottom: 15px; flex-shrink: 0; }
.composer:focus-within { border-color: #939f78; box-shadow: 0 5px 24px #51583712; }
.composer textarea { border: 0; background: none; width: 100%; height: 48px; max-height: 144px; resize: none; display: block; padding: 1px 0; color: #484c3d; font-size: 16px; line-height: 1.6; overflow-y: auto; }
.composer textarea::placeholder { color: #9a9d8c; }
.composer-bottom { display: flex; align-items: center; gap: 8px; }
.composer-spacer { flex: 1; }
.send-button { width: 30px; height: 30px; background: var(--ink); color: #fff; border-radius: 7px; display: grid; place-items: center; }
.send-button:hover { background: #66704e; }
.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 .buttons { display: flex; 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) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 242px; transform: translateX(-100%); transition: transform .4s var(--ease); }
  .shell.nav-open .sidebar { transform: translateX(0); }
  .topbar { height: 59px; padding: 0 16px; }
  .content { padding: 24px 18px 40px; }
  .chat-view { padding: 0 16px; }
  .form.inline { grid-template-columns: 1fr; }
  .toast-root { left: 50%; }
}
@media (min-width: 761px) { .menu-button { display: none; } }
.table + .section-card { margin-top: 22px; }
.chat-tools { margin: 0 0 8px; }
.chat-message.assistant { max-width: 100%; }
.composer textarea:focus-visible { box-shadow: none; }
.stats { margin-bottom: 16px; }
.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 */
.connector { margin-bottom: 10px; }
.connector-name { margin: 0 0 4px; font-size: 16px; }
.connector .actions { display: flex; gap: 8px; margin-top: 8px; }
.connector-link { word-break: break-all; }
.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; }

/* Przepływy (task C) */
.flow-card h3 { font: 22px var(--serif); margin-bottom: 6px; }
.flow-badges { margin-bottom: 8px; }
.flow-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; font-size: 12px; }
.flow-meta > div { display: grid; gap: 3px; }
.flow-meta dd { margin: 0; }
.fires { list-style: none; padding: 0; display: grid; gap: 6px; margin: 4px 0 12px; }
.fire { font-size: 12px; }
.flow-detail { margin-bottom: 12px; }
.flow-detail .instructions { white-space: pre-wrap; font-size: 12px; margin-top: 4px; }
.flow-actions { flex-wrap: wrap; }

/* Rozmowa (task #8): the old product's chat (engine/public, demo.quartio.ai). */
.chat-layout { display: flex; height: 100%; min-height: 0; position: relative; }
.chat-layout .chat-view { flex: 1; min-width: 0; }
.chat-bar { display: flex; justify-content: flex-start; padding: 10px 0 0; flex-shrink: 0; }
.history-toggle { color: var(--muted); }
.history-toggle:hover, .history-toggle[aria-expanded=true] { background: #d9ddce; color: var(--ink); }
.history-panel { flex: 0 0 0; width: 0; min-width: 0; background: var(--sidebar); overflow: hidden; visibility: hidden; transition: flex-basis .35s var(--ease), width .35s var(--ease), visibility 0s .35s; }
.history-panel.open { flex-basis: 248px; width: 248px; visibility: visible; transition: flex-basis .35s var(--ease), width .35s var(--ease), visibility 0s; }
.history-panel-inner { height: 100%; width: 248px; padding: 19px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.history-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 15px; gap: 10px; }
.history-panel-head h2 { font-family: var(--sans); font-size: 13px; font-weight: 550; }
.history-search { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #eeece580; }
.history-search:focus-within { border-color: #96a17e; }
.history-search input { border: 0; background: none; font-size: 12px; width: 100%; min-width: 0; }
.history-search input:focus-visible { box-shadow: none; }
.history-recent { padding-top: 12px; min-height: 0; display: flex; flex-direction: column; }
.history-recent > h3 { padding: 15px 9px 12px; border-top: 1px solid var(--line); font-size: 9px; }
.chat-history { overflow: auto; min-height: 0; scrollbar-width: thin; }
.history-link { display: flex; align-items: center; gap: 8px; padding: 10px 9px; font-size: 12px; color: #77796c; border-radius: 5px; white-space: nowrap; overflow: hidden; }
.history-link span { overflow: hidden; text-overflow: ellipsis; }
.history-link:hover, .history-link.active { background: #dbddd2; color: var(--ink); }
.history-empty { font-size: 12px; color: var(--muted); padding: 12px 9px 20px; line-height: 1.8; }
.recent-chats { max-width: 560px; margin: 0 auto; }
.recent-list { display: flex; flex-direction: column; }
.recent-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.recent-row:last-child { border-bottom: 0; }
.recent-row .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row:hover { color: var(--olive); }
.chat-turn.user { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0 0 26px; }
.chat-turn.user .chat-message.user { margin: 0; }
.chat-author .symbol { height: 21px; width: 21px; }
.chat-author .time { margin-left: auto; font-size: 10px; font-weight: 400; color: #a4ac95; }
.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; }
.source-link { display: inline-block; font-size: 9px; line-height: 1.6; margin: 0 2px 0 3px; border: 1px solid #cad7b8; background: #e3ead9; border-radius: 3px; padding: 0 4px; color: #6f855a !important; text-decoration: none !important; vertical-align: 2px; cursor: pointer; }
.source-link:hover { background: #d4dfc4; }
.chat-citations { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.chat-citations a, .chat-citations span { font-size: 11px; border: 1px solid #cdd7be; border-radius: 4px; background: #e9eedd; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; color: #5f6d4c; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-citations a:hover { background: #dfe7d0; }
.chat-citations .n { font-size: 9px; color: #8a9a74; }
.chat-steps { margin: 0 0 8px; }
.chat-tool .icon { color: #9cab87; }
/* A step: a turning mark while it runs, then ✓ or – (the old product's tool activity). */
.chat-tool .mark { display: inline-flex; width: 14px; justify-content: center; color: #9cab87; font-size: 11px; }
.chat-tool.failed .mark { color: var(--muted); }
.chat-tool .spinner { width: 9px; height: 9px; border: 1.5px solid var(--line); border-top-color: #8b9c74; border-radius: 50%; animation: rotate .8s linear infinite; }
.thinking .elapsed { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.chat-answer li.task { list-style: none; margin-left: -1.1em; }
.card-error { margin: 8px 0 0; font-size: 12px; }
.new-messages { align-self: center; margin: -42px auto 8px; position: relative; z-index: 2; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 14px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.chat-work summary { font-size: 11px; color: var(--muted); cursor: pointer; margin-bottom: 4px; }
.chat-actions { display: flex; gap: 5px; margin-top: 6px; }
.chat-actions .icon-button { color: #9cab87; width: 27px; height: 27px; }
.chat-actions .icon { width: 14px; height: 14px; }
.thinking { color: #8b9c74; font-size: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.thinking .symbol { height: 18px; width: 18px; animation: rotate 5s linear infinite; }
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots i { height: 3px; width: 3px; background: #95a77c; border-radius: 50%; animation: dot 1.2s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.attachment-row { display: flex; gap: 8px; flex-wrap: wrap; }
.composer-files:not(:empty) { margin-bottom: 10px; }
.attachment { border: 1px solid #d4d8c8; border-radius: 6px; display: flex; gap: 9px; align-items: center; padding: 7px 10px; text-align: left; background: #f2f2e9; max-width: 260px; position: relative; }
a.attachment:hover { border-color: #b8c1a4; }
.attachment.uploading { opacity: .6; }
.attachment-text { display: flex; flex-direction: column; min-width: 0; }
.attachment strong { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment small { font-size: 10px; color: #929a80; }
.attachment-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #e3e5da; }
.file-icon { width: 30px; height: 36px; border: 1px solid #c9ceba; border-radius: 3px; display: grid; place-items: center; font-size: 8px; font-weight: 600; color: #7d8a66; background: var(--surface); flex-shrink: 0; }
.attachment-remove { width: 22px; height: 22px; margin-left: 2px; }
.send-button.stop { background: #66704e; }
.chat-view.dropping .composer { border-color: var(--olive); box-shadow: 0 0 0 3px #7f89652b; }
@media (max-width: 900px) {
  .history-panel { position: absolute; inset: 0 auto 0 0; z-index: 30; }
}

/* 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; }
.problems { border-color: #e0c4ba; }

/* Maszyna: 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; }
/* Wiedza (task #8): the old product's encyclopedia (engine/public wiki, knowledge.css). */
.wk { --wk-muted: #64675b; font-size: 15px; line-height: 1.65; max-width: 1240px; margin: 0 auto; padding: 22px 42px 40px; color: var(--ink); }
.wk a { color: var(--olive); }
.wk a:hover { text-decoration: underline; }
.wk h1, .wk h2 { font-family: var(--serif); font-weight: 400; line-height: 1.3; color: var(--ink); }
.wk h1 { font-size: 42px; margin: 6px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.wk h2 { font-size: 28px; border-bottom: 1px solid var(--line); padding-bottom: 5px; margin: 28px 0 12px; }
.wk h3 { font: 600 16px/1.45 var(--sans); margin: 16px 0 7px; }
.wk p { margin: 10px 0 15px; }
.wk ul, .wk ol { padding-left: 26px; margin: 10px 0 18px; }
.wk li { margin: 6px 0; }
.wk strong { font-weight: 700; }
.wk-page-heading > p:not(.eyebrow) { color: var(--wk-muted); }
.wk-title-row { display: flex; align-items: flex-end; gap: 20px; border-bottom: 1px solid var(--line); }
.wk-title-row h1 { border: 0; flex: 1; margin-bottom: 0; }
.wk-title-row > a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 14px; white-space: nowrap; }
.wk-search-row { display: flex; align-items: center; gap: 24px; margin: 18px 0 22px; }
.wk-search-row > a { font-size: 13px; white-space: nowrap; }
#wk-search { display: flex; flex: 1; max-width: 860px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; gap: 8px; }
#wk-search input { flex: 1; min-width: 80px; border: 0; background: none; font: 14px var(--sans); }
#wk-search input:focus-visible { box-shadow: none; }
#wk-search button, .wk-editor button { background: var(--olive); color: #fff; border-radius: 7px; padding: 7px 14px; font-size: 12px; }
.wk-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 27px; overflow: auto; }
.wk-tabs a { padding: 9px 0 10px; white-space: nowrap; font-size: 14px; border-bottom: 2px solid transparent; color: #64675b; }
.wk-tabs a:hover { text-decoration: none; color: var(--ink); }
.wk-tabs a[aria-current] { color: var(--ink); border-color: var(--ink); }
.wk-tabs span { font-size: 11px; margin-left: 4px; background: var(--sage); border-radius: 7px; padding: 1px 5px; }
.wk-portal-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, 1fr); gap: 42px; margin: 10px 0 30px; }
.wk-feature > h2 { margin: 6px 0 12px; border: 0; font-size: 29px; }
.wk-feature > h2 a { color: var(--ink); }
.wk-small-heading { font-size: 12px; color: var(--wk-muted); letter-spacing: .7px; text-transform: uppercase; }
.wk-latest { border-left: 1px solid var(--line); padding-left: 27px; font-size: 14px; }
.wk-latest h2 { font: 600 15px var(--sans); border: 0; margin: 0 0 18px; }
.wk-change { border-bottom: 1px solid var(--line); padding: 4px 0 6px; }
.wk-change p { margin: 4px 0; }
.wk-date { font-size: 12px; color: var(--wk-muted); }
.wk-directory h2 { font-size: 22px; }
.wk-directory ul { list-style: none; padding: 0; }
.wk-directory li { margin-bottom: 16px; }
.wk-directory li > a { font-size: 16px; }
.wk-directory li p { font-size: 13px; line-height: 1.6; color: var(--wk-muted); margin: 3px 0; }
.wk-directory-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.wk-filters { display: flex; gap: 15px; margin: 0 0 20px; }
.wk-filters label { flex: 1; max-width: 420px; }
.wk-filters input, .wk-field input, .wk-field select { width: 100%; height: 36px; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; font: 14px var(--sans); }
.wk-empty { padding: 30px 0; color: var(--wk-muted); }
.wk-breadcrumb { font-size: 12px; color: var(--wk-muted); margin-bottom: 4px !important; }
.wk-article-tabs { display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); font-size: 13px; margin-bottom: 18px; }
.wk-article-tabs > * { padding: 5px 0 9px; }
.wk-article-tabs span { border-bottom: 2px solid var(--ink); }
.wk-reading-layout { display: grid; grid-template-columns: 165px minmax(0, 940px); gap: 40px; }
.wk-toc { position: sticky; top: 10px; align-self: start; font-size: 13px; line-height: 1.45; max-height: calc(100vh - 160px); overflow: auto; padding: 4px 0; }
.wk-toc strong { display: block; border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 8px; }
.wk-toc a { display: block; margin: 12px 0; color: #64675b; }
.wk-toc a.sub { padding-left: 12px; font-size: 12px; }
.wk-article { min-width: 0; font-size: 15px; }
.wk-subtitle { font-size: 12px; color: var(--wk-muted); margin: 0 0 14px !important; }
.wk-lede { font-size: 16px; color: #4f5741; }
.wk-article h2[id], .wk-article h3[id] { scroll-margin-top: 15px; }
.wk-article blockquote { margin: 20px 24px; padding-left: 17px; border-left: 3px solid var(--line); }
.wk-article .table-wrap { overflow: auto; }
.wk-article .md-table th { background: var(--sage); }
.wk-ref { line-height: 0; font-size: 11px; white-space: nowrap; margin-left: 2px; }
.wk-references ol { font-size: 12.5px; line-height: 1.6; }
.wk-references li { margin-bottom: 8px; }
.wk-ref-raw { margin-left: 8px; font-size: 11px; color: var(--wk-muted); }
.wk-article-footer { font-size: 12px; color: var(--wk-muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 30px; }
.wk-cutoff { font-size: 13px; padding: 11px 15px; border-left: 3px solid var(--olive); background: var(--surface); margin: 0 0 20px; }
.wk-table { border-collapse: collapse; font-size: 13px; width: 100%; margin: 6px 0 24px; }
.wk-table td, .wk-table th { border: 1px solid var(--line); padding: 8px 11px; vertical-align: top; text-align: left; background: var(--surface); }
.wk-table tr.current td { background: var(--sage); }
.wk-collection { max-width: 1000px; }
.wk-source-row { display: grid; grid-template-columns: 125px 1fr; gap: 20px; border-top: 1px solid var(--line); padding: 15px 0; }
.wk-source-type { font-size: 12px; font-weight: 600; color: var(--wk-muted); text-transform: capitalize; }
.wk-source-row h3 { font-size: 16px; font-weight: 400; margin: 0 0 4px; }
.wk-source-row small { color: var(--wk-muted); font-size: 11px; overflow-wrap: anywhere; }
.wk-search-result { border-bottom: 1px solid var(--line); padding: 5px 0 12px; }
.wk-search-result h3 { font-weight: 400; font-size: 18px; margin-bottom: 4px; }
.wk-passage { font-size: 14px; color: #4f5741; }
/* The old product's reading measure, history by day and line-numbered differences. */
.wk-article p, .wk-article li, .wk-article blockquote { max-width: 70ch; }
.wk-mobile-toc { display: none; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--surface); font-size: 13px; }
.wk-mobile-toc a { display: block; margin: 6px 0; color: #64675b; }
.wk-history-day { font-size: 18px; margin: 24px 0 6px; }
.wk-history-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wk-history-row h3 { font-size: 15px; margin: 0 0 4px; }
.wk-history-row p { margin: 0 0 4px; }
.wk-history-row time, .wk-history-row small { color: var(--wk-muted); }
.wk-diff-table { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-collapse: collapse; width: 100%; background: var(--surface); }
.wk-diff-table th { font: 12px var(--sans, inherit); color: var(--wk-muted); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.wk-diff-table td.n { width: 44px; text-align: right; padding: 0 8px; color: var(--wk-muted); vertical-align: top; }
.wk-diff-row code { white-space: pre-wrap; padding: 0 8px; background: none; }
.wk-diff-row code b { display: inline-block; width: 14px; font-weight: 400; }
.wk-diff-add { background: #e1ecd2; color: #3f5a28; }
.wk-diff-remove { background: #f1e1db; color: #8a3f31; }
.wk-diff-collapsed td { padding: 4px 12px; color: var(--wk-muted); background: var(--paper); }
.wk-uncited, .wk-draft { border: 1px solid #e0c4ba; background: #f7ece7; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 0 0 14px; }
.wk-draft { border-color: var(--line); background: var(--surface); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wk-draft p, .wk-uncited p { margin: 0 0 6px; }
.wk-uncited ul { margin: 0 0 8px; padding-left: 18px; }
.wk-cite-pick button { margin: 2px 4px 2px 0; }
.wk-editor { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.wk-editor-row { display: grid; grid-template-columns: 1fr 220px; gap: 14px; }
.wk-facts-edit { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* The kind's facts under the lede, as the old product's infobox. */
.wk-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; max-width: 520px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.wk-facts dt { color: var(--wk-muted); }
.wk-facts dd { margin: 0; }
.wk-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--wk-muted); }
.wk-editor-body { width: 100%; min-height: 420px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: var(--surface); resize: vertical; }
.wk-preview { border: 1px solid var(--line); border-radius: 7px; padding: 6px 20px; background: var(--surface); min-height: 200px; }
.wk-editor-tabs { display: flex; gap: 8px; }
.wk-editor-tabs button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.wk-editor-actions { display: flex; gap: 16px; align-items: center; }
.wk-editor button.danger { background: none; color: var(--danger); border: 1px solid #e0c4ba; }
.wk-graph-wrap { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: auto; max-height: 78vh; }
.wk-graph { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.wk-graph.local { max-width: 560px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.wk-graph line { stroke: #cfd3c3; stroke-width: 1; }
.wk-graph text { font: 11px var(--sans); fill: #4f5741; }
.wk-node circle { fill: var(--olive); stroke: var(--surface); stroke-width: 1.5; }
.wk-node.current circle { fill: var(--ink); }
.wk-graph a:hover text { fill: var(--ink); text-decoration: underline; }
.t-client circle, .wk-legend .t-client i { fill: #7c8a5d; background: #7c8a5d; }
.t-person circle, .wk-legend .t-person i { fill: #a07c5b; background: #a07c5b; }
.t-project circle, .wk-legend .t-project i { fill: #5f7f86; background: #5f7f86; }
.t-organization circle, .wk-legend .t-organization i { fill: #8a6f8e; background: #8a6f8e; }
.t-process circle, .wk-legend .t-process i { fill: #b19045; background: #b19045; }
.t-product circle, .wk-legend .t-product i { fill: #6d8c6a; background: #6d8c6a; }
.t-company circle, .wk-legend .t-company i { fill: #292b27; background: #292b27; }
.t-meeting circle, .wk-legend .t-meeting i, .t-topic circle, .wk-legend .t-topic i { fill: #8d8f84; background: #8d8f84; }
.wk-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--wk-muted); }
.wk-legend span { display: inline-flex; gap: 6px; align-items: center; }
.wk-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (max-width: 900px) {
  .wk-mobile-toc { display: block; }
  .wk { padding: 16px 18px; }
  .wk-reading-layout, .wk-portal-columns { grid-template-columns: 1fr; }
  .wk-toc { display: none; }
  .wk-latest { border-left: 0; padding-left: 0; }
  .wk-directory-columns { grid-template-columns: 1fr; }
  .wk-editor-row { grid-template-columns: 1fr; }
  .wk h1 { font-size: 32px; }
}

/* Interfaces (ADR 0025): the page in its sandboxed frame, button runs over it. */
.interface-page { position: relative; height: 100%; }
.interface-box { height: 100%; }
.interface-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.run-layer { position: absolute; right: 22px; bottom: 22px; display: grid; gap: 10px; width: min(360px, calc(100% - 44px)); z-index: 5; }
.run-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: 0 8px 24px #292b2718; font-size: 12px; }
.run-card.waiting { border-top: 2px solid var(--olive); }
.run-card p { margin-top: 6px; color: #5d6052; }
.run-card-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Kreator (ADR 0025): the list, and one interface with its chat beside its live preview. */
.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.kr-new textarea, .kr-new input, .kr textarea, .kr input, .kr select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; }
.kr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kr-card { display: block; color: inherit; }
.kr-card:hover { border-color: #b9c2a6; }
.kr-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.kr-card-head .muted { margin-left: auto; }
.kr-missing { color: var(--danger); }
.kr { height: 100%; display: flex; flex-direction: column; min-height: 0; padding: 18px 26px 0; }
.kr-head { flex-shrink: 0; margin-bottom: 12px; }
.kr-title-row { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.kr-title { font: 30px var(--serif); letter-spacing: -.4px; }
.kr-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; }
.kr-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); padding-right: 18px; }
.kr-log { flex: 1; overflow: auto; padding: 4px 4px 14px 0; scrollbar-width: thin; }
.kr-log .chat-message.user { max-width: 100%; }
.kr-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 18px; border-top: 1px solid var(--line); }
.kr-compose textarea { flex: 1; resize: vertical; min-height: 60px; }
.kr-side { display: flex; flex-direction: column; min-height: 0; }
.kr-tabs { flex-shrink: 0; margin-bottom: 12px; }
.kr-pane { flex: 1; min-height: 0; overflow: auto; padding-bottom: 18px; }
.kr-preview { display: flex; flex-direction: column; overflow: hidden; }
.kr-preview .interface-page { flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.kr-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.kr-frame { height: 100%; }
.kr-dataset .tiny, .kr-version .tiny { margin-top: 5px; }
.kr-missing-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.kr-json { white-space: pre-wrap; word-break: break-word; font-size: 11px; background: var(--surface); border-radius: 6px; padding: 8px 10px; max-height: 320px; overflow: auto; margin-top: 8px; }
.kr-row { display: flex; gap: 10px; align-items: center; }
.kr-row input { flex: 1; }
@media (max-width: 1100px) { .kr-grid { grid-template-columns: 1fr; } .kr-chat { border-right: 0; padding-right: 0; max-height: 50vh; } }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; border-radius: 4px; line-height: 1.5; padding: 2px 7px; background: #e3e6da; color: #7c826e; white-space: nowrap; }
.tag.ok { background: #dbe5cf; color: #708456; }
.tag.warn { background: #e9e1d1; color: #9a8056; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.kr-new .field { margin-bottom: 10px; }