/* ==========================================================================
   Tricky — mobile / responsive layer (loaded AFTER prototype.css so it wins).
   Rule: portrait, vertical-only. No horizontal scrolling anywhere on mobile.
   Desktop (>820px) is untouched and stays faithful to the prototype.
   ========================================================================== */

/* Never allow horizontal scroll */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Main content wrapper (desktop default) */
.tk-main {
  margin-left: 201px;
  padding: 28px 36px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Hidden by default (desktop) */
.tk-hamburger,
.tk-scrim,
.tk-mobile-only {
  display: none;
}

/* ----------------------------- MOBILE ----------------------------- */
@media (max-width: 820px) {
  /* Off-canvas sidebar drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 3000;
    width: 252px;
  }
  .sidebar.tk-open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
  }

  /* Hamburger toggle */
  .tk-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 3100;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ececef;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #1c1c1c;
  }

  /* Dim scrim behind the open drawer */
  .tk-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2900;
  }

  /* Main content goes full-width, room for the hamburger up top */
  .tk-main {
    margin-left: 0;
    padding: 62px 14px 28px;
  }

  /* Visibility helpers */
  .tk-desktop-only {
    display: none !important;
  }
  .tk-mobile-only {
    display: block !important;
  }

  /* Unified section header → vertical stack, no horizontal scroll */
  .header {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 12px;
    padding: 0 0 6px;
  }
  .header-left,
  .header-center,
  .header-right {
    width: 100%;
  }
  .header-right {
    justify-content: flex-end;
  }
  .tabs {
    flex-wrap: wrap;
  }
  .search-box {
    width: 100%;
    box-sizing: border-box;
  }

  /* Any lifted table never forces horizontal scroll on mobile */
  .table-container,
  table.table {
    overflow-x: hidden;
  }

  /* ---- Communication Center → full-screen, single-column on mobile --------
     Keeps EVERYTHING (channel tabs, templates / history / insights, schedule)
     but stacks it vertically so nothing is squished side-by-side. Desktop
     (>820px) keeps the faithful two-column layout, untouched. */
  .modal-overlay {
    padding: 0;
  }
  .sms-modal-enhanced {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Channel tabs share the width evenly so they never overflow. */
  .sms-channel-tabs {
    flex-wrap: wrap;
  }
  .sms-channel-tab {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Body becomes one comfortably scrolling column: compose, then the panel. */
  .sms-body {
    flex-direction: column;
    overflow-y: auto;
    margin-top: 0;
  }
  .sms-compose {
    overflow: visible;
    padding: 16px 16px 20px;
    gap: 14px;
  }

  /* The templates / history / insights panel drops below the composer. */
  .sms-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid #f0f0f2;
  }
  .sms-sidebar-panel {
    overflow-y: visible;
  }

  /* Roomy, easy-to-tap message box; 16px stops iOS zooming on focus. */
  .sms-message-area textarea,
  .rte-editor {
    min-height: 160px;
    font-size: 16px;
  }

  /* Footer: send-result banner on its own line, full-width buttons below. */
  .sms-actions {
    flex-wrap: wrap;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .sms-draft-btn {
    display: none; /* "Save draft" is desktop-only polish */
  }
  .sms-actions-left {
    flex: 1 1 100%; /* banner (send result / error) spans the full width */
  }
  .sms-actions-right {
    flex: 1 1 100%;
    gap: 10px;
  }
  .sms-cancel-btn {
    flex: 0 0 auto;
    padding: 13px 18px;
  }
  .sms-send-btn {
    flex: 1;
    justify-content: center;
    padding: 13px 18px;
    font-size: 15px;
  }
}