/* Yam Shel Shiurim — dashboard v1.
   Calm ocean palette; no visible scrollbars; no red for normal states;
   soft dots over badges; fits without internal panel scrolling. */

:root {
  --bg: #f6f8f9;
  --card: #ffffff;
  --ink: #1c2b33;
  --muted: #6b7d87;
  --faint: #93a4ad;
  --line: #e3e9ec;
  --accent: #0e6e8c;
  --accent-deep: #0a5570;
  --accent-soft: #e3f0f5;
  --good: #2e7d5b;
  --good-soft: #e4f2ec;
  --warn: #8a6d2f;
  --warn-soft: #f7efe0;
  --warn-line: #e8dbb8;
}

* { box-sizing: border-box; margin: 0; }

html { scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- header + nav ---------- */

header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 248, 249, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  max-width: 1060px; margin: 0 auto; padding: 10px 18px 0;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.head-inner h1 { font-size: 16px; font-weight: 650; letter-spacing: .2px; }
.head-inner .sub { color: var(--muted); font-size: 12px; }
.mock-pill {
  margin-left: auto; font-size: 11px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}

/* the gear — far right of the header, quiet until hovered or on #/settings */
#settings-gear {
  margin-left: 8px; color: var(--muted);
  display: inline-flex; align-items: center; align-self: center;
  padding: 4px; border-radius: 7px;
}
#settings-gear:hover { color: var(--accent-deep); }
#settings-gear.on { color: var(--accent-deep); background: var(--accent-soft); }

nav {
  max-width: 1060px; margin: 0 auto; padding: 6px 12px 0;
  display: flex; gap: 2px; overflow-x: auto;
}
nav a {
  padding: 7px 13px 9px; border-radius: 9px 9px 0 0;
  color: var(--muted); font-weight: 550; white-space: nowrap;
  display: flex; align-items: center; gap: 7px; font-size: 13.5px;
}
nav a.on { color: var(--accent-deep); background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }
nav a:hover { color: var(--accent-deep); }
.navdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .5;
}

/* ---------- page ---------- */

/* min-height keeps the page from collapsing when a short view swaps in
   (scrollbars are fully hidden app-wide, so there is no gutter to shift) */
#view { max-width: 1060px; margin: 0 auto; padding: 16px 18px 60px; min-height: 70vh; }

/* quiet busy hint while a slow view builds off-DOM — cursor only, no spinner */
body.routing { cursor: progress; }

.pagehead { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.pagehead h2 { font-size: 17px; font-weight: 650; }
.pagehead .sum { color: var(--muted); font-size: 12.5px; }
.pagehead .spacer { margin-left: auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.card h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.card h3 .count { color: var(--ink); background: var(--accent-soft); border-radius: 999px; padding: 0 8px; font-size: 11px; letter-spacing: 0; }

.empty { color: var(--faint); font-size: 13px; padding: 6px 0 4px; }

/* ---------- rows inside cards ---------- */

.row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .ttl { font-weight: 600; }
.row .det { color: var(--muted); font-size: 12.5px; }
.row .when { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ---------- chips, tags, dots ---------- */

.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; user-select: none; font-family: inherit;
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:disabled { opacity: .5; cursor: default; }
.chip:disabled:hover { border-color: var(--line); color: var(--muted); }

.tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap;
  font-weight: 550;
}
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.faint { background: var(--bg); color: var(--muted); }
.tag.strong-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); font-weight: 600; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .55; flex: none; }
.dot.gray { background: var(--faint); opacity: .6; }
.dot.good { background: var(--good); }
.dot.warn { background: var(--warn); opacity: .8; }

/* ---------- buttons ---------- */

.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: 6px 13px; font: inherit; font-size: 13px;
  cursor: pointer; font-weight: 550;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--accent-deep); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }

/* ---------- forms ---------- */

input[type="text"], input[type="number"], input[type="search"], input[type="email"],
input[type="datetime-local"], select, textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px;
  font: inherit; background: var(--card); outline: none; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { width: 100%; min-height: 88px; resize: vertical; background: var(--bg); }
label.f { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 12px 0 5px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.saved-note { font-size: 11.5px; color: var(--good); min-height: 15px; }

/* ---------- pipeline ---------- */

.controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.controls input { width: 220px; }

.store-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.store-row:hover { border-color: var(--accent); }
.store-row .nm { font-weight: 600; }
.store-row .loc { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }

/* ---------- store detail ---------- */

.backlink { font-size: 13px; margin-bottom: 10px; display: inline-block; }
.store-head h2 { font-size: 18px; font-weight: 650; }
.store-head .addr { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.kv { display: flex; gap: 8px; padding: 3px 0; font-size: 13.5px; flex-wrap: wrap; align-items: center; }
.kv .k { color: var(--muted); min-width: 88px; font-size: 12.5px; }
.stage-chips, .frow { display: flex; gap: 7px; flex-wrap: wrap; margin: 6px 0; }

.tl-item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.tl-item:first-child { border-top: 0; }
.tl-item .tl-body { flex: 1; min-width: 0; }
.tl-item .tl-text { color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.tl-item .when { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ---------- outbox ---------- */

.kind-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 8px; padding: 0 2px;
}
.kind-head:first-child { margin-top: 0; }
.kind-head .kn { font-weight: 650; font-size: 14px; }
.kind-head .streak { color: var(--muted); font-size: 12.5px; }

.draft { margin-bottom: 10px; }
.draft .to-line { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft .to-line .to { font-weight: 650; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.draft .subj { font-weight: 550; margin: 6px 0 4px; }
.draft .body-preview {
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted);
  font-size: 13px; background: var(--bg); border-radius: 8px; padding: 10px 12px;
  margin: 8px 0;
}
.draft .actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.confirm-box {
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px; background: var(--accent-soft);
}
.confirm-box .line { font-size: 13.5px; margin-bottom: 4px; }
.confirm-box .line b { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.confirm-box .full-body {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px;
  background: var(--card); border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.confirm-box label.ck { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--warn); margin: 8px 0; cursor: pointer; }
.confirm-box label.ck input { margin-top: 2px; }

/* ---------- money / stock ---------- */

.inv-row { align-items: flex-start; }
.inv-row .amt { font-weight: 650; white-space: nowrap; }
.pay-form { margin: 6px 0 2px; }

.stock-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.stock-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 180px;
}
.stock-card b { font-size: 26px; font-weight: 650; }
.stock-card span { color: var(--muted); font-size: 12.5px; }

/* inline manual adjuster (gifts, damage, counts) */
.stock-card.stock-adjust { flex-direction: column; align-items: stretch; gap: 2px; }
.stock-line { display: flex; align-items: baseline; gap: 10px; }
.stock-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.stock-chips .chip { padding: 3px 10px; font-size: 11.5px; }

.qty-pos { color: var(--good); font-weight: 600; white-space: nowrap; }
.qty-neg { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------- loop strip ---------- */

.loop-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 10px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; margin-top: 14px;
}
.loop-strip .loop { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.loop-strip .cap { color: var(--faint); font-size: 11.5px; margin-left: auto; }

/* ---------- utility classes (CSP forbids inline styles — use these) ---------- */

.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.ml6 { margin-left: 6px; }
.mla { margin-left: auto; }
.wfull { width: 100%; }
.w70 { width: 70px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.hint { font-size: 11.5px; color: var(--faint); }
.faint-sm { color: var(--faint); font-size: 12px; }
.warn-text { color: var(--warn); }
.warn-note { margin-top: 8px; color: var(--warn); font-size: 12.5px; }
.grow-input { flex: 1; min-width: 150px; }
.edit-body { min-height: 150px; margin-top: 8px; }
.tl-tag { align-self: flex-start; margin-top: 2px; }
.empty-center { text-align: center; padding: 30px; }

/* ---------- inline editing (the least-clicks law: no edit modes) ---------- */

/* draft subject/body: always live text — quiet until hovered/focused */
.subj-inline {
  width: 100%; font-weight: 550; font-size: 14px; color: var(--ink);
  border-color: transparent; background: transparent;
  padding: 5px 8px; margin: 4px -8px 0; border-radius: 7px;
}
.subj-inline:hover { border-color: var(--line); }
.subj-inline:focus { border-color: var(--accent); background: var(--card); }
.body-inline {
  width: 100%; color: var(--muted); font-size: 13px; line-height: 1.5;
  background: var(--bg); border-color: transparent; border-radius: 8px;
  padding: 10px 12px; margin: 8px 0 2px; min-height: 60px;
  field-sizing: content; resize: vertical;
}
.body-inline:hover { border-color: var(--line); }
.body-inline:focus { border-color: var(--accent); color: var(--ink); background: var(--card); }
input.ro, textarea.ro { opacity: .65; pointer-events: none; }
.verify-strip { margin-top: 8px; }

/* store email: same quiet inline treatment */
.email-inline {
  border-color: transparent; background: transparent;
  padding: 3px 8px; margin-left: -8px; border-radius: 7px;
  min-width: 210px; flex: 1; max-width: 320px; font-size: 13.5px;
}
.email-inline:hover { border-color: var(--line); }
.email-inline:focus { border-color: var(--accent); background: var(--card); }

/* ---------- unified feed (Needs your eyes) + segmented toggles ---------- */

.seg { display: inline-flex; gap: 6px; }
.feed-tag { min-width: 62px; text-align: center; }
.feed-item .grow.clicky { cursor: pointer; }
.feed-open {
  border-top: 1px solid var(--line);
  padding: 6px 0 10px;
}
.feed-open .card.draft { margin: 8px 0 4px; background: var(--bg); }
.feed-open .thread-panel { margin-top: 4px; }
.feed-open .pay-form { margin: 8px 0 2px; }

/* one quiet health line (replaces the loop-lights strip) */
.health-line {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; margin-top: 14px;
  color: var(--faint); font-size: 12px;
}
.health-detail { flex-basis: 100%; padding-left: 16px; }

/* ---------- inbox + threads ---------- */

.inbox-card { margin-bottom: 8px; padding: 11px 15px; }
.inbox-card.handled { opacity: 1; }
.inbox-head { display: flex; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.inbox-head .ttl { font-weight: 600; }
.inbox-head .det { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.mono-sm { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.snippet {
  color: var(--faint); font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}

/* the opened message — fully visible, softly highlighted */
.thr-current {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px;
  background: var(--accent-soft); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0 6px;
}
.thr-item {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; margin: 6px 0;
}
.thr-item.thr-out { background: var(--bg); }
.thr-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thr-who { color: var(--muted); font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.thr-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; margin-top: 4px; }

.reply-form { margin-top: 10px; }
.reply-box { min-height: 64px; field-sizing: content; }

/* ---------- enrichment review (found emails) ---------- */

/* evidence URL: selectable text only, never a link (defanged in JS too) */
.src-line {
  font-size: 11.5px; color: var(--faint); margin-top: 6px;
  overflow-wrap: anywhere;
}
.src-line .src {
  font-family: ui-monospace, Consolas, monospace;
  user-select: all;   /* one click selects the whole evidence URL */
}

/* ---------- sign-in gate (cloud mode) ---------- */

.hidden { display: none !important; }
#signout { margin-left: auto; }
body.authing header, body.authing #view { display: none; }

.auth-screen {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 350px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 26px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.auth-brand { text-align: center; margin-bottom: 10px; }
.auth-brand h1 { font-size: 17px; font-weight: 650; letter-spacing: .2px; }
.auth-brand .auth-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.auth-card input { width: 100%; }
.auth-msg { color: var(--warn); font-size: 12.5px; min-height: 18px; }
.auth-submit { width: 100%; padding: 8px 13px; }
.auth-actions { display: flex; justify-content: center; margin-top: 2px; }

/* ---------- settings: dial sentences + fact rows ---------- */

.dial-sentence { font-size: 13.5px; }
.dial-in {
  width: 58px; text-align: center; margin: 0 2px;
  padding: 3px 6px; font-weight: 600;
  border-color: transparent; background: var(--bg); border-radius: 7px;
}
.dial-in:hover { border-color: var(--line); }
.dial-in:focus { border-color: var(--accent); background: var(--card); }

/* the info base: one big box that GROWS with its content — the company
   brain never scrolls inside itself */
.info-box {
  width: 100%; min-height: 420px; font-size: 13.5px; line-height: 1.6;
  field-sizing: content; overflow: hidden; resize: vertical;
  background: var(--bg); border-color: transparent; border-radius: 10px;
  padding: 14px 16px;
}
.info-box:hover { border-color: var(--line); }
.info-box:focus { border-color: var(--accent); background: var(--card); }

/* ---------- follow-up position dots + stock level bar + invoice warmth ---------- */

.seq-dots {
  color: var(--accent); opacity: .75; font-size: 10px;
  letter-spacing: 2px; white-space: nowrap; font-weight: 400;
}

progress.stockbar {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; border: 0; margin-top: 10px;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
progress.stockbar::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress.stockbar::-webkit-progress-value { background: var(--accent); border-radius: 999px; opacity: .75; }
progress.stockbar::-moz-progress-bar { background: var(--accent); border-radius: 999px; opacity: .75; }

/* past-due rows warm quietly with age — a tint, never red */
.row.age1 { background: #fdfaf1; }
.row.age2 { background: #faf3e2; }
.row.age3 { background: #f6ecd2; }
.row.age1, .row.age2, .row.age3 {
  border-radius: 8px; padding-left: 10px; padding-right: 10px;
}

/* inline invoice editing (drafts only) */
.amt-inline { width: 96px; text-align: right; }
.date-inline { font-size: 12.5px; padding: 4px 8px; }

/* ---------- Bamba (the assistant bubble) ---------- */

/* Bamba sits IN from the corner: a comfortable inset on narrow screens,
   and on wide ones it tucks against the content column's right edge so it
   reads as part of the app instead of stuck to the window. */
#bamba-fab {
  position: fixed; right: max(44px, calc(50vw - 606px)); bottom: 44px; z-index: 60;
  width: 64px; height: 64px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 43, 51, .18);
}
#bamba-fab img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
#bamba-fab:hover { border-color: var(--accent); }

#bamba-panel {
  position: fixed; right: max(44px, calc(50vw - 606px)); bottom: 120px; z-index: 60;
  width: 360px; max-width: calc(100vw - 32px);
  height: min(540px, calc(100vh - 120px));
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(28, 43, 51, .16);
  display: flex; flex-direction: column; overflow: hidden;
}
.bamba-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.bamba-head img { width: 26px; height: 26px; border-radius: 50%; }
.bamba-name { font-weight: 650; }

.bamba-log {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; min-height: 120px;
}
.bmsg { display: flex; gap: 8px; align-items: flex-end; }
.bmsg.me { justify-content: flex-end; }
.bmsg .bubble {
  max-width: 84%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bmsg.me .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bmsg.bot .bubble { background: var(--bg); color: var(--ink); border-bottom-left-radius: 4px; max-width: 100%; }
.bava { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.bwrap { max-width: 84%; min-width: 0; }
.bdid { color: var(--faint); font-size: 11px; margin: 3px 0 0 6px; }

.bamba-form {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line); align-items: flex-end;
}
.bamba-ta {
  flex: 1; min-height: 34px; max-height: 110px;
  field-sizing: content; resize: none; background: var(--card);
}

/* "Process now with AI" / "Dismiss" on a sent card — quiet, secondary,
   never competing with the message itself */
.sent-acts { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sent-acts .btn { font-size: 12px; }
.sent-acts .det { color: var(--faint); font-size: 12px; }
.thr-item .sent-acts { margin-top: 6px; }

/* reply insight — Bamba's read of a message. ADVICE: plain text next to a
   small avatar, never a control, never implies anything was done. */
.insight {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-top: 5px;
}
.insight .bava { width: 16px; height: 16px; align-self: center; }
.insight .itext { color: var(--muted); font-size: 12.5px; font-style: italic; }
.thread-panel .insight { margin: 2px 0 8px; }

/* calm typing indicator — soft dots, nothing alarming */
.bubble.typing { display: flex; gap: 2px; align-items: center; padding: 11px 12px; }
.typing .tdot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint); margin: 0 2px;
  animation: bambadot 1.2s infinite;
}
.typing .tdot:nth-child(2) { animation-delay: .2s; }
.typing .tdot:nth-child(3) { animation-delay: .4s; }
@keyframes bambadot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: .9; transform: translateY(-3px); }
}

/* ---------- toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; opacity: 0;
  transition: opacity .25s; pointer-events: none; z-index: 50;
  max-width: 90vw; text-align: center;
}
#toast.show { opacity: .93; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .grid2 { grid-template-columns: 1fr; }
  #view { padding: 12px 12px 60px; }
  .head-inner { padding: 10px 12px 0; }
  .mock-pill { display: none; }
  .controls input { width: 100%; }
  .row .when { font-size: 11px; }
  .store-row { padding: 12px 13px; }
  nav a { padding: 8px 11px 10px; }
  .kv .k { min-width: 78px; }
  /* narrow screens: pull back in so the fab never sits over a row's buttons */
  #bamba-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  #bamba-panel { right: 10px; bottom: 82px; }
  .info-box { min-height: 320px; }
  /* pill and signout can both be hidden here — the gear holds the far right */
  #settings-gear { margin-left: auto; }
}