/*
 * EVAN's Hermes-compatible shell.
 * Values follow the open-source Hermes desktop Nous dark preset and layout
 * scale; EVAN/EVE-specific controls remain first-class rather than hidden.
 */
:root {
  color-scheme: dark;
  font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display", system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  --hermes-chrome: #0d0d0e;
  --hermes-sidebar: #0a0a0b;
  --hermes-card: #161618;
  --hermes-elevated: #1b1b1e;
  --hermes-hover: #202024;
  --hermes-border: #27272a;
  --hermes-border-strong: #303036;
  --hermes-text: #f1f1f2;
  --hermes-muted: #a1a1aa;
  --hermes-faint: #71717a;
  --hermes-blue: #4a84fe;
  --hermes-blue-hover: #6194ff;
  --hermes-green: #55a583;
  --hermes-red: #e75e78;
  --hermes-cyan: #6f9ba6;
  --hermes-sidebar-width: 14.8125rem;
  --hermes-radius: .2rem;
  --ink: var(--hermes-text);
  --muted: var(--hermes-muted);
  --quiet: var(--hermes-faint);
  --surface: var(--hermes-card);
  --surface-strong: var(--hermes-elevated);
  --surface-soft: var(--hermes-card);
  --line: var(--hermes-border);
  --line-strong: var(--hermes-border-strong);
  --mint: var(--hermes-blue);
  --mint-soft: #b7ceff;
  --coral: var(--hermes-red);
  --amber: #d6a85f;
  background: var(--hermes-chrome);
  color: var(--hermes-text);
}

html, body { width: 100%; min-height: 100%; background: var(--hermes-chrome); }
body { min-height: 100dvh; overflow: hidden; background-image: none; font-size: .8125rem; }
button, input, textarea, select { font: inherit; }
button {
  min-height: 1.75rem;
  padding: .25rem .55rem;
  border: 1px solid var(--hermes-border);
  border-radius: var(--hermes-radius);
  color: var(--hermes-text);
  background: var(--hermes-blue);
  font-weight: 500;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
button:hover:not(:disabled) { transform: none; background: var(--hermes-blue-hover); }
button.secondary { color: var(--hermes-text); border-color: var(--hermes-border-strong); background: var(--hermes-card); }
button.secondary:hover:not(:disabled), button.quiet:hover:not(:disabled) { color: var(--hermes-text); background: var(--hermes-hover); }
button.quiet { padding: .2rem .4rem; color: var(--hermes-muted); border-color: transparent; background: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible, [role="tabpanel"]:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 1px solid var(--hermes-blue);
  outline-offset: -1px;
}
input, textarea, select {
  color: var(--hermes-text);
  border: 1px solid var(--hermes-border-strong);
  border-radius: var(--hermes-radius);
  background: var(--hermes-card);
}
input, textarea { padding: .375rem .5rem; }
input:hover, textarea:hover, select:hover { border-color: #46464d; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: .8125rem; font-weight: 600; letter-spacing: 0; }
h2 { font-size: .875rem; font-weight: 600; }
.eyebrow { color: var(--hermes-faint); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; }
.microcopy { color: var(--hermes-faint); font-size: .6875rem; line-height: 1.35; }
.status, .badge {
  padding: .15rem .4rem;
  color: var(--hermes-muted);
  border-color: var(--hermes-border-strong);
  border-radius: 999px;
  font-size: .6875rem;
}
.status[data-tone="ready"], .save-status[data-tone="ready"] { color: #7bc3a3; border-color: #315d4b; }
.status[data-tone="denied"], .save-status[data-tone="denied"] { color: var(--hermes-red); border-color: #713646; }

.shell { width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
.topbar {
  min-height: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0 .5rem;
  border-bottom: 1px solid var(--hermes-border);
  background: var(--hermes-chrome);
  -webkit-app-region: drag;
}
.brand-lockup { gap: .4rem; }
.brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  border: 0;
  border-radius: var(--hermes-radius);
  background: var(--hermes-blue);
  box-shadow: none;
  font-size: .6875rem;
}
.topbar .brand-subtitle, .topbar .eyebrow { display: none; }
.topbar .status { -webkit-app-region: no-drag; }
.panel { border-color: var(--hermes-border); border-radius: var(--hermes-radius); background: var(--hermes-card); box-shadow: none; backdrop-filter: none; }
.auth-panel { margin-block: 8vh; }
.product-shell { height: calc(100dvh - 2rem); gap: 0; }

.workspace-frame {
  display: grid;
  grid-template-columns: var(--hermes-sidebar-width) minmax(28rem, 1fr) 17rem;
  gap: 0;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  height: calc(100dvh - 2rem);
  background: var(--hermes-chrome);
}
.workspace-frame.inspector-collapsed { grid-template-columns: var(--hermes-sidebar-width) minmax(28rem, 1fr); }
.workspace-frame.sidebar-collapsed { grid-template-columns: minmax(28rem, 1fr) 17rem; }
.workspace-frame.sidebar-collapsed.inspector-collapsed { grid-template-columns: minmax(28rem, 1fr); }
.workspace-stage { display: flex; min-width: 0; height: 100%; overflow: hidden; flex-direction: column; background: var(--hermes-chrome); }
.workspace-sidebar, .eve-inspector {
  position: relative;
  top: 0;
  height: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: var(--hermes-sidebar);
  box-shadow: none;
}
.workspace-sidebar { padding: .5rem 1rem .75rem; border-right: 1px solid var(--hermes-border); }
.workspace-sidebar-heading { min-height: 2rem; padding: 0 0 .35rem; }
.workspace-sidebar-heading strong { font-size: .75rem; font-weight: 600; }
.workspace-new-task {
  min-height: 1.875rem;
  margin: 0 0 .375rem;
  padding: .25rem .5rem;
  border-color: var(--hermes-border-strong);
  background: var(--hermes-card);
}
.workspace-new-task:disabled { color: var(--hermes-faint); background: var(--hermes-card); }
.workspace-nav, .workspace-tools-shortcuts { gap: .125rem; }
.workspace-nav button, .workspace-tools-shortcuts button, .workspace-project-link, .workspace-sidebar-settings {
  min-height: 1.75rem;
  padding: .1875rem .375rem;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: .375rem;
  color: var(--hermes-muted);
  border: 0;
  border-radius: var(--hermes-radius);
  font-size: .75rem;
}
.workspace-nav button:hover, .workspace-tools-shortcuts button:hover, .workspace-project-link:hover,
.workspace-sidebar-settings:hover, .workspace-nav button[aria-current="page"] {
  color: var(--hermes-text);
  border-color: transparent;
  background: color-mix(in srgb, var(--hermes-blue) 16%, transparent);
}
.workspace-sidebar-section, .workspace-sidebar-section:first-of-type { flex: 0 0 auto; margin-top: .75rem; overflow: visible; }
.workspace-section-heading h2 { color: var(--hermes-faint); font-size: .6875rem; letter-spacing: .025em; text-transform: none; }
.workspace-list { margin-top: .25rem; }
.workspace-list button { padding: .25rem .375rem; color: var(--hermes-muted); border-radius: var(--hermes-radius); font-size: .75rem; }
.workspace-list button:hover, .workspace-list button[aria-current="true"] { color: var(--hermes-text); background: color-mix(in srgb, var(--hermes-blue) 16%, transparent); }
.workspace-empty { padding: .3rem .375rem; color: var(--hermes-faint); font-size: .6875rem; }
.workspace-project-link small { color: var(--hermes-faint); font-size: .625rem; }
.workspace-install-status { margin: .1rem .375rem .2rem 1.5rem; color: var(--hermes-faint); font-size: .625rem; }
.icon-button { min-width: 1.5rem; min-height: 1.5rem; padding: .125rem; }

.workspace-stage .product-toolbar {
  position: relative;
  top: 0;
  height: 2.5rem;
  width: 100%;
  gap: .125rem;
  padding: .25rem .5rem;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--hermes-border);
  border-radius: 0;
  background: var(--hermes-chrome);
  box-shadow: none;
  backdrop-filter: none;
}
.workspace-stage .product-tabs { gap: 0; padding: 0; }
.workspace-stage .product-tabs button {
  min-height: 1.75rem;
  padding: .2rem .5rem;
  color: var(--hermes-faint);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: .75rem;
}
.workspace-stage .product-tabs button:hover:not(:disabled) { color: var(--hermes-text); background: var(--hermes-card); }
.workspace-stage .product-tabs button.is-active,
.workspace-stage .product-tabs button[aria-selected="true"] { color: var(--hermes-text); border-bottom-color: var(--hermes-blue); background: transparent; }
.workspace-command-button kbd { padding: .05rem .25rem; color: var(--hermes-faint); border-color: var(--hermes-border-strong); border-radius: var(--hermes-radius); font-size: .625rem; }
.workspace-stage .sign-out-button { margin: 0; background: transparent; }
.local-preview-banner {
  min-height: 1.625rem;
  margin: 0;
  padding: .25rem .75rem;
  color: #b7ceff;
  border: 0;
  border-bottom: 1px solid #294779;
  border-radius: 0;
  background: #101a2e;
  font-size: .6875rem;
}
.local-preview-banner span { color: #8297be; }

.workspace-stage .product-panel { flex: 1 1 0; min-height: 0; height: auto; overflow: auto; }
#product-chat { height: auto; overflow: hidden; }
#product-chat .workspace { height: 100%; overflow: hidden; }
#product-chat .chat-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--hermes-chrome);
}
.chat-topline, .conversation-toolbar, .conversation-status, .conversation-history-actions,
.messages, .composer { width: min(100%, 51rem); margin-inline: auto; }
.chat-topline { min-height: 2.25rem; align-items: center; gap: .375rem; padding: .25rem 1.5rem 0; }
.chat-topline > .evan-model-controls { margin: 0; }
.chat-topline > button { min-height: 1.625rem; font-size: .6875rem; }
.conversation-toolbar { padding: 0 1.5rem; }
.conversation-options > summary { min-height: 1.5rem; padding: .125rem 0; color: var(--hermes-faint); font-size: .6875rem; }
.conversation-options[open] { padding: .25rem 0 .5rem; }
.conversation-options select { min-height: 1.75rem; padding: .2rem .375rem; border-radius: var(--hermes-radius); background: var(--hermes-card); }
.conversation-option-actions { gap: .25rem; padding: .375rem 0; }
.conversation-status { min-height: 1rem; padding: 0 1.5rem; font-size: .625rem; }
.messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .375rem;
  min-height: 0;
  padding: .75rem 1.5rem 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.messages li {
  max-width: 100%;
  padding: .25rem 0;
  color: var(--hermes-text);
  border: 0;
  border-radius: var(--hermes-radius);
  background: transparent;
  font-size: .8125rem;
  line-height: 1.125rem;
}
.messages li[data-role="user"] {
  align-self: flex-end;
  max-width: min(85%, 38rem);
  padding: .5rem .625rem;
  border: 1px solid var(--hermes-border);
  background: var(--hermes-card);
}
.messages li[data-role="assistant"] { width: 100%; }
.messages strong { margin-bottom: .1875rem; color: var(--hermes-faint); font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.messages p { margin: 0; font-size: .8125rem; line-height: 1.125rem; }
.welcome-message { align-self: stretch; padding-block: 2.5rem !important; text-align: center; }
.welcome-message p { font-size: 1.125rem; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.assistant-stream-status { color: var(--hermes-faint); font-size: .6875rem; }
.messages li[data-live="true"] .assistant-stream-status::after { background: var(--hermes-blue); }

.composer {
  flex: 0 0 auto;
  position: relative;
  display: block;
  min-height: 2.75rem;
  margin-bottom: .75rem;
  padding: .3125rem 3.25rem .3125rem .5rem;
  border: 1px solid var(--hermes-border-strong);
  border-radius: var(--hermes-radius);
  background: color-mix(in srgb, var(--hermes-card) 86%, transparent);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .28);
}
.composer textarea {
  height: 1.625rem;
  min-height: 1.625rem;
  max-height: 9.375rem;
  padding: .25rem .125rem;
  border: 0;
  background: transparent;
  resize: none;
  font-size: .8125rem;
  line-height: 1.125rem;
}
.composer-actions { position: absolute; right: .3125rem; bottom: .3125rem; min-height: 1.625rem; gap: .25rem; }
.composer-buttons { gap: .25rem; }
.composer-buttons button { min-height: 1.625rem; padding: .15rem .45rem; font-size: .6875rem; }
#composer-help { display: none; }
#chat-progress { font-size: .625rem; }
.tool-run-status { margin: .375rem .125rem 0; color: var(--hermes-muted); font-size: .6875rem; line-height: 1.35; }
.composer .evan-model-controls { border-color: var(--hermes-border); background: transparent; }

.eve-inspector { padding: .75rem; overflow: auto; border-left: 1px solid var(--hermes-border); }
.eve-inspector h2 { font-size: .875rem; }
.eve-inspector h3 { margin: .75rem 0 .375rem; font-size: .75rem; }
.eve-inspector > label { margin-top: .625rem; color: var(--hermes-muted); font-size: .6875rem; }
.eve-inspector select { min-height: 1.875rem; padding: .25rem .375rem; color: var(--hermes-text); border-color: var(--hermes-border-strong); border-radius: var(--hermes-radius); background: var(--hermes-card); }
.eve-run-facts { gap: .375rem; margin: .75rem 0; }
.eve-run-facts div { grid-template-columns: 4.5rem minmax(0, 1fr); }
.eve-run-facts dt, .eve-run-facts dd, .eve-timeline li { font-size: .6875rem; }
.eve-run-facts dt, .eve-timeline li { color: var(--hermes-faint); }
.eve-run-facts dd { color: var(--hermes-muted); }
.eve-timeline { gap: .375rem; }
.eve-timeline li[data-state="complete"] i, .eve-timeline li[data-state="succeeded"] i { background: var(--hermes-green); }
.eve-timeline li[data-state="running"] i, .eve-timeline li[data-state="executing"] i,
.eve-timeline li[data-state="authorizing"] i { background: var(--amber); }
.eve-inspector-actions { gap: .25rem; margin-top: .75rem; }
.eve-inspector .boundary-note { margin-top: .75rem; padding: .5rem; font-size: .625rem; }

.product-page, .workspace-surface { min-height: 100%; padding: 1.5rem; border: 0; border-radius: 0; background: var(--hermes-chrome); }
.product-page-heading { gap: 1rem; }
.product-page-heading h2 { margin-bottom: .25rem; font-size: 1rem; }
.product-page-heading p:last-child { color: var(--hermes-muted); font-size: .75rem; line-height: 1.5; }
.workspace-evidence-grid, .workspace-tool-grid { gap: .5rem; }
.workspace-evidence-grid article, .workspace-tool-grid article,
.evan-tool-foundry, .evan-tool-foundry-card, .memory-proof-grid article, .memory-grid label,
.history-detail, .proposal-card, .save-status {
  border-color: var(--hermes-border);
  border-radius: var(--hermes-radius);
  background: var(--hermes-card);
  box-shadow: none;
}
.workspace-evidence-grid article, .workspace-tool-grid article { padding: .625rem; }
.workspace-evidence-grid span, .workspace-evidence-grid small, .workspace-tool-grid p { color: var(--hermes-faint); }
.workspace-tool-grid article > span, .evan-tool-foundry-icon { color: var(--hermes-blue); }
.workspace-tool-grid p { font-size: .6875rem; }
.workspace-tool-grid small { color: var(--hermes-muted); font-size: .625rem; }
.workspace-surface-empty { border-color: var(--hermes-border-strong); border-radius: var(--hermes-radius); color: var(--hermes-faint); }
.workspace-terminal, .workspace-browser { border-color: var(--hermes-border); border-radius: var(--hermes-radius); background: #08080a; }
.workspace-terminal-bar, .workspace-browser-bar { min-height: 2rem; padding: .375rem .5rem; border-color: var(--hermes-border); background: var(--hermes-card); }
.workspace-terminal pre, .proof-card dd, output {
  color: #a8d7c4;
  font-family: Menlo, Monaco, "SF Mono", "Courier Prime", monospace, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: .6875rem;
}
.evan-tool-foundry { background: var(--hermes-card); }
.evan-tool-foundry-grid { gap: .375rem; }
.evan-tool-foundry-card { padding: .5rem; }
.evan-tool-foundry-card code, .evan-tool-foundry-card small { color: var(--hermes-cyan); }
.evan-tool-foundry-card p { color: var(--hermes-faint); font-size: .6875rem; }

.workspace-command-palette { padding-top: min(18dvh, 8rem); }
.workspace-command-palette-backdrop { background: rgb(0 0 0 / .58); }
.workspace-command-dialog {
  width: min(36rem, calc(100% - 2rem));
  border-color: var(--hermes-border-strong);
  border-radius: var(--hermes-radius);
  background: var(--hermes-elevated);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / .55);
}
.workspace-command-heading { padding: .5rem .625rem .125rem; }
.workspace-command-heading h2 { color: var(--hermes-muted); font-size: .6875rem; }
.workspace-command-dialog > input { margin: .375rem .5rem .5rem; width: calc(100% - 1rem); border-color: var(--hermes-border-strong); background: var(--hermes-chrome); }
.workspace-command-list { padding: .25rem .375rem .5rem; }
.workspace-command-list button { padding: .4rem .5rem; color: var(--hermes-text); border: 0; background: transparent; }
.workspace-command-list button:hover, .workspace-command-list button:focus-visible { background: color-mix(in srgb, var(--hermes-blue) 18%, transparent); }
.workspace-command-list small { color: var(--hermes-faint); }

@media (max-width: 1040px) {
  .workspace-frame { grid-template-columns: var(--hermes-sidebar-width) minmax(0, 1fr); }
  .eve-inspector {
    position: fixed;
    z-index: 35;
    inset: 2.5rem 0 0 auto;
    width: min(20rem, 88vw);
    height: calc(100dvh - 2.5rem);
    border-left: 1px solid var(--hermes-border);
  }
  .inspector-toggle, .eve-inspector-close { display: inline-flex; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  .topbar { padding-inline: max(.5rem, env(safe-area-inset-left)); }
  .workspace-frame { display: block; height: calc(100dvh - 2rem); }
  .workspace-stage { height: 100%; }
  .workspace-sidebar {
    position: fixed;
    z-index: 30;
    inset: 2rem auto 0 0;
    width: min(var(--hermes-sidebar-width), 88vw);
    height: calc(100dvh - 2rem);
    padding: .5rem 1rem max(.75rem, env(safe-area-inset-bottom));
    border-radius: 0;
    box-shadow: .5rem 0 2rem rgb(0 0 0 / .45);
  }
  .workspace-sidebar-heading { position: static; min-height: 2rem; margin: 0; padding: 0 0 .35rem; border: 0; background: transparent; }
  .workspace-sidebar-heading .icon-button { min-width: 3.5rem; min-height: 1.75rem; padding: .2rem .4rem; border-color: var(--hermes-border); background: var(--hermes-card); }
  .workspace-nav button, .workspace-tools-shortcuts button, .workspace-project-link, .workspace-sidebar-settings { min-height: 2.25rem; padding-block: .375rem; }
  .workspace-stage .product-toolbar { height: 4.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: .25rem; }
  .workspace-stage .product-tabs { grid-column: 1 / -1; grid-row: 2; }
  .workspace-stage .product-tabs button { min-height: 1.75rem; }
  .workspace-stage .product-panel { height: auto; }
  .local-preview-banner { align-items: flex-start; flex-direction: row; }
  .chat-topline, .conversation-toolbar, .conversation-status, .messages { padding-inline: .75rem; }
  .composer { width: calc(100% - 1.5rem); margin-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .eve-inspector { inset: auto .5rem max(.5rem, env(safe-area-inset-bottom)) .5rem; width: auto; height: auto; max-height: 78dvh; border: 1px solid var(--hermes-border); }
}