:root { --bg:#fff; --fg:#111; --muted:#6b7280; --line:#e5e7eb; --accent:#1f6feb; --accent-fg:#fff; --card:#f5f6f8; --danger:#dc2626; --block:#eef2ff; --spine:52px; --lane:min(80vw,340px); --bar:48px; --safe-b:env(safe-area-inset-bottom); }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --fg:#e6e6e6; --muted:#9a9a9a; --line:#2a2f3a; --card:#171a21; --block:#1e2538; } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action:manipulation; }
#app { height:100%; }
a { color:var(--accent); }
h1 { font-size:1.15rem; margin:0; font-weight:700; } h2 { font-size:1.15rem; margin:0 0 .5rem; } h3 { font-size:1rem; margin:0; }
p { margin:.3rem 0; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .center { text-align:center; } .error { color:var(--danger); }
button, .icon { font:inherit; border:0; border-radius:10px; padding:.55rem .9rem; background:var(--accent); color:var(--accent-fg); cursor:pointer; user-select:none; -webkit-user-select:none; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; line-height:1.2; }
button.secondary { background:var(--card); color:var(--fg); border:1px solid var(--line); }
button.link { background:none; color:var(--accent); padding:.2rem .3rem; } button.small { padding:.35rem .7rem; font-size:.88rem; }
button.danger { color:var(--danger); } button.big { width:100%; padding:.9rem; font-size:1.05rem; }
button:disabled { opacity:.5; }
/* square icon buttons: the glyph is an SVG centered by flex, never a text character */
.icon { width:38px; height:38px; padding:0; border-radius:50%; background:transparent; color:var(--fg); flex:0 0 auto; }
.icon:active, .icon.on { background:var(--card); }
.icon.like.on { color:#e11d48; } .icon.like b { font-size:.75rem; margin-left:-2px; }
button.plus { width:30px; height:30px; padding:0; border-radius:50%; background:var(--bg); color:var(--fg); border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.12); }
input, textarea, select { font:inherit; width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
input.code { font-size:1.6rem; letter-spacing:.4em; text-align:center; } input.emoji { width:4rem; }
label { display:block; margin:.5rem 0; font-size:.85rem; color:var(--muted); } label > input, label > textarea, label > select, label > div { margin-top:.2rem; }
label.check { display:flex; align-items:center; gap:.5rem; color:var(--fg); } label.check input { width:auto; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; margin:.5rem 0; } legend { font-size:.85rem; color:var(--muted); }
.row { display:flex; gap:.5rem; align-items:center; } .row > label { flex:1; } .row.between { justify-content:space-between; } .row.wrap { flex-wrap:wrap; }

/* home */
.page { max-width:640px; margin:0 auto; padding:1rem; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
.top { display:flex; justify-content:space-between; align-items:center; } .top h1 { font-size:1.5rem; }
.lede { color:var(--muted); margin-bottom:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.8rem; margin:.8rem 0; }
.plans { list-style:none; padding:0; margin:0; } .plans li a { display:flex; flex-direction:column; padding:.7rem .2rem; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }

/* plan: fixed app frame, header as small as possible, timeline takes the rest */
.plan { display:flex; flex-direction:column; height:100%; max-width:1100px; margin:0 auto; position:relative; overflow:hidden; }
.plan-head { border-bottom:1px solid var(--line); flex:0 0 auto; user-select:none; -webkit-user-select:none; }
.bar { display:flex; align-items:center; gap:.1rem; height:var(--bar); padding:0 .3rem 0 .1rem; }
.titles { flex:1; min-width:0; padding:0 .2rem; cursor:default; }
.titles h1, .meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { margin:0; font-size:.78rem; color:var(--muted); line-height:1.2; } .meta a { color:var(--muted); text-decoration:underline; }
.avatars { display:flex; align-items:center; margin-right:.2rem; } .avatar { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.65rem; display:grid; place-items:center; margin-left:-6px; border:2px solid var(--bg); }
.avatar.anon { background:var(--muted); } .dot-off { width:8px; height:8px; border-radius:50%; background:#f59e0b; margin-left:.3rem; }
.menu-wrap { position:relative; }
.menu { position:absolute; right:0; top:calc(100% + 2px); min-width:200px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.3rem; display:flex; flex-direction:column; z-index:30; box-shadow:0 8px 30px rgba(0,0,0,.18); }
.menu button { background:none; color:var(--fg); justify-content:flex-start; border-radius:8px; padding:.6rem .8rem; }
.menu button:active { background:var(--card); } .menu button.danger { color:var(--danger); }

/* floating chat / polls buttons */
.fabs { position:absolute; right:.9rem; bottom:calc(.9rem + var(--safe-b)); display:flex; flex-direction:column; gap:.6rem; z-index:25; }
.fab { width:52px; height:52px; border-radius:50%; padding:0; background:var(--bg); color:var(--fg); border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.18); position:relative; }
.fab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.fab .dot { position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#e11d48; border:2px solid var(--bg); }

/* overlay panel (chat / polls) — full height over the timeline */
.overlay { position:absolute; inset:0; background:var(--bg); z-index:20; display:flex; flex-direction:column; }
.overlay > .bar { border-bottom:1px solid var(--line); padding:0 .3rem 0 .9rem; justify-content:space-between; }
.overlay > .bar h2 { margin:0; }
.overlay .page { flex:1; height:auto; }

/* timeline */
.tl-scroll { flex:1; min-height:0; overflow:auto; scroll-snap-type:x mandatory; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.tl-inner { display:flex; min-width:max-content; position:relative; }
.spine { position:sticky; left:0; width:var(--spine); flex:0 0 var(--spine); background:var(--bg); z-index:5; border-right:1px solid var(--line); }
.spine .hour { position:absolute; right:5px; transform:translateY(-50%); font-size:.7rem; color:var(--muted); }
.spine .day { font-weight:700; color:var(--fg); font-size:.7rem; } .spine .lane-head.day { justify-content:flex-end; padding-right:5px; border-bottom:0; }
.lane { flex:0 0 var(--lane); width:var(--lane); scroll-snap-align:start; scroll-margin-left:var(--spine); border-right:1px solid var(--line); position:relative; }
.lane.main { background:linear-gradient(var(--card), var(--bg) 60px); }
.lane-head { position:sticky; top:0; height:44px; background:var(--bg); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 .15rem 0 .5rem; z-index:4; user-select:none; -webkit-user-select:none; }
.lane-title { display:flex; flex-direction:column; line-height:1.1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.lane-title b, .lane-title span { overflow:hidden; text-overflow:ellipsis; }
.lane-actions { display:flex; align-items:center; flex:0 0 auto; }
button.plus.after { position:absolute; left:50%; transform:translateX(-50%); z-index:2; }
.lane-body { position:relative; }
.block { position:absolute; left:4px; right:4px; border-radius:8px; background:var(--block); padding:3px 6px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); cursor:pointer; color:#111; font-size:.88rem; line-height:1.25; user-select:none; -webkit-user-select:none; }
@media (prefers-color-scheme: dark) { .block { color:var(--fg); } .block[style*="background"] { color:#111; } }
.block.overlaps { box-shadow:inset 0 0 0 2px #f59e0b; }
.block-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.block-meta { font-size:.75rem; opacity:.75; }
.badges { display:flex; flex-wrap:wrap; gap:.2rem; font-size:.72rem; margin-top:2px; }
.badge { background:rgba(0,0,0,.08); border-radius:6px; padding:0 4px; } .badge.ok { background:#16a34a; color:#fff; } .badge.res { background:#fde68a; color:#111; } .badge.edit { background:#f59e0b; color:#111; }
.gap { position:absolute; left:4px; right:4px; border:1px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.75rem; color:var(--muted); }
.empty { position:absolute; top:40px; left:0; right:0; }
.new-lane { display:flex; flex-direction:column; align-items:center; padding-top:.5rem; flex-basis:200px; width:200px; border-right:0; } .new-lane .lane-head { align-self:stretch; }
.new-lane button { margin-top:.6rem; }

/* dialogs: always centered, never bottom sheets */
.sheet-backdrop, .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem; }
.sheet, .modal { background:var(--bg); width:100%; max-width:480px; max-height:calc(100dvh - 2rem); overflow:auto; border-radius:16px; padding:1rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal { max-width:420px; padding:1.2rem; }
.stepper { display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; } .stepper button { padding:.45rem .6rem; background:var(--card); color:var(--fg); border:1px solid var(--line); flex:0 0 auto; min-width:44px; }
.stepper input { flex:1; min-width:6rem; } .stepper input[type=number] { flex:0 0 5rem; }
.row.actions { justify-content:flex-end; margin-top:.8rem; }
.swatches { display:flex; gap:.25rem; flex-wrap:wrap; } .swatch { width:26px; height:26px; border-radius:50%; border:2px solid var(--line); padding:0; color:var(--muted); } .swatch.on { border-color:var(--accent); }
.history { font-size:.85rem; padding-left:1rem; } .note { white-space:pre-wrap; }
button.like.on { color:#e11d48; }

/* polls */
.poll.closed { opacity:.8; } .option { border-top:1px solid var(--line); padding:.5rem 0; } .option.winner { background:rgba(22,163,74,.08); }
.votes { flex-wrap:wrap; margin-top:.3rem; } button.vote { background:var(--card); color:var(--fg); border:1px solid var(--line); padding:.3rem .6rem; font-size:.85rem; }
button.vote.on.yes { background:#16a34a; color:#fff; } button.vote.on.maybe { background:#f59e0b; color:#111; } button.vote.on.no { background:#dc2626; color:#fff; }
.close-row { margin-top:.6rem; } .close-row select { flex:1; }

/* chat */
.chat { flex:1; display:flex; flex-direction:column; min-height:0; }
.messages { flex:1; overflow:auto; padding:.6rem 1rem; -webkit-overflow-scrolling:touch; }
.msg { margin:.4rem 0; max-width:85%; } .msg.mine { margin-left:auto; } .msg-text { background:var(--card); border-radius:12px; padding:.45rem .7rem; white-space:pre-wrap; word-break:break-word; }
.msg.mine .msg-text { background:var(--accent); color:#fff; } .msg.mine .msg-text a { color:#fff; }
.chip { background:var(--block); color:#111; border-radius:8px; padding:.1rem .5rem; font-size:.8rem; margin-bottom:.2rem; }
.composer { padding:.5rem 1rem calc(.5rem + var(--safe-b)); border-top:1px solid var(--line); }
.typing { font-style:italic; }
.banner { background:var(--card); border-top:1px solid var(--line); padding:.5rem 1rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.plan > .banner { position:absolute; left:0; right:0; bottom:0; z-index:26; }
.toast { position:fixed; bottom:calc(5.5rem + var(--safe-b)); left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:.5rem 1rem; border-radius:20px; z-index:60; }