/* StormChat 1.0 — compact, Discord-inspired graphite interface. */
:root{--bg:#202127;--panel:#292a32;--panel2:#303139;--panel3:#383941;--line:#34353d;--text:#f1f1f4;--sub:#94959e;--teal:#40c98a;--blue:#7b9cfa;--orange:#ff7049;--red:#ed626e}
html,body{background:#202127;color:var(--text);font-family:Arial,'DM Sans',sans-serif;font-size:14px}
h1,h2,h3,.brand{font-family:Arial,'DM Sans',sans-serif;letter-spacing:0}h1{font-size:19px}h2{font-size:18px}p{color:#a0a0aa}
#app{display:grid;height:100dvh;min-height:0;grid-template-columns:73px 273px minmax(0,1fr);background:var(--bg)}
.serverrail{min-height:0;background:#111216;display:flex;align-items:center;flex-direction:column;padding:12px 9px 10px;gap:10px;z-index:3;border-right:1px solid #191a20}
.storm-logo{background:#89cff0;color:white;width:49px;height:49px;flex:0 0 49px;padding:0;border:0;overflow:hidden;border-radius:17px;display:grid;place-items:center;box-shadow:0 6px 15px #89cff026;transition:border-radius .15s,transform .15s}.storm-logo img{display:block;width:100%;height:100%;object-fit:cover}.storm-logo:hover{border-radius:12px;transform:translateY(-1px);filter:none}.rail-divider{height:2px;width:33px;background:#303138;border-radius:4px;margin:3px 0 1px}
#nav{display:flex;flex-direction:column;gap:11px;width:100%;align-items:center}
.railbtn{width:47px;height:47px;display:grid;place-items:center;color:#9c9da6;background:#23242b;border-radius:15px;position:relative;transition:background .15s,border-radius .15s,color .15s}
.railbtn:hover,.railbtn.active{background:#3b3c48;color:#fff;border-radius:14px;filter:none}.railbtn.active:before{content:"";position:absolute;left:-10px;height:35px;width:4px;border-radius:0 5px 5px 0;background:#f8f8fb}
.railbtn[data-page="alerts"]:hover{background:#79522e}.railbtn[data-page="radar"]:hover{background:#326164}
.rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.serverrail .counter{position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;margin:0;background:#e15561;border-radius:30px}
.sidebar{min-width:0;padding:0;display:flex;flex-direction:column;background:#18191e;border-right:1px solid #26272e;min-height:0}
.sideheading{height:51px;flex:0 0 51px;padding:0 14px 0 17px;box-shadow:0 1px 1px #0909096b;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #222329}
.sideheading strong{font-size:15px;font-weight:750;letter-spacing:-.2px}.flat-icon{background:transparent;color:#989aa6;width:26px;height:26px;display:grid;place-items:center;border-radius:5px}.flat-icon svg{width:17px}.flat-icon:hover{background:#31323b}
.sidebar-search{padding:8px 9px 2px}.sidebar-search .input{font-size:12px;height:34px;padding:7px 10px;border:0;border-radius:5px;background:#101115}
.sidebar-scroll{overflow-y:auto;min-height:0;flex:1;padding:10px 8px 20px;scrollbar-color:#34353e transparent;scrollbar-width:thin}
.friends-shortcut{height:47px;width:100%;padding:0 11px;border-radius:6px;display:flex;gap:13px;align-items:center;text-align:left;background:transparent;color:#9798a2;font-size:14px;font-weight:600}.friends-shortcut svg{width:23px}.friends-shortcut.active,.friends-shortcut:hover{background:#32333c;color:#f4f4f7}
.section-label{display:flex;align-items:center;justify-content:space-between;margin:17px 6px 5px 9px;color:#9697a0;font-weight:800;font-size:11px;letter-spacing:.15px}.plusbutton{font-size:24px;line-height:18px;width:24px;height:23px;color:#9d9ea7;border-radius:5px;background:transparent}.plusbutton:hover{color:white;background:#35353f;filter:none}
.conversation-list{gap:2px}.chatitem{padding:7px 9px;gap:10px;border-radius:6px;min-height:45px}.chatitem:hover,.chatitem.selected{background:#30313a}.chatitem b{font-size:13.5px;font-weight:600;color:#c7c7ce}.chatitem small{font-size:11px;color:#85868f;margin-top:3px}.chaticon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#46485a;color:#f1f3fa;font-size:17px}.chatitem.selected b{color:#fff}
.conversation-list .emptyhint{padding:10px;text-align:left;font-size:11px;line-height:1.6}
.sidebar .side-tools{margin:14px 0}.join-group{width:100%;padding:9px 12px;text-align:left;background:transparent;color:#a7a7af;border-radius:7px;font-size:12px}.join-group:hover{background:#2c2d36;color:white}
.mode-info{margin:25px 9px;font-size:11px;color:#aaaab4;line-height:1.4}.mode-info small{display:block;margin-top:5px;line-height:1.45;font-size:10px}.mode-info #modeBadge{background:none;border:0;color:inherit;padding:0;letter-spacing:0;font-weight:500}.status-dot{display:inline-block;height:7px;width:7px;background:#43c78e;border-radius:50%;margin-right:4px}
.sidebottom{margin:0;padding:8px;background:#131418;border-top:1px solid #26272c;display:flex;align-items:center;gap:3px;height:62px;flex:0 0 62px}
.account{min-width:0;flex:1;width:auto;background:transparent;border:0;border-radius:7px;padding:3px 5px;gap:10px}.account:hover{background:#272830;filter:none}.account .avatar{width:36px;height:36px;flex-basis:36px;border:none}.account b{font-size:13px;font-weight:700;color:#eee}.account small{margin-top:2px;color:#a8a8ae;font-size:11px}.identity{min-width:0}.user-cog{width:30px;height:33px;color:#91929c;background:transparent;display:grid;place-items:center;border-radius:6px}.user-cog:hover{background:#32333b}.user-cog svg{width:21px;height:21px}
.avatar{background:#5166ae;border:0}.avatar.big{width:80px;height:80px}
.workspace{min-width:0;background:#202127;overflow:hidden}
.friends-topbar{height:51px;flex:0 0 51px;background:#202127;display:flex;align-items:center;gap:17px;border-bottom:1px solid #33343b;padding:0 19px 0 20px;box-shadow:0 2px 5px #00000012;white-space:nowrap}
.friends-title{display:flex;align-items:center;gap:10px;font-weight:700}.friends-title svg{width:23px;height:23px;color:#bcbcc4}.friends-title b{font-size:15px}.header-divider{height:25px;width:1px;background:#363740}
.friend-tabs{display:flex;align-items:center;gap:11px;overflow-x:auto;scrollbar-width:none;height:100%;min-width:0}.friend-tabs::-webkit-scrollbar{display:none}
.friend-tab{background:transparent;color:#a1a1ac;padding:5px 9px;font-weight:600;font-size:14px;white-space:nowrap;border-radius:4px}.friend-tab:hover{background:#33343d;color:#ddd;filter:none}.friend-tab.active{background:#33343d;color:#f6f6f8}
.friend-add-tab{background:#2faf76;color:#fff;margin-left:0;font-weight:700}.friend-add-tab:hover,.friend-add-tab.active{background:#39bf83;color:#fff}.header-bell{margin-left:auto;flex:0 0 32px;width:32px;height:34px;display:grid;place-items:center;background:transparent;color:#aaa;position:relative;border-radius:5px}.header-bell:hover{background:#303139}.header-bell svg{width:20px}.unread-dot{right:5px;top:4px}
.top{height:58px;flex:0 0 58px;background:#202127;padding:0 23px;border-bottom:1px solid #35353e}.eyebrow{font-size:9px;color:#9da2ad;margin:0 0 4px;letter-spacing:1.3px}.top h1{font-size:16px}.topactions .live{color:#64c4a1}.topactions .btn{background:#3a3b45;color:#fff;border:0}
#content{background:#202127}.pagepad{width:min(1200px,100%);padding:28px}.pagepad.fill{width:100%;}.panel{background:#282930;border:1px solid #383942;border-radius:10px;box-shadow:none}.input{background:#16171c;border:1px solid #494a56;border-radius:6px;color:#fff}.input:focus{border-color:#8099f6;box-shadow:0 0 0 2px #8498ea25}.btn{background:#3a3b45;border-color:#4a4b55;color:#eaeaf1;border-radius:6px}.btn.primary{background:#5865e4;color:#fff;border-color:transparent}.btn.subtle{background:#33343c;border-color:#454650}.smallbtn{background:#33343d;border-radius:5px;color:#eee;font-size:12px}.chip{border-radius:6px;background:#35363f;color:#d0d0d9;border-color:#4d4e58}.chip.active{background:#3a916f;color:white}
.notice{border-color:#4e5e72;background:#2b333e;color:#d0dbea}.notice.orange{background:#40372f;border-color:#755439}.modalback{background:#0b0c10d9}.modal{background:#292a32;border:1px solid #51515e;border-radius:13px}.toast{background:#35363e;border-color:#626371}
.chats-grid{display:block;height:100%}.chatview{height:100%;width:100%}.welcome{max-width:490px}.orb{background:#ff724e;border-color:#ff956e;color:white;font-size:56px;border-radius:18px}.welcome-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.welcome h2{font-size:24px}.thread-header{height:60px;padding:10px 22px;background:#202127;border-color:#34353d}.messagelist{background:transparent}.bubble{background:#33343d;border:0;border-radius:7px!important}.mine .bubble{background:#364f72}.msgmeta{color:#c7c7d0}.composer{border-color:#30313a;background:#202127;padding:13px 20px 18px}.composer .input{background:#383942;border:0;padding:12px 15px}.composer .attach{background:#383942;width:37px;height:37px;line-height:32px;text-align:center;border-radius:50%;font-size:24px!important;color:#c7c7ce}.composer .btn.primary{background:#39ba83}
.friends-page{min-height:100%;position:relative;display:flex;flex-direction:column}.friend-results{display:flex;flex-direction:column;flex:1;min-height:250px}.friend-list-title{font-size:12px;font-weight:800;color:#a4a5ae;letter-spacing:.3px;margin:25px 24px 10px}.friends-empty{margin:auto;color:#858691;font-size:14px;text-align:center;padding:25px;line-height:1.5;max-width:560px;transform:translateY(-35px)}
.friend-bottom-note{color:#70717a;font-size:11px;padding:13px 25px;display:none}.friend-add-panel{border-bottom:1px solid #33343d;padding:27px 25px 24px}.friend-add-panel h2{font-size:17px;margin-bottom:7px}.friend-add-panel p{font-size:13px}.friend-add-hero{margin-bottom:16px}.add-friend-form{background:#15161b;border:1px solid #55555c;border-radius:8px;padding:5px;display:flex;align-items:center;gap:5px;max-width:750px}.add-friend-form .input{background:transparent;border:0;padding:10px;flex:1;min-width:80px;box-shadow:none}.add-friend-form .btn{background:#2fab76;color:#fff;padding:10px 15px}.friend-add-panel #friendResult{max-width:750px;margin-top:14px}
.friendcard{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #383941;margin:0 24px;padding:12px 9px;min-height:61px}.friendcard:hover{background:#25262e}.friendcard .avatar{width:38px;height:38px}.friend-info{display:flex;gap:11px;align-items:center;min-width:0}.friend-info .friend-names{min-width:0}.friend-info b,.friend-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-info small{font-size:11px;margin-top:5px}.friendcard .btn{font-size:11px;padding:8px 11px}.friendcard .smallbtn{padding:7px;font-size:12px}.friend-state{color:#9b9ca6;font-size:11px;min-width:70px}.online-mini{color:#41c28b}.pending-mini{color:#f0bd6c}
/* Keep utility panel views consistent. */
.alertitem{background:#2c2d34;border-color:#42434e}.reportentry,.prefrow,.notify{background:#30313a;border-color:#474852}.notify.unread{background:#2c4042;border-color:#5c9b85}
@media(max-width:1100px){#app{grid-template-columns:65px 244px minmax(0,1fr)}.serverrail{padding-left:7px;padding-right:7px}.railbtn{width:44px;height:44px}.railbtn.active:before{left:-8px}.storm-logo{width:45px;height:45px;flex-basis:45px}.friend-tabs{gap:3px}.friends-topbar{gap:10px;padding:0 12px}.friend-tab{font-size:13px;padding:6px}.sideheading strong{font-size:14px}}
@media(max-width:720px){
#app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 59px;position:relative;height:100dvh;min-height:0}
.serverrail{grid-column:1;grid-row:2;flex-direction:row;padding:5px 7px;overflow-x:auto;border:0;border-top:1px solid #35363e;gap:0;width:100%;justify-content:space-between}
.storm-logo,.rail-divider{display:none}#nav{flex-direction:row;justify-content:space-around;gap:0;flex:1;min-width:0}.railbtn{height:44px;width:min(44px,12vw);border-radius:10px;background:transparent}.railbtn svg{height:20px;width:20px}.railbtn.active{border-radius:10px}.railbtn.active:before{display:none}.rail-bottom{margin:0;flex-direction:row;gap:0}
.sidebar{grid-row:1;grid-column:1;position:absolute;top:0;bottom:0;left:0;width:min(290px,92vw);z-index:8;box-shadow:10px 0 30px #0005;transform:translateX(-110%);transition:transform .2s ease}.app-shell.drawer-open .sidebar{transform:translateX(0)}
.workspace{grid-row:1;grid-column:1;width:100%}.friends-topbar{gap:7px;padding:0 7px}.friends-title b,.header-divider{display:none}.friend-tabs{gap:1px}.friend-tab{padding:7px 6px;font-size:12px}.friend-add-tab{font-size:11px}.header-bell{width:28px;flex-basis:28px}.top{padding:0 10px}.top h1{font-size:15px}.topactions .btn{padding:8px 9px;font-size:11px}.pagepad{padding:13px}.cols,.formgrid{grid-template-columns:1fr}.panel.padded{padding:16px}.thread-header{padding:9px}.messagelist{padding:10px}.msg{max-width:96%}.backmobile{display:inline-block}.welcome{display:flex;flex-direction:column;justify-content:center}.modal{padding:23px 16px}.friendcard{margin:0 10px}.friend-list-title{margin:22px 15px 12px}.friend-add-panel{padding:20px 14px}.friend-add-form{gap:2px}.add-friend-form .btn{padding:9px;font-size:11px}.mobile-menu{display:grid!important}
}
.mobile-menu{display:none;place-items:center;border-radius:5px;width:31px;height:32px;flex:0 0 31px;background:transparent;color:#b9bac5}.mobile-menu:hover{background:#363740}
@media(max-width:430px){.friend-tab{font-size:11px;padding:5px}.friends-topbar{gap:3px}.friend-tabs{gap:0}.topactions .live{display:none}.toolbar{gap:5px}.toolbar select{width:145px}}
@media(max-width:720px){#page-chats .chatview{display:flex}#page-chats .welcome{display:flex}}

/* Keyless radar basemap: darken only the OSM tile pane; never filter radar imagery. */
.stormchat-osm-basemap img.leaflet-tile{filter:invert(.92) hue-rotate(180deg) saturate(.65) brightness(.9) contrast(.95)}
.radar-map-wrap #radarMap{background:#24262b}

/* Radar source switching and live reflectivity key — StormChat 1.0 fix. */
#radarSource{max-width:210px;width:auto;min-width:165px;padding:9px 10px;font-size:11px;}
.radar-key{position:absolute;z-index:600;bottom:23px;left:15px;display:flex;align-items:center;gap:7px;border:1px solid #44505b;border-radius:7px;background:rgba(22,25,29,.94);padding:6px 9px;box-shadow:0 2px 10px #0005;color:#e7eaf0;font-size:10px;pointer-events:none;}
.radar-key strong{font-weight:800;color:#fff;}
.radar-key-gradient{display:inline-block;width:125px;height:11px;border-radius:3px;background:linear-gradient(to right,#288ce4,#2cccdb,#44de56,#faf260,#f6a22e,#ec5043,#b84fc9);}
@media(max-width:700px){#radarSource{max-width:100%;width:100%;order:5;}.radar-key{bottom:24px;left:7px;}.radar-key-gradient{width:80px;}}

.radar-key.rainviewer .radar-key-gradient{background:linear-gradient(90deg,#6bc4fd,#1656ff,#803dc6,#d83f8a,#e03b46);}

/* Animated reflectivity timeline — still StormChat 1.0 (pre-launch). */
.radar-animation{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:56px;padding:10px 15px;background:#212228;border-top:1px solid #3c3d45;border-bottom:1px solid #3c3d45;}
.radar-transport{border:1px solid #4a4d58;background:#343741;color:#eee;border-radius:6px;padding:8px 10px;font-size:11px;font-weight:800;white-space:nowrap;min-height:34px}
.radar-transport:hover{background:#484b56}.radar-transport:focus-visible,.radar-timeline:focus-visible{outline:2px solid #9bb2ff;outline-offset:2px}
.primary-play{background:#338d73;border-color:#448d78;min-width:82px}.primary-play:hover{background:#42a88b}.radar-live{color:#8ce7c3}
.radar-timeline{flex:1;min-width:110px;max-width:none;accent-color:#46d0a4;height:7px;cursor:pointer;appearance:none;border-radius:30px;background:linear-gradient(90deg,#45a888 var(--radar-progress,100%),#51535c var(--radar-progress,100%));}
.radar-timeline::-webkit-slider-thumb{appearance:none;height:16px;width:16px;border-radius:50%;background:#94ffe1;border:2px solid #1e574d;box-shadow:0 0 0 2px #3c4447;}
.radar-timeline::-moz-range-thumb{height:14px;width:14px;border-radius:50%;background:#94ffe1;border:2px solid #1e574d;}
.radar-frame-time{font-size:11px;min-width:122px;text-align:center;color:#d8dbe7;font-variant-numeric:tabular-nums;}
.radar-speed-label{color:#aeb0bd;font-size:10px;font-weight:700;white-space:nowrap}
.radar-speed{border:1px solid #505260;color:#f3f3fa;background:#373943;border-radius:6px;padding:7px 9px;font-size:11px;font-weight:700;max-width:90px}
.leaflet-stormchatRadar-pane .leaflet-layer{transition:opacity 180ms linear;}
@media(max-width:900px){.radar-animation{gap:6px}.radar-frame-time{min-width:100px}.radar-speed-label{display:none}.radar-speed{max-width:80px}}
@media(max-width:650px){.radar-animation{padding:8px;gap:6px}.radar-timeline{order:10;flex-basis:100%;min-width:100%;margin:3px 0 6px;height:6px}.radar-frame-time{margin-left:auto}.radar-transport{padding:8px 7px;font-size:10px}.primary-play{min-width:69px}.radar-speed{padding:5px;max-width:70px}.radar-frame-time{min-width:95px;font-size:10px}}