/* ==========================================================================
   Chat — Session Bar, Tool Blocks, Streaming, Markdown, Attachments
   All values from tokens.css — zero hardcoded colors, spacing, or fonts.
   Base .message, .chat-area, .input-area etc. live in style.css.
   ========================================================================== */


/* ==========================================================================
   1. Session Bar
   ========================================================================== */

.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-0-5) var(--space-4);
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--space-px) solid var(--border-light);
  font-size: var(--text-xs);
  color: var(--text-muted);
  gap: var(--space-2);
}

.session-bar-left,
.session-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.session-model {
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--duration-normal) var(--ease-default);
}

/* Model-specific colors */
.session-model { background: var(--accent-subtle); color: var(--accent); }
.session-model.model-opus { background: var(--model-opus-subtle); color: var(--model-opus); }
.session-model.model-sonnet { background: var(--accent-subtle); color: var(--accent); }
.session-model.model-haiku { background: var(--model-haiku-subtle); color: var(--model-haiku); }

.session-status {
  font-size: var(--text-xs);
}

.context-bar {
  width: 80px;
  height: var(--space-1-5);
  background: var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.context-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transition: width var(--duration-slow) var(--ease-default);
}

.context-bar-fill.warning { background: var(--warning); }
.context-bar-fill.danger  {
  background: var(--danger);
  animation: contextPulse 1.6s ease-in-out infinite;
}

@keyframes contextPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .context-bar-fill.danger { animation: none; }
}

/* Banner shown above the composer when prompt size crosses 90% of the
   model's context window. Dismissible per-conversation; cleared on
   channel switch. Uses the same warning palette as the meter. */
.context-warning-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--warning-subtle);
  border: var(--space-px) solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--warning);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.context-warning-text { flex: 1; }

.context-warning-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
  opacity: 0.7;
}

.context-warning-dismiss:hover { opacity: 1; }

/* Recovery card shown when the SDK actually trips a "prompt is too long"
   error. The snapshot has already been written server-side; this just
   tells the user what to do next. */
.context-overflow-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--danger-subtle);
  border: var(--space-px) solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.context-overflow-title {
  color: var(--danger);
  font-weight: 600;
  font-size: var(--text-base);
}

.context-overflow-body code {
  padding: 0 var(--space-1);
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.context-overflow-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.context-overflow-fresh,
.context-overflow-dismiss {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  border: var(--space-px) solid var(--border-light);
  background: transparent;
  color: var(--text);
}

.context-overflow-fresh {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.context-overflow-fresh:hover { background: var(--accent-hover); }
.context-overflow-dismiss:hover { background: rgba(255, 255, 255, 0.06); }

.context-label {
  font-size: var(--text-sm);
  min-width: 28px;
}

.badge-btn {
  padding: var(--space-px) var(--space-2);
  background: transparent;
  border: var(--space-px) solid var(--accent-glow);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}

.badge-btn:hover {
  background: var(--accent-subtle);
}

/* Effort toggle button — cycles through levels on tap */
.effort-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: var(--space-px) solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.effort-toggle:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}

.effort-toggle:active {
  transform: scale(0.95);
}

.effort-icon {
  font-size: var(--text-xs);
  line-height: 1;
}

.effort-label {
  line-height: 1;
}

/* Effort level colors */
.effort-toggle[data-level=""] { color: var(--text-muted); }
.effort-toggle[data-level="low"] { color: var(--success); border-color: var(--success-subtle); }
.effort-toggle[data-level="medium"] { color: var(--info); border-color: var(--info-subtle); }
.effort-toggle[data-level="high"] { color: var(--warning); border-color: var(--warning-subtle); }
.effort-toggle[data-level="max"] { color: var(--model-opus); border-color: var(--model-opus-border); background: var(--model-opus-bg); }
.effort-toggle[data-level="xhigh"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}


/* ==========================================================================
   2. Timeline — Claude Code VS Code style
   ========================================================================== */

.tl-timeline {
  position: relative;
  padding-left: var(--space-5);
}

/* No global vertical line — each item draws its own connector */

.tl-item {
  position: relative;
  padding-bottom: var(--space-2);
}

.tl-item:last-child {
  padding-bottom: 0;
}

/* Hairline connector from this dot down to the next item's dot */
.tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-5) + 7px);
  top: 16px;
  bottom: calc(-1 * var(--space-2) + 6px);
  width: 1px;
  background: var(--border);
}

/* Dot on the timeline — small, flat, muted by default */
.tl-dot {
  position: absolute;
  left: calc(-1 * var(--space-5) + 5px);
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  border: none;
  z-index: 1;
}

.tl-dot.running {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}

.tl-dot.done {
  background: var(--success);
}

/* Text items — keep the dot muted like Claude Code; no accent fill */
.tl-text .tl-dot {
  background: var(--text-muted);
}

.tl-text .tl-content {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

/* Tool items — flat, no box; relies on the timeline dot for visual grouping. */
.tl-tool .tl-content {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.tl-tool-header {
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tl-tool-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  font-family: var(--font-body);
}

.tl-tool-detail {
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-style: normal;
  opacity: 0.8;
}

.tl-tool-in,
.tl-tool-out {
  border: none;
  padding: var(--space-1) 0 0;
  margin-top: var(--space-1);
}

.tl-tool-in { border-left: 2px solid var(--border); padding-left: var(--space-2); }
.tl-tool-out { border-left: 2px solid var(--border); padding-left: var(--space-2); }

.tl-io-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: var(--space-2);
  opacity: 0.6;
}

.tl-tool-in .tl-io-label,
.tl-tool-out .tl-io-label { color: var(--text-muted); }

.tl-tool-code {
  margin: 0;
  padding: 2px 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-secondary);
  background: none;
  border: none;
}


/* Timeline mobile */
@media (max-width: 768px) {
  .tl-timeline { padding-left: var(--space-4); }
  .tl-item:not(:last-child)::before { left: calc(-1 * var(--space-4) + 5px); }
  .tl-dot { left: calc(-1 * var(--space-4) + 3px); width: 6px; height: 6px; top: 7px; }
  .tl-tool-header { padding: var(--space-1) var(--space-2); }
  .tl-tool-name { font-size: var(--text-xs); }
  .tl-tool-detail { font-size: var(--text-sm); max-width: 150px; }
  .tl-tool-in, .tl-tool-out { padding: var(--space-1) var(--space-2); }
  .tl-tool-code { font-size: var(--text-xs); max-height: 120px; }
}


/* ==========================================================================
   2b. Legacy Tool Blocks (kept for non-timeline contexts)
   ========================================================================== */

.tool-block {
  background: var(--bg-surface);
  border: var(--space-px) solid var(--border-light);
  border-radius: var(--radius-lg);
  margin: var(--space-2) var(--space-0);
  overflow: hidden;
}

.tool-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  user-select: none;
  position: relative;
}

.tool-block-header::-webkit-details-marker { display: none; }
.tool-block-header::before { content: none; }

.tool-indicator {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}

.tool-indicator.running {
  background: var(--warning);
  animation: breathe 2s ease-in-out infinite;
}

.tool-indicator.done,
.tool-indicator.success {
  background: var(--success);
}

.tool-indicator.error {
  background: var(--danger);
}

/* Vertical connecting line between consecutive tool blocks */
.tool-block + .tool-block {
  margin-top: var(--space-0);
}

.tool-block + .tool-block .tool-block-header::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(-1 * var(--space-2));
  width: var(--space-px);
  height: var(--space-2);
  background: var(--border-light);
}

.tool-name {
  font-weight: 600;
  color: var(--accent);
}

.tool-detail {
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.tool-block-body {
  border-top: var(--space-px) solid var(--border);
}

.tool-block-code {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.tool-block-output {
  border-top: var(--space-px) solid var(--border);
}

.tool-output-label {
  padding: var(--space-1) var(--space-3) var(--space-0);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* ==========================================================================
   3. Markdown Rendering (inside .message-text)
   ========================================================================== */

.message-text blockquote {
  border-left: 3px solid var(--accent);
  margin: var(--space-2) var(--space-0);
  padding: var(--space-1-5) var(--space-4);
  background: var(--accent-subtle);
  color: var(--text-secondary);
  font-style: italic;
}

.message-text h1,
.message-text h2,
.message-text h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1-5);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.message-text h1 { font-size: 1.35em; }
.message-text h2 { font-size: 1.2em; }
.message-text h3 { font-size: 1.05em; }

.message-text ul,
.message-text ol {
  padding-left: var(--space-6);
  margin: var(--space-2) 0;
  margin-left: var(--space-4);
}

/* Timeline and message lists: tight, muted markers so nothing fights with
   the timeline dots on the left gutter. */
.message-text ul,
.message-text ol,
.tl-content ul,
.tl-content ol {
  padding-left: var(--space-5);
  margin: var(--space-1) 0;
}

.message-text ul,
.tl-content ul {
  list-style: none;
}

.message-text ul li,
.tl-content ul li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: 2px;
}

.message-text ul li::before,
.tl-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  opacity: 0.7;
}

.message-text ol,
.tl-content ol {
  list-style: decimal;
}

.message-text ol li,
.tl-content ol li {
  margin-bottom: 2px;
  padding-left: var(--space-1);
}

.message-text li::marker,
.tl-content li::marker {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}

/* Nested lists */
.message-text ul ul,
.tl-content ul ul {
  margin: var(--space-1) 0;
}

.message-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.message-text a:hover {
  text-decoration: underline;
}

.message-text table {
  border-collapse: collapse;
  margin: var(--space-3) var(--space-0);
  font-size: var(--text-base);
  width: 100%;
}

.message-text th,
.message-text td {
  border: var(--space-px) solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.message-text th {
  background: var(--bg-elevated);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.message-text td {
  color: var(--text);
}


/* ==========================================================================
   4. Code Block Header
   ========================================================================== */

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--overlay-light);
  border: var(--space-px) solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.code-header + pre {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: 0;
  border-top: none;
}

.copy-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  transition: all var(--duration-normal) var(--ease-default);
}

.copy-btn:hover {
  background: var(--border-light);
  color: var(--text);
}


/* ==========================================================================
   5. Streaming
   ========================================================================== */

.streaming-cursor::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: var(--space-0-5);
  animation: blink 0.8s infinite;
  vertical-align: text-bottom;
  border-radius: var(--space-px);
}

/* ==========================================================================
   Todo list rendering (from TodoWrite tool calls)
   ========================================================================== */

.tl-todos {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tl-todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.tl-todo-item.done {
  color: var(--text-muted);
  text-decoration: line-through;
}

.tl-todo-item.active {
  color: var(--text);
}

.tl-todo-item i {
  flex-shrink: 0;
  font-size: var(--text-base);
}

.tl-todo-done {
  color: var(--success);
}

.tl-todo-active {
  color: var(--accent);
  animation: spin 1.5s linear infinite;
}

.tl-todo-pending {
  color: var(--text-muted);
}

/* Typing indicator from other devices */
.typing-indicator {
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  max-width: var(--message-max-width);
  margin: 0 auto;
  animation: fadeIn var(--duration-normal) var(--ease-default);
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  animation: streamPulse 1.2s infinite;
}

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

.typing-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.streaming-dots {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: var(--space-1);
  vertical-align: middle;
}

.streaming-dots span {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: var(--radius-full);
  animation: streamPulse 1.4s infinite ease-in-out;
}

.streaming-dots span:nth-child(2) { animation-delay: 0.2s; }
.streaming-dots span:nth-child(3) { animation-delay: 0.4s; }


/* ==========================================================================
   6. Thinking / Tool Call / Tool Response / Generic Blocks (collapsible)
   ========================================================================== */

/* --- Shared block styles --- */

.block-thinking,
.block-tool-response,
.block-generic {
  margin: var(--space-2) var(--space-0);
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: none;
  overflow: visible;
  padding-left: var(--space-3);
}

.block-thinking summary,
.block-tool-response summary,
.block-generic summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
  transition: color var(--duration-normal) var(--ease-default);
}

.block-thinking summary::-webkit-details-marker,
.block-tool-response summary::-webkit-details-marker,
.block-generic summary::-webkit-details-marker { display: none; }

.block-thinking summary::before,
.block-tool-response summary::before,
.block-generic summary::before {
  content: '\25B8';
  font-size: var(--text-sm);
  transition: transform var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}

.block-thinking[open] summary::before,
.block-tool-response[open] summary::before,
.block-generic[open] summary::before {
  transform: rotate(90deg);
}

.block-thinking summary:hover,
.block-tool-response summary:hover,
.block-generic summary:hover {
  color: var(--text);
}

.block-preview {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
  margin-left: var(--space-1-5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
  opacity: 0.7;
}

details[open] .block-preview { display: none; }

.block-body {
  padding: var(--space-1) 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  border-top: none;
  max-height: 400px;
  overflow-y: auto;
}

/* --- Thinking block: italic muted text, subtle left rule --- */

.block-thinking {
  border-left-color: var(--border);
  background: none;
}

.block-thinking summary {
  color: var(--text-muted);
  font-weight: 500;
}

.block-thinking summary svg {
  color: var(--text-muted);
  opacity: 0.6;
}

.block-thinking .block-body {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}

/* --- Tool call block: flat, left rule --- */

.block-tool-call {
  margin: var(--space-2) var(--space-0);
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: none;
  overflow: visible;
  padding-left: var(--space-3);
}

.block-tool-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-sm);
  color: var(--text);
}

.block-tool-header svg {
  color: var(--text-muted);
  opacity: 0.7;
  flex-shrink: 0;
}

.block-tool-name {
  font-weight: 600;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
}

.block-detail {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 350px;
  opacity: 0.7;
}

.block-code {
  margin: 2px 0 0;
  padding: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  font-family: var(--font-mono);
  background: none;
  border: none;
  color: var(--text-secondary);
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

/* --- Tool response block: flat muted --- */

.block-tool-response {
  border-left-color: var(--border);
  background: none;
}

.block-tool-response summary {
  color: var(--text-muted);
}

.block-tool-response summary svg {
  color: var(--text-muted);
  opacity: 0.6;
}

.block-tool-response .block-body {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Inline (short) tool response — same flat treatment */
.block-tool-response--inline {
  margin: var(--space-2) var(--space-0);
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: none;
  overflow: visible;
  padding-left: var(--space-3);
}

.block-tool-response-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.block-tool-response-header svg {
  color: var(--text-muted);
  opacity: 0.6;
}

.block-tool-response--inline .block-body {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-top: none;
}

/* --- Generic block --- */

.block-generic {
  border-left-color: var(--border);
}

.block-generic summary svg {
  color: var(--text-muted);
}

/* --- Block streaming indicator --- */

.block-streaming-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-2) var(--space-0);
  border: var(--space-px) solid var(--thinking-border);
  border-radius: var(--radius-md);
  background: var(--thinking-subtle);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--thinking);
}

.block-streaming-indicator .streaming-dots span {
  background: var(--thinking);
  opacity: 0.7;
}


/* ==========================================================================
   7. Command Palette
   ========================================================================== */

/* ----------------------------------------------------------------------
   Command palette — grouped sections, right-aligned hints.
   Mirrors the Claude Code VS Code extension's slash menu so the surface
   reads as "categorized list of actions" instead of a flat dropdown.
---------------------------------------------------------------------- */
.command-palette {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--input-max-width);
  margin-bottom: var(--space-2);
  background: var(--bg-elevated);
  border: var(--space-px) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--z-overlay);
  animation: paletteIn var(--duration-normal) var(--ease-default);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .command-palette {
    background: var(--bg-glass-strong);
    -webkit-backdrop-filter: var(--blur-md);
    backdrop-filter: var(--blur-md);
  }
}

.command-palette-list {
  padding: var(--space-1) 0 var(--space-1);
}

/* Section title — small uppercase label between groups */
.cmd-palette-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.cmd-palette-section-title:not(:first-child) {
  border-top: var(--space-px) solid var(--border-light);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
}

/* Individual command row — name + description on the left, hint on right */
.cmd-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  border-radius: 0;  /* full-bleed rows like the VS Code menu */
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
  background: var(--bg-surface-hover);
}

.cmd-palette-row-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.cmd-palette-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.cmd-palette-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-palette-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  margin-left: var(--space-2);
  flex-shrink: 0;
}

/* Mobile: tighten spacing so the menu fits on phones */
@media (max-width: 480px) {
  .command-palette { max-height: 50vh; }
  .cmd-palette-item { padding: var(--space-2) var(--space-3); }
  .cmd-palette-desc { display: none; }  /* description truncates poorly on narrow */
}


/* ==========================================================================
   8. File Attachments
   ========================================================================== */

/* Preview bar above input showing pending files */
.chat-attachments-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: var(--space-px) solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  max-height: 120px;
  overflow-y: auto;
}

/* Individual file chip / thumbnail */
.chat-attachment-thumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border: var(--space-px) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 180px;
}

.chat-attachment-thumb img {
  width: var(--space-10);
  height: var(--space-10);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.chat-attachment-thumb .att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

/* X button to remove a pending file.
   Visual is a compact 20px dot (scale not shrunk so it doesn't dominate the
   thumbnail), but the element itself is 32px with padding so it passes the
   touch-target guideline. On pointer devices we keep the tiny-visual vibe
   via ::before. */
.chat-attachment-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.chat-attachment-remove::before {
  content: "×";
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-attachment-remove:focus-visible {
  outline: none;
}
.chat-attachment-remove:focus-visible::before {
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.chat-attachment-thumb:hover .chat-attachment-remove,
.chat-attachment-remove:focus-visible {
  opacity: 1;
}

/* Image gallery inside message bubbles */
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.message-images img {
  max-width: 260px;
  max-height: 200px;
  border-radius: var(--radius-md);
  border: var(--space-px) solid var(--border);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-default);
  object-fit: cover;
}

.message-images img:hover {
  transform: scale(1.03);
}

/* Non-image attachment chips inside messages */
.message-file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-surface);
  border: var(--space-px) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1-5);
}

.message-file-chip svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Make file chips look clickable */
.message-file-chip {
  text-decoration: none;
  cursor: pointer;
}

.message-file-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-hover);
}

/* Lightbox overlay for image preview */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  /* Reserve safe-area so the close button and content don't sit beneath
     the iOS home indicator / notch. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: var(--overlay-opaque);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fadeIn var(--duration-normal) var(--ease-default);
  /* Allow pinch-zoom on the attachment viewer. The viewport meta keeps
     pinch disabled everywhere else; the openLightbox() JS helper relaxes
     it while the overlay is open and restores it on close. */
  touch-action: pinch-zoom;
}
.lightbox-overlay .lightbox-img,
.lightbox-overlay .lightbox-frame,
.lightbox-overlay .lightbox-sheet {
  touch-action: pinch-zoom;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  /* Tokenized — was rgba(255,255,255,0.1/0.2) hardcoded. */
  background: var(--bg-surface);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-default);
}

.lightbox-close:hover {
  background: var(--bg-surface-hover);
}

.lightbox-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* PDF viewer in lightbox.
   Tokenized — was hardcoded #fff. PDFs still render over the iframe's own
   bg so setting a token-friendly frame ensures the chrome matches dark mode. */
.lightbox-frame {
  width: 90vw;
  height: 90vh;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

/* Spreadsheet / text preview in lightbox */
.lightbox-sheet {
  width: 90vw;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--text);
}

.lightbox-sheet .md-table {
  font-size: var(--text-sm);
}

/* Previewable file chips */
.message-file-previewable {
  cursor: pointer;
}

.message-file-previewable:hover {
  background: var(--bg-surface-hover);
  border-color: var(--accent);
}

/* Drag-drop overlay on chat area */
.chat-area.drag-over::after {
  content: 'Drop files here';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-dense);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-xl);
  font-weight: 600;
  z-index: var(--z-overlay);
  pointer-events: none;
}


/* ==========================================================================
   9. Empty State
   ========================================================================== */

/* Load more button for pagination */
.load-more-btn {
  text-align: center;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) auto var(--space-4);
  max-width: var(--message-max-width);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--bg-surface);
  border: var(--space-px) solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.load-more-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-muted);
}

.empty-state svg {
  width: var(--space-12);
  height: var(--space-12);
  margin-bottom: var(--space-4);
  opacity: 0.4;
}


/* ==========================================================================
   10. Message Copy Button
   ========================================================================== */

.msg-copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--bg-elevated);
  border: var(--space-px) solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-default);
  /* Float above message content, not under it. --z-base (0) meant the copy
     button could be obscured by inline content with its own stacking context. */
  z-index: var(--z-sticky);
}

.message:hover .msg-copy-btn {
  opacity: 1;
}

.msg-copy-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text);
}

.msg-copy-btn:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent-glow);
}


/* ==========================================================================
   11. Thinking Animation
   ========================================================================== */

.chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-0);
}

.chat-thinking .thinking-text {
  color: var(--accent);
}

/* Canvas embeds — inline iframes in chat */
/* Inline canvas embed — Claude-style. No chrome; the diagram sits directly
   in the chat body with a floating "..." menu (Copy link / Download file)
   anchored to the top-right corner. */
.canvas-embed {
  position: relative;
  margin: var(--space-3) 0;
  background: transparent;
}

.canvas-iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--radius-lg);
  background: #fff;
}

.canvas-embed-menu-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  z-index: 2;
}
.canvas-embed:hover .canvas-embed-menu-btn,
.canvas-embed-menu-btn.open,
.canvas-embed-menu-btn:focus-visible {
  opacity: 1;
}
.canvas-embed-menu-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

.canvas-embed-menu {
  position: absolute;
  top: calc(var(--space-2) + 32px);
  right: var(--space-2);
  min-width: 180px;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: var(--space-px) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
}
.canvas-embed-menu.open {
  display: flex;
}
.canvas-embed-menu-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.canvas-embed-menu-item:hover {
  background: var(--bg-surface);
}
.canvas-embed-menu-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .canvas-iframe {
    height: 300px;
  }
  /* Touch-first: always show the menu button on mobile (no hover). */
  .canvas-embed-menu-btn { opacity: 1; }
}

.chat-thinking .thinking-dots::after {
  content: "";
  animation: thinkingDots 1.2s steps(4, end) infinite;
}


/* ==========================================================================
   12. Message Queue Badge
   ========================================================================== */

.queue-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: var(--radius-full);
  vertical-align: middle;
  animation: fadeIn var(--duration-normal) var(--ease-default);
}


/* ==========================================================================
   13. Markdown Tables (.md-table)
   ========================================================================== */

.md-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) var(--space-0);
  font-size: var(--text-base);
}

.md-table th,
.md-table td {
  border: var(--space-px) solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.md-table th {
  background: var(--accent-subtle);
  font-weight: 600;
  color: var(--accent);
}

.md-table tr:nth-child(even) {
  background: var(--bg-surface);
}

.md-table tr:hover {
  background: var(--bg-surface-hover);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {

  /* Tool blocks: reduced padding */
  .tool-block-header {
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-sm);
  }

  .tool-block-code {
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Code blocks: smooth horizontal scrolling */
  .block-code,
  .tool-block-code {
    -webkit-overflow-scrolling: touch;
  }

  /* Tables: horizontal scroll */
  .message-text table,
  .md-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 400px;
  }

  /* Command palette: full width */
  .command-palette {
    max-width: 100%;
    left: 0;
    transform: none;
    margin-left: var(--space-2);
    margin-right: var(--space-2);
    width: calc(100% - var(--space-4));
    border-radius: var(--radius-md);
  }

  /* Block preview: narrower */
  .block-preview {
    max-width: 200px;
  }

  .block-detail {
    max-width: 180px;
  }

  /* Collapsible block bodies: smaller on mobile */
  .block-body {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
}


/* ==========================================================================
   Session recap card
   Shown at the top of the chat area when a stale conversation (> 30 min
   idle) is resumed, giving a brief "last time you…" summary before the
   user scrolls into the full scrollback.
   ========================================================================== */
.session-recap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--message-max-width);
  margin: var(--space-4) auto var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  animation: fadeIn var(--duration-normal) var(--ease-default);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .session-recap {
    background: var(--bg-glass-surface);
    -webkit-backdrop-filter: var(--blur-sm);
    backdrop-filter: var(--blur-sm);
  }
}

.session-recap-content {
  flex: 1;
  min-width: 0;
}

.session-recap-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.session-recap-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}

.session-recap-dismiss {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.session-recap-dismiss:hover,
.session-recap-dismiss:focus-visible {
  outline: none;
  background: var(--bg-surface-hover);
  color: var(--text);
}

/* Mobile tighten */
@media (max-width: 768px) {
  .session-recap {
    margin: var(--space-3) var(--space-3) var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .session-recap-text {
    font-size: var(--text-xs);
  }
}