/* Ask Sam (web/ask.js): the site's floating glass composer (.fab-card, .fab-row, .ask-go, .fab-sug from site-components.css)
   fixed at the bottom centre of the main area, and a compact answer panel above it. Everything here is under .eca, so it
   cannot restyle the page. ask.js sets --eca-left (the main area's centre) and --eca-room (its width). */
.eca { position: fixed; z-index: 50; bottom: 22px; left: var(--eca-left, 50%); transform: translateX(-50%);
  width: min(600px, calc(var(--eca-room, 100vw) - 40px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.eca > * { pointer-events: auto; }
/* Room under the content, so at the end of the page nothing sits under the box (styles.css sets main.page's padding). */
body.eca-on.ec main.page, body.eca-on.ec main.page:has(#mc) { padding-bottom: 112px; }

.eca .eca-card { padding: 9px 9px 9px 16px; }
.eca .fab-row input.eca-in { font-size: 15px; }
/* The box itself shows focus (a soft ring on the card), not a square outline around the text field. */
.eca .fab-row input.eca-in:focus, .eca .fab-row input.eca-in:focus-visible { outline: 0 !important; box-shadow: none; }
.eca .eca-card:focus-within { box-shadow: 0 0 0 4px var(--wf-focus-soft, rgba(20, 20, 20, .08)), 0 12px 32px rgba(0, 0, 0, .10); }
.eca .eca-go[disabled] { opacity: .45; }
/* The suggestions show only while the box has focus, above it (where the answers open), so at rest the box is one line. */
.eca .eca-sugs { order: 1; margin: 0; display: none; }
.eca:focus-within .eca-sugs { display: flex; animation: eca-in .18s cubic-bezier(.2, .8, .2, 1); }
.eca .eca-sugs[hidden] { display: none; }
/* a suggestion can name a long file (a real mailbox's newest): one line, cut with an ellipsis */
.eca .eca-sug { box-sizing: border-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eca .eca-card { order: 2; }

.eca-panel { order: 1; background: var(--wf-panel, #fff); color: var(--wf-ink, #171717); border: 1px solid var(--wf-glass-line, rgba(20, 20, 20, .07));
  border-radius: var(--wf-radius-home, 16px); box-shadow: var(--wf-shadow-pop, 0 18px 40px -12px rgba(0, 0, 0, .22));
  max-height: min(52vh, 460px); display: flex; flex-direction: column; overflow: hidden; animation: eca-in .2s cubic-bezier(.2, .8, .2, 1); }
.eca-panel[hidden] { display: none; }
.eca-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--wf-border, #e7e7e7); flex: none; }
.eca-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--wf-btn, #252525); color: var(--wf-btn-ink, #fff);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }
.eca-title { font-size: 13px; font-weight: 600; }
.eca-note { font-size: 11.5px; color: var(--wf-faint, #9b9b9b); margin-right: auto; }
.eca-x { all: unset; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--wf-muted, #777); cursor: pointer; }
.eca-x:hover { background: var(--wf-panel2, #eee); color: var(--wf-ink, #171717); }
.eca-x:focus-visible, .eca-src:focus-visible, .eca .fab-sug:focus-visible, .eca .ask-go:focus-visible { outline: 2px solid var(--wf-ink, #171717); outline-offset: 2px; }

.eca-log { overflow-y: auto; padding: 12px 14px 4px; overscroll-behavior: contain; }
.eca-turn { margin: 0 0 12px; }
.eca .eca-q { font-size: 13px; }
.eca-a { margin: 6px 0 0; }
.eca .eca-text { white-space: pre-line; margin: 0; }
.eca .eca-err { color: var(--wf-warn, #b26a00); }
.eca-think { margin: 0; font-size: 13.5px; width: fit-content; color: var(--wf-muted, #777);
  background: linear-gradient(100deg, var(--wf-muted, #777) 30%, var(--wf-faint, #bbb) 50%, var(--wf-muted, #777) 70%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: eca-shim 1.4s linear infinite; }

.eca-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.eca-src { all: unset; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 4px 9px;
  border-radius: var(--wf-radius-pill, 999px); background: var(--wf-pill, #eee); color: var(--wf-muted, #666); font-size: 11.5px; cursor: pointer; }
.eca-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eca-src svg { flex: none; }
.eca-src:hover { background: var(--wf-pill-hover, #e7e7e7); color: var(--wf-ink, #171717); }
.eca-src[disabled] { cursor: default; opacity: .8; }
.eca-src[disabled]:hover { background: var(--wf-pill, #eee); color: var(--wf-muted, #666); }

@keyframes eca-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes eca-shim { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .eca-panel { animation: none; } .eca-think { animation: none; -webkit-text-fill-color: currentColor; background: none; } }

/* Phone: the main area beside the rail, with a 12px gutter; the panel a little taller. */
@media (max-width: 640px) {
  .eca { width: calc(var(--eca-room, 100vw) - 24px); bottom: 12px; }
  .eca-panel { max-height: 58vh; }
  .eca .eca-sugs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .eca .eca-sugs .fab-sug { white-space: nowrap; flex: none; max-width: 85%; }
  .eca-note { display: none; }
  body.eca-on.ec main.page, body.eca-on.ec main.page:has(#mc) { padding-bottom: 96px; }
}