:root {
  color-scheme: dark;
  --log-pad: 0.75rem;    /* chat log inset; sticky tool labels offset by this */
  --bg: #0d0d0d;
  --panel: #141414;
  --panel-2: #121212;
  --border: #242424;
  --text: #e0dccf;
  --muted: #807a70;
  --accent: #d97757;     /* anthropic orange */
  --user: #b8b09c;       /* warm taupe */
  --tool: #c89b6d;       /* burnt sienna */
  --thinking: #6e6a60;   /* warm grey */
  --success: #a8c08a;
  --warning: #d4a960;
  --error: #c66a5a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body,
button,
textarea,
input,
code,
pre {
  font-family: ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.5;
}

body {
  background: var(--bg);
  color: var(--text);
}

button,
textarea,
input {
  font: inherit;
}

button {
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--panel);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

textarea,
input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  outline: none;
}

textarea:focus,
input:focus {
  border-color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ── App shell ──────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: var(--app-height, 100vh);
}

.main {
  display: grid;
  grid-template-rows: 1fr auto;
  height: var(--app-height, 100vh);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ── Status bar ─────────────────────────────────── */

.statusbar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
}

.statusbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.status-cwd {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.status-error {
  color: var(--error);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.status-error::before {
  content: "⚠ ";
}

.status-error:empty {
  display: none;
}

.status-left,
.status-right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pct.warn { color: var(--warning); }
.status-pct.danger { color: var(--error); }
.status-mode { color: var(--muted); }
.status-name { color: var(--user); }
.status-model { color: var(--accent); }
.status-thinking { color: var(--tool); }

/* ── Composer ───────────────────────────────────── */

.composer-wrapper {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem 0;
}

.attachment-chip {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.attachment-chip img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  line-height: 14px;
  cursor: pointer;
}

.message-image {
  max-width: 100%;
  max-height: 360px;
  border-radius: 4px;
  margin: 0.25rem 0;
}

body.drag-active .composer-wrapper {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

.composer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  position: relative;
}

/* Anchored to the top-left of the composer so it never shifts when the
   textarea grows. Using absolute positioning decouples it from grid row
   sizing changes that happen on resize. */
.composer::before {
  content: ">";
  color: var(--accent);
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  line-height: 36px;
  height: 36px;
  pointer-events: none;
}

.composer.bash-mode::before {
  content: "!";
  color: var(--warning);
}

.composer.bash-mode textarea {
  color: var(--warning);
}

.composer textarea {
  height: 36px;
  min-height: 36px;
  max-height: 240px;
  padding: 0.5rem 0.6rem;
  resize: none;
  overflow-y: auto;
  border: none;
  background: transparent;
}

.composer textarea:focus {
  border: none;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--muted);
}

.icon-button:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

.icon-button .icon-stop {
  display: none;
}

.icon-button.is-running .icon-send {
  display: none;
}

.icon-button.is-running .icon-stop {
  display: inline-block;
}

.icon-button.is-running {
  color: var(--error);
  border-color: var(--error);
}

/* ── Slash command menu ─────────────────────────── */

.slash-menu {
  margin: 0 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel);
  max-height: 280px;
  overflow-y: auto;
}

.slash-menu[hidden] {
  display: none;
}

.slash-item {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.slash-item.active {
  background: var(--accent);
  color: var(--bg);
}

.slash-item.active .desc {
  color: var(--bg);
}

.slash-item:hover:not(.active) {
  background: var(--panel-2);
}

.slash-item .name {
  color: inherit;
}

.slash-item.unsupported .name {
  color: var(--muted);
  text-decoration: line-through;
}

.slash-item.unsupported.active,
.slash-item.unsupported:hover {
  background: var(--panel-2);
  color: var(--muted);
}

.slash-item .desc {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Log / messages ─────────────────────────────── */

.log {
  padding: var(--log-pad);
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.message {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  background: transparent;
}

.message h3 {
  margin: 0 0 0.25rem;
  font-size: 13px;
  font-weight: normal;
  color: var(--muted);
}

.message h3::before {
  content: "▌ ";
  color: var(--accent);
}

.message.user h3::before {
  color: var(--user);
}

/* queued follow-ups: dimmed with a dashed gutter so they read as "not sent
   yet, runs after the current turn". */
.message.queued {
  opacity: 0.55;
}

.message.queued > .message-body {
  border-left-style: dashed;
}

.message.tool h3::before,
.message.system h3::before,
.message.custom h3::before {
  color: var(--tool);
}

.message.error h3 {
  color: var(--error);
}

.message.error h3::before {
  color: var(--error);
}

.message-body {
  word-break: break-word;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}

.message.assistant > .message-body {
  color: #ece4d8;
}

.message-body > p:first-child {
  margin-top: 0;
}

.message-body > p:last-child {
  margin-bottom: 0;
}

.message-body p {
  margin: 0.4rem 0;
}

.message-body ul,
.message-body ol {
  margin: 0.4rem 0;
  padding-left: 1.5rem;
}

.message-body li {
  margin: 0.15rem 0;
}

.message-body h1,
.message-body h2,
.message-body h3,
.message-body h4,
.message-body h5,
.message-body h6 {
  margin: 0.6rem 0 0.3rem;
  font-weight: bold;
  color: var(--accent);
}

.message-body blockquote {
  margin: 0.4rem 0;
  padding: 0 0.75rem;
  border-left: 1px solid var(--border);
  color: var(--muted);
}

.message-body a {
  color: var(--accent);
}

.message-body table {
  border-collapse: collapse;
  margin: 0.5rem 0;
}

.message-body th,
.message-body td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
}

.message-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.6rem 0;
}

/* ── Thinking indicator (server processing) ────── */

.thinking-indicator {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  vertical-align: middle;
  padding: 0.25rem 0;
}

.thinking-indicator .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: thinking-pulse 1.2s infinite ease-in-out;
}

.thinking-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

/* ── Thinking block ───────────────────────────── */

.thinking-block {
  border-left: 1px solid var(--thinking);
  padding: 0 0.75rem;
  margin: 0.5rem 0;
  color: #6e6a60;
  font-style: italic;
  font-size: 12px;
  opacity: 0.85;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Tool call block (collapsed by default) ────── */

.tool-block {
  border-left: 1px solid var(--accent);
  padding: 0 0.75rem;
  margin: 0.5rem 0;
  word-break: break-word;
}

.tool-block > .tool-label,
.tool-result-block > .tool-result-label {
  cursor: pointer;
  display: block;
  margin-bottom: 0.15rem;
  list-style: none;
  user-select: none;
}

.tool-block > .tool-label::-webkit-details-marker,
.tool-result-block > .tool-result-label::-webkit-details-marker {
  display: none;
}

.tool-block > .tool-label {
  color: var(--accent);
}

.tool-block > .tool-label::before {
  content: "▸ $ ";
}

.tool-block[open] > .tool-label::before {
  content: "▾ $ ";
}

/* ── Tool result block ────────────────────────── */

.tool-result-block {
  border-left: 1px solid var(--tool);
  padding: 0 0.75rem;
  margin: 0.5rem 0;
  word-break: break-word;
  color: var(--text);
}

.tool-result-block > .tool-result-label {
  color: var(--tool);
}

.tool-result-block > .tool-result-label::before {
  content: "▸ ← ";
}

.tool-result-block[open] > .tool-result-label::before {
  content: "▾ ← ";
}

/* Sticky label for open cards: the collapse toggle pins to the top of the chat
   frame while the (potentially tall) body scrolls under it, so it's one click
   away from anywhere in the output instead of only from the top. Scoped to
   [open] since a collapsed card has nothing to scroll past. The opaque
   background masks content sliding beneath; the hairline reads as a divider. */
.tool-block[open] > .tool-label,
.tool-result-block[open] > .tool-result-label {
  position: sticky;
  /* pin flush to the top of the chat frame. the log's own top padding would
     otherwise leave a sliver above the bar where scrolling output peeks
     through, so offset the stick point up by exactly that padding. */
  top: calc(-1 * var(--log-pad));
  z-index: 2;
  background: var(--bg);
  padding: 0.15rem 0;
  margin-bottom: 0;
  box-shadow: 0 1px 0 var(--border);
}

/* butt the body up against the label so the divider reads as the body's top
   edge rather than a line floating above a gap. */
.tool-block[open] > pre,
.tool-result-block[open] > pre {
  margin-top: 0;
}

/* ── Tool result toggles (diff / text) ────────── */

.tool-result-toggles {
  display: flex;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0.8rem 0;
}

.tool-result-toggles .toggle-btn {
  font: inherit;
  font-size: 0.8em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  text-transform: lowercase;
  line-height: 1.4;
}

.tool-result-toggles .toggle-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.tool-result-toggles .toggle-btn:hover:not(.active) {
  color: var(--text);
  border-color: var(--tool);
}

/* Diff content styling */
.diff-content {
  white-space: pre-wrap;
  word-break: normal;
}

.diff-content .diff-line {
  display: block;
}

.diff-content .diff-add {
  color: var(--success);
  background: rgba(168, 192, 138, 0.22);
}

.diff-content .diff-del {
  color: var(--error);
  background: rgba(198, 106, 90, 0.22);
}

/* ── Code blocks ──────────────────────────────── */

.message-body pre {
  margin: 0.5rem 0;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.message-body pre .copy-btn {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.1rem 0.4rem;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  z-index: 1;
}

.message-body pre:hover .copy-btn,
.message-body pre .copy-btn:focus-visible {
  opacity: 1;
}

.message-body pre .copy-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.message-body pre code {
  display: block;
  padding: 0.6rem 0.8rem;
  background: var(--panel) !important;
  overflow-x: auto;
}

.message-body pre .code-header {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  color: var(--muted);
}

.message-body pre .code-header::before {
  content: "── ";
}

.message-body code:not(pre code) {
  background: var(--panel);
  padding: 0 0.3em;
  border: 1px solid var(--border);
}

/* ── Modal picker ───────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
  z-index: 60;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  background: var(--bg);
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.modal-header::before {
  content: "▶";
}

.modal-search {
  flex: 1;
  border: none;
  padding: 0.2rem 0.3rem;
  background: transparent;
}

.modal-search:focus {
  border: none;
}

.modal-title {
  flex: 1;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.modal:not(.text-mode):not(.prompt-mode):not(.confirm-mode) .modal-title {
  display: none;
}

.modal.text-mode .modal-search,
.modal.prompt-mode .modal-search,
.modal.confirm-mode .modal-search {
  display: none;
}

.modal-confirm-message {
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.modal-confirm-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0 0.75rem 0.75rem;
}

.modal-confirm-buttons button {
  padding: 0.4rem 0.9rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
}

.modal-confirm-buttons button:focus,
.modal-confirm-buttons button:hover {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
}

.modal-confirm-yes:focus {
  background: var(--accent);
  color: var(--bg);
}

.ext-custom-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  outline: none;
}

.ext-custom-backdrop[hidden] {
  display: none;
}

.ext-custom-surface {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.75rem;
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ext-custom-output {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.3;
  white-space: pre;
  color: var(--text);
}

.modal-prompt-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  font: inherit;
  outline: none;
}

.modal-prompt-input:focus {
  border-bottom-color: var(--accent);
}

.modal-body {
  overflow-y: auto;
  padding: 0;
}

.modal-empty {
  padding: 0.6rem;
  color: var(--muted);
}

.session-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.session-row > :nth-child(1):not(.modal-check),
.session-row > .modal-check + * {
  flex: 1 1 auto;
  min-width: 0;
}

.session-row:last-child {
  border-bottom: none;
}

.session-row.active {
  background: var(--accent);
  color: var(--bg);
}

.session-row.active .session-meta,
.session-row.active .session-cwd {
  color: var(--bg);
}

.session-row:hover:not(.active) {
  background: var(--panel-2);
}

.session-row.current .session-title::before {
  content: "* ";
  color: var(--tool);
}

.modal-check {
  color: var(--accent);
  font-family: ui-monospace, monospace;
  align-self: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.session-row.active .modal-check {
  color: var(--bg);
}

.session-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-cwd {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-meta {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ── Toast ──────────────────────────────────────── */

.toast-layer {
  position: fixed;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  z-index: 20;
}

.toast {
  min-width: 240px;
  max-width: 400px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--panel);
}

.toast.info {
  border-left-color: var(--accent);
}

.toast.warning {
  border-left-color: var(--warning);
}

.toast.error {
  border-left-color: var(--error);
}

/* ── Sidebar ─────────────────────────────────────── */

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-title {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.sidebar-new-btn {
  border: 1px solid var(--border) !important;
  background: var(--panel-2) !important;
  color: var(--accent) !important;
  font-size: 14px;
  padding: 0.15rem 0.5rem !important;
  cursor: pointer;
  line-height: 1;
}

.sidebar-new-btn:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sidebar-group-title {
  padding: 0.5rem 0.75rem 0.2rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  opacity: 0.7;
}

.sidebar-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.75rem;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.sidebar-item:hover {
  background: var(--bg);
}

.sidebar-item.active,
.sidebar-item.active:hover {
  background: var(--bg);
  border-left-color: var(--accent);
}

.sidebar-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.1rem;
}

.sidebar-item-meta {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
}

.sidebar-empty {
  padding: 0.75rem;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* ── Sidebar toggle (mobile) ────────────────────── */

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle:hover {
  background: var(--bg);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}

/* ── Mobile (< 768px) ───────────────────────────── */

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-overlay.open {
    display: block;
  }
}