/* ══════════════════════════════════════════════════════════════════════════════════════════
   emails.css — the Emails tab (13 Oct 2026, migration 181). Ava's Version A of the mock-up:
   "version a is perfect thanks. build for real now." — the Messages page shape (a rail of
   emails on the left, the open email with its drafted reply on the right) and an edge tab
   with a number, sitting under the Messages tab.
   ══════════════════════════════════════════════════════════════════════════════════════════
   Its own file for the reason chat.css gives: index.html is shared by several sessions, so it
   gains three one-line inserts and nothing else.
   Colours come from the same tokens Messages uses (chat.css declares --ch-*; the value after
   each var() is the same colour written out, so this file reads right on its own too).
   Light is the only theme (index.html forces data-theme="light"), so there is no dark block.  */

:root{
  --em-paper:var(--ch-paper,#fbfaf8);
  --em-card:var(--ch-card,#FFFFFF);
  --em-card2:var(--ch-card2,#fbfaf8);
  --em-ink:var(--ch-ink,#131b2d);
  --em-ink2:var(--ch-ink2,#5a6475);
  --em-ink3:var(--ch-ink3,#5a6475);
  --em-line:var(--ch-line,#dfe2e8);
  --em-line2:var(--ch-line2,#f7ecea);
  --em-accent:var(--ch-accent,#a85e59);
  --em-rose:var(--ch-rose,#a85e59);
  --em-accent-soft:var(--ch-accent-soft,#f7ecea);
  --em-dark:var(--ch-dark,#131b2d);
  --em-grey3:var(--ch-grey3,#f7ecea);
  --em-green:var(--ch-green,#243b5e);
  --em-green-soft:#e9edf4;
  --em-amber:#8e3f3a;
  --em-amber-soft:#f7ecea;
  --em-sans:var(--ch-sans,Jost,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  --em-serif:var(--ch-serif,EB Garamond,'Iowan Old Style',Georgia,serif);
}

/* ── the edge tab, as #ch-handle; emails.js puts it just under the Messages tab ─────────────── */
#em-handle{
  position:fixed; right:0; top:calc(50% + 70px); z-index:59;
  background:var(--em-dark); color:#fff; border:0; cursor:pointer;
  border-radius:9px 0 0 9px; padding:13px 7px; display:flex; flex-direction:column;
  align-items:center; gap:8px; box-shadow:-6px 0 18px -8px rgba(19,27,45,.4);
  font-family:var(--em-sans);
}
#em-handle:hover{background:#2c384c;}
#em-handle:focus-visible{outline:2px solid var(--em-accent); outline-offset:2px;}
#em-handle .lbl{writing-mode:vertical-rl; text-orientation:mixed; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
#em-handle .n{background:var(--em-accent); color:#fff; border-radius:9px; padding:1px 5px; font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;}
#em-handle[hidden]{display:none!important;}
body.ch-docked #em-handle,
body.em-onemails #em-handle{display:none!important;}

/* ── the page ─────────────────────────────────────────────────────────────────────────────── */
#view-emails{padding:0!important;}
.em-page{
  display:grid; grid-template-columns:270px minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  border:1px solid var(--em-line); border-radius:12px; overflow:hidden;
  background:var(--em-paper); height:calc(100vh - 190px); min-height:420px; font-family:var(--em-sans);
}
.em-rail{background:var(--em-card2); border-right:1px solid var(--em-line); display:flex; flex-direction:column; min-width:0; min-height:0;}
.em-rail-hd{padding:12px 13px 10px; border-bottom:1px solid var(--em-line); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.em-rail-hd h3{margin:0; font-family:var(--em-serif); font-size:15px; font-weight:600; color:var(--em-ink); flex:1;}
.em-rail-hd .box{font-size:11px; color:var(--em-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.em-search{
  margin:9px 11px 4px; display:block; width:calc(100% - 22px); box-sizing:border-box;
  border:1px solid var(--em-line); border-radius:20px; padding:6px 12px;
  font:400 12px/1.5 var(--em-sans); background:var(--em-card); color:var(--em-ink);
}
.em-search::placeholder{color:var(--em-ink3);}
.em-rail-scroll{overflow-y:auto; padding:4px 0 12px; flex:1; min-height:0;}
.em-grp{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--em-ink3); font-weight:700; padding:13px 13px 5px; display:flex; gap:7px; align-items:center;}
.em-grp i{font-style:normal; margin-left:auto; font-variant-numeric:tabular-nums;}
.em-grp.em-grp-out{color:var(--em-accent);}  /* To send (migration 213): the one list that waits on you */
.em-grp button{border:0; background:none; cursor:pointer; color:var(--em-ink3); font:700 9.5px/1 var(--em-sans); letter-spacing:.13em; text-transform:uppercase; padding:0;}
.em-cv{
  display:flex; align-items:flex-start; gap:10px; padding:8px 13px; cursor:pointer;
  border:0; border-left:2px solid transparent; background:none; width:100%; text-align:left; font-family:inherit;
}
.em-cv:hover{background:var(--em-card);}
.em-cv.on{background:var(--em-card); border-left-color:var(--em-rose);}
.em-cv:focus-visible{outline:2px solid var(--em-accent); outline-offset:-2px;}
.em-av{
  border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-weight:700;
  background:var(--em-grey3); color:var(--em-ink2); text-transform:uppercase; font-family:var(--em-sans);
}
.em-av.t1{background:var(--em-accent-soft); color:var(--em-accent);}
.em-av.t2{background:#E8EAEF; color:#4A5568;}
.em-av.t3{background:#e9edf4; color:#243b5e;}
.em-av.team{background:var(--em-dark); color:#fff;}
.em-cv .em-av{width:26px; height:26px; font-size:10px; margin-top:1px;}
.em-cv .who{min-width:0; flex:1; display:flex; flex-direction:column;}
.em-cv .who b{font-size:12.5px; font-weight:500; color:var(--em-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.em-cv.unread .who b,.em-cv.on .who b{color:var(--em-ink); font-weight:600;}
.em-cv .who span{font-size:11px; color:var(--em-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.em-cv .who span.mand{font-size:10.5px; color:var(--em-accent); font-weight:600; letter-spacing:.02em;}
.em-cv .who span.mand.ask{color:var(--em-amber);}
.em-which{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--em-ink2);}
.em-which select{min-height:32px; border:1px solid var(--em-line); background:var(--em-card); color:var(--em-ink2); font:inherit; padding:0 6px;}
.em-cv time{font-size:10.5px; color:var(--em-ink3); font-variant-numeric:tabular-nums; flex:0 0 auto;}
.em-cv .dot{width:7px; height:7px; border-radius:50%; background:var(--em-accent); flex:0 0 7px; margin-top:7px;}
.em-cv.done .who b{text-decoration:line-through; text-decoration-color:var(--em-ink3);}
.em-news{margin:10px 11px 0; border:1px dashed var(--em-line); border-radius:9px; padding:9px 11px; font-size:11.5px; color:var(--em-ink2); background:var(--em-card); line-height:1.5;}
.em-news b{color:var(--em-ink);}
.em-news button.lnk{border:0; background:none; color:var(--em-accent); font-weight:600; cursor:pointer; padding:0; font-size:11.5px; font-family:inherit;}
.em-newslist{margin:7px 0 0; padding:0; list-style:none; font-size:11px; color:var(--em-ink3); display:flex; flex-direction:column; gap:5px;}
.em-newslist li{display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.em-newslist li span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.em-newslist li button{flex:0 0 auto; border:0; background:none; color:var(--em-accent); cursor:pointer; font:600 10.5px/1.4 var(--em-sans); padding:0;}
.em-empty-rail{padding:16px 14px; font-size:12px; color:var(--em-ink3); line-height:1.55;}

.em-room{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--em-paper);}
.em-room-scroll{overflow-y:auto; flex:1; min-height:0; padding:16px 18px 24px;}
.em-back{display:none; border:0; background:none; cursor:pointer; color:var(--em-ink2); font:600 12px/1.5 var(--em-sans); padding:0 0 10px;}

/* ── one email ─────────────────────────────────────────────────────────────────────────────── */
.em-mail{display:flex; flex-direction:column; gap:14px; max-width:820px;}
.em-mhd{display:flex; gap:12px; align-items:flex-start;}
.em-mhd .em-av{width:38px; height:38px; font-size:12px;}
.em-mhd .t{min-width:0; flex:1;}
.em-mhd h3{margin:0; font-family:var(--em-serif); font-size:17px; font-weight:600; line-height:1.3; color:var(--em-ink); overflow-wrap:anywhere;}
.em-from{font-size:12.5px; color:var(--em-ink2); margin-top:3px; display:flex; gap:7px; flex-wrap:wrap; align-items:center;}
.em-from button.lnk{border:0; background:none; padding:0; color:var(--em-accent); font:600 12.5px/1.4 var(--em-sans); cursor:pointer;}
.em-mhd time{font-size:11px; color:var(--em-ink3); white-space:nowrap;}
.em-chip{border:1px solid var(--em-line); border-radius:20px; padding:1px 9px; font-size:11px; color:var(--em-ink2); background:var(--em-card); white-space:nowrap;}
.em-chip.mand{border-color:var(--em-accent); color:var(--em-accent); background:var(--em-accent-soft); font-weight:600;}
.em-chip.new{border-color:var(--em-amber); color:var(--em-amber); background:var(--em-amber-soft); font-weight:600;}
.em-chip.team{background:var(--em-grey3); border-color:var(--em-grey3);}
.em-sum{background:var(--em-card); border:1px solid var(--em-line); border-radius:10px; padding:12px 14px;}
.em-lab{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--em-ink3); font-weight:700; margin-bottom:6px; display:flex; gap:8px; align-items:center;}
.em-sum p{margin:0; font-size:13.5px; line-height:1.55; color:var(--em-ink);}
.em-sum .why{margin-top:6px; font-size:11.5px; color:var(--em-ink3);}
.em-orig{border-left:2px solid var(--em-line); padding:2px 0 2px 12px;}
.em-orig button{border:0; background:none; color:var(--em-ink3); cursor:pointer; padding:0; font:600 12px/1.5 var(--em-sans);}
.em-orig pre{white-space:pre-wrap; font:400 13px/1.55 var(--em-sans); color:var(--em-ink2); margin:8px 0 0; overflow-wrap:anywhere;}
.em-orig .att{margin-top:8px; font-size:11.5px; color:var(--em-ink3);}
.em-draft{background:var(--em-card); border:1px solid var(--em-line); border-radius:10px; overflow:visible;}
.em-draft:focus-within{border-color:var(--em-accent);}
.em-draft .dh{display:flex; align-items:center; gap:8px; padding:10px 14px 0; flex-wrap:wrap;}
.em-draft .to{font-size:12px; color:var(--em-ink3);}
.em-draft .to b{color:var(--em-ink2); font-weight:600;}
.em-draft .ccrow{display:flex; align-items:center; gap:8px; padding:6px 14px 0; font-size:12px; color:var(--em-ink3);}
.em-draft .ccrow input{flex:1; min-width:0; border:1px solid var(--em-line); border-radius:7px; padding:4px 8px; font:400 12px/1.5 var(--em-sans); color:var(--em-ink); background:var(--em-card);}
.em-draft .subj{padding:6px 14px 0; font-size:12.5px; color:var(--em-ink2);}
.em-draft textarea{
  width:100%; box-sizing:border-box; border:0; outline:0; resize:vertical; padding:10px 14px;
  font:400 13.5px/1.6 var(--em-sans); color:var(--em-ink); background:none; min-height:200px; display:block;
}
.em-files{display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 12px; align-items:center;}
.em-file{display:flex; align-items:center; gap:9px; border:1px solid var(--em-line); border-radius:9px; padding:7px 10px; background:var(--em-card2); max-width:100%; min-width:0;}
.em-file .fi{width:24px; height:29px; border-radius:3px; background:var(--em-accent-soft); color:var(--em-accent); display:grid; place-items:center; font:700 8px/1 var(--em-sans); flex:0 0 24px;}
.em-file .fn{min-width:0;}
.em-file .fn b{display:block; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; color:var(--em-ink);}
.em-file .fn span{font-size:10.5px; color:var(--em-ink3);}
.em-file .x{border:0; background:none; color:var(--em-ink3); cursor:pointer; font-size:15px; padding:0 2px; line-height:1;}
.em-addf{border:1px dashed var(--em-line); background:none; border-radius:9px; padding:8px 11px; font:500 11.5px/1.4 var(--em-sans); color:var(--em-ink2); cursor:pointer;}
.em-picker{margin:0 14px 12px; border:1px solid var(--em-line); border-radius:9px; background:var(--em-card); padding:6px; max-height:260px; overflow-y:auto;}
.em-picker input{width:100%; box-sizing:border-box; border:1px solid var(--em-line); border-radius:7px; padding:6px 9px; font:400 12px/1.4 var(--em-sans); margin-bottom:4px;}
.em-picker button{display:flex; width:100%; justify-content:space-between; gap:10px; border:0; background:none; padding:7px 9px; border-radius:7px; font:400 12px/1.4 var(--em-sans); color:var(--em-ink2); cursor:pointer; text-align:left;}
.em-picker button:hover{background:var(--em-accent-soft); color:var(--em-accent);}
.em-picker button span{color:var(--em-ink3); font-size:11px; white-space:nowrap;}
.em-picker .none{padding:6px 9px; font-size:12px; color:var(--em-ink3);}
.em-check{margin:0 14px 12px; border-radius:8px; padding:9px 11px; font-size:12.5px; line-height:1.5; display:flex; gap:9px;}
.em-check.warn{background:var(--em-amber-soft); color:#8e3f3a;}
.em-check.ok{background:var(--em-green-soft); color:#243b5e;}
.em-check b{font-weight:700;}
.em-acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:11px 14px; border-top:1px solid var(--em-line2); background:var(--em-card2); border-radius:0 0 10px 10px;}
.em-acts .sp{flex:1;}
.em-btn{border:0; border-radius:20px; padding:7px 15px; font:600 12px/1.5 var(--em-sans); background:var(--em-dark); color:#fff; cursor:pointer;}
.em-btn.rose{background:var(--em-accent);}
.em-btn.ghost{background:var(--em-card); color:var(--em-ink2); border:1px solid var(--em-line);}
.em-btn.small{padding:4px 11px; font-size:11px;}
.em-btn[disabled]{opacity:.45; cursor:default;}
.em-btn:focus-visible{outline:2px solid var(--em-accent); outline-offset:2px;}
.em-redo{position:relative;}
.em-menu{position:absolute; bottom:calc(100% + 6px); left:0; background:var(--em-card); border:1px solid var(--em-line); border-radius:10px; padding:5px; min-width:240px; z-index:20; box-shadow:0 18px 44px -20px rgba(19,27,45,.42);}
.em-menu button{display:block; width:100%; text-align:left; border:0; background:none; padding:7px 9px; border-radius:7px; font:400 12.5px/1.4 var(--em-sans); color:var(--em-ink2); cursor:pointer;}
.em-menu button:hover{background:var(--em-accent-soft); color:var(--em-accent);}
.em-menu input{width:100%; box-sizing:border-box; border:1px solid var(--em-line); border-radius:7px; padding:6px 8px; font:400 12px/1.4 var(--em-sans); margin-top:4px;}
.em-state{display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.5;}
.em-state.sent{background:var(--em-green-soft); color:#243b5e;}
.em-state.info{background:var(--em-card); border:1px solid var(--em-line); color:var(--em-ink2); flex-wrap:wrap; align-items:center;}
.em-state.fail{background:var(--em-amber-soft); color:#8e3f3a; flex-wrap:wrap; align-items:center;}
.em-state b{font-weight:700;}
.em-writing{display:flex; gap:10px; align-items:center; background:var(--em-card); border:1px dashed var(--em-line); border-radius:10px; padding:14px; font-size:13px; color:var(--em-ink3);}
.em-writing i{width:8px; height:8px; border-radius:50%; background:var(--em-accent); animation:em-pulse 1.2s ease-in-out infinite;}
@keyframes em-pulse{0%,100%{opacity:.25}50%{opacity:1}}
.em-empty{padding:40px 22px; text-align:center; color:var(--em-ink3); font-family:var(--em-serif); font-size:15px;}
.em-empty b{display:block; color:var(--em-ink); font-size:17px; margin-bottom:6px; font-weight:600;}
.em-set{margin-top:8px; display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--em-ink2);}
.em-set label{display:flex; gap:8px; align-items:flex-start; cursor:pointer; line-height:1.45;}
.em-set input{accent-color:var(--em-accent); margin:2px 0 0;}

/* ── To send: Change who it goes to and the suggestion line (Ava 22 Oct 2026, migration 220; her pick A + B's line on the
   mock-up claude.ai/artifact/8AM1eyx6x3VZk4J3AzcLqY) ─────────────────────────────────────────────────────────────────── */
.em-cv .who span.hint{font-size:10.5px; color:var(--em-ink3); display:flex; gap:6px; align-items:center; white-space:normal;}
.em-cv .who span.hint::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--em-rose); flex:0 0 5px;}
.em-sugl{display:flex; gap:11px; align-items:flex-start; flex-wrap:wrap; background:var(--em-card); border:1px solid var(--em-line); box-shadow:inset 0 2px 0 var(--em-rose); padding:11px 14px;}
.em-sugl .em-av{width:30px; height:30px; font-size:10.5px; margin-top:1px;}
.em-sugl p{margin:0; flex:1; min-width:220px; font-size:13px; line-height:1.55; color:var(--em-ink);}
.em-sugl p b{font-weight:600;}
.em-sugl .acts{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-left:41px; flex-basis:100%;}
.em-sugl .acts .lnk,.em-chg .lnk,.em-pp .lnk,.em-draft .dh .em-who{border:0; background:none; padding:0; color:var(--em-accent); font:600 12px/1.4 var(--em-sans); cursor:pointer;}
.em-chg{margin:10px 14px 0; background:var(--em-accent-soft); padding:9px 12px; font-size:12.5px; line-height:1.5; color:var(--em-ink); display:flex; gap:6px 12px; flex-wrap:wrap; align-items:baseline;}
.em-chg b{font-weight:600;}
.em-pp{margin:10px 14px 4px; border:1px solid var(--em-line); background:var(--em-card);}
.em-pp-hd{display:flex; gap:10px; align-items:baseline; padding:10px 13px 7px;}
.em-pp-hd b{flex:1; min-width:0; font:600 15px/1.25 var(--em-serif); color:var(--em-ink);}
.em-pp-grp{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--em-ink3); font-weight:700; padding:9px 13px 4px; border-top:1px solid var(--em-line2);}
.em-pp-row{display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--em-line2); padding:9px 13px; cursor:pointer; font-family:var(--em-sans);}
.em-pp-grp + .em-pp-row{border-top:0;}
.em-pp-row[disabled]{cursor:default;}
.em-pp-row[disabled]:not(:has(.tag:not(.q))){opacity:.55;}
.em-pp-row .em-av{width:28px; height:28px; font-size:10px; margin-top:1px;}
.em-pp-row .tx{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px;}
.em-pp-row .tx b{font-size:13px; font-weight:600; color:var(--em-ink);}
.em-pp-row .tx span{font-size:12px; color:var(--em-ink2); line-height:1.4;}
.em-pp-row .tx small{font-size:11.5px; color:var(--em-ink3); line-height:1.4;}
.em-pp-row .tag{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--em-accent); font-weight:700; white-space:nowrap; margin-top:3px;}
.em-pp-row .tag.q{color:var(--em-ink3); letter-spacing:.02em; text-transform:none; font-weight:500; font-size:11px;}
.em-pp-more{display:block; width:100%; border:0; border-top:1px solid var(--em-line2); background:none; padding:9px 13px; text-align:left; color:var(--em-accent); font:600 12px/1.4 var(--em-sans); cursor:pointer;}
.em-pp-none{padding:2px 13px 12px; font-size:12.5px; color:var(--em-ink3);}
@media (hover:hover){ .em-pp-row:not([disabled]):hover{background:var(--em-accent-soft);} }
@media (max-width:640px){ .em-pp{margin-left:10px; margin-right:10px;} .em-sugl .acts{margin-left:0;} }

/* ── laptop narrower than the rail plus a readable email ─────────────────────────────────── */
@media (max-width:1100px){ .em-page{grid-template-columns:230px minmax(0,1fr);} }
/* ── the phone: the list is the first screen, an email replaces it (as Messages does) ─────── */
@media (max-width:820px){
  .em-page{grid-template-columns:minmax(0,1fr); height:calc(100dvh - 132px);}
  .em-page .em-room{display:none;}
  .em-page.roomopen .em-rail{display:none;}
  .em-page.roomopen .em-room{display:flex;}
  .em-back{display:inline-flex;}
}
@media (max-width:640px){
  #view-emails .page-head{margin-bottom:8px;}
  #view-emails .page-head .eyebrow-row{display:none;}
  #view-emails .page-head .headline{font-size:23px; line-height:1.1;}
  #view-emails{padding-left:0; padding-right:0;}
  #view-emails #em-mount{margin-left:-24px; margin-right:-24px;}
  .em-page{border-radius:0; border-left:0; border-right:0;}
  .em-room-scroll{padding:14px 14px 22px;}
  .em-draft textarea,.em-draft .ccrow input{font-size:16px;}   /* iOS stops zooming the page on focus at 16px */
  .em-file .fn b{max-width:180px;}
}
@media (hover:hover){ .em-cv:hover{background:var(--em-card);} }
@media (prefers-reduced-motion:reduce){ .em-writing i{animation:none;} }