/* BBEmailBuild — the email builder (canvas-first). Tokens only: --bb-*, --bb-mono.
   References: CollectUI 85bccf09 (generation reveal), a41b5313 (selection menu),
   33621822 (block controls), c20aa8d1 (docked composer bar). */

.eb2 { position: relative; display: flex; flex-direction: column; gap: 12px; }
.eb2-sp { flex: 1; }
.eb2-ic {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  font-size: 16px; line-height: 1; color: var(--bb-ink-2); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.eb2-ic:hover:not([disabled]) { background: var(--bb-hover); color: var(--bb-ink); }
.eb2-ic[disabled] { opacity: .32; cursor: default; }

/* ---- top bar: the division decides the brand ------------------------------ */
.eb2-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-hairline);
}
.eb2-divs { display: inline-flex; padding: 3px; gap: 2px; background: var(--bb-inset); border-radius: 10px; }
.eb2-div {
  padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.eb2-div:hover { color: var(--bb-ink); }
.eb2-div.on { background: var(--bb-surface); color: var(--bb-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--bb-line); }
.eb2-name {
  width: 220px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--bb-ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.eb2-name:hover { border-color: var(--bb-line); }
.eb2-name:focus { outline: none; border-color: var(--bb-accent); background: var(--bb-surface); }
.eb2-utm { cursor: pointer; }
.eb2-utm.on { border-color: color-mix(in srgb, var(--bb-green) 45%, var(--bb-line)); background: var(--bb-green-tint); color: var(--bb-ink); }
/* besc.css paints `.besc-chip.on .num` WHITE (it is meant for the dark "on" chips) —
   on this light green chip that made the campaign slug white-on-green and unreadable. */
.eb2-utm.on .num { color: color-mix(in srgb, var(--bb-green) 55%, var(--bb-ink)); opacity: 1; font-weight: 600; }

/* ---- main: stage (inbox + canvas + AI dock) | inspector -------------------- */
.eb2-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.eb2-stage { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* The inbox row — subject + preheader typed where a reader meets them. */
.eb2-inbox { padding: 12px 14px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); }
.eb2-inbox-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.eb2-cnt { font-size: 11.5px; color: var(--bb-ink-3); }
.eb2-cnt.warn { color: var(--bb-orange); font-weight: 600; }
.eb2-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bb-inset); }
.eb2-av {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #00263A; color: #E2B13C; font-weight: 700; font-size: 15px;
}
.eb2-row-b { min-width: 0; flex: 1; }
.eb2-row-top { display: flex; align-items: baseline; gap: 8px; }
.eb2-from { font-size: 13.5px; }
.eb2-time { margin-left: auto; font-size: 11.5px; color: var(--bb-ink-3); }
.eb2-row-l { min-width: 0; }
.eb2-subj, .eb2-pre { outline: none; border-radius: 4px; }
.eb2-subj:empty::before, .eb2-pre:empty::before { content: attr(data-ph); color: var(--bb-ink-3); }
.eb2-subj:focus, .eb2-pre:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-accent) 55%, transparent); }
/* Gmail: subject — preheader, one line, cut. */
.eb2-row[data-cliente="gmail"] .eb2-row-l { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.eb2-row[data-cliente="gmail"] .eb2-subj { font-weight: 700; font-size: 13.5px; flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.eb2-row[data-cliente="gmail"] .eb2-pre { font-size: 13.5px; color: var(--bb-ink-3); overflow: hidden; text-overflow: ellipsis; }
.eb2-row[data-cliente="gmail"] .eb2-pre::before { content: '— '; }
.eb2-row[data-cliente="gmail"] .eb2-pre:empty::before { content: '— ' attr(data-ph); }
/* iPhone Mail: 375-wide row, subject 1 line, preview 2 lines. */
.eb2-row[data-cliente="iphone"] { max-width: 375px; }
.eb2-row[data-cliente="iphone"] .eb2-subj { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb2-row[data-cliente="iphone"] .eb2-pre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--bb-ink-3); line-height: 1.35; }
.eb2-subj:focus, .eb2-pre:focus { white-space: normal !important; display: block !important; -webkit-line-clamp: unset !important; max-width: none !important; }

/* The canvas: the real email on a soft stage, centred at its real width. */
.eb2-canvas {
  position: relative; padding: 46px 20px 110px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--bb-ink) 9%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bb-inset);
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
}
.eb2-dev { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; }
/* The paper is exactly the email's width (set in JS), so the reveal and the comet hug
   the email, not the whole grey stage. */
.eb2-paper { position: relative; margin: 0 auto; border-radius: 6px; }
.eb2-frame {
  position: absolute; left: 50%; top: 0; z-index: 1; border: 0; background: #fff; border-radius: 6px;
  transform-origin: top center; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 40px -18px rgba(13,42,94,.32);
}
.eb2-ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.eb2-box { position: absolute; border-radius: 4px; pointer-events: none; }
.eb2-box.hov { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bb-accent) 45%, transparent); }
.eb2-box.sel { box-shadow: 0 0 0 2px var(--bb-accent); }
.eb2-tools {
  position: absolute; transform: translateX(-100%); pointer-events: auto; display: flex; align-items: center; gap: 1px;
  padding: 3px; background: var(--bb-ink); border-radius: 9px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4);
  animation: eb2In .14s var(--bb-ease-strong, ease) both;
}
.eb2-tools-l { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 0 8px 0 6px; font-size: 11.5px; font-weight: 600; color: #fff; opacity: .8; }
.eb2-tools button {
  width: 26px; height: 26px; padding: 0; font-size: 13px; color: #fff; background: transparent;
  border: 0; border-radius: 6px; cursor: pointer;
}
.eb2-tools button:hover:not([disabled]) { background: rgba(255,255,255,.14); }
.eb2-tools button[disabled] { opacity: .3; cursor: default; }
/* Centred by GRID, not by line-height: the base button rule makes it display:flex with
   no justify-content, which left the "+" hugging the left side (his screenshot). The
   plus is two SVG strokes, so it sits on the circle's true centre — a text "+" rides the
   font's baseline and is never optically centred. */
.eb2-plus {
  position: absolute; pointer-events: auto; display: grid !important; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 0; line-height: 0;
  color: #fff; background: var(--bb-accent); border: 2px solid var(--bb-surface); border-radius: 50%; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); transition: transform .12s;
}
.eb2-plus:hover { transform: scale(1.1); }
@keyframes eb2In { from { opacity: 0; transform: translateX(-100%) translateY(3px); } to { opacity: 1; transform: translateX(-100%); } }

/* ---- the selection menu (a41b5313) --------------------------------------- */
.eb2-selmenu {
  position: absolute; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  padding: 4px; background: var(--bb-ink); border-radius: 11px; box-shadow: 0 10px 28px -8px rgba(0,0,0,.45);
  animation: eb2Pop .14s var(--bb-ease-strong, ease) both;
}
.eb2-selmenu[hidden] { display: none; }
.eb2-sm-k { display: inline-grid; place-items: center; width: 26px; color: #E2B13C; }
.eb2-selmenu button {
  padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.eb2-selmenu button:hover { background: rgba(255,255,255,.14); }
@keyframes eb2Pop { from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } }

/* ---- THE AI DOCK — a tool over the canvas, not a panel -------------------- */
.eb2-dock {
  position: sticky; bottom: 16px; z-index: 20; align-self: center; width: min(640px, 100%);
  margin-top: -96px; display: flex; flex-direction: column; gap: 8px;
}

/* THE BAR — ONE card, a token strip, ONE control row.
   Reference: BeautifulUI's "Prompt Bar" (the component Miguel handed over, 29 sep 2026):
   the composer is a single card whose menus grow UP from its top edge as name+description
   rows, and whose whole control set fits one line — `[+ · pedido · picker · enviar]`.
   And CollectUI 162524b4 (@nilseller), «prompt inputs don't have to be plain text fields»:
   what the ask is ABOUT is a token INSIDE the card, not a second row of labelled buttons.
   That second row is what this replaces: `enlace` and `línea de baja` were chips sitting
   between a segmented control and a status pill — three idioms in one strip, and a bare
   `enlace` reads as a tag rather than as the instruction «add the program's link». They
   are rows in the + menu now, each carrying the sentence it stands for. App tokens only. */
.eb2-dock-bar {
  position: relative;                       /* the menus anchor to the card's top edge */
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: color-mix(in srgb, var(--bb-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--bb-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 44px -18px rgba(13,42,94,.38);
  transition: box-shadow .2s, border-color .2s;
}
.eb2-dock-bar:focus-within { border-color: color-mix(in srgb, #E2B13C 70%, var(--bb-line)); box-shadow: 0 0 0 4px color-mix(in srgb, #E2B13C 20%, transparent), 0 18px 44px -18px rgba(13,42,94,.38); }
.eb2-dock-row { display: flex; align-items: flex-end; gap: 4px; }
.eb2-dock-bar textarea {
  flex: 1; min-width: 0; min-height: 28px; max-height: 140px; padding: 5px 2px; resize: none; overflow-y: auto;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--bb-ink); background: transparent; border: 0; outline: none;
}
.eb2-dock-bar textarea::placeholder { color: var(--bb-ink-3); }

/* The `+` — the bar's only way in to everything the ask can be given. It carries the
   working state too: while the writer runs, the dock's chispa spins HERE and the button
   is disabled, so the bar needs no separate leading icon (5 slots on one line is already
   the reference's «wide» layout; a sixth icon with no job is what made the old strip read
   as decoration). */
.eb2-plus {
  position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--bb-ink-3); background: transparent; border: 0; border-radius: var(--bb-r-control);
  cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.eb2-plus:hover:not([disabled]) { background: var(--bb-hover); color: var(--bb-ink); }
.eb2-plus:active:not([disabled]) { transform: scale(.94); }
.eb2-plus.open { background: var(--bb-hover); color: var(--bb-ink); }
.eb2-plus[disabled] { cursor: default; color: #B8902A; }
.eb2-dock.is-busy .eb2-plus { animation: eb2Spin 2.8s linear infinite; }
.eb2-plus-n {
  position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center; font-family: var(--bb-mono); font-size: 9.5px; font-weight: 700;
  color: var(--bb-surface); background: var(--bb-accent); border-radius: 999px;
}

/* THE TOKEN STRIP — what the request is ABOUT: the program, and the documents it was
   handed. `display:contents` lets the attachment chips (window.BBAdj.chips, which keeps
   its own flex row for the pages that mount it alone) join this one row.

   ONE RECIPE FOR THE WHOLE ROW. Both are the same object — a fact the ask is carrying —
   so they cannot be two heights, two radii and two greys. Measured before this rule: the
   program token rendered 34px tall against the chip's 26px, 8px radius against 6px, font
   13px against 11.5px, and two different fills — a row that read as two unrelated things
   side by side. The selector is `input.eb2-tok`, not `.eb2-tok`, because beautiful.css
   styles every `input[type="text"]` at (0,1,1) — `min-height: 34px`, `padding: 7px 11px`,
   `--bb-r-control` — and a single class loses to it. A bare `.eb2-tok` rule looks applied
   and is not; that is exactly how the 34px survived the first attempt. */
.eb2-toks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; }
.eb2-toks:empty { display: none; }
.eb2-toks .eb2-dock-adjs { display: contents; }
.eb2-toks input.eb2-tok {
  box-sizing: border-box; flex: none; min-height: 28px; height: 28px; padding: 0 10px;
  font: inherit; font-size: 12px; line-height: 1.35; color: var(--bb-ink);
  background: var(--bb-field); border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip);
  outline: none; transition: border-color .15s, background .15s;
}
.eb2-toks input.eb2-tok::placeholder { color: var(--bb-ink-3); }
.eb2-toks input.eb2-tok:focus { border-color: var(--bb-accent); background: var(--bb-surface); }
/* THE PROGRAM TOKEN, PICKED FROM THE CATALOG (29 sep 2026). Same recipe as the text
   token above, and for the same reason: it stands beside the attached-document chip and
   the two cannot be two heights, two radii and two greys.

   The selector carries `:not([multiple])` on purpose — (0,3,1), which is the ONLY way to
   beat dropdown.css. That file styles `select:not([data-bbdrop="off"]):not([multiple])`
   at (0,2,1) and is the LAST stylesheet in the head, so a tie goes to it and its
   `border-radius: var(--bbd-r-ctrl)` — 12px — would land on a 6px row (measured tokens:
   --bbd-r-ctrl 12px vs --bb-r-chip 6px).

   NO `background` SHORTHAND HERE, and NO `padding` shorthand without the chevron: the
   shorthand would reset `background-image` (the chevron dropdown.css paints, which flips
   for the dark theme) and drop the 26px of right padding that chevron needs. Longhand
   only. `width` is deliberately absent — it belongs to the call site, the way the comment
   in dropdown.css says (.dmc-prog on the SMS bar, #ebDock below for the email). */
.eb2-toks select.eb2-tok:not([multiple]) {
  box-sizing: border-box; flex: none; min-height: 28px; height: 28px; padding: 0 26px 0 10px;
  font: inherit; font-size: 12px; line-height: 1.35; color: var(--bb-ink);
  background-color: var(--bb-field); border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip);
  outline: none; text-overflow: ellipsis; white-space: nowrap;
}
.eb2-toks select.eb2-tok:focus { border-color: var(--bb-accent); background-color: var(--bb-surface); }
/* Manual mode («Otro (escribir)»): the same token as a text box, with the one glyph that
   returns to the catalog. The wrapper is the token's box so the glyph can sit inside it. */
.eb2-tok-w { position: relative; display: inline-flex; align-items: center; flex: none; max-width: 100%; }
.eb2-tok-w input.eb2-tok { padding-right: 26px; }
.eb2-tok-glyph {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; background: transparent;
  border-radius: 4px; color: var(--bb-ink-3); cursor: pointer;
}
.eb2-tok-glyph:hover { color: var(--bb-ink); background: var(--bb-line-2, rgba(0,0,0,.05)); }
/* The email bar's program token. The SMS bar's is sized by .dmc-prog (dmcompose.css), which
   also gives it 100% on a phone; this one has no equivalent, and a <select> with no width
   sizes itself to its WIDEST option — 283 program names, the longest about 300px. */
#ebDock .eb2-tok { width: 220px; max-width: 100%; }
/* The chip is only re-clothed INSIDE this row — other surfaces mount it on its own.
   Its filename also drops to 500: on its own the chip is a label the user picked, but in
   this row it is a VALUE standing next to another value (the program text), and a bold
   one beside a regular one reads as a field with a label glued to it. */
.eb2-toks .bbadj-chip {
  box-sizing: border-box; height: 28px; padding: 0 9px; font-size: 12px; color: var(--bb-ink-2);
  background: var(--bb-field); border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip); box-shadow: none;
}
.eb2-toks .bbadj-chip b { font-weight: 500; color: var(--bb-ink); }
.eb2-toks .bbadj-chip i { font-size: 11px; }

/* THE PICKER — the one inline choice, in the slot the reference gives its model picker:
   a compact text button with a chevron, opening the same card upward. */
.eb2-pick {
  flex: none; display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--bb-ink-2); white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--bb-r-control); cursor: pointer;
  transition: background .15s, color .15s;
}
.eb2-pick:hover, .eb2-pick.open { background: var(--bb-hover); color: var(--bb-ink); }
.eb2-pick svg { color: var(--bb-ink-3); }

/* A FACT IS NOT A BUTTON. The corpus count and the pending step share this slot, and
   neither is clickable — so neither wears a border or a chip fill. */
.eb2-fact { align-self: center; flex: none; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--bb-ink-3); }
.eb2-fact.bad { color: var(--bb-red); }
.eb2-kbd { align-self: center; padding: 2px 6px; font-family: var(--bb-mono); font-size: 11px; color: var(--bb-ink-3); border: 1px solid var(--bb-line); border-radius: 5px; }
.eb2-dock-paso { align-self: center; font-size: 12px; color: var(--bb-ink-3); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.eb2-dock-go {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #fff;
  background: #00263A; border: 0; border-radius: 10px; cursor: pointer;
  transition: transform .12s, background .15s, opacity .15s;
}
.eb2-dock-go:hover:not([disabled]) { transform: translateY(-1px); background: #0D2A5E; }
.eb2-dock-go:active:not([disabled]) { transform: scale(.94); }
.eb2-dock-go[disabled] { background: var(--bb-line-strong); color: var(--bb-ink-2); opacity: .7; cursor: default; }
@keyframes eb2Spin { to { transform: rotate(360deg); } }

/* THE MENU — grows up from the card's top edge. A row is [glyph · name · description ·
   state]: the description is the whole point, because it is what «enlace» never had, and
   the trailing state reads `Añadido` / `N leídos` once it is on, so the menu is also
   where you READ what the ask is already carrying.
   WIDTH IS THE CONTENT'S, NOT THE BAR'S. A full-width card holding ONE row puts its state
   label («Añadir») 600px from the word it acts on — measured on the email builder, whose
   `+` carries a single row. `fit-content` makes the card exactly as wide as its longest
   row, so the trailing column stays next to its own text, and `max-width` keeps it inside
   the bar. Rows already share that column because each one is width:100% of the card. */
.eb2-menu {
  position: absolute; left: 8px; bottom: 100%; z-index: 30; margin-bottom: 8px; padding: 4px;
  width: fit-content; max-width: calc(100% - 16px);
  display: flex; flex-direction: column; background: var(--bb-surface);
  border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-overlay);
  animation: eb2MenuUp .18s var(--bb-ease-strong) both; transform-origin: bottom center;
}
@keyframes eb2MenuUp { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
/* A picker hangs off the RIGHT of the row, where its button is; the `+` hangs off the left. */
.eb2-menu-sm { left: auto; right: 8px; }
.eb2-menu-row {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px;
  font: inherit; text-align: left; background: transparent; border: 0; border-radius: var(--bb-r-chip);
  cursor: pointer; transition: background .12s;
}
.eb2-menu-row:hover:not([disabled]) { background: var(--bb-hover); }
.eb2-menu-row[disabled] { opacity: .55; cursor: default; }
.eb2-menu-g { flex: none; display: grid; place-items: center; width: 16px; color: var(--bb-ink-2); }
.eb2-menu-row b { flex: none; font-size: 12.5px; font-weight: 600; color: var(--bb-ink); }
.eb2-menu-row i { flex: 1; min-width: 0; font-style: normal; font-size: 12px; color: var(--bb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb2-menu-s { flex: none; font-size: 12px; font-weight: 600; color: var(--bb-accent-ink); }
.eb2-menu-s.on { color: var(--bb-green); }
.eb2-menu-c { flex: none; display: grid; place-items: center; width: 14px; color: var(--bb-ink); }
.eb2-adj-in { display: none; }
.eb2-adj-spin {
  width: 13px; height: 13px; border: 1.7px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: eb2Spin .8s linear infinite;
}
.eb2-dock-adjs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 0; }
.eb2-dock-adjs:empty { display: none; }
.bbadj-chip { gap: 5px; max-width: 100%; }
.bbadj-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.bbadj-chip i { font-style: normal; color: var(--bb-ink-3); font-size: 10.5px; }
.bbadj-chip.is-lee { color: var(--bb-ink-2); }
.bbadj-chip .eb2-ic { width: 16px; height: 16px; margin-right: -4px; }
/* The dock is the drop target (BBAdj.drop): the outline is the only thing that says so. */
.eb2-dock.is-drop { outline: 2px dashed color-mix(in srgb, #B8902A 70%, transparent); outline-offset: 3px; }

/* The tray: AI's answers float above the bar as cards. */
.eb2-tray { display: flex; flex-direction: column; gap: 8px; animation: eb2Up .2s var(--bb-ease-strong, ease) both; }
.eb2-tray-h, .eb2-tray-err { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 12px; color: var(--bb-ink-3); }
.eb2-tray-err { padding: 8px 10px; background: var(--bb-red-tint); color: var(--bb-ink); border-radius: 10px; }
.eb2-tray-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eb2-tcard {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; font: inherit; color: var(--bb-ink); cursor: pointer;
  background: color-mix(in srgb, var(--bb-surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bb-line); border-radius: 14px; box-shadow: 0 12px 30px -16px rgba(13,42,94,.35);
  animation: eb2Up .28s var(--bb-ease-strong, ease) both; animation-delay: calc(var(--i) * 60ms);
  transition: transform .15s, border-color .15s;
}
.eb2-tcard:hover:not([disabled]) { transform: translateY(-2px); border-color: #E2B13C; }
.eb2-tcard.is-bad { opacity: .6; cursor: not-allowed; }
.eb2-tcard, .eb2-tcard * { text-align: left; }
.eb2-tcard { align-items: stretch; }
.eb2-tcard-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eb2-tcard-h .dmc-ang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb2-tcard-h b { font-family: var(--bb-mono); font-size: 16px; }
.eb2-tcard-s { font-size: 13.5px; line-height: 1.3; }
.eb2-tcard-p { font-size: 12px; color: var(--bb-ink-2); }
.eb2-tcard-t { font-size: 11.5px; color: var(--bb-ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes eb2Up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- THE GENERATION REVEAL (85bccf09) ------------------------------------- */
/* The house gold comet on the paper's edge (gradient declared in agent.css on these
   same pseudo-elements, per its HARD RULE). */
.eb2-paper::before {
  content: ''; position: absolute; inset: -3px; z-index: 3; border-radius: 9px; padding: 2px; box-sizing: border-box;
  background: transparent; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.eb2-paper::after {
  content: ''; position: absolute; inset: -10px; z-index: 0; border-radius: 16px; background: var(--ai-ring);
  filter: blur(22px); opacity: 0; pointer-events: none; transition: opacity .4s;
}
.eb2-paper.is-gen::before { background: var(--ai-ring); opacity: 1; animation: ai-ring-spin 2.8s linear infinite; }
.eb2-paper.is-gen::after { opacity: .55; animation: ai-ring-spin 2.8s linear infinite; }

.eb2-gen { position: absolute; z-index: 4; overflow: hidden; border-radius: 6px; pointer-events: none;
  background: color-mix(in srgb, #fff 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: eb2Fade .25s ease both; }
.eb2-gen.is-local { border-radius: 5px; background: color-mix(in srgb, #fff 40%, transparent); }
.eb2-gen-tiles { position: absolute; inset: 0; }
/* Every tile runs the SAME two loops; the stagger is a NEGATIVE delay (set inline). */
.eb2-gen-tiles i {
  position: absolute; border-radius: 4px; background: color-mix(in srgb, #00263A 12%, #fff);
  opacity: var(--o); transform: translate(-50%, -50%);
  animation: eb2TileShimmer 2.6s ease-in-out infinite, eb2TileDrift 5s ease-in-out infinite;
}
@keyframes eb2TileShimmer { 0%, 100% { opacity: calc(var(--o) * .35); } 50% { opacity: var(--o); } }
@keyframes eb2TileDrift { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(calc(-50% + 6px), calc(-50% - 5px)); } }
/* Settling: one shot, staggered by --sd (a positive delay is fine on a one-shot). */
.eb2-gen.is-fin { animation: eb2FadeOut .55s ease .1s both; }
.eb2-gen.is-fin .eb2-gen-tiles i { animation: eb2Settle .38s var(--bb-ease-strong, ease) var(--sd) both; }
@keyframes eb2Settle { to { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.eb2-gen-l {
  position: absolute; left: 50%; top: 110px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; background: #00263A; color: #fff; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 30px -12px rgba(0,38,58,.55); white-space: nowrap;
}
.eb2-gen-dot { width: 8px; height: 8px; border-radius: 50%; background: #E2B13C; animation: eb2Dot 1.2s ease-in-out infinite; }
@keyframes eb2Dot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes eb2Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eb2FadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .eb2-gen-tiles i, .eb2-gen-dot, .eb2-dock.is-busy .eb2-plus, .eb2-paper.is-gen::before, .eb2-paper.is-gen::after { animation: none; }
  .eb2-tcard, .eb2-tray, .eb2-tools, .eb2-selmenu, .eb2-menu { animation: none; }
}

/* ---- inspector ------------------------------------------------------------ */
.eb2-insp { position: sticky; top: 72px; gap: 10px; max-height: calc(100vh - 90px); overflow-y: auto; }
.eb2-insp-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.eb2-insp-h svg { color: var(--bb-ink-3); }
.eb2-sep { height: 1px; background: var(--bb-line); margin: 4px 0; }
.eb2-f { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-ink-3); }
.eb2-in {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--bb-ink); background: var(--bb-inset); border: 1px solid var(--bb-line); border-radius: 8px;
}
.eb2-in:focus { outline: none; border-color: var(--bb-accent); background: var(--bb-surface); }
.eb2-utmurl { display: block; font-size: 10.5px; color: var(--bb-ink-3); word-break: break-all; line-height: 1.4; }
.eb2-sw { display: flex; gap: 6px; }
.eb2-sw button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: inherit; font-size: 12.5px; text-transform: none; letter-spacing: 0;
  color: var(--bb-ink-2); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 8px; cursor: pointer;
}
.eb2-sw button i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.eb2-sw button.on { border-color: var(--bb-accent); color: var(--bb-ink); box-shadow: 0 0 0 1px var(--bb-accent) inset; }
.eb2-logo { display: grid; place-items: center; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--bb-line); }
.eb2-logo[data-fondo="navy"] { background: #00263A; }
.eb2-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.eb2-logo-l { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.eb2-heroimg {
  display: grid; place-items: center; gap: 6px; min-height: 120px; padding: 0; overflow: hidden; font: inherit; color: var(--bb-ink-3); cursor: pointer;
  background: var(--bb-inset); border: 1.5px dashed var(--bb-line); border-radius: 10px;
}
.eb2-heroimg img { width: 100%; height: 140px; object-fit: cover; display: block; }
.eb2-heroimg:hover { border-color: var(--bb-accent); color: var(--bb-accent); }
.eb2-row2 { display: flex; gap: 6px; }
.eb2-code { font-family: var(--bb-mono); font-size: 11px; min-height: 240px; }
.eb2-pal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 10px; }
.eb2-pal.flash { animation: eb2Flash .7s ease; }
@keyframes eb2Flash { 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent) 40%, transparent); } }
.eb2-pal-b {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; font: inherit; font-size: 11.5px; color: var(--bb-ink-2);
  background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, transform .12s, color .12s;
}
.eb2-pal-b svg { color: var(--bb-ink-3); transition: color .12s; }
.eb2-pal-b:hover { border-color: var(--bb-accent); color: var(--bb-ink); transform: translateY(-1px); }
.eb2-pal-b:hover svg { color: var(--bb-accent); }

/* ---- drawers -------------------------------------------------------------- */
.eb2-drawer { padding: 18px; gap: 12px; width: min(620px, 94vw); }
.eb2-dr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eb2-dr-f { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.eb2-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; cursor: pointer; text-align: center; color: var(--bb-ink-2);
  background: var(--bb-inset); border: 1.5px dashed var(--bb-line); border-radius: 12px; transition: border-color .15s, background .15s;
}
.eb2-drop span { font-size: 12px; color: var(--bb-ink-3); }
.eb2-drop:hover, .eb2-drop.over { border-color: var(--bb-accent); background: var(--bb-accent-tint); }
.eb2-drop.busy { opacity: .6; pointer-events: none; }
.eb2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.eb2-tile { position: relative; display: flex; flex-direction: column; gap: 4px; }
.eb2-tile-img {
  display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6px; overflow: hidden; cursor: pointer;
  background: repeating-conic-gradient(#f3f3f3 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--bb-line); border-radius: 10px;
}
.eb2-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eb2-tile-img:hover { border-color: var(--bb-accent); box-shadow: 0 0 0 1px var(--bb-accent) inset; }
.eb2-tile-m { font-size: 11px; color: var(--bb-ink-3); }
.eb2-tile-x { position: absolute; top: 6px; right: 6px; padding: 2px 7px; font: inherit; font-size: 10.5px; color: var(--bb-ink-2);
  background: rgba(255,255,255,.9); border: 1px solid var(--bb-line); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.eb2-tile:hover .eb2-tile-x { opacity: 1; }
.eb2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.eb2-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; cursor: pointer;
  background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 12px; transition: border-color .15s, transform .15s;
}
.eb2-card:hover { border-color: var(--bb-accent); transform: translateY(-2px); }
.eb2-card b { font-size: 13px; padding: 0 4px; }
.eb2-card > span { font-size: 11.5px; color: var(--bb-ink-3); padding: 0 4px 4px; }
.eb2-thumb { position: relative; height: 180px; overflow: hidden; border-radius: 8px; background: #f2f2f2; display: grid; place-items: center; color: var(--bb-ink-3); }
.eb2-thumb iframe { position: absolute; top: 0; left: 50%; width: 700px; height: 820px; border: 0; transform: translateX(-50%) scale(.27); transform-origin: top center; pointer-events: none; }
.eb2-card-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 22px; height: 22px; padding: 0; font-size: 14px; line-height: 20px;
  color: var(--bb-ink-2); background: rgba(255,255,255,.92); border: 1px solid var(--bb-line); border-radius: 6px; cursor: pointer; }
.eb-imp-list { display: flex; flex-direction: column; gap: 6px; }
.eb-imp-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font: inherit; padding: 10px 12px;
  border: 1px solid var(--bb-line); border-radius: 8px; background: var(--bb-surface); cursor: pointer; color: var(--bb-ink); }
.eb-imp-row:hover { border-color: var(--bb-accent); }
.eb-imp-row .num { font-size: 12px; color: var(--bb-ink-2); }
.eb-imp-n { font-size: 11px; color: var(--bb-ink-3); }

@media (max-width: 1180px) {
  .eb2-main { grid-template-columns: minmax(0, 1fr); }
  .eb2-insp { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .eb2-tray-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .eb2-name { width: 100%; }
  .eb2-canvas { padding: 46px 8px 110px; }
}

/* Stage 5 — the Constant Contact drawer. Same drawer primitive as the library;
   a conflict widens it to two papers side by side (the pick needs both visible). */
.eb2-ccbtn { display: inline-flex; align-items: center; gap: 6px; }
.eb2-ccbtn .besc-chip { margin: 0; }
.eb2-ccdot { width: 6px; height: 6px; border-radius: 50%; background: var(--bb-ink-3); animation: eb2-ccpulse 1s ease-in-out infinite alternate; }
@keyframes eb2-ccpulse { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eb2-ccdot { animation: none; } }
.eb2-cc.ancho { width: min(980px, 96vw); }
.eb2-cc-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--bb-muted); }
.eb2-cc-n { display: flex; gap: 8px; font-size: 13px; }
.eb2-cc-n span { color: var(--bb-muted); }
.eb2-cc-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.eb2-cc-form label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-muted); }
.eb2-cc-err { font-size: 13px; color: var(--bb-red); }
.eb2-cc-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .eb2-cc-lados { grid-template-columns: 1fr; } }
.eb2-cc-lado { display: grid; gap: 8px; align-content: start; min-width: 0; }
.eb2-cc-lh { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-muted); }
.eb2-cc-as { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.eb2-cc-as b, .eb2-cc-as span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb2-cc-as span { color: var(--bb-muted); }
.eb2-cc-prev { height: 420px; border: 1px solid var(--bb-line); border-radius: 10px; overflow: hidden; background: var(--bb-inset); }
.eb2-cc-prev iframe { width: 700px; height: 980px; border: 0; transform: scale(.62); transform-origin: 0 0; }

/* The logo picker (inspector). CollectUI 9650dc46 ("Select AI model dropdown"): a
   trigger that shows the current choice, a list of rich previews under it. Motion per
   CollectUI 50f05259 (Emil Kowalski): the chevron and hover states are TRANSITIONS so a
   rapid open/close is interruptible; only the rows' one-time entrance is a keyframe.
   Each thumbnail sits on the background the logo really uses in the email. */
.eb2-lp { display: grid; gap: 6px; }
.eb2-lp-t {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer;
  font: inherit; color: var(--bb-ink); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.eb2-lp-t:hover { border-color: var(--bb-ink-3); }
.eb2-lp.open .eb2-lp-t, .eb2-lp-t:focus-visible { outline: none; border-color: var(--bb-accent); box-shadow: 0 0 0 3px var(--bb-accent-tint); }
.eb2-lp-prev, .eb2-lp-th {
  display: grid; place-items: center; flex: none; border-radius: 8px; background: #fff; border: 1px solid var(--bb-line); overflow: hidden;
}
.eb2-lp-prev { width: 112px; height: 44px; padding: 6px 10px; }
.eb2-lp-th { width: 96px; height: 38px; padding: 5px 8px; }
.eb2-lp-prev[data-fondo="navy"], .eb2-lp-th[data-fondo="navy"] { background: #00263A; border-color: #00263A; }
.eb2-lp-prev img, .eb2-lp-th img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.eb2-lp-l { display: grid; gap: 1px; min-width: 0; flex: 1; }
.eb2-lp-l small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); }
.eb2-lp-l b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb2-lp-ch { flex: none; color: var(--bb-ink-3); transition: transform .2s ease; }
.eb2-lp.open .eb2-lp-ch { transform: rotate(180deg); }
.eb2-lp-list {
  display: grid; gap: 2px; padding: 6px; border: 1px solid var(--bb-line); border-radius: 12px; background: var(--bb-surface);
  box-shadow: var(--bb-sh-hairline); max-height: 340px; overflow-y: auto;
}
.eb2-lp-o, .eb2-lp-up {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; text-align: left; color: var(--bb-ink); background: transparent;
  animation: eb2-lp-in .18s ease both; animation-delay: calc(var(--i) * 22ms);
}
.eb2-lp-o:hover, .eb2-lp-o:focus-visible, .eb2-lp-up:hover, .eb2-lp-up:focus-visible { outline: none; background: var(--bb-hover); }
.eb2-lp-o.on { background: var(--bb-accent-tint); }
.eb2-lp-ol { display: grid; gap: 1px; flex: 1; min-width: 0; }
.eb2-lp-ol b { font-size: 13px; }
.eb2-lp-ol small { font-size: 11px; color: var(--bb-ink-3); }
.eb2-lp-ok { flex: none; color: var(--bb-accent); opacity: 0; }
.eb2-lp-o.on .eb2-lp-ok { opacity: 1; }
.eb2-lp-up { margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--bb-line); border-radius: 0 0 9px 9px; font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2); }
@keyframes eb2-lp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eb2-lp-o, .eb2-lp-up { animation: none; } .eb2-lp-ch { transition: none; } }

/* Drag to reorder. The grip sits inside the block's left padding (the house body has
   40px of it, so it never covers copy); the dragged block fades, a seam shows where it
   lands, and a small card with the block's name rides the pointer. The seam is the APP's
   accent, never the house gold: in gold it read as one more rule or button of the email
   (caught on the first screenshot). */
.eb2-grip {
  position: absolute; z-index: 3; pointer-events: auto; display: grid; place-items: center; width: 22px; height: 28px; padding: 0;
  color: var(--bb-ink-2); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 7px;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.45); cursor: grab; touch-action: none;
  animation: eb2Grip .14s var(--bb-ease-strong, ease) both; transition: color .12s, border-color .12s, transform .12s;
}
.eb2-grip:hover, .eb2-grip:focus-visible { outline: none; color: var(--bb-accent); border-color: var(--bb-accent); transform: scale(1.06); }
.eb2-dragging, .eb2-dragging * { cursor: grabbing !important; user-select: none !important; }
.eb2-box.drag { background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px var(--bb-accent) inset; }
.eb2-drop {
  position: absolute; height: 2px; border-radius: 2px; background: var(--bb-accent); pointer-events: none;
  box-shadow: 0 0 0 2px var(--bb-surface), 0 0 0 4px color-mix(in srgb, var(--bb-accent) 30%, transparent); transition: top .09s ease-out;
}
.eb2-drop::before, .eb2-drop::after { content: ''; position: absolute; top: -4px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--bb-surface); border: 2px solid var(--bb-accent); }
.eb2-drop::before { left: -5px; } .eb2-drop::after { right: -5px; }
.eb2-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000200; pointer-events: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--bb-ink); border-radius: 9px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.5); transform-origin: 0 0;
}
@keyframes eb2Grip { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eb2-grip, .eb2-drop { animation: none; transition: none; } }

/* «Completar con IA» on the email meter: what only a person can fix sits under the
   criteria as chips that jump to the field; the inbox row's ✦ writes subject + preheader. */
.eb2-pend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eb2-pend-b {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--bb-ink); background: var(--bb-surface); border: 1px dashed var(--bb-orange); border-radius: 6px; transition: background .12s, border-color .12s;
}
.eb2-pend-b:hover, .eb2-pend-b:focus-visible { outline: none; background: var(--bb-hover); border-style: solid; }
.eb2-pend-b svg { color: var(--bb-orange); }
.eb2-ai-mini {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--bb-ink); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 8px; transition: border-color .12s, color .12s;
}
.eb2-ai-mini:hover:not([disabled]) { border-color: var(--bb-accent); color: var(--bb-accent); }
.eb2-ai-mini[disabled] { opacity: .55; cursor: default; }
.eb2-ai-mini.is-busy svg { animation: eb2-spin 1.6s linear infinite; }
@keyframes eb2-spin { to { transform: rotate(360deg); } }
#ebInbox { position: relative; }
#ebInbox.is-gen::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px transparent; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #E2B13C 22%, transparent) 50%, transparent 80%) 0 0 / 250% 100%;
  animation: eb2-inbox-sweep 1.4s ease-in-out infinite;
}
@keyframes eb2-inbox-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.eb2-flash { animation: eb2-flash 1.2s ease-out; }
@keyframes eb2-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-orange) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .eb2-ai-mini.is-busy svg, #ebInbox.is-gen::after, .eb2-flash { animation: none; } }

/* The canvas + menu: the «Añadir» tiles, anchored to the + with a notch pointing at it.
   z 25 = above the sticky AI dock (z 20) while it is open.
   Same tiles as the inspector grid (one list, tiposAñadir). */
.eb2-mas {
  position: absolute; z-index: 25; width: 300px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 8px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.08);
  transform-origin: var(--flecha) 0; animation: eb2-mas-in .16s var(--bb-ease-strong, ease) both;
}
.eb2-mas.arriba { transform-origin: var(--flecha) 100%; }
.eb2-mas::before {
  content: ''; position: absolute; top: -6px; left: calc(var(--flecha) - 6px); width: 12px; height: 12px; background: var(--bb-surface);
  border-left: 1px solid var(--bb-line); border-top: 1px solid var(--bb-line); transform: rotate(45deg);
}
.eb2-mas.arriba::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.eb2-mas .eb2-pal-b { padding: 9px 4px; font-size: 11.5px; animation: eb2-lp-in .16s ease both; animation-delay: calc(var(--i) * 14ms); }
.eb2-mas .eb2-pal-b:focus-visible { outline: none; border-color: var(--bb-accent); }
@keyframes eb2-mas-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eb2-mas, .eb2-mas .eb2-pal-b { animation: none; } }

/* THE TYPE chip + picker (docs/rules/besc.md §2q). "sugerido" is the chip's own small
   tag, so a suggestion is never mistaken for a decision; a person's pick drops it. */
.eb2-tipo-w { position: relative; display: inline-flex; }
.eb2-tipo {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--bb-ink); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 8px; transition: border-color .12s;
}
.eb2-tipo:hover, .eb2-tipo.open { border-color: var(--bb-accent); }
.eb2-tipo-k { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); }
.eb2-tipo b { font-weight: 600; }
.eb2-tipo i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; color: var(--bb-ink-2); background: var(--bb-inset); }
.eb2-tipo.vacio b { color: var(--bb-ink-3); }
.eb2-tipo svg { color: var(--bb-ink-3); }
.eb2-tipo.flash { animation: eb2-flash 1.2s ease-out; }
.eb2-tp {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 340px; max-height: 420px; overflow-y: auto; padding: 6px;
  display: grid; gap: 2px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.08); animation: eb2-mas-in .14s ease both; transform-origin: 20px 0;
}
.eb2-tp-o {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; font: inherit; text-align: left; cursor: pointer;
  color: var(--bb-ink); background: transparent; border: 0; border-radius: 8px; animation: eb2-lp-in .16s ease both; animation-delay: calc(var(--i, 0) * 14ms);
}
.eb2-tp-o:hover, .eb2-tp-o:focus-visible { outline: none; background: var(--bb-hover); }
.eb2-tp-o.on { background: var(--bb-accent-tint); }
.eb2-tp-l { display: grid; gap: 1px; flex: 1; min-width: 0; }
.eb2-tp-l b { font-size: 13px; }
.eb2-tp-l small { font-size: 11px; color: var(--bb-ink-3); }
.eb2-tp-o .num { flex: none; font-size: 11px; color: var(--bb-ink-2); }
@media (prefers-reduced-motion: reduce) { .eb2-tp, .eb2-tp-o { animation: none; } }

/* The type's benchmark + the closest past sends, under the meter (§2q). Numbers only. */
.eb2-bench { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bb-line); font-size: 12px; color: var(--bb-ink-2); }
.eb2-bench b { color: var(--bb-ink); }
.eb2-bench-k { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); }
.eb2-bench-n { color: var(--bb-ink-3); }
.eb2-par { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; }
.eb2-par-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 5px 8px; border-radius: 6px; background: var(--bb-inset); }
.eb2-par-r b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }