@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.home{background:linear-gradient(135deg,#0f0c29,#1a1a3e,#24243e);justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.home__container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:20px;width:100%;max-width:420px;padding:2.5rem 2rem;box-shadow:0 8px 32px #0006}.home__header{text-align:center;margin-bottom:2rem}.home__logo{justify-content:center;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.home__logo-icon{font-size:2rem}.home__title{color:#fff;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2rem;font-weight:700}.home__subtitle{color:#ffffff80;margin:0;font-size:.9rem}.home__field{margin-bottom:1.5rem}.home__label{color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.8rem;font-weight:500;display:block}.home__input{color:#fff;box-sizing:border-box;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.home__input:focus{border-color:#a78bfa80;box-shadow:0 0 0 3px #a78bfa1a}.home__input::placeholder{color:#ffffff4d}.home__input--code{letter-spacing:.15em;text-align:center;text-transform:uppercase;flex:1;font-family:JetBrains Mono,Fira Code,monospace;font-size:1.1rem}.home__error{color:#fca5a5;text-align:center;background:#ef44441f;border:1px solid #ef44444d;border-radius:10px;margin-bottom:1rem;padding:.75rem 1rem;font-size:.85rem}.home__actions{flex-direction:column;gap:1.25rem;display:flex}.home__section{flex-direction:column;gap:.75rem;display:flex}.home__btn{cursor:pointer;border:none;border-radius:12px;outline:none;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.home__btn:disabled{opacity:.5;cursor:not-allowed}.home__btn--primary{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1);box-shadow:0 4px 15px #8b5cf64d}.home__btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #8b5cf673}.home__btn--secondary{color:#fff;background:#ffffff14;border:1px solid #ffffff26}.home__btn--secondary:hover:not(:disabled){background:#ffffff1f;transform:translateY(-1px)}.home__divider{color:#ffffff4d;align-items:center;gap:1rem;font-size:.8rem;display:flex}.home__divider:before,.home__divider:after{content:"";background:#ffffff1a;flex:1;height:1px}.home__join-row{align-items:center;gap:.75rem;display:flex}.home__code-display{text-align:center;background:#8b5cf614;border:1px solid #8b5cf633;border-radius:14px;margin-bottom:1rem;padding:1.5rem}.home__code-label{color:#fff9;margin:0 0 .75rem;font-size:.85rem}.home__code-value{justify-content:center;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.home__code-value span{letter-spacing:.2em;color:#a78bfa;font-family:JetBrains Mono,Fira Code,monospace;font-size:2rem;font-weight:700}.home__code-copy{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;padding:.4rem .6rem;font-size:1.1rem;transition:all .2s}.home__code-copy:hover{background:#ffffff1f}.home__code-hint{color:#fff6;margin:0 0 1rem;font-size:.8rem}.video-tile{aspect-ratio:16/9;background:#111827;border:1px solid #ffffff0f;border-radius:12px;position:relative;overflow:hidden}.video-tile__video{object-fit:cover;width:100%;height:100%;display:block;transform:scaleX(-1)}.video-tile--local .video-tile__video{transform:scaleX(-1)}.video-tile:not(.video-tile--local) .video-tile__video{transform:none}.video-tile--cam-off .video-tile__video{opacity:0}.video-tile__avatar{background:linear-gradient(135deg,#1a1235,#0f172a);flex-direction:column;justify-content:center;align-items:center;gap:.6rem;display:flex;position:absolute;inset:0}.video-tile__avatar-circle{color:#fff;letter-spacing:.02em;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 0 20px #7c3aed66}.video-tile__cam-off-badge{color:#ffffff73;background:#00000059;border:1px solid #ffffff14;border-radius:99px;padding:.15rem .45rem;font-size:.68rem}.video-tile__label{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;text-overflow:ellipsis;background:#0000008c;border-radius:6px;max-width:calc(100% - 1.5rem);padding:.2rem .5rem;font-size:.75rem;font-weight:500;position:absolute;bottom:.5rem;left:.75rem;overflow:hidden}.video-tile__you{opacity:.65}.video-tile__cam-indicator{opacity:.6;font-size:.7rem}.video-tile--thumbnail{aspect-ratio:16/9;border-radius:8px;flex-shrink:0;width:160px;min-width:160px}.video-tile--thumbnail .video-tile__avatar-circle{width:40px;height:40px;font-size:1rem}.chat-panel{background:#ffffff05;border-left:1px solid #ffffff0f;flex-direction:column;height:100%;display:flex;position:relative}.chat-panel__header{border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;padding:.85rem 1.25rem .75rem;display:flex}.chat-panel__title{color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}.chat-panel__close-btn{color:#fffc;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;font-size:.85rem;line-height:1;transition:all .15s;display:flex}.chat-panel__close-btn:hover{color:#fca5a5;background:#ef444440;border-color:#ef444473}@media (width>=640px){.chat-panel__close-btn{display:none}}@media (width<=639px){.chat-panel{background:#0d0d1a;border-left:none}.chat-panel__header{background:#ffffff0a;padding:.9rem 1.2rem}.chat-panel__close-btn{background:#ffffff1f;width:34px;height:34px;font-size:1rem}}.chat-panel__messages{flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex;overflow-y:auto}.chat-panel__empty{text-align:center;color:#ffffff4d;margin-top:2rem;font-size:.85rem}.chat-message{flex-direction:column;align-items:flex-start;max-width:85%;display:flex}.chat-message--own{align-self:flex-end;align-items:flex-end}.chat-message__sender{color:#ffffff73;margin-bottom:.2rem;padding-left:.25rem;font-size:.7rem}.chat-message__bubble{color:#ffffffe6;word-break:break-word;white-space:pre-wrap;background:#ffffff14;border-radius:12px 12px 12px 4px;padding:.5rem .75rem;font-size:.875rem;line-height:1.45}.chat-message--own .chat-message__bubble{background:linear-gradient(135deg,#8b5cf659,#6366f159);border:1px solid #8b5cf633;border-radius:12px 12px 4px}.chat-message__time{color:#ffffff40;margin-top:.2rem;padding:0 .25rem;font-size:.65rem}.chat-panel__emoji-picker{border-top:1px solid #ffffff0f;flex-shrink:0}.chat-panel__emoji-picker .EmojiPickerReact{--epr-bg-color:#1a1a2e;--epr-category-label-bg-color:#1a1a2e;--epr-hover-bg-color:#ffffff14;--epr-search-input-bg-color:#ffffff0f;--epr-search-input-text-color:#fff;--epr-text-color:#ffffffb3;border:none!important;border-radius:0!important}.chat-panel__input-area{border-top:1px solid #ffffff0f;flex-shrink:0;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex}.chat-panel__emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;flex-shrink:0;padding:.35rem;font-size:1.25rem;line-height:1;transition:background .15s}.chat-panel__emoji-btn:hover,.chat-panel__emoji-btn--active{background:#ffffff1a}.chat-panel__input{color:#fff;resize:none;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;outline:none;flex:1;max-height:100px;padding:.5rem .75rem;font-family:inherit;font-size:.875rem;line-height:1.4;transition:border-color .2s;overflow-y:auto}.chat-panel__input:focus{border-color:#8b5cf666}.chat-panel__input::placeholder{color:#ffffff4d}.chat-panel__send-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;border-radius:10px;flex-shrink:0;padding:.5rem .75rem;font-size:.9rem;transition:opacity .2s,transform .15s}.chat-panel__send-btn:hover:not(:disabled){opacity:.9;transform:scale(1.05)}.chat-panel__send-btn:disabled{opacity:.35;cursor:not-allowed}.room-controls{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0006;border-top:1px solid #ffffff0f;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:.75rem;padding:.75rem 1.5rem;display:flex}.ctrl-btn-wrap{flex-direction:column;align-items:center;gap:.15rem;display:flex}.ctrl-btn__hint{color:#ffffff4d;letter-spacing:.02em;white-space:nowrap;font-size:.55rem}.ctrl-btn{color:#ffffffd9;cursor:pointer;background:#ffffff12;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:.2rem;min-width:64px;min-height:54px;padding:.55rem 1rem;font-family:inherit;transition:all .2s;display:flex}.ctrl-btn:hover{background:#ffffff1f;transform:translateY(-1px)}.ctrl-btn:active{transform:translateY(0)scale(.97)}.ctrl-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.ctrl-btn__icon{font-size:1.25rem;line-height:1}.ctrl-btn__label{letter-spacing:.02em;white-space:nowrap;font-size:.65rem;font-weight:500}.ctrl-btn--active{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf666}.ctrl-btn--danger{color:#fca5a5;background:#ef444426;border-color:#ef44444d}.ctrl-btn--leave{color:#fca5a5;background:#ef44441a;border-color:#ef444440}.ctrl-btn--leave:hover{background:#ef444433;border-color:#ef444473}.ctrl-btn-group{align-items:stretch;gap:.25rem;display:flex}.ctrl-btn--small{min-width:48px;padding:.4rem .5rem}.ctrl-btn--small .ctrl-btn__icon{font-size:1rem}.ctrl-btn--small .ctrl-btn__label{font-size:.55rem}.ctrl-btn--muted{color:#fff6;background:#ffffff0a;border-color:#ffffff0f}.ctrl-btn--muted:hover{color:#fff9;background:#ffffff14}@media (width<=639px){.room-controls{gap:.4rem;padding:.5rem .5rem .75rem}.ctrl-btn{border-radius:14px;min-width:52px;min-height:52px;padding:.5rem .6rem;font-size:.75rem}.ctrl-btn__label{font-size:.58rem}.ctrl-btn__hint{display:none}}.reaction-bar{background:#00000040;border-top:1px solid #ffffff0a;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;padding:.4rem 1rem;display:flex}.reaction-bar__reactions{align-items:center;gap:.3rem;display:flex}.reaction-bar__divider{background:#ffffff1a;flex-shrink:0;width:1px;height:24px}.reaction-bar__sticker{align-items:center;gap:.4rem;display:flex;position:relative}.reaction-btn{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;font-size:1.2rem;line-height:1;transition:transform .15s,background .15s;display:flex}.reaction-btn:hover{background:#ffffff1f;transform:scale(1.2)}.reaction-btn:active{transform:scale(.95)}.reaction-btn--sticker{background:#8b5cf61a;border-color:#8b5cf640;border-radius:50%}.reaction-btn--active{background:#8b5cf640;border-color:#8b5cf680}.sticker-form{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:99px;align-items:center;gap:.35rem;padding:.25rem .25rem .25rem .75rem;animation:.15s sticker-slide-in;display:flex}@keyframes sticker-slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.sticker-input{color:#fff;background:0 0;border:none;outline:none;width:180px;min-width:0;font-family:inherit;font-size:.8rem}.sticker-input::placeholder{color:#ffffff59}.sticker-counter{color:#ffffff4d;white-space:nowrap;flex-shrink:0;font-size:.65rem}.sticker-send-btn{cursor:pointer;background:#8b5cf699;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:.9rem;transition:background .15s;display:flex}.sticker-send-btn:hover:not(:disabled){background:#8b5cf6e6}.sticker-send-btn:disabled{opacity:.35;cursor:not-allowed}@media (width<=639px){.reaction-bar{gap:.4rem;padding:.5rem .75rem}.reaction-btn{width:44px;min-width:44px;height:44px;min-height:44px;font-size:1.3rem}.sticker-input{width:130px}}.floating-overlay{pointer-events:none;z-index:1000;position:fixed;inset:0;overflow:hidden}.floating-particle{-webkit-user-select:none;user-select:none;transform-origin:bottom;font-size:2rem;animation:2.5s ease-out forwards float-up;position:absolute;bottom:12%}@keyframes float-up{0%{opacity:1;transform:translateY(0)scale(1)}60%{opacity:.9;transform:translateY(-55vh)scale(1.2)}to{opacity:0;transform:translateY(-80vh)scale(.7)}}.floating-sticker{flex-direction:column;align-items:flex-start;gap:.2rem;max-width:240px;animation:4s ease-out forwards sticker-float;display:flex;position:absolute;bottom:18%}.floating-sticker__name{color:#ffffff80;background:#0006;border-radius:4px;padding:.1rem .4rem;font-size:.6rem}.floating-sticker__text{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);word-break:break-word;white-space:pre-wrap;background:linear-gradient(135deg,#7c3aedd9,#4f46e5d9);border:1px solid #ffffff26;border-radius:12px;padding:.35rem .75rem;font-size:.85rem;font-weight:600;box-shadow:0 4px 16px #0000004d}@keyframes sticker-float{0%{opacity:0;transform:translateY(0)}8%{opacity:1;transform:translateY(-10px)}75%{opacity:1;transform:translateY(-40px)}to{opacity:0;transform:translateY(-70px)}}.room{color:#fff;background:#0d0d1a;flex-direction:column;height:100vh;display:flex;overflow:hidden}.room__header{z-index:10;background:#ffffff06;border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;padding:.6rem 1.25rem;display:flex}.room__header-left{align-items:center;gap:.6rem;display:flex}.room__logo{font-size:1.2rem}.room__code{letter-spacing:.12em;color:#a78bfa;background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:6px;padding:.2rem .6rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;font-weight:700}.room__host-badge{color:#fbbf24;text-transform:uppercase;letter-spacing:.06em;background:#fbbf241f;border:1px solid #fbbf2440;border-radius:5px;padding:.15rem .5rem;font-size:.65rem;font-weight:600}.room__header-right{align-items:center;gap:.75rem;display:flex}.room__participant-count{color:#ffffff80;font-size:.8rem}.room__body{flex:1;min-height:0;display:flex;overflow:hidden}.room__video-area{flex:1;justify-content:center;align-items:center;min-width:0;padding:1rem;display:flex;position:relative;overflow:hidden}.room__chat{flex-direction:column;flex-shrink:0;width:280px;min-width:280px;display:flex;overflow:hidden}.room__connecting{color:#ffffff80;flex-direction:column;align-items:center;gap:1rem;font-size:.9rem;display:flex}.room__spinner{border:3px solid #ffffff1a;border-top-color:#a78bfa;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.room__grid{gap:.75rem;width:100%;max-width:100%;height:100%;max-height:100%;display:grid}.room__grid--1{grid-template-columns:1fr;max-width:640px}.room__grid--2{grid-template-columns:repeat(2,1fr)}.room__grid--3{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.room__grid--3>:first-child{grid-column:span 2;max-width:60%;margin:0 auto}.room__grid--4{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.room__screenshare-layout{flex-direction:column;gap:.75rem;width:100%;height:100%;display:flex}.room__screen-main{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.room__screen-video-wrap{background:#000;border:1px solid #8b5cf64d;border-radius:12px;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 0 30px #8b5cf626}.room__screen-video{object-fit:contain;width:100%;height:100%;display:block}.room__screen-label{color:#fff9;text-align:center;font-size:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.room__screen-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#c4b5fd;z-index:5;pointer-events:none;background:#0d0d1abf;border:1px solid #8b5cf666;border-radius:8px;align-items:center;gap:.5rem;padding:.35rem .75rem;font-size:.8rem;font-weight:600;display:flex;position:absolute;top:.75rem;left:.75rem;box-shadow:0 4px 12px #0006}.room__fullscreen-btn{color:#fff;cursor:pointer;background:#00000080;border:1px solid #ffffff26;border-radius:8px;padding:.35rem .6rem;font-size:1.1rem;transition:background .2s;position:absolute;top:.75rem;right:.75rem}.room__fullscreen-btn:hover{background:#ffffff26}.room__thumbnail-strip{flex-shrink:0;align-items:center;gap:.5rem;height:110px;padding:.25rem 0;display:flex;overflow-x:auto}.room__thumbnail-strip::-webkit-scrollbar{height:4px}.room--error{background:linear-gradient(135deg,#0f0c29,#1a1a3e);justify-content:center;align-items:center}.room__error-box{text-align:center;background:#ffffff0a;border:1px solid #ef444433;border-radius:16px;max-width:360px;padding:2.5rem}.room__error-box h2{margin-bottom:.75rem;font-size:1.25rem}.room__error-box p{color:#ffffff8c;margin-bottom:1.5rem;font-size:.9rem}.room__error-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;border-radius:10px;padding:.65rem 1.5rem;font-size:.9rem;font-weight:600}@media (width<=639px){.room__header{padding:.5rem .75rem}.room__code{letter-spacing:.08em;font-size:.75rem}.room__video-area{padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px))}.room__body--chat-open .room__chat{width:100%;height:100%;min-width:unset;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);background:#0d0d1afa;flex-direction:column;display:flex;position:fixed;inset:0}.room__grid--2,.room__grid--3,.room__grid--4{grid-template-columns:1fr;grid-template-rows:unset;align-content:start;height:auto;overflow-y:auto}.room__grid--3>:first-child{grid-column:1;max-width:100%;margin:0}.room__thumbnail-strip{flex-direction:row;height:80px;overflow-x:auto}.room-controls{z-index:40;position:sticky;bottom:0}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{color:#fff;background:#0f0c29;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}