/*
 * Zana "islands" theme. Loaded after styles.css: it re-tokens the palette and floats every panel as its own island.
 * Light = the zana website (cream ground, white islands, deep green, gold labels).
 * Dark  = the same islands lit from within, not a flat console.
 */

/* ---------- tokens ---------- */
[data-theme="light"] {
  --app-font: "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
  --app-bg-light: #F3EDE2;
  --app-surface-light: rgba(255, 253, 248, 0.86);
  --app-surface-raised-light: #FFFDF8;
  --app-ink-light: #17332A;
  --app-muted-light: #5C6F66;
  --app-border-light: rgba(23, 51, 42, 0.09);
  --app-accent-light: #1F5D4C;
  --app-accent-hover-light: #144536;
  --app-focus-light: #1F5D4C;
  --app-shadow-light: 0 22px 44px -22px rgba(23, 51, 42, 0.30), 0 2px 8px rgba(23, 51, 42, 0.05);
  --accent-soft: rgba(31, 93, 76, 0.10);
  --bubble-user: #E4EFE8;
  --bubble-zana: #FFFFFF;
  --messages-bg: transparent;
  --z-gold: #B58A3C;
  --z-island: #FFFDF8;
  --z-island-2: #F8F3E8;
  --z-glow-a: rgba(31, 93, 76, 0.10);
  --z-glow-b: rgba(181, 138, 60, 0.13);
  --z-code-bg: #16241E;
  --z-code-ink: #E6F0EB;
}

[data-theme="dark"] {
  --app-bg-dark: #15171A;
  --app-surface-dark: #1D2024;
  --app-surface-raised-dark: #24282D;
  --app-ink-dark: #E9EBEE;
  --app-muted-dark: #9AA1AA;
  --app-border-dark: rgba(255, 255, 255, 0.09);
  --app-accent-dark: #7FD6B1;
  --app-accent-hover-dark: #A3E6CB;
  --app-focus-dark: #A3E6CB;
  --app-shadow-dark: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  --accent-soft: rgba(255, 255, 255, 0.07);
  --bubble-user: #2B3036;
  --bubble-zana: #1D2024;
  --messages-bg: transparent;
  --z-gold: #D7B36A;
  --z-island: #1D2024;
  --z-island-2: #24282D;
  --z-glow-a: transparent;
  --z-glow-b: transparent;
  --z-code-bg: #121417;
  --z-code-ink: #E3E6EA;
}

:root { --z-radius: 26px; --z-radius-sm: 18px; --z-ease: cubic-bezier(0.22, 0.9, 0.24, 1); }

/* ---------- ground ---------- */
html, body {
  background:
    radial-gradient(1100px 620px at 8% -8%, var(--z-glow-a), transparent 60%),
    radial-gradient(900px 560px at 96% 4%, var(--z-glow-b), transparent 62%),
    radial-gradient(900px 700px at 60% 112%, var(--z-glow-a), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
body { -webkit-font-smoothing: antialiased; letter-spacing: 0.002em; }

/* ---------- islands ---------- */
.workspace { gap: 0.9rem; padding: 0.9rem; }
.rail { gap: 0.9rem; }

.side,
.chat,
.desktop-panel-tabs.personal-chrome,
.panel {
  background: var(--z-island);
  border: 1px solid var(--line);
  border-radius: var(--z-radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.15);
}
[data-theme="dark"] .side,
[data-theme="dark"] .chat { background: #1D2024; }
.side { transition: transform 260ms var(--z-ease), box-shadow 260ms var(--z-ease); }
.side:hover { transform: translateY(-2px); }

.chat { padding: 1rem 1.1rem 1.05rem; }
.side { padding: 1.05rem 1.05rem 1.1rem; }
.side-head h2, .chat-top h2, .side h2 { letter-spacing: 0.01em; }
.side-head p, .eyebrow { color: var(--ink-soft); }
.eyebrow, .side-head .eyebrow { color: var(--z-gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 700; }

.messages { border: 0; padding: 0.4rem 0.35rem 0.6rem; gap: 1rem; scroll-behavior: smooth; }

/* tabs / chips / buttons */
.mode-pill, .person-navigation button, .desktop-panel-tabs button, .mobile-tabs button {
  border-radius: 999px;
  transition: background 180ms var(--z-ease), transform 180ms var(--z-ease), box-shadow 180ms var(--z-ease);
}
.person-navigation button { padding: 0.5rem 0.85rem; }
.person-navigation button:hover { background: var(--accent-soft); }
.person-navigation .is-active, .person-navigation [aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
button.primary, .primary {
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.15rem;
  font-weight: 650;
  box-shadow: 0 10px 22px -12px var(--accent);
  transition: transform 160ms var(--z-ease), box-shadow 160ms var(--z-ease), filter 160ms;
}
[data-theme="dark"] button.primary, [data-theme="dark"] .primary { color: #04140E; }
button.primary:hover, .primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
button.ghost, .ghost { border-radius: 999px; }

/* composer */
.composer-dock, #composer, .composer { border-radius: 22px; }
.composer-dock textarea, .composer textarea, #message {
  border-radius: 18px;
}

/* ---------- bubbles ---------- */
.bubble { border-radius: 22px; padding: 0.85rem 1.05rem; line-height: 1.55; }
.bubble.zana {
  background: var(--z-island);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -22px rgba(23, 51, 42, 0.5);
  border-top-left-radius: 8px;
  max-width: min(92%, 46rem);
}
.bubble.user { border-radius: 22px 22px 8px 22px; border: 0; background: var(--bubble-user); }
[data-theme="dark"] .bubble.zana { background: #1D2024; box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.04); }
.bubble.zr-rich { white-space: normal; }

/* ---------- rich text ---------- */
.zr-rich > *:first-child { margin-top: 0; }
.zr-rich > *:last-child { margin-bottom: 0; }
.zr-p { margin: 0 0 0.7rem; }
.zr-h { margin: 1.1rem 0 0.45rem; line-height: 1.25; letter-spacing: 0.005em; }
.zr-h1 { font-size: 1.32rem; } .zr-h2 { font-size: 1.16rem; } .zr-h3 { font-size: 1.04rem; } .zr-h4, .zr-h5, .zr-h6 { font-size: 0.96rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.zr-rich strong { font-weight: 700; }
.zr-link { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.zr-link:hover { text-decoration-color: var(--accent); }
.zr-inline-code { font: 0.86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--accent-soft); color: var(--accent); padding: 0.12em 0.42em; border-radius: 7px; }
.zr-list { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.zr-list li { margin: 0.22rem 0; padding-left: 0.15rem; }
.zr-list li::marker { color: var(--accent); }
.zr-task { list-style: none; margin-left: -1.25rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.zr-task-input { accent-color: var(--accent); flex: 0 0 auto; margin-top: 0.23rem; width: 1.08rem; height: 1.08rem; cursor: pointer; }
.zr-box { color: var(--accent); font-size: 1.05em; line-height: 1; }
.zr-task-done .zr-li-text { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.zr-quote { margin: 0.2rem 0 0.8rem; padding: 0.55rem 0.95rem; border-left: 3px solid var(--z-gold); background: var(--z-island-2); border-radius: 0 14px 14px 0; color: var(--ink-soft); }
.zr-hr { border: 0; height: 1px; background: var(--line); margin: 1rem 0; }

.zr-table-wrap { overflow-x: auto; margin: 0.4rem 0 0.9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--z-island); }
.zr-table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.zr-table th { background: var(--z-island-2); text-align: left; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--z-gold); padding: 0.6rem 0.85rem; white-space: nowrap; }
.zr-table td { padding: 0.55rem 0.85rem; border-top: 1px solid var(--line); vertical-align: top; }
.zr-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--z-island-2) 55%, transparent); }

.zr-code { margin: 0.4rem 0 0.9rem; border-radius: 16px; overflow: hidden; background: var(--z-code-bg); color: var(--z-code-ink); box-shadow: 0 16px 30px -22px rgba(0,0,0,0.6); }
.zr-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.6rem 0.4rem 0.9rem; background: rgba(255,255,255,0.05); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(230,240,235,0.65); }
.zr-code-copy { border: 0; background: rgba(255,255,255,0.09); color: inherit; border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.72rem; cursor: pointer; }
.zr-code-copy:hover { background: rgba(255,255,255,0.16); }
.zr-code pre { margin: 0; padding: 0.85rem 1rem 1rem; overflow-x: auto; font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.zr-code code { font: inherit; }

/* diagrams: connected cards */
.zr-flow { position: relative; margin: 0.5rem 0 1rem; padding: 1.1rem 1rem; border-radius: 20px; background: var(--z-island-2); border: 1px solid var(--line); overflow-x: auto; }
.zr-flow-layers { position: relative; z-index: 1; display: flex; gap: 3.2rem; align-items: center; min-width: min-content; }
.zr-flow-vertical .zr-flow-layers { flex-direction: column; gap: 2.4rem; }
.zr-flow-layer { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.zr-flow-vertical .zr-flow-layer { flex-direction: row; justify-content: center; }
.zr-node { padding: 0.65rem 1rem; border-radius: 16px; background: var(--z-island); border: 1px solid var(--line); box-shadow: 0 12px 24px -16px rgba(23, 51, 42, 0.55); text-align: center; font-weight: 600; font-size: 0.9rem; min-width: 6.5rem; max-width: 12rem; animation: zr-pop 420ms var(--z-ease) both; }
.zr-node-round { border-radius: 999px; }
.zr-node-decision { border-radius: 14px; border-color: var(--z-gold); background: color-mix(in srgb, var(--z-gold) 12%, var(--z-island)); transform: rotate(0deg); }
.zr-flow-edges { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.zr-edge { fill: none; stroke: var(--accent); stroke-width: 1.7; opacity: 0.75; stroke-dasharray: 5 5; animation: zr-dash 1.6s linear infinite; }
.zr-arrow-tip { fill: var(--accent); }
.zr-edge-label { fill: var(--ink-soft); font-size: 11px; }
@keyframes zr-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes zr-dash { to { stroke-dashoffset: -20; } }

/* ---------- compact cards ---------- */
.zana-line-wrap { align-self: flex-start; max-width: min(92%, 40rem); }
.zana-line {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.55rem 0.7rem 0.55rem 0.6rem; border-radius: 999px;
  background: var(--z-island); border: 1px solid var(--line);
  box-shadow: 0 14px 26px -20px rgba(23, 51, 42, 0.55);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: transform 180ms var(--z-ease), box-shadow 180ms var(--z-ease), border-color 180ms;
  animation: bubble-in 260ms var(--z-ease) both;
}
.zana-line:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 18px 30px -18px rgba(23, 51, 42, 0.6); }
.zana-line-emoji { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent-soft); font-size: 1.15rem; flex: none; }
.zana-line-copy { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.zana-line-title { font-size: 0.92rem; }
.zana-line-note { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zana-line-cta { flex: none; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 650; }
[data-theme="dark"] .zana-line-cta { color: #04140E; }
.zana-line[data-tone="success"] .zana-line-emoji { background: color-mix(in srgb, #2FA77B 22%, transparent); }
.zana-line[data-tone="success"] .zana-line-cta { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.zana-line[data-tone="warn"] .zana-line-emoji { background: color-mix(in srgb, var(--z-gold) 22%, transparent); }
.zana-line[data-tone="warn"] .zana-line-cta { background: var(--z-island-2); color: var(--ink); border: 1px solid var(--line); }

.chat-artifact-card.is-compact { padding: 0; border: 0; background: transparent; box-shadow: none; margin-top: 0.55rem; }
.chat-file-chip { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem 0.55rem 0.6rem; border-radius: 20px; background: var(--z-island); border: 1px solid var(--line); box-shadow: 0 14px 26px -20px rgba(23, 51, 42, 0.55); max-width: 40rem; }
.chat-file-emoji { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 14px; background: var(--accent-soft); font-size: 1.3rem; flex: none; }
.chat-file-meta { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.chat-file-namerow { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.chat-file-name { font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-badge { font-size: 0.64rem; letter-spacing: 0.1em; font-weight: 700; color: var(--z-gold); border: 1px solid color-mix(in srgb, var(--z-gold) 45%, transparent); border-radius: 999px; padding: 0.05rem 0.42rem; }
.chat-file-status { margin: 0; font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-actions { display: flex; gap: 0.4rem; flex: none; }
.chat-file-actions button { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.chat-file-view { flex: none; padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.chat-artifact-detail > * { margin: 0 0 0.75rem; }
.chat-artifact-detail .chat-artifact-preview { max-height: 46vh; overflow: auto; white-space: pre-wrap; font: 0.85rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--z-island-2); border-radius: 14px; padding: 0.85rem 1rem; }

/* ---------- popup ---------- */
.zana-modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 34rem); width: 100%; color: var(--ink); }
.zana-modal.zana-modal-wide { max-width: min(94vw, 46rem); }
.zana-modal::backdrop { background: rgba(10, 18, 15, 0.42); backdrop-filter: blur(6px); animation: zr-fade 200ms ease both; }
.zana-modal-card { background: var(--z-island); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: zr-pop 320ms var(--z-ease) both; }
.zana-modal-head { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.1rem 0.85rem 1.2rem; border-bottom: 1px solid var(--line); }
.zana-modal-emoji { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 16px; background: var(--accent-soft); font-size: 1.4rem; flex: none; }
.zana-modal-titles { flex: 1; min-width: 0; }
.zana-modal-title { margin: 0; font-size: 1.05rem; }
.zana-modal-subtitle { margin: 0.1rem 0 0; font-size: 0.83rem; color: var(--ink-soft); }
.zana-modal-close { border: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--z-island-2); color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; }
.zana-modal-close:hover { background: var(--accent-soft); color: var(--accent); }
.zana-modal-body { padding: 1rem 1.2rem 1.25rem; overflow: auto; }
.zana-modal-body .connect-action-card { border: 0; background: transparent; box-shadow: none; padding: 0; }
@keyframes zr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- thinking ---------- */
.thinking-status { gap: 0.7rem; padding: 0.4rem 0.9rem 0.4rem 0.5rem; border-radius: 999px; background: var(--z-island); border: 1px solid var(--line); box-shadow: 0 14px 28px -22px rgba(23, 51, 42, 0.6); color: var(--ink); }
.thinking-status .thinking-mark {
  position: relative; width: 1.9rem; height: 1.9rem; opacity: 1; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, #fff), var(--accent-soft) 70%);
  animation: zr-orb 2.4s ease-in-out infinite;
  display: grid; place-items: center;
}
.thinking-status .thinking-mark::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: zr-ring 2.4s ease-out infinite; }
.thinking-emoji { font-size: 1rem; line-height: 1; animation: zr-bob 2.4s ease-in-out infinite; }
.thinking-status .thinking-label {
  font-style: normal; font-weight: 600;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--accent) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zr-shimmer 2.6s linear infinite;
}
.thinking-status.is-popping { animation: zr-pop 320ms var(--z-ease) both; }
@keyframes zr-orb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes zr-ring { 0% { opacity: 0.55; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes zr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes zr-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (max-width: 720px) {
  .workspace { gap: 0.6rem; padding: 0.55rem; }
  .side, .chat { border-radius: 22px; }
  .zana-line-note { display: none; }
  .chat-file-chip { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .zr-edge, .thinking-status .thinking-mark, .thinking-status .thinking-mark::after, .thinking-emoji, .thinking-status .thinking-label { animation: none; }
  .zr-node, .zana-modal-card, .zana-line { animation: none; }
  .thinking-status .thinking-label { color: var(--ink); background: none; }
}

/* thread popup */
.zana-thread { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.zana-thread-title { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-gold); }
.zana-thread-note { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }
.zana-thread-msg { margin: 0 0 0.7rem; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--z-island-2); border: 1px solid var(--line); }
.zana-thread-meta { margin: 0 0 0.3rem; font-size: 0.76rem; color: var(--ink-soft); }
.zana-thread-body { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.5; max-height: 14rem; overflow: auto; }

/* =====================================================================
   Personal chrome v2: menu at the top, Person dropdown, chat never replaced
   ===================================================================== */
.workspace[data-product="personal"] .mobile-tabs {
  position: static; order: -1; grid-column: 1 / -1; grid-row: 1;
  display: flex !important; align-items: center; justify-content: space-between; gap: .5rem;
  bottom: auto; top: 0; margin: 0; padding: .1rem .2rem;
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
}
.workspace[data-product="personal"] .mobile-tabs-scroll { display: flex; gap: .4rem; align-items: center; overflow: visible; }
.person-drop { position: relative; }
.person-drop-trigger { display: inline-flex; gap: .3rem; align-items: center; }
.person-drop-menu {
  position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; min-width: 13rem;
  display: grid; padding: .35rem; gap: .1rem;
  background: var(--z-island); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.person-drop-menu[hidden] { display: none; }
.person-drop-menu button { text-align: left; padding: .5rem .7rem; border: 0; background: transparent; color: var(--ink); border-radius: 10px; font: inherit; cursor: pointer; }
.person-drop-menu button:hover, .person-drop-menu button:focus-visible { background: var(--accent-soft); }
/* Desktop: the side rails are already on screen, so only Person and the menu remain at the top. */
@media (min-width: 981px) {
  .workspace[data-product="personal"] .mobile-tab[data-tab="chat"],
  .workspace[data-product="personal"] .mobile-tab[data-tab="current"],
  .workspace[data-product="personal"] .mobile-tab[data-tab="past"] { display: none !important; }
  .workspace[data-product="personal"] .desktop-panel-tabs { display: none !important; }
}
/* Person / History are popups: the chat is never hidden. */
.chat.is-person-view .messages, .chat.is-person-view .composer-dock,
.chat.is-history-view .messages, .chat.is-history-view .composer-dock { display: flex !important; }
.zana-surface-modal .person-surface, .zana-surface-modal .history-surface { padding: 0; background: transparent; overflow: visible; }
.zana-surface-modal .person-surface-head { display: none; }
.zana-modal-wide .zana-modal-card { width: min(56rem, 94vw); max-height: 88vh; }
.zana-modal-body { overflow: auto; }

/* History rail: bigger, easier to read */
.panel-past .side-head h2 { font-size: 1.15rem; }
.panel-past .history-conversation-row { padding: .85rem .95rem; font-size: 1rem; border-radius: 14px; }
.panel-past .history-conversation-preview { font-size: 1rem; line-height: 1.45; }
.panel-past .history-conversation-row small { font-size: .8rem; }
#history-search { font-size: 1rem; padding: .7rem .85rem; }

/* Clear / Resume: icons on the Vault status row, right side */
.composer-options-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chat-icon-actions { display: inline-flex; gap: .3rem; margin-left: auto; }
.chat-icon-btn {
  width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 0; line-height: 1;
  display: inline-grid; place-items: center;
}
.chat-icon-btn::before { content: attr(data-glyph); font-size: 1rem; }
.chat-icon-btn:hover, .chat-icon-btn:focus-visible { background: var(--accent-soft); color: var(--ink); }

/* Vault unlock: compact */
#vault-panel.composer-flyout { padding: .55rem .7rem; gap: .35rem; }
#vault-panel .composer-flyout-title { margin: 0; font-size: .78rem; color: var(--ink-soft); }
#vault-panel .vault-bar-note { display: none; }
#vault-panel .vault-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
#vault-panel .vault-duration-label { display: none; }
#vault-panel #vault-unlock-duration { order: -2; flex: 0 0 auto; max-width: none; font-size: .72rem; padding: .18rem .5rem; border-radius: 999px; }
#vault-panel #vault-bar-password { order: -1; flex: 1 1 9rem; min-width: 0; padding: .45rem .7rem; }
#vault-panel .vault-bar-btn { padding: .4rem .85rem; font-size: .85rem; }
#vault-panel #vault-bar-forgot-password { padding: 0; border: 0; background: none; font-size: .72rem; text-decoration: underline; color: var(--ink-soft); }

/* Now: Current Picture, Current Work, Questions */
.panel-now .side-head .persist-note, .panel-current .persist-note { display: none; }
.now-divider { border: 0; border-top: 1px solid var(--line); margin: .85rem 0; }
.picture-oneliner { margin: 0 0 .45rem; font: 650 1.02rem/1.35 var(--font-display, inherit); }
.picture-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.picture-todo li { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.35; }
.picture-todo li.is-done { color: var(--ink-soft); text-decoration: line-through; }
.picture-todo-box { color: var(--accent); }
.picture-agents { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.pic-main .side-card { border: 0; padding: 0; background: transparent; }

.agent-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); background: #fff; color: #17332A;
}
.agent-chip[data-tone="active"] { background: #2E9E6B; border-color: #2E9E6B; color: #fff; }
.agent-chip[data-tone="coding"] { background: #E8862A; border-color: #E8862A; color: #fff; }
.agent-chip[data-tone="passive"] { background: #fff; color: #17332A; }
.panel-current-work .current-work-summary, .panel-current-work .current-work-details { font-size: .8rem; }
.panel-current-work .current-work-summary { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.panel-current-work .current-work-compact-name { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.panel-current-work .current-work-line { font-size: .78rem; margin: .2rem 0; }
.panel-current-work .current-work-card { border-radius: 14px; }
.panel-current-work .current-work-card[open] { background: var(--z-island-2); }
.person-drop-trigger::after { content: "▾"; font-size: .8em; margin-left: .3rem; }
.workspace[data-product="personal"] .mobile-tabs { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.workspace[data-product="personal"] .mobile-tab {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .45rem .95rem; color: var(--ink); background: var(--z-island); border: 1px solid var(--line);
}
.workspace[data-product="personal"] .mobile-tab.is-active { background: var(--accent-soft); }
.workspace[data-product="personal"] .mobile-menu-trigger { background: var(--z-island); border: 1px solid var(--line); border-radius: 999px; }
.panel-now > .side-head { margin-bottom: .6rem; }
.panel-now .panel-current > .side-head { display: none; }
.panel-now .panel-current-work > .side-head, .panel-now .panel-questions > .side-head { margin-bottom: .35rem; }
.panel-now .side-head h2 { font-size: 1.05rem; }
.panel-now .picture-actions { margin-top: .5rem; }
.panel-now .picture-actions .ghost { padding: .25rem .7rem; font-size: .76rem; }
#vault-panel .vault-bar-btn, #vault-panel #vault-bar-unlock { width: auto !important; flex: 0 0 auto; }
#vault-panel #vault-bar-password { order: 0; }
#vault-panel #vault-unlock-duration { order: 5; margin-left: auto; }
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] {
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "tabs" "chat" !important;
  }
  #workspace.workspace[data-product="personal"] > .mobile-tabs { grid-area: tabs !important; grid-row: 1 !important; padding-top: max(.35rem, env(safe-area-inset-top, 0px)); }
  #workspace.workspace[data-product="personal"] .mobile-tabs-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
  .person-drop-menu { position: fixed; top: 3.4rem; left: .8rem; right: .8rem; }
}
.zana-surface-modal .person-mobile-navigation { display: flex !important; flex-wrap: wrap; gap: .35rem; padding: 0 0 .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
.zana-surface-modal .person-mobile-navigation button { padding: .35rem .8rem; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; }
.zana-surface-modal .person-mobile-navigation [aria-current="page"] { background: var(--accent-soft); font-weight: 650; }

/* v3: nav lives in the Zana header row; vault sits under the composer; Clear/Resume are plain words */
.chat-top { display: flex; align-items: center; gap: .6rem; }
#workspace.workspace[data-product="personal"] .chat-top > .mobile-tabs { margin-left: auto; padding: 0; order: 0; grid-area: auto !important; }
.chat-top .chat-tools { order: 3; }
.chat-icon-btn { width: auto; height: auto; border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; font-weight: 600; }
.chat-icon-btn::before { content: none; }
@media (min-width: 700px) { .chat-top .person-drop-menu { left: auto; right: 0; } }

/* ---------- thinking trail: a live, readable log with one traveling icon ---------- */
.thinking-status.zana-trail {
  position: relative; display: block; max-width: min(92%, 46rem);
  padding: .7rem 1rem .7rem 2.9rem; border-radius: 22px; border-top-left-radius: 8px;
  animation: zr-pop 320ms var(--z-ease) both;
}
.trail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; position: relative; }
.trail-step { position: relative; display: block; line-height: 1.4; }
.trail-step .trail-dot { position: absolute; left: -1.95rem; top: .05rem; width: 1.4rem; text-align: center; font-size: .78rem; color: var(--accent); }
.trail-step .thinking-copy { display: grid; gap: .1rem; }
.trail-step.is-done .thinking-label { animation: none; background: none; color: var(--ink-soft); font-weight: 500; -webkit-text-fill-color: currentColor; }
.trail-step .thinking-detail { font-size: .84rem; color: var(--ink-soft); }
.trail-step.is-done .thinking-detail { display: none; }
.trail-step.is-done.is-open .thinking-detail:not(:empty) { display: block; }
.trail-step.is-done { cursor: pointer; }
.trail-orb {
  position: absolute !important; left: .55rem; top: .75rem; width: 1.9rem; height: 1.9rem;
  transition: top 520ms var(--z-ease), transform 620ms var(--z-ease), opacity 300ms;
}
.trail-orb.is-diving .thinking-emoji { animation: zr-dive 720ms var(--z-ease) both, zr-bob 2.4s ease-in-out 720ms infinite; }
.trail-orb.is-returning .thinking-emoji { animation: zr-return 520ms var(--z-ease) both, zr-bob 2.4s ease-in-out 520ms infinite; }
@keyframes zr-dive { 0% { transform: scale(1); } 45% { transform: scale(.15); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes zr-return { 0% { transform: scale(.4) rotate(-40deg); opacity: .3; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.zana-trail.is-superseded { opacity: .62; }
.zana-trail.is-superseded .trail-step:last-child .thinking-label::after { content: " \21AA  redirected"; font-size: .78rem; color: var(--ink-soft); }
.zana-trail.is-finished { padding: .35rem .9rem; border-radius: 999px; background: transparent; box-shadow: none; }
.zana-trail.is-finished .trail-steps { display: none; }
.zana-trail.is-finished.is-open { border-radius: 18px; padding: .5rem .9rem; }
.zana-trail.is-finished.is-open .trail-steps { display: grid; margin-top: .5rem; }
.zana-trail.is-finished .trail-step .trail-dot { left: -1.55rem; }
.zana-trail.is-finished.is-open .trail-steps { padding-left: 1.6rem; }
.trail-summary { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .82rem; cursor: pointer; padding: 0; }
.trail-summary:hover { color: var(--ink); }

.session-status:empty { display: none; }
.welcome-topics { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.welcome-topic { border: 1px solid var(--line); background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: .28rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.welcome-topic:hover { border-color: var(--accent); }
/* dark = true black, no tint anywhere */
[data-theme="dark"] body, [data-theme="dark"] html, [data-theme="dark"] .shell, [data-theme="dark"] #workspace.workspace { background: #15171A !important; }
[data-theme="dark"] .panel, [data-theme="dark"] .chat, [data-theme="dark"] .side, [data-theme="dark"] .mobile-menu-panel, [data-theme="dark"] .composer-flyout { background: #1D2024 !important; }
[data-theme="dark"] { --z-island: #1D2024; --z-island-2: #24282D; --input-bg: #1D2024; --panel: #1D2024; --panel-strong: #24282D; --paper: #15171A; }

.history-keywords { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0; }
.history-keyword { font-size: .7rem; padding: .08rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink-soft); }

/* trail beats the older live-work grid rules */
#workspace.workspace[data-product="personal"] .thinking-status.live-work-status.zana-trail {
  display: block; padding: .7rem 1rem .7rem 2.9rem; align-self: flex-start; width: auto; max-width: min(92%, 46rem);
  border-radius: 22px; border-top-left-radius: 8px; background: var(--z-island);
}
#workspace.workspace[data-product="personal"] .thinking-status.live-work-status.zana-trail .trail-orb { position: absolute; width: 1.9rem; height: 1.9rem; margin: 0; }
#workspace.workspace[data-product="personal"] .thinking-status.live-work-status.zana-trail .thinking-copy { display: grid; gap: .1rem; }

#workspace.workspace[data-product="personal"] .composer-options-row .personal-chat-controls { position: static; display: flex; gap: .3rem; margin: 0 0 0 auto; padding: 0; width: auto; background: none; border: 0; }
#workspace.workspace[data-product="personal"] .composer-options-row .personal-chat-controls .ghost { padding: .2rem .7rem; font-size: .78rem; font-weight: 600; }

/* popup sizing: the dialog itself is the wide box */
dialog.zana-modal.zana-modal-wide { width: min(56rem, 94vw); max-width: none; }
dialog.zana-modal.zana-modal-wide .zana-modal-card { width: 100%; max-width: none; }
.zana-surface-modal .person-mobile-navigation { flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; margin: 0 0 .7rem !important; }
.zana-surface-modal .person-surface-head { display: flex; border: 0; padding: 0 0 .4rem; }
.zana-surface-modal .person-surface-head .eyebrow, .zana-surface-modal #person-chat-return, .zana-surface-modal #history-chat-return { display: none; }

/* ===== Personal v4: desktop header, Agents, Current Work, widths ===== */
@media (min-width: 981px) {
  .workspace[data-product="personal"] .mobile-tabs-scroll { display: none !important; }
}
.panel-agents .side-head { margin-bottom: .3rem; }
.agents-list { display: grid; }
.agent-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .55rem;
  padding: .6rem .2rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.agent-row:last-child { border-bottom: 0; }
.agent-row:hover { background: var(--accent-soft); }
.agent-row-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #9aa1aa; opacity: .55; }
.agent-row.is-active .agent-row-dot { background: #2E9E6B; opacity: 1; box-shadow: 0 0 0 3px rgba(46,158,107,.18); }
.agent-row-count { font-size: .78rem; padding: .12rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink-soft); }
.agent-row.is-active .agent-row-count { background: rgba(46,158,107,.16); color: #1f7a52; font-weight: 650; }
[data-theme="dark"] .agent-row.is-active .agent-row-count { color: #7FD6B1; }
.agent-row-chev { color: var(--ink-soft); }
.panel-current-work .side-head { display: flex; align-items: center; justify-content: space-between; }
.current-work-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .6rem; margin-bottom: .35rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--z-island); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.current-work-row:hover { background: var(--accent-soft); }
.current-work-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.current-work-title { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-work-state { font-size: .74rem; color: var(--ink-soft); }
.questions-count { font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; background: var(--accent-soft); margin-left: .35rem; }

/* everything inside the chat column stays inside it */
.messages, .messages .msg-row, .messages .bubble { max-width: 100%; min-width: 0; box-sizing: border-box; }
.messages .zr-code, .messages pre, .messages .zr-table, .messages table { max-width: 100%; overflow-x: auto; }
.messages .zr-code pre, .messages pre { white-space: pre; overflow-x: auto; }
.messages .msg-meta { max-width: 100%; flex-wrap: wrap; }
.messages .msg-row { overflow-wrap: anywhere; }
.personal-chat-controls, .composer-options-row { max-width: 100%; box-sizing: border-box; }

.person-navigation button { display: flex; align-items: center; gap: .5rem; }
.person-new { margin-left: .2rem; font-size: .72rem; padding: .08rem .55rem; border-radius: 999px; background: rgba(46,158,107,.16); color: #1f7a52; font-weight: 650; }
.person-new::before { content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: #2E9E6B; margin-right: .35rem; }
[data-theme="dark"] .person-new { color: #7FD6B1; }
#personal-right { position: relative; }
.question-side-chat {
  position: absolute; inset: 0; width: auto; z-index: 6;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .7rem .75rem .8rem; background: var(--panel, #17191c); color: var(--ink, #eef0f2);
  border: 1px solid var(--line); border-left: 3px solid #e23b4a; border-radius: 18px;
  box-shadow: var(--shadow);
}
.question-side-chat[hidden] { display: none !important; }
.question-side-chat.is-minimized { inset: auto .4rem .4rem .4rem; height: auto; }
.question-side-chat.is-minimized .question-side-messages,
.question-side-chat.is-minimized form,
.question-side-chat.is-minimized .question-side-continue { display: none; }
.question-side-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .35rem; }
.question-side-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 1rem; }
.question-side-head button { min-width: 2.25rem; min-height: 2.25rem; font-size: 1.15rem; }
#question-side-messages { flex: 1; min-height: 0; }
#question-side-messages .msg-row { width: 100%; }
#question-side-messages .bubble.user { background: color-mix(in srgb, #ff4d5a 18%, var(--panel)); }
#question-side-messages .bubble.zana { background: rgba(226, 59, 74, .16); border-left: 3px solid #e23b4a; }
#question-side-form { margin-top: auto; }
#question-side-form:focus-within { border-color: #ff4d5a; }
#question-side-form .compose-send,
#question-side-send { background: #e23b4a; border-color: #e23b4a; color: #fff; }
.question-side-continue { display: none; }
.questions-queue { display: grid; gap: .35rem; margin-bottom: .5rem; }
.question-row { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--z-island); color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.question-row:hover { background: var(--accent-soft); }
.question-row-dot { width: .55rem; height: .55rem; margin-top: .35rem; border-radius: 50%; background: #E0A93A; }
.question-popup textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .75rem; background: var(--input-bg); color: var(--ink); font: inherit; }
.question-popup-actions { display: flex; gap: .5rem; margin-top: .6rem; }

.panel-past .history-search-label { display: none; }
.panel-past .side-head { display: grid; gap: .4rem; }
#history-search { background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; padding-left: 2rem !important; }
.panel-past .history-conversation-row { padding: .6rem .7rem; }
.panel-past .history-conversation-preview { font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.branches-block { display: grid; gap: .4rem; margin: .8rem 0 .2rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.branches-head { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-gold); font-weight: 700; }
.branch-row { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: baseline; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--z-island); color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.branch-row:hover { background: var(--accent-soft); }
.branch-row small { color: var(--ink-soft); }
.session-divider { align-self: stretch; text-align: center; font-size: .74rem; color: var(--ink-soft); margin: .6rem 0; display: flex; align-items: center; gap: .6rem; }
.session-divider::before, .session-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.branch-popup { display: grid; gap: .6rem; }
.branch-popup-messages { display: flex; flex-direction: column; gap: .7rem; max-height: 52vh; overflow: auto; padding: .2rem; }
.branch-popup-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.branch-popup-form textarea { border: 1px solid var(--line); border-radius: 14px; padding: .6rem .75rem; background: var(--input-bg); color: var(--ink); font: inherit; resize: none; }
.branch-popup-voice { display: grid; gap: .45rem; justify-items: start; }
.branch-popup-voice-host { width: 100%; min-width: 0; }
.branch-bring { justify-self: start; }

/* vault flyout stays a real flyout (opens and closes); voice button keeps its icon when open */
#vault-panel.composer-flyout[hidden] { display: none !important; }
#vault-panel .vault-password-change { display: none !important; }
#vault-panel.show-change .vault-password-change:not([hidden]) { display: grid !important; }
#vault-change-toggle { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: .74rem; text-decoration: underline; cursor: pointer; }
#voice-tool-btn[aria-expanded="true"], #voice-tool-btn.is-on { background: var(--accent) !important; color: #f7fffc !important; border-color: var(--accent) !important; }
#voice-tool-btn svg { opacity: 1 !important; visibility: visible !important; }

.local-question-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; width: min(22rem, calc(100vw - 2rem)); padding: .9rem 1rem; border-radius: 18px; border: 1px solid var(--line); background: var(--z-island); color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); animation: zr-pop 320ms var(--z-ease) both; }
.local-question-label { margin: 0 0 .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-gold); font-weight: 700; }
.local-question-toast textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .65rem; background: var(--input-bg); color: var(--ink); font: inherit; resize: none; }

/* trail polish: quiet finished steps, one bold current step, smaller Z orb */
#workspace.workspace[data-product="personal"] .zana-trail .trail-step .thinking-label { font-weight: 500; color: var(--ink-soft); font-size: .92rem; }
#workspace.workspace[data-product="personal"] .zana-trail .trail-step.is-current .thinking-label { font-weight: 650; color: var(--ink); }
#workspace.workspace[data-product="personal"] .zana-trail .trail-orb { width: 1.55rem; height: 1.55rem; left: .7rem; font-size: .8rem; }
.zana-trail .trail-dot { left: -1.75rem; }
.quick-replies { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.quick-reply { border: 1px solid var(--line); background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: .32rem .95rem; font: inherit; font-size: .88rem; cursor: pointer; }
.quick-reply:hover { border-color: var(--accent); }
.reply-context { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.reply-context p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.selected-work-context { border-color: color-mix(in srgb, var(--accent, #7c6cf0) 35%, transparent); }

.core-v2-row { border: 1px solid var(--line); border-radius: 14px; padding: .7rem .85rem; margin-bottom: .7rem; }
.core-v2-head { margin: 0 0 .3rem; font-size: .74rem; color: var(--ink-soft); }
.core-v2-you { margin: 0 0 .5rem; font-weight: 600; }
.core-v2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.core-v2-grid p { margin: .2rem 0 0; white-space: pre-wrap; font-size: .9rem; }
@media (max-width: 700px) { .core-v2-grid { grid-template-columns: 1fr; } }

/* ---- Agent status indicator (top right of the chat header) ---- */
.agent-status { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--z-island); color: var(--ink); font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.agent-status[hidden] { display: none !important; }
.agent-status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #9aa1aa; }
.agent-status[data-layer="PLAN"] .agent-status-dot { background: #4F8DF7; }
.agent-status[data-layer="ACT"] .agent-status-dot { background: #2E9E6B; animation: agent-pulse 1.6s ease-in-out infinite; }
.agent-status[data-layer="ACT_PAUSED"] .agent-status-dot { background: #E0A93A; }
.agent-status[data-layer="ACT_COMPLETE"] .agent-status-dot { background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,.2); }
.agent-status[data-layer="ACT_PAUSED"] { border-color: #E0A93A; }
@keyframes agent-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,158,107,.5); } 50% { box-shadow: 0 0 0 5px rgba(46,158,107,0); } }
.chat-top .agent-status + .mobile-tabs, .chat-top .agent-status ~ .mobile-tabs { margin-left: .6rem !important; }
.agent-panel { display: grid; gap: .6rem; }
.agent-head { display: flex; align-items: center; gap: .6rem; }
.agent-badge { font-size: .74rem; font-weight: 800; letter-spacing: .1em; padding: .18rem .6rem; border-radius: 999px; background: var(--accent-soft); }
.agent-state { color: var(--ink-soft); font-size: .84rem; text-transform: capitalize; }
.agent-section { padding: .5rem 0; border-top: 1px solid var(--line); }
.agent-section h4 { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-gold); }
.agent-section .agent-section { border: 0; padding: .1rem 0 .3rem .6rem; }
.agent-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; display: grid; gap: .15rem; }
.agent-outcome { margin: 0; font-weight: 650; }
.agent-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.agent-work-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.agent-work-copy { display: grid; gap: .15rem; min-width: 0; }
.agent-work-copy strong { overflow-wrap: anywhere; }
.agent-work-state { color: var(--ink-soft); font-size: .78rem; text-transform: capitalize; }
.agent-correction { border: 1px solid var(--line); border-radius: 12px; padding: .65rem .75rem; }
.agent-correction > summary { cursor: pointer; font-weight: 650; }
.agent-correction-task { display: grid; gap: .4rem; border-top: 1px solid var(--line); padding: .65rem 0; }
.agent-correction-task input, .agent-correction-task textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .65rem; background: var(--input-bg); color: var(--ink); font: inherit; }
.agent-escalation { padding: .6rem .75rem; border: 1px solid #E0A93A; border-radius: 12px; background: rgba(224,169,58,.1); }
.agent-start { display: flex; gap: .5rem; }
.agent-start input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; background: var(--input-bg); color: var(--ink); font: inherit; }

/* Agents stage indicator: a state, not a control */
.agents-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.agents-head h2 { cursor: pointer; }
.agent-indicator { display: inline-flex; gap: .15rem; padding: .18rem; border-radius: 999px; border: 1px solid var(--line); background: var(--z-island); pointer-events: none; user-select: none; }
.agent-stage { padding: .16rem .55rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; color: var(--muted, #8a919b); transition: background .25s, color .25s; }
.agent-stage.is-on { color: #fff; background: #9aa1aa; }
.agent-indicator[data-layer="CORE"] .agent-stage.is-on { background: #7a5af8; animation: agent-pulse 1.6s ease-in-out infinite; }
.agent-indicator[data-layer="PLAN"] .agent-stage.is-on { background: #4F8DF7; }
.agent-indicator[data-layer="ACT"] .agent-stage.is-on { background: #2E9E6B; animation: agent-pulse 1.6s ease-in-out infinite; }
.agent-indicator.is-paused .agent-stage.is-on { background: #E0A93A; animation: none; }
.person-count { margin-left: auto; min-width: 1.4rem; text-align: center; font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; background: var(--z-island-2, rgba(120,120,140,.14)); color: var(--muted, #6b7280); font-weight: 650; }
.person-count.is-zero { opacity: .5; }
[data-person-section] { display: flex; align-items: center; }

.history-search-card { margin: .4rem 0 .7rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 14px; background: var(--z-island); display: grid; gap: .45rem; }
.history-search-card-title { font-weight: 700; margin: 0; }
.history-search-card-summary { margin: 0; font-size: .92rem; line-height: 1.45; }
.history-search-card-ask { margin: 0; font-size: .82rem; color: var(--muted, #6b7280); }
.history-search-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.history-focus form { display: flex; gap: .5rem; } .history-focus input { flex: 1; }
.history-focus-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.history-focus-head { font-weight: 700; margin: .8rem 0 .2rem; }
.history-focus-summary { margin: 0 0 .6rem; line-height: 1.5; }
.branch-popup-messages .bubble.is-target { outline: 2px solid #7a5af8; outline-offset: 2px; }
.history-confirm .agent-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.long-chat-more { align-self: center; margin: .4rem 0; }
.branches-block .branch-row strong { color: var(--z-gold); }
.agents-notices { display: grid; gap: .4rem; margin-bottom: .5rem; }
.agents-notice { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; padding: .55rem .7rem; border: 1px solid #E0A93A; border-radius: 12px; background: var(--z-island); font-size: .84rem; }

/* ACT is its own switch (orange while any accepted plan is live); CORE and PLAN take turns. */
.agent-indicator .agent-stage[data-stage="ACT"].is-on { background: #F08A24; color: #fff; animation: agent-pulse 1.6s ease-in-out infinite; }
.agent-indicator.is-paused .agent-stage[data-stage="ACT"].is-on { background: #E0A93A; animation: none; }

/* "Until refresh" decides how long the Vault stays open: it has to be easy to see and tap. */
#vault-panel #vault-unlock-duration { font-size: 1rem; font-weight: 600; padding: .65rem 1.1rem; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--accent, #8fd3b0); background: var(--panel); color: var(--ink); cursor: pointer; }

/* User-triggered, content-only generative response widgets. No embedded third-party assets. */
.zr-widget { margin: 0.6rem 0 1rem; padding: 1rem; background: var(--z-island); border: 1px solid var(--line); border-radius: 17px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.zr-widget-title { font-size: 1.02rem; line-height: 1.35; margin: 0 0 0.45rem; font-weight: 700; color: var(--ink); }
.zr-widget-note { color: var(--ink-soft); margin: 0 0 0.6rem; font-size: 0.91rem; }
.zr-widget-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0.55rem 0.8rem; margin: 0.65rem 0; }
.zr-widget-rows dt { font-size: 0.82rem; color: var(--ink-soft); }
.zr-widget-rows dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.zr-widget-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.zr-widget-action { display: inline-flex; justify-content: center; align-items: center; gap: 0.3rem; text-decoration: none; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.84rem; font-weight: 650; padding: 0.5rem 0.75rem; cursor: pointer; }
.zr-widget-action:hover, .zr-widget-action:focus-visible { border-color: var(--accent); }
.zr-widget-action:disabled { opacity: 0.55; cursor: default; }
.zr-widget-checklist { display: grid; gap: 0.25rem; }
.zr-widget-check { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0.15rem; font-size: 0.93rem; cursor: pointer; }
.zr-widget-check input { accent-color: var(--accent); height: 1.1rem; width: 1.1rem; flex: none; }
.zr-widget-check.is-done span { text-decoration: line-through; color: var(--ink-soft); }
.zr-widget-bars { display: grid; gap: 0.7rem; margin-top: 0.75rem; }
.zr-widget-bar-row { display: grid; grid-template-columns: minmax(65px, 1fr) minmax(48px, 3fr) minmax(48px, 1fr); align-items: center; gap: 0.55rem; font-size: 0.82rem; }
.zr-widget-bar-track { height: 0.65rem; background: var(--z-island-2); border-radius: 999px; overflow: hidden; }
.zr-widget-bar-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.zr-widget-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.zr-widget-flash-face { font-weight: 650; padding: 1.6rem 0.75rem; text-align: center; background: var(--z-island-2); border-radius: 12px; min-height: 5rem; }
.zr-widget-question { font-weight: 650; margin: 0.35rem 0 0.65rem; }
.zr-widget-options { display: grid; align-items: stretch; gap: 0.45rem; }
.zr-widget-options .zr-widget-action { justify-content: flex-start; text-align: left; }
@media (max-width: 430px) { .zr-widget { padding: 0.8rem; } .zr-widget-bar-row { grid-template-columns: minmax(55px, 1fr) minmax(40px, 1.5fr) minmax(45px, 1fr); gap: 0.35rem; } }

/* Maps load only on explicit click; no external images/scripts on ordinary render. */
.zr-map-card { box-sizing: border-box; width: 100%; overflow: hidden; }
.zr-map-canvas { position: relative; width: 100%; height: clamp(220px, 52vw, 365px); margin: 0.6rem 0; border-radius: 13px; z-index: 0; }
.zr-map-canvas[hidden] { display: none !important; }
.zr-map-status { min-height: 1.2em; margin-top: 0.6rem; }
.zr-map-destinations { margin-top: 0.65rem; display: grid; gap: 0.4rem; }
.zr-map-destination { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.45rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.zr-map-destination span { font-size: 0.86rem; font-weight: 600; margin-right: auto; overflow-wrap: anywhere; }
.zr-map-destination .zr-widget-action { padding: 0.34rem 0.55rem; }
.zr-map-canvas .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,0.87); color: #16342d; }
.zr-map-canvas .leaflet-container { font: inherit; }
@media (max-width: 480px) {
  .zr-map-card { padding: 0.7rem; }
  .zr-map-canvas { height: 265px; }
  .zr-map-destination { gap: 0.35rem; }
}

/* Reusable local-only generative UI: metrics, comparisons, tables, simulations and editors */
.zr-metric-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap:0.65rem; margin:0.5rem 0; }
.zr-metric-item { background:var(--z-island-2); border:1px solid var(--line); border-radius:12px; padding:0.75rem; min-width:0; }
.zr-metric-label { font-size:0.76rem; color:var(--ink-soft); margin:0 0 0.25rem; }
.zr-metric-value { display:block; font-size:clamp(1.12rem,4.2vw,1.55rem); color:var(--ink); overflow-wrap:anywhere; line-height:1.2; }
.zr-metric-item .zr-widget-note { margin:0.35rem 0 0; font-size:0.72rem; }
.zr-compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr)); gap:0.65rem; margin-top:0.6rem; }
.zr-compare-option { border:1px solid var(--line); border-radius:12px; background:var(--z-island-2); padding:0.75rem; min-width:0; }
.zr-compare-title { font-size:0.94rem; font-weight:700; color:var(--ink); margin:0 0 0.3rem; }
.zr-compare-option .zr-widget-rows { grid-template-columns:minmax(0,1fr); gap:0.18rem; }
.zr-compare-option .zr-widget-rows dt:not(:first-child) { margin-top:0.45rem; }
.zr-compare-option .zr-widget-rows dd { text-align:left; }
.zr-timeline { margin:0.6rem 0 0; padding:0 0 0 1.25rem; border-left:2px solid var(--line); list-style:none; }
.zr-timeline li { position:relative; margin:0; padding:0.2rem 0 1.15rem 0.9rem; }
.zr-timeline li:before { content:""; position:absolute; top:0.42rem; left:-1.63rem; width:0.65rem; height:0.65rem; border-radius:50%; border:2px solid var(--accent); background:var(--z-island); }
.zr-timeline li.zr-timeline-done:before { background:var(--accent); }
.zr-timeline li .zr-widget-note { margin:0.25rem 0 0; }
.zr-widget-search { width:100%; min-height:38px; padding:0.55rem 0.7rem; border:1px solid var(--line); border-radius:10px; background:var(--z-island-2); color:var(--ink); font:inherit; }
.zr-widget-data_table .zr-table-wrap { max-width:100%; }
.zr-widget-data_table th .zr-widget-action { border:none; padding:0; background:transparent; color:inherit; text-transform:none; letter-spacing:normal; text-align:left; }
.zr-simulator { background:var(--z-island-2); padding:0.8rem; border-radius:12px; }
.zr-simulator label { display:grid; gap:0.55rem; }
.zr-simulator input[type="range"] { width:100%; accent-color:var(--accent); }
.zr-simulator .zr-metric-value { font-variant-numeric:tabular-nums; }
.zr-widget-editor { box-sizing:border-box; width:100%; min-height:155px; max-height:420px; resize:vertical; border:1px solid var(--line); border-radius:12px; background:var(--z-island-2); color:var(--ink); padding:0.75rem; font:inherit; line-height:1.5; }
.zr-widget-form { display:grid; gap:0.7rem; margin:0.65rem 0; }
.zr-widget-field { display:grid; gap:0.3rem; font-size:0.86rem; color:var(--ink-soft); }
.zr-widget-field input,.zr-widget-field select { box-sizing:border-box; width:100%; padding:0.55rem; border-radius:9px; border:1px solid var(--line); background:var(--z-island-2); color:var(--ink); font:inherit; }
.zr-widget-field input[type="checkbox"] { width:auto; justify-self:start; accent-color:var(--accent); }
.zr-gallery-stage { min-height:100px; border:1px solid var(--line); border-radius:10px; padding:0.6rem; text-align:center; background:var(--z-island-2); }
.zr-gallery-image { display:block; max-width:100%; max-height:360px; object-fit:contain; margin:auto; border-radius:9px; }
.zr-widget :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:450px) { .zr-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .zr-compare-grid { grid-template-columns:1fr; } }

.zr-widget-status { font: inherit; font-size: .86rem; color: var(--ink-soft); padding: .7rem .8rem; margin: .5rem 0; border: 1px solid var(--line); border-radius: 12px; }

/* Profile cards never infer a face: show the exact sourced image, or initials. */
.zr-profile-identity { display:flex; gap:.8rem; align-items:center; min-width:0; margin:.45rem 0 .75rem; }
.zr-profile-avatar { flex:0 0 4rem; width:4rem; height:4rem; overflow:hidden; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--z-island-2); }
.zr-profile-photo { display:block; width:100%; height:100%; object-fit:cover; }
.zr-profile-initials { color:var(--accent); font-size:1.35rem; font-weight:700; }
.zr-profile-details { flex:1 1 auto; min-width:0; }
.zr-profile-name { display:block; font-size:1.08rem; font-weight:700; overflow-wrap:anywhere; }
.zr-profile-details .zr-widget-note { margin:.25rem 0 0; }

/* Replying: the composer shows one compact line, and a sent reply shows what it answers as a quote. */
.reply-context { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; margin: 0 0 .4rem; border-left: 3px solid #5fc3a0; border-radius: 6px; background: color-mix(in srgb, #5fc3a0 8%, transparent); }
.reply-context > div { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.reply-context strong { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8fe0bb; white-space: nowrap; }
.reply-context p { margin: 0; font-size: .85rem; color: var(--muted, #b4b8bd); }
.reply-context .ghost { padding: .15rem .5rem; font-size: .75rem; }
.msg-quote { margin: 0 0 .4rem; padding: .25rem .6rem; border-left: 3px solid #5fc3a0; border-radius: 4px; background: rgba(255,255,255,.05); font-size: .85rem; color: var(--muted, #b4b8bd); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }