/**
 * Tablet-Specific Layouts (850px – 1199px)
 * ----------------------------------------
 * Mirrors `body.is-tablet` from layout-state.js (md=850, xl=1200).
 * PWA is portrait-only, so these styles focus on portrait tablet
 * layouts at various widths.
 *
 * Layout bands:
 *   850–1023   small tablet   (narrow sidebar, no inline contact panel)
 *   1024–1199  large tablet   (wider sidebar, can show 3-column layout)
 *   850–1199   tablet-wide    (UI affordances that apply to both bands)
 *
 * Two iPad-portrait band overrides for `.conversations-sidebar` width
 * live at the bottom of the file and intentionally sit AFTER the
 * small/large blocks so cascade order lets them win where their ranges
 * overlap with the generic bands.
 *
 * --------------------------------------------------------------------
 * Cleanup history (2026-05-13 — see /opt/accentapp/docs/plans for
 * details if needed; refactor preserves every resolved style at every
 * viewport width across 810–1199):
 *
 *   • Consolidated 8 identical `@media (min-width:850) and (max-width:1199)`
 *     blocks (previously scattered through the file, one per UI section)
 *     into a single tablet-wide block. Source-order of declarations is
 *     preserved so any future intra-block cascade behavior is identical.
 *
 *   • Merged two conflicting `@media (min-width:1024) and (max-width:1199)`
 *     blocks. The original cascade resolved `.conversations-sidebar`'s
 *     width to 400px (second block beat first block by file-order); the
 *     merged block hard-codes 400 directly so the result is identical
 *     and self-evident.
 *
 *   • Dropped a dead `width:300` declaration for `#contactPanel` from
 *     the large-tablet block. It was always overridden by the
 *     tablet-wide block above (which sets `width:450` and comes later in
 *     file order), so the resolved width was 450 anyway. `flex-shrink:0`
 *     was preserved in the large-tablet block because the tablet-wide
 *     block doesn't touch flex-shrink — original behavior was
 *     `width:450; flex-shrink:0; max-width:80vw; max-height:85vh` and
 *     remains so.
 *
 *   • Deleted the original "iPad Mini" `@media (min-width:850) and
 *     (max-width:810)` block. The query was a typo (min > max means
 *     no viewport ever matches it); the block was dead code from day
 *     one and removing it changes nothing.
 *
 *   • Narrowed the iPad-Pro-11" override from `max-width:1024` to
 *     `max-width:1023`. At exactly 1024px, the original cascade
 *     resolved to 400px via the duplicate large-tablet block declared
 *     later in the file; the new boundary preserves that resolved
 *     value via a simpler, non-overlapping boundary with the merged
 *     large-tablet block above.
 *
 *   • Deleted the empty `.main-content-area.show-contact-panel` rule
 *     (it had an empty body — no declarations).
 *
 *   • Updated the file header date from the stale 768–1199 range to
 *     the actual 850–1199 range that `body.is-tablet` covers.
 */

/* ============================================
   TABLET BASE
   ============================================ */

body.is-tablet {
  /* Larger touch targets on tablets */
  --touch-target-min: 48px;
}

/* Blanket tablet tap-target rule. The :not() exclusion list protects
   design-intent circular buttons from being forced to 48px tall (which
   deforms the circle into an ellipse). When adding new small round
   buttons that should stay at their declared size, add their class
   here. Mirrors breakpoints.css's mobile-track version of this rule. */
body.is-tablet .btn,
body.is-tablet button:not(.btn-sm):not(.btn-xs):not(#presenceBtn):not(.call-contact-btn):not(.contact-chat-btn):not(.contact-profile-btn):not(.teams-profile-btn):not(.teams-call-btn):not(.blind-transfer-btn):not(.attended-transfer-btn):not(.voicemail-transfer-btn):not(.transfer-menu-trigger):not(.fav-action-btn):not(.compose-plus-btn):not(.compose-send-btn):not(.compose-dictate-btn):not(.sms-nav-btn):not(.call-nav-btn):not(#scrollToBottomBtn):not(.card-action-btn):not(.mini-action-btn):not(.list-action-btn):not(.tl-type-btn):not(#timelineFutureToggle):not(.contact-detail-tab):not(#timelineSummarizeBtn) {
  min-height: var(--touch-target-min);
}

/* ============================================
   TABLET-WIDE (850–1199)
   Rules that apply across the entire tablet range, regardless of the
   small/large sub-band. Consolidated 2026-05-13 from 8 separate, identical
   @media blocks. Internal declaration order matches the original file
   order to preserve any intra-block cascade behavior.
   ============================================ */
@media (min-width: 850px) and (max-width: 1199px) {

  /* ---- Conversation list ---- */
  .conversation-item {
    padding: 14px 16px;
  }
  /* Main conversation avatar (already w-12 h-12 via Tailwind).
     Explicitly protect group-member-chip images from this rule. */
  .conversation-item > .flex > .avatar {
    width: 48px;
    height: 48px;
  }
  .conversation-item .group-member-chip,
  .conversation-item .group-member-chip img {
    width: 22px;
    height: 22px;
  }
  .conversation-item .conversation-name {
    font-size: 0.9375rem;
  }
  .conversation-item .conversation-preview {
    font-size: 0.8125rem;
  }

  /* ---- Message input area ---- */
  .message-input-container {
    padding: 12px 16px;
  }
  .message-input-container textarea,
  .message-input-container input {
    font-size: 1rem;
    padding: 12px 16px;
  }

  /* ---- Call panel ---- */
  /* Dialpad — larger buttons on tablet */
  #dialpadView .dialpad-btn {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }
  #dialpadView .dialpad-grid {
    gap: 12px;
  }
  /* Active call view */
  #activeCallView {
    padding: 24px;
  }
  .active-call-avatar-wrapper > div {
    width: 120px;
    height: 120px;
  }
  #callTimer {
    font-size: 2.5rem;
  }
  #activeCallName {
    font-size: 1.5rem;
  }
  /* Call control buttons */
  .call-control-btn {
    width: 64px;
    height: 64px;
  }

  /* ---- Settings ---- */
  /* Settings can show sidebar and panel side by side on tablets */
  #settingsView .settings-container {
    flex-direction: row;
  }
  #settingsView .settings-sidebar {
    width: 280px;
    flex-shrink: 0;
  }
  #settingsView .settings-panels {
    flex: 1;
  }

  /* ---- Contact panel ---- */
  /* Contact panel as modal — larger on tablet. NOTE: at 1024–1199 the
     large-tablet block below additionally sets `flex-shrink:0` so the
     inline 3-column layout doesn't squish the panel. */
  #contactPanel:not(.hidden) {
    width: 450px;
    max-width: 80vw;
    max-height: 85vh;
  }

  /* ---- Header ---- */
  /* Show full header actions on tablet */
  .header-actions-desktop {
    display: flex !important;
  }
  .header-menu-btn {
    display: none !important;
  }
  /* Header padding */
  header .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* ---- Modals ---- */
  /* Modals sized appropriately for tablet viewport */
  .modal-content,
  [role="dialog"] {
    max-width: 600px;
    max-height: 80vh;
  }
  /* Full-screen modals on tablet can be centered with breathing room */
  .modal-fullscreen {
    width: 90vw;
    height: 90vh;
    max-width: 900px;
    margin: 5vh auto;
    border-radius: 12px;
  }

  /* ---- Scrolling ---- */
  /* Smoother scrolling on tablets */
  .conversations-sidebar,
  #conversationsList,
  #messageThread,
  #callHistoryList {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  /* Custom scrollbars (thin) */
  .conversations-sidebar::-webkit-scrollbar,
  #conversationsList::-webkit-scrollbar,
  #messageThread::-webkit-scrollbar {
    width: 6px;
  }
  .conversations-sidebar::-webkit-scrollbar-thumb,
  #conversationsList::-webkit-scrollbar-thumb,
  #messageThread::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .dark .conversations-sidebar::-webkit-scrollbar-thumb,
  .dark #conversationsList::-webkit-scrollbar-thumb,
  .dark #messageThread::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* ============================================
   SMALL TABLET (850–1023)
   Narrower sidebar, smaller header text, two-column row layout.
   ============================================ */
@media (min-width: 850px) and (max-width: 1023px) {
  /* Main content area uses row layout */
  .main-content-area {
    flex-direction: row;
  }
  /* Conversations sidebar — narrower on small tablets */
  .conversations-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 350px;
    flex-shrink: 0;
  }
  /* Message area fills remaining space */
  .message-area {
    flex: 1;
    min-width: 0; /* Allow shrinking */
  }
  /* Adjust header for small tablet */
  .header-text h1 {
    font-size: 1.125rem;
  }
  .header-text p {
    font-size: 0.6875rem;
  }
}

/* ============================================
   LARGE TABLET (1024–1199)
   Wider sidebar, inline contact panel possible (3-column).
   Consolidated 2026-05-13 from two conflicting @media blocks; final
   resolved values from the original cascade are preserved exactly.
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Wider sidebar on larger tablets. Resolved width was 400 in the
     original cascade (block A declared 380 first, block B declared
     400 later — B won by file order). The merged value here is 400
     so the resolved style is identical. */
  .conversations-sidebar {
    width: 400px;
    min-width: 320px;
    max-width: 420px;
  }
  .message-area {
    flex: 1;
  }
  /* Contact panel can show inline at this width. Width / max-width /
     max-height are set by the tablet-wide block above and resolve to
     `450 / 80vw / 85vh` here too. The only thing this block needs to
     add is `flex-shrink:0` so the inline 3-column layout doesn't
     squish the panel. (The original code declared `width:300` here,
     but it was always overridden by the tablet-wide block's later
     `width:450` declaration — it was dead. Dropped on 2026-05-13. */
  #contactPanel:not(.hidden) {
    flex-shrink: 0;
  }
}

/* ============================================
   IPAD-PORTRAIT BAND OVERRIDES for .conversations-sidebar
   Adjust sidebar width within iPad-portrait resolution bands. These
   blocks sit AFTER the small/large blocks so cascade order lets them
   win where their ranges overlap with the generic bands.

   Effective behavior across viewport widths:
     810–833  → 340 (iPad-Air override only)
     834–849  → 360 (iPad-Air → iPad-Pro-11", Pro-11" wins by file order)
     850–1023 → 350 (clamped: both overrides try to widen to 340/360
                     but the small-tablet block's max-width:350 caps it)
     1024–1199 → 400 (overrides don't apply; large-tablet block wins)

   The 810–849 portion falls into `body.is-mobile` territory where the
   sidebar layout is dominated by mobile-specific rules, so the leak
   has no visible effect at those widths.

   Cleanup history (2026-05-13):
     • Deleted the original "iPad Mini" block (was `@media (min-width:850)
       and (max-width:810)` — a typo, min > max, never matched any
       viewport, dead code from day one).
     • Narrowed the iPad-Pro-11" override from 834–1024 to 834–1023.
       At exactly 1024 the original cascade resolved to 400px via the
       duplicate large-tablet block declared later in file; the new
       boundary preserves that 400px via a simpler non-overlapping
       boundary with the consolidated large-tablet block above.
   ============================================ */

/* iPad / iPad Air-portrait band */
@media (min-width: 810px) and (max-width: 900px) {
  .conversations-sidebar {
    width: 340px;
  }
}

/* iPad-Pro-11"-portrait band */
@media (min-width: 834px) and (max-width: 1023px) {
  .conversations-sidebar {
    width: 360px;
  }
}