:root{--font-family-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal: 1040;--z-popover: 1050;--z-tooltip: 1060;--color-primary: #9146ff;--color-primary-hover: #a970ff;--color-primary-active: #7c3aed;--color-success: #00c851;--color-success-hover: #00a844;--color-success-bg: rgba(0, 200, 81, .1);--color-warning: #ffc107;--color-warning-hover: #e0a800;--color-warning-bg: rgba(255, 193, 7, .1);--color-error: #dc3545;--color-error-hover: #c82333;--color-error-bg: rgba(220, 53, 69, .1);--color-info: #17a2b8;--color-info-hover: #138496;--color-info-bg: rgba(23, 162, 184, .1);--bg-primary: #0f0f23;--bg-secondary: #18181b;--bg-tertiary: #1f1f23;--bg-elevated: #26262a;--bg-overlay: rgba(0, 0, 0, .8);--text-primary: #efeff1;--text-secondary: #adadb8;--text-tertiary: #868686;--text-inverse: #000000;--border-primary: #464775;--border-secondary: rgba(70, 71, 117, .3);--border-focus: var(--color-primary);--chat-bg: var(--bg-primary);--chat-message-hover: rgba(255, 255, 255, .02);--chat-bot-bg: rgba(147, 51, 234, .1);--badge-broadcaster: #e91e63;--badge-moderator: #00c851;--badge-vip: #e91eff;--badge-subscriber: #9146ff;--badge-premium: #1e88e5;--badge-turbo: #f57c00;color-scheme:dark;font-family:var(--font-family-primary);line-height:var(--line-height-normal);font-weight:var(--font-weight-normal);color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: light){:root{--color-primary: #7c3aed;--color-primary-hover: #8b5cf6;--color-primary-active: #6d28d9;--color-success: #059669;--color-success-hover: #047857;--color-success-bg: rgba(5, 150, 105, .1);--color-warning: #d97706;--color-warning-hover: #b45309;--color-warning-bg: rgba(217, 119, 6, .1);--color-error: #dc2626;--color-error-hover: #b91c1c;--color-error-bg: rgba(220, 38, 38, .1);--color-info: #0891b2;--color-info-hover: #0e7490;--color-info-bg: rgba(8, 145, 178, .1);--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-elevated: #ffffff;--bg-overlay: rgba(0, 0, 0, .5);--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--text-inverse: #ffffff;--border-primary: #e2e8f0;--border-secondary: #f1f5f9;--border-focus: var(--color-primary);--chat-bg: var(--bg-primary);--chat-message-hover: rgba(0, 0, 0, .02);--chat-bot-bg: rgba(124, 58, 237, .1);color-scheme:light}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;min-width:320px;min-height:100vh;display:flex;place-items:center;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family-primary);line-height:var(--line-height-normal);-webkit-text-size-adjust:100%}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin:0;color:var(--text-primary)}a{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-medium);transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover);text-decoration:underline}a:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-sm)}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:1;cursor:pointer;transition:all var(--transition-fast);background-color:var(--color-primary);color:var(--text-inverse);min-height:40px}button:hover:not(:disabled){background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}button:active:not(:disabled){background-color:var(--color-primary-active);transform:translateY(0);box-shadow:var(--shadow-sm)}button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.button--secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-primary)}.button--secondary:hover:not(:disabled){background-color:var(--bg-tertiary);border-color:var(--border-focus)}.button--success{background-color:var(--color-success)}.button--success:hover:not(:disabled){background-color:var(--color-success-hover)}.button--warning{background-color:var(--color-warning)}.button--warning:hover:not(:disabled){background-color:var(--color-warning-hover)}.button--error{background-color:var(--color-error)}.button--error:hover:not(:disabled){background-color:var(--color-error-hover)}input,select,textarea{font-family:inherit;font-size:var(--font-size-sm);padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #9146ff1a}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border-secondary);border-top:2px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-pulse{animation:pulse 2s ease-in-out infinite}.fade-in{animation:fadeIn .3s ease-out}.slide-in{animation:slideIn .3s ease-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-contrast: high){:root{--border-primary: currentColor;--border-secondary: currentColor}button,input,select,textarea{border:2px solid currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.loading-spinner{animation:none;border-top-color:var(--color-primary)}}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}button{border:1px solid black;background:#fff;color:#000}}.chat-display{display:flex;flex-direction:column;height:100%;max-height:600px;background:var(--chat-bg);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;font-family:var(--font-family-primary);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-normal)}.chat-display:hover{box-shadow:var(--shadow-lg)}.chat-display__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);flex-shrink:0;position:relative}.chat-display__header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-primary),transparent,var(--color-primary));opacity:.3}.chat-display__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.chat-display__title:before{content:"💬";font-size:var(--font-size-base)}.chat-display__count{font-size:var(--font-size-xs);color:var(--text-secondary);background:var(--bg-tertiary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-secondary);font-weight:var(--font-weight-medium);min-width:40px;text-align:center;transition:all var(--transition-fast)}.chat-display__count:hover{background:var(--bg-elevated);border-color:var(--border-primary)}.chat-display__messages{flex:1;overflow-y:auto;padding:var(--space-2) 0;scroll-behavior:smooth;position:relative}.chat-display__messages:before{content:"";position:sticky;top:0;display:block;height:var(--space-2);background:linear-gradient(to bottom,var(--chat-bg),transparent);z-index:1;pointer-events:none}.chat-display__messages:after{content:"";position:sticky;bottom:0;display:block;height:var(--space-2);background:linear-gradient(to top,var(--chat-bg),transparent);z-index:1;pointer-events:none}.chat-display__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-style:italic;padding:var(--space-8);text-align:center;gap:var(--space-4)}.chat-display__empty:before{content:"💭";font-size:var(--font-size-4xl);opacity:.5}.chat-display__empty-text{font-size:var(--font-size-base);line-height:var(--line-height-relaxed)}.chat-display__empty-subtext{font-size:var(--font-size-sm);color:var(--text-tertiary);opacity:.7}.chat-message{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-secondary);transition:all var(--transition-fast);position:relative;animation:fadeIn .3s ease-out}.chat-message:hover{background:var(--chat-message-hover);border-left:3px solid var(--color-primary);padding-left:calc(var(--space-4) - 3px)}.chat-message:last-child{border-bottom:none}.chat-message--bot{background:var(--chat-bot-bg);border-left:2px solid var(--color-success);padding-left:calc(var(--space-4) - 2px)}.chat-message--bot:hover{border-left-width:3px;padding-left:calc(var(--space-4) - 3px)}.chat-message--highlighted{background:#ffd7001a;border-left:3px solid #ffd700;padding-left:calc(var(--space-4) - 3px)}.chat-message--new{animation:slideIn .3s ease-out}.chat-message__header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);flex-wrap:wrap}.chat-message__timestamp{font-size:var(--font-size-xs);color:var(--text-tertiary);font-family:var(--font-family-mono);min-width:65px;font-weight:var(--font-weight-medium);opacity:.8;transition:opacity var(--transition-fast)}.chat-message:hover .chat-message__timestamp{opacity:1}.chat-badges{display:flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}.chat-badge{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px;color:var(--text-inverse);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast);line-height:1}.chat-badge:hover{transform:scale(1.05)}.chat-badge--broadcaster{background:var(--badge-broadcaster)}.chat-badge--moderator{background:var(--badge-moderator)}.chat-badge--vip{background:var(--badge-vip)}.chat-badge--subscriber{background:var(--badge-subscriber)}.chat-badge--premium{background:var(--badge-premium)}.chat-badge--turbo{background:var(--badge-turbo)}.chat-message__username{font-weight:var(--font-weight-bold);color:var(--color-primary);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2))}.chat-message__username:hover{color:var(--color-primary-hover);background:#9146ff1a;transform:translateY(-1px)}.chat-message__username:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.chat-message__username--bot{color:var(--color-success)}.chat-message__username--bot:hover{color:var(--color-success-hover);background:var(--color-success-bg)}.chat-message__content{color:var(--text-primary);line-height:var(--line-height-normal);word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;font-size:var(--font-size-sm);margin-top:var(--space-1)}.chat-message__content--large{font-size:var(--font-size-base)}.chat-message__content a{color:var(--color-info);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color var(--transition-fast)}.chat-message__content a:hover{text-decoration-color:currentColor}.chat-display__messages{scrollbar-width:thin;scrollbar-color:var(--border-primary) var(--bg-secondary)}.chat-display__messages::-webkit-scrollbar{width:8px}.chat-display__messages::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-sm)}.chat-display__messages::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.chat-display__messages::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.chat-display__messages::-webkit-scrollbar-corner{background:var(--bg-secondary)}@media (max-width: 480px){.chat-display{max-height:300px;border-radius:var(--radius-md)}.chat-display__header{padding:var(--space-3)}.chat-display__title{font-size:var(--font-size-base)}.chat-display__count{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);min-width:30px}.chat-message{padding:var(--space-2) var(--space-3)}.chat-message__header{gap:var(--space-1);flex-wrap:wrap}.chat-message__timestamp{font-size:10px;min-width:50px}.chat-badge{font-size:9px;padding:1px var(--space-1)}.chat-message__username{font-size:var(--font-size-sm);padding:1px var(--space-1);margin:-1px calc(-1 * var(--space-1))}.chat-message__content{font-size:var(--font-size-sm);line-height:var(--line-height-tight)}.chat-display__empty{padding:var(--space-4);gap:var(--space-2)}.chat-display__empty:before{font-size:var(--font-size-2xl)}.chat-display__empty-text{font-size:var(--font-size-sm)}.chat-display__empty-subtext{font-size:var(--font-size-xs)}}@media (min-width: 481px) and (max-width: 768px){.chat-display{max-height:450px}.chat-display__header{padding:var(--space-3) var(--space-4)}.chat-message{padding:var(--space-2) var(--space-4)}.chat-message__content{font-size:var(--font-size-sm)}}@media (min-width: 769px) and (max-width: 1024px){.chat-display{max-height:550px}.chat-display__title{font-size:var(--font-size-xl)}.chat-message__content{font-size:var(--font-size-base)}}@media (min-width: 1025px) and (max-width: 1440px){.chat-display{max-height:600px}.chat-display__title{font-size:var(--font-size-xl)}.chat-message__content{font-size:var(--font-size-base)}}@media (min-width: 1441px){.chat-display{max-height:700px}.chat-display__title{font-size:var(--font-size-2xl)}.chat-message__content{font-size:var(--font-size-lg)}.chat-message__content--large{font-size:var(--font-size-xl)}}@media (max-height: 500px) and (orientation: landscape){.chat-display{max-height:250px}.chat-display__header{padding:var(--space-2) var(--space-3)}.chat-display__title{font-size:var(--font-size-sm)}.chat-message{padding:var(--space-1) var(--space-3)}.chat-message__content{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}}.chat-display:focus-within{outline:2px solid var(--border-focus);outline-offset:2px;box-shadow:var(--shadow-lg),0 0 0 4px #9146ff1a}.chat-message:focus-within{background:var(--chat-message-hover);border-left:3px solid var(--color-primary);padding-left:calc(var(--space-4) - 3px);outline:none}.chat-message[tabindex]:focus{outline:2px solid var(--border-focus);outline-offset:2px}@media (prefers-contrast: high){.chat-display{border:3px solid var(--text-primary);background:var(--bg-primary)}.chat-display__header{background:var(--bg-primary);border-bottom:3px solid var(--text-primary)}.chat-display__header:after{display:none}.chat-display__title,.chat-display__count{color:var(--text-primary);background:var(--bg-primary);border:2px solid var(--text-primary)}.chat-message{border-bottom:2px solid var(--text-primary)}.chat-message__content,.chat-message__username{color:var(--text-primary)}.chat-badge{border:2px solid var(--text-primary);color:var(--text-primary);background:var(--bg-primary)}}@media (prefers-reduced-motion: reduce){.chat-display__messages{scroll-behavior:auto}.chat-display,.chat-message,.chat-message__username,.chat-badge,.chat-display__count{transition:none;animation:none;transform:none}.chat-message--new{animation:none}}@media (prefers-color-scheme: dark){.chat-display{box-shadow:var(--shadow-lg),0 0 20px #0000004d}.chat-display__messages:before,.chat-display__messages:after{background:linear-gradient(to bottom,var(--bg-primary),transparent)}}@media (prefers-color-scheme: light){.chat-display{box-shadow:var(--shadow-md),0 0 20px #0000000d}.chat-message:hover{background:#00000005}.chat-message--bot{background:#0596690d;border-left-color:var(--color-success)}.chat-message--highlighted{background:#d977061a;border-left-color:var(--color-warning)}}@media print{.chat-display{background:#fff;color:#000;border:2px solid black;box-shadow:none;max-height:none;height:auto}.chat-display__header{background:#fff;color:#000;border-bottom:2px solid black}.chat-display__header:after{display:none}.chat-display__title:before{display:none}.chat-message{border-bottom:1px solid black;background:#fff;border-left:none;padding-left:var(--space-4)}.chat-message__content,.chat-message__username,.chat-message__timestamp{color:#000}.chat-badge{background:#fff;color:#000;border:1px solid black}.chat-display__messages:before,.chat-display__messages:after{display:none}}.chat-display[role=log]{position:relative}.chat-display[role=log]:focus{outline:2px solid var(--border-focus);outline-offset:2px}.chat-display--loading .chat-display__messages{display:flex;align-items:center;justify-content:center}.chat-display--loading .chat-display__empty{gap:var(--space-3)}.chat-display--loading .chat-display__empty:before{content:"";width:40px;height:40px;border:3px solid var(--border-secondary);border-top:3px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.tts-controls{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);position:relative;overflow:hidden}.tts-controls:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.tts-controls:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.tts-controls__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-secondary)}.tts-controls__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.tts-controls__title:before{content:"🔊";font-size:var(--font-size-lg)}.tts-controls__toggle{display:flex;align-items:center}.tts-controls__toggle-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--space-3);padding:var(--space-2);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.tts-controls__toggle-label:hover{background-color:var(--bg-tertiary)}.tts-controls__toggle-label:focus-within{outline:2px solid var(--border-focus);outline-offset:2px}.tts-controls__toggle-input{position:absolute;opacity:0;width:0;height:0}.tts-controls__toggle-slider{position:relative;width:56px;height:28px;background-color:var(--border-primary);border-radius:var(--radius-full);transition:background-color var(--transition-normal);box-shadow:inset 0 2px 4px #0000001a}.tts-controls__toggle-slider:before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background-color:var(--text-inverse);top:2px;left:2px;transition:transform var(--transition-normal);box-shadow:var(--shadow-sm)}.tts-controls__toggle-input:checked+.tts-controls__toggle-slider{background-color:var(--color-success)}.tts-controls__toggle-input:checked+.tts-controls__toggle-slider:before{transform:translate(28px)}.tts-controls__toggle-input:focus+.tts-controls__toggle-slider{box-shadow:inset 0 2px 4px #0000001a,0 0 0 3px #9146ff1a}.tts-controls__toggle-text{font-weight:var(--font-weight-medium);color:var(--text-primary);font-size:var(--font-size-sm)}.tts-controls__error{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--radius-md);margin-bottom:var(--space-5);color:var(--text-primary);font-size:var(--font-size-sm);animation:slideIn .3s ease-out}.tts-controls__error-icon{font-size:var(--font-size-lg);color:var(--color-error);flex-shrink:0}.tts-controls__unlock{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-md);margin-bottom:var(--space-5);color:var(--text-primary);line-height:1.5}.tts-controls__unlock .tts-controls__error-icon{color:var(--color-warning)}.tts-controls--unsupported{text-align:center;padding:var(--space-8)}.tts-controls--unsupported .tts-controls__error{justify-content:center;background-color:var(--color-warning-bg);border-color:var(--color-warning);margin-bottom:0}.tts-controls--unsupported .tts-controls__error-icon{color:var(--color-warning)}.tts-controls__content{transition:opacity var(--transition-normal)}.tts-controls__content--disabled{opacity:.6;pointer-events:none;filter:grayscale(.3)}.tts-controls__group{margin-bottom:var(--space-6);padding:var(--space-4);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-secondary);transition:border-color var(--transition-fast)}.tts-controls__group:hover{border-color:var(--border-primary)}.tts-controls__group:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px #9146ff1a}.tts-controls__label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-weight-medium);color:var(--text-primary);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-2)}.tts-controls__label--volume:before{content:"🔊"}.tts-controls__label--rate:before{content:"⚡"}.tts-controls__label--pitch:before{content:"🎵"}.tts-controls__label--voice:before{content:"🎤"}.tts-controls__style-hint{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.tts-controls__style-hint code{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);display:inline-block;margin:0 var(--space-1) var(--space-1) 0;padding:var(--space-1) var(--space-2)}.tts-controls__input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);background-color:var(--bg-primary);font-size:var(--font-size-sm);color:var(--text-primary);font-family:var(--font-family-primary);transition:all var(--transition-fast)}.tts-controls__input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #9146ff1a}.tts-controls__input:hover:not(:disabled){border-color:var(--color-primary)}.tts-controls__input:disabled{background-color:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;opacity:.6}.tts-controls__select{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);background-color:var(--bg-primary);font-size:var(--font-size-sm);color:var(--text-primary);font-family:var(--font-family-primary);transition:all var(--transition-fast);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--space-3) center;background-repeat:no-repeat;background-size:16px;padding-right:var(--space-10)}.tts-controls__select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #9146ff1a}.tts-controls__select:hover:not(:disabled){border-color:var(--color-primary)}.tts-controls__select:disabled{background-color:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;opacity:.6}.tts-controls__slider-container{position:relative;margin:var(--space-3) 0}.tts-controls__slider{width:100%;height:8px;border-radius:var(--radius-sm);background:var(--border-primary);outline:none;transition:background var(--transition-fast);cursor:pointer;appearance:none}.tts-controls__slider::-webkit-slider-track{width:100%;height:8px;border-radius:var(--radius-sm);background:var(--border-primary)}.tts-controls__slider::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-fast);border:2px solid var(--bg-primary)}.tts-controls__slider::-webkit-slider-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1);box-shadow:var(--shadow-lg)}.tts-controls__slider::-moz-range-track{width:100%;height:8px;border-radius:var(--radius-sm);background:var(--border-primary);border:none}.tts-controls__slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.tts-controls__slider::-moz-range-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1);box-shadow:var(--shadow-lg)}.tts-controls__slider:focus{box-shadow:0 0 0 3px #9146ff1a}.tts-controls__slider:disabled{cursor:not-allowed;opacity:.6}.tts-controls__slider:disabled::-webkit-slider-thumb{background:var(--text-tertiary);cursor:not-allowed;transform:none}.tts-controls__slider:disabled::-moz-range-thumb{background:var(--text-tertiary);cursor:not-allowed;transform:none}.tts-controls__slider-value{position:absolute;top:-30px;left:50%;transform:translate(-50%);background:var(--bg-elevated);color:var(--text-primary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border:1px solid var(--border-primary);box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--transition-fast);pointer-events:none}.tts-controls__slider:hover+.tts-controls__slider-value,.tts-controls__slider:focus+.tts-controls__slider-value{opacity:1}.tts-controls__actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;padding-top:var(--space-4);border-top:1px solid var(--border-secondary)}.tts-controls__button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;min-height:44px;position:relative;overflow:hidden}.tts-controls__button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-normal)}.tts-controls__button:hover:before{left:100%}.tts-controls__button:disabled{cursor:not-allowed;opacity:.6;transform:none}.tts-controls__button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.tts-controls__button--test{background-color:var(--color-info);color:var(--text-inverse);border-color:var(--color-info)}.tts-controls__button--test:hover:not(:disabled){background-color:var(--color-info-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.tts-controls__button--test:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.tts-controls__button--clear{background-color:var(--color-error);color:var(--text-inverse);border-color:var(--color-error)}.tts-controls__button--clear:hover:not(:disabled){background-color:var(--color-error-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.tts-controls__button--clear:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.tts-controls__button--confirm{background-color:var(--color-success);color:var(--text-inverse);border-color:var(--color-success);padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs);min-height:36px}.tts-controls__button--confirm:hover:not(:disabled){background-color:var(--color-success-hover);transform:translateY(-1px)}.tts-controls__button--cancel{background-color:var(--text-tertiary);color:var(--text-inverse);border-color:var(--text-tertiary);padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs);min-height:36px}.tts-controls__button--cancel:hover:not(:disabled){background-color:var(--text-secondary);transform:translateY(-1px)}.tts-controls__button-icon{font-size:var(--font-size-lg);flex-shrink:0}.tts-controls__button-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}.tts-controls__button--loading{pointer-events:none}.tts-controls__button--loading:before{display:none}.tts-controls__clear-queue{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}.tts-controls__confirmation{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-md);animation:fadeIn .3s ease-out;box-shadow:var(--shadow-sm)}.tts-controls__confirmation-text{font-size:var(--font-size-xs);color:var(--text-primary);font-weight:var(--font-weight-medium);display:flex;align-items:center;gap:var(--space-2)}.tts-controls__confirmation-text:before{content:"⚠️";font-size:var(--font-size-sm)}@media (max-width: 480px){.tts-controls{padding:var(--space-4)}.tts-controls__header{flex-direction:column;gap:var(--space-4);align-items:flex-start}.tts-controls__title{font-size:var(--font-size-lg)}.tts-controls__toggle-text{font-size:var(--font-size-xs)}.tts-controls__group{padding:var(--space-3);margin-bottom:var(--space-4)}.tts-controls__label{font-size:var(--font-size-xs)}.tts-controls__actions{flex-direction:column;gap:var(--space-2)}.tts-controls__button{width:100%;justify-content:center;min-height:48px}.tts-controls__confirmation{flex-direction:column;gap:var(--space-3);width:100%;text-align:center}.tts-controls__confirmation .tts-controls__button{width:auto;flex:1;min-width:120px}.tts-controls__slider-container{margin:var(--space-4) 0}.tts-controls__slider{height:12px}.tts-controls__slider::-webkit-slider-thumb{width:28px;height:28px}.tts-controls__slider::-moz-range-thumb{width:28px;height:28px}}@media (min-width: 481px) and (max-width: 768px){.tts-controls{padding:var(--space-5)}.tts-controls__header{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}.tts-controls__actions{gap:var(--space-2)}.tts-controls__button{flex:1;min-width:140px}}@media (min-width: 769px) and (max-width: 1024px){.tts-controls__group{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-4);align-items:center}.tts-controls__label{margin-bottom:0}}@media (min-width: 1025px){.tts-controls__actions{justify-content:flex-end}.tts-controls__button{width:auto;min-width:120px}}@media (max-height: 500px) and (orientation: landscape){.tts-controls{padding:var(--space-3)}.tts-controls__header{margin-bottom:var(--space-3);padding-bottom:var(--space-2)}.tts-controls__group{margin-bottom:var(--space-3);padding:var(--space-2)}.tts-controls__actions{margin-top:var(--space-3);padding-top:var(--space-2)}}@media (prefers-contrast: high){.tts-controls{border:3px solid var(--text-primary);background:var(--bg-primary)}.tts-controls:before{display:none}.tts-controls__button{border:2px solid var(--text-primary);background:var(--bg-primary);color:var(--text-primary)}.tts-controls__button:focus-visible{outline:3px solid var(--text-primary);outline-offset:3px}.tts-controls__slider:focus{outline:3px solid var(--text-primary);outline-offset:3px}.tts-controls__select:focus{outline:3px solid var(--text-primary);outline-offset:3px}.tts-controls__toggle-input:focus+.tts-controls__toggle-slider{outline:3px solid var(--text-primary);outline-offset:3px}.tts-controls__group{border:2px solid var(--text-primary);background:var(--bg-primary)}}@media (prefers-reduced-motion: reduce){.tts-controls,.tts-controls__button,.tts-controls__slider::-webkit-slider-thumb,.tts-controls__slider::-moz-range-thumb,.tts-controls__toggle-slider,.tts-controls__toggle-slider:before,.tts-controls__content,.tts-controls__group,.tts-controls__confirmation,.tts-controls__slider-value{transition:none;animation:none;transform:none}.tts-controls__button-spinner{animation:none;border-top-color:currentColor}.tts-controls__button:before{display:none}.tts-controls__button:hover{transform:none}}@media (prefers-color-scheme: light){.tts-controls{box-shadow:var(--shadow-md),0 0 20px #0000000d}.tts-controls__group{background:var(--bg-primary);box-shadow:inset 0 1px 3px #0000000d}.tts-controls__select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")}}@media print{.tts-controls{background:#fff;color:#000;border:2px solid black;box-shadow:none}.tts-controls:before{display:none}.tts-controls__title,.tts-controls__label,.tts-controls__toggle-text{color:#000}.tts-controls__button{background:#fff;color:#000;border:1px solid black}.tts-controls__group{background:#fff;border:1px solid black}.tts-controls__select{background:#fff;color:#000;border:1px solid black}.tts-controls__actions{display:none}}.tts-controls[role=region]{position:relative}.tts-controls__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tts-controls--loading{pointer-events:none;opacity:.8}.tts-controls--loading:after{content:"";position:absolute;inset:0;background:#9146ff1a;border-radius:var(--radius-lg);animation:pulse 2s ease-in-out infinite}.queue-status{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);position:relative;overflow:hidden}.queue-status:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-info),var(--color-success));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.queue-status:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.queue-status__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-secondary)}.queue-status__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.queue-status__title:before{content:"📋";font-size:var(--font-size-lg)}.queue-status__count{display:flex;align-items:center;gap:4px;padding:4px 12px;background-color:#3498db;color:#fff;border-radius:16px;font-size:14px;font-weight:500}.queue-status__count-number{font-weight:700;font-size:16px}.queue-status__count-label{font-size:12px}.queue-status__content{display:flex;flex-direction:column;gap:16px}.queue-status__current{padding:16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #dee2e6;border-radius:8px;transition:all .3s ease}.queue-status__current--empty{text-align:center;padding:24px;background:linear-gradient(135deg,#f1f3f4,#e8eaed);border-style:dashed}.queue-status__current-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.queue-status__current-indicator{display:flex;align-items:center;gap:8px}.queue-status__speaking-icon{font-size:18px;animation:pulse 2s infinite}.queue-status__speaking-text{font-weight:600;color:#27ae60;font-size:14px}.queue-status__speaking-animation{display:flex;align-items:center;gap:2px;margin-left:8px}.queue-status__wave{width:3px;height:12px;background:#27ae60;border-radius:2px;animation:wave 1.5s infinite ease-in-out}.queue-status__wave:nth-child(2){animation-delay:.2s}.queue-status__wave:nth-child(3){animation-delay:.4s}@keyframes wave{0%,40%,to{transform:scaleY(.4);opacity:.5}20%{transform:scaleY(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.queue-status__skip-button{background:#f39c12;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;font-size:14px}.queue-status__skip-button:hover{background:#e67e22;transform:translateY(-1px)}.queue-status__skip-button:active{transform:translateY(0)}.queue-status__skip-icon{font-size:14px}.queue-status__current-message{background:#fff;padding:12px;border-radius:6px;border-left:4px solid #27ae60}.queue-status__current-user{font-weight:600;color:#2c3e50;font-size:14px;margin-bottom:4px}.queue-status__current-text{color:#5a6c7d;font-size:14px;line-height:1.4;word-wrap:break-word}.queue-status__empty-icon{font-size:32px;margin-bottom:8px;opacity:.6}.queue-status__empty-text{color:#6c757d;font-size:14px;font-weight:500}.queue-status__info{display:flex;align-items:center;justify-content:center;padding:12px;background:#f8f9fa;border-radius:6px;border:1px solid #e9ecef}.queue-status__pending{display:flex;align-items:center;gap:8px;color:#f39c12;font-weight:500}.queue-status__pending-icon{font-size:16px;animation:rotate 2s linear infinite}.queue-status__pending-text{font-size:14px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.queue-status__empty-state{display:flex;align-items:center;gap:8px;color:#6c757d;font-weight:500}.queue-status__empty-state-icon{font-size:16px}.queue-status__empty-state-text{font-size:14px}.queue-status__controls{display:flex;justify-content:center;padding-top:12px;border-top:1px solid #e9ecef}.queue-status__clear-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#e74c3c;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.queue-status__clear-button:hover{background:#c0392b;transform:translateY(-1px)}.queue-status__clear-button:active{transform:translateY(0)}.queue-status__clear-icon{font-size:14px}.queue-status__clear-text{font-size:13px}.queue-status__processing{display:flex;justify-content:center;padding:8px;background:#3498db1a;border-radius:6px;border:1px solid rgba(52,152,219,.2)}.queue-status__processing-indicator{display:flex;align-items:center;gap:8px;color:#3498db;font-size:14px;font-weight:500}.queue-status__processing-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}.queue-status__processing-text{font-size:13px}@media (max-width: 768px){.queue-status{padding:12px;margin:12px 0}.queue-status__header{flex-direction:column;gap:12px;align-items:flex-start}.queue-status__current-header{flex-direction:column;gap:8px;align-items:flex-start}.queue-status__skip-button{align-self:flex-end}.queue-status__controls{padding-top:16px}.queue-status__clear-button{width:100%;justify-content:center}}@media (max-width: 480px){.queue-status__title{font-size:16px}.queue-status__count{padding:3px 10px;font-size:12px}.queue-status__count-number{font-size:14px}.queue-status__current{padding:12px}.queue-status__current-message{padding:10px}.queue-status__speaking-text,.queue-status__pending-text,.queue-status__empty-state-text{font-size:13px}}@media (prefers-color-scheme: dark){.queue-status{background:#2c3e50;border-color:#34495e;color:#ecf0f1}.queue-status__title{color:#ecf0f1}.queue-status__current{background:linear-gradient(135deg,#34495e,#2c3e50);border-color:#4a5f7a}.queue-status__current--empty{background:linear-gradient(135deg,#3a4a5c,#2f3d4e)}.queue-status__current-message{background:#34495e;color:#ecf0f1}.queue-status__current-user{color:#ecf0f1}.queue-status__current-text{color:#bdc3c7}.queue-status__info{background:#34495e;border-color:#4a5f7a}.queue-status__processing{background:#3498db33;border-color:#3498db4d}}@media (prefers-contrast: high){.queue-status,.queue-status__current{border-width:2px}.queue-status__skip-button:focus,.queue-status__clear-button:focus{outline:2px solid currentColor;outline-offset:2px}}@media (prefers-reduced-motion: reduce){.queue-status,.queue-status__skip-button,.queue-status__clear-button,.queue-status__current{transition:none}.queue-status__speaking-icon,.queue-status__wave,.queue-status__pending-icon,.queue-status__processing-spinner{animation:none}@keyframes pulse{0%,to{transform:scale(1)}}@keyframes wave{0%,to{transform:scaleY(1);opacity:1}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes spin{0%,to{transform:rotate(0)}}}.queue-status__skip-button:focus,.queue-status__clear-button:focus{outline:2px solid #3498db;outline-offset:2px}@media print{.queue-status{box-shadow:none;border:1px solid #000}.queue-status__speaking-animation,.queue-status__processing-spinner,.queue-status__skip-button,.queue-status__clear-button{display:none}}.filter-controls{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);position:relative;overflow:hidden}.filter-controls:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-warning),var(--color-error));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.filter-controls:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.filter-controls__header{margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-secondary)}.filter-controls__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.filter-controls__title:before{content:"🔍";font-size:var(--font-size-lg)}.filter-controls__content{display:flex;flex-direction:column;gap:20px}.filter-controls__group{display:flex;flex-direction:column;gap:8px}.filter-controls__label{font-weight:500;color:#2c3e50;font-size:14px;margin:0}.filter-controls__description{font-size:12px;color:#7f8c8d;margin:0;line-height:1.4}.filter-controls__toggle{display:flex;align-items:center}.filter-controls__toggle-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-controls__toggle-input{display:none}.filter-controls__toggle-slider{position:relative;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:background-color .3s ease;margin-right:12px}.filter-controls__toggle-slider:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.filter-controls__toggle-input:checked+.filter-controls__toggle-slider{background-color:#27ae60}.filter-controls__toggle-input:checked+.filter-controls__toggle-slider:before{transform:translate(26px)}.filter-controls__toggle-text{font-weight:500;color:#2c3e50;font-size:14px}.filter-controls__input-group{display:flex;align-items:center;gap:8px}.filter-controls__input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;color:#2c3e50;transition:border-color .2s ease,box-shadow .2s ease}.filter-controls__input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.filter-controls__input--error{border-color:#e74c3c}.filter-controls__input--error:focus{border-color:#e74c3c;box-shadow:0 0 0 2px #e74c3c33}.filter-controls__input-suffix{font-size:12px;color:#7f8c8d;white-space:nowrap}.filter-controls__error{display:flex;align-items:center;gap:6px;padding:8px 12px;background-color:#fee;border:1px solid #fcc;border-radius:4px;color:#c33;font-size:12px}.filter-controls__error-icon{font-size:14px}.filter-controls__button{display:flex;align-items:center;gap:4px;padding:8px 12px;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-controls__button:disabled{cursor:not-allowed;opacity:.6}.filter-controls__button--add{background-color:#27ae60;color:#fff}.filter-controls__button--add:hover:not(:disabled){background-color:#229954;transform:translateY(-1px)}.filter-controls__button--remove{background-color:#e74c3c;color:#fff;padding:4px 6px;min-width:24px;justify-content:center}.filter-controls__button--remove:hover:not(:disabled){background-color:#c0392b;transform:translateY(-1px)}.filter-controls__button-icon{font-size:12px}.filter-controls__blocked-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding:8px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px}.filter-controls__blocked-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background-color:#fff;border:1px solid #dee2e6;border-radius:4px;transition:background-color .2s ease}.filter-controls__blocked-item:hover{background-color:#f1f3f4}.filter-controls__blocked-username{font-size:13px;font-weight:500;color:#2c3e50;font-family:monospace}.filter-controls__empty-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;color:#6c757d;font-size:13px}.filter-controls__empty-icon{font-size:16px;opacity:.7}.filter-controls__summary{padding:12px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;margin-top:8px}.filter-controls__summary-title{margin:0 0 8px;font-size:14px;font-weight:600;color:#2c3e50}.filter-controls__summary-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.filter-controls__summary-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#495057}.filter-controls__summary-icon{font-size:14px;width:16px;text-align:center}@media (max-width: 768px){.filter-controls{padding:12px;margin:12px 0}.filter-controls__input-group{flex-direction:column;align-items:stretch}.filter-controls__input-suffix{align-self:flex-start;margin-top:4px}.filter-controls__button--add{margin-top:8px}.filter-controls__blocked-item{flex-direction:column;align-items:flex-start;gap:8px}.filter-controls__button--remove{align-self:flex-end}}@media (max-width: 480px){.filter-controls__title{font-size:16px}.filter-controls__toggle-text,.filter-controls__label{font-size:13px}.filter-controls__description{font-size:11px}}@media (prefers-color-scheme: dark){.filter-controls{background:#2c3e50;border-color:#34495e;color:#ecf0f1}.filter-controls__title,.filter-controls__toggle-text,.filter-controls__label{color:#ecf0f1}.filter-controls__description{color:#bdc3c7}.filter-controls__input{background-color:#34495e;border-color:#4a5f7a;color:#ecf0f1}.filter-controls__input:focus{border-color:#3498db}.filter-controls__input-suffix{color:#bdc3c7}.filter-controls__blocked-list{background-color:#34495e;border-color:#4a5f7a}.filter-controls__blocked-item{background-color:#2c3e50;border-color:#4a5f7a}.filter-controls__blocked-item:hover{background-color:#34495e}.filter-controls__blocked-username{color:#ecf0f1}.filter-controls__empty-state{background-color:#34495e;border-color:#4a5f7a;color:#bdc3c7}.filter-controls__summary{background-color:#34495e;border-color:#4a5f7a}.filter-controls__summary-title{color:#ecf0f1}.filter-controls__summary-item{color:#bdc3c7}.filter-controls__error{background-color:#4a2c2a;border-color:#8b4513;color:#f8d7da}}@media (prefers-contrast: high){.filter-controls{border-width:2px}.filter-controls__button{border:2px solid transparent}.filter-controls__button:focus{outline:2px solid currentColor;outline-offset:2px}.filter-controls__input:focus{outline:2px solid #3498db;outline-offset:2px}.filter-controls__toggle-input:focus+.filter-controls__toggle-slider{outline:2px solid #3498db;outline-offset:2px}}@media (prefers-reduced-motion: reduce){.filter-controls,.filter-controls__button,.filter-controls__toggle-slider,.filter-controls__toggle-slider:before,.filter-controls__input,.filter-controls__blocked-item{transition:none}}.filter-controls__blocked-list::-webkit-scrollbar{width:6px}.filter-controls__blocked-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.filter-controls__blocked-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.filter-controls__blocked-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (prefers-color-scheme: dark){.filter-controls__blocked-list::-webkit-scrollbar-track{background:#4a5f7a}.filter-controls__blocked-list::-webkit-scrollbar-thumb{background:#6c7b7f}.filter-controls__blocked-list::-webkit-scrollbar-thumb:hover{background:#8a9ba0}}.connection-status{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--border-primary);background-color:var(--bg-secondary);transition:all var(--transition-normal);font-family:var(--font-family-primary);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}.connection-status:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.connection-status:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.connection-status--connected{border-color:var(--color-success);background-color:var(--color-success-bg)}.connection-status--connected:before{background:linear-gradient(90deg,var(--color-success),var(--color-info))}.connection-status--connecting{border-color:var(--color-warning);background-color:var(--color-warning-bg)}.connection-status--connecting:before{background:linear-gradient(90deg,var(--color-warning),var(--color-info));animation:pulse 2s ease-in-out infinite}.connection-status--disconnected{border-color:var(--text-tertiary);background-color:var(--bg-tertiary)}.connection-status--disconnected:before{background:var(--text-tertiary)}.connection-status--error{border-color:var(--color-error);background-color:var(--color-error-bg)}.connection-status--error:before{background:linear-gradient(90deg,var(--color-error),var(--color-warning))}.connection-status__indicator{display:flex;align-items:center;gap:.5rem;font-weight:500}.connection-status__icon{font-size:1.2rem;line-height:1}.connection-status__text{font-size:.95rem;color:var(--text-primary, #212529)}.connection-status--connecting .connection-status__icon{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.connection-status--disconnected .connection-status__icon{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-status__error{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:#dc35451a;border-radius:4px;border-left:4px solid #dc3545}.connection-status__error-icon{font-size:1rem;line-height:1}.connection-status__error-text{font-size:.875rem;color:#721c24;font-weight:500}.connection-status__reconnect-info{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;color:var(--text-secondary, #6c757d)}.connection-status__attempts{font-weight:500}.connection-status__countdown{font-style:italic}.connection-status__actions{display:flex;gap:.5rem;margin-top:.25rem}.connection-status__button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:80px}.connection-status__button:disabled{cursor:not-allowed;opacity:.6}.connection-status__button--connect{background-color:#28a745;color:#fff}.connection-status__button--connect:hover:not(:disabled){background-color:#218838}.connection-status__button--disconnect{background-color:#dc3545;color:#fff}.connection-status__button--disconnect:hover:not(:disabled){background-color:#c82333}.connection-status__button:focus{outline:2px solid #007bff;outline-offset:2px}@media (max-width: 768px){.connection-status{padding:.75rem;gap:.5rem}.connection-status__indicator{flex-direction:column;align-items:flex-start;gap:.25rem}.connection-status__text{font-size:.875rem}.connection-status__reconnect-info{font-size:.8rem}.connection-status__button{padding:.4rem .8rem;font-size:.8rem;min-width:70px}}@media (prefers-contrast: high){.connection-status{border-width:3px}.connection-status--connected,.connection-status--error{background-color:#fff;color:#000}.connection-status__error{background-color:#fff;border-left-width:6px}}@media (prefers-reduced-motion: reduce){.connection-status__icon{animation:none}.connection-status,.connection-status__button{transition:none}}@media (prefers-color-scheme: dark){.connection-status{background-color:var(--bg-secondary-dark, #2d3748);color:var(--text-primary-dark, #e2e8f0)}.connection-status--connected{background-color:#1a2e1a;border-color:#38a169}.connection-status--connecting{background-color:#2d2a1a;border-color:#d69e2e}.connection-status--disconnected{background-color:#2d2d2d;border-color:#a0aec0}.connection-status--error{background-color:#2d1a1a;border-color:#e53e3e}.connection-status__text{color:var(--text-primary-dark, #e2e8f0)}.connection-status__error{background-color:#e53e3e33}.connection-status__error-text{color:#feb2b2}.connection-status__reconnect-info{color:var(--text-secondary-dark, #a0aec0)}}.tab-container{display:flex;flex-direction:column;height:100%;background:var(--bg-secondary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border-primary)}.tab-container__nav{display:flex;background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-container__nav::-webkit-scrollbar{display:none}.tab-container__tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);position:relative;white-space:nowrap;min-width:120px;justify-content:center;border-bottom:3px solid transparent}.tab-container__tab:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(145,70,255,.05),transparent);opacity:0;transition:opacity var(--transition-fast)}.tab-container__tab:hover:before{opacity:1}.tab-container__tab:hover{color:var(--text-primary);background:var(--bg-elevated)}.tab-container__tab:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px;z-index:1}.tab-container__tab--active{color:var(--color-primary);background:var(--bg-primary);border-bottom-color:var(--color-primary);font-weight:var(--font-weight-semibold)}.tab-container__tab--active:before{opacity:.3}.tab-container__tab-icon{font-size:var(--font-size-lg);line-height:1;flex-shrink:0}.tab-container__tab-label{flex:1;text-align:center}.tab-container__tab-badge{background:var(--color-info);color:var(--text-inverse);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);min-width:20px;text-align:center;line-height:1;flex-shrink:0;transition:all var(--transition-fast)}.tab-container__tab--active .tab-container__tab-badge{background:var(--color-primary);transform:scale(1.1)}.tab-container__content{flex:1;position:relative;overflow:hidden}.tab-container__panel{position:absolute;inset:0;padding:var(--space-6);overflow-y:auto;opacity:0;transform:translateY(10px);transition:all var(--transition-normal);pointer-events:none}.tab-container__panel--active{opacity:1;transform:translateY(0);pointer-events:auto}.tab-container__panel{scrollbar-width:thin;scrollbar-color:var(--border-primary) var(--bg-secondary)}.tab-container__panel::-webkit-scrollbar{width:8px}.tab-container__panel::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-sm)}.tab-container__panel::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.tab-container__panel::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}@media (max-width: 480px){.tab-container__tab{padding:var(--space-3) var(--space-2);min-width:80px;font-size:var(--font-size-xs)}.tab-container__tab-icon{font-size:var(--font-size-base)}.tab-container__tab-label{display:none}.tab-container__tab-badge{font-size:10px;padding:2px var(--space-1);min-width:16px}.tab-container__panel{padding:var(--space-4)}}@media (min-width: 481px) and (max-width: 768px){.tab-container__tab{padding:var(--space-3) var(--space-4);min-width:100px}.tab-container__panel{padding:var(--space-5)}}@media (min-width: 769px) and (max-width: 1024px){.tab-container__tab{min-width:140px}}@media (min-width: 1025px){.tab-container__tab{min-width:160px}}@media (max-height: 500px) and (orientation: landscape){.tab-container__tab{padding:var(--space-2) var(--space-4)}.tab-container__panel{padding:var(--space-4)}}@media (prefers-contrast: high){.tab-container{border:3px solid var(--text-primary)}.tab-container__nav{border-bottom:3px solid var(--text-primary)}.tab-container__tab{border:2px solid transparent}.tab-container__tab--active{border:2px solid var(--text-primary);background:var(--bg-primary)}.tab-container__tab:focus-visible{outline:3px solid var(--text-primary);outline-offset:3px}}@media (prefers-reduced-motion: reduce){.tab-container__tab,.tab-container__panel,.tab-container__tab-badge,.tab-container__tab:before{transition:none;animation:none;transform:none}.tab-container__panel--active,.tab-container__tab--active .tab-container__tab-badge{transform:none}}@media (prefers-color-scheme: light){.tab-container{box-shadow:var(--shadow-md),0 0 20px #0000000d}.tab-container__nav{background:var(--bg-primary);box-shadow:inset 0 -1px 0 var(--border-primary)}.tab-container__tab:hover{background:var(--bg-tertiary)}}@media print{.tab-container{background:#fff;color:#000;border:2px solid black;box-shadow:none}.tab-container__nav{background:#fff;border-bottom:2px solid black}.tab-container__tab{color:#000;background:#fff}.tab-container__tab--active{color:#000;background:#fff;border-bottom:3px solid black}.tab-container__panel{position:static;opacity:1;transform:none;pointer-events:auto;padding:1rem}.tab-container__panel:not(.tab-container__panel--active){display:none}}.tab-container[role=region]{position:relative}.tab-container--loading .tab-container__content{display:flex;align-items:center;justify-content:center}.tab-container--loading .tab-container__panel{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-4)}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tab-container__panel--active{animation:tabFadeIn .3s ease-out}@media (prefers-reduced-motion: reduce){.tab-container__panel--active{animation:none}}.app{display:flex;flex-direction:column;height:100vh;max-width:1400px;margin:0 auto;padding:var(--space-6);gap:var(--space-6);background-color:var(--bg-primary);color:var(--text-primary);animation:fadeIn .5s ease-out}.app-header{text-align:center;padding:var(--space-6) 0;border-bottom:2px solid var(--border-primary);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-info),var(--color-success));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.app-header h1{margin:0 0 var(--space-3) 0;font-size:var(--font-size-4xl);color:var(--text-primary);font-weight:var(--font-weight-bold);background:linear-gradient(135deg,var(--color-primary),var(--color-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.1)}.app-header p{margin:0;color:var(--text-secondary);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.app-status{margin-top:var(--space-4);padding:var(--space-4);background-color:var(--color-info-bg);border:1px solid var(--color-info);border-radius:var(--radius-md);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-3);animation:slideIn .3s ease-out}.app-status:before{content:"⚡";font-size:var(--font-size-lg);flex-shrink:0}.app-errors{margin-top:var(--space-4);padding:var(--space-4);background-color:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--text-primary);animation:slideIn .3s ease-out}.error-message{margin:var(--space-2) 0;font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-2)}.error-message:before{content:"⚠️";flex-shrink:0}.app-main{flex:1;display:flex;flex-direction:column;min-height:0}.app-tabs{flex:1;min-height:0}.app-chat-display{height:100%;border:none;border-radius:0;box-shadow:none;background:transparent}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-8);color:var(--text-secondary)}.app-loading-spinner{width:40px;height:40px;border:3px solid var(--border-secondary);border-top:3px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.app-loading-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);text-align:center}@media (max-width: 480px){.app{padding:var(--space-3);gap:var(--space-4);height:100vh;overflow:hidden}.app-header{padding:var(--space-4) 0}.app-header h1{font-size:var(--font-size-2xl);line-height:var(--line-height-tight)}.app-header p{font-size:var(--font-size-sm)}.app-main{gap:var(--space-4);flex:1;min-height:0}.app-chat-display{min-height:250px}.app-status,.app-errors{margin-top:var(--space-3);padding:var(--space-3);font-size:var(--font-size-sm)}}@media (min-width: 481px) and (max-width: 768px){.app{padding:var(--space-4);gap:var(--space-5)}.app-header{padding:var(--space-5) 0}.app-header h1{font-size:var(--font-size-3xl)}.app-header p{font-size:var(--font-size-base)}.app-main{gap:var(--space-5)}.app-chat-display{min-height:350px}}@media (min-width: 769px) and (max-width: 1024px){.app{padding:var(--space-5);gap:var(--space-6)}.app-chat-display{min-height:450px}}@media (min-width: 1025px) and (max-width: 1440px){.app{padding:var(--space-6);gap:var(--space-8)}.app-header h1{font-size:var(--font-size-4xl)}.app-header p{font-size:var(--font-size-xl)}.app-chat-display{min-height:500px}}@media (min-width: 1441px){.app{padding:var(--space-8);gap:var(--space-10);max-width:1600px}.app-header h1{font-size:3.5rem}.app-header p{font-size:var(--font-size-xl)}.app-chat-display{min-height:600px}}@media (max-height: 500px) and (orientation: landscape){.app{padding:var(--space-2);gap:var(--space-3)}.app-header{padding:var(--space-2) 0}.app-header h1{font-size:var(--font-size-xl)}.app-header p{font-size:var(--font-size-sm)}.app-main{gap:var(--space-3)}.app-chat-display{min-height:200px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.app-header h1{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion: reduce){.app,.app-status,.app-errors{animation:none}.app-loading-spinner{animation:none;border-top-color:var(--color-primary)}}@media (prefers-contrast: high){.app{border:2px solid var(--text-primary)}.app-header{border-bottom-width:3px;background:var(--bg-primary)}.app-header h1{background:none;-webkit-text-fill-color:var(--text-primary);color:var(--text-primary)}.app-chat-display{border-width:2px}}@media print{.app{height:auto;padding:1rem;gap:1rem;background:#fff;color:#000;box-shadow:none}.app-header{background:#fff;border-bottom:2px solid black}.app-header h1{background:none;-webkit-text-fill-color:black;color:#000}.app-status,.app-errors{background:#fff;border:1px solid black;color:#000}}