/* IDE Remote views: the IDE's design tokens (ide/ui/css/ide.css), dark by default, light with prefers-color-scheme.
   data-theme="light|dark" on <html> overrides the system. Mobile first. */
:root {
  --rv-bg: #1e1f22; --rv-panel: #2b2d30; --rv-panel-2: #313338; --rv-border: #1e1f22; --rv-border-2: #393b40; --rv-hover: #393b40; --rv-active: #43454a;
  --rv-selection: #2e436e; --rv-text: #dfe1e5; --rv-text-2: #9da0a8; --rv-text-3: #6f737a; --rv-accent: #3574f0; --rv-accent-2: #548af7;
  --rv-green: #5fb865; --rv-red: #e06c75; --rv-yellow: #e5c07b; --rv-blue: #56a8f5; --rv-purple: #c77dbb; --rv-orange: #cf8e6d;
  --rv-radius: 6px;
  --rv-font: Inter, -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rv-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --rv-safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --rv-bg: #ffffff; --rv-panel: #f7f8fa; --rv-panel-2: #ffffff; --rv-border: #ebecf0; --rv-border-2: #dfe1e5; --rv-hover: #dfe1e5; --rv-active: #d3d5db;
    --rv-selection: #d4e2ff; --rv-text: #1e1f22; --rv-text-2: #5a5d63; --rv-text-3: #8c8f96; --rv-accent: #3574f0; --rv-accent-2: #2f66d6;
    --rv-green: #208a3c; --rv-red: #c94f4f; --rv-yellow: #a87b00; --rv-blue: #2f66d6; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --rv-bg: #ffffff; --rv-panel: #f7f8fa; --rv-panel-2: #ffffff; --rv-border: #ebecf0; --rv-border-2: #dfe1e5; --rv-hover: #dfe1e5; --rv-active: #d3d5db;
  --rv-selection: #d4e2ff; --rv-text: #1e1f22; --rv-text-2: #5a5d63; --rv-text-3: #8c8f96; --rv-accent: #3574f0; --rv-accent-2: #2f66d6;
  --rv-green: #208a3c; --rv-red: #c94f4f; --rv-yellow: #a87b00; --rv-blue: #2f66d6; color-scheme: light;
}

.rv-claude, .rv-terminal, .rv-files { display: flex; flex-direction: column; min-height: 0; background: var(--rv-bg); color: var(--rv-text); font-family: var(--rv-font); font-size: 16px; line-height: 1.45; }
.rv-claude *, .rv-terminal *, .rv-files * { box-sizing: border-box; }
.rv-empty { color: var(--rv-text-3); padding: 24px 16px; text-align: center; }
.rv-empty.rv-error { color: var(--rv-red); }
.rv-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); background: var(--rv-panel-2); color: var(--rv-text); font: inherit; cursor: pointer; }
.rv-btn:active { background: var(--rv-active); }
.rv-btn.rv-small { min-height: 36px; padding: 0 12px; font-size: 14px; }

/* Claude */
.rv-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
.rv-live { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.rv-live:empty { display: none; }
.rv-msg { padding: 10px 12px; border-radius: var(--rv-radius); overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; }
.rv-msg.rv-md { white-space: normal; }
.rv-user { background: var(--rv-selection); align-self: flex-end; max-width: 92%; }
.rv-user.rv-during { opacity: .75; }
.rv-assistant { background: var(--rv-panel); }
.rv-assistant p { margin: 0 0 .6em; } .rv-assistant p:last-child { margin: 0; }
.rv-assistant ul, .rv-assistant ol { margin: 0 0 .6em; padding-left: 1.4em; }
.rv-assistant h2, .rv-assistant h3, .rv-assistant h4, .rv-assistant h5 { margin: .6em 0 .3em; font-size: 1.05em; }
.rv-assistant a { color: var(--rv-accent-2); }
.rv-assistant code { font-family: var(--rv-mono); font-size: .88em; background: var(--rv-panel-2); padding: 1px 4px; border-radius: 3px; }
.rv-assistant pre.code { font-family: var(--rv-mono); font-size: 13px; background: var(--rv-bg); border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); padding: 10px; overflow-x: auto; white-space: pre; margin: 0 0 .6em; }
.rv-assistant blockquote { margin: 0 0 .6em; padding-left: 10px; border-left: 3px solid var(--rv-border-2); color: var(--rv-text-2); }
.rv-md-table-wrap, .md-table-wrap { overflow-x: auto; margin-bottom: .6em; }
.md-table { border-collapse: collapse; font-size: 14px; } .md-table th, .md-table td { border: 1px solid var(--rv-border-2); padding: 4px 8px; text-align: left; }
.rv-think { color: var(--rv-text-2); font-size: 14px; } .rv-think summary { cursor: pointer; padding: 6px 0; min-height: 32px; }
.rv-think-text { white-space: pre-wrap; padding: 4px 0 4px 10px; border-left: 3px solid var(--rv-border-2); overflow-wrap: anywhere; }
.rv-live-think { color: var(--rv-text-2); font-size: 14px; background: transparent; padding: 4px 0; }
.rv-tool { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--rv-text-2); background: var(--rv-panel); border-radius: var(--rv-radius); padding: 6px 10px; min-width: 0; }
.rv-tool b { color: var(--rv-text); font-weight: 600; flex: none; }
.rv-tool span { font-family: var(--rv-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rv-toolfail { background: transparent; border: 1px solid var(--rv-red); color: var(--rv-red); font-size: 14px; }
.rv-error { background: transparent; border: 1px solid var(--rv-red); color: var(--rv-red); }
.rv-note { background: transparent; border: 1px dashed var(--rv-border-2); color: var(--rv-text-2); font-size: 14px; }
.rv-done { color: var(--rv-text-3); font-size: 13px; text-align: center; padding: 2px 0; }
.rv-working { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-top: 1px solid var(--rv-border-2); color: var(--rv-text-2); font-size: 14px; background: var(--rv-panel); }
.rv-working[hidden] { display: none; }
.rv-working-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-stop { min-height: 44px; border-color: var(--rv-red); color: var(--rv-red); }
.rv-spinner { width: 14px; height: 14px; border: 2px solid var(--rv-border-2); border-top-color: var(--rv-accent-2); border-radius: 50%; animation: rv-spin 0.8s linear infinite; flex: none; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-compose { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px calc(8px + var(--rv-safe-b)); background: var(--rv-panel); border-top: 1px solid var(--rv-border-2); position: sticky; bottom: 0; }
.rv-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; /* 16px: iOS does not zoom on focus */ color: var(--rv-text); background: var(--rv-panel-2); border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); padding: 10px 12px; resize: none; max-height: 160px; min-height: 44px; outline: none; }
.rv-input:focus { border-color: var(--rv-accent); }
.rv-send { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }
.rv-jump { position: absolute; right: 16px; bottom: 140px; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--rv-border-2); background: var(--rv-panel-2); color: var(--rv-text); font: inherit; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.rv-jump[hidden] { display: none; }

/* Terminal */
.rv-tabs { display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; background: var(--rv-panel); border-bottom: 1px solid var(--rv-border-2); flex: none; }
.rv-tab { flex: none; min-height: 40px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); background: var(--rv-panel-2); color: var(--rv-text-2); font: inherit; font-size: 14px; }
.rv-tab.on { color: var(--rv-text); border-color: var(--rv-accent); }
.rv-term-stage { flex: 1; min-height: 0; position: relative; padding: 4px; background: var(--rv-bg); }
.rv-term { position: absolute; inset: 4px; }
.rv-term[hidden] { display: none; }
.rv-term .xterm { height: 100%; }
.rv-term .xterm-viewport { overscroll-behavior: contain; }
.rv-keys { display: flex; gap: 4px; padding: 6px 8px calc(6px + var(--rv-safe-b)); overflow-x: auto; background: var(--rv-panel); border-top: 1px solid var(--rv-border-2); flex: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.rv-key { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); background: var(--rv-panel-2); color: var(--rv-text); font: 15px var(--rv-mono); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rv-key:active, .rv-key.on { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }

/* Files */
.rv-files-bar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--rv-panel); border-bottom: 1px solid var(--rv-border-2); flex: none; }
.rv-search { flex: 1; min-width: 0; min-height: 40px; font: inherit; font-size: 16px; color: var(--rv-text); background: var(--rv-panel-2); border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); padding: 0 10px; outline: none; }
.rv-files { flex-direction: row; }
.rv-files-tree, .rv-files-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
.rv-tree, .rv-viewer-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.rv-row { display: flex; gap: 6px; align-items: center; width: 100%; min-height: 40px; padding-right: 12px; border: 0; background: transparent; color: var(--rv-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.rv-row.on { background: var(--rv-selection); } .rv-row:active { background: var(--rv-hover); }
.rv-row .rv-ico { width: 14px; flex: none; color: var(--rv-text-3); text-align: center; }
.rv-row .rv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-dir { font-weight: 600; }
.rv-viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--rv-mono); font-size: 13px; color: var(--rv-text-2); direction: rtl; text-align: left; }
.rv-code { display: flex; min-width: min-content; font: 13px/1.5 var(--rv-mono); }
.rv-gutter, .rv-pre { margin: 0; padding: 8px 0; font: inherit; white-space: pre; tab-size: 4; }
.rv-gutter { position: sticky; left: 0; flex: none; padding: 8px 10px; text-align: right; color: var(--rv-text-3); background: var(--rv-panel); user-select: none; -webkit-user-select: none; }
.rv-pre { padding: 8px 12px; flex: 1; }
.rv-image { max-width: 100%; display: block; margin: 12px auto; }
.rv-viewer-body > .rv-note { margin: 8px 12px; }
/* phones: one pane at a time */
@media (max-width: 759px) {
  .rv-files .rv-files-view { display: none; }
  .rv-files.rv-viewing .rv-files-tree { display: none; }
  .rv-files.rv-viewing .rv-files-view { display: flex; }
}
@media (min-width: 760px) {
  .rv-files-tree { flex: 0 0 300px; border-right: 1px solid var(--rv-border-2); }
  .rv-back { display: none; }
  .rv-log { padding: 16px max(16px, calc((100% - 820px) / 2)); }
}
.rv-claude[hidden], .rv-terminal[hidden], .rv-files[hidden] { display: none; }
/* standalone (no shell): the container fills its parent */
.rv-claude:not(.panel), .rv-terminal:not(.panel), .rv-files:not(.panel) { height: 100%; position: relative; }