/* 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; }