@font-face {
  font-family: "Selecta";
  src: url("/fonts/selecta/Selecta-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Selecta";
  src: url("/fonts/selecta/Selecta-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Selecta";
  src: url("/fonts/selecta/Selecta-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Selecta";
  src: url("/fonts/selecta/Selecta-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/fonts/material-symbols/MaterialSymbolsOutlined.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  flex-shrink: 0;
  user-select: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/*
 * Hebbia semantic tokens, RGB triples per hebbia.ai design system.
 * Stored as "r, g, b" so they compose with opacity:
 *   color: rgb(var(--content-primary));
 *   color: rgba(var(--content-primary), 0.6);
 */

:root {
  /* Backgrounds */
  --background-primary:   251, 251, 251;
  --background-secondary: 245, 245, 245;  /* Figma #f5f5f5 (shipped colors.css had #efefef, stale) */
  --background-tertiary:  229, 229, 229;
  --background-emphasis:  255, 255, 255;
  --background-cobalt:    238, 242, 255;
  --background-negative:  255, 233, 230;
  --background-warning:   247, 244, 234;

  /* Content (text) */
  --content-primary:   38, 38, 38;
  --content-secondary: 82, 82, 82;
  --content-tertiary:  115, 115, 115;
  --content-disabled:  186, 186, 186;
  --content-onColor:   255, 255, 255;
  --content-cobalt:    70, 91, 255;
  --content-negative:  220, 57, 34;
  --content-warning:   128, 102, 29;

  /* Headers, in Figma but not in shipped colors.css */
  --header-primary:   23, 23, 23;
  --header-secondary: 82, 82, 82;

  /* Icons */
  --icon-primary:   115, 115, 115;  /* Figma #737373 (shipped had #525252, stale) */
  --icon-secondary: 134, 134, 134;  /* Figma #868686 (shipped had #737373, stale) */
  --icon-tertiary:  163, 163, 163;
  --icon-disabled:  186, 186, 186;
  --icon-cobalt:    70, 91, 255;
  --icon-on-color:  255, 255, 255;
  --icon-inverse:   255, 255, 255;

  /* Borders */
  --border-default: 229, 229, 229;
  --border-weak:    234, 234, 234;  /* Figma "Border/Secondary" (#eaeaea) */
  --border-inverse: 82, 82, 82;  /* Figma #525252 (shipped had #404040, stale) */
  --border-focus:   130, 155, 240;

  /* Overlay base, composes with ~0.055 for Figma's Background/Secondary Overlay */
  --overlay-base:   0, 0, 0;

  /* Spacing (from Figma Spacing/* tokens) */
  --spacing-px:  1px;
  --spacing-1:   4px;
  --spacing-1-5: 6px;
  --spacing-2:   8px;
  --spacing-2-5: 10px;
  --spacing-3:   12px;
  --spacing-4:   16px;

  /* Type scale */
  --text-sm:   14px;
  --text-base: 16px;
  --text-2xl:  24px;
  --leading-5: 20px;
  --leading-6: 24px;
  --leading-8: 32px;

  /* Radius */
  --radius-lg: 8px;

  /* Component aliases (solid colors for the common case) */
  --bg: rgb(var(--background-primary));
  --fg: rgb(var(--content-primary));
  --muted: rgb(var(--content-tertiary));
  --muted-strong: rgb(var(--content-secondary));
  --border: rgb(var(--border-default));
  --accent: rgb(var(--content-cobalt));
  --focus-ring: rgba(var(--border-focus), 0.6);
  --user-bg: rgba(var(--overlay-base), 0.05);
  --user-fg: rgb(var(--content-primary));
  --tool-bg: rgb(var(--background-secondary));
  --tool-border: rgb(var(--border-weak));
  --error-bg: rgb(var(--background-negative));
  --error-border: rgba(var(--content-negative), 0.2);
  --input-bg: rgb(var(--background-emphasis));
  --debug-bg: #171717;
  --debug-fg: rgba(255, 255, 255, 0.75);
  --debug-info: #a5b4fc;
  --debug-success: #86efac;
  --debug-warn: #fde68a;
  --debug-error: #fca5a5;
  --shimmer-dim: #d1d5db;

  --prompt-shadow:
    0 12px 22px rgba(0, 0, 0, 0.04),
    0 7px 12px rgba(0, 0, 0, 0.03),
    0 3px 5px rgba(0, 0, 0, 0.02);
  --menu-shadow:
    0 15px 29px rgba(0, 0, 0, 0.05),
    0 5px 6.5px rgba(0, 0, 0, 0.03),
    0 2px 2px rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-primary:   23, 23, 23;
    --background-secondary: 32, 32, 32;
    --background-tertiary:  0, 0, 0;
    --background-emphasis:  32, 32, 32;
    --background-cobalt:    35, 41, 83;
    --background-negative:  62, 8, 0;
    --background-warning:   50, 32, 20;  /* amber tint composited against #171717 */

    --content-primary:   245, 245, 245;
    --content-secondary: 202, 202, 202;
    --content-tertiary:  134, 134, 134;
    --content-disabled:  82, 82, 82;
    --content-cobalt:    88, 110, 251;
    --content-warning:   252, 211, 77;  /* #fcd34d */

    --icon-primary:   212, 212, 212;
    --icon-secondary: 163, 163, 163;
    --icon-tertiary:  100, 100, 100;
    --icon-disabled:  82, 82, 82;
    --icon-cobalt:    88, 110, 251;

    --border-default: 50, 50, 50;
    --border-weak:    38, 38, 38;
    --border-inverse: 229, 229, 229;

    --header-primary: 245, 245, 245;
    --overlay-base:   255, 255, 255;

    --debug-bg: #0a0a0a;
    --shimmer-dim: rgba(255, 255, 255, 0.65);

    --prompt-shadow:
      0 12px 22px rgba(0, 0, 0, 0.3),
      0 7px 12px rgba(0, 0, 0, 0.22),
      0 3px 5px rgba(0, 0, 0, 0.15);
    --menu-shadow:
      0 15px 29px rgba(0, 0, 0, 0.35),
      0 5px 6.5px rgba(0, 0, 0, 0.22),
      0 2px 2px rgba(0, 0, 0, 0.15);
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Selecta", "Inter", "Helvetica Neue", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.005em;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* Top overlay — floats over the message list with a gradient fade */

#top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg) 40%, transparent);
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 6px 40px 0 12px;
}

body.blurred #new-chat-btn,
body.blurred #resume-btn,
body.blurred #settings-btn {
  opacity: 0;
  pointer-events: none;
}

#new-chat-btn {
  display: none;
  pointer-events: all;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, opacity 0.2s, background 0.2s;
  position: relative;
}

#new-chat-btn:hover {
  color: var(--fg);
  background: var(--user-bg);
}

#new-chat-btn::after {
  content: "New chat";
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  background: rgb(var(--content-primary));
  color: rgb(var(--background-emphasis));
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  z-index: 20;
}

#new-chat-btn:hover::after {
  opacity: 1;
}

/* Welcome state */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}

.welcome-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  user-select: none;
  pointer-events: none;
}

.welcome-label {
  color: rgb(var(--content-tertiary));
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.08px;
  margin-bottom: 8px;
  padding: 12px 0;
}

.welcome-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.agent-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 4px;
  background: rgb(var(--background-secondary));
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.agent-card:hover {
  background: rgb(var(--border-default));
}

.agent-card:active {
  transform: scale(0.985);
}

/* Messages area */

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 64px 20px 48px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.scroll-to-bottom {
  position: sticky;
  bottom: 0;
  align-self: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--border-default));
  border-radius: 50%;
  background: rgb(var(--background-emphasis));
  color: rgb(var(--content-primary));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0.75;
  transition: opacity 0.2s;
  animation: fadeIn 0.2s ease-out;
  flex-shrink: 0;
}

.scroll-to-bottom:hover {
  opacity: 1;
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* User message, right-aligned bubble, subtle tinted background */

.message {
  word-wrap: break-word;
  animation: fadeIn 0.3s ease-out;
}

.message-user {
  align-self: center;
  width: calc(100% - 24px);
  margin: 16px 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(var(--overlay-base), 0.05);
  color: rgb(var(--content-primary));
  font-size: 15px;
  line-height: 1.625;
  white-space: pre-wrap;
}

/* Assistant message, markdown output */

.message-assistant {
  align-self: stretch;
  color: rgb(var(--content-secondary));
  line-height: 1.625;
  max-width: 100%;
  padding: 0 4px;
  font-size: 15px;
}

/* Clean boundaries, no leading/trailing margin on the whole block */
.message-assistant > *:first-child {
  margin-top: 0;
}
.message-assistant > *:last-child {
  margin-bottom: 0;
}

.message-assistant p {
  margin: 0 0 12px;
}

/* Headings, more space above (separator) than below (attach to following) */
.message-assistant h1,
.message-assistant h2,
.message-assistant h3,
.message-assistant h4,
.message-assistant h5,
.message-assistant h6 {
  color: rgb(var(--header-primary));
  font-weight: 500;
  margin: 18px 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.message-assistant h1 {
  font-size: 22px;
  letter-spacing: -0.03em;
}
.message-assistant h2 { font-size: 18px; }
.message-assistant h3 { font-size: 16px; }
.message-assistant h4,
.message-assistant h5,
.message-assistant h6 {
  font-size: 15px;
  font-weight: 600;
}

/* Lists, tighter rhythm, hanging indent, tabular numerics on ordered */
.message-assistant ul,
.message-assistant ol {
  padding-left: 22px;
  margin: 0 0 10px;
}

.message-assistant li {
  margin-bottom: 4px;
  padding-left: 2px;
}

.message-assistant li:last-child {
  margin-bottom: 0;
}

/* Paragraphs inside a list item shouldn't double-space */
.message-assistant li > p {
  margin: 0;
}
.message-assistant li > p + p {
  margin-top: 6px;
}

/* Nested lists, tight to parent, slightly less indent */
.message-assistant li > ul,
.message-assistant li > ol {
  margin: 4px 0 0;
  padding-left: 20px;
}

.message-assistant ul li::marker {
  color: rgb(var(--content-tertiary));
}

.message-assistant ol li::marker {
  color: rgb(var(--content-tertiary));
  font-variant-numeric: lining-nums tabular-nums;
}

/* GFM task list items */
.message-assistant li:has(> input[type="checkbox"]) {
  list-style: none;
  padding-left: 0;
  margin-left: -22px;
}

.message-assistant input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: -2px;
  accent-color: rgb(var(--content-cobalt));
}

.message-assistant code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 13px;
  color: rgb(var(--content-cobalt));
  background: rgba(var(--content-cobalt), 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

.message-assistant pre {
  background: rgba(var(--overlay-base), 0.05);
  border: 1px solid rgb(var(--border-weak));
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin-bottom: 8px;
}

.message-assistant pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 13px;
}

.message-assistant a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.message-assistant a:hover {
  opacity: 0.7;
}

.message-assistant strong {
  color: rgb(var(--content-primary));
  font-weight: 500;
}

.message-assistant blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid rgb(var(--content-cobalt));
  color: rgb(var(--content-secondary));
  font-style: italic;
}

.message-assistant blockquote p:last-child {
  margin-bottom: 0;
}

.message-assistant kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(var(--content-primary));
  background: rgb(var(--background-emphasis));
  border: 1px solid rgb(var(--border-default));
  border-radius: 4px;
  box-shadow: 0 1px 0 rgb(var(--border-default));
}

.message-assistant mark {
  background: rgba(var(--content-cobalt), 0.15);
  color: rgb(var(--content-primary));
  padding: 0 2px;
  border-radius: 2px;
}

.message-assistant hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.message-assistant table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 12px;
  font-size: 13px;
}

.message-assistant th {
  text-align: left;
  font-weight: 500;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
  color: rgb(var(--header-primary));
  white-space: nowrap;
}

.message-assistant td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.message-assistant tr:last-child td {
  border-bottom: none;
}

/* Tool badge, collapsible list of completed tool calls */

.message-tool {
  align-self: stretch;
  background: transparent;
  border: none;
  padding: 0;
}

.message-tool summary {
  cursor: pointer;
  color: rgb(var(--header-primary));
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.message-tool summary::-webkit-details-marker {
  display: none;
}

.tool-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgb(var(--content-tertiary));
  transition: transform 0.3s;
}

details[open] .tool-badge-icon {
  transform: rotate(90deg);
}

.tool-badge-count {
  font-size: 14px;
  color: rgb(var(--header-primary));
}

.tool-badge-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

@keyframes countPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.tool-count-pop {
  display: inline-block;
  animation: countPop 0.3s ease-out;
}

/* Smooth expand/collapse */
.tool-badge-content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

details[open] .tool-badge-content-wrap {
  grid-template-rows: 1fr;
}

.tool-badge-content {
  overflow: hidden;
}

.tool-log-entry {
  margin-bottom: 6px;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  color: rgb(var(--content-secondary));
  line-height: 20px;
}

.tool-log-entry:last-child {
  margin-bottom: 0;
}

.tool-log-label {
  font-weight: 500;
  color: rgb(var(--header-primary));
  margin-bottom: 4px;
}

.tool-log-error {
  color: rgb(var(--content-negative));
}

.message-tool pre {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(var(--overlay-base), 0.05);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 11px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  white-space: pre-wrap;
}

.message-error {
  align-self: stretch;
  padding: 10px 12px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  color: rgb(var(--content-negative));
  font-size: 13px;
  line-height: 20px;
}

.message-status {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  padding: 4px;
}

/* Activity indicator, Hebbia loader + label */

.activity {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.activity-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgb(var(--content-secondary));
}

.activity-loader svg {
  width: 14px;
  height: 14px;
}

.activity-text {
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--content-secondary));
}

/* Input area, Hebbia rounded prompt box */

#input-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 10px 20px 10px;
  flex-shrink: 0;
  position: relative;
  margin-top: -24px;
  z-index: 2;
}

.selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  height: 34px;
  margin: 0 4px 8px;
  padding: 0 6px 0 10px;
  border: 1px solid #D4D4D4;
  border-radius: 6px;
  background: #EFEFEF;
  color: rgb(var(--content-tertiary));
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  user-select: none;
}

.selection-chip-label {
  /* Flex children default to min-width: auto, which prevents text-overflow
     from ever clipping. Override so the chip ellipsizes on narrow panes. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-chip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgb(var(--content-tertiary));
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.selection-chip-dismiss:hover {
  background: rgba(var(--overlay-base), 0.06);
}

.selection-chip-x {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .selection-chip {
    border-color: #323232;
    background: #202020;
  }
}

.prompt-box {
  position: relative;
  background: rgb(var(--background-emphasis));
  border: 1px solid rgb(var(--border-default));
  border-radius: 24px;
  padding: 12px;
  box-shadow: var(--prompt-shadow);
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  transition: border-color 0.15s;
}

#input {
  width: 100%;
  padding: 4px 4px 8px;
  border: none;
  background: transparent;
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  resize: none;
  max-height: 200px;
  outline: none;
  display: block;
}

#input::placeholder {
  color: rgb(var(--content-tertiary));
}

.prompt-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.prompt-action-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#files-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(var(--border-default));
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#files-btn:hover {
  background: rgba(var(--overlay-base), 0.05);
}

#files-btn[aria-expanded="true"] {
  background: rgba(var(--overlay-base), 0.05);
  border-color: transparent;
}

#files-btn .material-symbols-outlined {
  font-size: 18px;
  margin-left: -2px;
}

#send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, rgb(var(--content-cobalt)) 85%, black);
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, color 0.2s, box-shadow 0.2s;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.05) 100%), var(--accent, #465BFF);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.06), 0 2px 0 0 rgba(255, 255, 255, 0.60) inset;
}

#send-btn:hover:not(:disabled) {
  background: rgba(var(--content-cobalt), 0.85);
}

#send-btn:active:not(:disabled) {
  transform: scale(0.94);
}

#send-btn:disabled {
  cursor: default;
  opacity: 0.3;
}

@media (prefers-color-scheme: dark) {
  #send-btn {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 2px 5px rgba(0, 0, 0, 0.4),
      0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Files & Sources menu (not-yet-implemented placeholder) */

.files-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 3px);
  max-height: 329px;
  background: rgb(var(--background-emphasis));
  border: 1px solid rgb(var(--border-default));
  border-radius: 8px;
  box-shadow: var(--menu-shadow);
  overflow: hidden;
  z-index: 20;
  animation: fadeIn 0.15s ease-out;
  display: flex;
  flex-direction: column;
}

.files-menu-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent 100%);
}

.files-menu-scroll::-webkit-scrollbar {
  display: none;
}

.files-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 1px;
  background: transparent;
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  cursor: default;
}

.files-menu-item-clickable {
  cursor: pointer;
}

.files-menu-item-clickable:hover {
  background: rgba(var(--overlay-base), 0.04);
}

.source-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.files-menu-item .material-symbols-outlined {
  color: rgb(var(--content-secondary));
}

.files-menu-item-label {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-menu-switch {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: 999px;
  background: rgba(var(--overlay-base), 0.05);
  flex-shrink: 0;
  transition: background 0.2s;
}

.files-menu-switch.on {
  background: rgb(var(--content-cobalt));
}

.files-menu-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  transition: left 0.2s;
}

.files-menu-switch.on .files-menu-switch-handle {
  left: 20px;
}

.files-menu-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 4px;
  background: rgb(var(--background-emphasis));
  border-top: 1px solid rgb(var(--border-weak));
}

.files-menu-footer-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: rgb(var(--content-cobalt));
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: default;
  letter-spacing: -0.07px;
}

.files-menu-search {
  margin-left: auto;
  width: 160px;
  padding: 2px 10px;
  border: 1px solid rgb(var(--border-weak));
  border-radius: 6px;
  background: rgba(var(--overlay-base), 0.04);
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  outline: none;
}

.files-menu-search::placeholder {
  color: rgb(var(--content-secondary));
}

.files-menu-search:focus {
  border-color: rgb(var(--content-cobalt));
  background: rgba(var(--overlay-base), 0.06);
}

.files-menu-unavailable {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}

@media (prefers-color-scheme: dark) {
  .files-menu-unavailable {
    background: rgba(23, 23, 23, 0.85);
  }
}

.files-menu-unavailable-text {
  font-size: 16px;
  line-height: 20px;
  color: rgb(var(--content-secondary));
  text-align: center;
  font-weight: 400;
  max-width: 220px;
}

/* Debug panel (toggle with Ctrl+Shift+D) */

#debug-panel {
  display: none;
  flex-shrink: 0;
  position: relative;
}

#debug-panel.visible {
  display: block;
}

#debug-log {
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--debug-bg);
  color: var(--debug-fg);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 10px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#download-debug-report-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  padding: 3px 8px;
  font-size: 10px;
  background: var(--debug-bg);
  color: var(--debug-fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.8;
}

#download-debug-report-btn:hover {
  opacity: 1;
}

.debug-line {
  user-select: text;
  -webkit-user-select: text;
}

.debug-info {
  color: var(--debug-info);
}

.debug-success {
  color: var(--debug-success);
}

.debug-warn {
  color: var(--debug-warn);
}

.debug-error {
  color: var(--debug-error);
}

/* ── Login screens (SignInScreen / DevLoginScreen) ─────────────────────── */

.login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login-screen form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.login-screen label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-strong);
}

.login-screen select,
.login-screen input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--input-bg);
  outline: none;
  width: 100%;
}

.login-screen select:focus,
.login-screen input:focus {
  border-color: var(--focus-ring);
}

.login-screen button {
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-end;
}

.login-screen button:hover:not(:disabled) {
  background: #3a4dd6;
}

.login-screen button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Sign-in card (SignInScreen) */
.signin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input-bg);
}

.signin-brand {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
}

.signin-subtitle {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted-strong);
}

.signin-env {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}

.signin-env-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-strong);
}

.signin-env-name.active {
  color: var(--fg);
}

/* The reused switch is a <button> here — strip the generic login button look. */
.login-screen .files-menu-switch {
  padding: 0;
  border: none;
  background: rgba(var(--overlay-base), 0.05);
  align-self: auto;
  cursor: pointer;
}

.login-screen .files-menu-switch.on {
  background: rgb(var(--content-cobalt));
}

.login-screen .files-menu-switch:disabled {
  opacity: 1;
  cursor: default;
}

.login-screen .signin-button {
  align-self: stretch;
  text-align: center;
  margin-top: 4px;
}

.signin-error {
  font-size: 12px;
  color: var(--danger, #d23);
  text-align: center;
}

.org-gate-select {
  align-self: stretch;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--input-bg);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.org-gate-select:focus {
  border-color: var(--muted);
}

/* ── Settings Modal ────────────────────────────────────────────────────── */

#settings-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease-out;
}

#settings-modal {
  background: rgb(var(--background-emphasis));
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  padding: 0;
  width: 100%;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.settings-header h2 {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

.settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.settings-close:hover {
  color: var(--fg);
  background: var(--user-bg);
}

#settings-modal form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.resume-modal-body {
  padding: 16px 20px 20px;
}

.resume-empty,
.resume-error {
  margin: 8px 0;
  color: rgb(var(--content-secondary));
  font-size: 13px;
}

.resume-error {
  color: rgb(var(--content-negative));
}

.resume-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}

.resume-list > li {
  min-width: 0;
}

.resume-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 1px solid rgb(var(--border-default));
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.resume-item:hover:not(:disabled) {
  background: rgb(var(--background-secondary));
  border-color: rgb(var(--icon-cobalt));
}

.resume-item:disabled {
  opacity: 0.5;
  cursor: progress;
}

.resume-title {
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--content-primary));
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-meta {
  font-size: 12px;
  color: rgb(var(--content-tertiary));
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#settings-modal select,
#settings-modal input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--input-bg);
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

#settings-modal select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

#settings-modal select:focus,
#settings-modal input:focus {
  border-color: var(--muted);
}

.settings-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}

.settings-actions button[type="button"] {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.settings-actions button[type="button"]:hover {
  background: var(--user-bg);
}

.settings-actions button[type="submit"] {
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.settings-actions button[type="submit"]:hover:not(:disabled) {
  background: #3a4dd6;
}

.settings-actions button[type="submit"]:disabled {
  opacity: 0.35;
  cursor: default;
}

.settings-mcp-status {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
  background: var(--debug-bg, rgba(255, 255, 255, 0.04));
}

.settings-mcp-status[data-status="ok"] {
  color: var(--debug-success);
}

.settings-mcp-status[data-status="err"] {
  color: var(--debug-error);
}

.mcp-org-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.mcp-org-picker label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mcp-org-picker-status {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-strong);
}

.mcp-org-picker-status[role="alert"] {
  color: var(--debug-error);
}

/* ── Settings button (cogwheel in top overlay) ─────────────────────────── */

#settings-btn,
#resume-btn {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, opacity 0.2s, background 0.2s;
  position: relative;
  margin-left: 2px;
}

#settings-btn:hover,
#resume-btn:hover {
  color: var(--fg);
  background: var(--user-bg);
}

#settings-btn::after,
#resume-btn::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  background: rgb(var(--content-primary));
  color: rgb(var(--background-emphasis));
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 20;
}

#settings-btn::after { content: "Settings"; }
#resume-btn::after { content: "Resume a session"; }

#settings-btn:hover::after,
#resume-btn:hover::after {
  opacity: 1;
}

/* ── PR #53: plan widget, phase blocks, step markers (additive on top of Hebbia base) ── */

/* ── Step markers (section breaks) ────────────────────────────────────── */

.step-marker {
  align-self: stretch;
  padding: 0;
  margin: 16px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Don't add extra space above the very first message in the chat. */
#messages > .step-marker:first-child {
  margin-top: 4px;
}

.step-marker-index {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-weight: 500;
  margin-bottom: 2px;
}

.step-marker-title {
  font-weight: 600;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.35;
}

.step-marker-detail {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Rollup affordance — borderless link-like control so it doesn't visually
   compete with phase widgets or the monospace step header. */
.step-marker-rollup {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.15s;
}

.step-marker-rollup:hover {
  color: var(--fg);
}

.step-marker-rollup:hover > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-marker-rollup-chevron {
  transition: transform 0.2s ease;
  color: var(--muted);
}

.step-marker-rollup-expanded .step-marker-rollup-chevron {
  transform: rotate(90deg);
}

/* ── Phase blocks ─────────────────────────────────────────────────────── */

.message-phase {
  align-self: stretch;
  /* Override the .message base max-width: 90% so phases get the full width
     of the messages container, matching step-marker / assistant text. */
  max-width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-left: 0;
  padding: 0;
  font-size: 12px;
}

.message-phase > details > summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 6px 8px 6px 8px;
  color: var(--muted-strong);
  position: relative;
  isolation: isolate;
}

.message-phase > details > summary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: -8px;
  border-radius: 8px;
  z-index: -1;
  transition: background 0.15s;
}

.phase-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -8px;
}

/* Block-level removes the inline-baseline gap that pushes the icon up
   off the text's optical center. */
.phase-logo img {
  display: block;
}

.phase-logo-loader {
  display: flex;
  align-items: center;
  color: rgb(var(--content-secondary));
}

.phase-logo-loader svg {
  display: block;
  width: 16px;
  height: 16px;
}

.message-phase.phase-sealed .phase-logo img {
  transition: filter 0.3s ease, opacity 0.3s ease;
  filter: grayscale(1);
  opacity: 0.55;
}

.message-phase > details > summary:hover::before {
  background: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .message-phase > details > summary:hover::before {
    background: rgba(255, 255, 255, 0.06);
  }
}

.message-phase > details > summary::-webkit-details-marker {
  display: none;
}

.phase-chevron-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.message-phase details[open] > summary .phase-chevron-wrap {
  transform: rotate(90deg);
}

.message-phase.phase-live .phase-header-label {
  background: linear-gradient(
    90deg,
    var(--muted-strong) 0%,
    var(--muted-strong) 42%,
    var(--shimmer-dim) 50%,
    var(--muted-strong) 58%,
    var(--muted-strong) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.message-phase.phase-sealed .phase-header-label {
  color: var(--muted-strong);
}

.phase-header-label {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-tool-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.phase-tool-count-num {
  display: inline-block;
  /* Re-keyed on every increment so React unmounts/mounts the span and
     restarts the animation. */
  animation: phaseToolCountPop 0.32s ease-out;
}

@keyframes phaseToolCountPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); color: var(--accent); }
  100% { transform: scale(1); }
}

.phase-cancelled {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(180, 40, 40, 0.85);
  font-style: italic;
}

.phase-body {
  margin-top: 6px;
  margin-left: 6px;
  padding: 2px 8px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--border);
}

.phase-entry-text {
  font-size: 12px;
  color: var(--muted-strong);
  line-height: 1.55;
  font-style: italic;
}

.phase-entry-text p {
  margin: 0 0 4px 0;
}

.phase-entry-text p:last-child {
  margin-bottom: 0;
}

/* The global `* { padding: 0 }` reset wipes the UA list padding, so bullets
   render outside the box and overlap the phase's left rule. Restore enough
   padding to keep markers inside the body. */
.phase-entry-text ul,
.phase-entry-text ol {
  padding-left: 18px;
  margin: 4px 0;
}

.phase-entry-text li {
  margin-bottom: 2px;
}

.phase-entry-text li:last-child {
  margin-bottom: 0;
}

.phase-entry-text table {
  display: block;
  width: max-content;
  /* +20px consumes the .phase-body padding-right (8) + #messages padding-right
     (12) so a wide table reaches the viewport edge. */
  max-width: calc(100% + 20px);
  overflow-x: auto;
  border-collapse: collapse;
  margin: 4px 0;
  font-size: 12px;
}

.phase-entry-thinking {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  font-style: italic;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  .phase-entry-thinking {
    background: rgba(255, 255, 255, 0.04);
  }
}

.phase-entry-tool details {
  display: block;
}

.phase-entry-tool summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 3px 6px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--fg);
  border-radius: 4px;
  transition: background 0.15s;
}

.phase-entry-tool summary:hover {
  background: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .phase-entry-tool summary:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.phase-entry-tool summary::-webkit-details-marker {
  display: none;
}

.phase-entry-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  color: var(--muted);
}

.phase-entry-tool-error .phase-entry-status,
.phase-entry-tool-error .phase-entry-label {
  color: rgba(180, 40, 40, 0.85);
}

.phase-entry-pending {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  box-sizing: border-box;
  opacity: 0.7;
  animation: phaseEntryPulse 1.2s ease-in-out infinite;
}

.phase-entry-done {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

@keyframes phaseEntryPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 0.85; transform: scale(1); }
}

.phase-entry-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.phase-entry-detail,
.phase-entry-result {
  margin: 4px 0 0 22px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  font-size: 11px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  white-space: pre-wrap;
  color: var(--muted-strong);
}

.phase-entry-result {
  max-height: 140px;
  overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
  .phase-entry-detail,
  .phase-entry-result {
    background: rgba(255, 255, 255, 0.04);
  }
}

/* ── Permission panel (floats above the composer) ──────────────────────── */

.permission-panel {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgb(var(--background-secondary));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.permission-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
}

.permission-panel-hand {
  font-size: 20px;
  line-height: 1;
}

.permission-panel-body {
  padding: 16px 16px 32px;
}

.permission-panel-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.permission-panel-info {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgb(var(--background-warning));
  color: rgb(var(--content-warning));
}

.permission-panel-info-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}

.permission-panel-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: break-word;
}

.permission-panel-info-strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.permission-panel-info-detail {
  font-size: 13px;
  line-height: 1.4;
}

.permission-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.permission-panel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(var(--background-primary));
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.permission-panel-btn:hover {
  background: rgb(var(--background-tertiary));
}

.permission-panel-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.permission-panel-kbd {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgb(var(--background-secondary));
  color: rgb(var(--content-tertiary));
  font-size: 12px;
}

.permission-panel-footer {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(var(--content-tertiary));
}

/* ── Plan widget (sticky above input) ─────────────────────────────────── */

#bottom-dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  #bottom-dock {
    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.4);
  }
}

/* Plan UI v3 Hybrid — recreated from the design bundle exported via
   claude.ai/design (Plan UI v3 Hybrid.html / v3-hybrid.jsx). Tokens scoped
   to the widget so the rest of the app keeps its own palette. */
.plan-widget {
  --plan-ink: #1a1a17;
  --plan-muted: #8a8a82;
  --plan-muted-2: #b8b8b0;
  --plan-line: #e7e6df;
  --plan-line-2: #efeee7;
  --plan-accent: rgb(var(--content-cobalt));
  --plan-accent-soft: rgb(var(--background-cobalt));
  position: relative;
  background: #ffffff;
  color: var(--plan-ink);
}

/* On first appearance, the widget grows upward from the bottom dock to its
   measured natural height. The component renders with inline `height: 0`
   first, measures `scrollHeight` next frame, then sets `height` to that
   pixel value — this transition carries it the rest of the way. After
   transition end, the inline height is dropped so subsequent content
   changes (status updates, resubmits) flow naturally without retriggering
   the entrance. Scoping the transition to the .plan-widget-entering class
   keeps height changes after entrance from re-animating. */
.plan-widget-entering {
  overflow: hidden;
  transition:
    height 720ms cubic-bezier(0.16, 0.84, 0.2, 1),
    opacity 720ms ease;
}

@media (prefers-color-scheme: dark) {
  .plan-widget {
    --plan-ink: rgba(255, 255, 255, 0.88);
    --plan-muted: rgba(255, 255, 255, 0.5);
    --plan-muted-2: rgba(255, 255, 255, 0.32);
    --plan-line: rgba(255, 255, 255, 0.12);
    --plan-line-2: rgba(255, 255, 255, 0.06);
    --plan-accent: rgb(var(--content-cobalt));
    --plan-accent-soft: rgba(var(--content-cobalt), 0.10);
    background: var(--bg);
  }
}

/* Progress meter — 4px line at top, fills (completed + 0.45 of active)/total. */
.plan-progress {
  height: 4px;
  width: 100%;
  background: var(--plan-line-2);
  position: relative;
  overflow: hidden;
}

.plan-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--plan-accent);
  /* Match the JS tick rate (500 ms) with linear easing so the
     asymptotic curve computed in planProgress comes through cleanly
     instead of being doubly-eased. */
  transition: width 500ms linear;
}

/* ───── Animated open/close wrapper ─────────────────────────────────── */
/* Both the collapsed and expanded views are always rendered; toggling the
   `plan-anim-open` class drives a smooth height transition via the
   grid 0fr/1fr trick (modern browsers interpolate between fr units). */
.plan-anim-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.plan-anim-wrap.plan-anim-open {
  grid-template-rows: 1fr;
}

.plan-anim-inner {
  overflow: hidden;
  min-height: 0;
}

/* ───── Collapsed row ───────────────────────────────────────────────── */

.plan-collapsed-row {
  width: 100%;
  /* Horizontal padding matches the input form's outer padding (6px) plus
     the input box's own padding-right (~14px) so the chevron's right edge
     lines up roughly with the send-button's right edge. */
  padding: 12px 18px 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.plan-collapsed-row:disabled {
  cursor: default;
}

/* The collapsed row's clickable surface — splits into a wide toggle on the
   left (chevron / dismiss area lives at the right). Both buttons inherit
   the row's padding-free transparent style so the visible layout matches
   the old single-button row. */
.plan-collapsed-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  padding: 0;
  min-width: 0;
}

.plan-collapsed-chevron,
.plan-collapsed-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--plan-ink);
  flex-shrink: 0;
}

.plan-collapsed-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-collapsed-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--plan-ink);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───── Expanded body ───────────────────────────────────────────────── */

.plan-expanded {
  /* No horizontal padding — the row's own margin handles edge alignment so
     the active step's green box lines up with the input box's edges. */
  padding: 0 0 8px;
}

.plan-expanded-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  /* Padding-right matches the collapsed row so the chevron sits in the
     same horizontal position whether the widget is collapsed or expanded.
     Bottom padding gives the steps room to breathe below this header. */
  padding: 8px 18px 6px 0;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.plan-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.plan-row-item {
  list-style: none;
}

.plan-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  /* 6px matches the input-form's outer padding so the active row's green
     overlay aligns horizontally with the input box's edges. */
  margin: 0 6px;
  border-radius: 8px;
  background: transparent;
  /* Smooth the active-state fade for subsequent step transitions (the
     first appearance is handled by the widget's entrance animation). */
  transition: background 220ms ease;
}

.plan-row-active {
  background: var(--plan-accent-soft);
}

.plan-row-bullet {
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-row-body {
  min-width: 0;
}

.plan-row-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--plan-ink);
  line-height: 1.3;
}

.plan-row-title-done {
  color: var(--plan-muted);
}

/* ───── Chevron ─────────────────────────────────────────────────────── */

.plan-chevron {
  color: var(--plan-muted);
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 200ms;
}

.plan-chevron-flipped {
  transform: rotate(180deg);
}

/* ───── Spinner (collapsed bullet, active step) ─────────────────────── */

.plan-spinner {
  flex-shrink: 0;
  animation: planV3Spin 1.4s linear infinite;
}

/* ───── Active dot pulse (expanded bullet, active step) ─────────────── */

.plan-active-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
}

.plan-active-dot-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--plan-accent);
}

.plan-active-dot-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--plan-accent);
  opacity: 0.25;
  animation: planV3Pulse 1.6s ease-out infinite;
}

/* ───── Pending ring (expanded bullet, pending step) ────────────────── */

.plan-pending-ring {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--plan-muted-2);
  display: block;
}

.plan-done-check {
  display: block;
}

/* ───── Activity sub-line ───────────────────────────────────────────── */

.plan-activity-line {
  margin-top: 4px;
  font-size: 12px;
  color: var(--plan-accent);
  display: flex;
  align-items: center;
  min-width: 0;
}

.plan-activity-text {
  animation: planV3Fade 400ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ───── Animations ──────────────────────────────────────────────────── */

@keyframes planV3Spin {
  to { transform: rotate(360deg); }
}

@keyframes planV3Pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes planV3Fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* Input area */

#input-form {
  padding: 6px 6px;
  background: var(--bg);
  flex-shrink: 0;
}

/* When the plan widget sits directly above the input, drop the form's own
   top padding (the widget's bottom padding already provides the gap) and
   neutralise the Hebbia `margin-top: -24px` / `z-index: 2` overlap that the
   base #input-form rule uses to float the prompt box over the welcome /
   message content — otherwise the input is pulled up over the plan rows
   and visually clips them. */
.plan-widget + #input-form {
  padding-top: 0;
  margin-top: 0;
  z-index: auto;
}

/* ── Generic confirm dialog ─────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-panel {
  background: rgb(var(--background-emphasis));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  color: var(--fg);
}

/* Edit-approval mode toggle (composer button + popover) */

#edit-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--content-primary));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

#edit-mode-btn:hover {
  background: rgba(var(--overlay-base), 0.05);
}

#edit-mode-btn[aria-expanded="true"] {
  background: rgba(var(--overlay-base), 0.08);
}

#edit-mode-btn .material-symbols-outlined {
  font-size: 18px;
}

.edit-mode-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  background: rgb(var(--background-emphasis));
  border: 1px solid rgb(var(--border-default));
  border-radius: 16px;
  box-shadow: var(--menu-shadow);
  padding: 8px;
  z-index: 20;
  animation: fadeIn 0.15s ease-out;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.edit-mode-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--content-primary));
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.edit-mode-option:hover {
  background: rgba(var(--overlay-base), 0.04);
}

.edit-mode-option-icon {
  font-size: 20px;
  color: rgb(var(--content-primary));
  flex-shrink: 0;
}

.edit-mode-option-label {
  flex: 1 1 0;
  min-width: 0;
}

.edit-mode-option-check {
  font-size: 18px;
  color: #16a34a;
  font-weight: 600;
  flex-shrink: 0;
}