/* ArqenAI werkruimte — product register of the Arqen design system.
   Paper and Fog carry everything. One hairline. Radius 4. Copper only where the eye must go. */
@import url("arqen/fonts/fonts.css");
@import url("arqen/tokens/colors.css");
@import url("arqen/tokens/typography.css");
@import url("arqen/tokens/spacing.css");
@import url("arqen/tokens/shape.css");
@import url("arqen/tokens/motion.css");

:root {
  --app-sidebar-w: 288px;
  --app-topbar-h: 56px;
  /* The top bar grows by the phone's status bar when the page runs full screen (viewport-fit=cover); 0 elsewhere. */
  --app-topbar-full: calc(var(--app-topbar-h) + env(safe-area-inset-top, 0px));
  --app-thread-w: 760px;
  --app-overlay: rgba(16, 17, 20, 0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--arq-paper);
  color: var(--arq-text-body);
  font-family: var(--arq-font);
  font-size: var(--arq-size-ui);
  line-height: var(--arq-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
a { color: var(--arq-text-strong); text-decoration: underline; text-underline-offset: 3px; transition: color var(--arq-t-base) var(--arq-ease); }
a:hover { color: var(--arq-copper-text); }
:focus-visible { outline: 1px solid var(--arq-focus-ring); outline-offset: 0; }
[hidden] { display: none !important; }
svg.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.icon-sm { width: 16px; height: 16px; }
/* Read by screen readers, never shown. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- type helpers ---------- */
.label { font-size: var(--arq-size-label); font-weight: var(--arq-weight-ui); letter-spacing: var(--arq-track-label); text-transform: uppercase; color: var(--arq-text-muted); }
.label-sm { font-size: var(--arq-size-label-sm); font-weight: var(--arq-weight-ui); letter-spacing: var(--arq-track-label-tight); text-transform: uppercase; color: var(--arq-text-muted); }
.caption { font-size: var(--arq-size-caption); line-height: 1.5; color: var(--arq-text-muted); }
.mono { font-family: var(--arq-font-mono); font-size: var(--arq-size-caption); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- dots ---------- */
.dot { display: inline-block; width: var(--arq-dot); height: var(--arq-dot); border-radius: 50%; background: var(--arq-status-active); flex: none; }
.dot-building { background: var(--arq-status-building); }
.dot-off { background: var(--arq-status-off); }
.dot-hollow { background: transparent; border: 1px solid var(--arq-line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--arq-s1);
  height: var(--arq-control-h); padding: 0 var(--arq-control-px);
  font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); line-height: 1; white-space: nowrap;
  border-radius: var(--arq-radius); border: 1px solid transparent;
  transition: background var(--arq-t-base) var(--arq-ease), color var(--arq-t-base) var(--arq-ease), border-color var(--arq-t-base) var(--arq-ease);
}
.btn-sm { height: var(--arq-control-h-sm); padding: 0 var(--arq-s2); }
a.btn { text-decoration: none; }
.btn-primary { color: var(--arq-text-on-ink); background: var(--arq-ink); border-color: var(--arq-ink); }
.btn-primary:hover { background: var(--arq-graphite); border-color: var(--arq-graphite); }
.btn-primary:active { background: var(--arq-steel); border-color: var(--arq-steel); }
.btn-secondary { color: var(--arq-text-strong); background: var(--arq-paper); border-color: var(--arq-border-strong); }
.btn-secondary:hover { background: var(--arq-fog); }
.btn-secondary:active { background: var(--arq-line); }
.btn-quiet { height: auto; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--arq-copper); border-radius: 0; color: var(--arq-text-strong); }
.btn-quiet:hover { color: var(--arq-copper-text); }
.btn-text { height: auto; padding: 0; border: 0; color: var(--arq-text-muted); font-size: var(--arq-size-caption); font-weight: var(--arq-weight-body); }
.btn-text:hover { color: var(--arq-text-strong); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--arq-text-disabled); background: var(--arq-fog); border-color: var(--arq-border-hairline); cursor: not-allowed; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--arq-radius); color: var(--arq-text-muted); transition: background var(--arq-t-base) var(--arq-ease), color var(--arq-t-base) var(--arq-ease); }
.btn-icon:hover { background: var(--arq-fog); color: var(--arq-text-strong); }
.btn-icon-sm { width: 32px; height: 32px; }
.btn-icon-xs { width: 24px; height: 24px; }
.btn-icon:disabled { color: var(--arq-text-disabled); background: none; cursor: not-allowed; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--arq-s1); }
.field > label { font-size: var(--arq-size-label); font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arq-text-muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: var(--arq-control-h); padding: 0 var(--arq-s2);
  font-size: 15px; color: var(--arq-text-strong); background: var(--arq-paper);
  border: 1px solid var(--arq-border-hairline); border-radius: var(--arq-radius); outline: none;
  transition: border-color var(--arq-t-base) var(--arq-ease);
}
.field textarea { padding: 12px var(--arq-s2); line-height: 1.5; resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--arq-focus-ring); }
.field input::placeholder, .field textarea::placeholder { color: var(--arq-text-disabled); }
.field input:disabled { background: var(--arq-fog); color: var(--arq-text-disabled); }
.field-hint { font-size: var(--arq-size-caption); line-height: 1.5; color: var(--arq-text-muted); }
.field.invalid input, .field.invalid textarea { border-color: var(--arq-copper); }
.field-error { font-size: var(--arq-size-caption); line-height: 1.5; color: var(--arq-copper-text); }
.field-mono input, .field-mono textarea { font-family: var(--arq-font-mono); font-size: 13px; }
.search { position: relative; }
.search input { height: var(--arq-control-h-sm); min-height: 0; padding-left: 40px; font-size: var(--arq-size-ui); }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--arq-text-muted); pointer-events: none; }

.tick { display: grid; grid-template-columns: 16px 1fr; gap: var(--arq-s2); align-items: start; padding: 12px 0; cursor: pointer; }
.tick-box { width: 16px; height: 16px; margin-top: 3px; border-radius: var(--arq-radius-tick); border: 1px solid var(--arq-border-strong); background: transparent; transition: background var(--arq-t-fast) var(--arq-ease), border-color var(--arq-t-fast) var(--arq-ease); }
.tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tick input:checked + .tick-box { background: var(--arq-copper); border-color: var(--arq-copper); }
.tick input:focus-visible + .tick-box { outline: 1px solid var(--arq-focus-ring); }
.tick-title { display: block; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); }
.tick-text { display: block; margin-top: 2px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }

.segmented { display: inline-flex; border: 1px solid var(--arq-border-strong); border-radius: var(--arq-radius-control); overflow: hidden; }
.segmented button { padding: 8px 18px; font-size: var(--arq-size-ui); background: var(--arq-paper); color: var(--arq-text-strong); transition: background var(--arq-t-fast) var(--arq-ease), color var(--arq-t-fast) var(--arq-ease); }
.segmented button[aria-pressed="true"] { background: var(--arq-ink); color: var(--arq-text-on-ink); }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-rows: var(--app-topbar-full) 1fr; grid-template-columns: var(--app-sidebar-w) minmax(0, 1fr); height: 100dvh; transition: grid-template-columns var(--arq-t-base) var(--arq-ease); }
.app[data-sidebar="closed"] { grid-template-columns: 0 minmax(0, 1fr); }
.app[data-sidebar="closed"] .sidebar { visibility: hidden; }

.topbar {
  grid-column: 1 / -1; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2);
  padding: env(safe-area-inset-top, 0px) max(var(--arq-s3), env(safe-area-inset-right, 0px)) 0 max(var(--arq-s3), env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--arq-line);
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--arq-s2); min-width: 0; }
/* On a narrow screen the workspace name and the chat title give way; the controls on either side keep their size. */
.topbar-right, .topbar .btn-icon { flex: none; }
.workspace { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; font-weight: var(--arq-weight-ui); color: var(--arq-copper-text); letter-spacing: -0.01em; white-space: nowrap; }
.workspace-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-title { min-width: 0; flex: 1; text-align: center; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-date { white-space: nowrap; }
.mark { display: block; width: 26px; height: auto; }
/* New chat in the top bar: only on a phone, where the sidebar with its button is a drawer. */
.topbar-new { display: none; }

/* ---------- sidebar ---------- */
.sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--arq-line); background: var(--arq-paper); }
.sidebar-top { padding: var(--arq-s2); display: flex; flex-direction: column; gap: var(--arq-s1); }
.sidebar-top .btn { width: 100%; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--arq-s1) var(--arq-s2) var(--arq-s2); overscroll-behavior: contain; }
.chat-group { margin: var(--arq-s2) 0 4px 12px; }
.chat-item { position: relative; display: flex; align-items: center; height: 40px; padding: 0 4px 0 12px; border-radius: var(--arq-radius); color: var(--arq-text-body); transition: background var(--arq-t-base) var(--arq-ease); }
.chat-item:hover, .chat-item:focus-within { background: var(--arq-fog); }
.chat-item[aria-current="page"] { background: var(--arq-fog); color: var(--arq-text-strong); font-weight: var(--arq-weight-ui); }
.chat-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 100%; display: flex; align-items: center; font-size: var(--arq-size-ui); }
.chat-item-title .dot { margin-right: 10px; }
.chat-item-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An answer that still runs in this chat, on this page or elsewhere: a dot that breathes. */
.chat-running { display: inline-block; flex: none; width: var(--arq-dot); height: var(--arq-dot); margin-right: 10px; border-radius: 50%; background: var(--arq-status-building); animation: app-pulse 1.4s var(--arq-ease) infinite; }
@keyframes app-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.chat-item-menu { opacity: 0; color: var(--arq-text-muted); }
.chat-item:hover .chat-item-menu, .chat-item:focus-within .chat-item-menu, .chat-item[aria-current="page"] .chat-item-menu { opacity: 1; }
.chat-item-rename { flex: 1; min-width: 0; height: 32px; padding: 0 8px; margin-right: 4px; font-size: var(--arq-size-ui); border: 1px solid var(--arq-focus-ring); border-radius: var(--arq-radius); background: var(--arq-paper); outline: none; }
.empty-list { padding: var(--arq-s3) 12px; }
.sidebar-bottom { border-top: 1px solid var(--arq-line); padding: var(--arq-s1) var(--arq-s2) calc(var(--arq-s2) + env(safe-area-inset-bottom, 0px)); }
.side-link { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border-radius: var(--arq-radius); color: var(--arq-text-body); font-size: var(--arq-size-ui); transition: background var(--arq-t-base) var(--arq-ease); }
.side-link:hover { background: var(--arq-fog); color: var(--arq-text-strong); }
.side-link .icon { color: var(--arq-text-muted); }
.side-link-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.baseline { margin: var(--arq-s2) 12px 0; font-size: 10px; font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arq-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- main ---------- */
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--arq-paper); }
.thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.thread-inner { max-width: var(--app-thread-w); margin: 0 auto; padding: var(--arq-s4) var(--arq-s3) var(--arq-s3); display: flex; flex-direction: column; gap: var(--arq-s4); }

.welcome { max-width: 640px; margin: 12vh auto 0; padding: 0 var(--arq-s3); display: flex; flex-direction: column; gap: var(--arq-s3); animation: arq-rise var(--arq-t-slow) var(--arq-ease) both; }
.welcome h1 { margin: 0; font-size: var(--arq-size-h1); font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-title); line-height: var(--arq-lh-title); color: var(--arq-text-strong); max-width: 18ch; }
.welcome p { margin: 0; max-width: var(--arq-measure-lead); font-size: 17px; line-height: var(--arq-lh-lead); color: var(--arq-text-muted); }
.suggest { display: flex; flex-direction: column; margin-top: var(--arq-s1); border-bottom: 1px solid var(--arq-line); }
.suggest button { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: var(--arq-s2); padding: 14px 0; border-top: 1px solid var(--arq-line); color: var(--arq-text-muted); font-size: 15px; transition: color var(--arq-t-base) var(--arq-ease); }
.suggest button:hover { color: var(--arq-text-strong); }
.suggest button:hover .suggest-arrow { color: var(--arq-copper-text); }
.suggest-n { font-family: var(--arq-font-mono); font-size: var(--arq-size-caption); letter-spacing: 0.16em; }
.suggest-arrow { color: var(--arq-text-disabled); transition: color var(--arq-t-base) var(--arq-ease); }
.suggest-demo { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); font-size: 10px; font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; line-height: 16px; text-transform: uppercase; vertical-align: 2px; color: var(--arq-text-muted); }

/* ---------- messages ---------- */
.msg { animation: arq-rise var(--arq-t-base) var(--arq-ease) both; }
.msg-user { align-self: flex-end; max-width: 80%; padding: 12px 16px; background: var(--arq-fog); border-radius: var(--arq-radius); color: var(--arq-text-strong); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-assistant { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg-meta { display: flex; align-items: center; gap: 12px; min-height: 16px; }
.msg-meta .sep { color: var(--arq-text-disabled); }
.msg-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.msg-content { min-width: 0; }
.msg-actions { display: flex; align-items: center; gap: var(--arq-s2); opacity: 0; transition: opacity var(--arq-t-base) var(--arq-ease); }
.msg-assistant:hover .msg-actions, .msg-assistant:focus-within .msg-actions { opacity: 1; }
/* '‹ 2/3 ›': an answer with earlier versions says so without a hover. */
.msg-actions[data-versions] { opacity: 1; }
.versions { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.versions .num { min-width: 28px; text-align: center; }
/* 'Geheugen bijgewerkt' under an answer that saved a fact. */
.msg-memory { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.msg-memory .icon { color: var(--arq-text-strong); }
.msg-memory-label { flex: none; color: var(--arq-text-strong); font-weight: var(--arq-weight-ui); }
.msg-memory-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-memory .btn-text { flex: none; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) { .msg-actions { opacity: 1; } }
/* The demo marker: this answer used the sample records of the demo connector. */
.demo-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--arq-border-strong); border-radius: var(--arq-radius); font-size: 10px; font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arq-text-strong); white-space: nowrap; cursor: help; }
.msg-error { padding: var(--arq-s2) var(--arq-s3); border: 1px solid var(--arq-line); border-left: 2px solid var(--arq-copper); border-radius: var(--arq-radius); }
.msg-error strong { display: block; font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); margin-bottom: 4px; }
.msg-error-actions { margin-top: 12px; }
.msg-stopped { font-size: var(--arq-size-caption); color: var(--arq-text-muted); }

/* steps */
.steps { border-top: 1px solid var(--arq-line); border-bottom: 1px solid var(--arq-line); }
.steps-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.steps-toggle:hover { color: var(--arq-text-strong); }
.steps-toggle .icon { transition: transform var(--arq-t-base) var(--arq-ease); }
.steps[open] .steps-toggle .icon { transform: rotate(90deg); }
.steps-list { display: flex; flex-direction: column; padding-bottom: 8px; }
.step { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; min-height: 32px; font-size: var(--arq-size-caption); color: var(--arq-text-body); }
.step-summary { color: var(--arq-text-muted); font-variant-numeric: tabular-nums; }
.step[data-status="failed"] .step-summary { color: var(--arq-copper-text); }

/* approval card */
.approval { display: flex; flex-direction: column; gap: var(--arq-s2); padding: var(--arq-s3); border: 1px solid var(--arq-line); border-left: 2px solid var(--arq-copper); border-radius: var(--arq-radius); }
.approval h3 { margin: 4px 0 0; font-size: 18px; font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-h2); color: var(--arq-text-strong); }
.approval p { margin: 0; color: var(--arq-text-muted); font-size: var(--arq-size-ui); }
.kv { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; border-top: 1px solid var(--arq-line); }
.kv > div { padding: 10px 0; border-bottom: 1px solid var(--arq-line); font-size: var(--arq-size-ui); overflow-wrap: anywhere; white-space: pre-wrap; }
.kv > div:nth-child(odd) { font-size: var(--arq-size-label-sm); font-weight: var(--arq-weight-ui); letter-spacing: var(--arq-track-label-tight); text-transform: uppercase; color: var(--arq-text-muted); padding-right: 12px; padding-top: 12px; }
/* A long text on the card (a mail body, a comment): as written, and it scrolls instead of stretching the card. */
.approval-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; }
.approval-actions { display: flex; gap: var(--arq-s2); align-items: center; }
.approval-decided { font-size: var(--arq-size-caption); color: var(--arq-text-muted); }

/* prose (assistant markdown) */
.prose { font-size: 16px; line-height: var(--arq-lh-body); color: var(--arq-text-body); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 12px; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 20px 0 8px; font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-h2); line-height: 1.25; color: var(--arq-text-strong); }
.prose h1 { font-size: 22px; } .prose h2 { font-size: 19px; } .prose h3 { font-size: 17px; } .prose h4 { font-size: 16px; }
.prose strong { font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); }
.prose em { font-style: normal; font-weight: var(--arq-weight-ui); }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li > ul, .prose li > ol { margin: 4px 0 0; }
.prose hr { border: 0; border-top: 1px solid var(--arq-line); margin: var(--arq-s2) 0; }
.prose blockquote { margin: 0 0 12px; padding: 4px 0 4px 16px; border-left: 1px solid var(--arq-line); color: var(--arq-text-muted); }
.prose code { font-family: var(--arq-font-mono); font-size: 13px; padding: 1px 5px; background: var(--arq-fog); border-radius: var(--arq-radius); }
.prose pre { margin: 0 0 12px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); overflow: hidden; background: var(--arq-fog); }
.prose pre code { display: block; padding: 14px 16px; background: transparent; overflow-x: auto; line-height: 1.55; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--arq-line); }
.prose table, .rich-table table { width: 100%; border-collapse: collapse; font-size: var(--arq-size-ui); }
.table-scroll { margin: 0 0 12px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); overflow-x: auto; }
.table-scroll th { padding: 10px 12px; background: var(--arq-fog); text-align: left; font-size: var(--arq-size-label-sm); font-weight: var(--arq-weight-ui); letter-spacing: var(--arq-track-label-tight); text-transform: uppercase; color: var(--arq-text-muted); border-bottom: 1px solid var(--arq-line); white-space: nowrap; }
.table-scroll td { padding: 10px 12px; border-bottom: 1px solid var(--arq-line); vertical-align: top; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll td.num, .table-scroll th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* rich blocks */
.rich-block + .rich-block { margin-top: var(--arq-s2); }
.metric { display: inline-flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 14px 18px; border: 1px solid var(--arq-line); border-top: 2px solid var(--arq-copper); border-radius: var(--arq-radius); }
.metric-value { font-size: 32px; font-weight: var(--arq-weight-title); letter-spacing: -0.04em; line-height: 1; color: var(--arq-text-strong); font-variant-numeric: tabular-nums; }
.metric-value small { font-size: 14px; font-weight: var(--arq-weight-body); letter-spacing: 0; color: var(--arq-text-muted); margin-left: 6px; }
.card { border: 1px solid var(--arq-line); border-radius: var(--arq-radius); background: var(--arq-paper); }
.card-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.card-row + .card-row { border-top: 1px solid var(--arq-line); }
.card-tag { flex: none; min-width: 40px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--arq-border-strong); border-radius: var(--arq-radius); font-size: 10px; font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arq-text-strong); }
.card-row strong { display: block; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); }
.card-row small { display: block; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.card-row a { margin-left: auto; font-size: var(--arq-size-caption); }
.weather { padding: 18px 20px; }
.weather-top { display: flex; justify-content: space-between; align-items: baseline; }
.weather-name { font-size: 15px; font-weight: 500; color: var(--arq-text-strong); }
.weather-temp { font-size: 40px; font-weight: var(--arq-weight-title); letter-spacing: -0.04em; line-height: 1; color: var(--arq-text-strong); font-variant-numeric: tabular-nums; margin: 12px 0 8px; }
.weather-details { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.weather-source { margin-top: 12px; }
.chart { padding: 18px 20px; }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin-top: 16px; border-bottom: 1px solid var(--arq-line); }
.chart-item { flex: 1; min-width: 16px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-bar { width: 100%; max-width: 40px; background: var(--arq-graphite); }
.chart-item span { font-size: 11px; color: var(--arq-text-muted); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-card { margin: 0; }
.image-card img { display: block; width: 100%; max-height: 360px; object-fit: cover; filter: grayscale(1); }
.image-card figcaption { padding: 8px 12px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.unavailable { padding: 12px 16px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.sources { margin-top: var(--arq-s2); display: flex; flex-direction: column; }
.sources .label-sm { padding-bottom: 6px; }
.source { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--arq-line); font-size: var(--arq-size-caption); text-decoration: none; }
.source span { color: var(--arq-text-muted); }

/* ---------- composer ---------- */
.composer-wrap { position: relative; padding: 0 var(--arq-s3) calc(var(--arq-s2) + env(safe-area-inset-bottom, 0px)); }
/* 'Naar beneden': above the composer while an answer grows below a reader who scrolled up. */
.jump-down { position: absolute; z-index: 2; top: -52px; left: 0; right: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--arq-line); border-radius: 50%; background: var(--arq-paper); color: var(--arq-text-strong); box-shadow: var(--arq-shadow-overlay); animation: arq-rise var(--arq-t-fast) var(--arq-ease) both; transition: background var(--arq-t-base) var(--arq-ease); }
.jump-down:hover { background: var(--arq-fog); }
.composer { max-width: var(--app-thread-w); margin: 0 auto; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); background: var(--arq-paper); transition: border-color var(--arq-t-base) var(--arq-ease); }
.composer:focus-within { border-color: var(--arq-focus-ring); }
.composer textarea { display: block; width: 100%; min-height: 24px; max-height: 200px; padding: 14px 16px 6px; border: 0; outline: 0; resize: none; background: transparent; font-size: 15px; line-height: 1.5; color: var(--arq-text-strong); }
.composer textarea::placeholder { color: var(--arq-text-disabled); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); padding: 4px 8px 8px 16px; }
.composer-note { max-width: var(--app-thread-w); margin: 8px auto 0; min-height: 18px; text-align: center; font-size: 12px; color: var(--arq-text-muted); }
.composer-note[data-tone="notice"] { color: var(--arq-text-strong); }
/* Chats that cannot be saved: the one standing note that gets copper, because work is at stake. */
.composer-note[data-tone="alert"] { color: var(--arq-copper-text); font-weight: var(--arq-weight-ui); }

/* uploaded files: chips in the composer (with progress and an x) and under a sent message (with a download link) */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.file-chip { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 248px; max-width: 100%; min-height: 54px; padding: 6px 4px 6px 6px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); background: var(--arq-paper); text-align: left; }
/* A file the model cannot use (unreadable, empty, refused): the one copper rule, and the reason in full. */
.file-chip[data-tone="alert"] { border-left: 2px solid var(--arq-copper); }
.file-tag, .file-thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--arq-radius); background: var(--arq-fog); overflow: hidden; }
.file-tag { font-size: 10px; font-weight: var(--arq-weight-ui); letter-spacing: 0.12em; color: var(--arq-text-strong); }
.file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--arq-size-caption); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); text-decoration: none; }
a.file-name:hover { color: var(--arq-text-strong); text-decoration: underline; }
.file-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.4; color: var(--arq-text-muted); font-variant-numeric: tabular-nums; }
.file-chip[data-tone="alert"] .file-detail { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--arq-copper-text); }
.file-progress { display: block; width: 100%; height: 2px; margin-top: 4px; border: 0; background: var(--arq-line); appearance: none; -webkit-appearance: none; }
.file-progress::-webkit-progress-bar { background: var(--arq-line); }
.file-progress::-webkit-progress-value { background: var(--arq-ink); transition: width var(--arq-t-fast) linear; }
.file-progress::-moz-progress-bar { background: var(--arq-ink); }
.file-remove { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; align-self: start; border-radius: var(--arq-radius); color: var(--arq-text-muted); }
.file-remove:hover { background: var(--arq-fog); color: var(--arq-text-strong); }
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 8px; max-width: 80%; }
.msg-image-item { display: block; }
.msg-image { display: block; width: 160px; height: 160px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); overflow: hidden; background: var(--arq-fog); }
.msg-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--arq-t-base) var(--arq-ease); }
.msg-image:hover img { opacity: 0.9; }
/* An image full size. */
.dialog-image { width: min(1100px, 100%); }
.dialog-image .dialog-head h2 { font-size: 18px; overflow-wrap: anywhere; }
.lightbox { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: var(--arq-s2); background: var(--arq-fog); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 240px); object-fit: contain; }
.composer-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.composer-hint { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer.dragging { border-color: var(--arq-copper); background: var(--arq-fog); }
.attach { margin-top: 10px; border-top: 1px solid var(--arq-line); padding-top: 8px; font-size: var(--arq-size-caption); }
.attach summary { cursor: pointer; color: var(--arq-text-muted); }
.attach pre { margin: 8px 0 0; max-height: 240px; overflow: auto; font-family: var(--arq-font-mono); font-size: 12px; white-space: pre-wrap; color: var(--arq-text-body); }

/* user message with edit */
.msg-user-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg-user-actions { opacity: 0; transition: opacity var(--arq-t-base) var(--arq-ease); }
.msg-user-wrap:hover .msg-user-actions, .msg-user-wrap:focus-within .msg-user-actions { opacity: 1; }
@media (hover: none) { .msg-user-actions { opacity: 1; } }
.edit-box { display: flex; flex-direction: column; gap: 10px; }
.edit-box textarea { width: 100%; min-height: 72px; padding: 12px 16px; border: 1px solid var(--arq-focus-ring); border-radius: var(--arq-radius); background: var(--arq-paper); font-size: 15px; line-height: 1.6; resize: vertical; outline: none; }
.edit-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); flex-wrap: wrap; }

/* list cards (mail, agenda) */
.list-card .list-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--arq-line); background: var(--arq-fog); }
.list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--arq-line); }
.list-row:last-child { border-bottom: 0; }
.list-row strong { display: block; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row small { display: block; font-size: var(--arq-size-caption); color: var(--arq-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row a { font-size: var(--arq-size-caption); }
.list-meta { font-size: var(--arq-size-caption); color: var(--arq-text-muted); white-space: nowrap; }
.list-date { min-width: 74px; font-size: var(--arq-size-caption); color: var(--arq-text-muted); white-space: nowrap; }
.step-duration { margin-left: auto; padding-left: 12px; color: var(--arq-text-disabled); font-size: 12px; }
.steps-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- overlays ---------- */
/* One column as wide as the screen allows: no content of a dialog (a row that does not wrap) can widen it past the gutter. */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--arq-s3); background: var(--app-overlay); }
.dialog { display: flex; flex-direction: column; width: min(960px, 100%); max-height: min(780px, calc(100dvh - 48px)); background: var(--arq-paper); border: 1px solid var(--arq-line); border-radius: var(--arq-radius); box-shadow: var(--arq-shadow-overlay); animation: arq-rise var(--arq-t-base) var(--arq-ease) both; }
.dialog-sm { width: min(520px, 100%); }
/* A dialog with panes that scroll on their own needs a definite height; the body itself never scrolls. */
.dialog-fill { height: min(860px, calc(100dvh - 48px)); }
.dialog-fill .dialog-body { display: flex; flex-direction: column; overflow: hidden; }
.dialog-md { width: min(680px, 100%); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--arq-s2); padding: 20px var(--arq-s4); border-bottom: 1px solid var(--arq-line); }
.dialog-head h2 { margin: 4px 0 0; font-size: 26px; font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-h2); line-height: var(--arq-lh-h2); color: var(--arq-text-strong); }
.dialog-body { flex: 1; min-height: 0; overflow: auto; }
.dialog-pad { padding: var(--arq-s3) var(--arq-s4) var(--arq-s4); display: flex; flex-direction: column; gap: var(--arq-s3); }
.dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--arq-s2); padding: var(--arq-s2) var(--arq-s4) var(--arq-s3); border-top: 1px solid var(--arq-line); }
.dialog p.lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--arq-text-body); max-width: var(--arq-measure); }

.menu { position: fixed; z-index: 30; min-width: 180px; padding: 6px; background: var(--arq-paper); border: 1px solid var(--arq-line); border-radius: var(--arq-radius); box-shadow: var(--arq-shadow-overlay); animation: arq-rise var(--arq-t-fast) var(--arq-ease) both; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: var(--arq-radius); font-size: var(--arq-size-ui); color: var(--arq-text-body); }
.menu button:hover { background: var(--arq-fog); color: var(--arq-text-strong); }
.menu button.danger:hover { color: var(--arq-copper-text); }
.menu-heading { padding: 10px 10px 4px; }
.menu button small { margin-left: auto; color: var(--arq-text-muted); font-size: var(--arq-size-caption); }
.menu button.checked { color: var(--arq-text-strong); }
.menu .menu-check { margin-left: auto; }

/* model server status in the top bar */
.model-status { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--arq-radius); }
.model-status:hover { background: var(--arq-fog); }
.model-status .label { white-space: nowrap; }
.model-status[data-state="down"] .label { color: var(--arq-text-strong); }

/* the source chosen in the composer's + menu */
.use-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 4px 0 8px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); font-size: var(--arq-size-caption); color: var(--arq-text-strong); white-space: nowrap; }
.use-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.use-chip button { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: var(--arq-radius); color: var(--arq-text-muted); }
.use-chip button:hover { background: var(--arq-fog); color: var(--arq-text-strong); }

/* ---------- connectors dialog ---------- */
.conn { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.conn-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--arq-line); }
.conn-list .search { padding: var(--arq-s2) var(--arq-s2) var(--arq-s1); }
.conn-list .search .icon { left: 28px; }
.conn-groups { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 var(--arq-s1) var(--arq-s2) var(--arq-s2); }
.conn-group { margin: var(--arq-s2) 0 4px 12px; }
.conn-row { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; min-width: 0; align-items: center; width: 100%; padding: 8px 12px; border-radius: var(--arq-radius); transition: background var(--arq-t-base) var(--arq-ease); }
.conn-row:hover { background: var(--arq-fog); }
.conn-row[aria-current="true"] { background: var(--arq-fog); }
.conn-row > span { min-width: 0; }
.conn-row strong { display: block; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); }
.conn-row small { display: block; font-size: 12px; color: var(--arq-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The detail pane is designed to fit without scrolling: compact header, two-column fields, editors as sub-views. */
.conn-detail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--arq-s4); display: flex; flex-direction: column; gap: 10px; }
.conn-head { display: flex; flex-direction: column; gap: 4px; }
.conn-detail h3 { margin: 0; font-size: 20px; font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-h2); color: var(--arq-text-strong); }
.conn-detail .desc { margin: 0; font-size: var(--arq-size-ui); line-height: 1.5; color: var(--arq-text-body); max-width: var(--arq-measure); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.conn-caps { font-size: var(--arq-size-caption); line-height: 1.5; color: var(--arq-text-muted); }
.conn-caps .label-sm { margin-right: 6px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); flex-wrap: wrap; margin-top: 4px; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: var(--arq-size-ui); color: var(--arq-text-body); }
.tick-inline { display: inline-flex; align-items: center; gap: 10px; padding: 0; position: relative; }
.tick-inline .tick-box { margin-top: 0; }
.tick-inline .tick-title { font-size: var(--arq-size-caption); }
/* Write rights: what they add (under "Kan"), the switch with its approval hint, and a reconnect notice when an
   OAuth grant lacks the write scopes. The "Mag ook" line stays on short screens: it explains the switch. */
.conn-write-caps { font-size: var(--arq-size-caption); line-height: 1.5; color: var(--arq-text-muted); margin-top: -6px; }
.conn-write-caps .label-sm { margin-right: 6px; }
.conn-write { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--arq-s2); }
.conn-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px var(--arq-s2); padding: 6px 6px 6px 12px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); font-size: var(--arq-size-caption); color: var(--arq-text-strong); }
/* When the content outgrows the pane it scrolls; nothing gets squashed. */
.conn-detail > * { flex-shrink: 0; }
.conn-form { display: flex; flex-direction: column; gap: 12px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.field-wide { grid-column: 1 / -1; }
.conn-detail .field { gap: 4px; }
.conn-detail .field > label { font-size: var(--arq-size-label-sm); letter-spacing: 0.1em; }
.conn-detail .field input, .conn-detail .field select { min-height: var(--arq-control-h-sm); font-size: 14px; }
.conn-detail .field textarea { min-height: 56px; padding: 8px 12px; font-size: 13px; }
.conn-detail .field-hint { font-size: 12px; line-height: 1.4; }
.conn-detail .segmented button { padding: 6px 14px; font-size: var(--arq-size-caption); }
.conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--arq-s2); margin-top: 4px; }
.conn-docs { margin-left: auto; text-decoration: none; }
.conn-docs:hover { text-decoration: underline; }
.conn-result { font-size: var(--arq-size-caption); color: var(--arq-text-muted); min-height: 18px; }
.conn-result[data-ok="false"] { color: var(--arq-copper-text); }
.copy-line { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); background: var(--arq-fog); }
.copy-line code { flex: 1; min-width: 0; font-family: var(--arq-font-mono); font-size: 12px; overflow-wrap: anywhere; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); }
.sub-list { display: flex; flex-direction: column; border-top: 1px solid var(--arq-line); max-height: 216px; overflow-y: auto; overscroll-behavior: contain; }
.sub-row { display: grid; grid-template-columns: 1fr auto; gap: var(--arq-s2); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--arq-line); }
.sub-row strong { display: block; font-size: var(--arq-size-ui); font-weight: var(--arq-weight-ui); color: var(--arq-text-strong); }
.sub-row small { display: block; font-family: var(--arq-font-mono); font-size: 12px; color: var(--arq-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--arq-s2); }
.conn-empty { margin: auto; text-align: center; color: var(--arq-text-muted); }

/* ---------- settings dialog ---------- */
/* Spacing lives here, not in style attributes: the Content-Security-Policy allows no inline styles. */
.settings-heading { margin-bottom: 12px; }
.settings-heading-tight { margin-bottom: 8px; }
.settings-note { margin: 0; max-width: 66ch; }
.settings-advanced summary { width: max-content; cursor: pointer; font-size: var(--arq-size-caption); color: var(--arq-text-muted); }
.settings-advanced summary:hover { color: var(--arq-text-strong); }
.settings-advanced[open] summary { margin-bottom: 12px; }
/* What "Verbinding testen" found: the probed facts, then the server's explanation. */
.probe-report { display: flex; flex-direction: column; gap: 6px; }
.probe-report p { margin: 0; }
.probe-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: var(--arq-size-caption); line-height: 1.5; }
.probe-facts div { display: contents; }
.probe-facts dt { color: var(--arq-text-muted); }
.probe-facts dd { margin: 0; color: var(--arq-text-strong); }
/* Personalisation, memory and data. The memory acts at once; the counters sit under their fields. */
.settings-section { display: flex; flex-direction: column; gap: 12px; }
.settings-section .settings-heading { margin-bottom: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px var(--arq-s2); }
.settings-title { margin: 0; }
.settings-title:focus { outline: none; }
.settings-title:focus-visible { outline: 1px solid var(--arq-focus-ring); outline-offset: 4px; }
.settings-data { align-items: flex-start; }
.settings-data p { flex: 1 1 280px; }
.field-counter { align-self: flex-end; font-size: 12px; color: var(--arq-text-muted); }
.field-counter[data-full="true"] { color: var(--arq-copper-text); }
.field textarea:disabled { background: var(--arq-fog); color: var(--arq-text-disabled); }
.memory-list { display: flex; flex-direction: column; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--arq-line); }
.memory-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--arq-s1); padding: 8px 0; border-bottom: 1px solid var(--arq-line); }
.memory-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.memory-text { font-size: var(--arq-size-ui); line-height: 1.5; color: var(--arq-text-strong); overflow-wrap: anywhere; }
.memory-main small { font-size: 12px; }
.memory-actions { display: flex; gap: 2px; }
.memory-empty { padding: 12px 0; border-bottom: 1px solid var(--arq-line); }
.memory-add, .memory-edit { display: flex; align-items: center; gap: 8px; }
.memory-edit { grid-column: 1 / -1; flex-wrap: wrap; }
/* On a phone 'Toevoegen' goes under the field instead of pushing the settings dialog past the screen's edge. */
.memory-add { flex-wrap: wrap; }
.memory-add input, .memory-edit input { flex: 1 1 200px; min-width: 0; height: var(--arq-control-h-sm); padding: 0 12px; font-size: 14px; color: var(--arq-text-strong); background: var(--arq-paper); border: 1px solid var(--arq-border-hairline); border-radius: var(--arq-radius); outline: none; transition: border-color var(--arq-t-base) var(--arq-ease); }
.memory-add input:focus, .memory-edit input:focus { border-color: var(--arq-focus-ring); }
.memory-add input::placeholder { color: var(--arq-text-disabled); }
.memory-add input:disabled { background: var(--arq-fog); }
.memory-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); min-height: 20px; }
.memory-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--arq-s2); padding: 10px 12px; border: 1px solid var(--arq-line); border-left: 2px solid var(--arq-copper); border-radius: var(--arq-radius); font-size: var(--arq-size-caption); color: var(--arq-text-strong); }
.memory-confirm-actions { display: inline-flex; gap: 8px; }
/* The status lines of the memory and the export take no room until they have something to say. */
.settings-section .conn-result { min-height: 0; }
.settings-section .conn-result:empty { margin-top: -12px; }

/* folder list in a connector, and the folder picker dialog */
.folder-list { display: flex; flex-direction: column; border-top: 1px solid var(--arq-line); }
.folder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--arq-s2); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--arq-line); }
.folder-row code { font-family: var(--arq-font-mono); font-size: 12px; color: var(--arq-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.picker { display: flex; flex-direction: column; gap: 12px; padding: var(--arq-s2) var(--arq-s4) var(--arq-s3); }
.picker-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--arq-size-caption); }
.picker-crumb { color: var(--arq-text-muted); padding: 2px 4px; border-radius: var(--arq-radius); }
.picker-crumb:hover, .picker-crumb[aria-current="true"] { color: var(--arq-text-strong); }
.picker-crumb[aria-current="true"] { font-weight: var(--arq-weight-ui); }
.picker-sep { color: var(--arq-text-disabled); }
.picker-list { height: 300px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--arq-line); border-bottom: 1px solid var(--arq-line); }
.picker-row { display: flex; align-items: center; justify-content: space-between; gap: var(--arq-s2); width: 100%; height: 38px; padding: 0 8px; border-bottom: 1px solid var(--arq-line); font-size: var(--arq-size-ui); color: var(--arq-text-body); }
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--arq-fog); color: var(--arq-text-strong); }
.picker-row .icon { color: var(--arq-text-disabled); }
.picker-empty { padding: var(--arq-s2) 8px; }
.picker-foot { display: flex; flex-direction: column; gap: 6px; }
.picker-manual input { min-height: var(--arq-control-h-sm); font-size: 13px; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--arq-s3); }
.login-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--arq-s3); padding: var(--arq-s4); border: 1px solid var(--arq-line); border-radius: var(--arq-radius); }
.login-card h1 { margin: 6px 0 0; font-size: var(--arq-size-h2); font-weight: var(--arq-weight-title); letter-spacing: var(--arq-track-h2); color: var(--arq-text-strong); }
.admin-body { min-height: 100dvh; background: var(--arq-paper); }
.admin-page { width: min(860px, 100%); margin: 0 auto; padding: var(--arq-s4) var(--arq-s3) var(--arq-s6); }
.admin-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--arq-line); padding-bottom: var(--arq-s3); }
.admin-intro { padding: var(--arq-s5) 0 var(--arq-s3); }
.admin-intro h1 { margin: 6px 0; font-size: var(--arq-size-h1); color: var(--arq-text-strong); }
.admin-intro p, .admin-result p { color: var(--arq-text-muted); }
.admin-section { border-top: 1px solid var(--arq-line); padding: var(--arq-s4) 0; }
.admin-section h2 { margin: 0 0 var(--arq-s3); font-size: var(--arq-size-h2); color: var(--arq-text-strong); }
.admin-copy { margin: 0 0 var(--arq-s3); color: var(--arq-text-muted); line-height: 1.5; }
.admin-oauth-list { display: flex; flex-direction: column; }
.admin-oauth-provider { padding: var(--arq-s3) 0; border-top: 1px solid var(--arq-line); }
.admin-oauth-provider h3 { margin: 0 0 6px; color: var(--arq-text-strong); font-size: 17px; font-weight: var(--arq-weight-title); }
.admin-oauth-provider > .field-hint { margin: 0 0 var(--arq-s2); }
.admin-oauth-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--arq-s2); }
.admin-oauth-form .field { display: flex; flex-direction: column; gap: 6px; font-size: var(--arq-size-caption); }
.admin-oauth-form .field span { color: var(--arq-text-muted); }
.admin-oauth-form .admin-redirect-input { font-family: var(--arq-font-mono); font-size: 12px; }
.admin-oauth-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--arq-s2); }
.admin-provider-link { display: inline-block; margin-top: var(--arq-s2); }
.admin-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--arq-s2); }
.admin-form .field { display: flex; flex-direction: column; gap: 6px; font-size: var(--arq-size-caption); }
.admin-result { display: flex; align-items: center; flex-wrap: wrap; gap: var(--arq-s2); margin-top: var(--arq-s3); padding: var(--arq-s3); border: 1px solid var(--arq-line); border-left: 2px solid var(--arq-copper); border-radius: var(--arq-radius); }
.admin-result strong { width: 100%; color: var(--arq-text-strong); }
.admin-result p { width: 100%; margin: 0; }
.admin-result code { padding: 8px 10px; border: 1px solid var(--arq-line); border-radius: var(--arq-radius); user-select: all; }
.admin-users { display: flex; flex-direction: column; border-top: 1px solid var(--arq-line); }
.admin-user { display: flex; align-items: center; gap: var(--arq-s2); min-height: 72px; padding: var(--arq-s2) 0; border-bottom: 1px solid var(--arq-line); }
.admin-user-info { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.admin-user-info strong { color: var(--arq-text-strong); }
.admin-user-info span, .admin-user-info small { color: var(--arq-text-muted); overflow-wrap: anywhere; }
@media (max-width: 700px) { .admin-form, .admin-oauth-form { grid-template-columns: 1fr; } .admin-oauth-actions { grid-column: auto; } .admin-user { align-items: flex-start; flex-wrap: wrap; } .admin-user-info { flex-basis: 100%; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .app, .app[data-sidebar="closed"] { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: var(--app-topbar-full); bottom: 0; left: 0; width: min(320px, 88vw); padding-left: env(safe-area-inset-left, 0px); z-index: 15; transform: translateX(-100%); transition: transform var(--arq-t-base) var(--arq-ease); box-shadow: none; visibility: visible; }
  .app[data-sidebar="open"] .sidebar { transform: none; box-shadow: var(--arq-shadow-overlay); }
  .app[data-sidebar="closed"] .sidebar { visibility: visible; }
  .scrim { position: fixed; inset: var(--app-topbar-full) 0 0 0; z-index: 14; background: var(--app-overlay); }
  .topbar { padding-left: max(var(--arq-s2), env(safe-area-inset-left, 0px)); padding-right: max(var(--arq-s2), env(safe-area-inset-right, 0px)); gap: var(--arq-s1); }
  .topbar-date { display: none; }
  .topbar-new { display: inline-flex; }
  .thread-inner { padding: var(--arq-s3) max(var(--arq-s2), env(safe-area-inset-right, 0px)) var(--arq-s3) max(var(--arq-s2), env(safe-area-inset-left, 0px)); gap: var(--arq-s3); }
  .welcome { margin-top: 6vh; padding: 0 var(--arq-s2); }
  .welcome h1 { font-size: 32px; }
  .composer-wrap { padding: 0 max(var(--arq-s2), env(safe-area-inset-right, 0px)) calc(var(--arq-s2) + env(safe-area-inset-bottom, 0px)) max(var(--arq-s2), env(safe-area-inset-left, 0px)); }
  .composer-hint { display: none; }
  .msg-user { max-width: 92%; }
  .msg-files { max-width: 92%; }
  .msg-image { width: 120px; height: 120px; }
  .file-chip { width: 100%; }
  .lightbox { padding: var(--arq-s1); }
  .conn { grid-template-columns: 1fr; }
  .conn-list { border-right: 0; }
  .conn[data-view="detail"] .conn-list { display: none; }
  .conn[data-view="list"] .conn-detail { display: none; }
  .conn-back { display: inline-flex; }
  .dialog { max-height: calc(100dvh - 32px); }
  .dialog-fill { height: calc(100dvh - 32px); }
  .overlay { padding: var(--arq-s2); }
  .dialog-head, .dialog-pad, .conn-detail { padding-left: var(--arq-s3); padding-right: var(--arq-s3); }
  .grid-2, .fields-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .conn-back { display: none; } .scrim { display: none; } }
/* A 360px phone: the model status keeps its dot (its name stays in the button's label and the composer note says when
   the server is down), so the top bar fits beside the new-chat button without a horizontal scroll. */
@media (max-width: 480px) {
  .model-status { height: 40px; padding: 0 12px; }
  .model-status .label { display: none; }
  /* Four languages side by side need about 380px; two by two they fit the settings dialog on a 360px phone. */
  .settings-language { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-language button { text-align: center; }
}
/* iOS Safari zooms into a focused field whose text is under 16px and stays zoomed. On phones and touch screens every
   text field is 16px, whatever size its component sets; hence the one !important. */
@media (max-width: 900px), (pointer: coarse) {
  .composer textarea, .edit-box textarea, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { font-size: 16px !important; }
}
@media (hover: none) {
  .chat-item-menu { opacity: 1; }
}
/* A touch keyboard has no Shift + Enter: Enter is a new line there and the button sends. */
@media (hover: none) and (pointer: coarse) {
  .composer-hint { display: none; }
  /* Fingers: the x on a chip and the version arrows get room to be hit. */
  .file-remove { width: 40px; height: 40px; }
  .versions .btn-icon-xs { width: 36px; height: 36px; }
}
/* Short screens (1366x768 laptops): the connector pane gives up decoration before it gives up fitting. */
@media (max-height: 760px) {
  .overlay { padding: var(--arq-s2); }
  .dialog-fill { height: calc(100dvh - 32px); }
  .dialog-fill .dialog-head { padding: 14px var(--arq-s4); }
  .dialog-fill .dialog-head h2 { font-size: 22px; }
  .conn-detail { gap: 8px; padding: 16px var(--arq-s4); }
  .conn-detail .desc { -webkit-line-clamp: 2; }
  .conn-caps { display: none; }
  .conn-write-caps { margin-top: 0; }
  .conn-detail .field-hint { display: none; }
  .conn-detail .field textarea { min-height: 48px; }
}