/* ============================================================================
 * APEX — mobile.css  (ADDITIVE mobile refinements)
 * ----------------------------------------------------------------------------
 * Loaded AFTER styles.css on every app page, so it wins where intended.
 * The repo already ships per-page mobile layout in styles.css:
 *   - index  @900px : .app single-col + .sidebar drawer + topbar/kpi rules
 *   - dash   @760px : off-canvas Browse drawer (body.dash-nav-open)
 *   - admin  @840px : .admin-rail collapses to a wrap-row
 * This file does NOT re-declare any of that. It adds only the GAPS:
 *   1. Answer-overflow hardening (wide tables/charts scroll in-card, never
 *      bleed off-screen).  2. iOS no-zoom 16px inputs.  3. Admin tables ->
 *      stacked cards on phones.  4. The mobile bottom tab bar.
 * Every rule is gated to the matching page breakpoint; desktop is untouched.
 * ==========================================================================*/

/* ---- iOS: inputs < 16px trigger an auto-zoom on focus. Pin to 16px. ----- */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px; }
}

/* ============================================================================
 * 1. ANSWER-OVERFLOW HARDENING (Analyst replies) — index @900px.
 * Root cause of off-screen answers: .msg is display:flex and .bubble is a
 * flex item with default min-width:auto, so a wide table/chart inside forces
 * the bubble to its content's min-content width and the whole message bleeds
 * past the viewport. Releasing min-width down the chain lets the message
 * shrink to the screen; wide visuals then scroll inside their own card.
 * styles.css already sets .table-card/.chart-card{overflow-x:auto} at 900px,
 * so these rules are ADDITIVE (no overflow re-declaration).
 * ==========================================================================*/
@media (max-width: 900px) {
  .msg { min-width: 0; }
  .msg .bubble { min-width: 0; max-width: 100%; }
  .chat-msg-content-md { min-width: 0; }
  .chat-msg-content-md > * { min-width: 0; max-width: 100%; }

  /* Raw markdown tables (not wrapped in .table-card) become horizontally
     scrollable blocks so many-column tables stay readable instead of
     cramming/clipping. */
  .chat-msg-content-md table {
    display: block; width: max-content; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .chat-msg-content-md th, .chat-msg-content-md td { white-space: nowrap; }
  /* First column (usually a label) may wrap so it isn't absurdly wide. */
  .chat-msg-content-md td:first-child { white-space: normal; min-width: 120px; }

  /* Charts never get comically tall on a narrow canvas. */
  .chart-card canvas { max-height: 320px; }
}

/* ============================================================================
 * 2. ADMIN TABLES -> STACKED CARDS (phones).  mobile.js stamps a data-label
 * on every <td> from its column header; this turns each row into a compact
 * card. Placed at <=640px so the 640-840 band keeps the existing wrap-row +
 * horizontal table scroll, and only true phones get cards.
 * ==========================================================================*/
@media (max-width: 640px) {
  body.admin-body .admin-table,
  body.admin-body .admin-table tbody { display: block; width: auto; min-width: 0; }
  body.admin-body .admin-table thead { display: none; }   /* each card self-labels */
  body.admin-body .admin-table-wrap { overflow-x: visible; }

  body.admin-body .admin-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px;
    align-items: start;
    border: 1px solid var(--border, #ececf1); border-radius: 13px;
    background: var(--panel, #fff); padding: 12px 13px; margin: 0 0 10px;
  }
  body.admin-body .admin-table td {
    display: block; border: 0; padding: 0; min-width: 0;
    text-align: left; font-size: 13px; color: var(--text, #1f2937);
    overflow: hidden; text-overflow: ellipsis;
  }
  body.admin-body .admin-table td::before {
    content: attr(data-label);
    display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted, #9ca3af); margin-bottom: 3px;
  }
  /* First cell = card title: full width, prominent, no label. */
  body.admin-body .admin-table td:first-child {
    grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--text-strong, #0a0a0a);
  }
  body.admin-body .admin-table td:first-child::before { display: none; }
  /* Actions = full-width footer row. */
  body.admin-body .admin-table td.col-actions {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border, #f3f4f6);
  }
  body.admin-body .admin-table td.col-actions::before { display: none; }
  /* Value-less middle cells (mobile.js tags these) contribute nothing. */
  body.admin-body .admin-table td.admin-cell-empty { display: none; }
  /* Loading / empty-state cell spans the card. */
  body.admin-body .admin-table td.empty,
  body.admin-body .admin-table td[colspan] {
    grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 6px 0;
  }
  body.admin-body .admin-table td.empty::before,
  body.admin-body .admin-table td[colspan]::before { display: none; }
}

/* ============================================================================
 * 3. BOTTOM TAB BAR — built by mobile.js on phones/tablets (<=900px).
 * Hidden by default; only the media block reveals it, so desktop never shows
 * it even if the node exists. Each app surface reserves space so content is
 * never hidden behind the bar.
 * ==========================================================================*/
.apex-botnav { display: none; }

@media (max-width: 900px) {
  /* per-page bottom-nav height incl. iOS home-indicator safe area */
  body { --apex-bn: calc(54px + env(safe-area-inset-bottom)); }

  .apex-botnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--apex-bn);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel, #fff);
    border-top: 1px solid var(--border, #e8e9ee);
    box-shadow: 0 -6px 20px rgba(15, 17, 30, 0.06);
  }
  .apex-botnav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px;
    text-decoration: none; cursor: pointer;
    color: var(--muted, #8b8f9a); font-size: 10.5px; font-weight: 600;
    background: none; border: 0; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .apex-botnav-item svg { width: 21px; height: 21px; display: block; }
  .apex-botnav-item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .apex-botnav-item.is-active { color: var(--accent, #5B4DFF); }
  .apex-botnav-item:active { background: var(--panel-2, #f3f4ff); }

  /* ---- Reserve space so the bar never covers content ---- */
  /* Analyst: lift the in-flow composer above the bar. */
  .app .composer { margin-bottom: var(--apex-bn); }
  /* Dashboards: pad the report pane. */
  body.dash-body .dash-main { padding-bottom: var(--apex-bn); }
  /* Home launchpad. */
  body.home-body .home-main { padding-bottom: calc(var(--apex-bn) + 12px); }
  /* Admin content. */
  body.admin-body .admin-main { padding-bottom: calc(var(--apex-bn) + 12px); }
}

/* The install chip (pwa.js) sits clear of the bottom bar. */
@media (max-width: 900px) {
  .apex-install-chip { bottom: calc(var(--apex-bn, 64px) + 12px) !important; }
}

/* ============================================================================
 * DASHBOARDS — fit the report shell + loader to the phone.
 * The base @760 mobile grid used `1fr` (= minmax(auto,1fr)), which pins the
 * single column to its min-content (~591px) so the embed shell + loader card
 * overflow a 390px screen. minmax(0,1fr) + releasing min-width lets it all
 * shrink to the viewport (mirrors the analyst .app fix). Verified 390px.
 * ==========================================================================*/
@media (max-width: 760px) {
  body.dash-body,
  body.dash-body.dash-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; }
  body.dash-body .dash-main,
  body.dash-body .dash-embed-wrap,
  body.dash-body .dash-embed-head,
  body.dash-body .dash-embed-stage,
  body.dash-body .dash-embed-frame,
  body.dash-body .pbi-loader,
  body.dash-body .dash-embed-title,
  body.dash-body .dash-embed-sub { min-width: 0; }
  /* Loader card: width:min(560px,100%) now resolves to the phone; tighten pad. */
  body.dash-body .pbi-loader .eL-card { padding: 22px 18px; }
}

/* Report toolbar: compact the phone topbar so the bell + Account chip stay
 * on-screen (the report is the star; its actions shrink to icons). */
@media (max-width: 560px) {
  body.dash-body .topbar { gap: 6px; padding: 0 8px; }
  body.dash-body .dash-toolbar { gap: 4px; margin-right: 2px; }
  body.dash-body #saveBookmarkBtn { font-size: 0; padding: 8px 9px; }   /* icon only */
  body.dash-body #saveBookmarkBtn svg { margin-right: 0 !important; }
  body.dash-body #resetReportBtn { display: none; }                     /* declutter */
  body.dash-body #fullscreenBtn { display: none; }                      /* report is full-width inline */
}

/* ============================================================================
 * ADMIN — fit the console shell + topbar to the phone.
 * Same minmax(0,1fr) fix as dashboards (the @840 shell grid used `1fr`), plus
 * compact the topbar so the live-user pills + Account chip are never pushed
 * off-screen. The section tabs stay a swipeable strip (scrollbar hidden).
 * ==========================================================================*/
@media (max-width: 840px) {
  body.admin-body .admin-shell { grid-template-columns: minmax(0, 1fr) !important; }
  body.admin-body .admin-main { min-width: 0; }
  body.admin-body .admin-rail { scrollbar-width: none; }
  body.admin-body .admin-rail::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  body.admin-body .admin-topbar { min-width: 0; gap: 8px; }
  body.admin-body .admin-topbar-title { display: none; }    /* "Admin Console" — redundant on a phone */
  body.admin-body .live-users { gap: 4px; }
  body.admin-body .live-users .lu-label { display: none; }  /* compact number pills */
  body.admin-body .lu-pill { padding: 4px 7px; }
}

/* D — APP-MODE co-brand: on a phone the report topbar also carries the
 * bookmarks chip + save + bell + Account chip, so the full 'dataeze.ai'
 * wordmark used to get clipped and push the bell off-screen. On the report
 * page at phone width we swap the dataeze WORDMARK for the compact dataeze
 * ICON (the square 'de' mark). The icon <img> is always in the DOM
 * (tenant-brand.js); it's hidden everywhere except here. */
@media (max-width: 560px) {
  /* Reveal the compact dataeze icon + hide the wordmark ONLY here. These
     selectors are more specific than the hard-hide + the apex sizing rules in
     styles.css (they include .bl-mark-apex + img), and are !important, so this
     is the single place the icon is ever visible. Everywhere else it stays
     hidden — no duplicate mark. */
  body.dash-body .topbar .brand-lockup .bl-mark-apex img.bl-logo-full { display: none !important; }
  body.dash-body .topbar .brand-lockup .bl-mark-apex img.bl-logo-icon {
    display: block !important; height: 22px !important; max-height: 22px !important;
    width: auto !important; max-width: 26px !important;
  }
  body.dash-body .topbar .brand-lockup { max-width: none; overflow: visible; }
  body.dash-body .topbar .brand-lockup .bl-mark-c24 img.bl-img { max-height: 20px !important; }
  /* Bookmarks chip: drop the word, keep icon + count, so the toolbar is tight
     and the bell + Account chip never clip off the right edge. */
  body.dash-body #bookmarksBtn .tb-chip-label { display: none; }
}

/* C — an animated 'rotate your phone' hint over a cramped report (portrait).
 * The phone glyph rocks 0 -> 90deg on a loop so the message is obvious at a
 * glance; the banner slides up on entry. Shown by dashboards.js on report
 * open in portrait, auto-hidden in landscape. */
@keyframes drhSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drhRock {
  0%, 18%   { transform: rotate(0deg); }
  45%, 62%  { transform: rotate(90deg); }
  88%, 100% { transform: rotate(0deg); }
}
@media (max-width: 900px) {
  .dash-rotate-hint {
    position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 auto; z-index: 30;
    width: max-content; max-width: calc(100% - 20px); box-sizing: border-box;
    display: flex; align-items: center; gap: 8px;
    background: #1b1450; color: #fff; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; padding: 9px 12px;
    box-shadow: 0 16px 40px rgba(15, 17, 30, 0.42); font-size: 12.5px; line-height: 1.3;
    animation: drhSlideUp 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .dash-rotate-hint .drh-ic {
    flex: 0 0 auto; display: inline-flex; color: #b9b0ff;
    transform-origin: 50% 60%;
    animation: drhRock 2.4s ease-in-out infinite;
  }
  .dash-rotate-hint .drh-tx { flex: 1 1 auto; min-width: 0; font-weight: 500; }
  .dash-rotate-hint .drh-fs {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent, #5B4DFF); color: #fff; border: 0;
    border-radius: 9px; padding: 6px; cursor: pointer;
  }
  .dash-rotate-hint .drh-fs:active { transform: scale(0.97); }
  .dash-rotate-hint .drh-x { flex: 0 0 auto; background: none; border: 0; color: #b7bcca; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .dash-rotate-hint { display: none !important; }
}

/* ============================================================================
 * HOME — compact the launchpad on a phone so the hero + product cards fit in
 * ONE view instead of one-and-a-half cards. Desktop is untouched.
 * ==========================================================================*/
@media (max-width: 560px) {
  body.home-body .home-main { padding: 20px 16px calc(var(--apex-bn, 64px) + 16px) !important; justify-content: flex-start !important; }
  body.home-body .home-hero { margin-bottom: 16px !important; }
  body.home-body .home-hero h1 { font-size: 23px !important; line-height: 1.18 !important; margin-bottom: 4px !important; }
  body.home-body .home-sub { font-size: 14px !important; }
  body.home-body .home-cards { gap: 12px !important; grid-template-columns: minmax(0, 1fr) !important; max-width: 100% !important; }
  body.home-body .home-card { padding: 15px 16px 14px !important; gap: 6px !important; border-radius: 16px !important; }
  /* Icon box AND its child (svg OR the classless <img> in the AI card) shrink
     together — matching only .home-card-img before let the 64px AI image spill
     out of the 42px box and overlap the title. */
  body.home-body .home-card-icon { width: 44px !important; height: 44px !important; border-radius: 12px; margin-bottom: 2px; overflow: hidden; }
  body.home-body .home-card-icon svg,
  body.home-body .home-card-icon img { width: 32px !important; height: 32px !important; }
  body.home-body .home-card-title { font-size: 18px !important; line-height: 1.2 !important; }
  body.home-body .home-card-desc {
    font-size: 13px; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.home-body .home-card-cta { margin-top: 6px; font-size: 13.5px; }
  body.home-body .home-card::after { height: 3px; }
}