/*
 * Polygon — Invariant's conversational AI workspace
 * Palette: white, black, and bronze.
 */

:root {
  --polygon-bronze: #CF7A50;
  --polygon-bronze-soft: rgba(207, 122, 80, 0.16);
  --polygon-bronze-glow: rgba(207, 122, 80, 0.28);
  --polygon-bronze-deep: #B0623B;

  --polygon-ink: #0B0B0C;
  --polygon-ink-raised: #141416;
  --polygon-ink-raised-2: #1C1C1F;
  --polygon-ink-border: rgba(255, 255, 255, 0.08);
  --polygon-ink-border-strong: rgba(255, 255, 255, 0.14);

  --polygon-paper: #FFFFFF;
  --polygon-paper-2: #F6F5F2;
  --polygon-paper-border: rgba(0, 0, 0, 0.08);

  --polygon-text: #F4F2EE;
  --polygon-text-dim: rgba(244, 242, 238, 0.62);
  --polygon-text-mute: rgba(244, 242, 238, 0.38);

  --polygon-radius-sm: 8px;
  --polygon-radius-md: 12px;
  --polygon-radius-lg: 18px;
  --polygon-radius-xl: 26px;

  --polygon-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --polygon-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.55);

  --polygon-sidebar-width: 264px;
  --polygon-topbar-height: 56px;

  --polygon-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --polygon-font-display: 'Fraunces', 'Inter', serif;
  --polygon-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --polygon-bg: var(--polygon-ink);
  --polygon-surface: var(--polygon-ink-raised);
  --polygon-surface-2: var(--polygon-ink-raised-2);
  --polygon-border: var(--polygon-ink-border);
  --polygon-border-strong: var(--polygon-ink-border-strong);
  /* The app renders inside a rounded card; this is the ambient frame color
     peeking around it. Kept a notch darker than the app surface so the card
     edge reads as a soft shadow rather than a hard seam. */
  --polygon-frame-bg: #050506;
  --polygon-frame-pad: 14px;
}

[data-theme="light"] {
  --polygon-bg: var(--polygon-paper);
  --polygon-surface: #FBFAF7;
  --polygon-surface-2: #F1EFEA;
  --polygon-border: var(--polygon-paper-border);
  --polygon-border-strong: rgba(0, 0, 0, 0.14);
  --polygon-text: #141313;
  --polygon-text-dim: rgba(20, 19, 19, 0.62);
  --polygon-text-mute: rgba(20, 19, 19, 0.4);
  --polygon-frame-bg: #EAE7E1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--polygon-text);
  font-family: var(--polygon-font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The html element is the ambient frame: a darker backdrop with soft
   padding that lets the app render as a single centered card, Ollama-
   style. On narrow viewports the padding collapses to 0 so the card
   goes edge-to-edge and no screen real estate is wasted. */
html {
  height: 100vh;
  height: 100dvh;
  background: var(--polygon-frame-bg);
  padding: var(--polygon-frame-pad);
  overflow: hidden;
}

.polygon-body {
  display: grid;
  grid-template-columns: var(--polygon-sidebar-width) 1fr;
  height: 100%;
  overflow: hidden;
  background: var(--polygon-bg);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45),
              0 2px 6px rgba(0, 0, 0, 0.25);
  transition: grid-template-columns 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.polygon-body.polygon-sidebar-collapsed {
  grid-template-columns: 0px 1fr;
}

/* --- Sidebar --- */
.polygon-sidebar {
  background: var(--polygon-surface);
  border-right: 1px solid var(--polygon-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-width: 0;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 220ms ease,
              border-color 220ms ease;
}

/* Tap-to-close scrim for the mobile sidebar overlay. Sits between the
   sidebar (z-index 1200) and the rest of the app, covering the stage when
   the sidebar is visible. Hidden on desktop and when the sidebar is
   collapsed. */
.polygon-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.polygon-sidebar-collapsed .polygon-sidebar {
  transform: translateX(-8px);
  opacity: 0;
  pointer-events: none;
  border-right-color: transparent;
}

/* Keep inner content at fixed width so nothing reflows while the grid animates. */
.polygon-sidebar-header,
.polygon-sidebar .polygon-nav,
.polygon-sidebar .polygon-sidebar-section,
.polygon-sidebar .polygon-sidebar-footer {
  width: var(--polygon-sidebar-width);
  flex-shrink: 0;
}

.polygon-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
}

.polygon-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--polygon-font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--polygon-text);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 140ms ease;
}
.polygon-brand:hover { color: var(--polygon-bronze); }

.polygon-brand-mark {
  color: var(--polygon-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.polygon-nav {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.polygon-nav-sections { margin-top: 8px; }

.polygon-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  color: var(--polygon-text-dim);
  border: none;
  border-radius: var(--polygon-radius-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.polygon-nav-item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--polygon-text-mute);
}

.polygon-nav-item:hover {
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
}

.polygon-nav-item.is-active {
  background: var(--polygon-bronze-soft);
  color: var(--polygon-bronze);
}

.polygon-nav-item.is-active i { color: var(--polygon-bronze); }

.polygon-sidebar-section {
  padding: 14px 18px 4px;
}

.polygon-sidebar-recents {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

.polygon-sidebar-heading {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--polygon-text-mute);
  margin-bottom: 6px;
}

.polygon-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.polygon-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text-dim);
  cursor: pointer;
  font-size: 14px;
  border: none;
  background: transparent;
  text-align: left;
}

.polygon-list-item:hover {
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
}

.polygon-list-item i { color: var(--polygon-text-mute); font-size: 12px; }
.polygon-list-item.is-starred i { color: var(--polygon-bronze); }
.polygon-list-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.polygon-sidebar-footer {
  border-top: 1px solid var(--polygon-border);
  padding: 10px;
}

.polygon-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  transition: background 160ms ease;
}

.polygon-user-card:hover { background: var(--polygon-surface-2); }

.polygon-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.polygon-user-meta { flex: 1; min-width: 0; }
.polygon-user-name { font-size: 14px; font-weight: 500; color: var(--polygon-text); }
.polygon-user-plan { font-size: 11px; color: var(--polygon-text-mute); }

.polygon-user-update {
  position: relative;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  padding: 6px 8px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: all 140ms ease;
}
.polygon-user-update:hover { color: var(--polygon-bronze); border-color: var(--polygon-bronze); }
.polygon-update-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--polygon-bronze);
  box-shadow: 0 0 0 2px var(--polygon-surface);
}

/* --- Main Stage --- */

/* Override hidden so display:flex declarations don't defeat it. */
[hidden] { display: none !important; }

.polygon-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.polygon-topbar {
  height: var(--polygon-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid transparent;
}

.polygon-topbar-center {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

.polygon-topbar-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--polygon-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
  display: inline-block;
  max-width: 80%;
}

.polygon-stage[data-view="chat"] .polygon-topbar-title,
.polygon-stage[data-view="projects"] .polygon-topbar-title,
.polygon-stage[data-view="artifacts"] .polygon-topbar-title,
.polygon-stage[data-view="chats"] .polygon-topbar-title { opacity: 1; }

.polygon-topbar-toggle { display: none; }
.polygon-sidebar-collapsed .polygon-topbar-toggle { display: inline-flex; }

/* Hide home-only affordances once we're in a chat. */
.polygon-stage[data-view="chat"] .polygon-home-only { display: none !important; }

.polygon-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: var(--polygon-text-dim);
  border: none;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.polygon-icon-btn:hover { background: var(--polygon-surface-2); color: var(--polygon-text); }

.polygon-ghost-btn:hover { color: var(--polygon-bronze); }

.polygon-stage-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.polygon-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 20px 12px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* Home view: vertically center the greeting + dock as one group. */
.polygon-stage[data-view="home"] .polygon-stage-body {
  flex: 0 0 auto;
  margin-top: auto;
}
.polygon-stage[data-view="home"] .polygon-home {
  flex: 0 0 auto;
  justify-content: center;
  padding: 0 20px 18px;
}
.polygon-stage[data-view="home"] .polygon-dock {
  margin-bottom: auto;
  padding-top: 0;
}

/* Projects view: no dock, full-bleed list. */
.polygon-stage[data-view="projects"] .polygon-dock { display: none; }

.polygon-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  opacity: 0;
  animation: polygon-greeting-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms forwards;
}

@keyframes polygon-greeting-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.polygon-greeting-mark {
  color: var(--polygon-bronze);
  filter: drop-shadow(0 0 12px var(--polygon-bronze-glow));
}

.polygon-greeting-text {
  margin: 0;
  font-family: var(--polygon-font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.4px;
  color: var(--polygon-text);
}

.polygon-greeting-text span {
  color: var(--polygon-bronze);
  font-style: italic;
}

/* --- Dock (always-visible composer at the bottom of the stage) --- */
.polygon-dock {
  padding: 10px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.polygon-dock > * { width: 100%; max-width: 720px; }

/* --- Code view status bar (above composer) --- */
.polygon-code-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--polygon-text-dim);
  box-shadow: var(--polygon-shadow-soft);
  animation: polygon-statusbar-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.polygon-code-statusbar[hidden] { display: none; }
.polygon-code-statusbar-left,
.polygon-code-statusbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.polygon-code-statusbar-icon { color: var(--polygon-bronze); font-size: 12px; }
.polygon-code-statusbar-base {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  color: var(--polygon-text);
}
.polygon-code-statusbar-arrow { font-size: 10px; opacity: 0.55; }
.polygon-code-statusbar-branch {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  color: var(--polygon-text);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.polygon-code-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.polygon-code-status-chip[hidden] { display: none; }
.polygon-code-status-chip:hover { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }
.polygon-code-status-chip i { font-size: 9px; opacity: 0.75; }
.polygon-code-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--polygon-text-mute);
  display: inline-block;
  flex: 0 0 auto;
}
.polygon-code-status-dot[data-state="success"] { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
.polygon-code-status-dot[data-state="failure"] { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
.polygon-code-status-dot[data-state="pending"] { background: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); animation: pc-pulse 1.4s ease-in-out infinite; }
.polygon-code-status-pr[data-state="merged"] { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.polygon-code-status-pr[data-state="merged"]:hover { color: #fff; opacity: 0.92; }
.polygon-code-status-pr[data-state="closed"] { background: #c1424a; border-color: #c1424a; color: #fff; }
.polygon-code-status-pr[data-state="open"] { background: #2da44e; border-color: #2da44e; color: #fff; }
.polygon-code-status-pr[data-state="draft"] { background: #6e7681; border-color: #6e7681; color: #fff; }

@keyframes polygon-statusbar-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The status bar should only show on the code view; the polygon-code-only
   helper below already hides it on home/projects/etc. */

/* --- Composer --- */
.polygon-composer {
  width: 100%;
  max-width: 720px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  box-shadow: var(--polygon-shadow-soft);
  padding: 14px 14px 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.polygon-composer:focus-within {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft), var(--polygon-shadow-soft);
}

.polygon-composer-input {
  width: 100%;
  min-height: 28px;
  max-height: 240px;
  padding: 6px 4px 8px;
  background: transparent;
  border: none;
  resize: none;
  color: var(--polygon-text);
  font: 400 15px/1.5 var(--polygon-font-sans);
  outline: none;
}

.polygon-composer-input::placeholder { color: var(--polygon-text-mute); }

.polygon-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.polygon-toolbar-left,
.polygon-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.polygon-model-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 13px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
}

.polygon-model-picker:hover {
  background: var(--polygon-surface-2);
  border-color: var(--polygon-border);
  color: var(--polygon-text);
}

.polygon-model-picker i { font-size: 10px; }

.polygon-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, background 140ms ease;
}
.polygon-send-btn:hover { background: var(--polygon-bronze-deep); transform: translateY(-1px); }
.polygon-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* --- Quick Actions --- */
.polygon-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
}

.polygon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.polygon-chip:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  background: var(--polygon-bronze-soft);
}

.polygon-chip i { font-size: 12px; color: var(--polygon-bronze); }

.polygon-disclaimer {
  margin: 2px auto 0;
  font-size: 11.5px;
  color: var(--polygon-text-mute);
  text-align: center;
}

/* --- Chat view --- */
.polygon-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px;
}

.polygon-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.polygon-msg {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.polygon-msg-author {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--polygon-text-mute);
  margin-bottom: 4px;
  display: none; /* hidden by default; assistant messages opt-in below */
}

.polygon-msg-body {
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
}

/* User: right-aligned bronze pill. */
.polygon-msg-user {
  align-self: flex-end;
  max-width: min(640px, 80%);
}
.polygon-msg-user .polygon-msg-body {
  background: var(--polygon-bronze-soft);
  border: 1px solid var(--polygon-bronze-glow);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  color: var(--polygon-text);
}

/* Assistant: left-aligned, clean typography with a small bronze mark. */
.polygon-msg-assistant {
  align-self: flex-start;
  max-width: min(720px, 92%);
  padding-left: 28px;
  position: relative;
}
.polygon-msg-assistant::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--polygon-bronze) 0%, var(--polygon-bronze-deep) 70%);
  box-shadow: 0 0 0 3px var(--polygon-bg);
}
.polygon-msg-assistant .polygon-msg-body {
  color: var(--polygon-text);
  padding: 0;
  background: none;
  border: none;
}

.polygon-msg-thinking { padding: 4px 0; }

.polygon-thinking-shimmer {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--polygon-text-mute) 0%,
    var(--polygon-bronze) 50%,
    var(--polygon-text-mute) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: polygon-thinking-shine 2s linear infinite;
}

@keyframes polygon-thinking-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.polygon-msg-error .polygon-msg-body {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.35);
  color: #ffb8ad;
}

/* Typewriter caret on the currently-typing assistant body */
.polygon-msg-body.is-typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--polygon-bronze);
  animation: polygon-caret 1s steps(2, end) infinite;
}

@keyframes polygon-caret {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Message entrance animation — only on newly-appended nodes */
.polygon-msg:not(.polygon-msg-no-anim) {
  animation: polygon-msg-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes polygon-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle list-item slide for the sidebar */
.polygon-list-item {
  animation: polygon-list-in 220ms ease-out both;
}

@keyframes polygon-list-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Send button press + hover lift */
.polygon-send-btn:active { transform: scale(0.94); }
.polygon-send-btn.is-busy { pointer-events: none; }
.polygon-send-btn.is-busy i { animation: polygon-spin 0.9s linear infinite; }

@keyframes polygon-spin {
  to { transform: rotate(360deg); }
}

/* Chip lift */
.polygon-chip { transition: transform 140ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease; }
.polygon-chip:hover { transform: translateY(-1px); }

/* Greeting mark breathe */
.polygon-greeting-mark { animation: polygon-breathe 4s ease-in-out infinite; }

@keyframes polygon-breathe {
  0%, 100% { filter: drop-shadow(0 0 8px var(--polygon-bronze-soft)); }
  50% { filter: drop-shadow(0 0 18px var(--polygon-bronze-glow)); }
}

/* Feature preview bubbles drift in */
.polygon-feature-announce.is-open .polygon-bubble {
  animation: polygon-bubble-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.polygon-feature-announce.is-open .polygon-bubble-1 { animation-delay: 120ms; }
.polygon-feature-announce.is-open .polygon-bubble-2 { animation-delay: 260ms; }
.polygon-feature-announce.is-open .polygon-bubble-3 { animation-delay: 400ms; }

@keyframes polygon-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Feature Announcement Modal (fades in / out) --- */
.polygon-feature-announce {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.polygon-feature-announce.is-open {
  opacity: 1;
  pointer-events: auto;
}

.polygon-feature-announce[hidden] { display: none !important; }

.polygon-feature-card {
  position: relative;
  width: min(860px, 94vw);
  background: var(--polygon-ink-raised);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-xl);
  box-shadow: var(--polygon-shadow-raised);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 320ms ease;
}

.polygon-feature-announce.is-open .polygon-feature-card {
  transform: translateY(0) scale(1);
}

.polygon-feature-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 320px;
}

.polygon-feature-text {
  padding: 38px 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.polygon-feature-title {
  margin: 0;
  font-family: var(--polygon-font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: #FFFFFF;
}

.polygon-feature-description {
  margin: 0;
  color: rgba(244, 242, 238, 0.75);
  font-size: 14.5px;
  line-height: 1.55;
}

.polygon-feature-description-secondary { color: rgba(244, 242, 238, 0.6); }

.polygon-feature-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.polygon-feature-primary,
.polygon-feature-secondary {
  flex: 1;
  padding: 11px 16px;
  border-radius: var(--polygon-radius-sm);
  border: 1px solid transparent;
  font: 500 14px/1 var(--polygon-font-sans);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.polygon-feature-primary {
  background: #FFFFFF;
  color: var(--polygon-ink);
}
.polygon-feature-primary:hover { background: var(--polygon-bronze); color: var(--polygon-ink); }

.polygon-feature-secondary {
  background: transparent;
  color: var(--polygon-text);
  border-color: var(--polygon-border-strong);
}
.polygon-feature-secondary:hover { background: rgba(255, 255, 255, 0.06); }

.polygon-feature-preview {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(207, 122, 80, 0.18), transparent 60%),
    linear-gradient(135deg, #0f0f11 0%, #1a1a1d 100%);
  background-size: 20px 20px, cover;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgba(207, 122, 80, 0.18), transparent 60%),
    linear-gradient(135deg, #0f0f11 0%, #1a1a1d 100%);
  padding: 28px;
  overflow: hidden;
}

.polygon-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(20, 20, 22, 0.9);
  border: 1px solid var(--polygon-border-strong);
  border-radius: 14px;
  color: var(--polygon-text);
  font-size: 13px;
  max-width: 90%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.polygon-bubble i { color: var(--polygon-bronze); font-size: 14px; }

.polygon-bubble-1 { margin-left: 32%; transform: translateY(10px); }
.polygon-bubble-2 { margin-left: 18%; margin-top: 16px; }
.polygon-bubble-3 { margin-left: 24%; margin-top: 16px; }

.polygon-feature-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--polygon-text);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.polygon-feature-close:hover { background: var(--polygon-bronze); color: var(--polygon-ink); }

/* --- Popovers / Overlays --- */
.polygon-popover {
  position: absolute;
  min-width: 260px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  box-shadow: var(--polygon-shadow-raised);
  padding: 6px;
  z-index: 1100;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.polygon-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.polygon-popover[hidden] { display: none; }

.polygon-popover-title,
.polygon-popover-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--polygon-text-mute);
  padding: 8px 10px 6px;
}
.polygon-popover-section-title {
  margin-top: 4px;
  border-top: 1px solid var(--polygon-border, rgba(255, 255, 255, 0.06));
}

.polygon-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.polygon-popover-item:hover { background: var(--polygon-surface-2); }
.polygon-popover-item i { color: var(--polygon-bronze); }
.polygon-popover-item-main { flex: 1; display: flex; flex-direction: column; }
.polygon-popover-name { font-size: 14px; font-weight: 500; }
.polygon-popover-sub { font-size: 12px; color: var(--polygon-text-dim); }

/* "(Think)" suffix: only visible when the Think harder toggle is on.
   Applied to both the picker item label and the toolbar model trigger. */
.polygon-think-suffix {
  display: inline-block;
  color: var(--polygon-bronze);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  transition: opacity 220ms ease, max-width 220ms ease;
}
.polygon-think-suffix.is-visible {
  opacity: 1;
  max-width: 80px;
}

/* Hide open-source / beta-only picker entries from users without access. */
body:not(.polygon-has-beta) [data-beta-only] { display: none !important; }

.polygon-popover-toggle-row {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--polygon-border, rgba(255, 255, 255, 0.06));
  margin-top: 4px;
}
.polygon-popover-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
}
.polygon-popover-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--polygon-border, rgba(255, 255, 255, 0.18));
  border-radius: 4px;
  background: var(--polygon-surface-2, rgba(255, 255, 255, 0.04));
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease;
}
.polygon-popover-toggle input[type="checkbox"]:hover {
  border-color: var(--polygon-bronze);
}
.polygon-popover-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--polygon-bronze-glow);
  outline-offset: 2px;
}
.polygon-popover-toggle input[type="checkbox"]:checked {
  background: var(--polygon-bronze);
  border-color: var(--polygon-bronze);
}
.polygon-popover-toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.polygon-popover-toggle-main { display: flex; flex-direction: column; gap: 2px; }
.polygon-popover-toggle-name { font-size: 14px; font-weight: 500; color: var(--polygon-text); }
.polygon-popover-toggle-sub { font-size: 12px; color: var(--polygon-text-dim); line-height: 1.4; }

/* Reasoning block: chain-of-thought above the final answer, rendered
   borderless so only the bulb, the label, and the prose show through.
   The body fades + slides away once the final answer renders, but stays
   re-expandable by clicking the header. */
.polygon-msg-reasoning {
  margin: 2px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  background: none;
  overflow: visible;
}
.polygon-msg-reasoning-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: var(--polygon-text-dim);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  align-self: flex-start;
}
.polygon-msg-reasoning-head:hover .polygon-msg-reasoning-label {
  color: var(--polygon-text);
}
.polygon-msg-reasoning-icon {
  color: var(--polygon-bronze);
  font-size: 14px;
}
.polygon-msg-reasoning-label {
  color: var(--polygon-text-dim);
  transition: color 120ms ease;
}
.polygon-msg-reasoning-chevron {
  color: var(--polygon-text-mute);
  font-size: 11px;
  transition: transform 220ms ease;
}
.polygon-msg-reasoning.is-collapsed .polygon-msg-reasoning-chevron {
  transform: rotate(-90deg);
}
.polygon-msg-reasoning-body {
  color: var(--polygon-text-dim);
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.92;
  padding: 8px 0 0;
  margin: 0;
  border: none;
  background: none;
  overflow: hidden;
  max-height: 2000px;
  transition: opacity 260ms ease, max-height 320ms ease, padding-top 320ms ease;
}
.polygon-msg-reasoning.is-collapsed .polygon-msg-reasoning-body {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  pointer-events: none;
}
.polygon-msg-reasoning-body.is-typing::after {
  content: '\2588';
  display: inline-block;
  margin-left: 2px;
  color: var(--polygon-bronze);
  animation: polygon-code-caret 0.9s steps(2, end) infinite;
}
.polygon-msg-reasoning-body p {
  margin: 0 0 8px;
}
.polygon-msg-reasoning-body p:last-child { margin-bottom: 0; }
.polygon-msg-reasoning-body em {
  font-style: italic;
  color: var(--polygon-text-mute);
}

/* Search overlay */
.polygon-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.polygon-overlay.is-open { opacity: 1; pointer-events: auto; }
.polygon-overlay[hidden] { display: none; }

.polygon-overlay-panel {
  width: min(620px, 92vw);
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  overflow: hidden;
  box-shadow: var(--polygon-shadow-raised);
}

.polygon-overlay-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--polygon-border);
}

.polygon-overlay-header i { color: var(--polygon-text-mute); }

.polygon-overlay-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--polygon-text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.polygon-overlay-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px;
}

.polygon-overlay-empty {
  color: var(--polygon-text-mute);
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
}

/* --- Scrollbar (subtle) --- */
.polygon-sidebar-recents::-webkit-scrollbar,
.polygon-chat-scroll::-webkit-scrollbar,
.polygon-overlay-results::-webkit-scrollbar { width: 8px; }
.polygon-sidebar-recents::-webkit-scrollbar-thumb,
.polygon-chat-scroll::-webkit-scrollbar-thumb,
.polygon-overlay-results::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.2);
  border-radius: 8px;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  /* Drop the framed-card look on small screens: edge-to-edge maximises
     usable width for the composer and chat, and sidesteps the fact that
     the mobile sidebar is a viewport-level fixed overlay. */
  :root { --polygon-frame-pad: 0px; }
  .polygon-body {
    grid-template-columns: 0 1fr;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .polygon-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 84vw;
    max-width: 320px;
    z-index: 1200;
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: none;
  }
  .polygon-body:not(.polygon-sidebar-collapsed) .polygon-sidebar {
    transform: translateX(0);
    box-shadow: var(--polygon-shadow-raised);
    pointer-events: auto;
  }
  /* Swap the hidden/visible states that the desktop sidebar-collapsed rule
     applies, since on mobile "collapsed" means slid off-screen. */
  .polygon-sidebar-collapsed .polygon-sidebar {
    transform: translateX(-100%);
    opacity: 1;
  }
  .polygon-sidebar-backdrop { display: block; }
  .polygon-body:not(.polygon-sidebar-collapsed) .polygon-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .polygon-topbar-toggle { display: inline-flex; }
  .polygon-greeting-text { font-size: 28px; }
  .polygon-feature-inner { grid-template-columns: 1fr; }
  .polygon-feature-preview { min-height: 220px; }
}

@media (max-width: 640px) {
  :root { --polygon-topbar-height: 52px; }
  .polygon-topbar { padding: 0 10px; }
  .polygon-chat { padding: 0 12px; }
  .polygon-chat-scroll { padding: 16px 0 8px; gap: 14px; }
  .polygon-dock { padding: 8px 10px 12px; }
  .polygon-composer { padding: 10px 10px 8px; border-radius: 16px; }
  .polygon-composer-input { font-size: 16px; /* prevents iOS zoom-on-focus */ }
  .polygon-greeting-text { font-size: 24px; }
  .polygon-home { padding: 16px 14px 10px; }
  /* Allow the popovers to anchor to viewport edges instead of overflowing. */
  .polygon-popover { width: min(320px, calc(100vw - 20px)); }
  /* Tighten iOS-safe layout for the fixed dock. */
  .polygon-msg-body { font-size: 15px; }
  .polygon-msg-user .polygon-msg-body { max-width: 90%; }
}

/* --- Projects view --- */
.polygon-projects {
  flex: 1;
  overflow-y: auto;
  padding: 36px 32px 48px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.polygon-projects-inner {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: polygon-projects-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes polygon-projects-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.polygon-projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.polygon-projects-title {
  font-family: var(--polygon-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--polygon-text);
  margin: 0;
}

.polygon-projects-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.polygon-projects-new:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  transform: translateY(-1px);
}
.polygon-projects-new i { font-size: 11px; color: var(--polygon-bronze); }

.polygon-projects-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.polygon-projects-search:focus-within {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft);
}
.polygon-projects-search i {
  color: var(--polygon-text-mute);
  font-size: 13px;
}
.polygon-projects-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--polygon-text);
  font: 400 14px/1.5 var(--polygon-font-sans);
}
.polygon-projects-search input::placeholder { color: var(--polygon-text-mute); }

.polygon-projects-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12.5px;
  color: var(--polygon-text-dim);
}

.polygon-projects-sort-label { color: var(--polygon-text-mute); }

.polygon-projects-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text);
  font: inherit;
  font-size: 12.5px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.polygon-projects-sort-btn:hover { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }
.polygon-projects-sort-btn i { font-size: 10px; }

.polygon-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.polygon-project-card {
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  padding: 18px 20px 20px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.polygon-project-card:hover {
  border-color: var(--polygon-bronze);
  transform: translateY(-2px);
  background: var(--polygon-surface-2);
}

.polygon-project-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.polygon-project-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--polygon-text);
}
.polygon-project-card-badge {
  font-size: 10.5px;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--polygon-bronze-soft);
  color: var(--polygon-bronze);
  border: 1px solid var(--polygon-bronze-glow);
}

.polygon-project-card-desc {
  color: var(--polygon-text-dim);
  font-size: 13.5px;
  line-height: 1.5;
  flex: 1;
}

.polygon-project-card-meta {
  color: var(--polygon-text-mute);
  font-size: 11.5px;
  margin-top: auto;
}

.polygon-projects-empty {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
  color: var(--polygon-text-mute);
  font-size: 14px;
  border: 1px dashed var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
}

/* User avatar can carry an image */
.polygon-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Hide the dock on the artifacts view — it's its own landing page. */
.polygon-stage[data-view="artifacts"] .polygon-dock { display: none; }
.polygon-stage[data-view="chats"] .polygon-dock { display: none; }

/* --- Chats index view --- */
.polygon-chats {
  flex: 1;
  overflow-y: auto;
  padding: 36px 32px 48px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.polygon-chats-inner {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: polygon-projects-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.polygon-chats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.polygon-chats-title {
  font-family: var(--polygon-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--polygon-text);
  margin: 0;
}

.polygon-chats-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.polygon-chats-new:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  transform: translateY(-1px);
}
.polygon-chats-new i { font-size: 11px; color: var(--polygon-bronze); }

.polygon-chats-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.polygon-chats-search:focus-within {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft);
}
.polygon-chats-search i { color: var(--polygon-text-mute); font-size: 13px; }
.polygon-chats-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--polygon-text);
  font: 400 14px/1.5 var(--polygon-font-sans);
}
.polygon-chats-search input::placeholder { color: var(--polygon-text-mute); }

.polygon-chats-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--polygon-border);
}

.polygon-chats-subhead-label {
  font-size: 12.5px;
  color: var(--polygon-text-dim);
}

.polygon-chats-select-toggle {
  background: transparent;
  border: none;
  color: var(--polygon-bronze);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(207, 122, 80, 0.5);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.polygon-chats-select-toggle:hover {
  color: var(--polygon-bronze-deep);
  text-decoration-color: var(--polygon-bronze);
}

.polygon-chats-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--polygon-bronze-soft);
  border: 1px solid var(--polygon-bronze-glow);
  border-radius: var(--polygon-radius-md);
  font-size: 13px;
  color: var(--polygon-text);
}
.polygon-chats-bulkbar-actions { display: flex; gap: 6px; }
.polygon-chats-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--polygon-bronze);
  color: var(--polygon-bronze);
  font: inherit;
  font-size: 12.5px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.polygon-chats-bulk-btn:hover {
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
}

.polygon-chats-list {
  display: flex;
  flex-direction: column;
}

.polygon-chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--polygon-border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}
.polygon-chat-row:hover { background: var(--polygon-surface-2); }
.polygon-chat-row:last-child { border-bottom: none; }

.polygon-chat-row-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--polygon-border-strong);
  border-radius: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.polygon-chats-selecting .polygon-chat-row-check { display: inline-flex; }
.polygon-chat-row.is-selected .polygon-chat-row-check {
  background: var(--polygon-bronze);
  border-color: var(--polygon-bronze);
  color: var(--polygon-ink);
}
.polygon-chat-row-check i {
  font-size: 10px;
  color: var(--polygon-ink);
  opacity: 0;
}
.polygon-chat-row.is-selected .polygon-chat-row-check i { opacity: 1; }

.polygon-chat-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.polygon-chat-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--polygon-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.polygon-chat-row-meta {
  font-size: 12px;
  color: var(--polygon-text-mute);
}
.polygon-chat-row-project {
  color: var(--polygon-bronze);
}

.polygon-chats-empty {
  padding: 44px 16px;
  text-align: center;
  color: var(--polygon-text-mute);
  font-size: 14px;
  border: 1px dashed var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  margin-top: 6px;
}

/* --- Artifacts view --- */
.polygon-artifacts {
  flex: 1;
  overflow-y: auto;
  padding: 36px 32px 48px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.polygon-artifacts-inner {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: polygon-projects-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.polygon-artifacts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.polygon-artifacts-title {
  font-family: var(--polygon-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--polygon-text);
  margin: 0;
}

.polygon-artifacts-new {
  padding: 9px 16px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.polygon-artifacts-new:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  transform: translateY(-1px);
}

.polygon-artifacts-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--polygon-border);
  padding: 0 2px;
}

.polygon-artifacts-tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 2px 14px;
  cursor: pointer;
  transition: color 160ms ease;
}
.polygon-artifacts-tab:hover { color: var(--polygon-text); }
.polygon-artifacts-tab.is-active { color: var(--polygon-text); }
.polygon-artifacts-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--polygon-bronze);
  border-radius: 2px 2px 0 0;
}

.polygon-artifacts-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

.polygon-artifacts-empty {
  margin: 80px auto 0;
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--polygon-text-dim);
}

.polygon-artifacts-empty-mark {
  color: var(--polygon-bronze);
  filter: drop-shadow(0 0 20px var(--polygon-bronze-glow));
}

.polygon-artifacts-empty-title {
  margin: 0;
  font-family: var(--polygon-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--polygon-text);
}

.polygon-artifacts-empty-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--polygon-text-dim);
  max-width: 420px;
}

.polygon-artifacts-create {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--polygon-border-strong);
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, background 160ms ease;
}
.polygon-artifacts-create:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  background: var(--polygon-bronze-soft);
  transform: translateY(-1px);
}
.polygon-artifacts-create i { font-size: 11px; color: var(--polygon-bronze); }

.polygon-artifacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.polygon-artifact-card {
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  min-height: 128px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.polygon-artifact-card:hover {
  border-color: var(--polygon-bronze);
  transform: translateY(-2px);
}

/* --- Right-click context menu --- */
.polygon-ctx-menu {
  position: fixed;
  z-index: 1400;
  min-width: 180px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-md);
  box-shadow: var(--polygon-shadow-raised);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.polygon-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--polygon-text);
  font: inherit;
  font-size: 13.5px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.polygon-ctx-item i {
  width: 14px;
  font-size: 12px;
  color: var(--polygon-text-mute);
  text-align: center;
}
.polygon-ctx-item:hover {
  background: var(--polygon-surface-2);
}
.polygon-ctx-item.is-danger { color: #f28a7a; }
.polygon-ctx-item.is-danger i { color: #f28a7a; }
.polygon-ctx-item.is-danger:hover { background: rgba(231, 76, 60, 0.10); }

.polygon-ctx-sep {
  height: 1px;
  background: var(--polygon-border);
  margin: 4px 2px;
}

.polygon-ctx-submenu-wrap {
  position: relative;
}
.polygon-ctx-submenu-wrap > .polygon-ctx-item::after {
  content: '\203A';
  margin-left: auto;
  color: var(--polygon-text-mute);
  font-size: 14px;
}
.polygon-ctx-submenu {
  position: absolute;
  top: -6px;
  left: 100%;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-md);
  box-shadow: var(--polygon-shadow-raised);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-left: 4px;
}
.polygon-ctx-submenu-wrap:hover > .polygon-ctx-submenu,
.polygon-ctx-submenu-wrap.is-open > .polygon-ctx-submenu {
  display: flex;
}
.polygon-ctx-submenu-empty {
  padding: 8px 10px;
  color: var(--polygon-text-mute);
  font-size: 12.5px;
}

/* --- Confirm dialog --- */
.polygon-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.polygon-confirm-card {
  width: 100%;
  max-width: 380px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--polygon-shadow-raised);
}
.polygon-confirm-title {
  margin: 0 0 8px;
  font-family: var(--polygon-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--polygon-text);
}
.polygon-confirm-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--polygon-text-dim);
}
.polygon-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.polygon-confirm-btn {
  padding: 8px 14px;
  border-radius: var(--polygon-radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--polygon-border);
  background: transparent;
  color: var(--polygon-text);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.polygon-confirm-btn:hover { background: var(--polygon-surface-2); }
.polygon-confirm-btn.is-danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.polygon-confirm-btn.is-danger:hover { background: #a33125; border-color: #a33125; }

.polygon-list-item { position: relative; }

/* --- Global scrollbar hiding (page + scrollable panels) --- */
html, body,
.polygon-sidebar,
.polygon-stage,
.polygon-stage-body,
.polygon-chat-scroll,
.polygon-chats-list,
.polygon-projects-grid,
.polygon-sidebar-list,
.polygon-overlay-results {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.polygon-sidebar::-webkit-scrollbar,
.polygon-stage::-webkit-scrollbar,
.polygon-stage-body::-webkit-scrollbar,
.polygon-chat-scroll::-webkit-scrollbar,
.polygon-chats-list::-webkit-scrollbar,
.polygon-projects-grid::-webkit-scrollbar,
.polygon-sidebar-list::-webkit-scrollbar,
.polygon-overlay-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --- Rich assistant message formatting (markdown output) --- */
.polygon-msg-rich p {
  margin: 0 0 10px;
  line-height: 1.55;
}
.polygon-msg-rich p:last-child { margin-bottom: 0; }
.polygon-msg-rich strong { font-weight: 600; color: var(--polygon-text); }
.polygon-msg-rich em { font-style: italic; }
.polygon-msg-rich a.polygon-msg-link {
  color: var(--polygon-bronze);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.polygon-msg-rich a.polygon-msg-link:hover { color: var(--polygon-bronze-deep); }

/* --- Code block shell (fenced code + copy + show more) --- */
.polygon-code-shell {
  position: relative;
  display: block;
  margin: 12px 0 14px;
  max-width: 100%;
  min-width: 0;
  background: #0E0E0D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--polygon-radius-md);
  overflow: hidden;
}
body[data-theme="light"] .polygon-code-shell {
  background: #1A1918;
  border-color: rgba(0, 0, 0, 0.14);
}

.polygon-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.polygon-code-shell .polygon-code-lang {
  font-family: var(--polygon-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--polygon-bronze);
}
.polygon-code-lang-generic { opacity: 0.7; }

.polygon-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #E6E2DB;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.polygon-code-copy:hover {
  background: rgba(207, 122, 80, 0.15);
  border-color: var(--polygon-bronze-glow);
  color: var(--polygon-bronze);
}
.polygon-code-copy.is-copied {
  background: rgba(207, 122, 80, 0.2);
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
}
.polygon-code-copy i { font-size: 11px; }

.polygon-code-body {
  margin: 0;
  padding: 12px 14px 14px;
  overflow-x: auto;
  background: transparent;
  border: none;
  font-family: var(--polygon-font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: #E6E2DB;
}
.polygon-code-body code {
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

/* Streaming cursor while a fenced block is still being typed in. */
.polygon-code-shell.is-streaming .polygon-code-body code::after {
  content: '\2588';
  display: inline-block;
  margin-left: 2px;
  color: var(--polygon-bronze);
  animation: polygon-code-caret 0.9s steps(2, end) infinite;
}
@keyframes polygon-code-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Collapse long code blocks after the typewriter finishes. */
.polygon-code-shell.is-collapsed .polygon-code-body {
  max-height: calc(15 * 1.55em + 26px);
  overflow: hidden;
}
.polygon-code-shell.is-collapsed::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  height: 72px;
  background: linear-gradient(to bottom, rgba(14, 14, 13, 0), rgba(14, 14, 13, 0.95));
  pointer-events: none;
  z-index: 1;
}
body[data-theme="light"] .polygon-code-shell.is-collapsed::before {
  background: linear-gradient(to bottom, rgba(26, 25, 24, 0), rgba(26, 25, 24, 0.95));
}

.polygon-code-expand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: rgba(207, 122, 80, 0.08);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--polygon-bronze);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease;
}
.polygon-code-expand:hover { background: rgba(207, 122, 80, 0.16); }
.polygon-code-expand i { font-size: 10px; transition: transform 160ms ease; }

/* Inline code inside prose */
.polygon-inline-code {
  font-family: var(--polygon-font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(207, 122, 80, 0.12);
  color: var(--polygon-bronze);
  border: 1px solid rgba(207, 122, 80, 0.22);
}
body[data-theme="light"] .polygon-inline-code {
  background: rgba(207, 122, 80, 0.12);
  color: var(--polygon-bronze-deep);
}

/* KaTeX display blocks get the same breathing room as paragraphs. */
.polygon-msg-rich .katex-display {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.polygon-msg-rich .katex { font-size: 1.02em; }

/* --- Account menu (drop-up from sidebar user card) --- */
.polygon-sidebar-footer { position: relative; }

.polygon-user-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--polygon-radius-md);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}
.polygon-user-card:hover {
  background: var(--polygon-surface-2);
  border-color: var(--polygon-border);
}
.polygon-user-card[aria-expanded="true"] {
  background: var(--polygon-surface-2);
  border-color: var(--polygon-border);
}

.polygon-account-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% - 4px);
  z-index: 200;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-lg);
  box-shadow: var(--polygon-shadow-raised);
  overflow: hidden;
  animation: polygon-account-menu-in 160ms ease-out;
  transform-origin: bottom left;
}
@keyframes polygon-account-menu-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.polygon-account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--polygon-border);
}
.polygon-account-menu-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--polygon-bronze);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.polygon-account-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.polygon-account-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.polygon-account-menu-name {
  font-family: var(--polygon-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--polygon-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polygon-account-menu-email {
  font-size: 12px;
  color: var(--polygon-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polygon-account-menu-chip {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--polygon-bronze);
  background: var(--polygon-bronze-soft);
  border: 1px solid var(--polygon-bronze-glow);
}
.polygon-account-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.polygon-account-menu-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.polygon-account-menu-btn:hover {
  background: var(--polygon-surface-2);
  border-color: var(--polygon-border);
  transform: translateX(2px);
}
.polygon-account-menu-btn:active { transform: translateX(0); }
.polygon-account-menu-btn.primary {
  background: var(--polygon-bronze-soft);
  border-color: var(--polygon-bronze-glow);
}
.polygon-account-menu-btn.primary:hover {
  background: var(--polygon-bronze-soft);
  filter: brightness(1.04);
}
.polygon-account-menu-btn-icon {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--polygon-radius-sm);
  background: var(--polygon-surface-2);
  color: var(--polygon-bronze);
}
.polygon-account-menu-btn-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--polygon-text);
  line-height: 1.15;
}
.polygon-account-menu-btn-sub {
  font-size: 11.5px;
  color: var(--polygon-text-dim);
  line-height: 1.15;
}

/* --- Coming soon (editorial) page --- */
.polygon-stage[data-view="coming"] .polygon-dock { display: none; }
.polygon-stage[data-view="coming"] .polygon-topbar-title { opacity: 1; }

.polygon-coming {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 32px;
}
.polygon-coming-inner {
  max-width: 640px;
  width: 100%;
  text-align: left;
  animation: polygon-coming-in 380ms ease-out;
}
@keyframes polygon-coming-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.polygon-coming-eyebrow {
  display: inline-block;
  font-family: var(--polygon-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--polygon-bronze);
  margin-bottom: 18px;
}
.polygon-coming-title {
  font-family: var(--polygon-font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--polygon-text);
  margin: 0 0 14px;
}
.polygon-coming-lede {
  font-family: var(--polygon-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--polygon-text-dim);
  margin: 0 0 28px;
}
.polygon-coming-rule {
  width: 48px;
  height: 1px;
  background: var(--polygon-bronze);
  margin-bottom: 18px;
}
.polygon-coming-footnote {
  font-family: var(--polygon-font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--polygon-text-mute);
  margin: 0;
}

/* ============================================================
   Polygon Code — agentic coding workspace
   ============================================================ */

.polygon-code {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Hide most dock extras in code view (chips, disclaimers retained lightly) */
.polygon-stage[data-view="code"] .polygon-quick-actions { display: none; }
.polygon-stage[data-view="code"] .polygon-home-only { display: none !important; }
.polygon-stage[data-view="code"] .polygon-composer { max-width: 900px; }
.polygon-stage[data-view="code"] .polygon-dock > * { max-width: 900px; }

/* Context chips row inside the composer */
.polygon-code-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--polygon-border);
  margin-bottom: 8px;
}
.polygon-code-ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.polygon-code-ctx-chip:hover { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }
.polygon-code-ctx-chip i { font-size: 10px; color: var(--polygon-text-mute); }
.polygon-code-ctx-chip:hover i { color: var(--polygon-bronze); }
.polygon-code-ctx-plus { padding: 0 8px; }

/* Mode toggle in the composer toolbar */
.polygon-code-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 12px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.polygon-code-mode-toggle i { font-size: 10px; }
.polygon-code-mode-toggle:hover {
  background: var(--polygon-surface-2);
  border-color: var(--polygon-border-strong);
  color: var(--polygon-text);
}
.polygon-code-mode-toggle.is-plan {
  color: var(--polygon-bronze);
  border-color: var(--polygon-bronze);
  background: var(--polygon-bronze-soft);
}
.polygon-code-mode-caret { margin-left: 2px; opacity: 0.7; }
.polygon-code-only { display: none; }
.polygon-stage[data-view="code"] .polygon-code-only { display: inline-flex; }

/* Dashboard (no active session) */
.polygon-code-dashboard {
  flex: 1;
  overflow-y: auto;
  padding: 32px 22px 40px;
}
.polygon-code-dashboard-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.polygon-code-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.polygon-code-hero-mark {
  color: var(--polygon-bronze);
  filter: drop-shadow(0 0 12px var(--polygon-bronze-glow));
  animation: polygon-breathe 4s ease-in-out infinite;
}
.polygon-code-hero-title {
  margin: 0;
  font-family: var(--polygon-font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.3px;
  color: var(--polygon-text);
}
.polygon-code-hero-title span {
  color: var(--polygon-bronze);
  font-style: italic;
}

.polygon-code-section { display: flex; flex-direction: column; gap: 10px; }
.polygon-code-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.polygon-code-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--polygon-text-dim);
  letter-spacing: 0.02em;
}
.polygon-code-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 12px;
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.polygon-code-link:hover { background: var(--polygon-surface-2); color: var(--polygon-bronze); }

.polygon-code-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  padding: 6px;
}
.polygon-code-list:has(> .polygon-code-empty) {
  background: transparent;
  border: none;
  padding: 0;
}

.polygon-code-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 120ms ease;
}
.polygon-code-row:hover { background: var(--polygon-surface-2); }
.polygon-code-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--polygon-text-dim);
  padding-right: 6px;
}
.polygon-code-row-status .polygon-code-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--polygon-text-mute);
}
.polygon-code-row-status.is-review .polygon-code-dot { background: var(--polygon-bronze); }
.polygon-code-row-status.is-merged .polygon-code-dot { background: #a375ff; }
.polygon-code-row-status.is-open .polygon-code-dot { background: #7ed28b; }
.polygon-code-row-status.is-draft .polygon-code-dot { background: var(--polygon-text-mute); }
.polygon-code-row-title {
  font-weight: 500;
  color: var(--polygon-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.polygon-code-row-num { color: var(--polygon-text-mute); font-weight: 400; margin-left: 6px; }
.polygon-code-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--polygon-text-mute);
}
.polygon-code-row-repo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--polygon-text-dim);
}
.polygon-code-row-repo-avatar {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.polygon-code-row-chev { color: var(--polygon-text-mute); font-size: 11px; }

/* Environment cards */
.polygon-code-env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.polygon-code-env-card {
  text-align: left;
  padding: 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 160ms ease, transform 160ms ease;
  font: inherit;
  color: var(--polygon-text);
}
.polygon-code-env-card:hover { border-color: var(--polygon-bronze); transform: translateY(-1px); }
.polygon-code-env-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.polygon-code-env-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--polygon-text);
}
.polygon-code-env-card-title i { color: var(--polygon-bronze); font-size: 12px; }
.polygon-code-env-card-state {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--polygon-text-mute);
}
.polygon-code-env-card-state.is-active { color: #7ed28b; }
.polygon-code-env-card-desc {
  color: var(--polygon-text-dim);
  font-size: 13px;
  line-height: 1.5;
  flex: 1;
  min-height: 1.5em;
}
.polygon-code-env-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.polygon-code-env-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  font-size: 11px;
  color: var(--polygon-text-dim);
}
.polygon-code-env-tag i { font-size: 9px; color: var(--polygon-text-mute); }

/* Integration cards */
.polygon-code-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.polygon-code-int-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--polygon-text);
  transition: border-color 160ms ease;
}
.polygon-code-int-card:hover { border-color: var(--polygon-bronze); }
.polygon-code-int-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--polygon-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--polygon-bronze);
  flex-shrink: 0;
}
.polygon-code-int-body { flex: 1; min-width: 0; }
.polygon-code-int-name { font-weight: 500; font-size: 14px; }
.polygon-code-int-sub { font-size: 12px; color: var(--polygon-text-dim); }
.polygon-code-int-state {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-mute);
  background: var(--polygon-surface-2);
}
.polygon-code-int-state.is-connected { color: #7ed28b; border-color: rgba(126, 210, 139, 0.35); background: rgba(126, 210, 139, 0.08); }

/* Workspace (active session) */
.polygon-code-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.polygon-code-ws-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--polygon-border);
  background: var(--polygon-bg);
}
.polygon-code-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.polygon-code-back:hover { background: var(--polygon-surface-2); color: var(--polygon-text); }
.polygon-code-ws-title-wrap { flex: 1; min-width: 0; }
.polygon-code-ws-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--polygon-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polygon-code-ws-sub {
  font-size: 12px;
  color: var(--polygon-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polygon-code-ws-actions { display: flex; align-items: center; gap: 6px; }

.polygon-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text-dim);
  border-radius: var(--polygon-radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.polygon-code-chip:hover { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }
.polygon-code-chip i { font-size: 11px; }
.polygon-code-chip-mode.is-plan {
  background: var(--polygon-bronze-soft);
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
}

.polygon-code-ws-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.polygon-code-stream {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.polygon-code-stream::-webkit-scrollbar { width: 8px; }
.polygon-code-stream::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.2); border-radius: 8px; }

/* Stream items */
.polygon-code-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  animation: polygon-msg-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.polygon-code-step.is-user {
  background: var(--polygon-bronze-soft);
  border-color: var(--polygon-bronze-glow);
}
.polygon-code-step.is-thinking { border-style: dashed; }
.polygon-code-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--polygon-text-dim);
}
.polygon-code-step-head i { font-size: 11px; color: var(--polygon-bronze); }
.polygon-code-step-head strong { color: var(--polygon-text); font-weight: 500; }
.polygon-code-step-head-meta { margin-left: auto; color: var(--polygon-text-mute); font-size: 11px; }

.polygon-code-step-body {
  font-size: 14px;
  color: var(--polygon-text);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.polygon-code-step-body.is-muted { color: var(--polygon-text-dim); font-size: 13px; }

.polygon-code-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--polygon-radius-sm);
  background: var(--polygon-ink-raised-2);
  border: 1px solid var(--polygon-border);
}
[data-theme="light"] .polygon-code-tool { background: #EFECE5; }
.polygon-code-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  color: var(--polygon-text);
}
.polygon-code-tool-head i { color: var(--polygon-bronze); }
.polygon-code-tool-arg {
  background: var(--polygon-surface-2);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--polygon-text-dim);
}
.polygon-code-tool-output {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--polygon-text-dim);
  background: transparent;
  max-height: 200px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
}
.polygon-code-tool-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--polygon-surface-2);
  color: var(--polygon-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.polygon-code-tool-state.is-running { color: var(--polygon-bronze); }
.polygon-code-tool-state.is-done { color: #7ed28b; }
.polygon-code-tool-state.is-fail { color: #ff9e8b; }
.polygon-code-tool-state.is-waiting { color: var(--polygon-text-mute); }

/* Approve / Reject actions that appear for tools that need user approval in plan mode */
.polygon-code-step-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.polygon-code-approve,
.polygon-code-reject {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--polygon-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.polygon-code-approve {
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
}
.polygon-code-approve:hover { background: var(--polygon-bronze-deep); }
.polygon-code-reject {
  background: transparent;
  color: var(--polygon-text-dim);
  border-color: var(--polygon-border);
}
.polygon-code-reject:hover { color: var(--polygon-text); border-color: var(--polygon-border-strong); background: var(--polygon-surface-2); }

/* Plan card */
.polygon-code-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  border-left: 3px solid var(--polygon-bronze);
  border-radius: var(--polygon-radius-sm);
}
.polygon-code-plan-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--polygon-text-dim);
  border-bottom: 1px dashed var(--polygon-border);
}
.polygon-code-plan-step:last-child { border-bottom: none; }
.polygon-code-plan-step.is-done { color: var(--polygon-text); }
.polygon-code-plan-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--polygon-text-dim);
}
.polygon-code-plan-step.is-done .polygon-code-plan-step-num { background: var(--polygon-bronze); border-color: var(--polygon-bronze); color: var(--polygon-ink); }
.polygon-code-plan-step.is-current .polygon-code-plan-step-num { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }
.polygon-code-plan-step-text { flex: 1; }

/* Diff blocks */
.polygon-code-diff {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  line-height: 1.5;
  border-radius: var(--polygon-radius-sm);
  background: var(--polygon-ink-raised-2);
  border: 1px solid var(--polygon-border);
  overflow: auto;
  max-height: 320px;
}
[data-theme="light"] .polygon-code-diff { background: #EFECE5; }
.polygon-code-diff-head {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--polygon-text-mute);
  border-bottom: 1px solid var(--polygon-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.polygon-code-diff-line {
  padding: 1px 10px;
  white-space: pre;
  display: block;
}
.polygon-code-diff-line.is-add { background: rgba(126, 210, 139, 0.08); color: #9fe0ab; }
.polygon-code-diff-line.is-del { background: rgba(255, 120, 120, 0.07); color: #ffa89e; }

/* (Removed: right side pane styling — workspace is now full-width chat.) */

.polygon-code-preview-empty {
  padding: 32px 8px;
  text-align: center;
  color: var(--polygon-text-mute);
  font-size: 13px;
}

/* Command palette footer */
.polygon-code-cmd-foot {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--polygon-border);
  font-size: 11px;
  color: var(--polygon-text-mute);
  background: var(--polygon-surface-2);
}
.polygon-code-cmd-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  border-radius: 4px;
  border: 1px solid var(--polygon-border);
  background: var(--polygon-bg);
  color: var(--polygon-text-dim);
  font-family: var(--polygon-font-mono);
  font-size: 10px;
}

.polygon-code-cmd-overlay .polygon-overlay-results {
  max-height: 50vh;
  padding: 6px;
}
.polygon-code-cmd-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.polygon-code-cmd-item:hover,
.polygon-code-cmd-item.is-active { background: var(--polygon-surface-2); }
.polygon-code-cmd-item i { color: var(--polygon-bronze); }
.polygon-code-cmd-item-name { font-weight: 500; }
.polygon-code-cmd-item-sub { font-size: 12px; color: var(--polygon-text-dim); margin-left: 4px; }
.polygon-code-cmd-item-kbd {
  font-family: var(--polygon-font-mono);
  font-size: 11px;
  color: var(--polygon-text-mute);
}

/* Modal (environments, integrations) */
.polygon-code-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(6px);
  z-index: 1200;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.polygon-code-modal.is-open { opacity: 1; pointer-events: auto; }
.polygon-code-modal[hidden] { display: none !important; }

.polygon-code-modal-card {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--polygon-surface);
  border: 1px solid var(--polygon-border-strong);
  border-radius: var(--polygon-radius-lg);
  box-shadow: var(--polygon-shadow-raised);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 200ms ease;
}
.polygon-code-modal.is-open .polygon-code-modal-card { transform: translateY(0); }
.polygon-code-modal-card-narrow { width: min(640px, 100%); }

.polygon-code-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--polygon-border);
}
.polygon-code-modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--polygon-bronze);
  margin-bottom: 2px;
}
.polygon-code-modal-title {
  margin: 0;
  font-family: var(--polygon-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--polygon-text);
}

.polygon-code-modal-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--polygon-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE + Edge legacy */
}
.polygon-code-modal-tabs::-webkit-scrollbar { display: none; }
.polygon-code-modal-tab {
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--polygon-text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.polygon-code-modal-tab:hover { color: var(--polygon-text); }
.polygon-code-modal-tab.is-active { color: var(--polygon-bronze); border-bottom-color: var(--polygon-bronze); }

.polygon-code-modal-body {
  flex: 1;
  overflow: auto;
  padding: 18px 22px;
}
.polygon-code-modal-pane { display: flex; flex-direction: column; gap: 12px; }

.polygon-code-modal-hint {
  font-size: 13px;
  color: var(--polygon-text-dim);
  margin: 0 0 4px;
  line-height: 1.5;
}
.polygon-code-modal-hint code {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--polygon-surface-2);
  color: var(--polygon-bronze);
}
.polygon-code-modal-hint-foot { flex: 1; margin: 0; }

.polygon-code-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--polygon-text-dim);
}
.polygon-code-field > span {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--polygon-text-mute);
}
.polygon-code-field input,
.polygon-code-field textarea,
.polygon-code-field select,
.polygon-code-modal-textarea {
  background: var(--polygon-bg);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-sm);
  padding: 9px 11px;
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
  resize: vertical;
}
.polygon-code-field textarea { line-height: 1.5; }
.polygon-code-modal-textarea {
  font-family: var(--polygon-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  min-height: 240px;
}
.polygon-code-field input:focus,
.polygon-code-field textarea:focus,
.polygon-code-field select:focus,
.polygon-code-modal-textarea:focus {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft);
}

.polygon-code-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .polygon-code-field-row { grid-template-columns: 1fr; }
}

/* .env rows */
.polygon-code-env-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.polygon-code-env-var-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.2fr) auto auto;
  gap: 8px;
  align-items: center;
}
.polygon-code-env-var-row input {
  background: var(--polygon-bg);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-sm);
  padding: 8px 10px;
  color: var(--polygon-text);
  font: 13px/1.4 var(--polygon-font-mono);
  outline: none;
}
.polygon-code-env-var-row input:focus {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft);
}
.polygon-code-env-var-row .polygon-icon-btn { width: 30px; height: 30px; }

.polygon-code-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--polygon-border);
  background: var(--polygon-surface-2);
}
.polygon-code-modal-foot-right { display: flex; gap: 8px; }

.polygon-code-primary-btn,
.polygon-code-ghost-btn,
.polygon-code-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--polygon-radius-sm);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.polygon-code-primary-btn {
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
}
.polygon-code-primary-btn:hover { background: var(--polygon-bronze-deep); }
.polygon-code-ghost-btn {
  background: transparent;
  color: var(--polygon-text);
  border-color: var(--polygon-border);
}
.polygon-code-ghost-btn:hover { background: var(--polygon-surface-2); border-color: var(--polygon-border-strong); }
.polygon-code-danger-btn {
  background: transparent;
  color: #ff9e8b;
  border-color: rgba(255, 158, 139, 0.35);
}
.polygon-code-danger-btn:hover { background: rgba(255, 158, 139, 0.08); }

.polygon-code-int-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.polygon-code-int-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--polygon-bg);
  border: 1px solid var(--polygon-border);
  border-radius: var(--polygon-radius-sm);
}
.polygon-code-int-row .polygon-code-int-icon { background: var(--polygon-surface-2); }
.polygon-code-int-row-body { flex: 1; min-width: 0; }
.polygon-code-int-row-name { font-weight: 500; font-size: 14px; color: var(--polygon-text); }
.polygon-code-int-row-sub { font-size: 12px; color: var(--polygon-text-dim); }
.polygon-code-int-row-btn {
  padding: 6px 12px;
  border-radius: var(--polygon-radius-sm);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
}
.polygon-code-int-row-btn.is-connected {
  color: #7ed28b;
  border-color: rgba(126, 210, 139, 0.35);
  background: rgba(126, 210, 139, 0.08);
}
.polygon-code-int-row-btn:hover { border-color: var(--polygon-bronze); color: var(--polygon-bronze); }

/* --- Empty states for Polygon Code dashboard sections --- */
.polygon-code-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 28px 24px;
  background: var(--polygon-surface);
  border: 1px dashed var(--polygon-border);
  border-radius: var(--polygon-radius-md);
  color: var(--polygon-text-dim);
}
.polygon-code-empty-wide { grid-column: 1 / -1; }
.polygon-code-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--polygon-surface-2);
  color: var(--polygon-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.polygon-code-empty-icon i { font-size: 16px; }
.polygon-code-empty-title {
  color: var(--polygon-text);
  font-size: 15px;
  font-weight: 500;
}
.polygon-code-empty-desc {
  font-size: 13px;
  max-width: 44ch;
  line-height: 1.5;
}
.polygon-code-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  margin-top: 6px;
  border-radius: 999px;
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.polygon-code-empty-action:hover {
  border-color: var(--polygon-bronze);
  color: var(--polygon-bronze);
  background: transparent;
}
.polygon-code-empty-action i { font-size: 12px; }

/* --- Context chip empty-state tweak --- */
.polygon-code-ctx-chip.is-empty {
  color: var(--polygon-text-mute);
  border-style: dashed;
}
.polygon-code-ctx-chip.is-empty:hover {
  border-style: solid;
}

/* --- Picker popover (env / repo / branch) --- */
.polygon-code-picker {
  min-width: 340px;
  max-width: 440px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 52vh;
  overflow: hidden;
}
.polygon-code-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--polygon-border);
}
.polygon-code-picker-head i { color: var(--polygon-text-mute); font-size: 12px; }
.polygon-code-picker-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--polygon-text);
  font: inherit;
  font-size: 13px;
}
.polygon-code-picker-search::placeholder { color: var(--polygon-text-mute); }
.polygon-code-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.polygon-code-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--polygon-radius-sm);
  color: var(--polygon-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.polygon-code-picker-item:hover { background: var(--polygon-surface-2); }
.polygon-code-picker-item.is-active { background: var(--polygon-surface-2); }
.polygon-code-picker-item.is-accent { color: var(--polygon-bronze); border-top: 1px solid var(--polygon-border); margin-top: 4px; padding-top: 12px; }
.polygon-code-picker-item > i:first-child { color: var(--polygon-text-mute); font-size: 12px; width: 14px; text-align: center; }
.polygon-code-picker-item.is-accent > i:first-child { color: var(--polygon-bronze); }
.polygon-code-picker-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.polygon-code-picker-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polygon-code-picker-item-sub { font-size: 11px; color: var(--polygon-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polygon-code-picker-item-check { color: var(--polygon-bronze); font-size: 11px; }
.polygon-code-picker-loading,
.polygon-code-picker-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--polygon-text-dim);
  font-size: 13px;
}
.polygon-code-picker-error { color: #e29a9a; }
.polygon-code-picker-empty { border: none; background: transparent; padding: 20px 16px; }

/* ============================================================
   Polygon Code — Claude Code style chat stream
   ============================================================ */

/* Workspace head (kept) */
.polygon-code-ws-head {
  padding: 10px 20px 10px;
  background: var(--polygon-bg);
  position: relative;
}
.polygon-code-ws-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--polygon-border);
  opacity: 0.6;
  pointer-events: none;
}
.polygon-code-ws-title { letter-spacing: -0.1px; }
.polygon-code-ws-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.polygon-code-ws-sub .sep { opacity: 0.4; }

.polygon-code-chip {
  border-radius: 999px;
  height: 28px;
  padding: 0 12px;
  letter-spacing: -0.01em;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.polygon-code-chip:active { transform: translateY(0.5px); }
.polygon-code-chip i { opacity: 0.85; }
.polygon-code-chip:hover i { opacity: 1; }

/* Stream container: plain background, tight vertical rhythm */
.polygon-code-stream {
  padding: 18px 22px 24px;
  gap: 10px;
  background: var(--polygon-bg);
  display: flex;
  flex-direction: column;
}

/* ---------- User message (subtle slate-tinted panel) ---------- */
.pc-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 100%;
}
.pc-msg .pc-msg-content { word-wrap: break-word; overflow-wrap: anywhere; }
.pc-msg-user {
  align-self: flex-end;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  color: var(--polygon-text);
  max-width: 82%;
  margin-left: auto;
}
.pc-msg-assistant {
  background: transparent;
  border: none;
  padding: 4px 2px;
  color: var(--polygon-text);
}
.pc-msg-assistant a { color: var(--polygon-bronze); text-decoration: underline; text-underline-offset: 2px; }
.pc-msg-assistant a:hover { color: var(--polygon-bronze-deep); }
.pc-msg-assistant .polygon-code-inline,
.pc-msg-user .polygon-code-inline,
.pc-msg-assistant .polygon-inline-code,
.pc-msg-user .polygon-inline-code {
  font-family: var(--polygon-font-mono);
  font-size: 12.5px;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--polygon-text);
}
.pc-msg .pc-msg-content p { margin: 0 0 8px 0; }
.pc-msg .pc-msg-content p:last-child { margin-bottom: 0; }
.pc-msg .pc-msg-content .polygon-md-list {
  margin: 4px 0 8px 0;
  padding-left: 22px;
}
.pc-msg .pc-msg-content .polygon-md-list li { margin: 2px 0; }
.pc-msg .pc-msg-content .polygon-md-ul { list-style: disc; }
.pc-msg .pc-msg-content .polygon-md-ol { list-style: decimal; }
.pc-msg .pc-msg-content .polygon-md-h {
  font-weight: 600;
  color: var(--polygon-text);
  line-height: 1.25;
  margin: 10px 0 6px 0;
}
.pc-msg .pc-msg-content .polygon-md-h1 { font-size: 1.25rem; }
.pc-msg .pc-msg-content .polygon-md-h2 { font-size: 1.15rem; }
.pc-msg .pc-msg-content .polygon-md-h3 { font-size: 1.05rem; }
.pc-msg .pc-msg-content .polygon-md-h4 { font-size: 1rem; }
.pc-msg .pc-msg-content .polygon-md-quote {
  margin: 6px 0;
  padding: 4px 10px;
  border-left: 3px solid var(--polygon-border);
  color: var(--polygon-text-mute);
}

/* Markdown styling for the main chat body (mirrors the Polygon Code rules
   above so headers, lists and blockquotes look consistent in both surfaces). */
.polygon-msg-body .polygon-md-h {
  font-weight: 600;
  color: var(--polygon-text);
  line-height: 1.25;
  margin: 14px 0 6px 0;
}
.polygon-msg-body .polygon-md-h:first-child { margin-top: 2px; }
.polygon-msg-body .polygon-md-h1 {
  font-size: 1.4rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--polygon-border, rgba(255, 255, 255, 0.08));
}
.polygon-msg-body .polygon-md-h2 {
  font-size: 1.2rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--polygon-border, rgba(255, 255, 255, 0.06));
}
.polygon-msg-body .polygon-md-h3 { font-size: 1.08rem; }
.polygon-msg-body .polygon-md-h4 { font-size: 1rem; color: var(--polygon-text-dim); }
.polygon-msg-body .polygon-md-list {
  margin: 4px 0 8px 0;
  padding-left: 22px;
}
.polygon-msg-body .polygon-md-list li { margin: 2px 0; }
.polygon-msg-body .polygon-md-ul { list-style: disc; }
.polygon-msg-body .polygon-md-ol { list-style: decimal; }
.polygon-msg-body .polygon-md-quote {
  margin: 6px 0;
  padding: 4px 10px;
  border-left: 3px solid var(--polygon-border, rgba(255, 255, 255, 0.12));
  color: var(--polygon-text-mute);
}

/* ---------- Thinking row (muted dot + shimmer text) ---------- */
.pc-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: var(--polygon-text-mute);
  font-size: 13px;
  font-style: italic;
}
.pc-thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--polygon-bronze);
  animation: pc-pulse 1.3s ease-in-out infinite;
}
.pc-thinking-text {
  background: linear-gradient(90deg, var(--polygon-text-mute) 0%, var(--polygon-text) 50%, var(--polygon-text-mute) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pc-shimmer 2.4s linear infinite;
}
@keyframes pc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.85); }
}
@keyframes pc-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ---------- Tool row (compact single line) ---------- */
.pc-tool {
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease;
}
.pc-tool:hover { border-color: var(--polygon-border-strong); }
.pc-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--polygon-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.pc-tool-head:disabled { cursor: default; }
.pc-tool-head:not(:disabled):hover { background: var(--polygon-surface-2); }
.pc-tool-icon {
  width: 18px;
  color: var(--polygon-bronze);
  font-size: 12px;
  text-align: center;
  flex: 0 0 auto;
}
.pc-tool-verb {
  font-weight: 500;
  color: var(--polygon-text);
  flex: 0 0 auto;
}
.pc-tool-target {
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  color: var(--polygon-text-dim);
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
  border-radius: 5px;
  padding: 1px 7px;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.pc-tool-delta {
  font-family: var(--polygon-font-mono);
  font-size: 11.5px;
  margin-left: 4px;
  flex: 0 0 auto;
}
.pc-add { color: #4ade80; }
.pc-del { color: #f87171; }
.pc-tool-spin {
  margin-left: auto;
  color: var(--polygon-bronze);
  font-size: 11px;
  flex: 0 0 auto;
}
.pc-tool-fail {
  margin-left: auto;
  color: #f87171;
  font-size: 12px;
  flex: 0 0 auto;
}
.pc-tool-chev {
  margin-left: auto;
  color: var(--polygon-text-mute);
  font-size: 10px;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}
.pc-tool-head[aria-expanded="true"] .pc-tool-chev { transform: rotate(90deg); }
.pc-tool-head[aria-expanded="true"] ~ .pc-tool-body,
.pc-tool-head[aria-expanded="true"] + .pc-tool-body { border-top: 1px solid var(--polygon-border); }

.pc-tool-body {
  max-height: 460px;
  overflow: auto;
  background: var(--polygon-ink-raised-2, var(--polygon-surface-2));
}
.pc-output {
  margin: 0;
  padding: 10px 14px;
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--polygon-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tool state tweaks */
.pc-tool[data-tool-state="running"] { border-color: var(--polygon-bronze); }
.pc-tool[data-tool-state="fail"]    { border-color: rgba(248, 113, 113, 0.5); }

/* ---------- Tool group rollup ---------- */
.pc-group {
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease;
}
.pc-group:hover { border-color: var(--polygon-border-strong); }
.pc-group.is-open { border-color: var(--polygon-border-strong); }
.pc-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--polygon-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 160ms ease;
}
.pc-group-head:hover { background: var(--polygon-surface-2); }
.pc-group-summary { flex: 1 1 auto; }
.pc-group-chev {
  color: var(--polygon-text-mute);
  font-size: 11px;
  flex: 0 0 auto;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms ease;
}
.pc-group.is-open .pc-group-chev { transform: rotate(180deg); color: var(--polygon-bronze); }

/* Fade + slide the body in. We rely on max-height as a transition floor;
   the actual height comes from the content. Because we keep `[hidden]` for
   accessibility, the body is removed from layout when fully closed. */
.pc-group-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--polygon-border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 220ms ease, max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pc-group.is-open .pc-group-body {
  opacity: 1;
  max-height: 1200px;
  border-top: 1px solid var(--polygon-border);
}
.pc-group-body > .pc-tool {
  border-radius: 0;
  border: none;
  background: var(--polygon-surface);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 240ms ease, transform 240ms ease, background 160ms ease;
}
.pc-group.is-open .pc-group-body > .pc-tool { opacity: 1; transform: translateY(0); }
/* Stagger per row so rows cascade rather than pop in together. */
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(1) { transition-delay: 40ms; }
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(2) { transition-delay: 80ms; }
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(3) { transition-delay: 120ms; }
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(4) { transition-delay: 160ms; }
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(5) { transition-delay: 200ms; }
.pc-group.is-open .pc-group-body > .pc-tool:nth-child(n + 6) { transition-delay: 240ms; }
.pc-group-body > .pc-tool:hover { background: var(--polygon-surface-2); }

/* ---------- Plan card ---------- */
.pc-plan {
  border: 1px solid var(--polygon-border);
  background: var(--polygon-surface);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
}
.pc-plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--polygon-text);
  font-weight: 500;
}
.pc-plan-head i { color: var(--polygon-bronze); }
.pc-plan-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--polygon-text-mute);
  font-weight: 400;
}
.pc-plan-list {
  margin: 0;
  padding-left: 18px;
  list-style: decimal;
  color: var(--polygon-text);
}
.pc-plan-item {
  padding: 3px 0;
  line-height: 1.5;
}
.pc-plan-item.is-done {
  color: var(--polygon-text-mute);
  text-decoration: line-through;
}
.pc-plan-item.is-current {
  color: var(--polygon-bronze);
  font-weight: 500;
}
.pc-plan-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.pc-plan-approve,
.pc-plan-reject {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--polygon-border);
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease;
}
.pc-plan-approve {
  background: var(--polygon-bronze);
  color: var(--polygon-ink);
  border-color: var(--polygon-bronze);
}
.pc-plan-approve:hover { background: var(--polygon-bronze-deep); border-color: var(--polygon-bronze-deep); }
.pc-plan-reject {
  background: var(--polygon-surface);
  color: var(--polygon-text);
}
.pc-plan-reject:hover { border-color: var(--polygon-border-strong); }

/* ---------- Task header (Claude-style task scope) ---------- */
.pc-task {
  margin: 14px 0 6px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--polygon-bronze);
  background: linear-gradient(90deg, rgba(184, 134, 70, 0.08), transparent 70%);
  border-radius: 0 8px 8px 0;
}
.pc-task-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.pc-task-head i { color: var(--polygon-bronze); }
.pc-task-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--polygon-text-muted);
  font-weight: 600;
}
.pc-task-name {
  color: var(--polygon-text);
  font-weight: 600;
}
.pc-task-desc {
  margin-top: 4px;
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--polygon-text-muted);
}

/* ---------- Artifact card ---------- */
.pc-artifact {
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid var(--polygon-border);
  border-radius: 10px;
  background: var(--polygon-surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.pc-artifact:hover {
  border-color: var(--polygon-bronze);
  transform: translateY(-1px);
}
.pc-artifact-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pc-artifact-icon {
  color: var(--polygon-bronze);
  font-size: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.pc-artifact-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.pc-artifact-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--polygon-text);
  margin-bottom: 3px;
  word-break: break-word;
}
.pc-artifact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--polygon-text-muted);
}
.pc-artifact-action {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(184, 134, 70, 0.15);
  color: var(--polygon-bronze);
}
.pc-artifact-path {
  font-family: var(--polygon-font-mono);
  font-size: 11.5px;
  background: var(--polygon-surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--polygon-text);
  word-break: break-all;
}
.pc-artifact-size,
.pc-artifact-kind {
  font-size: 11px;
  opacity: 0.8;
}
.pc-artifact-kind {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pc-artifact-desc {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--polygon-border);
  font-size: 12.5px;
  color: var(--polygon-text-muted);
  line-height: 1.5;
}

/* ---------- Diff block inside tool body ---------- */
.pc-tool-body .polygon-code-diff {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-height: none;
}
.polygon-code-diff-head {
  padding: 8px 14px;
  margin: 0;
  border-bottom: 1px dashed var(--polygon-border);
  background: var(--polygon-surface-2);
  color: var(--polygon-text);
  font-family: var(--polygon-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.polygon-code-diff-head i { color: var(--polygon-bronze); }
.polygon-code-diff-line {
  display: block;
  padding: 1px 14px 1px 26px;
  position: relative;
  font-family: var(--polygon-font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.polygon-code-diff-line::before {
  position: absolute;
  left: 10px;
  font-family: var(--polygon-font-mono);
  font-size: 11px;
  width: 10px;
  text-align: center;
  opacity: 0.85;
}
.polygon-code-diff-line.is-add::before { content: '+'; color: #4ade80; }
.polygon-code-diff-line.is-del::before { content: '−'; color: #f87171; }
.polygon-code-diff-line.is-add { background: rgba(74, 222, 128, 0.10); color: #b8f0c5; }
.polygon-code-diff-line.is-del { background: rgba(248, 113, 113, 0.10); color: #fbc0ba; }

/* ---------- Composer (kept, minor polish) ---------- */
.polygon-stage[data-view="code"] .polygon-composer {
  border-radius: 16px;
  padding: 14px 14px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 24px -12px rgba(0,0,0,0.16);
}
.polygon-stage[data-view="code"] .polygon-composer:focus-within {
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft), 0 1px 0 rgba(0,0,0,0.04), 0 6px 24px -12px rgba(0,0,0,0.16);
}
.polygon-stage[data-view="code"] .polygon-composer-input { font-size: 15px; line-height: 1.55; }

.polygon-code-ctx-chip {
  height: 28px;
  padding: 0 12px;
  background: var(--polygon-surface);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.polygon-code-ctx-chip:active { transform: translateY(0.5px); }
.polygon-code-ctx-chip:not(.is-empty) { border-color: var(--polygon-border-strong); color: var(--polygon-text); }
.polygon-code-ctx-chip:not(.is-empty) i { color: var(--polygon-bronze); }

/* ---------- Dashboard + side panel (kept) ---------- */
.polygon-code-row {
  border-radius: 10px;
  padding: 11px 12px;
  transition: background 160ms ease;
}
.polygon-code-row:active { transform: translateY(0.5px); }
.polygon-code-row-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* (Removed: side-pane tabs/panel — workspace is now full-width chat.) */

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .polygon-code-stream { padding: 14px 12px 20px; gap: 8px; }
  .pc-msg-user { max-width: 92%; }
  .pc-tool-target { max-width: 180px; }
}

/* ============================================================
   Composer: Claude Code-style toolbar
   ============================================================ */

/* Drag-over highlight */
.polygon-composer.is-dragover {
  border-color: var(--polygon-bronze);
  box-shadow: 0 0 0 3px var(--polygon-bronze-soft), var(--polygon-shadow-soft);
}

/* Attached-image preview strip (above textarea) */
.polygon-attach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--polygon-border);
  margin-bottom: 8px;
}
.polygon-attach-strip[hidden] { display: none; }
.polygon-attach-tile {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--polygon-surface-2);
  border: 1px solid var(--polygon-border);
}
.polygon-attach-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polygon-attach-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.polygon-attach-remove:hover { background: rgba(0,0,0,0.85); }

/* Images inside a user message in the code stream */
.pc-msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.pc-msg-img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--polygon-border);
  display: block;
}

/* Mic button listening state */
.polygon-mic-btn.is-listening {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  animation: polygon-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes polygon-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}

/* Model picker + usage ring wrapper */
.polygon-model-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: border-color 160ms ease, background 160ms ease;
}
.polygon-model-wrap:hover {
  border-color: var(--polygon-border);
  background: var(--polygon-surface-2);
}
.polygon-model-wrap .polygon-model-picker {
  border: none;
  background: transparent;
  padding: 4px 4px 4px 10px;
}
.polygon-model-wrap .polygon-model-picker:hover {
  background: transparent;
  border-color: transparent;
}

/* Usage ring — hidden by default, fades in once usage data loads */
.polygon-usage-ring {
  width: 16px;
  height: 16px;
  padding: 0;
  margin-right: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.polygon-usage-ring.is-ready {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.polygon-usage-ring-svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transform-origin: center;
}
.polygon-usage-ring-track {
  stroke: var(--polygon-border);
  opacity: 0.35;
}
.polygon-usage-ring-fill {
  stroke: var(--polygon-bronze);
  transition: stroke-dashoffset 420ms cubic-bezier(.2,.8,.2,1), stroke 200ms ease;
}
.polygon-usage-ring.is-warning .polygon-usage-ring-fill { stroke: #f5b841; }
.polygon-usage-ring.is-critical .polygon-usage-ring-fill { stroke: #f87171; }

/* Usage panel inside the model popover */
.polygon-usage-panel {
  border-top: 1px solid var(--polygon-border);
  margin-top: 6px;
  padding: 10px 10px 6px;
}
.polygon-usage-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--polygon-text-mute);
  margin-bottom: 8px;
}
.polygon-usage-row { margin-bottom: 10px; }
.polygon-usage-row:last-child { margin-bottom: 0; }
.polygon-usage-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.polygon-usage-row-label { font-size: 12.5px; color: var(--polygon-text); }
.polygon-usage-row-meta { font-size: 11px; color: var(--polygon-text-mute); }
.polygon-usage-bar {
  width: 100%;
  height: 4px;
  background: var(--polygon-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.polygon-usage-bar-fill {
  height: 100%;
  width: 0;
  background: var(--polygon-bronze);
  border-radius: 999px;
  transition: width 420ms cubic-bezier(.2,.8,.2,1), background 200ms ease;
}
.polygon-usage-bar-fill.is-warning { background: #f5b841; }
.polygon-usage-bar-fill.is-critical { background: #f87171; }

/* =========================================================================
   Interactive widgets — formula + sliders + visualization.
   ========================================================================= */
.polygon-widget {
  display: block;
  margin: 14px 0 16px;
  border-radius: var(--polygon-radius-md);
  overflow: hidden;
  background: #18120E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  outline: none;
  color: #E6E2DB;
}
body[data-theme="light"] .polygon-widget {
  background: #FAF9F5;
  border-color: rgba(20, 20, 19, 0.14);
  color: #1C1917;
}

.polygon-widget-shell {
  display: flex;
  width: 100%;
  min-height: 240px;
}
.polygon-widget-layout-split { flex-direction: row; }
.polygon-widget-layout-full  { flex-direction: column; }

.polygon-widget-side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  background:
    radial-gradient(70% 60% at 20% 0%, rgba(207, 122, 80, 0.12), transparent 60%),
    linear-gradient(168deg, #1A140F 0%, #110D0B 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  gap: 18px;
  min-width: 0;
}
body[data-theme="light"] .polygon-widget-side {
  background:
    radial-gradient(70% 60% at 20% 0%, rgba(207, 122, 80, 0.14), transparent 60%),
    linear-gradient(168deg, #FAF6EE 0%, #F1ECDF 100%);
  border-right-color: rgba(20, 20, 19, 0.08);
}
.polygon-widget-side-full {
  flex: 0 0 auto;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body[data-theme="light"] .polygon-widget-side-full {
  border-bottom-color: rgba(20, 20, 19, 0.08);
}

.polygon-widget-view {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(168deg, #14100D 0%, #0B0A09 100%);
  min-width: 0;
  overflow: hidden;
}
body[data-theme="light"] .polygon-widget-view {
  background: linear-gradient(168deg, #F5F0E3 0%, #ECE5D2 100%);
}

.polygon-widget-title {
  font-family: var(--polygon-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(230, 226, 219, 0.85);
}
body[data-theme="light"] .polygon-widget-title {
  color: rgba(20, 20, 19, 0.82);
}

.polygon-widget-exprs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
}
.polygon-widget-expr {
  width: 100%;
  color: inherit;
  overflow-x: auto;
  overflow-y: hidden;
}
.polygon-widget-expr .katex,
.polygon-widget-expr .katex-display { color: inherit; }
.polygon-widget-expr-title {
  font-size: 18px;
  padding: 6px 0 4px;
}
.polygon-widget-expr-row {
  font-size: 15px;
}
.polygon-widget-expr-computed {
  font-size: 13px;
  color: rgba(230, 226, 219, 0.72);
  text-align: left;
}
body[data-theme="light"] .polygon-widget-expr-computed {
  color: rgba(20, 20, 19, 0.66);
}

.polygon-widget-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.polygon-widget-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--polygon-font-sans);
  min-width: 0;
}
.polygon-widget-slider-label {
  flex: 0 0 auto;
  max-width: 45%;
  font-style: italic;
  font-size: 13px;
  color: rgba(230, 226, 219, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme="light"] .polygon-widget-slider-label { color: rgba(20, 20, 19, 0.78); }
.polygon-widget-slider-label .katex { font-size: 1em; }

.polygon-widget-slider-value {
  flex: 0 0 auto;
  min-width: 40px;
  font-family: var(--polygon-font-mono);
  font-size: 12.5px;
  color: rgba(230, 226, 219, 0.85);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body[data-theme="light"] .polygon-widget-slider-value { color: rgba(20, 20, 19, 0.82); }

/* Custom range — flat track, bronze accent thumb. */
.polygon-widget-slider-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(230, 226, 219, 0.18);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
body[data-theme="light"] .polygon-widget-slider-range {
  background: rgba(20, 20, 19, 0.14);
}
.polygon-widget-slider-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F5EFE2;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 120ms ease;
}
.polygon-widget-slider-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.polygon-widget-slider-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F5EFE2;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
body[data-theme="light"] .polygon-widget-slider-range::-webkit-slider-thumb {
  background: #1C1917;
  border-color: rgba(20, 20, 19, 0.3);
}
body[data-theme="light"] .polygon-widget-slider-range::-moz-range-thumb {
  background: #1C1917;
  border-color: rgba(20, 20, 19, 0.3);
}

.polygon-widget-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  color: #F5EFE2;
}
body[data-theme="light"] .polygon-widget-svg { color: #1C1917; }
.polygon-widget-plot text { user-select: none; }
.polygon-widget-svg-math { overflow: visible; }
.polygon-widget-svg-math .katex { color: inherit; }

/* Table view. */
.polygon-widget-table-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.polygon-widget-tabs {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  border-radius: 999px;
  background: rgba(230, 226, 219, 0.08);
  gap: 2px;
}
body[data-theme="light"] .polygon-widget-tabs { background: rgba(20, 20, 19, 0.06); }
.polygon-widget-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(230, 226, 219, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.polygon-widget-tab:hover { color: rgba(230, 226, 219, 0.95); }
.polygon-widget-tab.is-active {
  background: rgba(230, 226, 219, 0.14);
  color: #F5EFE2;
}
body[data-theme="light"] .polygon-widget-tab { color: rgba(20, 20, 19, 0.62); }
body[data-theme="light"] .polygon-widget-tab:hover { color: rgba(20, 20, 19, 0.9); }
body[data-theme="light"] .polygon-widget-tab.is-active {
  background: rgba(20, 20, 19, 0.12);
  color: #1C1917;
}

.polygon-widget-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--polygon-font-sans);
  font-size: 13px;
}
.polygon-widget-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(230, 226, 219, 0.55);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-theme="light"] .polygon-widget-table thead th {
  color: rgba(20, 20, 19, 0.5);
  border-bottom-color: rgba(20, 20, 19, 0.08);
}
.polygon-widget-table tbody td {
  padding: 10px;
  color: rgba(230, 226, 219, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body[data-theme="light"] .polygon-widget-table tbody td {
  color: rgba(20, 20, 19, 0.85);
  border-bottom-color: rgba(20, 20, 19, 0.05);
}
.polygon-widget-table tbody tr:last-child td { border-bottom: 0; }

.polygon-widget-error {
  padding: 14px 16px;
  font-family: var(--polygon-font-mono);
  font-size: 12.5px;
  color: #f07a5b;
  background: rgba(240, 122, 91, 0.08);
}

.polygon-widget-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 20px;
  color: var(--polygon-bronze);
  font-family: var(--polygon-font-sans);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
body[data-theme="light"] .polygon-widget-skeleton { color: var(--polygon-bronze-deep); }

.polygon-widget-skeleton-label {
  color: rgba(230, 226, 219, 0.7);
  font-weight: 500;
}
body[data-theme="light"] .polygon-widget-skeleton-label { color: rgba(20, 20, 19, 0.6); }

.polygon-widget-spinner {
  display: block;
  animation: polygon-widget-spin 1.1s linear infinite;
}
.polygon-widget-spinner-arc {
  stroke-dasharray: 60 200;
  animation: polygon-widget-arc 1.6s ease-in-out infinite;
}
@keyframes polygon-widget-spin {
  to { transform: rotate(360deg); }
}
@keyframes polygon-widget-arc {
  0%   { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 85 200; stroke-dashoffset: -30; }
  100% { stroke-dasharray: 1 200; stroke-dashoffset: -115; }
}
@media (prefers-reduced-motion: reduce) {
  .polygon-widget-spinner { animation: none; }
  .polygon-widget-spinner-arc { animation: none; stroke-dasharray: 60 200; }
}

/* Stack the split layout on narrow viewports. */
@media (max-width: 640px) {
  .polygon-widget-layout-split { flex-direction: column; }
  .polygon-widget-side {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  body[data-theme="light"] .polygon-widget-side {
    border-bottom-color: rgba(20, 20, 19, 0.08);
  }
}