/**
 * LifeOS — Communications Module (mobile-only styles)
 *
 * Loaded via app.html with media="(max-width: 900px)". The link's media
 * attribute IS the platform gate; no outer @media wrapper inside this file
 * (see ui-platform-convention §5). Inner @media (max-width: 600px) blocks
 * are kept for phone-narrow tightening — non-redundant because they're
 * narrower than the outer gate.
 *
 * Brand tokens come from css/app.css :root.
 *
 * Visibility ownership (Option B):
 *   - This sheet hides .comm-page-actions (the desktop-position toolbar
 *     slot rendered unconditionally by js/communications.js).
 *   - css/communications.desktop.css symmetrically hides .comm-mobile-actions.
 *   - Shared css/communications.css stays neutral on either slot.
 *
 * Layout for the mobile-position toolbar (.comm-mobile-actions): re-homed
 * here from a previous inline `style="display:flex;…"` attribute on the
 * div (qc_t2 cascade #9 locked-decision: inline display:flex would defeat
 * the desktop visibility gate).
 */

/* Hide the desktop-position toolbar slot. */
.comm-page-actions { display: none; }

/* Mobile-position toolbar: layout (display:flex was previously inline on
   the element; moved here so the desktop sheet's display:none can win). */
.comm-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

/* Touch-target floor for action-slot reserved cells. */
.comm-action-slot-reserved { width: 44px; height: 44px; }

/* Mobile toolbar pill sizing — full-width pills, 44px tap height. */
.comm-mobile-actions { width: 100%; justify-content: flex-start; }
.btn.comm-toolbar-btn {
  flex: 1 1 auto;
  padding: 9px 14px;
  font-size: 14px;
  min-height: 44px;
}
/* Keyboard shortcut helper has no use on touch devices — hide it.
   NB: selector renamed from #comm-shortcuts-btn to .js-comm-shortcuts-btn
   as part of the Option B duplicate-id refactor. */
.js-comm-shortcuts-btn { display: none; }

/* Hide the AI-search row entirely on mobile (Phase 2 decision: natural-
   language inbox-search is a desktop affordance only). The flex-wrap rule
   below it is dead under display:none but kept defensively in case the
   row is ever re-enabled on mobile. Migrated from css/mobile.css L113-114
   (the dead `#comm-ai-search-row` id selector dropped during migration —
   no such element exists; the input id is `#comm-ai-search`). */
.comm-ai-search-row { display: none !important; }

/* AI search row wrap layout (defensive; currently dead under display:none) */
.comm-ai-search-row { flex-wrap: wrap; }
.comm-ai-search-icon { flex: 0 0 auto; }
.comm-ai-search-input { flex: 1 1 calc(100% - 36px); width: 100%; }
.comm-ai-search-row .btn { flex: 1 1 auto; }

/* Mobile email-row grid — collapse to 2-col, hide secondary chrome until
   the row is expanded. */
.comm-row { grid-template-columns: 30px 1fr; gap: 8px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
.comm-row.bulk-mode { grid-template-columns: 24px 30px 1fr; }
.comm-row-actions { display: none; }
.comm-row-summary { display: none; }

/* Expanded-row action surface — when the user taps to open an email,
   surface the actions as a wrapped row under the body content instead of
   jamming them into the right grid column where they overlap. */
.comm-row.expanded { grid-template-columns: 1fr; }
.comm-row.expanded .comm-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  justify-content: flex-start;
  opacity: 1;
}
.comm-row.expanded .comm-row-actions .btn-icon.comm-act { width: 40px; height: 40px; }

/* ─── Compose attachments — mobile (paperclip-only, no drop-zone) ─────── */
/* Hide the drag-and-drop zone — useless on touch. The paperclip button in
   the modal footer is the sole attachment entry-point. */
.comp-attachment-dropzone { display: none; }

/* Paperclip button gets the generic .btn-icon mobile size (44x44 from
   app.css L1250 cross-module rule) plus a subtle accent on press. */
.btn-icon.comp-attach-toggle {
  border-color: var(--border);
}
.btn-icon.comp-attach-toggle:hover,
.btn-icon.comp-attach-toggle:active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* Chip remove button — 32x32 hit area without enlarging the visible mark. */
.comp-attachment-chip-remove { width: 32px; height: 32px; }

/* Modal footer wrap: paperclip + Cancel + Send stay readable at narrow widths. */
.modal-footer { flex-wrap: wrap; gap: var(--sp-2); }

/* Chip list row gap when multiple wrap. */
.comp-attachment-list { row-gap: var(--sp-2); }

/* Phone-narrow tightening — narrower than outer gate, so inner @media is
   non-redundant per ui-platform-convention §5. */
@media (max-width: 600px) {
  .btn-icon.comm-act { width: 30px; height: 30px; border-radius: 7px; }
  .comm-action-slot-reserved { width: 30px; height: 30px; }

  /* Comms priority grid — collapse 10-col to 5x2 */
  .prio-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* Snooze preset 2-col → 1col on phone-narrow if needed */
  .snooze-preset-grid { grid-template-columns: 1fr 1fr; }

  /* Snooze preset further collapse to single column on iPhone-SE class.
     Order matters: this rule must come AFTER the 2-col rule above so it
     wins the cascade. */
  .snooze-preset-grid { grid-template-columns: 1fr; }

  /* Compose-attachment chip tightening on iPhone-SE class — keeps 5
     wrapped chips legible without forcing horizontal scroll. */
  .comp-attachment-chip {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
  }
  .comp-attachment-chip-name { max-width: 50vw; }
}