/* ============================================================
 * portal-mobile-fix.css
 * Mobile/tablet refinements for the OPS Concierge view.
 * Targets iPhone, Samsung (Android) and tablets.
 * Loaded after the concierge inline styles so it can refine them.
 * ============================================================ */

/* ---- Mobile back button (added by portal-mobile-fix.js) ---- */
#bcc-mobile-back{
  display:none;
  align-items:center;justify-content:center;
  width:38px;height:38px;min-width:38px;flex:0 0 auto;
  margin-right:10px;
  border:1px solid #E5E0D6;border-radius:8px;
  background:#fff;color:#1A1A1A;
  font-size:20px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
#bcc-mobile-back:active{background:#F2EEE6;}

@media (max-width:760px){
  /* Show the back button only inside an open conversation on mobile */
  #bcc-mobile-back{display:flex;}

  /* Conversation header: keep title + back on one tidy row */
  .bcc-conv-header{
    flex-wrap:nowrap;align-items:flex-start;gap:10px;
    padding:12px 14px;
  }
  .bcc-conv-header h1{font-size:20px;line-height:1.2;}
  .bcc-lead-score{flex:0 0 auto;}

  /* Action bar: horizontal scroll, comfortable touch targets */
  .bcc-actions{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:8px;padding:10px 14px;scrollbar-width:none;
  }
  .bcc-actions::-webkit-scrollbar{display:none;}
  .bcc-actions > *{flex:0 0 auto;white-space:nowrap;min-height:40px;}

  /* Top clock/time ticker: smooth horizontal scroll, no clipping */
  .bcc-topbar{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .bcc-clock-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .bcc-clock-strip::-webkit-scrollbar{display:none;}

  /* Inbox fills the screen when no conversation open */
  .bcc-inbox{width:100%;}
  .bcc-inbox-stats{grid-template-columns:repeat(3,1fr);}

  /* Reply composer + AI reply cards stack comfortably */
  .bcc-detail{display:none !important;}

  /* Respect iOS safe areas at the bottom status bar */
  .bcc-statusbar{padding-bottom:calc(5px + env(safe-area-inset-bottom));}
}

/* ---- Tablet (two-column) tidy-up ---- */
@media (min-width:761px) and (max-width:1100px){
  .bcc-actions{flex-wrap:wrap;gap:8px;}
  .bcc-actions > *{min-height:40px;}
  .bcc-clock-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}