* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: #000; color: #ccc;
             font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; }
body { display: flex; flex-direction: column; }

/* min-height:0 lets main shrink below its content's natural size — without
   it, a tall video pushes the footer (and its unmute button) below the
   viewport. flex-shrink:0 on footer pins it visible. */
main { flex: 1; min-height: 0; display: grid; place-items: center; position: relative;
       background: #000; overflow: hidden; }
video { max-width: 100%; max-height: 100%; background: #000; display: block; }

#overlay { position: absolute; top: 12px; left: 14px;
           background: rgba(0,0,0,0.6); padding: 4px 10px;
           color: #ffea00; font-size: 0.85rem; pointer-events: none; }
#ch-name { font-weight: bold; }
#status { color: #888; font-size: 0.75rem; }
#watchers { position: absolute; top: 12px; right: 14px;
            background: rgba(0,0,0,0.6); padding: 4px 10px;
            color: #ffea00; font-size: 0.85rem; pointer-events: none; }

footer { padding: 8px 12px; border-top: 1px solid #222;
         display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
         flex-shrink: 0; position: relative; z-index: 10; }

#channels { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.ch-btn { background: #1a1a1d; color: #ccc; border: 1px solid #333;
          padding: 6px 12px; cursor: pointer; font: inherit; font-size: 0.85rem;
          display: flex; gap: 8px; align-items: baseline; }
.ch-btn:hover:not(:disabled) { background: #2a2a2d; border-color: #ffea00; }
.ch-btn.active { background: #4a4205; color: #ffea00; border-color: #ffea00; }
.ch-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ch-btn .num { color: #555; font-size: 0.7rem; }
.ch-btn .lbl { font-weight: bold; }
.ch-btn .ct  { color: #666; font-size: 0.7rem; }

/* category color hints — match clonkornot palette */
.ch-btn[data-rating="nonclonk"]     .lbl { color: #888 }
.ch-btn[data-rating="offclonk"]     .lbl { color: #aaa }
.ch-btn[data-rating="wrongclonk"]   .lbl { color: #d99 }
.ch-btn[data-rating="preclonk"]     .lbl { color: #ffd }
.ch-btn[data-rating="clonk"]        .lbl { color: #d4ad00 }
.ch-btn[data-rating="superclonk"]   .lbl { color: #ffea00 }
.ch-btn[data-rating="megaclonk"]    .lbl { color: #ff8800 }
.ch-btn[data-rating="strangeclonk"] .lbl { color: #c44dff }

#controls { display: flex; gap: 6px; }
#controls button { background: #222; color: #ccc; border: 1px solid #444;
                   padding: 4px 10px; cursor: pointer; font: inherit; font-size: 0.85rem; }
#controls button:hover { background: #333; }

/* CHAT — floating panel bottom-right of <main>, over the video. */
#chat { position: absolute; right: 12px; bottom: 12px; width: 280px;
        max-height: 60%; display: flex; flex-direction: column;
        background: rgba(0,0,0,0.72); border: 1px solid #333;
        font-size: 0.8rem; color: #ddd; }
#chat.collapsed > :not(.chat-head) { display: none; }
#chat.collapsed { width: auto; }
.chat-head { display: flex; align-items: center; gap: 6px;
             padding: 4px 8px; background: #1a1a1d; border-bottom: 1px solid #333; }
.chat-head span { color: #888; font-size: 0.7rem; }
#chat-nick { background: #0e0e10; color: #ffea00; border: 1px solid #333;
             font: inherit; font-size: 0.75rem; padding: 1px 4px; width: 90px; }
#chat-toggle { margin-left: auto; background: #2a2a2d; color: #ccc;
               border: 1px solid #444; cursor: pointer; font: inherit;
               padding: 0 6px; line-height: 1; }
#chat-msgs { flex: 1; overflow-y: auto; padding: 4px 8px;
             min-height: 80px; max-height: 240px; }
.chat-msg { line-height: 1.3; word-wrap: break-word;
            margin-bottom: 2px; }
.chat-msg .ts   { color: #555; font-size: 0.65rem; margin-right: 4px; }
.chat-msg .nick { color: #ffea00; margin-right: 4px; }
.chat-msg.me .nick { color: #ff8800; }
.chat-msg .text { color: #ddd; }
#chat-form { display: flex; gap: 4px; padding: 4px 6px; border-top: 1px solid #333; }
#chat-input { flex: 1; background: #0e0e10; color: #ddd; border: 1px solid #333;
              font: inherit; padding: 3px 6px; }
#chat-form button { background: #2a2a2d; color: #ddd; border: 1px solid #444;
                    cursor: pointer; font: inherit; padding: 2px 8px; }