/* ── MOBILE ── */
    @media (max-width: 768px) {

      /* ── Core layout ── */
      .side { display: none; }
      .app { grid-template-columns: 1fr; }
      .view { padding: 0 0 72px; max-width: 100%; }
      .page-hdr { display: none !important; }

      /* ── Mobile view header ── */
      .mob-view-hdr {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        position: sticky;
        top: 0;
        z-index: 5;
        margin-bottom: 0;
      }
      .mob-view-title {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-weight: 700;
        font-size: 19px;
        color: var(--ink);
        letter-spacing: -.2px;
      }
      .mob-view-actions { display: flex; gap: 6px; align-items: center; }

      /* ── View content areas ── */
      .view-content { padding: 14px 16px; }
      .cal-header { padding: 0; }
      .gaps-panel { margin-bottom: 14px; }

      /* ── Calendar ── */
      .cal-grid { display: none; }
      .cal-dow  { display: none; }
      .cal-agenda { display: block !important; }

      /* ── Composer ── */
      #composerView { padding: 0 0 72px !important; max-width: 100%; }
      .composer-layout { display: flex; flex-direction: column; gap: 0; }
      #composerModeTabs { margin: 0 12px 12px !important; overflow-x: auto; scrollbar-width: none; }
      #composerModeTabs::-webkit-scrollbar { display: none; }
      .composer-mode-tab { flex: 0 0 auto; padding-inline: 14px !important; }
      /* Editor full-width, no side padding */
      .editor-wrap { border-radius: 0; border-left: none; border-right: none; }
      .rich-editor { min-height: clamp(240px, 42dvh, 520px); font-size: 16px; padding: 16px; }
      .editor-toolbar {
        padding: 8px 10px;
        gap: 3px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .editor-toolbar::-webkit-scrollbar { display: none; }
      .editor-toolbar .tb-btn { flex: 0 0 auto; }
      .editor-footer { padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
      .editor-footer #composerChannel { width: 100%; max-width: none !important; flex-basis: 100% !important; }
      .editor-footer .composer-draft-status { margin-left: 0; }
      /* Media controls — padded since they sit below full-width editor */
      .media-toggle-btn, #mediaToggleOff {
        margin: 8px 16px 0;
        width: calc(100% - 32px) !important;
      }
      #mediaSummary    { margin: 8px 16px 0; }
      #composerStatus  { padding: 0 16px; font-size: 12px; }
      #refPin          { margin: 0 16px 14px; }
      /* Buffer actions become a thumb-friendly dock. */
      .composer-panel {
        position: sticky;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 4;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: linear-gradient(to bottom, transparent, var(--bg) 22%);
      }
      .composer-panel:has(.schedule-row.open) { position: static; }
      .composer-panel .panel-card { padding: 9px; border-color: var(--border2); border-radius: 12px; }
      .composer-panel .panel-card-title { display: none; }
      .send-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
      .send-actions .btn { width: auto; min-width: 0; height: 44px; padding-inline: 6px; font-size: 12px; line-height: 1.15; justify-content: center; }

      /* Writing tools use the same content as a mobile bottom sheet. */
      body.composer-resources-open { overflow: hidden; }
      .composer-support {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(78dvh, 720px);
        padding: 0;
        margin: 0;
        transform: translateY(calc(100% + 20px));
      }
      .composer-support.open { transform: translateY(0); }
      .composer-support .support-tools-card {
        border-radius: 22px 22px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
      }
      .resource-drawer-head { padding: 20px 16px 14px; }
      .resource-drawer-head::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 99px;
        background: var(--border2);
        transform: translateX(-50%);
      }
      .composer-support .support-tabs { padding-inline: 8px; }
      .composer-support .support-tab { flex: 1 0 auto; justify-content: center; padding-inline: 10px; }
      .composer-support .support-panel { padding: 14px 16px; }
      .resource-drawer-search { padding: 10px 14px; }
      .composer-resource-card { padding: 12px 13px; }
      .composer-resource-actions .btn { flex: 1 1 auto; min-height: 40px; justify-content: center; }

      .composer-focus-bar {
        margin: 8px 10px 12px;
        padding: 9px 10px;
        top: 8px;
        border-radius: 12px;
      }
      .composer-focus-brand { font-size: 15px; }
      .composer-focus-actions { margin-left: auto; }
      .composer-focus-actions .btn { padding-inline: 9px; }
      body.composer-focus-mode #composerView { padding: 0 0 calc(72px + env(safe-area-inset-bottom)) !important; }
      body.composer-focus-mode .rich-editor { min-height: clamp(320px, 58dvh, 680px); }
      body.composer-focus-mode .composer-panel { bottom: env(safe-area-inset-bottom); }

      @media (max-width: 460px) {
        .composer-focus-bar > .composer-draft-status { display: none; }
        .composer-focus-badge { display: none; }
        .composer-mobile-action { padding-inline: 8px; }
        .composer-support-hdr { align-items: flex-start; flex-wrap: wrap; }
        .composer-support-hdr > .btn { margin-left: auto; }
      }

      /* ── Templates ── */
      .templates-layout { display: flex; flex-direction: column; gap: 0; }
      .templates-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 0 0 12px;
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 12px;
        box-shadow: none;
      }
      .type-filter-btn {
        width: auto;
        padding: 5px 12px;
        border-radius: 20px;
        border: 1px solid var(--border2);
        background: var(--surface);
        font-size: 12px;
        justify-content: center;
      }
      .type-filter-btn .type-filter-count { display: none; }
      .templates-grid { grid-template-columns: 1fr; }
      .ideas-tabs {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
      }
      .ideas-tab { flex: 0 0 auto; }
      .ideas-panel-hdr {
        flex-direction: column;
        align-items: stretch;
      }
      .ideas-panel-hdr .page-actions { display: flex; justify-content: flex-start; }
      .ideas-mobile-only { display: inline-flex; }
      .ideas-desktop-only { display: none; }

      /* ── Approvals ── */
      .approval-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 8px;
      }

      /* ── Misc ── */
      .cols2 { grid-template-columns: 1fr; }

      /* ── Bottom nav ── */
      .mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 100;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(20,22,42,.06);
      }
      .mob-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: transparent;
        border: none;
        color: var(--subtle);
        font-size: 10px;
        font-family: 'DM Mono', monospace;
        cursor: pointer;
        letter-spacing: .04em;
        text-transform: uppercase;
        transition: color .12s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
      }
      .mob-tab.active { color: var(--brand); }
      .mob-tab.active::before {
        content: '';
        position: absolute;
        top: 5px; left: 50%;
        transform: translateX(-50%);
        width: 4px; height: 4px;
        border-radius: 50%;
        background: var(--brand);
      }
      .mob-tab svg {
        width: 18px; height: 18px;
        stroke: currentColor; fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      }

      /* ── Modals sheet up ── */
      .modal { align-items: flex-end; padding: 0; }
      .modal-card {
        max-width: 100%; width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 88vh;
        padding: 20px 16px 40px;
        animation: sheetUp .28s cubic-bezier(.34,1.1,.64,1);
      }
      @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

      /* Prevent iOS zoom */
      input, select, textarea { font-size: 16px !important; }
    }

    @media (min-width: 1440px) {
      .view { padding-left: 48px; padding-right: 48px; }
    }

    @media (max-width: 960px) {
      :root { --sidebar: 220px; }
      .composer-layout { grid-template-columns: 1fr; }
    }