/*
 * Inbox view — per-view CSS layer (finance-aligned design language).
 *
 * Mirrors `_inbox-view-finance-aligned.stories.js` (canonical visual target).
 * Bespoke `.inb-*` class system — finance-style typography ladder, 14/16px
 * radius, color-mix(12-18%) tints with full-strength fg, border-left-4px for
 * state accents, scale(0.98) touch, rgba(255,255,255,0.04-0.06) separators.
 *
 * Catalog: pwa/components/_inbox-view-finance-aligned.stories.js
 */

/* ── Shell ────────────────────────────────────────────────────────── */
.inb-shell {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 100px;
  background: var(--color-surface);
  color: var(--color-on-surface);
}

/* ── Header strip ──────────────────────────────────────────────────── */
.inb-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-sm); padding: var(--space-gutter);
  flex-wrap: wrap;
}
.inb-header-left { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
/* .inb-header-title-row → .base-row in pwa/styles/base.css. Markup composes both. */
.inb-header-title {
  font-size: 22px; font-weight: 800;
  margin: 0; color: var(--color-on-surface);
  letter-spacing: -0.3px;
  font-family: var(--type-headline-family, Manrope, system-ui, sans-serif);
}
.inb-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-error); color: var(--color-on-error);
  font-size: 12px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: var(--radius-snug);
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.inb-header-stats {
  font-size: 12px; color: var(--color-success); font-weight: 600;
}
.inb-sync-caption {
  font-size: 11px; color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Lane filter (rounded pill tabs, semantic active tone) ───────── */
.inb-lanes {
  display: flex; gap: var(--space-xs);
  padding: 0 12px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.inb-lanes::-webkit-scrollbar { display: none; }
.inb-lane {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant);
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; border: none;
  display: inline-flex; align-items: center; gap: var(--space-tight);
  transition: all 0.15s;
  touch-action: manipulation;
}
.inb-lane:hover { background: rgba(255, 255, 255, 0.08); }
.inb-lane:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.inb-lane.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.inb-lane-count {
  font-size: 11px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18); color: inherit;
  font-variant-numeric: tabular-nums;
}
.inb-lane:not(.active) .inb-lane-count {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Queue filter bar (segmented tab strip, hairline divider) ───── */
.inb-filter-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-md);
  padding: 3px;
  margin: 0 12px 12px;
  overflow-x: auto; scrollbar-width: none;
}
.inb-filter-bar::-webkit-scrollbar { display: none; }
.inb-filter-btn {
  flex: 0 0 auto;
  padding: 7px 12px; border-radius: 9px;
  background: transparent; color: var(--color-on-surface-variant);
  font-size: 12px; font-weight: 600;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  touch-action: manipulation;
}
.inb-filter-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.inb-filter-btn.active {
  background: var(--color-surface, var(--bg));
  color: var(--color-on-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.inb-filter-btn-count {
  margin-left: 5px; opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ── Section title (between item-card groups) ───────────────────── */
.inb-section-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 16px 16px 8px;
  font-family: var(--type-label-family, 'Space Grotesk', system-ui, sans-serif);
}
.inb-section-title.tier-critical { color: var(--color-error); }
.inb-section-title.tier-high     { color: var(--color-warning); }
.inb-section-title.tier-normal   { color: var(--color-on-surface-variant); }
.inb-section-title.tier-low      { color: var(--color-on-surface-variant); opacity: 0.7; }
.inb-section-title.tier-advisory { color: var(--color-on-surface-variant); }
.inb-section-title.tier-deploy   { color: var(--color-warning); }
.inb-section-title.tier-alert    { color: var(--color-error, #ff4d4f); }

/* Alert cards (spec: pwa-alerts-resolution). Severity-tinted left border + faint background. */
.inb-card.inb-alert-crit {
  border-left: 3px solid var(--color-error, #ff4d4f);
  background: color-mix(in srgb, var(--color-error, #ff4d4f) 6%, transparent);
}
.inb-card.inb-alert-warn {
  border-left: 3px solid var(--color-warning, #ffb84d);
  background: color-mix(in srgb, var(--color-warning, #ffb84d) 6%, transparent);
}
.inb-card.inb-alert-info {
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.inb-alert-occ {
  margin-left: 6px; padding: 1px 6px;
  font-size: 11px; font-weight: 600;
  background: var(--color-on-surface-variant); color: var(--color-surface);
  border-radius: 8px; vertical-align: middle;
}
.inb-alert-foot {
  font-family: var(--type-mono-family, ui-monospace, monospace);
  font-size: 11px; opacity: 0.7;
}

/* CodePipeline approvals — surfaced top-of-inbox so deploys can be
   approved or rejected from the PWA without bouncing through Telegram. */
.inb-card-deploy {
  border-left: 3px solid var(--color-warning, #ffb84d);
  background: color-mix(in srgb, var(--color-warning, #ffb84d) 8%, transparent);
}
.inb-card-deploy .inb-card-icon { font-size: 18px; }
.inb-card-deploy .inb-card-title { font-weight: 600; }
.inb-card-deploy .inb-card-meta { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 4px; }
.inb-card-deploy .inb-deploy-exec {
  font-family: var(--type-mono-family, ui-monospace, monospace);
  font-size: 11px; opacity: 0.7;
}
.inb-card-deploy .inb-card-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.inb-banner {
  margin: 8px 12px; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
}
.inb-banner-warn {
  background: color-mix(in srgb, var(--color-warning, #ffb84d) 10%, transparent);
  border-left: 3px solid var(--color-warning, #ffb84d);
  color: var(--color-on-surface, inherit);
}
.inb-banner code {
  font-family: var(--type-mono-family, ui-monospace, monospace);
  background: rgba(0,0,0,0.15); padding: 1px 4px; border-radius: 3px; font-size: 12px;
}
.inb-btn.danger {
  background: transparent;
  color: var(--color-error, #ff6363);
  border: 1px solid color-mix(in srgb, var(--color-error, #ff6363) 35%, transparent);
}
.inb-btn.danger:hover {
  background: color-mix(in srgb, var(--color-error, #ff6363) 8%, transparent);
}

/* ── List container ─────────────────────────────────────────────── */
.inb-list { padding: 0 12px; margin-bottom: var(--space-base); }

/* ── Item card (border-left accent by item type) ────────────────── */
.inb-card {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-roomy);
  padding: 14px 16px;
  border-left: 4px solid var(--color-on-surface-variant);
  cursor: pointer;
  transition: transform 0.18s ease;
  touch-action: pan-y;
}
.inb-card:active { transform: scale(0.98); }
.inb-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.inb-card.type-email      { border-left-color: var(--color-primary); }
.inb-card.type-approval   { border-left-color: var(--color-warning); }
.inb-card.type-assignment { border-left-color: var(--color-tertiary); }
.inb-card.type-task       { border-left-color: var(--color-primary); }
.inb-card.type-whatsapp   { border-left-color: var(--color-success); }

/* Urgency-tier accent overrides type accent for highest tiers */
.inb-card.tier-critical { border-left-color: var(--color-error); }
.inb-card.tier-high     { border-left-color: var(--color-warning); }

/* ── Card head (badges + title row) ─────────────────────────────── */
.inb-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-snug);
}
.inb-card-titlebar {
  display: flex; align-items: center; gap: var(--space-base); flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.inb-card-title {
  font-size: 15px; font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.35;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--type-headline-family, Manrope, system-ui, sans-serif);
}
.inb-card-subtitle {
  font-size: 12px; color: var(--color-on-surface-variant);
  margin-top: var(--space-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Type / lane / state badges ─────────────────────────────────── */
.inb-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--radius-tight);
  text-transform: uppercase; letter-spacing: 0.3px;
  flex-shrink: 0;
  font-family: var(--type-label-family, 'Space Grotesk', system-ui, sans-serif);
}
.inb-badge-type {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-surface-variant);
}
.inb-badge-lane {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}
.inb-badge-state {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-on-surface-variant);
}

/* ── Card meta row (timestamp + state) ──────────────────────────── */
.inb-card-meta {
  display: flex; gap: var(--space-sm); align-items: center;
  font-size: 11px; color: var(--color-on-surface-variant);
  margin-top: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Expanded body slots ─────────────────────────────────────────── */
.inb-card-body {
  margin-top: var(--space-snug);
  font-size: 13px; color: var(--color-on-surface);
  line-height: 1.55;
}

.inb-draft-body {
  padding: 10px 12px; border-radius: var(--radius-snug);
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-size: 13px; color: var(--color-on-surface);
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: var(--space-sm);
  max-height: 200px; overflow-y: auto;
}

.inb-approval-body {
  font-size: 13px; color: var(--color-on-surface);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
  white-space: pre-wrap;
}

.inb-cancelled-plan {
  border-left: 3px solid var(--color-warning);
  padding: 8px 8px 8px 12px;
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-sm);
  border-radius: 0 6px 6px 0;
}
.inb-cancelled-plan-label {
  font-weight: 600; color: var(--color-warning);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.inb-cancelled-plan-text {
  white-space: pre-wrap;
  color: var(--color-on-surface);
}

.inb-whatsapp-body {
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap;
  background: var(--color-surface, var(--bg));
  border-radius: var(--radius-default);
  padding: 10px 12px;
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--color-success);
  color: var(--color-on-surface);
}

.inb-step-rail {
  display: flex; flex-direction: column; gap: var(--space-tight);
  margin-bottom: var(--space-sm);
}
.inb-step {
  display: flex; align-items: center; gap: var(--space-base);
  padding: 6px 8px;
  background: var(--color-surface, var(--bg));
  border-radius: var(--radius-tight);
  font-size: 13px; color: var(--color-on-surface);
}
.inb-step-check {
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.inb-step-text { flex: 1; }
.inb-step-text.done {
  text-decoration: line-through;
  color: var(--color-on-surface-variant);
}
.inb-step-link, .inb-step-copy {
  background: none; border: none;
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  padding: var(--space-hairline);
  display: inline-flex; align-items: center;
  text-decoration: none;
  touch-action: manipulation;
}
.inb-step-link:focus-visible, .inb-step-copy:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.inb-step-context {
  font-size: 12px; color: var(--color-on-surface-variant);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  white-space: pre-wrap;
}

.inb-progress { margin-bottom: var(--space-sm); }
.inb-progress-track {
  flex: 1; height: 4px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inb-progress-fill {
  height: 100%; background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: width 0.3s;
  width: var(--inb-progress-pct, 0%);
}
.inb-progress-meta {
  font-size: 12px; color: var(--color-on-surface-variant);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Action row at the bottom of an expanded card ───────────────── */
.inb-actions {
  display: flex; gap: var(--space-tight); flex-wrap: wrap;
  padding-top: var(--space-snug);
  margin-top: var(--space-snug);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.inb-btn {
  padding: 7px 14px; border-radius: var(--radius-snug); border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform 0.1s;
  touch-action: manipulation;
}
.inb-btn:active { transform: scale(0.96); }
.inb-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.inb-btn.primary {
  background: var(--color-primary); color: var(--color-on-primary);
}
.inb-btn.approve {
  background: var(--color-success); color: var(--color-on-success);
}
.inb-btn.danger {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}
.inb-btn.subtle {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-surface);
}
.inb-btn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-on-surface-variant);
}

/* ── Push opt-in banner (info-tinted) ───────────────────────────── */
.inb-push-banner {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: 14px 16px; border-radius: var(--radius-roomy);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  margin: 0 12px 12px;
}
.inb-push-info { flex: 1; min-width: 0; font-size: 13px; color: var(--color-on-surface); }
.inb-push-actions { display: flex; gap: var(--space-tight); flex-shrink: 0; }

/* ── Advisory row (small muted card with inline actions) ─────────── */
.inb-advisory {
  display: flex; align-items: center; gap: var(--space-base);
  background: var(--color-surface-container, var(--bg2));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  margin-bottom: var(--space-tight);
}
.inb-advisory-text {
  flex: 1; font-size: 13px;
  color: var(--color-on-surface);
}
.inb-advisory-btn {
  padding: 4px 10px; border-radius: var(--radius-tight);
  border: 1px solid;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.inb-advisory-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.inb-advisory-btn.ack {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
  color: var(--color-success);
}
.inb-advisory-btn.snooze {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
  color: var(--color-warning);
}
.inb-advisory-btn.dismiss {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
  color: var(--color-error);
}

/* ── Skeleton ───────────────────────────────────────────────────── */
.inb-skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-container, var(--bg2)) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--color-surface-container, var(--bg2)) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-roomy);
  height: 64px;
  animation: inb-shimmer 1.4s ease-in-out infinite;
  border-left: 4px solid rgba(255, 255, 255, 0.04);
}
@keyframes inb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty / error state ────────────────────────────────────────── */
.inb-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px;
  gap: var(--space-roomy);
  text-align: center;
}
.inb-empty-icon {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}
.inb-empty.error .inb-empty-icon {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}
.inb-empty-title {
  font-size: 16px; font-weight: 700;
  color: var(--color-on-surface);
}
.inb-empty-text {
  font-size: 13px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
  max-width: 320px;
}

/* ── Utility classes added during inline-style extraction ─────────── */

/* WhatsApp brand accent */
.ip-whatsapp-color { color: #25d366; }

/* WhatsApp sub-text in origin row */
.ip-origin-sub { color: var(--color-on-surface-variant); font-size: 12px; }

/* WhatsApp message border accent */
.ip-detail-text-wa { border-left: 3px solid #25d366; padding-left: var(--space-snug); }

/* Task progress row */
.ip-task-progress-mt { margin: 6px 0 4px; }

/* Highlighted "current" subtask row */
.ip-subtask-active { background: rgba(74,108,247,0.08); border-radius: var(--radius-sm); padding: 2px 4px; margin: 0 -4px; }

/* Stakeholder chip wrapper */
.ip-stake-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px 8px; border-radius: var(--radius-snug); background: rgba(255,255,255,0.06); font-size: 11px; white-space: nowrap; }

/* Stakeholder role badge (color set dynamically via style) */
.ip-stake-role { width: 14px; height: 14px; border-radius: 3px; color: #fff; font-size: 9px; font-weight: 700; text-align: center; line-height: 14px; display: inline-block; }

/* Stakeholder chips row */
.ip-stake-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Context box bottom spacing */
.ip-context-box-mb { margin-bottom: var(--space-tight); }

/* Context/info note small text */
.ip-info-note { font-size: 12px; color: var(--color-on-surface-variant); line-height: 1.4; }

/* Header relative positioning */
.ip-td-header-rel { position: relative; }

/* Flex spacer in header row */
.ip-td-header-spacer { flex: 1; }

/* Subtask phase indent */
.ip-td-subtask-indent { padding-left: var(--space-snug); }

/* Dependency row: small text */
.ip-info-row-sm { font-size: 12px; }

/* Dependency row: blocked-by warning color */
.ip-info-row-warning { font-size: 12px; color: var(--color-warning); }

/* "Why" reason body text */
.ip-reason-text { font-size: 13px; color: var(--color-on-surface); line-height: 1.4; }

/* Task-confirm tip */
.ip-task-confirm-tip { font-size: 12px; color: var(--color-on-surface-variant); margin-top: var(--space-tight); line-height: 1.4; }

/* Chat preview row */
.ip-chat-preview-row { font-size: 12px; margin-bottom: var(--space-xs); }

/* Chat preview role label */
.ip-chat-preview-role { color: var(--color-primary-container); font-weight: 500; }

/* Chat preview body text */
.ip-chat-preview-text { color: var(--color-on-surface-variant); }

/* Email subject line */
.ip-email-subject { font-size: 12px; color: var(--color-on-surface); }

/* SVG ring transition */
.ip-ring-arc { transition: stroke-dashoffset 0.4s ease; }

/* Deliverable title — flex-fill */
.ip-deliverable-title { flex: 1; }

/* ============================================================
 * Send-as account picker (Phase B: review-feature proton-email
 * 2026-05-08 punch list #1)
 * ============================================================ */
.inb-send-as {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--space-snug, 8px) 0;
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--color-on-surface));
}
.inb-send-as-label {
  font-weight: 500;
}
.inb-send-as-select {
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  max-width: 200px;
}