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

:root {
  --bg: #000000;
  --bg-elev: #141414;
  --bg-elev-2: #1e1e1e;
  --bg-elev-3: #2a2a2a;
  --accent: #ececec;
  --accent-2: #ffffff;
  --accent-dim: #2a2a2a;
  --accent-glow: rgba(255, 255, 255, 0.1);
  --icon-accent: #6ea8fe;
  --icon-accent-dim: rgba(110, 168, 254, 0.14);
  --amber: #d4d4d4;
  --amber-dim: #2a2a2a;
  --bubble-user: #212121;
  --text: #ececec;
  --text-dim: #9b9b9b;
  --text-faint: #676767;
  --border: #262626;
  --danger: #ff6b6b;
  --danger-dim: #3a1f24;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}

svg.icon { width: 1em; height: 1em; flex-shrink: 0; }

/* TOP BAR */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 10;
}
.topbar-title { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar-title span:first-child { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.sub { font-size: 11px; color: var(--text-dim); }
.icon-btn {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--icon-accent);
  font-size: 16px;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.icon-btn:active { border-color: var(--icon-accent); color: var(--accent-2); }

/* DRAWER (Projects & Files) */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 80%; max-width: 320px;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  z-index: 21;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.drawer.show {
  transform: translateX(0);
}
.files-panel {
  left: auto; right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
}
.files-panel.show {
  transform: translateX(0);
}
.hidden { display: none !important; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.drawer-header h3 { font-size: 15px; letter-spacing: -0.01em; }
.btn-small {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-small svg.icon { color: var(--icon-accent); }
.file-actions { display: flex; gap: 6px; }

.project-list, .file-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
}
.project-item, .file-item {
  padding: 11px 12px;
  border-radius: 11px;
  margin-bottom: 6px;
  background: var(--bg-elev-2);
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.project-item.active { border-color: var(--accent); background: var(--accent-dim); }
.project-item-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.project-item-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.project-item-info span { font-size: 10px; color: var(--text-dim); }
.mini-btn {
  background: var(--bg-elev-3); border: none; color: var(--icon-accent); font-size: 15px;
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mini-btn.danger { color: var(--danger); }

.file-item { flex-direction: column; align-items: stretch; gap: 8px; cursor: pointer; }
.file-item-top { display: flex; flex-direction: column; gap: 8px; }
.file-item-top b { font-family: "SF Mono", "JetBrains Mono", monospace; font-size: 12.5px; word-break: break-all; font-weight: 500; }
.file-item-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* FULL-SCREEN LIVE PREVIEW */
.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.preview-modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.preview-filename {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.icon-btn.small {
  width: 32px;
  height: 32px;
  font-size: 14px;
  border-radius: 9px;
}
.preview-frame-wrap {
  flex: 1;
  background: #fff;
  overflow: hidden;
}
#previewFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* CHAT */
.chat-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.chat-log {
  padding: 16px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
}
.empty-state {
  margin: auto;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
}
.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 14px;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.shortcut-card:active {
  background: var(--bg-elev-2);
  border-color: #3a3a3a;
}
.shortcut-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-accent);
}
.shortcut-icon svg { width: 20px; height: 20px; }
.shortcut-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.empty-state .hint { margin-top: 4px; font-size: 12px; opacity: 0.7; }

/* USER message: bubble, right-aligned */
.msg.user {
  align-self: flex-end;
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  font-size: 14.5px;
  line-height: 1.45;
  word-break: break-word;
  background: var(--bubble-user);
  margin: 6px 14px;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.msg.user.pressing {
  background: var(--bg-elev-3);
  transform: scale(0.98);
}
.msg.user.editing {
  max-width: 92%;
  width: 92%;
  background: var(--bg-elev-2);
  border: 1px solid var(--icon-accent);
}
.msg-content-plain {
  white-space: pre-wrap;
}
.msg.user .msg-time-only {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
  text-align: right;
}
.edit-msg-textarea {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  line-height: 1.45;
  resize: none;
  padding: 0;
  user-select: text;
}
.edit-msg-textarea:focus { outline: none; }
.edit-msg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.edit-msg-btn {
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
}
.edit-msg-btn.cancel {
  background: none;
  color: var(--text-dim);
}
.edit-msg-btn.save {
  background: var(--accent-2);
  color: #000;
}

/* BOT message: full-width panel, no bubble */
.msg.bot {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px 10px;
  font-size: 14.5px;
  line-height: 1.55;
  word-break: break-word;
  background: transparent;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
}

.msg.system {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 8px 14px;
  white-space: pre-wrap;
}

/* AI REASONING (shown before file changes are applied) */
.msg.reasoning {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 92%;
  background: var(--icon-accent-dim);
  border: 1px solid var(--icon-accent-dim);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 6px 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
.reasoning-icon {
  color: var(--icon-accent);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
}
.reasoning-text {
  color: var(--text);
  opacity: 0.9;
  white-space: pre-wrap;
}

/* IMPORT STATUS CARD — left-aligned, icon-led (not centered plain text) */
.msg.import-card {
  align-self: flex-start;
  max-width: 88%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 14px;
  font-size: 13px;
}
.import-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
}
.import-card-header .status-check { color: var(--icon-accent); }
.import-card-files {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.import-card-file {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12px;
}
.import-card-file svg.icon { color: var(--icon-accent); width: 13px; height: 13px; }
.import-card-extras {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
}

.msg.typing { display: flex; gap: 4px; align-items: center; margin: 6px 16px; }

.msg.bot.streaming .msg-content::after {
  content: "▊";
  display: inline-block;
  color: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

.streaming-status-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.streaming-status-note .status-spinner {
  width: 12px;
  height: 12px;
}

/* DIFF VIEW */
.diff-content {
  flex: 1;
  overflow-y: auto;
  background: #0d0e17;
  padding: 8px 0;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
}

.code-view-textarea {
  width: 100%;
  background: #0a0a0b;
  color: #d4e2f0;
  border: none;
  padding: 14px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  resize: none;
  white-space: pre;
  overflow: auto;
}
.code-view-textarea:focus { outline: none; }
.code-view-textarea.editing {
  background: #0d0e17;
  box-shadow: inset 0 0 0 1px var(--icon-accent);
}
.code-view-textarea[readonly] { cursor: default; }
.diff-line {
  display: flex;
  padding: 1px 14px;
  white-space: pre-wrap;
  word-break: break-all;
}
.diff-prefix {
  width: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  user-select: none;
}
.diff-text { flex: 1; }
.diff-line.diff-added { background: rgba(76, 217, 100, 0.12); color: #7ee787; }
.diff-line.diff-added .diff-prefix { color: #4cd964; }
.diff-line.diff-removed { background: rgba(255, 107, 107, 0.12); color: #ff9b9b; text-decoration: line-through; text-decoration-color: rgba(255,107,107,0.4); }
.diff-line.diff-removed .diff-prefix { color: var(--danger); }
.diff-line.diff-same { color: var(--text-dim); }
.dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: blink 1.2s infinite ease-in-out; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* FILE CHIP (inside chat bubble/panel) */
.file-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 8px 8px 12px;
  margin-top: 8px;
  font-size: 12.5px;
  transition: border-color 0.15s ease;
}
.file-chip-row:active { border-color: var(--accent); }
.file-chip-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-size: 12.5px;
}
.file-chip-name svg.icon { color: var(--icon-accent); font-size: 14px; }
.file-chip-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.chip-action-btn {
  background: none;
  border: none;
  color: var(--icon-accent);
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.chip-action-btn:active {
  background: var(--bg-elev-3);
  color: var(--accent-2);
}

/* MESSAGE FOOTER (time, like/dislike, share, copy) — BOT ONLY */
.msg-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  padding-top: 8px;
}
.msg-time {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-right: auto;
  padding-right: 8px;
}
.msg-action-btn {
  background: none;
  border: none;
  color: var(--icon-accent);
  font-size: 13px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-action-btn:active {
  background: var(--bg-elev-2);
  color: var(--accent-2);
}
.msg-action-btn.active-like {
  color: #6ee88a;
}
.msg-action-btn.active-dislike {
  color: var(--danger);
}
.msg-action-btn.retry-btn {
  color: var(--icon-accent);
}

/* MARKDOWN CONTENT (bot replies) */
.msg-content strong { font-weight: 700; color: #fff; }
.msg-content em { font-style: italic; }
.msg-content code {
  background: var(--bg-elev-3);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--amber);
}
.msg-content pre {
  background: #0d0e17;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  overflow-x: auto;
}
.msg-content pre code {
  background: none;
  padding: 0;
  color: #d4e2f0;
  font-size: 12px;
  white-space: pre;
}
.msg-content ul, .msg-content ol {
  margin: 6px 0 6px 20px;
}
.msg-content li {
  margin-bottom: 3px;
}
.msg-content h1, .msg-content h2, .msg-content h3 {
  font-weight: 700;
  margin: 10px 0 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.msg-content h1 { font-size: 17px; }
.msg-content h2 { font-size: 15.5px; }
.msg-content h3 { font-size: 14.5px; }
.msg-content p { margin-bottom: 6px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content a { color: var(--accent); text-decoration: underline; }

/* TOAST */
.toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* CUSTOM MODAL */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  width: 100%;
  max-width: 340px;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-overlay.show .modal-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.modal-message {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.modal-input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 14px;
  margin-bottom: 16px;
}
.modal-input:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-btn {
  padding: 9px 16px;
  border-radius: 11px;
  font-size: 13px;
  border: none;
  font-weight: 500;
}
.modal-btn-cancel {
  background: var(--bg-elev-2);
  color: var(--text-dim);
}
.modal-btn-ok {
  background: var(--accent);
  color: #0e0e0f;
}
.modal-btn-ok.danger {
  background: var(--danger);
  color: #2a0505;
}

.import-picker-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.template-modal-box { max-width: 360px; }
.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  aspect-ratio: 1 / 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.template-card:active {
  background: var(--bg-elev-3);
  border-color: #3a3a3a;
}
.template-card-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-accent);
}
.template-card-icon svg { width: 22px; height: 22px; }
.template-card-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  line-height: 1.25;
}
.modal-btn-import {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  font-size: 13.5px;
  width: 100%;
}
.modal-btn-import svg.icon { color: var(--icon-accent); }
.modal-btn-import:active {
  border-color: var(--icon-accent);
  color: var(--text);
}
.import-progress {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
}

/* AGENT PROGRESS / STATUS */
.msg.status {
  align-self: flex-start;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  margin: 4px 14px;
}
.msg.status.done { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-dim); }
.status-spinner {
  width: 13px; height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status-check { color: var(--icon-accent); font-size: 14px; display: inline-flex; }
.status-text.status-file-op {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-text.status-file-op svg.icon { color: var(--icon-accent); font-size: 13px; flex-shrink: 0; }
.status-text.status-file-op span { font-family: "SF Mono", "JetBrains Mono", monospace; font-size: 12px; }

/* INPUT BAR */
.input-bar {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  padding-bottom: calc(env(safe-area-inset-bottom, 10px) + 10px);
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(12px);
}
.input-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 6px 6px 6px 6px;
  transition: border-color 0.15s ease;
}
.input-wrap:focus-within {
  border-color: #4a4a4a;
}
#chatInput {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px 4px;
  font-size: 15px;
  resize: none;
  max-height: 120px;
  font-family: inherit;
  line-height: 1.35;
}
#chatInput:focus { outline: none; }
#chatInput::placeholder { color: var(--text-faint); }

.attach-btn, .mic-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--icon-accent);
  font-size: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.attach-btn:active, .mic-btn:active { background: var(--bg-elev-3); color: var(--accent-2); }
.mic-btn.listening {
  color: var(--danger);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.mic-btn.unsupported { display: none; }

.send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #000;
  font-size: 19px;
  border: none;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.send-btn:active { transform: scale(0.9); }
.send-btn:disabled { opacity: 0.3; }
.send-btn.hidden-btn { display: none; }
.send-btn.sending {
  background: var(--bg-elev-3);
  color: var(--danger);
}

.attached-files-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px 0;
}
.attached-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.attached-chip button {
  background: none; border: none; color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ========== SKELETON LOADING ========== */
.skeleton-item { pointer-events: none; }
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: var(--bg-elev-3);
}
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.preview-skeleton {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-skeleton .skeleton-line { height: 16px; }

/* ========== PULL TO REFRESH ========== */
.pull-refresh-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  overflow: visible;
  position: relative;
  z-index: 5;
  transition: transform 0.2s ease;
}
.pull-refresh-indicator .status-spinner {
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-top: 8px;
}
.pull-refresh-indicator.ready .status-spinner,
.pull-refresh-indicator.refreshing .status-spinner {
  opacity: 1;
}

/* ========== KEYBOARD-AWARE ========== */
#app.keyboard-open .input-bar {
  padding-bottom: 10px; /* keyboard already covers safe-area, don't double-pad */
}

/* ========== MESSAGE SEARCH ========== */
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
}
.search-input-wrap svg.icon { color: var(--text-faint); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
}
.search-input-wrap input:focus { outline: none; }
.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.search-empty {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 30px 20px;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.search-result-role {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--icon-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.search-result-snippet {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}
.search-result-snippet mark {
  background: var(--icon-accent-dim);
  color: var(--icon-accent);
  border-radius: 3px;
  padding: 0 2px;
}
.search-highlight-flash {
  animation: search-flash 1.5s ease;
}
@keyframes search-flash {
  0%, 100% { background: transparent; }
  20% { background: var(--icon-accent-dim); }
}

/* ========== BULK FIND/REPLACE ========== */
.bulk-replace-preview {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.bulk-replace-summary {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.bulk-replace-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.bulk-replace-file-row svg.icon { color: var(--icon-accent); flex-shrink: 0; }
.bulk-replace-file-row span:nth-child(2) {
  flex: 1;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-replace-count {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}
.modal-btn-ok:disabled { opacity: 0.4; }

/* ========== PLAN CONFIRMATION ========== */
.plan-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.plan-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-elev-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.plan-step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--icon-accent-dim);
  color: var(--icon-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-step-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

/* ========== SYNTAX HIGHLIGHTING (code view) ========== */
/* .code-view-body is a flex child of .preview-modal (display:flex; flex-direction:column).
   flex:1 alone can still collapse to content-size in some engines because the default
   min-height for a flex item is "auto", not 0 — explicitly zeroing it here is what
   guarantees this box actually claims the remaining modal height instead of shrinking
   to fit its (possibly still-loading) content. This was the root cause of the code view
   appearing blank/collapsed: the box had virtually no height, so the absolutely
   positioned highlight/textarea layers inside it (inset:0) had nothing to fill. */
.code-view-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Line-number gutter — a separate column, not part of the scrollable code text itself, so
   long lines can scroll horizontally without dragging the numbers along with them. Synced
   vertically to the code's scroll position via JS (see syncGutterScroll in preview.js). */
.code-view-gutter {
  flex-shrink: 0;
  width: 40px;
  overflow: hidden;
  padding: 14px 0;
  background: #0a0a0b;
  border-right: 1px solid var(--border);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
.code-view-gutter div {
  padding-right: 10px;
}

.code-view-scroll-area {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.code-view-highlight {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 14px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  /* Was pointer-events:none unconditionally — that only made sense back when the (visible,
     touchable) textarea underneath was the thing the user actually scrolled, with this
     layer just riding along on top for color. Now that the textarea is hidden in read-only
     mode (see .code-view-textarea below), nothing was left to receive touch/scroll input
     at all — this is that "frozen, can't scroll" screen. This box needs to handle its own
     touch/scroll directly now, so pointer-events is restored to normal here. */
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
.code-view-highlight pre {
  margin: 0;
  background: none !important;
  /* No wrap — matching the gutter's one-number-per-line assumption. Long lines scroll
     horizontally instead of wrapping, which is what keeps a gutter number meaningfully
     lined up with its actual source line (a wrapped line would otherwise span multiple
     visual rows while the gutter still only shows one number for it). */
  white-space: pre;
}
.code-view-highlight code {
  background: none !important;
  font-family: inherit;
  white-space: pre;
}
.code-view-textarea {
  position: absolute;
  inset: 0;
  color: transparent;
  /* Read-only mode: fully removed from both paint AND interaction. display:none (rather
     than the earlier visibility:hidden) so it can never intercept a touch/scroll gesture
     meant for .code-view-highlight above — visibility:hidden still occupies space and can
     still receive certain pointer events in some engines, display:none guarantees neither. */
  background: transparent;
  display: none;
  caret-color: var(--text);
  white-space: pre;
  overflow: auto;
}
.code-view-textarea.raw-visible {
  /* Editing mode: the textarea becomes a transparent overlay ON TOP of the (still-visible,
     still-updating) highlight layer — same "invisible textarea over colored text" trick
     used for the read-only view, except here the textarea is genuinely interactive
     (readOnly=false) so typing/selection/caret all work normally while what the user sees
     underneath is syntax-colored text that re-highlights on every keystroke (see the
     "input" listener wired up in setCodeViewEditing). Stays absolutely positioned (NOT
     relative — relative here would drop the inset:0 sizing and let the box collapse to
     content height again, the same bug as above but for the edit state specifically). */
  display: block;
  background: transparent;
  color: transparent;
}
/* The textarea's own text is transparent (the colored copy underneath is what's actually
   read), but a native text selection paints ON the textarea itself — with transparent text
   color, a selected range showed only an empty blue selection band with no visible letters
   inside it, which is what looked "invisible"/ghosted when selecting or cutting text. This
   overrides text color specifically within an active selection so the selected characters
   are legible against the selection highlight, without affecting the unselected transparent
   text elsewhere (which still shows the colored layer underneath as normal). */
.code-view-textarea.raw-visible::selection {
  color: #0a0a0b;
  background: var(--icon-accent);
}
.code-view-highlight.hidden { display: none; }

/* Minimal Prism token colors, tuned to this app's palette rather than importing a full
   Prism theme stylesheet (keeps this dependency-light — only the highlighter core +
   language grammars are loaded from CDN, not a separate theme file). */
.token.comment { color: var(--text-faint); }
.token.string, .token.attr-value { color: #9fd88e; }
.token.number, .token.boolean { color: #d19a66; }
.token.keyword, .token.selector, .token.tag { color: #6ea8fe; }
.token.function, .token.class-name { color: #e5c07b; }
.token.punctuation, .token.operator { color: var(--text-dim); }
.token.property, .token.attr-name { color: #c792ea; }

/* ========== REVIEW MODE TOGGLE ========== */
.review-mode-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-dim);
}
.toggle-switch {
  width: 40px; height: 24px;
  border-radius: 12px;
  background: var(--bg-elev-3);
  border: none;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.toggle-switch.on { background: var(--icon-accent); }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.toggle-switch.on .toggle-knob { transform: translateX(16px); }

/* ========== PENDING REVIEW CARD ========== */
.msg.review-card {
  align-self: stretch;
  /* Was width:100% + margin:10px 14px — 100% resolves against the parent's content box,
     so the horizontal margin added on top pushed the actual rendered width past the
     viewport, which is what was forcing the whole page into horizontal scroll (the
     .chat-area overflow-x:hidden above is a second safety net, but this is the real fix:
     the box should never have been wider than its available space to begin with). */
  width: auto;
  background: var(--bg-elev);
  border: 1px solid var(--icon-accent-dim);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 14px;
  overflow-x: hidden;
}
.review-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.review-card-header svg.icon { color: var(--icon-accent); }
.review-file-block {
  background: var(--bg-elev-2);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}
.review-file-block:last-child { margin-bottom: 0; }
.review-file-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 8px;
}
.review-file-header svg.icon { color: var(--icon-accent); width: 13px; height: 13px; }
.review-file-header span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-expand-btn {
  background: none;
  border: none;
  color: var(--icon-accent);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-expand-btn:active {
  background: var(--bg-elev-3);
}
.review-diff-preview {
  max-height: 160px;
  overflow-y: auto;
  overflow-x: auto;
  background: #0d0e17;
  border-radius: 8px;
  padding: 6px 0;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.review-file-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.review-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
}
.review-btn.reject {
  background: none;
  color: var(--danger);
}
.review-btn.accept {
  background: var(--icon-accent);
  color: #041226;
}
.review-file-block.resolved-accepted {
  opacity: 0.5;
  pointer-events: none;
}
.review-file-block.resolved-accepted::after {
  content: "✓ Applied";
  display: block;
  text-align: center;
  color: #6ee88a;
  font-size: 11px;
  margin-top: 4px;
}
.review-file-block.resolved-rejected {
  opacity: 0.4;
  pointer-events: none;
}
.review-file-block.resolved-rejected .review-diff-preview,
.review-file-block.resolved-rejected .review-file-actions {
  display: none;
}
.review-file-block.resolved-rejected::after {
  content: "Rejected — no changes made";
  display: block;
  color: var(--text-faint);
  font-size: 11px;
}
.review-bulk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.review-bulk-btn {
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  border: none;
}
.review-bulk-btn.reject-all {
  background: none;
  color: var(--danger);
}
.review-bulk-btn.accept-all {
  background: var(--icon-accent);
  color: #041226;
}