/* ===== MEETEOR.AI RESPONSIVE CSS ===== */

/* Hamburger button - hidden on desktop */
.mobile-menu-toggle{
  display:none;
  width:36px;height:36px;
  border:none;background:none;cursor:pointer;
  flex-shrink:0;padding:4px;
  color:var(--text);
  z-index:1001;
}
.mobile-menu-toggle svg{width:24px;height:24px}

/* Overlay behind sidebar on mobile */
.sidebar-overlay{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);
  z-index:998;
  opacity:0;transition:opacity .3s;
}
.sidebar-overlay.visible{opacity:1}

/* ===== TABLET (≤1024px) ===== */
@media(max-width:1024px){
  :root{--sidebar-w:220px}
  .stats-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
  .briefing-grid{grid-template-columns:repeat(2,1fr)!important}
  .roi-grid{grid-template-columns:repeat(2,1fr)!important}
  .content{padding:16px 18px 32px!important}
  .header{padding:0 16px!important}
}

/* ===== MOBILE (≤768px) ===== */
@media(max-width:768px){
  /* Show hamburger */
  .mobile-menu-toggle{display:flex;align-items:center;justify-content:center}

  /* Sidebar becomes slide-out drawer */
  .sidebar{
    position:fixed!important;top:0;left:0;bottom:0;
    width:280px!important;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:999;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}

  /* Header adjustments */
  .header{gap:8px!important;padding:0 12px!important;height:48px!important}
  .header-title{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
  .header-search{display:none}
  .header-right .btn{font-size:11px!important;padding:5px 10px!important}

  /* Content */
  .content{padding:12px 12px 24px!important}

  /* Stats row */
  .stats-row{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .stat-card{padding:12px!important}
  .stat-value{font-size:20px!important}

  /* Meeting list grid */
  .meeting-meta{flex-direction:column;gap:2px!important}
  .meeting-item{padding:10px!important;gap:10px!important}

  /* Cards */
  .card{padding:14px!important;margin-bottom:12px!important}

  /* Score cards in reports */
  .scores-grid{grid-template-columns:repeat(2,1fr)!important}
  
  /* Report header */
  .report-header{flex-direction:column;align-items:flex-start!important;gap:8px!important}
  
  /* Dashboard grid layout */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  
  /* Briefing grid */
  .briefing-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .briefing-stat .bs-value{font-size:20px!important}
  
  /* ROI grid */
  .roi-grid{grid-template-columns:1fr!important}
  
  /* Bot cards */
  .live-bot-card{padding:12px 14px!important}
  .bot-steps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  
  /* Feature view cards */
  .f-stat-card{min-width:0!important}
  .f-stats-row{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  
  /* Tables responsive */
  .f-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px}
  
  /* Modals */
  .send-email-modal .modal-content{width:95%!important;padding:16px!important;max-height:90vh!important}
  
  /* Copilot panel */
  .report-copilot-panel{display:none!important}
  .report-with-copilot{grid-template-columns:1fr!important}
  
  /* Feature tabs */
  .f-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;gap:4px!important;padding-bottom:4px}
  .f-tab{white-space:nowrap;flex-shrink:0;font-size:12px!important;padding:6px 12px!important}
  
  /* Notification toast position */
  .notification-toast{right:12px!important;left:12px!important;max-width:none!important}
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media(max-width:480px){
  .sidebar{width:260px!important}
  .stats-row{grid-template-columns:1fr!important}
  .stat-value{font-size:18px!important}
  .header-right{gap:4px!important}
  .header-right .btn{font-size:10px!important;padding:4px 8px!important}
  .briefing-grid{grid-template-columns:1fr!important}
  .meeting-icon{width:30px!important;height:30px!important;font-size:14px!important}
  .meeting-title{font-size:12px!important}
}

/* ===== TOUCH TARGETS ===== */
@media(pointer:coarse){
  .nav-item{padding:10px 12px!important;min-height:44px}
  .btn,.btn-sm,.btn-primary{min-height:44px;min-width:44px}
  .meeting-item{min-height:56px}
  .sidebar-logout{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
}