:root{--bg-color-light:#f0f0f0;--text-color-light:#0e0e10;--border-color-light:#e0e0e0;--header-bg-light:#ffffff;--engine-bg-light:#ffffff;--message-bg-light:#ffffff;--message-bg-alt-light:#f9f9f9;--accent-color-light:#007bff;--switch-bg-light:#ccc;--switch-slider-light:white;--bg-color-dark:#0e0e10;--text-color-dark:#efeff1;--border-color-dark:#2a2a2d;--header-bg-dark:#18181b;--engine-bg-dark:#1f1f23;--message-bg-dark:#18181b;--message-bg-alt-dark:#242427;--accent-color-dark:#a970ff;--switch-bg-dark:#555;--switch-slider-dark:#a970ff;--highlight-mod-dark:rgba(255, 71, 71, 0.1);--highlight-vip-dark:rgba(224, 5, 185, 0.1);--highlight-sub-dark:rgba(49, 118, 224, 0.1);--highlight-mod-light:rgba(255, 71, 71, 0.1);--highlight-vip-light:rgba(224, 5, 185, 0.1);--highlight-sub-light:rgba(49, 118, 224, 0.1);--font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{font-family:var(--font-family);margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:background-color .3s,color .3s}body.theme-light{background-color:var(--bg-color-light);color:var(--text-color-light)}body.theme-dark{background-color:var(--bg-color-dark);color:var(--text-color-dark)}.header{padding:10px;border-bottom:1px solid;flex-shrink:0}body.theme-light .header{background-color:var(--header-bg-light);border-color:var(--border-color-light)}body.theme-dark .header{background-color:var(--header-bg-dark);border-color:var(--border-color-dark)}.add-chat-container{display:flex;max-width:600px;margin:0 auto}#chat-url-input{flex-grow:1;padding:8px 12px;border:1px solid;border-radius:4px 0 0 4px;outline:0;font-size:14px}body.theme-light #chat-url-input{background-color:#fff;border-color:var(--border-color-light);color:var(--text-color-light)}body.theme-dark #chat-url-input{background-color:#3a3a3d;border-color:var(--border-color-dark);color:var(--text-color-dark)}#add-chat-btn{padding:8px 16px;border:none;cursor:pointer;font-weight:700;border-radius:0 4px 4px 0;transition:background-color .2s;background-color:#9147ff}body.theme-light #add-chat-btn{background-color:var(--accent-color-light);color:#fff}body.theme-dark #add-chat-btn{background-color:var(--accent-color-dark);color:#fff}body.theme-light #add-chat-btn:hover{background-color:#0056b3}body.theme-dark #add-chat-btn:hover{background-color:#9147ff}.main-content-wrapper{flex-grow:1;position:relative;overflow:hidden}.chat-container{height:100%;overflow-y:auto;overflow-x:hidden;padding:10px}#chat-messages{display:flex;flex-direction:column}body.layout-centered #chat-messages{max-width:768px;width:100%;height:100%;display:flex;flex-direction:column;margin:0 auto;transition:max-width .4s ease-in-out}.chat-message{padding:8px 12px;margin-bottom:4px;border-radius:4px;animation:.3s ease-out forwards slideIn;opacity:0;transform:translateY(20px);line-height:1.5}body.highlight-mods .chat-message[data-role=broadcaster],body.highlight-mods .chat-message[data-role=moderator]{background-color:var(--highlight-mod-dark)!important}body.highlight-vips .chat-message[data-role=vip]{background-color:var(--highlight-vip-dark)!important}body.highlight-subs .chat-message[data-role=subscriber]{background-color:var(--highlight-sub-dark)!important}body.theme-light.highlight-mods .chat-message[data-role=broadcaster],body.theme-light.highlight-mods .chat-message[data-role=moderator]{background-color:var(--highlight-mod-light)!important}body.theme-light.highlight-vips .chat-message[data-role=vip]{background-color:var(--highlight-vip-light)!important}body.theme-light.highlight-subs .chat-message[data-role=subscriber]{background-color:var(--highlight-sub-light)!important}body.subs-only-mode .chat-message[data-role=user]{display:none}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}body.theme-light .chat-message.even-row{background-color:var(--message-bg-alt-light)}body.theme-dark .chat-message.even-row{background-color:var(--message-bg-alt-dark)}.message-timestamp{display:none;margin-right:6px;font-size:.9em;opacity:.7}body.show-timestamps .message-timestamp{display:inline}.message-platform-badge{width:16px;height:16px;vertical-align:middle;margin:-4px 2px}.message-channel-badge{display:none;width:18px;height:18px;margin-right:6px;vertical-align:middle;border-radius:50%}body.show-channel-badges .message-channel-badge{display:inline-block}.message-user-badge{width:16px;height:16px;margin-right:4px;vertical-align:middle}.message-username{font-weight:700;margin-right:6px;cursor:pointer;transition:filter .2s}.message-username:hover{filter:brightness(1.2)}.message-content{word-wrap:break-word}.message-emote{width:28px;height:28px;vertical-align:middle;margin:-4px 2px}#scroll-to-bottom-btn{position:absolute;bottom:15px;left:50%;background-color:var(--accent-color-dark);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;text-align:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(60px);transition:opacity .3s,visibility .3s,transform .3s;z-index:10}#scroll-to-bottom-btn.visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}body.theme-light #scroll-to-bottom-btn{background-color:var(--accent-color-light)}#chat-sources-list{display:flex;flex-direction:column;gap:10px}.chat-source-item{display:flex;align-items:center;padding:8px;border-radius:4px}body.theme-light .chat-source-item{background-color:var(--bg-color-light)}body.theme-dark .chat-source-item{background-color:#2a2a2d}.chat-source-item img{width:20px;height:20px;margin-right:10px}.chat-source-item span{flex-grow:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-source-item .remove-btn{background:#e53e3e;color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-weight:700;line-height:20px;text-align:center;margin-left:10px}.setting-item-full{flex-direction:column;align-items:flex-start;gap:8px}.setting-item-full input{width:100%;padding:8px 12px;border:1px solid;border-radius:4px;outline:0;font-size:14px}.setting-divider{border:none;height:1px;background-color:var(--border-color-dark);margin:20px 0}body.theme-light .setting-divider{background-color:var(--border-color-light)}.setting-item label{font-size:14px}body.theme-light .setting-item-full input{background-color:#fff;border-color:var(--border-color-light);color:var(--text-color-light)}body.theme-dark .setting-item-full input{background-color:#3a3a3d;border-color:var(--border-color-dark);color:var(--text-color-dark)}.language-buttons{display:flex;gap:5px}.language-buttons button{background:0 0;border:1px solid;border-radius:4px;padding:6px 12px;cursor:pointer;font-weight:700;transition:background-color .2s,color .2s}body.theme-light .language-buttons button{border-color:var(--border-color-light);color:var(--text-color-light)}body.theme-dark .language-buttons button{border-color:var(--border-color-dark);color:var(--text-color-dark)}.language-buttons button.active{background-color:var(--accent-color-dark);color:#fff;border-color:var(--accent-color-dark)}body.theme-light .language-buttons button.active{background-color:var(--accent-color-light);border-color:var(--accent-color-light)}.setting-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}#font-size-slider{width:150px}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;transition:.4s}body.theme-light .slider{background-color:var(--switch-bg-light)}body.theme-dark .slider{background-color:var(--switch-bg-dark)}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s}body.theme-light .slider:before{background-color:var(--switch-slider-light)}input:checked+.slider{background-color:var(--platform-color,var(--accent-color-dark))}input:checked+.slider:before{transform:translateX(20px)}.slider.round{border-radius:24px}.slider.round:before{border-radius:50%}::-webkit-scrollbar{width:8px}body.theme-light ::-webkit-scrollbar-track{background:#f1f1f1}body.theme-dark ::-webkit-scrollbar-track{background:#2a2a2d}::-webkit-scrollbar-thumb{border-radius:4px}body.theme-light ::-webkit-scrollbar-thumb{background:#ccc}body.theme-dark ::-webkit-scrollbar-thumb{background:#555}body.theme-light ::-webkit-scrollbar-thumb:hover{background:#bbb}body.theme-dark ::-webkit-scrollbar-thumb:hover{background:#777}.engine-tabs-container{flex-shrink:0;z-index:1001;border-top:1px solid}body.theme-light .engine-tabs-container{background-color:var(--header-bg-light);border-color:var(--border-color-light)}body.theme-dark .engine-tabs-container{background-color:var(--header-bg-dark);border-color:var(--border-color-dark)}.engine-tabs{display:flex;justify-content:center}.tab-btn{padding:10px 20px;cursor:pointer;border:none;background:0 0;font-size:14px;font-weight:600;position:relative;outline:0;width:120px;text-align:center}body.theme-light .tab-btn{color:#6c6c70}body.theme-dark .tab-btn{color:#adadb8}.tab-btn.active{font-weight:700}body.theme-light .tab-btn.active{color:var(--accent-color-light)}body.theme-dark .tab-btn.active{color:var(--accent-color-dark)}.tab-btn.active::after{content:"";position:absolute;top:0;left:0;right:0;height:2px}body.theme-light .tab-btn.active::after{background-color:var(--accent-color-light)}body.theme-dark .tab-btn.active::after{background-color:var(--accent-color-dark)}.engine-modal-container{position:fixed;bottom:0;left:0;right:0;top:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;transition:background-color .3s}.engine-modal-container.visible{pointer-events:auto;background-color:rgba(0,0,0,.5)}.engine-content-wrapper{background:var(--engine-bg-dark);width:100%;max-width:800px;border-radius:10px 10px 0 0;transform:translateY(100%);transition:transform .3s ease-out;position:relative;padding-bottom:45px;padding-top:12px;box-shadow:0 -5px 20px rgba(0,0,0,.2)}body.theme-light .engine-content-wrapper{background:var(--engine-bg-light)}.engine-modal-container.visible .engine-content-wrapper{transform:translateY(0)}#close-engine-btn{position:absolute;top:0;right:6px;background:0 0;border:none;font-size:24px;font-weight:700;cursor:pointer;color:var(--text-color-dark);padding:5px;line-height:1}body.theme-light #close-engine-btn{color:var(--text-color-light)}.engine-content{padding:20px;max-height:50vh;overflow-y:auto}.tab-pane{display:none}.tab-pane.active{display:block}