/* emailclaw-responsive.css — the responsive / mobile layer for EmailClaw.
   EmailClaw is expected to be opened on a phone as often as a desktop, so this
   file is where every width-driven adaptation lives (the base emailclaw.css is
   desktop-first and sits at its 600-line cap). Linked LAST so its media-query
   rules override both emailclaw.css and emailclaw-brain.css at narrow widths.
   Breakpoints cascade largest → smallest; a phone in portrait (~360–430 CSS px)
   hits the 640 + 400 layers on top of 1100 + 720.

   The load-bearing mobile fixes — beyond simple reflow:
   • inputs are forced to 16px at ≤640px so iOS Safari doesn't auto-zoom the page
     on field focus (it zooms any input whose font is under 16px);
   • interactive controls get a ≥44px hit target (Apple HIG / WCAG 2.5.5);
   • free text (email bodies, chat bubbles, addresses) wraps hard so a long
     unbroken token can't force horizontal page scroll;
   • the fixed background switches to scroll on phones (iOS repaints a fixed
     backdrop every scroll frame — visible jank). */

/* The mobile-only hero headline (views-wizard.js) is hidden until the phone
   breakpoint swaps it in for the wordy desktop line. */
.ec-h1-sm{display:none;}

/* The header brain-gear is mobile-only — on desktop the trust-bar brain chip
   handles it. Shown at ≤640 (below), where the in-bar chip is hidden instead. */
.ec-hdr-brain{display:none;}

/* ---------- ≤1100px — tablet / narrow desktop ---------- */
@media (max-width:1100px){
  .ec-wrap{padding:24px 18px 40px;}
  .ec-hero h1{font-size:36px;}
  .ec-two{grid-template-columns:1fr;}
  .ec-inbox{grid-template-columns:0.9fr 1.2fr;gap:12px;}
}

/* ---------- ≤720px — large phone landscape / small tablet ---------- */
@media (max-width:720px){
  .ec-step1-main{grid-template-columns:1fr;gap:8px;}
  .ec-step1 .ec-hero{margin-top:8px;}
  .ec-start-card{margin-top:22px;}
  .ec-privacy-band{grid-template-columns:1fr;gap:14px;}
  .ec-privacy-bytes{align-items:flex-start;text-align:left;flex-direction:row;gap:8px;}
  .ec-charms{grid-template-columns:1fr;}
  .ec-stats{grid-template-columns:repeat(2,1fr);}
  .ec-inbox{grid-template-columns:1fr;}
  .ec-rail{flex-wrap:wrap;gap:10px;}
  .ec-connector{display:none;}
  .ec-rail-note{margin-left:0;width:100%;}
  .ec-trust{gap:12px;}
  .ec-trust-div{display:none;}
  .ec-trust-right{margin-left:0;width:100%;justify-content:flex-start;}
  .ec-list{max-height:320px;}
}

/* ---------- ≤640px — phone portrait (the primary mobile target) ---------- */
@media (max-width:640px){
  .ec-teaser{width:calc(100% + 24px);margin:-18px -12px 20px;padding:9px 12px;align-items:flex-start;}
  .ec-teaser-copy{font-size:12px;}
  .ec-teaser-link{display:none;}
  /* Kill iOS focus auto-zoom: any input under 16px triggers a zoom-and-pan on
     tap. Density-tuned desktop sizes (13.5–14px) are fine on a pointer. */
  .ec-input,.ec-select,.ec-to-input,.ec-acct,.ec-mbx select,.ec-chat-in input{font-size:16px;}

  /* Comfortable thumb targets. */
  .ec-btn,.ec-pill,.ec-folder,.ec-tab,.ec-brainchip,.ec-acct,.ec-mbx select{min-height:44px;}

  /* Stop the fixed backdrop repainting on every scroll frame on iOS. */
  body.ec-body{background-attachment:scroll;}

  /* Let the seal/clear wrap below the brand instead of overflowing the header. */
  .ec-header{flex-wrap:wrap;gap:10px;}

  /* Drop the wizard stepper on phones. The desktop rail stacks into three tall
     labeled rows, and a dots-only version reads as orphaned naked numbers with
     the webgpu note stranded across a big gap. The "STEP 1 · CONNECT YOUR EMAIL"
     section header already says where you are; the local-vs-key (webgpu) call
     lives on Step 2 where it matters. */
  .ec-rail{display:none;}

  /* Trust bar: stack its controls as full-width rows — cleaner than cramped
     wrapping when the mailbox label, brain chip, re-scan and Claw toggle all
     compete for one line. */
  /* Drop the "0 bytes to cloud / N MB on your machine" trust stats on the working
     mobile dashboard — they're a landing-page reassurance, not something you act
     on, so they just eat the top of the bar. */
  .ec-trust-metric{display:none;}

  /* Dashboard controls as a mobile-first "app toolbar" instead of four stacked
     full-width pills: the mailbox picker is the full-width context bar (row 1),
     then Re-scan + Claw mode share one action row (row 2, equal halves). The
     provider/brain chip moves out to the header gear (.ec-hdr-brain). */
  .ec-trust{padding:12px;}
  .ec-trust-right{flex-wrap:wrap;gap:8px;width:100%;}
  .ec-trust-right .ec-brainchip{display:none;}          /* → header gear on mobile */
  .ec-acct,.ec-mbx select{order:1;flex:1 1 100%;width:100%;max-width:100%;}
  .ec-pill{order:2;flex:1 1 0;justify-content:center;}
  .ec-airplane{order:2;flex:1 1 0;min-height:44px;justify-content:space-between;
    background:var(--glass-2);border:1px solid var(--line-2);border-radius:var(--r-chip);padding:0 15px;}

  /* Header brain gear — mobile-only compact button that opens the "Manage brain"
     modal (the in-bar chip is hidden above). */
  .ec-hdr-brain{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);
    background:var(--glass-2);color:var(--mint);cursor:pointer;flex:0 0 auto;}
  .ec-hdr-brain:disabled{opacity:.55;}

  /* Wizard footer: full-width, thumb-friendly, primary action on top. */
  .ec-actions{flex-direction:column-reverse;align-items:stretch;}
  .ec-actions .ec-btn{width:100%;}

  /* Compose actions: Send/Discard split the row, hint wraps full-width below. */
  .ec-cactions{flex-wrap:wrap;}
  .ec-cactions .ec-btn{flex:1;}
  .ec-chint{width:100%;margin-left:0;justify-content:flex-start;}

  /* Wrap free text hard so a long address / URL can't push the page sideways. */
  .ec-bub,.ec-quote .q-body,.ec-cbody,.ec-cfield .v,.ec-thread-snip{overflow-wrap:anywhere;}
  .ec-bub{max-width:90%;}
  .ec-route-compact{flex-wrap:wrap;}
  .ec-route-compact .ec-route-confidence{width:100%;margin-left:0;padding-left:0;}
  .ec-route-docket{padding:12px;}
  .ec-route-choice{flex-basis:100%;}
  .ec-route-choice select{min-height:44px;font-size:16px;}
  .ec-route-correction-actions{width:100%;}
  .ec-route-correction button{flex:1 1 100%;min-height:44px;}

  /* Tabs: let the live "watching · N new handled" status drop to its own line
     instead of cramming and wrapping mid-phrase next to the tab labels. */
  .ec-tabs{flex-wrap:wrap;}
  .ec-live{order:9;width:100%;margin-left:0;justify-content:flex-start;padding:8px 4px 2px;}

  /* Reclaim width in the padded surfaces. */
  .ec-run{padding:18px;}
  .ec-modal{padding:16px;}
  .ec-modal-foot .ec-btn{flex:1;}

  /* Mobile content diet — lead with the action, shed desktop marketing weight.
     On a phone the wizard is connect-first: the long hero paragraph just restates
     the headline, and the "why different" comparison (Step 1) + explainer cards
     (Step 2) are a secondary pitch below the real action. Dropped rather than
     squished so Connect / Choose-the-brain sits near the top. All still render on
     desktop — this only trims the ≤640 view. */
  .ec-hero p{display:none;}          /* long paragraph — redundant with the headline */
  .ec-hero{margin:2px 0 14px;}
  .ec-hero h1{font-size:25px;line-height:1.25;max-width:none;} /* full width, not the 20ch desktop column that hugged the left */
  .ec-h1-full{display:none;}         /* swap the wordy desktop headline… */
  .ec-h1-sm{display:inline;}         /* …for the punchy mobile one */
  .ec-why{display:none;}             /* legacy differentiator panel — desktop only */
  .ec-info-card{display:none;}       /* Step 2 explainer cards — desktop only (GPU status is in the rail note) */
  .ec-charms{display:none;}          /* legacy tertiary trust badges */
  .ec-proof-list{gap:8px;margin-top:14px;}
  .ec-start-card{padding:24px 14px 14px;}
  .ec-privacy-band{padding:14px;}

  /* Step 2 brain tiles — declutter the crowded header row. The tile's selected
     state already reads from its border/glow + badge, so the radio dot is
     redundant and it's what squeezes the titles into an ugly 2-line wrap. Give
     the title the freed room and drop the wordy trust lead (the subtitle already
     says "only the reasoning leaves"). */
  .ec-brain-hd{gap:11px;padding:14px;}
  .ec-brain-ic{width:36px;height:36px;}
  .ec-brain-tt{flex:1;min-width:0;}
  .ec-brain-hd .ec-radiomark{display:none;}
  .ec-brain-body{padding:4px 14px 14px;}
  .ec-brain-body>p{display:none;}
}

/* ---------- ≤400px — small phones ---------- */
@media (max-width:400px){
  .ec-wrap{padding:18px 12px 40px;}
  .ec-hero h1{font-size:22px;}
  .ec-stats{grid-template-columns:1fr;}
  .ec-run-hd h2{font-size:20px;}
  .ec-brand-sub{display:none;}
  .ec-seal{font-size:10px;padding:6px 10px;}
}