:root {
  color-scheme: light;
  /* light (default — writers come from Google Docs) */
  --bg: #f6f7fa; --panel: #ffffff; --panel2: #f0f2f7; --line: #d9deea; --text: #1b1f2a; --muted: #5f6880;
  --accent: #2b5bd7; --accent2: #2b5bd7; --ok: #1e8f57; --bad: #c62828; --warn: #b7791f;
  --del-bg: #ffe0e0; --del-fg: #8a1c1c; --ins-bg: #dff5e6; --ins-fg: #14532d; --sel: #b9cdfa; --user-bubble: #dfe8ff; --chip: #f0f2f7;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115; --panel: #161a22; --panel2: #1c2130; --line: #2a3140; --text: #e6e8ee; --muted: #8b93a7;
  --accent: #7aa2ff; --accent2: #5b7fe0; --ok: #4fd18b; --bad: #ff6b6b; --warn: #f2c14e;
  --del-bg: #5a2323; --del-fg: #ffb3b3; --ins-bg: #1f4d33; --ins-fg: #b7f5cf; --sel: #2b4a8a99; --user-bubble: #2b3a5c; --chip: #131722;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.top { flex: 0 0 auto; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .small { font-size: 12px; } .mono { font-family: var(--mono); } .hidden { display: none !important; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; }
.top .left, .top .right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { font-weight: 700; font-size: 17px; } .brand span { color: var(--accent); }
.icon { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.title { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; font-size: 15px; min-width: 260px; }
.title:hover, .title:focus { border-color: var(--line); background: var(--panel2); outline: none; }
.game { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; width: 170px; }
select { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.layout { display: grid; grid-template-columns: auto 1fr 400px; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.layout > * { min-height: 0; }
.docs { grid-column: 1; width: 240px; border-right: 1px solid var(--line); background: var(--panel); overflow: auto; }
.editor-wrap { grid-column: 2; }
.panel { grid-column: 3; }
.docs-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc-list .doc { padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.doc-list .doc:hover, .doc-list .doc.on { background: var(--panel2); }
.doc-list .doc .t { font-weight: 600; font-size: 13px; } .doc-list .doc .m { color: var(--muted); font-size: 11.5px; }
.editor-wrap { display: flex; flex-direction: column; min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--accent); } .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.tiny { padding: 3px 9px; font-size: 12px; } .btn.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; }
/* ── editor enriquecido (TipTap/ProseMirror) ── */
.fmtbar { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.fmtbar button { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; cursor: pointer; min-width: 30px; font-size: 13.5px; color: var(--text); }
.fmtbar button:hover { background: var(--panel2); border-color: var(--line); }
.fmtbar button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.fmtbar select { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12.5px; max-width: 150px; }
.fmtbar .colorbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; border-radius: 6px; cursor: pointer; font-weight: 700; border: 1px solid transparent; }
.fmtbar .colorbtn:hover { background: var(--panel2); border-color: var(--line); }
.fmtbar .colorbtn.hl { color: var(--warn); }
.fmtbar .colorbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.editor-host { flex: 1; overflow: auto; position: relative; }
#editor { max-width: 860px; margin: 0 auto; padding: 28px 40px 60vh; }
.ProseMirror { outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.7; min-height: 60vh; color: var(--text); }
.ProseMirror p { margin: 0 0 .55em; }
.ProseMirror h1 { font-size: 26px; margin: .8em 0 .4em; } .ProseMirror h2 { font-size: 20px; margin: .8em 0 .35em; } .ProseMirror h3 { font-size: 16.5px; margin: .7em 0 .3em; }
.ProseMirror a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.ProseMirror blockquote { border-left: 3px solid var(--line); margin: .4em 0; padding: 2px 12px; color: var(--muted); }
.ProseMirror ul, .ProseMirror ol { padding-left: 1.4em; }
.ProseMirror mark { border-radius: 2px; padding: 0 1px; }
.ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; }
.ProseMirror .blk-header { color: var(--accent); font-weight: 700; }
.ProseMirror .blk-protected { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.ProseMirror .lint-warning { box-shadow: -3px 0 0 var(--warn); padding-left: 8px; margin-left: -11px; }
.ProseMirror .lint-alert { box-shadow: -3px 0 0 var(--bad); padding-left: 8px; margin-left: -11px; }
.ProseMirror .lint-info { box-shadow: -3px 0 0 var(--line); padding-left: 8px; margin-left: -11px; }
.ProseMirror .sug { border-bottom: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); cursor: pointer; }
.ProseMirror .cmt { background: color-mix(in srgb, var(--warn) 22%, transparent); border-bottom: 2px solid var(--warn); cursor: pointer; }
.sugpop { position: absolute; z-index: 20; width: 460px; max-width: calc(100% - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px #0003; padding: 10px 12px; font-size: 13.5px; }
.sugpop .sp-diff { line-height: 1.55; margin-bottom: 8px; }
.sugpop del { background: var(--del-bg); color: var(--del-fg); text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.sugpop ins { background: var(--ins-bg); color: var(--ins-fg); text-decoration: none; padding: 0 2px; border-radius: 3px; }
.sugpop .sp-actions { display: flex; gap: 6px; align-items: center; } .sugpop .sp-reason { margin-right: auto; }
.comlist .com { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel2); font-size: 13px; }
.comlist .com.active { border-color: var(--warn); } .comlist .com.resolved { opacity: .55; }
.com .ch { display: flex; justify-content: space-between; gap: 8px; } .com .anchor { color: var(--muted); font-size: 12px; margin: 3px 0; font-style: italic; }
.com .ct { white-space: pre-wrap; margin: 4px 0; } .com .ca { display: flex; gap: 6px; margin-top: 4px; }
/* panel */
.panel { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 4px; cursor: pointer; color: var(--muted); font-size: 12.5px; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.pane { display: none; overflow: auto; padding: 12px; flex: 1; min-height: 0; } .pane.on { display: block; }
.form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form input, .form textarea, .form select { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.form .row { display: flex; gap: 6px; align-items: center; } .form .row input[type=number] { width: 84px; }
.chk { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); flex: 1; }
.facts .fact { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: var(--panel2); }
.fact .h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fact .h b { font-size: 13.5px; } .fact .cat { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.fact .s { margin: 4px 0; font-size: 13px; } .fact .why { color: var(--muted); font-size: 12px; font-style: italic; }
.fact .src { font-size: 12px; margin-top: 6px; } .fact .src a { color: var(--accent); text-decoration: none; } .fact .src a:hover { text-decoration: underline; }
.fact .q { border-left: 3px solid var(--line); padding: 2px 8px; color: var(--text); opacity: .85; font-size: 12px; margin: 4px 0; }
.fact .yt { font-size: 12px; margin-top: 4px; } .fact .yt a { color: var(--bad); text-decoration: none; margin-right: 8px; }
.fact .act { display: flex; gap: 6px; margin-top: 7px; }
.verdicts .vd { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: var(--panel2); font-size: 13px; }
.vd .st { font-weight: 700; } .vd .st.VERIFIED { color: var(--ok); } .vd .st.LIKELY { color: var(--warn); } .vd .st.CONTRADICTED { color: var(--bad); }
.vd .ev { margin: 4px 0 0 0; padding-left: 14px; font-size: 12px; } .vd .ev a { color: var(--accent); text-decoration: none; }
.vd .ev .q { color: var(--text); opacity: .85; display: block; margin: 2px 0 4px; }
.totals { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin: 6px 0; } .totals b { color: var(--accent); }
.avisos .aviso { font-size: 12px; padding: 5px 8px; border-radius: 6px; background: var(--panel2); border-left: 3px solid var(--line); cursor: pointer; margin-bottom: 4px; }
.aviso.warning { border-left-color: var(--warn); } .aviso.alert { border-left-color: var(--bad); } .aviso.info { color: var(--muted); }
.datos { font-size: 12px; margin-top: 8px; }
.dato { display: grid; grid-template-columns: 30px 1fr 48px; gap: 6px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.dato .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .dato .bar i { display: block; height: 100%; background: var(--accent2); }
.dato .bar i.over { background: var(--warn); } .dato .n, .dato .w { color: var(--muted); font-family: var(--mono); } .dato .w { text-align: right; }
.suglist .sug { font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: var(--panel2); margin-bottom: 6px; cursor: pointer; border-left: 3px solid var(--ok); }
.sug del { background: var(--del-bg); color: var(--del-fg); text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.sug ins { background: var(--ins-bg); color: var(--ins-fg); text-decoration: none; padding: 0 2px; border-radius: 3px; }
.sug.done { opacity: .45; border-left-color: var(--line); }
/* chat */
.chatpane { display: none; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; }
.chatpane.on { display: flex; }
.chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-box { flex: 0 0 auto; }
.chat-hint { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.msg { max-width: 96%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user-bubble); }
.msg.assistant { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); }
.msg.assistant a { color: var(--accent); }
.msg .cost { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-family: var(--mono); }
.toolchip { align-self: flex-start; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--chip); }
.toolchip.done { border-color: var(--ok); color: var(--ok); }
.toolchip .det { color: var(--muted); }
.chat-box { border-top: 1px solid var(--line); padding: 8px 10px 10px; background: var(--panel); }
.chat-box textarea { width: 100%; resize: none; min-height: 44px; max-height: 45vh; overflow-y: hidden; line-height: 1.45; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; display: block; }
.chat-box textarea:focus { outline: none; border-color: var(--accent); }
.chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.chat-actions .small { margin-right: auto; }
.flash { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; }
.flash.show { opacity: 1; }
@media (max-width: 1100px) { .layout { grid-template-columns: auto 1fr; } .panel { position: fixed; right: 0; top: 45px; bottom: 0; width: 400px; z-index: 9; box-shadow: -8px 0 24px #0004; } .panel.hidden { display: none; } }

/* URLs en el texto: Ctrl/Cmd+click abre */
.cm-url { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); cursor: pointer; }

/* ── página tipo Docs + margen de comentarios ── */
.editor-host { background: var(--bg); }
.page-row { display: flex; align-items: flex-start; justify-content: center; gap: 0; padding: 26px 16px 60vh; position: relative; }
.sheet { width: 816px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 4px #0002, 0 8px 28px #0000000d; border-radius: 4px; }
#editor { padding: 72px 72px 96px; max-width: none; margin: 0; }
.ProseMirror { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.6; }
.cgutter { position: relative; width: 300px; flex: 0 0 300px; margin-left: 12px; min-height: 100px; }
.ccard { position: absolute; left: 0; width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 3px #0001; font-size: 12.5px; transition: top .12s ease, box-shadow .12s ease; cursor: default; }
.ccard.active { border-color: var(--warn); box-shadow: 0 4px 16px #0002; z-index: 2; }
.ccard.orphan { opacity: .5; }
.ccard .ch { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.ccard .ct { white-space: pre-wrap; margin: 2px 0 6px; line-height: 1.45; }
.ccard .crep { border-top: 1px solid var(--line); padding: 5px 0 2px; margin-top: 4px; }
.ccard .ca { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.ccard .crin { flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; font-size: 12px; }
.ccard .ico { background: transparent; border: 0; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.ccard .ico:hover { background: var(--panel2); color: var(--text); }
.ccard .cwrite { width: 100%; resize: vertical; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.ProseMirror .cmt.active { background: color-mix(in srgb, var(--warn) 45%, transparent); }
.c-add { position: absolute; right: 318px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 2px 8px #0002; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); z-index: 3; }
.c-add:hover { color: var(--accent); border-color: var(--accent); }
/* paleta */
.palette { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px #0003; padding: 10px; }
.pal-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pal-grid { display: grid; grid-template-columns: repeat(10, 20px); gap: 4px; margin-bottom: 8px; }
.pal-grid .sw { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #0002; cursor: pointer; padding: 0; }
.pal-grid .sw:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.fmtbar .colorbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 8px 3px; }
.fmtbar .colorbtn .glyph { font-weight: 700; line-height: 1; }
.fmtbar .colorbtn i { display: block; width: 18px; height: 4px; border-radius: 2px; }
/* burbuja y formulario de enlace */
.linkbubble { position: absolute; z-index: 25; display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px #0002; padding: 6px 8px; font-size: 12.5px; }
.linkbubble a { color: var(--accent); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkform { position: absolute; z-index: 25; width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px #0003; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.linkform input { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.linkform .lf-actions { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 1400px) { .cgutter { width: 240px; flex-basis: 240px; } .ccard { width: 224px; } .c-add { right: 258px; } }
@media (max-width: 1250px) { .cgutter { width: 200px; flex-basis: 200px; margin-left: 8px; } .ccard { width: 188px; font-size: 12px; } .c-add { right: 214px; } .askmenu { right: 250px; } .layout { grid-template-columns: auto 1fr 360px; } }

/* ── Docs elementals: find bar, tables, images, tasks, modal, print ── */
.fmtbar #fSizeIn { width: 44px; text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; font-size: 12.5px; }
.findbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); font-size: 13px; }
.findbar input { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; width: 220px; }
.ProseMirror .find-hit { background: color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 2px; }
.ProseMirror .find-hit.active { background: var(--warn); color: #000; }
.ProseMirror img { max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 3px; }
.ProseMirror img.ProseMirror-selectednode { outline: 3px solid var(--accent); }
.ProseMirror table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 8px 0; }
.ProseMirror td, .ProseMirror th { border: 1px solid #b7bcc9; padding: 6px 8px; vertical-align: top; min-width: 40px; }
.ProseMirror th { background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 700; }
.ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); pointer-events: none; }
.ProseMirror td, .ProseMirror th { position: relative; }
.ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.ProseMirror ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.ProseMirror ul[data-type="taskList"] li > label { margin-top: 3px; }
.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { text-decoration: line-through; color: var(--muted); }
.ProseMirror hr { border: 0; border-top: 1px solid #b7bcc9; margin: 14px 0; }
.ProseMirror sup, .ProseMirror sub { font-size: .75em; }
.modal { position: fixed; inset: 0; background: #0006; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal-box { width: 520px; max-width: 94vw; max-height: 80vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 16px 48px #0004; display: flex; flex-direction: column; gap: 10px; }
.modal .mh { display: flex; justify-content: space-between; align-items: center; }
.modal .mf { display: flex; gap: 6px; } .modal .mf input { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.verlist .ver { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
@media print { body * { visibility: hidden; } .sheet, .sheet * { visibility: visible; } .sheet { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; } #editor { padding: 0; } .cgutter, .fmtbar, .toolbar, .top, .panel { display: none !important; } }
.fmtbar { row-gap: 3px; }
.fmtbar select { max-width: 130px; }
#fFont { width: 118px; } #fLine { width: 106px; } #fZoom { width: 74px; } #fBlock { width: 112px; }
.fmtbar button { min-width: 28px; padding: 3px 6px; }

/* ── left sidebar: Sources | Scripts ── */
.side { width: 300px; display: flex; flex-direction: column; overflow: hidden; }
.stabs { display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.stabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 4px; cursor: pointer; color: var(--muted); font-size: 12.5px; }
.stabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.stabs .cnt { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 11px; margin-left: 4px; }
.spane { display: none; overflow: auto; flex: 1; min-height: 0; } .spane.on { display: block; }
.src-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px 4px; }
.src-hint { padding: 0 10px 6px; margin: 0; font-size: 11.5px; line-height: 1.4; }
.src-list { padding: 0 8px 12px; }
.srow { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; background: var(--panel2); font-size: 12px; cursor: pointer; }
.srow:hover { border-color: var(--accent); }
.srow .sh { display: flex; align-items: baseline; gap: 6px; } .srow .si { flex: 0 0 auto; }
.srow .stitle { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.srow .stitle:hover { text-decoration: underline; } .srow .sline { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; }
.srow .sanch { color: var(--muted); font-style: italic; margin-top: 2px; }
.srow .sq { color: var(--text); opacity: .85; margin-top: 2px; border-left: 2px solid var(--line); padding-left: 6px; }
.srow .sv { margin-top: 2px; } .srow .sv a { color: var(--bad); text-decoration: none; }
.srow.intext { border-style: dashed; } .srow.link { opacity: .85; }
.smiss .mrow { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; cursor: pointer; border-left: 3px solid var(--warn); background: var(--panel2); margin-bottom: 4px; }
.vbadge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 0 5px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); vertical-align: middle; }
.vbadge.VERIFIED { color: var(--ok); border-color: var(--ok); } .vbadge.LIKELY { color: var(--warn); border-color: var(--warn); } .vbadge.PARTIAL { color: var(--warn); border-color: var(--warn); border-style: dashed; } .vbadge.CONTRADICTED { color: var(--bad); border-color: var(--bad); }
.qok { color: var(--ok); font-size: 11px; } .qbad { color: var(--bad); font-size: 11px; } .qwarn { color: var(--warn); font-size: 11px; }
.tierb { display: inline-block; min-width: 16px; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); vertical-align: middle; }
.fst { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-right: 4px; vertical-align: middle; }
.fst.ok { color: var(--ok); border-color: var(--ok); } .fst.bad { color: var(--warn); border-color: var(--warn); }
.fact.confirmed { border-left: 3px solid var(--ok); } .fact.weak { opacity: .8; }
.fact .yt a b { color: var(--text); font-family: var(--mono); font-weight: 600; margin-right: 2px; }
/* source cards in the margin */
.ccard.src { border-left: 3px solid var(--accent); }
.ccard.src.active { border-color: var(--accent); }
.ccard .st { font-size: 12.5px; margin: 2px 0; } .ccard .st a { color: var(--accent); text-decoration: none; } .ccard .st a:hover { text-decoration: underline; }
.ccard .cq { color: var(--text); opacity: .85; font-size: 12px; border-left: 2px solid var(--line); padding-left: 6px; margin: 3px 0; }
.ccard .cv { font-size: 12px; margin: 2px 0; } .ccard .cv a { color: var(--bad); text-decoration: none; }
.ccard .cin { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 12px; margin-bottom: 4px; }
.ProseMirror .cmt.src { background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom: 2px dotted var(--accent); }
.ProseMirror .cmt.src.active { background: color-mix(in srgb, var(--accent) 28%, transparent); }
/* ✦ ask button + quick-action menu */
.c-add.ask { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-size: 15px; }
.c-add.ask:hover { background: var(--accent); color: #fff; }
.askmenu { position: absolute; right: 354px; z-index: 30; width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px #0003; padding: 6px; display: flex; flex-direction: column; }
.askmenu .am-title { font-size: 11px; color: var(--muted); padding: 4px 8px 6px; }
.askmenu button { text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; color: var(--text); }
.askmenu button:hover { background: var(--panel2); }
.askmenu .am-sep { height: 1px; background: var(--line); margin: 4px 0; }
@media (max-width: 1400px) { .askmenu { right: 294px; } }
/* rewrite suggestions (multi-line) */
.ProseMirror .sug.multi { border-bottom-style: dashed; }
.sugpop .sp-diff { max-height: 46vh; overflow: auto; }
/* chat toolbox + selection chip + mode */
.chat-tools { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 6px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-tools .quick, .chat-tools .toggles { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-tools button { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; color: var(--text); }
.chat-tools button:hover { border-color: var(--accent); }
.chat-tools .toggles button { color: var(--muted); }
.chat-tools .toggles button.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.selbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 6px; padding: 2px 4px 2px 8px; margin-bottom: 5px; }
.selbar .ico { background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 0 6px; }
.selchip { display: inline-block; font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: middle; }
.chat-actions select { padding: 2px 6px; font-size: 12px; }
.chat-actions #modeHint { flex: 1; margin-right: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-actions #chatState { margin-right: 0; white-space: nowrap; }
.toolchip.note { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.toolchip.note a { color: var(--accent); }
/* account (the sticky header is the containing block of the popover) */
.icon.avatar { width: 30px; height: 30px; border-radius: 50%; padding: 0; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: transparent; }
.icon.avatar.admin { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.acctpop { position: absolute; right: 14px; top: 44px; z-index: 40; width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 32px #0003; padding: 12px 14px; font-size: 13px; }
.acctpop .ap-name { font-weight: 700; font-size: 14px; }
.acctpop .ap-row { display: flex; justify-content: space-between; margin-top: 8px; } .acctpop .ap-row b { font-family: var(--mono); font-weight: 600; }
.acctpop .ap-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.acctpop input { width: 100%; margin-top: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
#usage.over { color: var(--warn); }