/**
 * LifeOS — Communications Module (desktop-only styles)
 *
 * Loaded via app.html with media="(min-width: 901px)". The browser only
 * applies these rules on desktop viewports; no inner @media wrapper needed
 * (the link's media attribute IS the gate — see ui-platform-convention §5).
 *
 * Brand tokens come from css/app.css :root.
 *
 * Visibility ownership (Option B):
 *   - This sheet hides .comm-mobile-actions (the mobile-position toolbar
 *     slot rendered unconditionally by js/communications.js).
 *   - css/communications.mobile.css symmetrically hides .comm-page-actions.
 *   - Shared css/communications.css stays neutral on either slot.
 */

/* Hide the mobile-position toolbar slot — it's always rendered in the DOM
   so resize/rotate transitions Just Work via media-query re-evaluation. */
.comm-mobile-actions { display: none; }

/* Email-row action buttons render in a row at the right of each card. */
.comm-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Slightly larger icon-action buttons on desktop (easier hit-targets with
   a mouse) + svg sizing + reserved-slot footprint matching. */
.btn-icon.comm-act {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.btn-icon.comm-act svg { width: 18px !important; height: 18px !important; }
.comm-action-slot-reserved { width: 38px; height: 38px; }

/* Compose-modal attachment dropzone — desktop shows + accepts drag-drop.
   Mobile sheet hides this surface (no drag-drop on touch). */
.comp-attachment-dropzone { display: flex; }
.comp-attachment-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}