/* emailclaw-brain.css — chrome for the dashboard "Manage brain" modal and the
   brain-chip button that opens it. The picker tiles inside (.ec-brain, .ec-model,
   .ec-field, …) reuse the shared rules in emailclaw.css; this file only adds the
   overlay, the modal card, and the chip's button affordances. Split out because
   emailclaw.css sits at the 600-line cap. Tokens mirror that file's :root. */

/* brain chip → button (was a static div). Reset native button styling, keep the
   glass-pill look, add a hover lift + a trailing chevron that nudges on hover. */
.ec-brainchip{appearance:none;font-family:var(--sans);text-align:left;
  transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);}
.ec-brainchip:hover:not(:disabled){background:var(--glass-3);border-color:var(--line-2);}
.ec-brainchip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sel-bg),0 0 0 1px var(--sel-bd);}
.ec-brainchip:disabled{opacity:.55;cursor:default;}
.ec-brainchip-go{color:var(--faint);width:13px;height:13px;margin-left:2px;
  transition:transform var(--dur-1),color var(--dur-1);}
.ec-brainchip:hover:not(:disabled) .ec-brainchip-go{color:var(--cyan);transform:translateX(2px);}

/* overlay scrim */
.ec-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;
  justify-content:center;padding:48px 20px;overflow-y:auto;
  background:rgba(6,14,18,0.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:ec-modal-in var(--dur-2) var(--ease);}
@keyframes ec-modal-in{from{opacity:0;}to{opacity:1;}}

/* modal card */
.ec-modal-card{width:100%;max-width:680px;border-radius:var(--r-4);
  background:linear-gradient(165deg,#0f1e25,#0b151a);
  border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  padding:22px 22px 18px;animation:ec-modal-pop var(--dur-2) var(--ease);}
@keyframes ec-modal-pop{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}

.ec-modal-hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.ec-modal-tt{display:flex;flex-direction:column;gap:3px;}
.ec-modal-tt b{font-size:16px;font-weight:680;color:var(--ink);}
.ec-modal-tt span{font-size:12.5px;color:var(--dim);line-height:1.45;}
.ec-modal-x{margin-left:auto;flex:none;appearance:none;cursor:pointer;
  width:32px;height:32px;border-radius:var(--r-1);border:1px solid var(--line);
  background:var(--glass-1);color:var(--dim);display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1),color var(--dur-1);}
.ec-modal-x:hover{background:var(--glass-3);color:var(--ink);}
.ec-modal-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sel-bg);}

.ec-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;}
.ec-modal-foot .ec-btn{padding:11px 20px;}

/* draft-in-modal — the compose/sent card opened over the inbox. The .ec-compose
   card is already a self-contained card (own bg/border/shadow in emailclaw.css),
   so it drops straight into the ec-modal scrim: just cap its width and pin the ✕
   to the card's top-right (absolute, so the header flex + HELD badge are untouched;
   the header gets right-padding so its text never runs under the ✕). */
.ec-draft-modal .ec-compose{position:relative;width:100%;max-width:640px;margin:0 auto;}
.ec-draft-modal .ec-compose-hd{padding-right:52px;}
.ec-draft-x{position:absolute;top:11px;right:12px;z-index:1;}

/* PAGE-WIDE FIX (not modal-specific; lives here only because emailclaw.css is at
   its 600-line cap). The native <option> popup is OS-drawn: it inherits the
   select's near-transparent --glass-0 background + near-white --ink text, so on
   Windows/Chrome the dropdown items render white-on-white and look broken. Give
   the options an opaque dark background so they're legible in both the wizard's
   Step-2 provider picker and the dashboard "Manage brain" modal. */
.ec-select option{background-color:#0f1e25;color:var(--ink);}

/* Sent folder pill (pressed) — muted, matching the neutral "sent" thread-tag look
   (emailclaw.css [data-t="sent"]). The base .ec-folder rule styles the unpressed
   state; this only adds the selected colors, which the needs/drafts/filed pills
   also define inline in emailclaw.css. Lives here for the same 600-line-cap reason. */
.ec-folder[data-f="sent"][aria-pressed="true"]{background:var(--glass-2);border-color:var(--line-2);color:var(--ink);}
.ec-folder[data-f="sent"][aria-pressed="true"] .ct{background:var(--glass-3);color:var(--ink);}