/* Рахуйчик — ШІ-помічник сайту (rakhbot.js). Кольори й шрифти — з теми сайту (Зошит / Лайм / Темна). */
.rb-root {
  --rb-acc: var(--oak, #2343d0); --rb-ink: var(--ink, #1c2541); --rb-ink2: var(--ink2, #3b4566); --rb-muted: var(--muted, #66708c);
  --rb-paper: var(--paper, #fff); --rb-bg: var(--pvc, #f8fafd); --rb-line: var(--line, #dde5f0);
  --rb-marker: var(--marker, #ffe14d); --rb-red: var(--red, #e03c31); --rb-mi: #fff;
  --rb-f: var(--f, system-ui, sans-serif); --rb-fd: var(--fd, var(--f, system-ui, sans-serif)); --rb-fh: var(--fh, "Segoe Print", cursive);
  font-family: var(--rb-f); color: var(--rb-ink);
}

/* ---------- персонаж ---------- */
.rb-m { display: block; overflow: visible; }
.rb-m .rb-body { fill: var(--rb-acc); }
.rb-m .rb-frame, .rb-m .rb-rod, .rb-m .rb-mouth { stroke: var(--rb-mi); fill: none; stroke-linecap: round; }
.rb-m .rb-eye, .rb-m .rb-b, .rb-m .rb-mouth-o { fill: var(--rb-mi); }
.rb-m .rb-pupil { fill: var(--rb-acc); transition: transform .25s ease; }
.rb-m .rb-shine { fill: #fff; opacity: .9; }
.rb-m .rb-cheek { fill: var(--rb-marker); opacity: .9; }
.rb-m .rb-eyes-h { fill: none; stroke: var(--rb-mi); stroke-linecap: round; opacity: 0; }
.rb-m .rb-eyes { transform-origin: 32px 23px; transform-box: view-box; }
.rb-m .rb-b, .rb-m .rb-mouth, .rb-m .rb-mouth-o { transform-box: view-box; }
.rb-m .rb-mouth { transform-origin: 32px 46px; transition: transform .25s ease; }
.rb-m .rb-mouth-o { transform-origin: 32px 46px; opacity: 0; }

.rb-m.is-idle .rb-eyes { animation: rb-blink 6s infinite; }
@keyframes rb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

/* рахує: кісточки бігають рахівницею — головний жест */
.rb-m.is-think .rb-b1 { animation: rb-c1 1.1s ease-in-out infinite; }
.rb-m.is-think .rb-b2 { animation: rb-c2 1.1s ease-in-out infinite; }
.rb-m.is-think .rb-b3 { animation: rb-c3 1.1s ease-in-out infinite; }
.rb-m.is-think .rb-pupil { transform: translate(-1.2px, -1.4px); }
@keyframes rb-c1 { 0%, 15% { transform: none; } 35%, 75% { transform: translateX(8px); } 95%, 100% { transform: none; } }
@keyframes rb-c2 { 0%, 30% { transform: none; } 50%, 80% { transform: translateX(8px); } 100% { transform: none; } }
@keyframes rb-c3 { 0%, 45% { transform: none; } 65%, 85% { transform: translateX(-10px); } 100% { transform: none; } }

.rb-m.is-listen .rb-pupil { transform: translateY(-1.6px); }
.rb-m.is-listen .rb-eyes { transform: scale(1.08); }
.rb-m.is-speak .rb-mouth { opacity: 0; }
.rb-m.is-speak .rb-mouth-o { animation: rb-talk .32s ease-in-out infinite alternate; }
@keyframes rb-talk { from { opacity: 1; transform: scaleY(.35); } to { opacity: 1; transform: scaleY(1.05); } }
/* фірмовий голос: рот і кісточки — за гучністю звуку (--rb-open з аналізатора Web Audio) */
.rb-m.is-talk .rb-mouth { opacity: 0; }
.rb-m.is-talk .rb-mouth-o { opacity: 1; transform: scaleY(var(--rb-open, .3)); }
.rb-m.is-talk .rb-b { transform: translateY(calc(var(--rb-open, 0) * -1.8px)); }
.rb-m.is-talk .rb-pupil { transform: translateY(calc(var(--rb-open, 0) * -.8px)); }
.rb-m.is-happy .rb-eyes { opacity: 0; }
.rb-m.is-happy .rb-eyes-h { opacity: 1; }
.rb-m.is-happy .rb-mouth { transform: scale(1.18, 1.3); }
.rb-m.is-sorry .rb-mouth { transform: scaleY(-.7) translateY(-3px); }
.rb-m.is-sorry .rb-pupil { transform: translateY(1.4px); }

/* ---------- кнопка на сторінці ---------- */
.rb-fab { position: fixed; right: 14px; bottom: 160px; z-index: 46; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 18px; background: none;
  cursor: pointer; filter: drop-shadow(4px 4px 0 var(--rb-ink)); -webkit-tap-highlight-color: transparent; }
.rb-fab:hover .rb-m { transform: translateY(-2px) rotate(-3deg); }
.rb-fab .rb-m { width: 64px; height: 64px; transition: transform .2s ease; }
.rb-fab:focus-visible { outline: 3px solid var(--rb-marker); outline-offset: 4px; }
.rb-fab[aria-expanded="true"] { display: none; }
@media (min-width: 980px) { .rb-fab { bottom: 96px; right: 16px; } }
.is-calc .rb-fab { bottom: 166px; }

.rb-nudge { position: fixed; right: 88px; bottom: 166px; z-index: 46; max-width: 240px; padding: 10px 30px 10px 12px; background: var(--rb-paper);
  border: 1.5px solid var(--rb-ink); border-radius: 14px 14px 4px 14px; box-shadow: 4px 4px 0 var(--rb-ink); font-size: .92rem; line-height: 1.35; cursor: pointer;
  animation: rb-pop .35s ease both; }
.rb-nudge button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; background: none; color: var(--rb-muted); font-size: 18px; cursor: pointer; line-height: 1; }
@media (min-width: 980px) { .rb-nudge { bottom: 104px; right: 92px; } }
.is-calc .rb-nudge { bottom: 172px; }
@keyframes rb-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- панель-аркуш ---------- */
.rb-panel { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; background-color: var(--rb-bg);
  background-image: linear-gradient(var(--rb-line) 1px, transparent 1px), linear-gradient(90deg, var(--rb-line) 1px, transparent 1px); background-size: 22px 22px; }
.rb-panel[hidden] { display: none; }
@media (min-width: 640px) {
  .rb-panel { inset: auto 20px 20px auto; width: 400px; height: min(660px, calc(100vh - 40px)); border: 1.5px solid var(--rb-ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--rb-ink); overflow: hidden; animation: rb-pop .25s ease both; }
}
.rb-hd { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: var(--rb-paper); border-bottom: 1.5px solid var(--rb-ink); }
.rb-hd .rb-m { width: 46px; height: 46px; flex: none; }
.rb-who { flex: 1; min-width: 0; line-height: 1.15; }
.rb-who b { display: block; font-family: var(--rb-fd); font-size: 1.05rem; letter-spacing: -.01em; }
.rb-who span { font-size: .8rem; color: var(--rb-muted); }
.rb-ib { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--rb-ink); cursor: pointer; }
.rb-ib:hover { background: var(--rb-bg); }
.rb-ib:focus-visible, .rb-chip:focus-visible, .rb-btn:focus-visible, .rb-send:focus-visible, .rb-mic:focus-visible { outline: 3px solid var(--rb-acc); outline-offset: 2px; }
.rb-ib[aria-pressed="false"] svg { opacity: .45; }
.rb-ib svg { width: 22px; height: 22px; }

.rb-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.rb-log > * { flex-shrink: 0; }                                     /* картки з overflow:hidden інакше стискаються в лінію */
.rb-msg { max-width: 92%; font-size: .97rem; line-height: 1.5; overflow-wrap: anywhere; }
.rb-msg p { margin: 0 0 .45em; } .rb-msg p:last-child { margin: 0; }
.rb-msg ul { margin: .2em 0 .45em; padding-left: 1.2em; }
.rb-msg a { color: var(--rb-acc); text-decoration: underline; text-underline-offset: 2px; }
.rb-msg strong { font-weight: 700; background: linear-gradient(transparent 62%, var(--rb-marker) 62%, var(--rb-marker) 92%, transparent 92%); }
.rb-bot { align-self: flex-start; display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.rb-bot > .rb-m { width: 26px; height: 26px; margin-top: 2px; }
.rb-bot .rb-txt { padding-top: 1px; }
.rb-me { align-self: flex-end; padding: 8px 12px; background: var(--rb-acc); color: #fff; border-radius: 14px 14px 4px 14px; }
.rb-sys { align-self: center; max-width: 100%; font-size: .78rem; color: var(--rb-muted); text-align: center; }
.rb-busy { display: flex; align-items: center; gap: 8px; color: var(--rb-muted); font-size: .88rem; }
.rb-busy .rb-m { width: 30px; height: 30px; }

.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px 34px; }
.rb-chip { padding: 6px 11px; border: 1.5px solid var(--rb-acc); border-radius: 999px; background: var(--rb-paper); color: var(--rb-acc); font: inherit; font-size: .86rem; cursor: pointer; }
.rb-chip:hover { background: var(--rb-acc); color: #fff; }

/* картки */
.rb-card { margin: 4px 0 2px 34px; background: var(--rb-paper); border: 1.5px solid var(--rb-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--rb-ink); overflow: hidden; }
.rb-q { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 12px; border-bottom: 1px dashed var(--rb-line); }
.rb-q:last-of-type { border-bottom: 0; }
.rb-q img { width: 96px; height: 96px; object-fit: contain; background: var(--rb-bg); border-radius: 8px; }
.rb-q h4 { margin: 0 0 4px; font-size: .95rem; line-height: 1.25; }
.rb-q ul { margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--rb-ink2); line-height: 1.35; }
.rb-ans { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rb-ans i { font-family: var(--rb-fh); font-style: normal; font-size: 1.25rem; color: var(--rb-red); }
.rb-ans b { font-family: var(--rb-fd); font-size: 1.25rem; font-variant-numeric: tabular-nums; background: linear-gradient(transparent 55%, var(--rb-marker) 55%, var(--rb-marker) 92%, transparent 92%); }
.rb-ans small { color: var(--rb-muted); }
.rb-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1.5px solid var(--rb-acc); border-radius: 10px;
  background: var(--rb-acc); color: #fff; font: inherit; font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.rb-btn.ghost { background: var(--rb-paper); color: var(--rb-acc); }
.rb-warn { margin-top: 4px; font-size: .78rem; color: var(--warn, #9a5b00); }
.rb-meta { padding: 8px 12px; font-size: .75rem; color: var(--rb-muted); background: var(--rb-bg); }
.rb-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1.5px solid var(--rb-ink); }
.rb-cmp { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rb-cmp caption { text-align: left; padding: 10px 12px 4px; font-weight: 700; }
.rb-cmp td { padding: 7px 12px; border-top: 1px solid var(--rb-line); vertical-align: middle; }
.rb-cmp td:last-child { text-align: right; white-space: nowrap; font-family: var(--rb-fd); font-variant-numeric: tabular-nums; }
.rb-cmp tr:first-child td:last-child { background: linear-gradient(transparent 55%, var(--rb-marker) 55%, var(--rb-marker) 90%, transparent 90%); }
.rb-cmp small { display: block; color: var(--rb-muted); font-family: var(--rb-f); }
.rb-cmp a { color: var(--rb-ink); }
.rb-lead { padding: 12px; display: grid; gap: 8px; }
.rb-lead b { font-size: .95rem; }
.rb-lead input, .rb-lead textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1.5px solid var(--rb-line); border-radius: 10px; font: inherit; font-size: .92rem;
  background: var(--rb-paper); color: var(--rb-ink); }
.rb-lead input:focus, .rb-lead textarea:focus { outline: none; border-color: var(--rb-acc); }
.rb-lead textarea { min-height: 64px; resize: vertical; }
.rb-lead label.rb-ok { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--rb-ink2); }
.rb-lead label.rb-ok input { width: auto; margin-top: 2px; }
.rb-lead .rb-hp { position: absolute; left: -9999px; }
.rb-lead .rb-err { margin: 0; font-size: .82rem; color: var(--err, #c62828); }
.rb-done { padding: 12px; font-weight: 600; }

/* поле вводу */
.rb-ft { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--rb-paper); border-top: 1.5px solid var(--rb-ink); }
.rb-form { display: flex; align-items: flex-end; gap: 8px; }
.rb-in { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 12px; border: 1.5px solid var(--rb-line); border-radius: 12px; font: inherit; font-size: 16px;
  line-height: 1.35; resize: none; background: var(--rb-paper); color: var(--rb-ink); }
.rb-in:focus { outline: none; border-color: var(--rb-acc); }
.rb-mic, .rb-send { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer; }
.rb-mic { background: var(--rb-bg); color: var(--rb-acc); border: 1.5px solid var(--rb-acc); position: relative; }
.rb-mic.on { background: var(--rb-red); border-color: var(--rb-red); color: #fff; }
.rb-mic.on::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; border: 2px solid var(--rb-red); animation: rb-ring 1.2s ease-out infinite; }
@keyframes rb-ring { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.rb-send { background: var(--rb-acc); color: #fff; }
.rb-send:disabled { opacity: .5; cursor: default; }
.rb-mic svg, .rb-send svg { width: 22px; height: 22px; }
.rb-note { margin-top: 6px; font-size: .72rem; color: var(--rb-muted); line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .rb-m *, .rb-fab .rb-m, .rb-nudge, .rb-panel, .rb-mic.on::after { animation: none !important; transition: none !important; }
}
@media print { .rb-fab, .rb-panel, .rb-nudge { display: none !important; } }