:root{--bg: #0d0f14;--surface: #161a22;--surface-alt: #1e2430;--border: #2a3240;--text: #e8ecf3;--muted: #94a0b4;--accent: #6c8cff;--danger: #ff6b6b;--ok: #4ade80;--warn: #fbbf24;--radius: 12px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-alt);color:var(--text);border-radius:var(--radius);padding:.55rem 1rem;font:inherit;cursor:pointer;min-height:44px}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:var(--accent);border-color:var(--accent);color:#0d0f14;font-weight:600}.gate{min-height:100%;display:grid;place-items:center;padding:1.5rem}.gate__card{width:min(380px,100%);display:flex;flex-direction:column;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem}.gate__title{margin:0;font-size:1.75rem}.gate__subtitle{margin:0 0 .5rem;color:var(--muted)}.gate__error{margin:0;padding:.55rem .75rem;border:1px solid var(--danger);border-radius:var(--radius);color:var(--danger);font-size:.9rem}.gate__input,.chat__input{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.7rem .9rem;font:inherit;min-height:44px;width:100%}.gate__input:focus-visible,.chat__input:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;gap:1rem;padding:1rem}.app__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.app__brand{margin:0;font-size:1.25rem;letter-spacing:.02em}.app__meta{display:flex;flex-wrap:wrap;gap:.5rem}.badge{border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;color:var(--muted);background:var(--surface)}.badge--ok{color:var(--ok);border-color:var(--ok)}.badge--warn{color:var(--warn);border-color:var(--warn)}.app__error{margin:0;color:var(--danger)}.app__layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:stretch;flex:1;min-height:0;overflow:hidden}.app__main{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;overflow-y:auto}.app__side{display:flex;min-width:0;min-height:0;height:100%}.player{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}.player__stage{position:relative;background:#000;aspect-ratio:16 / 9}.player__video{width:100%;height:100%;display:block}.player__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:#0d0f14b8;text-align:center;padding:1rem}.player__overlay--idle{color:var(--muted)}.player__spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.player__spinner{animation:none}}.player__tracks{display:flex;flex-wrap:wrap;gap:.75rem;padding:.75rem .75rem 0}.player__track-field{display:flex;align-items:center;gap:.5rem;min-width:0}.player__track-label{color:var(--muted);font-size:.85rem;white-space:nowrap}.player__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:.9rem;min-height:44px;padding:.5rem .75rem;max-width:14rem;cursor:pointer}.player__select:hover{border-color:var(--accent)}.player__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.player__bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem}.player__status{color:var(--muted);font-size:.9rem}.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}.catalogue__item{display:flex;align-items:center;gap:.6rem;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.6rem .75rem;font:inherit;cursor:pointer;min-height:44px}.catalogue__item:disabled{opacity:.4;cursor:not-allowed}.catalogue__item--active{border-color:var(--accent)}.catalogue__order{color:var(--muted);font-variant-numeric:tabular-nums}.catalogue__title{font-size:.9rem}.chat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.chat__header{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600}.chat__stream{position:relative;flex:1;min-height:0;display:flex}.chat__messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.chat__jump{position:absolute;left:50%;bottom:.75rem;transform:translate(-50%);border:1px solid var(--accent);background:var(--accent);color:#0d0f14;border-radius:999px;padding:.35rem .9rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;box-shadow:0 6px 18px #00000073}.chat__empty{color:var(--muted);margin:auto}.chat__message{background:var(--surface-alt);border-radius:var(--radius);padding:.5rem .7rem;max-width:85%}.chat__message--own{align-self:flex-end;background:#24304d}.chat__author{font-size:.75rem;color:var(--muted)}.chat__body{margin:.15rem 0;overflow-wrap:anywhere}.chat__time{font-size:.7rem;color:var(--muted)}.chat__composer-shell{position:relative;border-top:1px solid var(--border)}.chat__composer{display:flex;align-items:center;gap:.5rem;padding:.75rem}.chat__icon-button{flex:0 0 auto;padding:.55rem .7rem;line-height:1}.chat__alert{display:flex;align-items:center;gap:.5rem;margin:0;padding:.5rem .75rem;font-size:.85rem;color:var(--danger)}.chat__alert--muted{color:var(--muted)}.chat__retry{border:1px solid var(--border);background:var(--surface-alt);color:var(--text);border-radius:999px;padding:.15rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}.chat__recorder{display:flex;flex:1;align-items:center;gap:.5rem;min-width:0}.chat__rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1.2s ease-in-out infinite}.chat__rec-time{font-variant-numeric:tabular-nums;color:var(--muted)}@keyframes pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.chat__rec-dot{animation:none}}.audio{display:flex;align-items:center;gap:.5rem;margin:.25rem 0;min-width:190px}.audio__toggle{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.75rem;line-height:1;cursor:pointer}.audio__track{flex:1;height:6px;border-radius:999px;background:var(--border);cursor:pointer;touch-action:none}.audio__track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.audio__progress{height:100%;border-radius:999px;background:var(--accent)}.audio__time{flex:0 0 auto;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}.emoji-popover{position:absolute;bottom:calc(100% + .5rem);right:.75rem;z-index:20;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px #0000008c}.emoji-popover__picker{--background: var(--surface);--border-color: var(--border);--button-active-background: var(--surface-alt);--button-hover-background: var(--surface-alt);--category-font-color: var(--muted);--indicator-color: var(--accent);--input-border-color: var(--border);--input-font-color: var(--text);--input-placeholder-color: var(--muted);--outline-color: var(--accent);--num-columns: 8;height:320px;width:300px;max-width:100%}@media(max-width:900px){.app__layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,auto) minmax(0,1fr)}.app__main{min-height:0;max-height:45vh;max-height:45dvh}.app__side{min-height:0}.player__track-field{flex:1 1 100%}.player__select{flex:1;max-width:none}.emoji-popover{left:.75rem;right:.75rem}.emoji-popover__picker{width:100%;height:300px}}