/* ============================================================
   Arte Workbench — layout on top of console.css base + tokens
   Three columns: work queue · chat · site context
   ============================================================ */

/* ============================================================
   Shell — Picasso top navigation bar + account menu.
   Single chrome for every view (see Shell.jsx).
   ============================================================ */
.shell-topbar { flex: none; height: 36px; display: flex; align-items: center; gap: 18px;
  padding: 0 6px; background: transparent; }
.shell-logo { width: 22px; height: 22px; border-radius: var(--r-sm); }
.shell-nav { position: relative; display: flex; align-items: center; gap: 4px; }
/* The active pill's visuals live on this shared, JS-positioned indicator
   (see the TopNavBar animation state machine in Shell.jsx) so it can glide
   between items via a transition on left/width, instead of each button
   popping its own style. Its geometry is driven entirely by JS-computed
   pixel values (never by measuring a button's own box mid-transition —
   that was the source of the old misalignment bug), through 3 phases:
   shrink in place -> slide while collapsed -> grow in place. */
.shell-nav-indicator { position: absolute; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff, #f5f6fb);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 3px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: left .2s cubic-bezier(.4,0,.2,1), top .2s cubic-bezier(.4,0,.2,1),
    width .2s cubic-bezier(.4,0,.2,1), height .2s cubic-bezier(.4,0,.2,1);
  z-index: 0; pointer-events: none; }
/* Fixed padding at all times — the pill's width change comes entirely from
   .shell-nav-label's own max-width/margin transition below, never from the
   button's own box, so nothing here needs measuring mid-transition. */
.shell-nav-btn { position: relative; z-index: 1; height: 30px; padding: 0 10px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; color: var(--fg-subtle); transition: color .12s; }
.shell-nav-btn:hover:not(:disabled) { color: var(--fg-strong); background: var(--bg-canvas); }
.shell-nav-btn.active { color: var(--primary); }
.shell-nav-btn.soon { color: var(--fg-faint); cursor: not-allowed; }
.shell-nav-label { display: inline-block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  max-width: 0; margin-left: 0; opacity: 0; vertical-align: middle;
  transition: max-width .18s ease, margin-left .18s ease, opacity .15s ease; }
.shell-soon-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fg-faint); background: var(--bg-canvas); border-radius: var(--r-xs); padding: 1px 4px; }
.shell-nav-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--posture-immediate); color: #fff; font-size: 9.5px; font-weight: 700;
  line-height: 15px; text-align: center; }

/* Default: same margin from the bottom edge as from the left edge — matches
   views where the glass panel runs flush to the bottom (Chat, Settings).
   .has-composer overrides this to center against the composer/Create Agent
   row instead, for views where the panel stops short of the bottom to make
   room for that row (Action Center, Knowledge Base). It glides between the
   two via the transition below, rather than jumping. */
.shell-account { position: fixed; left: calc(var(--shell-inset) + 6px);
  bottom: calc(var(--shell-inset) + 6px); z-index: 40; transition: bottom .3s cubic-bezier(.4,0,.2,1); }
.shell-account.has-composer {
  bottom: calc(var(--shell-inset) + (var(--bottom-row-h) - var(--shell-avatar-size)) / 2); }
.shell-avatar { width: var(--shell-avatar-size); height: var(--shell-avatar-size); border-radius: 999px; background: var(--purple-avatar-bg);
  color: var(--purple-900); font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-sm); transition: .12s; }
.shell-avatar:hover, .shell-avatar.active { box-shadow: 0 0 0 3px var(--purple-active-bg); }

/* ---- Shared center tab row (Action Center / Knowledge Base) — per Figma's
   "Assets/ Knowledge Hub" frame: one shared pill-shaped track (light grey,
   outlined), and only the selected tab gets its own white outlined pill +
   light shadow inside it. Normal document flow — .col-hd-center below
   positions it when it needs to sit centered inline with a view's title. */
.center-tabs { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill);
  background: var(--bg-canvas); border: 1px solid var(--border); flex-wrap: nowrap; white-space: nowrap; }
/* Selected tab's pill lives here, JS-positioned (see useSlideIndicator), so
   it glides between tabs instead of each button popping its own style. */
.center-tab-indicator { position: absolute; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: left .25s cubic-bezier(.4,0,.2,1), top .2s ease, width .25s cubic-bezier(.4,0,.2,1), height .2s ease;
  z-index: 0; pointer-events: none; }
.center-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  flex: none; white-space: nowrap; border-radius: var(--r-pill); font-size: 13px; color: var(--fg-muted);
  border: 1px solid transparent; background: transparent; transition: color .12s; }
.center-tab:hover:not(:disabled) { color: var(--fg-strong); }
.center-tab.on { color: var(--primary); font-weight: 600; }
.center-tab.soon { color: var(--fg-faint); cursor: not-allowed; }
.center-tab-badge { position: absolute; top: -6px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--posture-immediate); color: #fff; font-size: 9.5px; font-weight: 700;
  line-height: 15px; text-align: center; }
.soon-pill { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fg-faint); background: #fff; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 4px; }

/* ---- Global bottom composer (Action Center / Knowledge Base) — floats
   directly on the shell background like the nav bar, no glass card of its
   own; capped to the same width as the Chat composer, square-ish corners.
   The view content and this row are flex siblings under .console, so as
   this row's height/margin animate in .global-composer-row.visible, the
   view content (flex: 1) naturally resizes in step — no need to animate
   the glass panel itself. */
.console-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Composer is centered independent of the row (absolutely positioned) so the
   Create Agent button can pin to the far right without skewing the center.
   Collapsed by default (height 0, clipped) — .visible expands it open. */
.global-composer-row { flex: none; position: relative; display: flex; align-items: center; overflow: hidden;
  height: 0; margin-top: 0; padding: 0 4px;
  transition: height .3s cubic-bezier(.4,0,.2,1), margin-top .3s cubic-bezier(.4,0,.2,1); }
.global-composer-row.visible { height: var(--bottom-row-h); margin-top: var(--shell-gap); }
.slim-composer { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + var(--slide-offset, 0px))); width: 100%; max-width: 760px;
  height: 38px; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(30,42,92,0.07);
  opacity: 1; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.slim-composer input { flex: 1; min-width: 0; border: none; outline: none; font-family: inherit; font-size: 14px;
  color: var(--fg); background: none; }
.slim-composer input::placeholder { color: var(--fg-faint); }
.global-composer-row:not(.visible) .slim-composer { --slide-offset: 34px; opacity: 0; }
.btn-sm.ghost.soon { color: var(--fg-faint); cursor: not-allowed; margin-left: auto;
  transform: translateY(0); opacity: 1; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.btn-sm.ghost.soon:hover { border-color: var(--border-strong); color: var(--fg-faint); background: #fff; }
.global-composer-row:not(.visible) .btn-sm.ghost.soon { transform: translateY(34px); opacity: 0; }

/* ---- Two-column body (sessions + chat) — the whole thing is one glass panel ---- */
.wb { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }
.wb-chat    { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: transparent; position: relative; }

/* floating "open site context" handle, shown when the panel is hidden */
.ctx-open { position: absolute; top: 18px; left: 18px; z-index: 20; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: #fff; box-shadow: var(--shadow-sm); color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center; transition: .12s; }
.ctx-open:hover { color: var(--purple-500); border-color: var(--purple-400); background: #f4f6fe; }
.wb-chat.solo .thread-title { margin-left: 66px; }
/* Animated open/close: width transitions to 0 (rather than display:none)
   so it slides shut — .wb-chat (flex:1) naturally expands to fill the
   freed space in step, the same flex-sibling technique used for the
   global composer row. */
.wb-context { width: 320px; flex: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: transparent; border-right: 1px solid rgba(0,0,0,0.06); opacity: 1;
  transition: width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, border-color .28s ease; }
.console.no-context .wb-context { width: 0; opacity: 0; border-color: transparent; }

/* ---- Column headers ---- */
.col-hd { position: relative; height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.col-hd .ttl { font-size: 14px; font-weight: 600; color: var(--fg-subtle); }
.col-hd .spacer { flex: 1; }
/* Centers a tab menu on the same line as the title, independent of how much
   room the title/actions on either side take up. */
.col-hd-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---- Segmented control ---- */
.seg { display: flex; gap: 2px; padding: 4px; margin: 12px 14px 6px; background: #f4f4f6;
  border-radius: 8px; }
.seg button { flex: 1; height: 30px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: .12s; }
.seg button .pill { background: #e3e3e8; color: var(--fg-muted); border-radius: 999px; font-size: 11px;
  padding: 0 6px; line-height: 16px; font-weight: 600; }
.seg button:hover { color: var(--fg-strong); }
.seg button.on { background: #fff; color: var(--purple-600); box-shadow: var(--shadow-xs); }
.seg button.on .pill { background: var(--purple-active-bg-strong); color: var(--purple-600); }

/* ---- Action Center: approvals list + detail panel ---- */
/* Two-pane row: a scrollable list of single-line entries on the left, and a
   large panel sliding in from the right on selection — per the Figma "Top
   Priority" single-item frame's design language, adapted to approval jobs.
   .actioncenter-body itself breaks out of the shared .actioncenter-inner
   880px cap (this screen uses its own instead) since the detail panel needs
   the full available width to be genuinely "large" — but the list rows
   inside it are re-capped/centered via .qlist-inner at that same 880px, so
   the list still lines up with Chat/Knowledge Base/Settings instead of
   stretching edge to edge. */
.actioncenter-body { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; padding: 6px 20px 20px; }
.qlist { flex: 1; min-width: 0; overflow-y: auto; padding: 0 4px; transition: opacity .2s; }
.qlist-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.actioncenter-body.has-detail .qlist { opacity: .5; }

.appr-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: .12s; }
.appr-row:hover { border-color: var(--purple-300); box-shadow: var(--shadow-sm); }
.appr-row.active { border-color: var(--primary); background: var(--purple-active-bg); }
.appr-row-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-canvas);
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.appr-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.appr-row-top { display: flex; align-items: baseline; gap: 8px; }
.appr-row-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.appr-row-id { margin-left: auto; flex: none; font-size: 11px; font-family: var(--font-mono, monospace); color: var(--fg-faint); }
.appr-row-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.appr-row-desc { flex: 1; min-width: 140px; font-size: 12px; color: var(--fg-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-row-meta { flex: none; display: flex; align-items: center; gap: 6px; }
.appr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-muted);
  background: var(--bg-canvas); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.appr-chip.you { color: var(--primary); background: var(--purple-active-bg); font-weight: 600; }

/* Detail panel — a true overlay per Figma (not a flex sibling that shrinks
   the list): absolutely positioned over .actioncenter-body, sliding in via
   transform so its own size never changes and nothing reflows mid-transition.
   Large — most of the available width, not a slim drawer. */
.approval-detail { position: absolute; top: 6px; right: 20px; bottom: 20px; left: 20px;
  display: flex; justify-content: flex-end; pointer-events: none; z-index: 5; }
.approval-detail-inner { width: 74%; max-width: 1040px; min-width: 560px; height: 100%; min-height: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), -12px 12px 32px rgba(30,42,92,0.14);
  display: flex; flex-direction: column; padding: 20px 24px; pointer-events: auto;
  transform: translateX(calc(100% + 24px)); transition: transform .3s ease; }
.approval-detail.open .approval-detail-inner { transform: translateX(0); }
.approval-detail-hd { flex: none; display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border); }
.approval-detail-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--purple-100);
  display: flex; align-items: center; justify-content: center; }
.approval-detail-title { font-size: 16px; font-weight: 600; color: var(--fg-strong); }
.approval-detail-tag { flex: none; font-size: 11px; font-family: var(--font-mono, monospace); color: var(--fg-faint);
  background: var(--bg-canvas); border-radius: 999px; padding: 3px 9px; }
.approval-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 2px; display: flex;
  flex-direction: column; gap: 20px; }

/* Metadata chips — one line each: icon + grey label + value in its own
   subtle pill. A row of tags under the title, not a bordered card. */
.approval-detail-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.approval-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; background: #fff; font-size: 12px; }
.approval-chip-k { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-subtle); white-space: nowrap; }
.approval-chip-v { font-weight: 600; color: var(--fg-strong); background: var(--bg-canvas); border-radius: 6px;
  padding: 1px 8px; white-space: nowrap; }
.approval-chip-v.you { color: var(--primary); background: var(--purple-active-bg); }

/* Sections — a plain label above a bordered "well", not a title-as-card-header
   (per Figma's "AI reasoning" / "Action parameters" treatment). */
.approval-section { display: flex; flex-direction: column; gap: 8px; }
.approval-section-hd { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  color: var(--fg-muted); }
.approval-section-body { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: var(--bg-canvas); display: flex; flex-direction: column; gap: 4px; }
.approval-section-prose { font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
.approval-noargs { font-size: 12.5px; color: var(--fg-faint); font-style: italic; }
.approval-detail-foot { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 14px;
  border-top: 1px solid var(--border); }

.btn-sm { font-size: 12.5px; line-height: 18px; border-radius: 6px; padding: 5px 10px; display: inline-flex;
  align-items: center; gap: 6px; transition: .12s; font-weight: 500; white-space: nowrap; }
.btn-sm.primary { background: var(--purple-500); color: #fff; }
.btn-sm.primary:hover { background: #2544c9; }
.btn-sm.ghost { color: var(--fg-muted); border: 1px solid var(--border-strong); background: #fff; }
.btn-sm.ghost:hover { border-color: var(--purple-400); color: var(--purple-500); background: #f4f6fe; }
.btn-sm.bare { color: var(--fg-subtle); }
.btn-sm.bare:hover { color: var(--posture-immediate); }
.btn-sm.done { background: var(--good-bg); color: var(--good-2); }

/* New-item rows */
.nrow { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 9px; background: #fff; transition: .12s; cursor: pointer; }
.nrow:hover { border-color: var(--purple-300); background: #f4f6fe; }
.nrow .nico { width: 30px; height: 30px; border-radius: 7px; flex: none; display: flex; align-items: center;
  justify-content: center; }
.nrow h5 { font-size: 13px; font-weight: 600; color: var(--fg-strong); line-height: 1.35; }
.nrow .nmeta { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.nrow .ndot { width: 7px; height: 7px; border-radius: 999px; flex: none; margin-top: 6px; }

/* ---- CENTER: thread title + chat ---- */
/* Just a light-grey label, no card — per Figma (e.g. "Payments Production access"). */
.thread-title { flex: none; margin: 16px 28px 0; font-size: 13px; color: var(--fg-subtle); }

.thread { flex: 1; overflow-y: auto; padding: 20px 28px 16px; display: flex; flex-direction: column; gap: 18px; }
.thread-inner { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* messages */
.m-user { align-self: flex-end; max-width: 78%; background: var(--purple-500); color: #fff; font-size: 14px;
  line-height: 1.5; padding: 11px 14px; border-radius: 12px 12px 4px 12px; }
.m-bot { align-self: flex-start; max-width: 92%; display: flex; gap: 12px; align-items: flex-start; }
.m-bot .ava { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--purple-100);
  border: 1px solid var(--purple-200); display: flex; align-items: center; justify-content: center; }
.m-bot .ava img { width: 18px; height: auto; }
.m-bot .bubble { flex: 1; }
.m-bot .btxt { font-size: 14px; line-height: 1.6; color: var(--fg); }
.m-bot .btxt > *:first-child { margin-top: 0; }
.m-bot .btxt > *:last-child { margin-bottom: 0; }
.m-bot .btxt p { margin: 0 0 .65em; }
.m-bot .btxt h1,.m-bot .btxt h2,.m-bot .btxt h3,.m-bot .btxt h4 {
  font-weight: 700; color: var(--fg-strong); margin: 1.1em 0 .35em; line-height: 1.3; }
.m-bot .btxt h1 { font-size: 1.2em; }
.m-bot .btxt h2 { font-size: 1.1em; }
.m-bot .btxt h3,.m-bot .btxt h4 { font-size: 1em; }
.m-bot .btxt ul,.m-bot .btxt ol { margin: .4em 0 .65em 1.4em; padding: 0; }
.m-bot .btxt li { margin-bottom: .25em; }
.m-bot .btxt li > p { margin: 0; }
.m-bot .btxt code { background: #f0f0f4; border-radius: 4px; padding: 1px 5px;
  font-family: var(--font-mono, monospace); font-size: 13px; color: var(--fg-strong); }
.m-bot .btxt pre { background: #f0f0f4; border-radius: 8px; padding: 12px 14px;
  overflow-x: auto; margin: .5em 0; }
.m-bot .btxt pre code { background: none; padding: 0; font-size: 12.5px; }
.m-bot .btxt blockquote { border-left: 3px solid var(--purple-300); margin: .5em 0;
  padding: .25em 0 .25em 12px; color: var(--fg-muted); }
.m-bot .btxt hr { border: none; border-top: 1px solid var(--border); margin: .8em 0; }
.m-bot .btxt a { color: var(--purple-600); text-decoration: underline; }
.m-bot .btxt table { border-collapse: collapse; width: 100%; margin: .5em 0; font-size: 13px; }
.m-bot .btxt th,.m-bot .btxt td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.m-bot .btxt th { background: var(--bg-canvas); font-weight: 600; color: var(--fg-strong); }
.m-bot .btxt b,.m-bot .btxt strong { color: var(--fg-strong); font-weight: 600; }

.blist { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.blist .bi { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--fg); line-height: 1.45; }
.blist .bi .ic { margin-top: 1px; flex: none; }

/* inline graph result card */
.rescard { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.rescard .rc-hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg-muted); }
.rescard .rc-hd b { color: var(--fg-strong); font-weight: 600; }
.rescard .rc-hd .spacer { flex: 1; }
.mini-graph { position: relative; height: 168px; background: radial-gradient(circle at 50% 45%, #f4f6fe 0%, #f6f5f4 75%); }

/* inline remediation card */
.remcard { margin-top: 12px; border: 1px solid var(--purple-200); border-radius: 10px; background: var(--purple-100);
  padding: 13px; }
.remcard .rm-top { display: flex; align-items: center; gap: 9px; }
.remcard .rm-ico { width: 30px; height: 30px; border-radius: 7px; background: #fff; border: 1px solid var(--purple-200);
  display: flex; align-items: center; justify-content: center; flex: none; }
.remcard h4 { font-size: 14px; font-weight: 600; color: var(--fg-strong); }
.remcard .rm-meta { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
.remcard .rm-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.remcard .rm-foot .spacer { flex: 1; }

.empty-hint { align-self: center; text-align: center; color: var(--fg-subtle); font-size: 13px; padding: 40px 0; }

/* ---- Composer ---- */
.composer-wrap { flex: none; padding: 10px 28px 22px; }
.composer { max-width: 760px; margin: 0 auto; border: 1px solid rgba(0,0,0,0.05); border-radius: 14px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(30,42,92,0.07); transition: .12s; }
.composer:focus-within { border-color: var(--purple-400); box-shadow: 0 0 0 4px var(--purple-active-bg); }
.cmp-ctx { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 12px 0; }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted);
  background: #f4f4f6; border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px 3px 8px; }
.ctx-chip .x { color: var(--fg-faint); display: inline-flex; cursor: pointer; }
.ctx-chip .x:hover { color: var(--fg-muted); }
.ctx-chip.add { background: #fff; border-style: dashed; color: var(--purple-500); cursor: pointer; }
.ctx-chip.add:hover { background: #f4f6fe; }
.composer textarea { width: 100%; border: none; outline: none; resize: none; font-family: inherit; font-size: 14.5px;
  line-height: 1.5; color: var(--fg); padding: 12px 14px 4px; background: none; min-height: 26px; }
.composer textarea::placeholder { color: var(--fg-faint); }
.cmp-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 12px; }
.cmp-bar .spacer { flex: 1; }
.cmp-iconbtn { width: 32px; height: 32px; border-radius: 7px; color: var(--fg-subtle); display: inline-flex;
  align-items: center; justify-content: center; transition: .12s; }
.cmp-iconbtn:hover { background: #f4f4f6; color: var(--fg-muted); }

/* model selector — same grey/borderless treatment as the composer's other
   utility buttons (attach, "New case") in Figma */
.model-sel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-sm);
  border: none; background: var(--bg-canvas); font-size: 13px; color: var(--fg); transition: .12s; white-space: nowrap; flex: none; }
.model-sel:hover:not(:disabled) { background: #eef0f2; }
.model-sel:disabled { opacity: 0.6; cursor: default; }
.model-sel b { font-weight: 500; color: var(--fg-strong); }

/* send button — a single icon-only gradient button, no schedule split */
.send-btn { width: 32px; height: 32px; border-radius: var(--r-sm); flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--purple-500), var(--violet-600), #ec4899);
  box-shadow: var(--shadow-xs); transition: .12s; }
.send-btn:hover:not(:disabled) { filter: brightness(1.06); }
.send-btn:disabled { opacity: 0.45; cursor: default; }

/* ---- Popover (model + schedule) ---- */
.pop { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 264px; }
.pop-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-subtle);
  font-weight: 600; padding: 8px 10px 6px; }
.pop-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  transition: .1s; }
.pop-item:hover { background: var(--purple-active-bg); }
.pop-item .pi-ico { width: 30px; height: 30px; border-radius: 7px; background: #f4f4f6; display: flex;
  align-items: center; justify-content: center; flex: none; color: var(--fg-muted); }
.pop-item.on .pi-ico { background: var(--purple-active-bg-strong); color: var(--purple-600); }
.pop-item .pi-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); display: flex; align-items: center; gap: 7px; }
.pop-item .pi-tier { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--purple-600); background: var(--purple-active-bg); border-radius: 4px; padding: 1px 5px; }
.pop-item .pi-desc { font-size: 12px; color: var(--fg-subtle); margin-top: 1px; }
.pop-item .pi-check { margin-left: auto; color: var(--purple-500); }

/* schedule popover */
.sched { min-width: 320px; padding: 14px; }
.sched .modes { display: flex; gap: 6px; background: #f4f4f6; border-radius: 9px; padding: 4px; margin-bottom: 14px; }
.sched .modes button { flex: 1; height: 32px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
  color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sched .modes button.on { background: #fff; color: var(--purple-600); box-shadow: var(--shadow-xs); }
.sched .frow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sched .frow > label { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.sched .ipt { border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 10px; font-size: 13.5px;
  font-family: inherit; color: var(--fg); outline: none; width: 100%; background: #fff; }
.sched .ipt:focus { border-color: var(--purple-400); }
.sched .two { display: flex; gap: 8px; }
.sched .two > * { flex: 1; }
.sched .note { font-size: 12px; color: var(--fg-muted); line-height: 1.5; background: var(--purple-100);
  border: 1px solid var(--purple-200); border-radius: 8px; padding: 9px 11px; display: flex; gap: 8px; align-items: flex-start; }
.sched .note .ic { color: var(--purple-500); flex: none; margin-top: 1px; }
.sched .sched-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.daypick { display: flex; gap: 5px; }
.daypick button { flex: 1; height: 30px; border-radius: 6px; border: 1px solid var(--border-strong); background: #fff;
  font-size: 11.5px; color: var(--fg-muted); font-weight: 500; transition: .1s; }
.daypick button.on { background: var(--purple-500); color: #fff; border-color: var(--purple-500); }

/* ---- RIGHT: site context + tabs ---- */
.ctx-graph { flex: none; }
.ctx-graph .cg-hd { display: flex; align-items: center; gap: 8px; padding: 13px 16px 8px; }
.ctx-graph .cg-hd .ttl { font-size: 13px; font-weight: 600; color: var(--fg-strong); white-space: nowrap; flex: none; }
.ctx-graph .cg-hd .spacer { flex: 1; }
.ctx-graph .cg-cap { font-size: 11.5px; color: var(--fg-subtle); padding: 0 16px 12px; }
.ctx-graph .cg-cap b { color: var(--fg); font-weight: 600; }
.cmini { position: relative; height: 210px; margin: 0 12px 12px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: radial-gradient(circle at 50% 45%, #f4f6fe 0%, #f6f5f4 78%); }

/* search box under the "Arte AI" panel header */
.ctx-search { display: flex; align-items: center; gap: 7px; margin: 0 14px 12px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-canvas); }
.ctx-search input { border: none; outline: none; background: none; font-size: 13px; font-family: inherit;
  color: var(--fg); width: 100%; }
.ctx-search input::placeholder { color: var(--fg-faint); }

/* context panel sections */
.ctx-section { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ctx-sec-hd { display: flex; align-items: center; gap: 7px; padding: 9px 14px 7px; flex: none;
  font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.ctx-sec-hd .spacer { flex: 1; }
.ctx-sec-hd .ct { font-weight: 400; color: var(--fg-faint); }
.ctx-sec-list { flex: 1; overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.ctx-divider { flex: none; height: 1px; background: var(--border); }

/* session rows */
.srow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; transition: .1s; }
.srow:hover { background: #f4f6fe; border-color: var(--border); }
.srow.active { background: var(--purple-active-bg); border-color: var(--purple-300); }
.srow-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; margin-top: 5px; }
.srow-dot.pulse { animation: sdot-pulse 1.8s ease-in-out infinite; }
@keyframes sdot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.srow-main { flex: 1; min-width: 0; }
.srow-label { font-size: 12.5px; font-weight: 500; color: var(--fg-strong); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow.active .srow-label { color: var(--purple-700); }
.srow-cancel { flex: none; opacity: 0; width: 20px; height: 20px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; color: var(--fg-faint); transition: .1s;
  margin-top: 1px; }
.srow:hover .srow-cancel { opacity: 1; }
.srow-cancel:hover { background: var(--sev-critical-bg); color: var(--posture-immediate); }
.srow-confirm { display: flex; align-items: center; gap: 5px; flex: none; margin-top: 1px; }
.srow-confirm span { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; }
.srow-confirm-yes { font-size: 11.5px; font-weight: 600; color: var(--posture-immediate);
  background: var(--sev-critical-bg); border-radius: 5px; padding: 2px 7px; }
.srow-confirm-no { font-size: 11.5px; color: var(--fg-muted); border-radius: 5px; padding: 2px 7px; }
.srow-confirm-no:hover { background: #f0f0f2; }

/* Knowledge Base integration cards + their expanded member rows */
/* align-items: start — grid items default to stretch, which would make
   every card in a row match the tallest one (i.e. an expanded neighbor)
   even though its own content doesn't fill that height. */
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  align-items: start; }
/* No overflow:hidden here — the description tooltip below needs to be able
   to escape the card's box rather than get clipped at its edge. */
.integ-card { border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: .12s; }
.integ-card:hover { border-color: var(--purple-300); }
.integ-card-hd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; text-align: left; }
.integ-card-hd:disabled { cursor: default; }
.integ-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; background: #f4f4f6; color: var(--fg-muted); }
.integ-ico img { width: 18px; height: 18px; object-fit: contain; }
.integ-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.integ-tag { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  border-radius: 4px; padding: 2px 6px; }
.integ-tag.read { background: var(--purple-active-bg); color: var(--primary); }
.integ-tag.write { background: #fff4ec; color: var(--warn); }
.integ-card-body { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 5px; }

.crow { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent;
  transition: .1s; cursor: pointer; }
.crow:hover { background: #f4f6fe; border-color: var(--border); }
.crow .cmain { flex: 1; min-width: 0; }
.crow .cname { font-size: 13px; font-weight: 600; color: var(--fg-strong); display: flex; align-items: center; gap: 7px; }
.crow .csub { font-size: 11.5px; color: var(--fg-subtle); margin-top: 1px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.crow .cadd { opacity: 0; color: var(--purple-500); transition: .1s; flex: none; }

/* Truncated description + an instant hover tooltip for the full text —
   a native title attribute would work too, but browsers delay it ~1s. */
.csub-wrap { position: relative; min-width: 0; }
.csub-tooltip { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; max-width: 320px;
  background: var(--fg-strong); color: #fff; font-size: 12px; line-height: 1.5; white-space: normal;
  padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow-sm), 0 8px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .08s ease; pointer-events: none; }
.csub-wrap:hover .csub-tooltip { opacity: 1; visibility: visible; }
.crow:hover .cadd { opacity: 1; }
.crow.static { cursor: default; }
.crow.static:hover { background: none; border-color: transparent; }

.risk-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border-radius: 4px;
  padding: 1px 5px; }
.risk-tag.low { background: var(--good-bg); color: var(--good-2); }
.risk-tag.medium { background: #fff4ec; color: var(--warn); }
.risk-tag.high { background: var(--sev-critical-bg); color: var(--sev-critical); }

.kind-tag { font-size: 11px; color: var(--fg-subtle); }

.cfoot { flex: none; padding: 10px 14px; border-top: 1px solid var(--border); }
.cfoot .add-src { width: 100%; height: 34px; border: 1px dashed var(--border-strong); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--fg-muted);
  transition: .12s; }
.cfoot .add-src:hover { border-color: var(--purple-400); color: var(--purple-500); background: #f4f6fe; }

/* agent cadence chip */
.cad { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--purple-600);
  background: var(--purple-active-bg); border-radius: 5px; padding: 1px 7px; }

/* ---- Compact density ---- */
.app.compact .thread { gap: 14px; }
.app.compact .crow { padding: 7px 10px; }

/* scrim for popovers */
.pop-scrim { position: fixed; inset: 0; z-index: 55; }

/* ============================================================
   Bot-turn avatar — the platform's own logo mark, in a soft circular
   badge, so replies are clearly attributed to Picasso.
   Usage: <div class="orb" style="--size:30px"><img .../></div>
   ============================================================ */
.orb {
  --size: 30px;
  width: var(--size);
  height: var(--size);
  border-radius: var(--r-sm);
  flex: none;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.orb img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* ============================================================
   Fresh-start state — centered hero (no conversation yet)
   ============================================================ */
.wb-chat.start { justify-content: center; align-items: center; overflow-y: auto; padding: 32px 28px; }
.start-hero { width: 100%; max-width: 720px; margin: auto; display: flex; flex-direction: column; }

.start-head { text-align: center; margin-bottom: 22px; }
.start-head h1 { font-family: var(--font-grotesk); font-size: 40px; font-weight: 500; letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--purple-600), var(--purple-300));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the composer sits in the flow here (not pinned to the bottom) */
.wb-chat.start .composer-wrap { flex: none; padding: 0; }
.wb-chat.start .composer { max-width: 720px; }

/* "Recommended for you" — left-aligned floating pills, per Figma */
.start-suggest { margin-top: 24px; text-align: left; }
.ss-label { font-size: 13px; font-weight: 500; color: var(--purple-600); margin-bottom: 10px; }
.rec-list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.rec-pill { display: inline-flex; align-items: center; gap: 24px; max-width: 100%; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--bg-canvas); border: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.16); font-size: 13.5px; color: var(--fg-strong); text-align: left; transition: .12s; }
.rec-pill:hover { background: #eef0f2; }

/* ---- Grouped call card (data sources + settled tool actions) ---- */
/* Consecutive same-kind calls (see CallSegments/GroupedCallCard in Chat.jsx)
   group into one card, each call as its own row — a blinking dot while
   running, a check or x once it settles. Indented to align with bot bubble
   content (avatar=30px + gap=12px). */
.src-card { margin: 0 0 5px 42px; max-width: 560px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-canvas); overflow: hidden; }
.src-card-hd { padding: 9px 14px 5px; font-size: 10.5px; font-weight: 600; color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .04em; }
.src-card-list { display: flex; flex-direction: column; }
.src-row { border-top: 1px solid var(--border); }
.src-card-list .src-row:first-child { border-top: none; }
.src-row-main { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 14px;
  text-align: left; font-size: 12.5px; color: var(--fg); }
.src-row-main:hover { background: rgba(0,0,0,0.02); }
.src-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-row-desc { color: var(--fg-subtle); }
.src-row-status { flex: none; width: 16px; display: flex; align-items: center; justify-content: center; }
.src-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); animation: sdot-pulse 1.4s ease-in-out infinite; }
.src-row-body { padding: 0 14px 9px 37px; display: flex; flex-direction: column; gap: 3px; }

/* ---- Pending-approval card — per Figma's approval-card frame: each step
   its own bordered white box, standing out against the card's grey ground.
   Same grey as .src-card/.tcall-group result cards, for visual consistency
   between "what happened" and "what's waiting on you" cards. ---- */
.pending-card { margin: 0 0 5px 42px; max-width: 560px; border: 1px solid var(--purple-200); border-radius: 12px;
  background: var(--bg-canvas); padding: 16px 18px; transition: box-shadow .2s; }
.pending-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pending-card-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--purple-100);
  display: flex; align-items: center; justify-content: center; }
.pending-card-title { font-size: 14px; font-weight: 600; color: var(--fg-strong); }
.pending-card-steps { display: flex; flex-direction: column; gap: 8px; }
.pending-step { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; }
.pending-check { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1px solid var(--purple-300);
  background: var(--purple-100); display: flex; align-items: center; justify-content: center; transition: .12s; }
.pending-check:hover { border-color: var(--primary); }
.pending-check.on { background: var(--primary); border-color: var(--primary); }
.pending-step-body { flex: 1; min-width: 0; cursor: pointer; }
.pending-step-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pending-step-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pending-step-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.pending-step-desc { font-size: 12px; color: var(--fg-subtle); margin-top: 2px; }
.pending-step-args { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.pending-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* A row whose job was decided elsewhere (e.g. Action Center) before the
   session's own snapshot caught up — see PendingApprovalCard's comment. */
.pending-step.settled { opacity: .55; }
.pending-check.settled { cursor: default; }
.pending-check.settled:hover { border-color: var(--purple-300); }
.pending-step-settled-tag { flex: none; font-size: 11px; color: var(--fg-faint); font-style: italic; }

/* A predictive read on the outcome the moment the user clicks Approve/Dismiss
   — the card reacts immediately rather than sitting idle through the request
   and the (much longer) wait for the session snapshot to catch up. Light,
   color-tinted ambient shadows layered on the existing --shadow-xs base,
   matching the frosted-panel shadow pattern rather than a heavy solid glow. */
.pending-card.decided-approved { box-shadow: var(--shadow-xs), 0 0 0 1px rgba(22,163,74,.15), 0 6px 18px rgba(22,163,74,.14); }
.pending-card.decided-denied   { box-shadow: var(--shadow-xs), 0 0 0 1px rgba(220,38,38,.15), 0 6px 18px rgba(220,38,38,.14); }
.pending-card.decided-partial  { box-shadow: var(--shadow-xs), 0 0 0 1px rgba(217,119,6,.15), 0 6px 18px rgba(217,119,6,.14); }

.pending-decision-tag { margin-left: auto; flex: none; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill); }
.pending-decision-tag.approved { background: rgba(22,163,74,.12); color: #16a34a; }
.pending-decision-tag.denied   { background: rgba(220,38,38,.12); color: #dc2626; }
.pending-decision-tag.partial  { background: rgba(217,119,6,.12); color: #d97706; }

/* ---- Shared key/value styling for expanded call arguments ---- */
/* Used by both .src-row-body (GroupedCallRow) and .pending-step-args
   (PendingApprovalRow) expand sections. */
.tcall-arg { display: flex; gap: 10px; font-size: 12px; font-family: var(--font-mono, monospace);
  line-height: 1.5; }
.tcall-k { color: var(--purple-600); flex: none; min-width: 72px; }
.tcall-v { color: var(--fg); word-break: break-all; }

/* ---- Thinking / typing indicator ---- */
.typing-indicator { display: flex; align-items: center; gap: 8px; }
.typing-label { font-size: 13px; color: var(--fg-muted); font-style: italic; }
.typing-dots { display: flex; align-items: center; gap: 5px; padding: 5px 2px; height: 28px; }
.typing-dots span { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-400);
  animation: tdot 1.3s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes tdot {
  0%, 55%, 100% { transform: translateY(0); opacity: .3; }
  28%            { transform: translateY(-7px); opacity: 1; }
}

/* ============================================================
   Settings screen — shared section chrome (Model Registry, Permissions)
   Also the shared "translucent glass panel" treatment for every
   non-chat view and the global composer bar — see .wb below for Chat's
   equivalent (there the whole two-column body is the one glass panel).
   ============================================================ */
.settings-screen, .actioncenter-screen, .knowledgecenter-screen, .wb {
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-sm), 0 8px 24px rgba(30,42,92,0.06);
}
.settings-screen, .actioncenter-screen, .knowledgecenter-screen {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-top: 6px; }
.settings-inner, .knowledgecenter-inner {
  width: 100%; max-width: 880px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 24px; }

/* Approvals' two-pane body (list + detail) manages its own internal scroll
   (.qlist / .approval-detail-body) rather than the whole-screen scroll every
   other Action Center tab and Settings/Knowledge Base use — the header row
   above it needs to stay put, and a "large" side panel needs the full
   available width rather than the shared 880px-capped .*-inner column. */
.actioncenter-screen { overflow: hidden; }

.settings-section { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.settings-section-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.settings-section-hd h3 { font-size: 15px; font-weight: 600; color: var(--fg-strong); }
.settings-section-hd p { font-size: 12.5px; color: var(--fg-subtle); margin-top: 3px; line-height: 1.5; }

.mr-table { display: flex; flex-direction: column; }
.mr-row { display: grid; grid-template-columns: 1.4fr 0.9fr 1.2fr 1.3fr 0.8fr 76px; gap: 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--border); }
.mr-row:last-child { border-bottom: none; }
.mr-head { background: #fafafa; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-subtle); }
.mr-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.mr-provider { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); }
.mr-mono { font-size: 12px; font-family: var(--font-mono, monospace); color: var(--fg-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mr-updated { font-size: 12px; color: var(--fg-subtle); }
.mr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* ---- Model add/edit dialog ---- */
.mr-modal { width: 460px; }
.mr-form-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mr-frow { display: flex; flex-direction: column; gap: 6px; }
.mr-frow > label { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.mr-optional { font-weight: 400; color: var(--fg-faint); }
.mr-ipt { border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 10px; font-size: 13.5px;
  font-family: inherit; color: var(--fg); outline: none; width: 100%; background: #fff; }
.mr-ipt:focus { border-color: var(--purple-400); }
.mr-hint { font-size: 11.5px; color: var(--fg-subtle); }
.mr-form-error { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--posture-immediate);
  background: var(--sev-critical-bg); border-radius: 7px; padding: 8px 10px; }

.provider-pick { display: flex; gap: 6px; }
.provider-opt { flex: 1; height: 34px; border-radius: 7px; border: 1px solid var(--border-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--fg-muted);
  transition: .12s; }
.provider-opt:hover { border-color: var(--purple-400); color: var(--purple-500); }
.provider-opt.on { background: var(--purple-active-bg); color: var(--purple-600); border-color: var(--purple-400); font-weight: 500; }

/* ---- Permissions section ---- */
.perm-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); }
.perm-catalog-hint { font-size: 12px; color: var(--fg-subtle); line-height: 1.5; }
.perm-identity-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fafafa; }
.perm-identity-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 12px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: #fff; cursor: pointer; transition: .12s; }
.perm-identity-pick:hover { border-color: var(--purple-400); }
.perm-identity-pick.on { border-color: var(--purple-400); background: var(--purple-active-bg); }
.perm-identity-name { font-size: 13px; font-weight: 600; color: var(--fg-strong); }
.perm-identity-email { font-size: 11px; color: var(--fg-subtle); }

.perm-group-hd { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-subtle);
  padding: 10px 20px; background: #fafafa; border-bottom: 1px solid var(--border); }
.perm-row { display: grid; grid-template-columns: 1.3fr 1.7fr auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--border); }
.perm-row:last-child { border-bottom: none; }
.perm-row-name { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.perm-row-desc { font-size: 12px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.decision-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; }
.decision-opt { font-size: 11.5px; font-weight: 600; padding: 6px 11px; color: var(--fg-muted); background: #fff;
  border-right: 1px solid var(--border-strong); }
.decision-opt:last-child { border-right: none; }
.decision-opt:hover { background: #f4f6fe; }
.decision-opt.on.allow { background: var(--good-bg); color: var(--good-2); }
.decision-opt.on.ask { background: #fff4ec; color: var(--warn); }
.decision-opt.on.deny { background: var(--sev-critical-bg); color: var(--sev-critical); }
.decision-opt.on.clear { background: #f0f0f2; color: var(--fg-muted); }

.perm-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: #f4f6fe; border-top: 1px solid var(--border); }
.perm-save-count { font-size: 12.5px; color: var(--fg-muted); }

.perm-reason-ipt { border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 10px; font-size: 13.5px;
  font-family: inherit; color: var(--fg); outline: none; width: 100%; min-height: 90px; resize: vertical; background: #fff; }
.perm-reason-ipt:focus { border-color: var(--purple-400); }

/* -- Integrations panel -- */

.int-banner { display: flex; align-items: center; gap: 8px; margin: 14px 20px 0; padding: 10px 14px;
  border-radius: 8px; font-size: 13px; }
.int-banner.ok { background: var(--good-bg); color: var(--good-2); }
.int-banner.warn { background: #fff4ec; color: var(--warn); }

.int-cards { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.int-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.int-card-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fafafa;
  border-bottom: 1px solid var(--border); font-size: 13.5px; }

.int-row { display: grid; grid-template-columns: 1.6fr auto auto auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); }
.int-row:last-child { border-bottom: none; }
.int-row-main { display: flex; flex-direction: column; gap: 2px; }
.int-row-purpose { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.int-row-org { font-weight: 400; color: var(--fg-subtle); }
.int-row-help { font-size: 11.5px; color: var(--fg-subtle); }
.int-row-updated { font-size: 12px; color: var(--fg-subtle); white-space: nowrap; }
.int-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.int-badge { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  border-radius: 5px; padding: 3px 8px; white-space: nowrap; }
.int-badge.off { background: #f0f0f2; color: var(--fg-subtle); }
.int-badge.on { background: var(--good-bg); color: var(--good-2); }
.int-badge.paused { background: #fff4ec; color: var(--warn); }
.int-badge.pending { background: var(--sev-critical-bg); color: var(--sev-critical); }

.int-mode-pick { display: flex; gap: 6px; padding: 18px 20px 0; }
.int-connect-copy { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.int-textarea { min-height: 90px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 12.5px; }
.int-script-box { position: relative; }
.int-script-box .int-textarea { padding-right: 100px; }
.int-copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 8px; font-size: 11.5px; }
.int-cloud-shell-btn { align-self: flex-start; margin-top: 4px; text-decoration: none; }