.room-topic-bar{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0;padding:10px 20px;border-bottom:1px solid #2b4050;background:#0d1922;z-index:2}
.room-topic-list{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#3e586c transparent;scroll-padding-inline:4px;padding:3px 2px 5px;overscroll-behavior-x:contain}
.room-topic{--topic-color:#70b8d6;display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px;max-width:280px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--topic-color) 38%,transparent);border-radius:10px;background:color-mix(in srgb,var(--topic-color) 12%,transparent);color:#eaf2f7;white-space:nowrap;cursor:pointer}
.room-topic[aria-selected=true],.room-topic[aria-selected=true]:hover{background:color-mix(in srgb,var(--topic-color) 48%,#0d1922);border-color:color-mix(in srgb,var(--topic-color) 78%,white);box-shadow:inset 0 0 0 1px var(--topic-color),inset 0 -4px var(--topic-color);color:#fff}.room-topic[aria-selected=true] .room-topic-name{font-weight:800}.room-topic[aria-selected=true] .room-topic-count{background:#0005;color:#fff;font-weight:700}
.room-topic:hover{background:color-mix(in srgb,var(--topic-color) 22%,transparent)}.room-topic-all{background:#ffffff08;border-color:#62727c;color:#e1e6e9}.room-topic-all:hover{background:#ffffff15}.room-topic-all[aria-selected=true],.room-topic-all[aria-selected=true]:hover{background:#435461;border-color:#edf3f7;box-shadow:inset 0 0 0 1px #edf3f7,inset 0 -4px #edf3f7}.room-topic-icon{min-width:18px;text-align:center;font-size:17px}.room-topic-name{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:650}.room-topic-count{min-width:20px;border-radius:6px;padding:2px 5px;background:#07101855;color:#e1eaf0;font-size:12px;font-variant-numeric:tabular-nums}
.room-topic-actions{display:flex;gap:4px;flex:none;padding-bottom:2px}.topic-action{width:44px;min-height:44px;flex:none;border:1px solid #385260;border-radius:9px;background:#152835;color:#dbeaf2;font-size:23px;cursor:pointer}.topic-action:hover{background:#213b4c}.room-topic-bar :focus-visible,.room-topic-dialog :focus-visible{outline:2px solid #ffcf72;outline-offset:2px}.room-topic-bar button:disabled{cursor:wait;opacity:.65}
.room-topic-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px;border:1px solid #446073;border-radius:16px;background:#142632;color:#e8f0f5;box-shadow:0 20px 80px #0007}.room-topic-dialog::backdrop{background:#020810b3}.room-topic-dialog form{display:grid;gap:18px}.room-topic-dialog h2{margin:0;font-size:21px}.topic-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px;font-weight:650}.topic-field input{box-sizing:border-box;width:100%;height:44px;min-width:0;border:1px solid #3e5a6d;border-radius:8px;background:#0d1b24;color:#ecf3f6;padding:10px;font:inherit}.topic-field input[type=color]{padding:5px;cursor:pointer}.topic-editor-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.topic-palette{display:flex;gap:10px;flex-wrap:wrap}.topic-palette button{width:36px;height:36px;border:3px solid #ffffff22;border-radius:50%;cursor:pointer}.topic-form-status{margin:0;color:#ffca8d;font-size:13px;min-height:0}.topic-form-status:empty{display:none}.topic-editor-actions{display:flex;justify-content:flex-end;gap:10px}.topic-editor-actions button{min-height:44px;padding:10px 20px;border-radius:8px;border:1px solid #456172;background:#203c4d;color:#eaf2f6;cursor:pointer}.topic-editor-actions .primary{background:#edac63;border-color:#edac63;color:#18232a;font-weight:700}
@media(max-width:700px){.room-topic-bar{padding:7px 10px;gap:6px}.room-topic{max-width:210px;padding:7px 10px;gap:6px}.room-topic-name{font-size:13px}.room-topic-dialog{padding:20px}.room-topic-actions{gap:3px}}
@media(prefers-reduced-motion:reduce){.room-topic-list{scroll-behavior:auto}}
.topic-palette button{width:44px;height:44px;border-width:5px}.topic-color-conflict{display:grid;gap:10px;padding:14px;border:1px solid #bc8c4b;border-radius:10px;background:#b77c2110}.topic-color-conflict[hidden]{display:none}.topic-color-conflict h3{margin:0;color:#ffcd87;font-size:14px}.topic-color-conflict.is-resolved{border-color:#6d9e85}.topic-color-conflict.is-resolved h3{color:#add9bd}.topic-conflict-chip{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 9px;border-radius:7px;background:color-mix(in srgb,var(--topic-color) 18%,transparent);border:1px solid color-mix(in srgb,var(--topic-color) 60%,transparent)}.topic-conflict-dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--topic-color)}.topic-conflict-name{overflow-wrap:anywhere;font-size:13px}.topic-recolor-button{min-height:44px;border:1px solid #5c7381;border-radius:8px;background:#203c4d;color:#eaf2f6;font:inherit;cursor:pointer}.topic-recolor-button[hidden]{display:none}.topic-recolor-status{margin:0;color:#ffcd87;font-size:12px}.topic-recolor-status:empty{display:none}.topic-icon-fallback{font-size:25px;min-height:44px}.room-topic-dialog button:disabled{opacity:.6;cursor:wait}