/* ============================================================
   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: 1000px; 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; }

.log-state { justify-self: start; font-size: 11px; font-weight: 600; text-transform: capitalize;
  border-radius: 999px; padding: 2px 9px; background: var(--bg-canvas); color: var(--fg-muted); }
.log-state.completed { background: var(--good-bg); color: var(--good-2); }
.log-state.failed, .log-state.rejected, .log-state.denied { background: var(--sev-critical-bg); color: var(--posture-immediate); }

/* Action log — table view (mirrors Settings.jsx's .mr-table grid convention)
   plus a filter-by-session-title toolbar above it. Rows open ActionLogDetailPanel,
   which reuses .approval-detail as-is. */
.alog-toolbar { max-width: 880px; margin: 0 auto 10px; display: flex; align-items: center; gap: 8px; }
.alog-search { flex: 1; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-canvas); }
.alog-search input { border: none; outline: none; background: none; font-size: 13px; font-family: inherit;
  color: var(--fg); width: 100%; }
.alog-search input::placeholder { color: var(--fg-faint); }
.alog-user-sel { position: relative; flex: none; }

.alog-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; overflow: hidden; }
.alog-row { display: grid; grid-template-columns: 1.8fr 1.4fr 130px 130px 130px 130px 150px; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 10px 20px; border: none; border-bottom: 1px solid var(--border);
  background: none; transition: .12s; }
.alog-row:last-child { border-bottom: none; }
.alog-row:not(.alog-head):hover { background: var(--bg-canvas); cursor: pointer; }
.alog-row.active { background: var(--purple-active-bg); }
.alog-head { background: #fafafa; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fg-subtle); cursor: default; }
.alog-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fg-strong); }
.alog-session { font-size: 13px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-requested-by { font-size: 12px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-changed-by { font-size: 12px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-changed-at { font-size: 12px; color: var(--fg-subtle); }
.alog-time { font-size: 12px; color: var(--fg-subtle); }

.alog-loaded-hint { max-width: 880px; margin: 8px auto 0; font-size: 12px; color: var(--fg-subtle); text-align: center; }
.alog-load-more { max-width: 880px; margin: 10px auto 0; display: flex; justify-content: center; }

/* ---- Top Priority ("Work Queue") — toolbar + table + hover Fix/Continue
   action. Reuses .qlist/.qlist-inner/.actioncenter-body/.approval-detail
   rules as-is (see the alog- and approval- prefixed rules directly above
   and below) — only the toolbar, table rows, and a couple of detail-panel
   wells below are new, prefixed .wq- to match the per-tab alog-/appr-
   convention already used in this file. */
.wq-toolbar { width: 100%; max-width: 1000px; margin: 0 auto 10px; display: flex; flex-wrap: nowrap;
  align-items: center; gap: 8px; }
.wq-toolbar .spacer { flex: 1; }
.wq-search { flex: none; width: 220px; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-canvas); }
.wq-search input { border: none; outline: none; background: none; font-size: 13px; font-family: inherit;
  color: var(--fg); width: 100%; }
.wq-search input::placeholder { color: var(--fg-faint); }
.wq-filter-sel { position: relative; flex: none; }

.wq-cols { display: grid; grid-template-columns: 112px 200px 1fr 130px 150px 130px; gap: 14px; align-items: center; }
.wq-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; overflow: hidden; }
.wq-thead { padding: 10px 20px; background: #fafafa; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--fg-subtle); }

.wq-row { position: relative; width: 100%; text-align: left; padding: 12px 20px; border: none;
  border-bottom: 1px solid var(--border); background: #fff; cursor: pointer; transition: background .15s ease;
  overflow: hidden; }
.wq-table .wq-row:last-child { border-bottom: none; }
/* Resolved rows have no Fix/Continue action to reveal (see WorkQueueRow,
   which omits .wq-row-fix entirely once state === "resolved") — the hover
   gradient and date fade only make sense when there's something to reveal
   underneath them, so both are scoped off resolved rows here. */
.wq-row:not(.wq-row-resolved):hover { background: linear-gradient(90deg, #fff 55%, var(--purple-100) 100%); }
.wq-row.active { background: var(--purple-active-bg); }

.wq-sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; justify-self: start; }
.wq-sev-critical { background: var(--sev-critical-bg); color: var(--sev-critical); }
.wq-sev-high     { background: var(--sev-high-bg);     color: var(--sev-high); }
.wq-sev-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium); }
.wq-sev-low      { background: var(--sev-low-bg);      color: var(--sev-low); }

.wq-row-title { min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg-strong); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wq-row-desc { min-width: 0; font-size: 12px; color: var(--fg-subtle); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wq-row-submitted { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px;
  color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-row-avatar { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--bg-canvas);
  display: inline-flex; align-items: center; justify-content: center; }

/* The Created column doubles as the hover-revealed Fix/Continue action —
   the date fades out and a gradient button slides in over it from the
   right, same translateX-on-open technique .approval-detail-inner uses for
   its own slide-in (see below). Stretched to the row's full height (not
   just the text line) so the button centers inside something tall enough
   to actually look like a button once it's visible. */
.wq-row-created-wrap { position: relative; align-self: stretch; min-width: 90px; overflow: hidden; }
.wq-row-created { position: absolute; inset: 0; display: flex; align-items: center; font-size: 12px;
  color: var(--fg-subtle); transition: opacity .2s ease; }
.wq-row:not(.wq-row-resolved):hover .wq-row-created { opacity: 0; }
.wq-row-fix { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
  transform: translateX(calc(100% + 12px)); transition: transform .25s ease; }
.wq-row:not(.wq-row-resolved):hover .wq-row-fix { transform: translateX(0); }

/* .btn-sm.wq-fix-btn (not just .wq-fix-btn): the button also carries the
   shared .btn-sm class, whose own border-radius/padding (declared later in
   this file, same 0,1,0 specificity as a bare .wq-fix-btn) would otherwise
   win the cascade and silently flatten these back to .btn-sm's defaults. */
.btn-sm.wq-fix-btn { background: linear-gradient(135deg, var(--purple-500), var(--violet-600), #ec4899); color: #fff;
  border: none; border-radius: var(--r-lg); padding: 9px 18px; min-height: 38px; font-weight: 600; }
.wq-fix-btn:hover:not(:disabled) { filter: brightness(1.06); }
.wq-fix-btn:disabled { opacity: .5; cursor: default; }

/* State pill / dropdown — shared by the list row and the detail header. A
   transparent native <select> sits on top as the real click/keyboard
   target; the icon+label+chevron underneath is what's visible. */
/* Rectangle (not a capsule/pill) with rounded corners — a light grey border
   is added only when the state is actually changeable, so the control reads
   as "this is a button" rather than a static label. Only the icon is
   colored per-state (see WqStateDropdown, which passes an explicit `color`
   to the Icon); the label itself stays the default text color regardless of
   state. */
.wq-state-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-sm);
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; background: var(--bg-canvas); color: var(--fg-strong);
  white-space: nowrap; border: 1px solid transparent; }
.wq-state-pill:not(.disabled) { border-color: var(--border); }
.wq-state-pill.disabled { opacity: .6; }
/* A light, state-tinted background only — border stays the neutral grey
   above and the label stays var(--fg-strong) (set on .wq-state-pill
   itself), so only the fill hints at state, kept subtle rather than the
   old fully-saturated per-state pill. */
.wq-state-pill.wq-state-unresolved { background: var(--sev-medium-bg); }
.wq-state-pill.wq-state-in_progress { background: var(--purple-active-bg); }
.wq-state-pill.wq-state-resolved { background: var(--good-bg); }
.wq-state-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; margin: 0;
  padding: 0; cursor: pointer; }
.wq-state-sel:disabled { cursor: default; }

/* Toggle switch ("Show Completed") — no existing switch component in the
   codebase to reuse (Integrations.jsx's enable/disable is a play/pause
   icon button, not a switch), so this is new. */
.wq-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none; flex: none; }
.wq-toggle.disabled { cursor: default; opacity: .6; }
.wq-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wq-toggle-track { width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong);
  position: relative; transition: background .15s ease; flex: none; }
.wq-toggle input:checked + .wq-toggle-track { background: var(--purple-500); }
.wq-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform .15s ease; }
.wq-toggle input:checked + .wq-toggle-track .wq-toggle-thumb { transform: translateX(14px); }
.wq-toggle-label { font-size: 13px; color: var(--fg-muted); }

/* Pager — page-numbered, distinct from Action Log's infinite "Load more". */
.wq-pager-row { width: 100%; max-width: 1000px; margin: 12px auto 0; display: flex; align-items: center;
  justify-content: space-between; }
.wq-pager-count { font-size: 12.5px; color: var(--fg-subtle); }
.wq-pager { display: flex; align-items: center; gap: 4px; }
.wq-pager-num { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 12.5px;
  font-weight: 500; color: var(--fg-muted); }
.wq-pager-num:hover { background: var(--bg-canvas); color: var(--fg-strong); }
.wq-pager-num.on { background: var(--purple-500); color: #fff; font-weight: 600; }
.wq-pager-ellipsis { padding: 0 4px; color: var(--fg-faint); font-size: 12.5px; }

/* Detail-panel wells specific to Top Priority — Risk metrics / Chat Session
   Data / Description / Timeline. A true 2x2 CSS grid (not two independently-
   flowing columns of two stacked sections): Risk Metrics/Chat Session Data
   and Description/Timeline are direct grid children in that reading order,
   so each row's track height is the max of its two cells — the two wells in
   a row start and end aligned regardless of which has more content — and
   each .approval-section stretches (align-items' default is stretch) to
   fill that row height, with its own body flexed so a shorter well's card
   still extends to match its taller row-mate (see .approval-section below).
   Row 1 (Risk Metrics / Chat Session Data) is a fixed, content-driven
   height ("auto") rather than sharing the grid's total height equally with
   row 2 — both have a small, fixed number of lines and don't need to grow.
   Row 2 (Description / Timeline) gets the rest ("1fr") and grows as needed;
   its own two cells are still equal height for free, since that's just one
   grid row. */
.wq-detail-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 20px; }
.wq-detail-grid .approval-section { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.wq-detail-grid .approval-section-body { flex: 1; }

/* Risk metrics — two columns (Ranking | Category & Source) split by a
   vertical divider, rather than the well's own internal flex-row. Selector
   combines both classes (.approval-section-body.wq-riskmetrics) so this
   outranks the shared .approval-section-body's own `display: flex` — same
   specificity otherwise, and .approval-section-body is declared later in
   this file, so it would win the tie and silently flatten the grid back to
   a single flex column. */
.approval-section-body.wq-riskmetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; }
.wq-riskmetrics::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%;
  width: 1px; background: var(--border); }
.wq-metric { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wq-metric-label { font-size: 11px; color: var(--fg-subtle); }
.wq-metric-value { font-size: 18px; font-weight: 600; color: var(--fg-strong); }
.wq-metric-bar { height: 5px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.wq-metric-fill { display: block; height: 100%; border-radius: 999px; }
.wq-sev-fill-critical { background: var(--sev-critical); }
.wq-sev-fill-high     { background: var(--sev-high); }
.wq-sev-fill-medium   { background: var(--sev-medium); }
.wq-sev-fill-low      { background: var(--sev-low); }
.wq-cat-badge { display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; border-radius: 5px; padding: 2px 7px; background: var(--purple-active-bg);
  color: var(--purple-600); }
.wq-metric-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-muted); }
.wq-metric-detected { font-size: 11.5px; color: var(--fg-faint); }
.wq-desc { white-space: pre-line; }

.wq-session-title { font-size: 13.5px; font-weight: 500; color: var(--fg-strong); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-session-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--fg-muted); }
.wq-session-meta span { display: inline-flex; align-items: center; gap: 5px; }

.wq-timeline { gap: 0; padding: 4px 4px; overflow-y: auto; }
.wq-timeline-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 4px; }
.wq-timeline-row:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: -8px;
  width: 1px; background: var(--border); }
/* Default (in-progress/submitted/etc): a hollow, no-fill checkmark in a
   round outline frame, in the "in progress" blue rather than green — only
   an actual resolution (.wq-timeline-dot-resolved) gets the solid filled
   green dot with a white checkmark. */
.wq-timeline-dot { flex: none; width: 20px; height: 20px; border-radius: 999px; background: #fff;
  border: 1.5px solid var(--purple-500); display: flex; align-items: center; justify-content: center;
  margin-top: 1px; }
.wq-timeline-dot-resolved { background: var(--good); border-color: var(--good); }
.wq-timeline-main { flex: 1; min-width: 0; }
.wq-timeline-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--fg-faint); }
.wq-timeline-text { font-size: 13px; color: var(--fg); margin-top: 1px; }
.wq-timeline-time { flex: none; font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; margin-top: 2px; }
.wq-timeline-action-status { display: inline-flex; align-items: center; gap: 4px; }

/* 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; }

/* ---- Coding agent live log well — a small dark terminal-style well for
   the last few lines soap-coding-agent has printed. Folded into a
   GroupedCallRow once its call is actually running (see Chat.jsx's
   CodingAgentLogWell), not a separate card of its own. ---- */
.coding-agent-log-well { margin: 0 14px 9px; padding: 8px 10px; background: #1b1e27; color: #d7dae2;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; border-radius: 6px;
  max-height: 140px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.coding-agent-log-well.empty { color: #8890a0; font-style: italic; }

/* ---- 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 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 34px 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); display: flex; align-items: center; gap: 8px; }
.mr-default-pill { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--purple-500); background: var(--purple-50, #f4f0ff); border-radius: 999px; padding: 2px 8px; }
.mr-default-banner { display: flex; align-items: center; gap: 8px; margin: 12px 20px 0; padding: 10px 14px;
  border-radius: 8px; background: var(--posture-immediate-bg, #fdecea); color: var(--posture-immediate); font-size: 12.5px; }
.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; }