/* ============================================================
   Fixa responsive.css — phone & tablet fixes.
   Link this AFTER page-specific styles so it can override fixed widths.
   Assumes every page has: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   ============================================================ */

*{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
img, video{ max-width:100%; height:auto; }

/* Respect notches / home indicators on iOS */
body{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Auth pages (SignIn / Signup) ---------- */
@media (max-width:480px){
  body{ padding:1rem !important; }
  .form-card{ padding:1.5rem 1.25rem !important; }
  /* Google's rendered button/iframe ignores our CSS width, so cap its wrapper instead */
  .g_id_signin, #g_id_onload{ width:100% !important; max-width:100%; overflow:hidden; }
  iframe[src*="accounts.google.com"]{ max-width:100% !important; }
}

/* ---------- Service grid (customer home) ---------- */
@media (max-width:420px){
  .services-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
  .icon-square{ width:56px !important; height:56px !important; font-size:22px !important; }
}
@media (min-width:768px){
  .services-grid{ grid-template-columns:repeat(6,1fr) !important; }
}

/* ---------- Category grid (select-service) ---------- */
@media (min-width:601px) and (max-width:900px){
  .category-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (min-width:901px){
  .category-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .container{ max-width:700px !important; }
}

/* ---------- Messages / chat shell (artisan dashboard + customer home) ---------- */
@media (max-width:768px){
  #chatListView, .chat-list-view{
    position:absolute; inset:0; width:100% !important; z-index:10;
  }
  #chatListView.collapsed{ transform:translateX(-100%); }
  #individualChatView, .chat-conv-view{ width:100% !important; }
  .messages-shell{ height:calc(100dvh - 90px) !important; }
}
@media (min-width:769px){
  /* Give desktop a proper two-pane layout instead of full-bleed mobile chat */
  .messages-shell{ max-width:1000px; margin:0 auto; border:1px solid var(--border-soft,rgba(255,255,255,.08)); border-radius:16px; overflow:hidden; }
}

/* ---------- General card/grid overflow guards ---------- */
.summary-grid, .card-list, .account-container, .tabs{ max-width:100%; }
.tabs{ -webkit-overflow-scrolling:touch; }

/* ---------- Bottom nav + fixed floating buttons: keep clear of home indicator ---------- */
.bottom-nav{
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;
}

/* ---------- Wide tables / rows never force horizontal page scroll ---------- */
.card, .form-card, .account-card, .history-modal-box, .hist-modal-box{
  max-width:100%;
}

/* ---------- Small phones (<360px): tighten paddings across the board ---------- */
@media (max-width:360px){
  .container{ padding-left:1rem !important; padding-right:1rem !important; }
  h1, h2{ font-size:1.4rem !important; }
}