.topic-panel { position:fixed; top:auto; right:auto; margin:0; max-height: min(300px, 55dvh); box-sizing: border-box; overflow-y: auto; padding: 7px 16px; border: 1px solid rgba(216,177,116,.16); border-radius: 16px; background: rgba(29,27,23,.97); box-shadow:0 8px 32px rgba(0,0,0,.2); animation: topics-in 180ms ease-out; }
.topic-panel::backdrop { background: rgba(5, 5, 9, .08); }
.topic-panel[hidden] { display: none; }
.topic-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:13px; color:var(--muted, #aca69e); }
.topic-heading button, .topic-toggle { border:0; background:transparent; color:var(--accent, #d8b174); cursor:pointer; padding:8px; }
.topic-toggle { flex-shrink:0; font-size:13px; white-space:nowrap; }
.topic-close { position:absolute; top:5px; right:5px; width:28px; height:28px; border:0; background:transparent; color:#aaa499; font-size:21px; cursor:pointer; }
.topic-option { display:flex; align-items:center; gap:10px; width:100%; padding:13px 20px 13px 0; border:0; border-bottom:1px solid rgba(216,177,116,.10); background:transparent; color:#f6f1e9; font:inherit; font-size:14px; line-height:1.5; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.topic-option::before { content:'·'; color:#d8b174; font-size:22px; flex-shrink:0; }
.topic-option:last-child { border-bottom:0; }
.topic-option:hover { background:rgba(216,177,116,.08); }
.topic-option:disabled { opacity:.5; cursor:default; }
.topic-toggle:focus-visible, .topic-option:focus-visible, .topic-heading button:focus-visible { outline:2px solid #d8b174; outline-offset:2px; }
@keyframes topics-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .topic-panel { animation:none; } }
@media(max-width:600px) { .topic-toggle { font-size:12px; padding:4px; } }