/* ScAry Project — Charcoal & Teal dashboard layout.
   Functional DOM IDs and all application logic stay intact. */
:root{--bg:#09151d;--panel:#10212b;--card:#162934;--card2:#203642;--line:#243c48;--line2:#395866;--white:#f4f9fa;--quiet:#a8bac4;--subtle:#7f9aa9;--lime:#19d8cd;--lime2:#8cf5e8;--ink:#082329}
body{background:radial-gradient(ellipse at 51% 2%,#10313a 0%,transparent 42%),#09151d}
.ambient{opacity:.16}
.site-header{height:74px;padding:0 clamp(18px,2vw,34px);position:relative;display:grid;grid-template-columns:minmax(255px,1fr) auto minmax(245px,1fr);gap:20px;background:rgba(9,20,28,.94);border-bottom:1px solid #29404c}
.brand{gap:11px}.brand-icon{width:39px;height:39px;border-radius:12px;background:rgba(17,220,207,.09);border:1px solid #21636b}.brand-icon svg{width:29px}
.brand-name{font-size:21px;font-weight:810;letter-spacing:-.05em;color:#f4f9fa}.brand-subname{color:#f4f9fa;font-weight:600}.brand-accent{color:var(--lime)!important}.brand-edition{display:none}
.header-navigation{display:flex;align-items:center;justify-content:center;gap:7px}.header-nav-link{background:transparent;border:1px solid transparent;border-radius:11px;color:#b4cbd2;padding:12px 15px;font-size:12px;font-weight:650;white-space:nowrap;display:flex;gap:8px;align-items:center}.header-nav-link:hover{color:var(--lime);border-color:#294751;background:#142c34}.header-nav-link>span{font-size:17px;color:var(--lime)}
.header-right{justify-content:flex-end;font-size:11px;color:#96b1bc}
/* Home becomes a true workspace with its own navigation rail. */
.home-screen{min-height:calc(100vh - 74px)}.home-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 74px)}.home-workspace-main{min-width:0}
.home-navigation{background:#0c1b24;border-right:1px solid #243946;padding:28px 14px;display:flex;flex-direction:column;gap:6px;min-height:calc(100vh - 74px)}
.rail-section-title,.room-nav-caption{padding:6px 13px 16px;color:#7899a6;font-size:10px;letter-spacing:.16em;font-weight:800}
.rail-link,.room-rail-link{width:100%;display:flex;align-items:center;gap:14px;text-align:left;font-size:12px;font-weight:680;border:1px solid transparent;color:#b1c3cb;background:transparent;padding:13px 12px;border-radius:12px}
.rail-link:hover,.room-rail-link:hover{color:#f1fafa;background:#15343c}.rail-link.selected,.room-rail-link.selected{border-color:#21565d;background:linear-gradient(110deg,#144348,#11313a);color:#69f1e8}
.rail-icon{font-size:21px;font-weight:450;line-height:1;width:24px;text-align:center;color:var(--lime)}
.home-rail-note{margin-top:auto;background:linear-gradient(140deg,#15333d,#13222f);border:1px solid #29505d;border-radius:16px;padding:21px 16px 17px}.rail-note-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;color:var(--lime);background:#0e4447;margin-bottom:15px;font-size:22px}.home-rail-note strong{display:block;color:#f1f9fa;font-size:15px}.home-rail-note p{font-size:12px;color:#90aeb9;line-height:1.55;margin:8px 0 0}
.workspace-kicker{max-width:1490px;margin:auto;padding:29px clamp(22px,3.5vw,56px) 0;color:#64d8d3;font-size:10px;letter-spacing:.16em;font-weight:830}.workspace-kicker>span:last-child{color:#607e8d}.status-spark{display:inline-block;width:7px;height:7px;border-radius:50%;background:#19d8cd;box-shadow:0 0 15px #19d8cd88;margin-right:10px}
.home-layout{max-width:1490px;padding:47px clamp(22px,3.5vw,56px) 60px;grid-template-columns:minmax(0,1.05fr) minmax(355px,.8fr);gap:clamp(26px,3.5vw,60px)}
.hero h1{font-size:clamp(43px,4.25vw,70px);font-weight:720}.hero-description{color:#a4bdc6}.hero-features{border-color:#284956}.hero-bottom{margin-top:48px}
.gateway{max-width:510px;background:linear-gradient(145deg,#142b38,#0d202b);border:1px solid #345463;border-radius:23px;box-shadow:0 22px 70px #0005;padding:29px clamp(20px,2.35vw,33px) 24px}
.gateway-header{margin:21px 0 22px}.gateway-header h2{font-size:clamp(30px,2.5vw,38px)}.gateway-logo{background:#144a4b;color:var(--lime)}
.tab-bar{background:#0c2029;border-color:#34515d}.tab{color:#99b4be}.tab.active{background:var(--lime);color:#09252b}
.field{background:#091b25;border-color:#34505e;color:#f6fcfc}.field::placeholder{color:#73909c}.duration-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:17px}.duration-options span{padding:12px 3px;background:#102732;border:1px solid #35525e;border-radius:9px;color:#bbced5;font-size:11px}.duration-options input:checked+span{border-color:#14d4c8;background:#124448;color:#94fff2;box-shadow:inset 0 0 0 1px #18d4c73a}
.myrooms-section{max-width:1490px;border-top:1px solid #243b47;margin:0 auto 24px;padding:33px clamp(22px,3.5vw,56px) 35px}.myrooms-list{grid-template-columns:repeat(3,minmax(0,1fr))}.myroom-item{background:linear-gradient(130deg,#142936,#10222c);border:1px solid #2e4b58;border-radius:13px}.myroom-item:hover{border-color:#20b9b1}.myroom-item.current{border-color:#20d9d0}.myroom-icon{background:#16474a;color:#62eee4}.myroom-content strong{color:#ecf9f8}.myroom-content small{color:#8baab5}.bottom-strip{padding:15px clamp(22px,3.5vw,56px) 37px;color:#7fa0ad}
/* Four-column messaging layout, matching the chosen dashboard concept. */
.room-screen{padding:14px;position:relative;min-height:calc(100dvh - 74px)}
.room-shell{max-width:none;margin:auto;width:100%;height:calc(100dvh - 102px);min-height:620px;display:grid;grid-template-columns:minmax(180px,205px) minmax(225px,268px) minmax(340px,1fr) minmax(260px,292px);background:transparent;border:0;border-radius:0;box-shadow:none;gap:10px;overflow:visible;align-items:stretch}
.room-navigation,.room-inbox,.room-sidebar,.chat-main{border:1px solid #29434f;background:#101f29;border-radius:16px;min-width:0;min-height:0;overflow:hidden;box-shadow:0 9px 24px #0002}
.room-navigation{grid-column:1;grid-row:1;display:flex;flex-direction:column;padding:18px 13px;background:#0c1a23}
.room-nav-caption{padding:10px 10px 18px}.room-new-action{width:100%;display:flex;align-items:center;gap:12px;text-align:left;justify-content:flex-start;border:1px solid #19e2d1;border-radius:11px;color:#06262a;background:#19d8cd;font-size:12px;font-weight:800;padding:12px 12px;margin-bottom:19px}.room-new-action:hover{background:#77eee3}.room-new-action span{font-size:20px;line-height:1}
.room-rail-link{padding:13px 10px;font-size:12px}.room-rail-link>span{font-size:20px;width:21px;text-align:center;color:#b7e0e5}.room-rail-link.selected>span{color:var(--lime)}
.room-navigation-footer{margin-top:auto;padding:19px 13px 12px;border-top:1px solid #2b414b}.room-nav-mark{width:37px;height:37px;border-radius:12px;background:#173f41;color:#21e2d3;font-size:22px;display:grid;place-items:center;margin-bottom:11px}.room-navigation-footer strong{color:#f4f9fa;font-size:15px;letter-spacing:-.04em}.room-navigation-footer p{font-size:11px;color:#8fa9b3;line-height:1.6;margin-bottom:0}
.room-inbox{grid-column:2;grid-row:1;display:flex;flex-direction:column;padding:22px 12px 14px;background:#10212c}.room-inbox-head{padding:0 8px}.inbox-eyebrow{color:#69d3d0;font-weight:750;font-size:9px;letter-spacing:.15em;margin-bottom:12px}.room-inbox-head h2{font-size:22px;letter-spacing:-.055em;margin:0 0 6px}.room-inbox-head p{color:#829daa;font-size:11px;margin:0 0 19px}
.inbox-search-label{display:flex;align-items:center;gap:7px;border:1px solid #395463;background:#0c1b25;padding:0 11px;border-radius:11px;margin-bottom:13px;min-height:43px}.inbox-search-label span{font-size:23px;color:#6caeaf}.inbox-search-label input{min-width:0;flex:1;font-size:12px;color:#e9fbfc;background:transparent;border:0;outline:0;padding:10px 0}.inbox-search-label:focus-within{outline:2px solid #18d4c755}
.inbox-filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:17px}.inbox-filter{padding:9px 4px;background:#172b36;color:#8faebb;border:1px solid #314d59;border-radius:9px;font-size:11px}.inbox-filter.selected{background:#12cfc4;color:#08292e;border-color:#19d8cd;font-weight:820}
.room-inbox-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;padding:2px 1px;min-height:0}.room-inbox .myroom-item.compact{border:1px solid #2d4955;background:#172b37;border-radius:12px;overflow:visible}.room-inbox .myroom-item.compact.current{border-color:#13dccd;background:linear-gradient(130deg,#184448,#17303c);box-shadow:0 0 0 1px #19d8cd2a}.room-inbox .myroom-item.compact:hover{border-color:#20b1ad}.room-inbox .myroom-item.compact .myroom-open{padding:14px 9px;gap:9px}.room-inbox .myroom-item.compact .myroom-icon{height:38px;width:38px;font-size:18px;border-radius:10px;background:#235157;color:#5bf4eb}.room-inbox .myroom-item.compact .myroom-content strong{font-size:12px;color:#f1f9fa}.room-inbox .myroom-item.compact .myroom-content small{font-size:10px;line-height:1.4;color:#8dabb8}.room-inbox .myroom-unread{border-radius:50%;background:#19d8cd;color:#07292c}.room-inbox-empty{color:#94abb7;font-size:12px;line-height:1.6;padding:15px 7px}.room-inbox-foot{color:#688c9a;font-size:10px;line-height:1.5;border-top:1px solid #28424d;padding:14px 5px 0;margin-top:10px}
.chat-main{grid-column:3;grid-row:1;display:flex;flex-direction:column;background:#0d1c26}
.chat-topbar{height:79px;background:#132631;border-bottom:1px solid #2c4652;padding:0 19px}.chat-meta strong{font-size:15px}.chat-live-dot{height:9px;width:9px}.room-tag{color:#19d8cd;border-color:#355b5f}.chat-actions{gap:8px}.room-home-button{background:#183943;color:#8cece4;border:1px solid #38626a}.room-home-button:hover{background:#245562}.leave-button{border-color:#39535f;color:#b1c8ce}
.conversation-info{padding:17px 24px;background:#10222d;border-color:#263f4b}.chat-intro-symbol{background:#15494a;border-color:#297379;border-radius:12px}.conversation-info h3{font-size:15px;color:#f3fafb}.conversation-info p{font-size:11px;color:#99b2bc}.messages-wrap{background:linear-gradient(180deg,#0d1c26,#0b1a24);padding:24px 22px 18px}
.message-body{background:#213541;border:1px solid #294753;color:#eff7f9;border-radius:14px 14px 14px 5px}.message-row.mine .message-body{background:#0d595c;border-color:#087876;color:#e5fffc;border-radius:14px 14px 5px 14px}.message-byline{color:#b7cdd3}.message-byline .msg-time{color:#87a6b1}.message-row.queued .message-body{background:#19363b;color:#c5fffa;border:1px dashed #288078}
.chat-bottom{background:#122530;padding:15px 18px 18px;border-color:#2a4551}.composer{background:#0c1c26;border:1px solid #3a5662;border-radius:13px}.composer textarea{color:#f1f9fa}.composer button{background:#19d8cd;border-radius:10px;color:#07323a}.composer-hint{font-size:9px;color:#6c8998}
.room-sidebar{grid-column:4;grid-row:1;border:1px solid #29434f;display:flex;flex-direction:column;background:#10212b;overflow-y:auto}.sidebar-upper{padding:24px 17px 19px;border-bottom:1px solid #28434e}.sidebar-eyebrow{font-size:10px;letter-spacing:.09em;margin-bottom:17px}.room-sidebar h2{font-size:25px}.sidebar-caption{color:#87a5b0;margin-bottom:16px}.room-code-pill{color:#a4fff6;background:#0b2630;border:1px dashed #3e636b}
.room-sidebar .share-button{margin-top:12px;background:#1ad8cc;color:#06292c}.access-key-button{background:#142e38;border-color:#3a5964;color:#d7e8eb}.access-key-note{color:#819eab}.sidebar-section{background:transparent;padding:22px 17px;border-bottom:1px solid #28434e}.sidebar-myrooms{display:none!important} /* the room inbox now provides this list */
.section-title{color:#9db8c1}.member-avatar{background:#21404b;border-color:#3c6270;color:#56f2e9}.member-name{color:#eef8fa}.member-subtitle{color:#8fa6b1}.member-actions button{background:#1b3540;border-color:#3b5965}.host-panel{background:#112530}.switch-option{color:#f2f8f9}.switch-option small{color:#7797a3}.sidebar-foot{padding:19px 17px}.sidebar-foot strong{color:#56f5ea;font-size:23px}
/* Header, dashboard and sidebar scale gracefully on laptop/tablet/mobile. */
@media(max-width:1410px){.room-shell{grid-template-columns:72px minmax(205px,255px) minmax(310px,1fr) minmax(245px,275px);gap:8px}.room-navigation{padding:17px 8px}.room-navigation .room-nav-caption,.room-navigation-footer{display:none}.room-new-action{font-size:0;justify-content:center;margin-bottom:18px;padding:13px 5px}.room-new-action span{font-size:23px}.room-rail-link{font-size:0;justify-content:center;padding:13px 5px}.room-rail-link>span{font-size:23px}.room-screen{padding:10px}.room-shell{height:calc(100dvh - 94px)}.chat-topbar{padding:0 14px}}
@media(max-width:1120px){.site-header{grid-template-columns:auto 1fr auto}.header-navigation{justify-content:flex-end}.header-right{display:none}.home-workspace{grid-template-columns:70px minmax(0,1fr)}.home-navigation{padding:21px 9px}.rail-section-title,.home-rail-note{display:none}.home-navigation .rail-link{font-size:0;justify-content:center;padding:13px 8px}.rail-icon{font-size:23px}.home-layout{gap:28px;padding:48px 27px 45px;grid-template-columns:minmax(0,1fr) minmax(325px,.9fr)}.home-layout .hero h1{font-size:clamp(37px,4.6vw,55px)}.room-shell{grid-template-columns:66px minmax(222px,250px) minmax(320px,1fr)}.room-sidebar{display:none;position:absolute;z-index:50;top:10px;right:10px;bottom:10px;width:min(350px,calc(100vw - 25px));border:1px solid #3b6b72;border-radius:16px;box-shadow:0 0 0 100vmax #0008,0 20px 70px #0008}.room-sidebar.open{display:flex}.sidebar-close{display:grid;place-items:center;position:absolute;right:12px;top:12px;height:35px;width:35px;border:1px solid #38676a;border-radius:9px;background:#183540;color:#80ede3;font-size:21px}.room-sidebar .sidebar-eyebrow{padding-right:40px}.mobile-only{display:inline-block}.room-sidebar .sidebar-myrooms{display:none!important}}
@media(max-width:760px){.site-header{display:flex;justify-content:space-between;height:66px;padding:0 16px}.brand-name{font-size:17px}.brand-icon{width:36px;height:36px}.header-navigation{display:none}.home-workspace{display:block}.home-navigation{display:none}.workspace-kicker{padding:22px 19px 0;font-size:9px}.home-layout{display:flex;flex-direction:column;gap:27px;padding:32px 17px 34px}.hero h1{font-size:clamp(37px,9vw,53px)}.hero{padding:0}.hero-bottom{margin-top:25px}.gateway{width:100%;max-width:none;padding:23px 18px}.duration-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.duration-options span{font-size:10px;padding:11px 4px}.myrooms-section{margin:0 18px 28px;padding:22px 0 0}.myrooms-list{grid-template-columns:1fr}.room-screen{padding:0;min-height:calc(100dvh - 66px)}.room-shell{height:calc(100dvh - 66px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:0}.room-navigation,.room-inbox{display:none}.chat-main{grid-column:1;grid-row:1;border:0;border-radius:0}.room-sidebar{top:0;right:0;bottom:0;border-radius:0;width:min(88vw,350px)}.chat-topbar{height:66px;padding:0 12px}.conversation-info{padding:13px 16px}.chat-bottom{padding:11px 12px 15px}.messages-wrap{padding:19px 15px}.room-home-button{background:#16454b;color:#92fff5;padding:8px 9px}.leave-button{padding:8px 9px}.message-row{max-width:90%}.bottom-strip{padding:4px 20px 27px}.site-footer{padding:18px 19px}.composer-hint{font-size:8px}}
@media(max-width:390px){.room-tag,.connection-indicator{display:none}.brand-name{font-size:16px}.room-home-button,.leave-button{font-size:9px;padding:8px}.chat-topbar{gap:7px}.chat-actions{gap:5px}}