:root { --primary:#7c85ff; --primary-hover:#939aff; --bg-dark:#111318; --glass:#1b1e26; --glass-border:#303541; --text-main:#f2f4f9; --text-muted:#a6adbb; --accent:#83c9c1; }
[hidden] { display:none !important; }
body { background:#111318; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
button:disabled { cursor:not-allowed; opacity:.5; }
svg { width:20px; height:20px; flex-shrink:0; }
.brand { display:inline-flex; gap:6px; align-items:baseline; text-decoration:none; font-size:25px; font-weight:750; letter-spacing:-1px; color:#fff; }
.brand span { color:#b3b9ff; font-weight:450; font-size:16px; letter-spacing:0; }
.muted { color:var(--text-muted); font-size:14px; line-height:1.7; }
.eyebrow { color:#acb3ff; font-size:11px; letter-spacing:2px; font-weight:700; }
.text-link { background:none; border:0; color:#b5beff; padding:0; font-size:13px; text-decoration:none; }
.danger-text { color:#ffa9aa; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.brand-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 5vw; }
.room-code { color:var(--text-muted); font-size:13px; }
.prejoin-page { min-height:100dvh; }
.prejoin-layout { max-width:1120px; margin:6vh auto 0; padding:30px; display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center; }
.prejoin-preview { position:relative; aspect-ratio:16/11; background:linear-gradient(130deg,#303748,#1b1f29); border:1px solid #393f4d; border-radius:24px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.prejoin-preview video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scaleX(-1); }
.prejoin-avatar { width:112px; height:112px; border-radius:50%; display:grid; place-items:center; background:#576085; color:#fff; font-size:46px; position:relative; }
.preview-caption { position:absolute; top:20px; left:20px; font-size:13px; background:#11131899; padding:7px 12px; border-radius:8px; }
.preview-controls { display:flex; gap:12px; position:absolute; bottom:24px; }
.round-button { border:1px solid #ffffff20; border-radius:50%; background:#ffffff14; color:white; width:52px; height:52px; display:grid; place-items:center; }
.round-button.is-off { background:#dd575b; border-color:transparent; }
.prejoin-details h1 { font-size:clamp(26px,3vw,40px); line-height:1.25; font-weight:600; letter-spacing:-1.3px; margin:15px 0; }
.join-status { font-size:13px; padding:13px 15px; background:#222733; border-radius:12px; margin:24px 0 14px; line-height:1.6; }
.join-button { min-height:50px; background:#a1a8ff; color:#101322; font-size:15px; font-weight:650; border-radius:12px; }
.prejoin-settings { margin:20px 0; font-size:13px; }
.prejoin-settings summary { cursor:pointer; color:#d5d9e3; margin-bottom:12px; }
.prejoin-settings label, .settings-dialog label { display:block; font-size:12px; color:var(--text-muted); margin:12px 0 6px; }
select, input[type=text], input[type=password], textarea { background:#232733; color:#f2f4f9; border:1px solid #3b4252; border-radius:10px; width:100%; padding:12px; }
.privacy-note { display:flex; align-items:flex-start; gap:9px; color:var(--text-muted); font-size:11px; line-height:1.6; margin:20px 0; }
.privacy-note svg { width:16px; height:16px; color:#91cfc1; }
.inline-error { color:#ffc1bb; font-size:13px; line-height:1.6; padding:12px; background:#492c2c; border-radius:10px; margin-top:14px; }
.meeting-page { overflow:hidden; }
.meeting-shell, #main-room { height:100dvh !important; flex-direction:column; display:none; }
.meeting-header { padding:16px 24px; display:flex; justify-content:space-between; gap:12px; align-items:center; flex-shrink:0; }
.meeting-title { display:flex; gap:18px; align-items:center; min-width:0; }
.meeting-title h1 { font-size:14px; font-weight:600; margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; max-width:28vw; white-space:nowrap; }
.header-divider { height:30px; width:1px; background:#373d48; }
.header-actions { display:flex; gap:8px; align-items:center; }
.subtle-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; background:#242832; border:1px solid #373d48; border-radius:9px; color:#dce0e8; font-size:12px; padding:9px 12px; text-decoration:none; }
.connection-status { font-size:10px; color:#a6adbb; }
.meeting-content { display:flex; flex:1; min-height:0; padding:0 16px; gap:14px; position:relative; }
.stage { display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; }
.stage .video-grid { flex:1; height:auto !important; overflow:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; padding:0; align-content:stretch; }
.stage .video-slot { width:auto !important; height:auto !important; min-height:150px; min-width:0; aspect-ratio:auto; flex:none !important; resize:none; border:1px solid #353b49; border-radius:15px; background:#242a36; position:relative; overflow:hidden; }
.stage .video-slot.minimized { min-height:150px; width:auto !important; height:auto !important; background:#252b37; }
.stage .video-slot::before { content:'●'; font-size:90px; color:#535f7d; width:auto; height:auto; background:none; display:grid; place-items:center; border-radius:0; }
.stage .video-slot.has-video::before { display:none; }
.stage .video-slot video, .stage .video-slot.minimized video { width:100%; height:100%; object-fit:contain; display:block; }
.stage .video-slot:not(.has-video) video { opacity:0; }
.stage .video-slot.is-screen video { opacity:1; }
.local-avatar { width:85px; height:85px; border-radius:50%; background:#576085; color:white; display:grid; place-items:center; font-size:34px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.has-video .local-avatar { display:none; }
.stage .video-slot .info { left:12px; right:auto; bottom:12px; width:auto; max-width:85%; background:#111318b3; padding:6px 10px; border-radius:8px; font-size:12px; }
.stage .video-slot .info small { color:#c4cad5; }
.stage .video-slot .volume-meter { height:3px; margin-top:5px; }
.stage .video-grid.presentation-mode, .stage .video-grid.speaker-mode { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(120px,1fr); }
.stage .video-grid.presentation-mode .video-slot.pinned, .stage .video-grid.speaker-mode .video-slot.pinned { grid-column:1/-1; min-height:0; width:100% !important; height:auto !important; grid-row:span 3; max-width:none; }
.stage .video-grid.presentation-mode .video-slot:not(.pinned), .stage .video-grid.speaker-mode .video-slot:not(.pinned) { max-width:none; width:auto; height:auto; aspect-ratio:auto; min-height:100px; }
.stage-caption { display:flex; justify-content:center; align-items:center; gap:6px; color:#7e8798; font-size:10px; min-height:28px; }
.stage-caption svg { width:12px; height:12px; }
.side-panel { width:350px; min-width:300px; display:flex; flex-direction:column; background:#1b1e26; border:1px solid #303642; border-radius:16px; margin-bottom:28px; overflow:hidden; }
.panel-tabs { display:flex; border-bottom:1px solid #303642; padding:8px 10px 0; gap:5px; flex-shrink:0; }
.panel-tabs button { background:none; color:#a6adbb; border:0; font-size:12px; padding:13px 9px; display:flex; align-items:center; gap:6px; border-bottom:2px solid transparent; }
.panel-tabs button[aria-selected=true] { color:#bdc2ff; border-color:#929bff; }
.panel-tabs .panel-close { margin-left:auto; padding:9px; }
#chat-panel { display:flex; flex:1; min-height:0; width:100% !important; min-width:0 !important; margin:0 !important; max-height:none; border:0; border-radius:0; background:none; }
.chat-privacy { font-size:10px; padding:12px 14px; color:#a3acbd; line-height:1.6; margin:0; border-bottom:1px solid #303642; }
#chat-messages { flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:12px; min-height:0; }
#chat-messages:empty::before { font-size:12px; }
.chat-msg { padding:10px 12px; border-radius:12px; font-size:12px; max-width:100%; border:1px solid #373e4d; background:#252a35; }
.chat-msg.msg-self { background:#343b60; border-color:#484f7b; }
.chat-msg > strong { font-size:10px; margin-bottom:6px; }
.chat-compose { border-top:1px solid #303642; padding:12px; flex-shrink:0; }
.chat-compose textarea { resize:none; min-height:65px; font-size:12px; padding:11px; line-height:1.5; }
.compose-actions { display:flex; align-items:center; gap:8px; margin-top:9px; }
.compose-actions .btn { width:auto; padding:8px 12px; font-size:11px; border-radius:8px; min-height:36px; }
.compose-actions .btn svg { width:14px; height:14px; }
.attachment-button { display:inline-flex; align-items:center; gap:5px; padding:6px 0; color:#b0b7c6; font-size:11px; cursor:pointer; }
.attachment-button svg { width:18px; height:18px; }
.compose-hint { font-size:9px; color:#7f889a; margin-left:auto; }
.chat-admin-actions { display:flex; justify-content:space-between; padding:0 12px 12px; }
.chat-admin-actions button { font-size:10px; }
#img-preview { padding:10px 12px; gap:12px; }
#users-panel { width:100% !important; min-width:0 !important; flex:1; min-height:0; margin:0; overflow:auto; background:none; border:0; display:flex; flex-direction:column; }
.participant-summary, .panel-section-title { font-size:11px; padding:16px; color:#a9b2c4; }
#online-list, #approval-list { padding:0 12px 12px; flex:none; }
.user-row, .approval-row { padding:11px 8px; display:flex; gap:10px; align-items:center; border-radius:10px; }
.user-avatar { width:32px; height:32px; min-width:32px; border-radius:50%; background:#434e6a; display:grid; place-items:center; font-size:12px; color:white; }
.user-row .user-name { font-size:12px; word-break:break-word; }
.user-row small { font-size:10px; color:#a3adbf; display:block; margin-top:3px; }
.user-row .user-indicator { width:6px; height:6px; border-radius:50%; background:#79c8ad; margin-left:auto; }
.approval-row { background:#252b36; margin-bottom:8px; flex-wrap:wrap; font-size:12px; }
.approval-row strong { flex:1 1 100%; font-size:12px; }
.approval-row button { border:1px solid #485366; color:#d8deeb; border-radius:6px; background:#303847; padding:7px 8px; font-size:10px; }
.approval-row .approve { background:#336755; border-color:#448669; }
.counter { background:#343d5b; color:#c1caff; font-size:9px; padding:2px 5px; border-radius:7px; }
.meeting-toolbar { padding:12px 24px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-shrink:0; }
.toolbar-info { font-size:11px; color:#c0c7d4; display:flex; gap:12px; min-width:110px; }
#meeting-duration { color:#7f899b; }
.primary-controls, .panel-controls { display:flex; gap:7px; align-items:center; }
.meeting-control { border:0; border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#272c36; color:#e0e4ed; font-size:9px; min-height:57px; min-width:58px; position:relative; }
.meeting-control:hover { background:#363d49; }
.meeting-control.is-off { background:#492c32; color:#ffc4c6; }
.meeting-control.active { background:#3d4569; color:#c9d0ff; }
.control-group { display:flex; background:#272c36; border-radius:10px; overflow:hidden; }
.control-group .meeting-control { border-radius:10px 0 0 10px; }
.control-caret { border:0; color:#b1bacd; background:transparent; padding:0 5px; border-left:1px solid #ffffff08; }
.control-caret svg { width:13px; height:13px; }
.leave-control { background:#d74751; color:white; padding-inline:22px; }
.leave-control:hover { background:#ed5c65; }
.toolbar-badge { position:absolute; right:5px; top:4px; font-size:8px; min-width:13px; padding:1px 3px; border-radius:6px; background:#6976ab; }
.meeting-control.btn-off::after { display:none; }
.settings-dialog { background:#1b1f29; border:1px solid #3d4658; border-radius:18px; color:#edf1f8; margin:auto; padding:24px; width:min(440px,94vw); max-height:85dvh; overflow:auto; }
.settings-dialog::backdrop { background:#000a; }
.settings-dialog header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.settings-dialog h2 { font-size:18px; }
.settings-dialog h3 { font-size:14px; margin-top:14px; }
.settings-dialog .checkbox-label { display:flex; align-items:center; gap:10px; margin:16px 0; }
.settings-dialog input[type=checkbox] { width:16px; height:16px; }
.settings-dialog .muted { font-size:12px; margin:10px 0; }
.settings-dialog hr { border:0; border-top:1px solid #394355; margin:20px 0; }
.layout-options { display:flex; gap:8px; margin:14px 0; }
.layout-options button { display:flex; align-items:center; flex-direction:column; gap:8px; flex:1; padding:16px 8px; border:1px solid #44506a; background:#2d3547; color:#e0e6f1; border-radius:10px; font-size:12px; }
.end-meeting { background:#623440; color:#ffcdcd; font-size:12px; }
.meeting-banner { background:#463922; color:#f4d69f; padding:10px 14px; border-radius:10px; font-size:12px; margin-bottom:10px; }
.slot-actions { top:10px; right:10px; left:auto; gap:5px; padding:0; }
.slot-action-btn { background:#111318c9; border:1px solid #ffffff20; border-radius:8px; width:32px; height:32px; font-size:14px; display:grid; place-items:center; }
.slot-action-btn svg { width:16px; height:16px; }
.video-slot.expanded-slot { position:fixed !important; inset:16px !important; z-index:10000; width:auto !important; height:auto !important; background:#111318; }
.video-slot:fullscreen { height:100vh !important; width:100vw !important; }
.video-slot .avatar-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:85px; height:85px; display:grid; place-items:center; background:#54617e; border-radius:50%; color:white; font-size:32px; pointer-events:none; }
.video-slot.has-video .avatar-label, .video-slot.is-screen .avatar-label { display:none; }
@media(max-width:1200px) { .toolbar-info { display:none; } .meeting-toolbar { justify-content:center; } .meeting-control { padding-inline:11px; } .side-panel { width:310px; } }
@media(max-width:900px) { .prejoin-layout { gap:30px; padding:20px; } .header-actions .subtle-button span { display:none; } .meeting-toolbar { padding-inline:10px; gap:8px; } .meeting-control { padding-inline:8px; min-width:45px; } .side-panel { position:absolute; right:16px; top:0; bottom:0; z-index:20; width:340px; box-shadow:0 12px 40px #0008; } #sound-btn { display:none; } }
@media(max-width:600px) {
 .prejoin-page { overflow:auto; height:100dvh; } .brand-header { padding:20px; } .room-code { font-size:10px; max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .prejoin-layout { grid-template-columns:1fr; gap:26px; margin:0 auto; padding:6px 20px 30px; } .prejoin-preview { aspect-ratio:16/10; } .prejoin-details h1 { font-size:28px; } .prejoin-details h1 br { display:none; } .prejoin-details .eyebrow { font-size:10px; }
 .meeting-header { padding:13px 12px; } .meeting-title { gap:9px; } .meeting-title .brand { font-size:20px; } .meeting-title .brand span { display:none; } .header-divider { height:24px; } .meeting-title h1 { font-size:12px; max-width:40vw; } .connection-status { font-size:9px; max-width:40vw; }
 .meeting-content { padding:0 8px; } .stage .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .stage .video-grid:has(.video-slot:only-child) { grid-template-columns:1fr; }
 .stage .video-slot, .stage .video-slot.minimized { min-height:135px; } .stage .video-grid.presentation-mode, .stage .video-grid.speaker-mode { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .meeting-toolbar { flex-wrap:wrap; gap:8px; padding:10px 8px calc(10px + env(safe-area-inset-bottom)); } .primary-controls { gap:5px; width:100%; justify-content:center; } .panel-controls { gap:10px; width:100%; justify-content:center; }
 .meeting-control { min-width:38px; min-height:49px; padding:8px 9px; font-size:8px; gap:4px; } .meeting-control svg { width:18px; height:18px; } .control-caret { padding:0 3px; } .leave-control { padding-inline:14px; }
 .panel-controls .meeting-control { flex-direction:row; min-height:33px; padding:7px 20px; gap:7px; font-size:10px; } #layout-btn { display:none; } .panel-controls .toolbar-badge { position:static; margin-left:4px; }
 .side-panel { inset:0 8px 0; width:auto; min-width:0; margin-bottom:28px; } #chat-panel { width:100% !important; } #users-panel { display:flex !important; } #users-panel[hidden] { display:none !important; }
 .header-actions { gap:5px; } .subtle-button { padding:8px; } .slot-actions { opacity:1; } .slot-action-btn { width:28px; height:28px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
.entry-layout { max-width:1080px; margin:5vh auto; padding:24px; display:grid; grid-template-columns:1.2fr 1fr; gap:90px; align-items:center; }
.entry-story h1 { font-size:clamp(42px,5vw,62px); letter-spacing:-2.5px; line-height:1.12; margin:20px 0; font-weight:600; }
.entry-story>.muted { max-width:390px; }
.entry-illustration { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:370px; margin:28px 0 24px; transform:rotate(-2deg); }
.illustration-tile { aspect-ratio:16/9; border-radius:16px; border:1px solid #414b64; background:#303a51; display:flex; align-items:center; justify-content:center; position:relative; }
.illustration-tile>span { width:45px; height:45px; display:grid; place-items:center; background:#7583a5; border-radius:50%; font-size:19px; color:#eaf0ff; }
.illustration-tile small { position:absolute; bottom:9px; left:10px; font-size:9px; color:#d7dfed; }
.tile-2 { background:#364338; border-color:#4b5b4e; }.tile-2>span {background:#7b927b;}.tile-3 {background:#493743;border-color:#614655;}.tile-3>span {background:#a58399;}.tile-4 {background:#333644;}.tile-4 svg {width:34px;height:34px;color:#aaaed3;}
.entry-form-card { background:#1c202a; border:1px solid #343d4e; padding:34px; border-radius:24px; }
.entry-form-card h1,.entry-form-card h2 { font-size:25px; font-weight:600; letter-spacing:-.7px; margin:15px 0; }
.entry-form-card .muted { font-size:13px; }
.entry-form-card form { margin-top:24px; }
.entry-form-card label { display:block; font-size:12px; color:#b5bfd0; margin:16px 0 8px; }
.entry-form-card input { min-height:47px; font-size:13px; }
.entry-form-card .btn { margin-top:20px; min-height:48px; font-size:13px; color:#101322; background:#a1a8ff; border-radius:10px; }
.form-note { font-size:11px; color:#909bae; line-height:1.7; margin-top:18px; }
.entry-footer { text-align:center; font-size:11px; color:#727d91; padding:24px; }
.login-layout { width:min(460px,100%); margin:5vh auto; padding:20px; }
.dashboard-main { max-width:1150px; width:100%; padding:30px; margin:0 auto; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:10px 0 35px; }
.dashboard-heading h1 { font-size:33px; letter-spacing:-1px; font-weight:600; margin:12px 0; }
.dashboard-summary { font-size:12px; color:#c3ccde; white-space:nowrap; background:#242c3d; padding:10px 16px; border-radius:20px; }
.create-meeting-card { display:flex; align-items:center; gap:30px; padding:25px; background:#202532; border:1px solid #3a4358; border-radius:16px; margin-bottom:28px; }
.create-meeting-card h2 { font-size:16px; font-weight:600; margin-bottom:7px; }
.create-meeting-card .muted { font-size:12px; }
.create-meeting-card form { display:flex; flex:1; align-items:center; gap:10px; }
.create-meeting-card input { min-width:0; flex:1; width:auto; font-size:13px; }
.create-meeting-card .btn { width:auto; font-size:12px; white-space:nowrap; padding:13px 16px; }
.room-list { display:flex; flex-direction:column; gap:12px; }
.meeting-card { display:flex; gap:18px; align-items:center; padding:22px; background:#1b1f29; border:1px solid #303949; border-radius:16px; }
.meeting-card-icon { border-radius:12px; width:48px; height:48px; display:grid; place-items:center; background:#303950; color:#c1caff; flex-shrink:0; }
.meeting-card-details { flex:1; min-width:0; }.meeting-card-details h2 { font-size:16px; font-weight:550; overflow-wrap:anywhere; }.meeting-card-details p { display:flex; flex-wrap:wrap; gap:12px; margin-top:9px; color:#96a3b8; font-size:11px; align-items:center; }
.meeting-state { font-size:10px; background:#333948; color:#bac4d6; padding:4px 7px; border-radius:6px; }.live-state { background:#273f37; color:#a1ddbf; }
.meeting-card-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.meeting-card-actions .btn { width:auto; font-size:12px; padding:10px 15px; color:#131627; background:#a0a8ff; border-radius:9px; }
.empty-meetings { text-align:center; border:1px dashed #3f495f; padding:55px 20px; border-radius:16px; }.empty-meetings>svg {width:40px;height:40px;color:#7c89a6;}.empty-meetings h2 {font-size:19px;margin:16px 0;}
.success-note { color:#a1ddc2; font-size:13px; padding:15px; border:1px solid #3a6152; border-radius:10px; margin-bottom:20px; background:#21392f; }
.stage .video-slot.cover-mode video { object-fit:cover; }
@media(max-width:900px) { .entry-layout {gap:35px;}.create-meeting-card {flex-direction:column;align-items:stretch;gap:20px;}.dashboard-heading {align-items:flex-start;}.meeting-card {flex-wrap:wrap;}.meeting-card-actions {width:100%;padding-left:66px;} }
@media(max-width:600px) { .entry-layout {grid-template-columns:1fr;margin:10px auto;padding:20px;gap:30px;}.entry-story h1 {font-size:40px;}.entry-illustration {display:none;}.entry-story .privacy-note {display:none;}.entry-form-card {padding:25px;}.entry-layout .entry-story .eyebrow {display:none;}.entry-story h1 br {display:none;}.entry-story>.muted {font-size:13px;}.brand-header .subtle-button {font-size:10px;}.dashboard-main {padding:12px 18px;}.dashboard-heading {flex-direction:column;gap:12px;}.dashboard-heading h1 {font-size:28px;}.create-meeting-card {padding:20px;}.create-meeting-card form {flex-wrap:wrap;}.create-meeting-card input {width:100%;flex-basis:100%;}.create-meeting-card .btn {width:100%;}.meeting-card {padding:17px;gap:12px;}.meeting-card-icon {width:38px;height:38px;}.meeting-card-actions {padding:0;}.meeting-card-details p {gap:8px;}.entry-footer {font-size:10px;} }
#chat-panel { flex-direction:column; }
.stage .video-slot::before { display:none; }
.obs-dialog #obs-create { margin:18px 0; }
.obs-dialog #obs-result { margin:14px 0; }
.obs-dialog #obs-result .subtle-button { margin-top:10px; }
.obs-dialog #obs-url { font-size:11px; }
.obs-dialog h3 { margin:20px 0 12px; }

.chat-msg > strong, .chat-msg > span { display:block; }

/* Keep controls identifiable on dark video, touch screens and after dynamic updates. */
.video-slot .slot-actions { opacity:1; max-width:calc(100% - 16px); flex-wrap:wrap; justify-content:flex-end; }
.slot-action-btn { color:#f1f5ff; background:#151b27ed; border-color:#69788e; width:auto !important; height:auto !important; min-height:34px; padding:6px; display:inline-flex; gap:4px; }
.slot-action-btn:hover,.slot-action-btn:focus-visible { background:#405174; border-color:#c7d4f0; }
.slot-action-label { font-size:9px; line-height:1.2; white-space:nowrap; }
.preview-controls .round-button { width:auto; min-width:100px; border-radius:22px; display:inline-flex; gap:7px; padding:10px 15px; }
.preview-controls .round-button span { font-size:11px; }
.chat-compose { position:relative; }
.emoji-toggle { display:inline-flex; align-items:center; gap:4px; background:#30394d; color:#e4eaff; border:1px solid #596680; border-radius:8px; padding:8px; min-height:38px; font-size:11px; }
.emoji-toggle[aria-expanded=true] { background:#4a5683; border-color:#b0baff; }
.emoji-toggle svg { width:19px; height:19px; }
.compose-actions { flex-wrap:wrap; gap:7px; }
.compose-actions .compose-hint { display:none; }
.compose-actions button[type=submit] { margin-left:auto; }
.emoji-picker { position:absolute; left:8px; right:8px; bottom:calc(100% + 6px); z-index:30; background:#242c3b; border:1px solid #647392; border-radius:14px; box-shadow:0 12px 36px #0009; padding:12px; display:flex; flex-direction:column; gap:9px; max-height:min(360px,50dvh); }
.emoji-picker header { display:flex; justify-content:space-between; align-items:center; }
.emoji-picker header strong { font-size:13px; }
.emoji-picker header button { padding:5px 7px; font-size:10px; }
.emoji-picker input { font-size:11px; padding:9px; min-height:35px; }
.emoji-categories { display:flex; flex-wrap:wrap; gap:4px; }
.emoji-categories button { background:#303a4f; color:#d9e1f3; border:1px solid #53617a; border-radius:7px; padding:7px; font-size:10px; }
.emoji-categories button[aria-pressed=true] { background:#a1a8ff; color:#111627; border-color:#b4bdff; }
.emoji-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; overflow:auto; min-height:0; }
.emoji-option { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:24px; line-height:1; min-height:42px; border:1px solid transparent; border-radius:8px; background:#30394b; padding:7px 2px; }
.emoji-option:hover,.emoji-option:focus-visible { background:#52628a; border-color:#b9c9f4; }
.emoji-picker #emoji-empty { font-size:12px; padding:12px 0; }
@media(max-width:900px) { .meeting-header .header-actions .subtle-button span { display:inline; } }
@media(max-width:600px) { .meeting-header { flex-wrap:wrap; gap:8px; } .meeting-header .header-actions { margin-left:auto; } .meeting-header .header-actions .subtle-button { gap:4px; font-size:10px; } .slot-action-btn svg { width:14px; height:14px; } }