@import "https://fonts.googleapis.com/css2?family=Train+One&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:Arial,Helvetica,sans-serif}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:40px}img,video{max-width:100%;height:auto}button,input{font:inherit}.dashboard{background:#4daeb5;min-height:calc(100vh - 104px);position:relative;overflow:hidden}.title{color:#0000;-webkit-text-stroke:.1px white;z-index:2;text-align:center;margin:0;font-family:Train One,cursive;font-size:clamp(28px,5vw,42px);position:absolute;top:10px;left:50%;transform:translate(-50%)}.search-box{z-index:2;background:#2a2a2a;border-radius:40px;align-items:center;width:600px;max-width:90%;height:60px;padding-left:20px;display:flex;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.search-box input{color:#fff;background:0 0;border:none;outline:none;flex:1;font-size:18px}.search-box button{color:#fff;cursor:pointer;background:#000;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.hero-image{z-index:1;width:600px;max-width:80%;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}@media (width<=1024px){.title{font-size:clamp(20px,3vw,30px);top:10px}.search-box{width:450px;height:45px;top:50%}.hero-image{width:400px}}@media (width<=768px){.title{font-size:26px;top:50px}.search-box{width:255px;height:30px;top:53%}.search-box button{width:30px;height:30px}.hero-image{width:320px;top:58%}}@media (width<=480px){.title{font-size:20px;top:40px}.search-box{top:53%}.hero-image{width:260px}}.header{background:#4daeb5;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex}.header.no-title{justify-content:flex-end}.logo-text{color:#0000;-webkit-text-stroke:1px white;align-items:center;font-family:Train One,cursive;font-size:26px;display:flex}.right-section{align-items:center;gap:10px;display:flex}.grok-box{background:#111;border-radius:8px;align-items:center;padding:6px 12px;display:flex}.grok-box img{height:26px;display:block}.settings-container{align-items:center;display:flex;position:relative}.dropdown{z-index:1000;background:#1a1a1a;border-radius:6px;min-width:120px;position:absolute;top:35px;right:0;box-shadow:0 4px 10px #0006}.dropdown-item{color:#fff;cursor:pointer;text-align:center;padding:10px 12px}.dropdown-item:hover{background:#333}.dropdown{opacity:0;animation:.2s forwards dropdownFade;transform:translateY(-5px)}@keyframes dropdownFade{to{opacity:1;transform:translateY(0)}}.settings-icon{color:#fff;cursor:pointer;margin-left:4px;font-size:18px}@media (width<=768px){.header{padding:0 16px}.logo-text{font-size:22px}.right-section{gap:8px}.grok-box img{height:22px}}@media (width<=480px){.header{padding:0 12px}.logo-text{font-size:20px}}.footer{color:#fff;background-color:#000;justify-content:center;align-items:center;width:100%;height:40px;font-size:12px;display:flex}@media (width<=600px){.footer{text-align:center;padding:0 8px;font-size:11px}}.player-page{background:#000;flex-direction:row;height:calc(100vh - 104px);display:flex;overflow:hidden}.video-section{background:#000;flex:3;justify-content:center;align-items:center;height:100%;display:flex;overflow:hidden}.video-player{object-fit:cover;width:100%;height:100%}.chat-section{color:#fff;background:#0d0d0d;border-left:1px solid #ccc;flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}@media (width<=900px){.player-page{flex-direction:column}.video-section{flex:none;height:50vh}.video-player{object-fit:cover;height:100%}.chat-section{border-top:1px solid #ccc;border-left:none;flex:1}}@media (width<=600px){.video-section,.video-player{height:auto}}.chat-container{background:#0d0d0d;flex-direction:column;height:100%;display:flex;overflow:hidden}.chat-messages{flex:1;min-height:0;padding:15px;overflow-y:auto}.chat-bubble{border-radius:12px;max-width:75%;margin:8px 0;padding:12px;font-size:14px;line-height:1.4}.chat-bubble.user{color:#fff;text-align:right;background:#2a2a2a;margin-left:auto}.chat-bubble.bot{color:#fff;background:#1a1a1a;margin-right:auto}.chat-input{background:#1a1a1a;border-radius:14px;flex-shrink:0;align-items:center;height:75px;margin:12px;padding:0 10px;display:flex;box-shadow:0 2px 10px #0006}.chat-input input{color:#ccc;background:0 0;border:none;outline:none;flex:1;height:100%;padding-left:10px;font-size:14px}.chat-input input::placeholder{color:#777}.chat-input button{color:#fff;cursor:pointer;background:#2b7a78;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.chat-input button:hover{background:#3fa5a3}.typing span{background:#fff;border-radius:50%;width:6px;height:6px;margin:0 2px;animation:1.4s infinite blink;display:inline-block}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.video-container{width:100%;height:100%;position:relative}.video-element{object-fit:cover;width:100%;height:100%}.video-controls{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border-radius:10px;align-items:center;gap:14px;padding:5px 20px;display:flex;position:absolute;bottom:20px;left:40px;right:40px}.controls-left,.controls-right{align-items:center;gap:10px;display:flex}.controls-center{flex:1;align-items:center;display:flex}.control-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.control-btn:hover,.control-btn.primary{background:0 0}.control-btn img{object-fit:contain;filter:brightness(0)invert();width:24px;height:24px}.time-label{color:#fff;opacity:.9;font-size:11px}.progress-bar{appearance:none;background:linear-gradient(to right, #fff 0%, #fff var(--progress,0%), #fff6 var(--progress,0%), #fff6 100%);cursor:pointer;border-radius:999px;width:100%;height:4px}.progress-bar::-webkit-slider-thumb{appearance:none;background:#f33b2f;border-radius:50%;width:12px;height:12px}.progress-bar::-moz-range-thumb{background:#f33b2f;border:none;border-radius:50%;width:12px;height:12px}.volume-slider{appearance:none;background:linear-gradient(to right, #fff 0%, #fff var(--volume,100%), #fff6 var(--volume,100%), #fff6 100%);cursor:pointer;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;width:10px;height:10px}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:10px;height:10px}.settings-wrapper{position:relative}.settings-menu{z-index:9999;background:#000000f2;border-radius:12px;flex-direction:column;gap:12px;width:240px;padding:14px;display:flex;position:absolute;bottom:calc(100% + 10px);right:0}.settings-section{flex-direction:column;gap:8px;display:flex}.settings-title{color:#aaa;font-size:11px}.settings-options{flex-wrap:wrap;gap:6px;display:flex}.settings-option{color:#ddd;cursor:pointer;background:#1f1f1f;border:none;border-radius:999px;padding:5px 10px}.settings-option.active{color:#fff;background:#f33b2f}