/* EPICSOLO Hybrid UI
   Desktop-first visual language with compact, app-like reflow on phones/tablets.
   Desktop (>1199px) is intentionally untouched. */

@media (max-width:1199px){
  html,body{width:100%;min-width:0;overflow-x:hidden}
  body{background:#090d14}
  .top{height:58px;padding:0 14px;gap:12px}
  .brand{font-size:22px;letter-spacing:.09em;white-space:nowrap}
  .brand-version{font-size:9px}
  .top nav{gap:7px;min-width:0}
  .top nav button,.top button{padding:8px 10px;font-size:12px;white-space:nowrap}
  .container{max-width:none;padding:22px 14px}
  .hero{gap:14px;padding:8px 0 22px;align-items:stretch}
  .hero h1{font-size:clamp(34px,7vw,58px);margin:8px 0 12px}
  .hero p{font-size:15px;margin:0;max-width:620px}
  .hero-card{min-width:150px;padding:16px;border-radius:14px}
  .hero-card strong{font-size:30px}
  .hero-promos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .free-platform-badge,.message-promo-card{min-width:0}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .room-card{border-radius:13px}
  .room-meta{padding:11px}
  .preview{aspect-ratio:16/10}
  .site-footer{padding:20px 14px}

  .page-shell{padding:22px 14px!important}
  .page-card{width:min(100%,900px)!important;margin:0 auto!important;padding:20px!important}
  .message-page{padding:22px 14px!important}
  .message-hero{padding:18px!important}
  .message-concept{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .message-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .message-item{margin:0!important}

  .admin-shell{max-width:none;padding:16px!important}
  .admin-header{gap:10px;flex-wrap:wrap}
  .admin-nav{gap:6px}
  .admin-nav button{padding:8px 10px;font-size:12px}
  .admin-card{padding:14px}
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-cam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:767px){
  .top{height:54px;padding:0 10px}
  .brand{font-size:19px}
  .top nav{gap:5px;overflow:auto;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav button{padding:7px 8px;font-size:11px}
  .top nav #accountTopbar{display:none}
  .container{padding:14px 10px 22px}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;padding:4px 0 16px}
  .hero h1{font-size:36px;line-height:.96;margin:7px 0 9px}
  .hero p{font-size:13px;line-height:1.4}
  .hero-card{min-width:0;padding:12px;border-radius:12px;align-self:start}
  .hero-card strong{font-size:25px}
  .hero-card span{font-size:11px;line-height:1.25;display:block}
  .hero-promos{grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
  .free-platform-badge,.message-promo-card{padding:10px!important;border-radius:11px!important;font-size:11px!important}
  .free-platform-badge span,.message-promo-copy p,.message-promo-copy em{font-size:10px!important}
  .section-head{margin-bottom:8px}
  .section-head h2{font-size:19px;margin:0}
  .section-head span{font-size:11px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .room-card{border-radius:11px}
  .room-meta{padding:9px;font-size:12px}
  .room-meta strong{font-size:13px}
  .live{font-size:10px}
  .empty{padding:28px 14px;font-size:12px}
  .site-footer{padding:16px 10px;font-size:11px}
  .site-footer nav{gap:10px}

  .page-shell{padding:12px 10px!important}
  .page-card{padding:15px!important;border-radius:13px!important}
  .page-card h1{font-size:25px}
  .page-card h2{font-size:18px}
  .page-card p,.page-card li{font-size:13px;line-height:1.5}
  .contact-form,.account-form{gap:8px}
  .message-page{padding:12px 10px!important}
  .message-hero{padding:14px!important;border-radius:13px!important}
  .message-hero h1{font-size:27px!important}
  .message-concept{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .message-list{grid-template-columns:1fr;gap:8px}
  .message-card{padding:12px!important}
  .message-actions{flex-wrap:wrap}

  .admin-shell{padding:10px!important}
  .admin-header h1{font-size:22px}
  .admin-header-actions{display:flex;gap:5px;flex-wrap:wrap}
  .admin-nav-row{display:flex;overflow:auto;gap:5px;scrollbar-width:none}
  .admin-nav-row::-webkit-scrollbar{display:none}
  .admin-nav button{flex:0 0 auto;font-size:11px;padding:7px 8px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .stats-grid>div{padding:11px;border-radius:10px}
  .stats-grid b{font-size:22px}
  .admin-cam-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .admin-card{padding:11px;border-radius:11px}
}

/* Hybrid room: desktop-like composition, compacted instead of vertically stacking everything. */
@media (max-width:1199px){
  .room-page{padding:14px!important;max-width:none}
  .room-page .room-main-grid{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)!important;gap:12px!important;align-items:start!important}
  .room-page .starter-panel{min-width:0!important}
  .room-page .starter-video-wrap{width:100%!important;aspect-ratio:16/10!important;border-radius:12px!important}
  .room-page .starter-media-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .room-page .self-video-wrap{min-width:0!important}
  .room-page .starter-video,.room-page .self-video{width:100%!important;height:100%!important;object-fit:cover!important}
  .room-page .room-role-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:8px 0!important}
  .room-page .room-role-controls button{min-width:0!important;padding:8px 7px!important;font-size:11px!important}
  .room-page .chat-panel{display:grid!important;grid-template-columns:minmax(0,1fr) 150px!important;gap:8px!important;min-width:0!important}
  .room-page .chat{height:360px!important;min-height:360px!important;padding:10px!important;border-radius:12px!important}
  .room-page .participants{height:360px!important;min-height:360px!important;padding:10px!important;border-radius:12px!important}
  .room-page .chat h3,.room-page .participants-head h3{font-size:13px}
  .room-page .chat-input-row{gap:4px}
  .room-page .chat-input-row input{font-size:12px;padding:9px!important}
  .room-page .emoji-button{width:34px;min-width:34px;padding:6px;font-size:17px}
  .room-page .chat-input-row button[type=submit]{padding:7px 8px;font-size:11px}
  .room-page .visitors-panel{margin-top:12px!important;padding:10px!important;border-radius:12px!important}
  .room-page .visitor-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:7px!important;padding:7px!important}
  .room-page .visitor-tile{width:100%!important;max-width:none!important}
  .room-page .visitor-video{width:100%!important;height:auto!important;aspect-ratio:4/3!important}
}

@media (max-width:767px){
  .room-page{padding:8px!important}
  .room-page .room-main-grid{grid-template-columns:1fr!important;gap:8px!important}
  .room-page .panel-title{margin:2px 0 7px!important;font-size:12px}
  .room-page .starter-media-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .room-page .starter-video-wrap{aspect-ratio:4/3!important;border-radius:10px!important}
  .room-page .room-role-controls{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .room-page .room-role-controls button{font-size:10px!important;padding:7px 4px!important;min-height:38px!important}
  .room-page .chat-panel{grid-template-columns:minmax(0,1fr) 118px!important;gap:6px!important}
  .room-page .chat,.room-page .participants{height:300px!important;min-height:300px!important;padding:8px!important}
  .room-page .chat h3,.room-page .participants-head h3{font-size:12px}
  .room-page .chat-input-row input{font-size:11px!important;padding:8px!important}
  .room-page .chat-input-row button[type=submit]{font-size:10px;padding:6px!important}
  .room-page .emoji-button{width:29px;min-width:29px;font-size:15px;padding:5px}
  .room-page .visitors-head h3{font-size:14px!important}
  .room-page .visitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:6px!important}
  .room-page .visitor-actions{padding:4px!important;gap:3px!important}
  .room-page .visitor-actions button{padding:4px 5px!important;font-size:9px!important}
  .room-page .visitor-name{font-size:10px!important}
  .room-page .visitor-floating-viewer.floating-resizable{width:min(310px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important}
  .room-page .rooms-drawer{width:min(100%,420px)!important}
}

/* Tablet: keep the two-column desktop feel and use a wider webcam roster. */
@media (min-width:768px) and (max-width:1199px){
  .room-page .room-main-grid{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)!important}
  .room-page .chat-panel{grid-template-columns:minmax(0,1fr) 170px!important}
  .room-page .chat,.room-page .participants{height:430px!important;min-height:430px!important}
  .room-page .visitor-grid{grid-template-columns:repeat(4,minmax(145px,1fr))!important}
}