:root { --bg: #000; --panel: #16181c; --line: #2f3336; --text: #e7e9ea; --muted: #71767b; --blue: #1d9bf0; --warn: #ffd400; --bad: #f4212e;
    --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hdr: 53px; }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
  a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
  svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
  .app { display: grid; grid-template-columns: 68px 1fr; min-height: 100vh; }
  .rail { position: sticky; top: 0; height: 100vh; width: 68px; padding: 8px 10px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); z-index: 8; transition: width .18s; overflow: hidden; }
  .rail:hover { width: 220px; }
  .rail .lbl { opacity: 0; white-space: nowrap; transition: opacity .12s; } .rail:hover .lbl { opacity: 1; }
  .brand { padding: 14px 12px; font-weight: 800; font-size: 22px; text-align: left; }
  .nav a { display: flex; align-items: center; gap: 18px; padding: 11px; border-radius: 999px; color: var(--text); font-size: 19px; position: relative; }
  .nav a:hover { background: #181818; text-decoration: none; } .nav a.active { font-weight: 700; }
  .nav svg { width: 26px; height: 26px; flex: none; }
  .nav .badge { position: absolute; left: 26px; top: 6px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
  .me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 8px 4px; } .me .avatar { width: 36px; height: 36px; font-size: 14px; }
  .me small { color: var(--muted); display: block; }
  .col { width: min(640px, 100%); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; }
  .top { position: sticky; top: 0; z-index: 5; height: var(--hdr); backdrop-filter: blur(12px); background: rgba(0,0,0,.72); border-bottom: 1px solid var(--line); padding: 0 16px; display: flex; align-items: center; gap: 10px; }
  .top h1 { margin: 0; font-size: 20px; } .top .sub { color: var(--muted); font-size: 13px; }
  .card { border-bottom: 1px solid var(--line); transition: opacity .25s, transform .25s; }
  .card.leaving { opacity: 0; transform: translateX(24px); }
  .src { position: sticky; top: var(--hdr); z-index: 3; background: var(--bg); padding: 12px 16px 8px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; box-shadow: 0 8px 12px -10px #000; }
  .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px; }
  .who { display: flex; gap: 6px; align-items: center; color: var(--muted); flex-wrap: wrap; }
  .who b { color: var(--text); } .who .sp { flex: 1; }
  .who .tools { display: flex; gap: 2px; }
  .ib { color: var(--muted); padding: 4px; border-radius: 999px; display: inline-flex; }
  .ib:hover { color: var(--text); background: #1c1c1c; }
  .ib.on { color: var(--warn); } .ib.on svg { fill: currentColor; }
  .ib:disabled { opacity: .35; cursor: default; }
  .skip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--muted); font-size: 13px; padding: 3px 10px 3px 7px; border: 1px solid var(--line); border-radius: 999px; }
  .skip svg { width: 14px; height: 14px; } .skip:hover { color: var(--text); border-color: var(--muted); }
  .body p { margin: 4px 0 6px; } .body p:last-child { margin-bottom: 0; }
  .meta { color: var(--muted); font-size: 13px; display: flex; gap: 18px; margin-top: 6px; align-items: center; }
  .meta svg { width: 15px; height: 15px; }
  .notebox { width: 100%; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text); padding: 6px 0; font: inherit; resize: none; outline: none; }
  .notebox::placeholder { color: var(--muted); }
  .idea .avatar { background: #2a2a2a; color: var(--muted); }
  /* options as replies, indented under the source like X */
  .opts { padding: 0 16px 0 68px; }
  .opt { padding: 12px 0; border-top: 1px solid var(--line); }
  .opt .oh { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
  .opt .oh .sp { flex: 1; }
  .thinker { color: var(--text); font-weight: 600; }
  .source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:13px; }
  .opt .text { margin-top: 6px; } .opt .text p { margin: 0 0 10px; } .opt .text p:last-child { margin-bottom: 0; }
  /* the last slot of every thread: your reply box, like X's */
  .compose { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
  .compose .avatar { background: #3b6ea5; }
  .field { width: 100%; min-height: 44px; background: transparent; color: var(--text); border: 0; outline: none; resize: none; overflow: hidden; font: 17px/1.45 var(--font); padding: 8px 0; }
  .field::placeholder { color: var(--muted); }
  .row { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; padding-top: 6px; border-top: 1px solid var(--line); }
  .row .sp { flex: 1; }
  .row .using { color: var(--muted); }
  .count { font-variant-numeric: tabular-nums; } .count.over { color: var(--warn); }   /* over 280 is information, a long post still goes out */
  .post-btn { background: var(--text); color: #000; border-radius: 999px; padding: 7px 16px; font-weight: 700; }
  .post-btn:disabled { opacity: .45; cursor: default; }
  /* empty and unfocused, the box is one line like X's: avatar, placeholder, button */
  .compose.compact { align-items: center; }
  .compose.compact .cbody { display: flex; align-items: center; gap: 10px; }
  .compose.compact .field { flex: 1; min-height: 0; height: auto !important; padding: 6px 0; }
  .compose.compact .row { border: 0; padding: 0; }
  .compose.compact .using, .compose.compact .count { display: none; }
  /* toast with a draining timer for Deshacer */
  .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #1d1f23; border: 1px solid var(--line); color: var(--text); padding: 10px 14px 12px; border-radius: 10px; display: none; z-index: 30; gap: 14px; align-items: center; overflow: hidden; }
  .toast.on { display: flex; } .toast a { font-weight: 700; }
  .toast .tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2a2d31; }
  .toast .tbar i { display: block; height: 100%; width: 100%; background: var(--blue); }
  @keyframes drain { from { width: 100%; } to { width: 0; } }
  /* challa */
  .challa { position: fixed; z-index: 40; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; animation: pop .95s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes pop { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
  .empty { padding: 80px 24px; color: var(--muted); text-align: center; font-size: 17px; }
  .empty b { color: var(--text); display: block; font-size: 22px; margin-bottom: 8px; }
  .library-tools { display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
  .library-tools input, .library-tools select { min-width:0; flex:1; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:9px 12px; font:inherit; outline:none; }
  .library-tools select { flex:0 0 155px; } .library-tools input:focus, .library-tools select:focus { border-color:var(--blue); }
  .chapter-result { display:block; padding:16px; border-bottom:1px solid var(--line); color:var(--text); }
  .chapter-result:hover { background:#0b0b0b; text-decoration:none; } .chapter-result b, .chapter-result span, .chapter-result small { display:block; }
  .chapter-result b { font-size:17px; margin:3px 0; } .chapter-result span, .chapter-result small { color:var(--muted); font-size:12px; }
  .chapter-result p { margin:8px 0; color:var(--muted); } .chapter-date { color:var(--blue) !important; }
  .chapter { padding:24px 20px 60px; } .chapter h1 { font-size:27px; line-height:1.2; margin:6px 0 12px; }
  .chapter-kicker { color:var(--muted); font-size:13px; } .chapter-summary { font-size:17px; line-height:1.5; }
  .chapter-tags { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; } .chapter-tags span { border:1px solid var(--line); border-radius:999px; color:var(--muted); padding:2px 8px; font-size:12px; }
  .transcript { margin-top:30px; } .transcript h2 { font-size:18px; border-bottom:1px solid var(--line); padding-bottom:8px; }
  .turn { padding:12px 0; border-bottom:1px solid #202326; } .turn.excluded { background:#121212; padding:12px; margin:0 -12px; color:var(--muted); }
  .turn.unknown { border-left:3px solid var(--warn); padding-left:10px; } .turn-meta { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
  .turn-meta b { color:var(--text); } .turn-meta em { color:var(--warn); font-style:normal; } .turn p { margin:6px 0 0; white-space:pre-wrap; }
  .muted { color:var(--muted); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .tabs { display: none; }
  @media (max-width: 760px) { .app { grid-template-columns: 1fr; } .rail { display: none; } .col { border: 0; padding-bottom: 64px; }
    .tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.92); border-top: 1px solid var(--line); z-index: 10; }
    .tabs a { flex: 1; text-align: center; padding: 12px 0; color: var(--muted); } .tabs a.active { color: var(--text); }
    .opts { padding-left: 16px; } .field { font-size: 16px; } .library-tools { flex-wrap:wrap; } .library-tools select { flex:1; } .library-tools .post-btn { flex:0 0 auto; } .chapter { padding:20px 16px 50px; } }

[hidden] { display:none !important; }
.src.too-tall {position:relative;top:0;}
#login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-box { width:min(360px,100%); }
.login-box p { color:var(--muted); }
.login-box label { display:block; margin-bottom:8px; }
.login-box input { width:100%; padding:12px; font:17px var(--font); border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel); margin-bottom:18px; }
#auth-error { color:var(--bad); }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to {transform:rotate(360deg)} }
button:disabled {cursor:default;opacity:.5;}
.toast {max-width:calc(100vw - 24px);width:max-content;}
@media(max-width:760px){.toast{bottom:calc(70px + env(safe-area-inset-bottom));}.tabs{padding-bottom:env(safe-area-inset-bottom);}.col{padding-bottom:calc(64px + env(safe-area-inset-bottom));}}

/* Manual X handoff: copied is distinct from published or liked. */
.copy-state { color:#66c9a3; font-size:12px; }
.skip.copied-clear { color:#9be6c7; border-color:#3b9472; background:#102a20; font-weight:600; }
.skip.copied-clear:hover { background:#1b4131; border-color:#66c9a3; }
.copied-card > .src { box-shadow:inset 3px 0 #3b9472; }
.draft-save { color:var(--muted); font-size:11px; min-height:16px; margin:2px 0 6px; }
.compose.compact .draft-save { display:none; }
.cbody { min-width:0; }
.compose .row { flex-wrap:wrap; gap:8px; }
.compose .post-btn { white-space:nowrap; }
.compose.compact .field { min-width:0; }
@media(max-width:420px) {
  .compose { grid-template-columns:28px minmax(0,1fr); gap:8px; }
  .compose > .avatar { width:28px; height:28px; }
  .compose.compact .cbody { flex-wrap:wrap; }
  .compose.compact .field { flex-basis:100%; }
  .compose.compact .row { margin-left:auto; }
}