:root { color-scheme: dark; --canvas:#000; --chrome:#101010; --selected:#202020; --hover:#141414; --text:#f2f2f2; --muted:#929292; --accent:#3390ff; --line:#1a1a1a; --sidebar:clamp(300px,35vw,408px); font-family:"Segoe UI",system-ui,sans-serif; font-size:14px; }
:root[data-theme="light"] { color-scheme:light; --canvas:#fff; --chrome:#f1f3f5; --selected:#dceafa; --hover:#f3f5f7; --text:#17191c; --muted:#62676c; --line:#e5e7eb; --accent:#1262bb; }
* { box-sizing:border-box; } [hidden] { display:none !important; } html,body { margin:0; width:100%; height:100%; background:var(--canvas); color:var(--text); } body { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); overflow:hidden; } a { color:var(--accent); text-decoration:none; } button,input { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; } button { color:inherit; cursor:pointer; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .skip-link { position:fixed; top:-70px; left:12px; z-index:20; padding:12px; background:var(--chrome); } .skip-link:focus { top:10px; }
.sidebar { min-width:0; overflow:auto; height:100dvh; background:var(--canvas); } .sidebar-header { height:80px; display:flex; align-items:center; padding:0 24px 0 60px; } h1,h2 { margin:0; font-size:15px; font-weight:600; line-height:24px; } .sidebar-header span,.conversation-header span { color:var(--muted); line-height:22px; } .topic-list { padding:6px 0; } .topic-row { display:flex; align-items:center; height:68px; padding:8px 12px; gap:14px; color:var(--text); } .topic-row:hover { background:var(--hover); } .topic-row.selected { background:var(--selected); } .topic-icon { width:16px; flex-shrink:0; text-align:center; font-size:22px; color:var(--muted); } .topic-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; } .topic-copy strong { font-weight:500; } .topic-copy span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); } .topic-row small { color:var(--muted); font-size:12px; align-self:flex-start; padding-top:4px; } .sidebar-note { color:var(--muted); font-size:12px; line-height:1.6; padding:28px 16px; max-width:340px; }
.conversation { min-width:0; height:100dvh; display:flex; flex-direction:column; } .conversation-header { height:80px; flex-shrink:0; padding:0 24px; display:flex; align-items:center; gap:12px; } .heading { flex:1; min-width:0; } h2 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .theme-toggle { border:0; background:none; color:var(--muted); padding:10px; font-size:22px; } .topics-toggle { display:none; font-size:32px; color:var(--text); min-width:32px; text-align:center; } .page-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 24px 12px; } .search { display:flex; align-items:center; gap:8px; color:var(--muted); max-width:420px; flex:1; } .search input { background:var(--chrome); color:var(--text); border:1px solid var(--line); border-radius:7px; padding:8px 12px; min-width:0; width:100%; } .page-indicator { color:var(--muted); font-size:12px; } .feed-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--selected) transparent; padding:0 16px 30px 62px; } .message-column { max-width:474px; min-width:0; } .date-break { display:flex; justify-content:center; margin:12px 0; } .date-break time { border-radius:14px; padding:5px 11px; color:var(--muted); background:var(--chrome); font-size:12px; } .message { position:relative; margin:0 0 5px; min-width:0; } .avatar { position:absolute; bottom:0; left:-48px; width:36px; height:36px; border-radius:50%; background:var(--selected); color:var(--muted); display:grid; place-items:center; font-size:14px; } .media-card { overflow:hidden; border-radius:18px; background:var(--chrome); min-width:0; } .image-link { display:block; position:relative; min-height:160px; } .media-card img,.media-card video { display:block; width:100%; max-width:100%; height:auto; min-height:220px; object-fit:contain; background:var(--chrome); } .media-card img:not([src]),.media-card video:not([src]) { aspect-ratio:4/3; } .caption { padding:8px 12px 0; margin:0; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; } .message-meta { min-height:27px; display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:3px 12px 7px; color:var(--muted); font-size:11px; } .attribution { padding:8px 12px; color:var(--muted); font-size:12px; } .pending { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:20px; color:var(--muted); text-align:center; } .pending>span:first-child { font-size:28px; } .pending strong { font-weight:500; color:var(--text); } .pending>span:last-child { font-size:12px; } .media-error { display:block; color:var(--muted); padding:16px; font-size:13px; } .file-link { display:block; padding:25px 16px; } .empty-state { padding:24px 12px; color:var(--muted); text-align:center; } .pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:28px 4px; font-size:13px; color:var(--muted); } .pagination a { padding:10px 0; }
dialog { border:0; padding:48px 16px 16px; background:var(--canvas); color:var(--text); max-width:100vw; max-height:100dvh; border-radius:10px; } dialog::backdrop { background:#000e; } dialog img { display:block; max-width:calc(100vw - 40px); max-height:calc(100dvh - 90px); object-fit:contain; } .viewer-close { position:absolute; top:4px; right:8px; background:transparent; border:0; font-size:32px; min-width:44px; min-height:44px; }
@media (max-width: 800px) { body { display:block; } .sidebar { display:none; width:100%; } .conversation { width:100%; } .conversation-header { height:60px; padding:0 10px; } .topics-toggle { display:block; } body.topics-open .sidebar { display:block; } body.topics-open .conversation { display:none; } body:has(#topics:target) .sidebar { display:block; } body:has(#topics:target) .conversation { display:none; } .sidebar-header { height:60px; padding-left:42px; } .page-tools { padding:6px 12px 10px; } .feed-scroll { padding:0 6px 20px; } .message-column { width:100%; max-width:474px; margin:0 auto; } .avatar { display:none; } .media-card img,.media-card video { min-height:180px; } .media-card { border-radius:16px; } }
/* One clipped bubble, square internal tiles and stable portrait rows. */
.message-album { max-width:445px; }
.album-grid { display:flex; flex-direction:column; gap:4px; background:var(--chrome); }
.album-grid + .album-grid { margin-top:4px; }
.album-row { display:grid; gap:4px; min-width:0; }
.album-columns-1 { grid-template-columns:minmax(0,1fr); }
.album-columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.album-columns-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.album-tile { position:relative; min-width:0; overflow:hidden; aspect-ratio:3/4; }
.album-grid[data-shape="square"] .album-tile { aspect-ratio:1; }
.album-grid[data-shape="landscape"] .album-tile { aspect-ratio:4/3; }
.message-album .media-card > .caption:first-child { padding-bottom:8px; }
.album-tile .image-link { width:100%; height:100%; min-height:0; }
.album-tile img,.album-tile video,.album-tile img:not([src]),.album-tile video:not([src]) { width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:cover; border-radius:0; }
.album-tile .pending { width:100%; height:100%; min-height:0; padding:12px; font-size:12px; }
.album-tile .media-error { position:absolute; inset:auto 0 0; padding:6px; background:var(--chrome); }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }