/* =========================================================
   HEAL AI — responsive.css
   Desktop → Tablet → Mobile
   ========================================================= */

/* ---------------- TABLET (≤1080px) ---------------- */
@media (max-width:1080px){
  :root{ --pad:32px; }
  .mode-grid{grid-template-columns:repeat(3,1fr);}
  .hai-main{grid-template-columns:1fr 260px; gap:20px;}
}

/* ---------------- SMALL TABLET / LARGE MOBILE (≤900px) ---------------- */
@media (max-width:900px){
  .hai-main{grid-template-columns:1fr;}
  .hai-sidebar{
    position:static; order:2; flex-direction:row; flex-wrap:wrap; gap:12px;
  }
  .side-card{flex:1 1 220px;}
  .chat-panel{order:1; height:560px;}
}

/* ---------------- MOBILE (≤640px) ---------------- */
@media (max-width:640px){
  :root{ --pad:18px; --header-h:64px; }
  header nav{padding:12px var(--pad); height:var(--header-h);}
  .brand{font-size:15.5px;}
  .brand-badge{display:none;}

  .hai-hero{padding:36px 0 30px;}
  .hai-hero h1{font-size:clamp(30px,8vw,40px);}
  .hai-hero-sub{font-size:15px;}

  .mode-section{padding:8px 0 26px;}
  .mode-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .mode-card{padding:16px 10px;}
  .mode-icon{font-size:24px;}
  .mode-card h4{font-size:13px;}
  .mode-card .mode-tags{display:none;}

  .hai-sidebar{flex-direction:column;}
  .side-card{flex:1 1 auto;}

  .chat-panel{height:70vh; border-radius:20px;}
  .chat-topbar{padding:12px 16px;}
  .chat-scroll{padding:18px 14px; gap:16px;}
  .msg-row{max-width:94%;}
  .msg-bubble{font-size:14px; padding:11px 14px;}
  .quick-chips{padding:12px 14px; gap:7px;}
  .chip{font-size:11.5px; padding:7px 12px;}
  .chat-input-wrap{padding:12px 12px 16px;}
  .chat-input-bar{padding:6px 6px 6px 14px; border-radius:18px;}
  .send-btn{width:38px; height:38px;}

  .disclaimer-box{flex-direction:column; padding:18px;}
  .hai-disclaimer{padding-bottom:40px;}

  .drawer-panel{padding:22px 20px;}
}

/* ---------------- VERY SMALL (≤380px) ---------------- */
@media (max-width:380px){
  .mode-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .hai-eyebrow{font-size:11.5px; padding:7px 13px;}
}