:root {
  --bg: #f7f3ea; --panel: #fffdf8; --ink: #1f2430; --muted: #6b6f7a; --line: #e5ddc9;
  --accent: #1b4f72; --accent-2: #b5892f; --user: #e8eef4; --ok: #2e7d4f; --err: #b3261e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; }
body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 20px; font-weight: 600; }
h1 .he, .he { font-family: "Frank Ruhl Libre", serif; }
h1 .he { color: var(--accent-2); margin-inline-start: 6px; font-weight: 500; }
.status { font-size: 13px; color: var(--muted); padding: 4px 10px; border-radius: 99px; background: #efe8d8; }
.status.ok { color: #fff; background: var(--ok); }
.status.err { color: #fff; background: var(--err); }
.status.warn { color: #fff; background: var(--accent-2); }

main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); min-height: 0; }
@media (max-width: 820px) {
  main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  header { padding: 10px 14px; gap: 8px; } h1 { font-size: 17px; }
  .transcript, .controls { padding-inline: 14px; } .source-list, .sources h2 { padding-inline: 14px; }
  .mic { width: 56px; height: 56px; }
}

.conversation { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--line); }
.transcript { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--user); }
.msg.model { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.tool { align-self: center; font-size: 12px; color: var(--muted); }
.tool.err { color: var(--err); }
.hint { color: var(--muted); font-size: 14px; }

.controls { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); }
.mic { position: relative; width: 64px; height: 64px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.mic svg { position: relative; z-index: 1; }
.mic .level { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: .25; transition: transform 80ms linear; }
.mic.on { background: var(--err); }
.mic.on .level { background: var(--err); }
.text-form { flex: 1; min-width: 0; display: flex; gap: 8px; }
.text-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--panel); }
.text-form button { padding: 10px 16px; border: none; border-radius: 10px; background: var(--ink); color: #fff; font: inherit; cursor: pointer; }

.sources { display: flex; flex-direction: column; min-height: 0; background: #fbf8f1; }
.sources h2 { margin: 0; padding: 16px 22px 8px; font-size: 15px; font-weight: 600; }
.count { font-size: 12px; color: var(--muted); font-weight: 500; margin-inline-start: 6px; }
.source-list { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.source { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.source.flash { animation: flash 1s; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent-2); } to { box-shadow: none; } }
.source header { padding: 0; border: none; margin-bottom: 8px; }
.source header a { color: var(--accent); font-weight: 600; text-decoration: none; }
.source header a:hover { text-decoration: underline; }
.sources h2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lang-toggle { margin-inline-start: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-toggle button { border: 0; background: transparent; padding: 5px 11px; font: 500 13px Inter, sans-serif; color: var(--muted); cursor: pointer; }
.lang-toggle button.he { font-family: "Frank Ruhl Libre", serif; font-size: 15px; }
.lang-toggle button.on { background: var(--accent); color: #fff; }
.source-list[data-lang="he"] .txt.en { display: none; }
.source-list[data-lang="en"] .txt.he { display: none; }
.source-list[data-lang="he"] .source.no-he .txt.en { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
.source-list[data-lang="en"] .source.no-en .txt.he { display: block; }
.source-list[data-lang="en"] .txt.en { margin-top: 0; padding-top: 0; border-top: 0; }
.source header { display: flex; align-items: center; gap: 8px; }
.source header .del { margin-inline-start: auto; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.source header .del:hover { background: var(--line); color: #b3261e; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.txt { white-space: pre-wrap; line-height: 1.6; max-height: 280px; overflow-y: auto; }
.txt + .txt { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.txt.he { font-family: "Frank Ruhl Libre", serif; font-size: 19px; }
.txt.en { font-size: 14px; }
.txt.note { font-size: 13px; color: var(--muted); font-style: italic; }
.source-list[data-lang="he"] .txt.note { display: none; }
.txt.snippet { font-family: "Frank Ruhl Libre", serif; font-size: 16px; color: #3a3f4b; }
.version { font-family: Inter, sans-serif; font-size: 11px; color: var(--muted); margin-top: 4px; direction: ltr; text-align: start; }

/* access code dialog */
.code-overlay { position: fixed; inset: 0; background: rgba(31,36,48,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.code-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.code-box label { font-size: 17px; font-weight: 600; color: var(--ink); }
.code-box input { font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.code-box input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-box label + input + label, .code-box input + label { margin-top: 4px; }
.code-err { margin: 0; min-height: 0; color: #b3261e; font-size: 14px; }
.code-err:empty { display: none; }
.code-box button { font: inherit; font-size: 16px; font-weight: 600; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }

.msg.old { opacity: .6; }
.code-box .resume-when { margin: -6px 0 2px; color: var(--muted); font-size: 15px; }
.code-box button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.head-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sessions-btn { font: 600 13px Inter, sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; }
.sessions-box { max-width: 420px; max-height: 80vh; }
.sess-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 60vh; }
.code-box .sess-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.sess-item .t { font-weight: 600; font-size: 16px; }
.sess-item .w { color: var(--muted); font-size: 13px; font-weight: 400; }
.sess-item.current { border-color: var(--accent); }

.open-sefaria { display: inline-block; margin-top: 8px; font: 600 14px Inter, sans-serif; color: var(--accent); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.tool.src-link a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 13px; }
.tool.src-link.old { opacity: .6; }

.source.doc header .doc-title { font-weight: 600; color: var(--ink); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.pager button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 0 14px; height: 34px; font: 600 14px Inter, sans-serif; line-height: 1; cursor: pointer; color: var(--ink); }
.pager .pg { font: 500 13px Inter, sans-serif; color: var(--muted); min-width: 92px; text-align: center; }
.doc-status { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.doc-status:empty { display: none; }
.txt.doctxt { white-space: pre-wrap; font-family: "Frank Ruhl Libre", serif; font-size: var(--doc-font, 20px); line-height: 1.75; max-height: 50vh; overflow-y: auto; }
.txt.doctxt { max-height: 60vh; }
.doc-tools { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.doc-tools button { font: 600 13px Inter, sans-serif; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.doc-tools .full-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.doc-size { display: inline-flex; gap: 4px; }
.doc-size button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.reader { position: fixed; inset: 0; z-index: 1000; background: var(--panel); display: flex; flex-direction: column; }
.reader[hidden] { display: none; }
body.reading { overflow: hidden; }
.reader-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.reader-bar .r-title { flex: 1; min-width: 0; font: 600 16px "Frank Ruhl Libre", serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.reader-bar button, .reader-nav button { font: 600 15px Inter, sans-serif; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.reader-bar .r-mic.on { background: var(--err); color: #fff; border-color: var(--err); }
.reader-txt { flex: 1; overflow-y: auto; padding: 18px 20px 30px; white-space: pre-wrap; font-family: "Frank Ruhl Libre", serif; font-size: var(--doc-font, 20px); line-height: 1.8; -webkit-overflow-scrolling: touch; }
.reader-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.reader-nav button:disabled { opacity: .35; }
.reader-nav .r-pg { font: 500 14px Inter, sans-serif; color: var(--muted); }
.txt.doctxt.pending { color: var(--muted); font-family: Inter, sans-serif; font-size: 14px; }
.source-list .source.doc .txt.doctxt { display: block; }
.code-box .pick { background: var(--accent); }

.doc-dl { display: flex; gap: 8px; margin: 2px 0 10px; flex-wrap: wrap; }
.doc-dl[hidden] { display: none; }
.doc-dl button { font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.doc-row { display: flex; gap: 8px; align-items: stretch; }
.doc-row .sess-item { flex: 1; min-width: 0; }
.code-box button.mini { padding: 8px 10px; font-size: 13px; white-space: nowrap; }

.sessions-box .new-sess { width: 100%; margin: 6px 0 10px; padding: 12px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font: 600 15px Inter, sans-serif; cursor: pointer; }
.help-btn { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--accent); font: 700 16px Inter, sans-serif; cursor: pointer; }
.tour-shade { position: fixed; inset: 0; z-index: 2000; }
.tour-ring { position: fixed; z-index: 2001; border-radius: 14px; box-shadow: 0 0 0 3px var(--accent-2), 0 0 0 9999px rgba(20, 24, 32, .62); pointer-events: none; transition: all .25s ease; }
.tour-tip { position: fixed; z-index: 2002; background: var(--panel); color: var(--ink); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: Inter, sans-serif; transition: top .25s ease, left .25s ease; }
.tour-tip .tour-step { font-size: 12px; color: var(--muted); }
.tour-tip h3 { margin: 4px 0 6px; font-size: 17px; }
.tour-tip p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-btns .sp { flex: 1; }
.tour-btns button { font: 600 14px Inter, sans-serif; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.tour-btns .tour-next { background: var(--accent); color: #fff; border-color: var(--accent); }
.tour-btns .tour-skip { border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding-inline: 12px; }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-top .tour-x { border: 1px solid var(--accent); background: var(--panel); color: var(--accent); font: 600 13px Inter, sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer; }

.pager button:disabled, .reader-nav button:disabled { opacity: .35; cursor: default; }
.doc-row .del-doc { color: var(--muted); min-width: 44px; }
.doc-row .del-doc.confirm { background: #b3261e; color: #fff; border-color: #b3261e; }

/* ===================== Study-table layout (2026-10-15) ===================== */
:root { --orange: #c46a00; }
html, body { height: 100%; }
body { height: 100dvh; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header.topbar { padding: 10px 16px; gap: 10px; flex: none; }
header.topbar h1 { font-size: 21px; margin: 0; }
.head-right { gap: 8px; }
.round-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--accent); font: 600 19px Inter, sans-serif; display: grid; place-items: center; cursor: pointer; padding: 0; }
.conn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); color: var(--accent); cursor: pointer; position: relative; padding: 0; }
.conn::before { content: ""; position: absolute; inset: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E") center/contain no-repeat; }
.conn[data-state="idle"] { border-color: var(--line); color: var(--muted); opacity: .6; }
.conn[data-state="connecting"] { border: 2px dashed var(--line); }
.conn[data-state="connecting"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%3E%3Cg%20transform%3D%22rotate%28-45%2012%2012%29%22%3E%3Crect%20x%3D%220.5%22%20y%3D%228.5%22%20width%3D%229%22%20height%3D%227%22%20rx%3D%223.5%22/%3E%3Crect%20x%3D%2214.5%22%20y%3D%228.5%22%20width%3D%229%22%20height%3D%227%22%20rx%3D%223.5%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%3E%3Cg%20transform%3D%22rotate%28-45%2012%2012%29%22%3E%3Crect%20x%3D%220.5%22%20y%3D%228.5%22%20width%3D%229%22%20height%3D%227%22%20rx%3D%223.5%22/%3E%3Crect%20x%3D%2214.5%22%20y%3D%228.5%22%20width%3D%229%22%20height%3D%227%22%20rx%3D%223.5%22/%3E%3C/g%3E%3C/svg%3E"); animation: linkpulse 1.2s ease-in-out infinite; }
.conn[data-state="broken"] { border-color: var(--orange); color: var(--orange); }
.conn[data-state="broken"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18.84%2012.25l1.72-1.71a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M5.17%2011.75l-1.71%201.71a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%225%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%228%22%20x2%3D%225%22%20y2%3D%228%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2219%22%20x2%3D%2216%22%20y2%3D%2222%22/%3E%3Cline%20x1%3D%2219%22%20y1%3D%2216%22%20x2%3D%2222%22%20y2%3D%2216%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18.84%2012.25l1.72-1.71a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M5.17%2011.75l-1.71%201.71a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%225%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%228%22%20x2%3D%225%22%20y2%3D%228%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2219%22%20x2%3D%2216%22%20y2%3D%2222%22/%3E%3Cline%20x1%3D%2219%22%20y1%3D%2216%22%20x2%3D%2222%22%20y2%3D%2216%22/%3E%3C/svg%3E"); }
@keyframes linkpulse { 0%,100% { transform: scale(1.08); opacity: .55; } 50% { transform: scale(.9); opacity: 1; } }

main.study { flex: 1; min-height: 0; display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; }
.sources { flex: 1; min-height: 0; display: flex; flex-direction: column; background: transparent; }
.tabs { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; flex: none; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs[hidden] { display: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px "Frank Ruhl Libre", Inter, serif; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; }
.tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.source-list { flex: 1; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.source-list > .source { display: none; }
.source-list > .source.active { display: block; flex: 1; min-height: 0; overflow-y: auto; border-radius: 14px; padding: 14px 16px; -webkit-overflow-scrolling: touch; }
.source-list > .hint { margin: auto 8px; text-align: center; font-size: 16px; line-height: 1.6; }
.source-list:has(> .source) > .hint { display: none; }
.source .txt { max-height: none; overflow: visible; }
.source .txt.he, .source .txt.snippet { font-size: var(--doc-font, 20px); line-height: 1.75; }
.source .txt.en { font-size: calc(var(--doc-font, 20px) * .78); line-height: 1.6; }
.source.doc .txt.doctxt { max-height: none; overflow: visible; }
.source header a { font-size: 15px; }
.source header .del:hover { color: var(--orange); }

.berel-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.said { flex: 1; min-width: 0; text-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; font: 400 14.5px/1.4 Inter, sans-serif; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.said small { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.said small:empty { display: none; }
.said span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mic-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; }
.mic { width: 72px; height: 72px; background: var(--accent); }
.mic .level { background: var(--accent); }
.mic.on, .mic.on .level { background: var(--accent); }
.mic .mic-ico { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; font-size: 30px; line-height: 1; }
.mic .mic-ico::before { content: ""; width: 30px; height: 30px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.mic[data-state="connecting"] { opacity: .75; }
.mic[data-state="connecting"] .mic-ico::before { animation: linkpulse 1.2s ease-in-out infinite; }
.mic[data-state="listening"], .mic[data-state="listening"] .level { background: var(--orange); }
.mic[data-state="listening"] { box-shadow: 0 0 0 7px rgba(196,106,0,.18); }
.mic[data-state="listening"] .mic-ico::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1M7%208v8M11%205v14M15%208v8M19%2010v4M22%2012h-1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1M7%208v8M11%205v14M15%208v8M19%2010v4M22%2012h-1%22/%3E%3C/svg%3E"); }
.mic[data-state="speaking"] { box-shadow: 0 0 0 7px rgba(27,79,114,.16), 0 0 0 14px rgba(27,79,114,.07); }
.mic[data-state="speaking"] .mic-ico::before { content: "✋"; background: none; -webkit-mask: none; mask: none; width: auto; height: auto; }
.mic-cap { font: 600 11.5px Inter, sans-serif; color: var(--muted); }
.end-btn { font: 600 12.5px Inter, sans-serif; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; }
.end-btn[hidden] { display: none; }

/* conversation: bottom sheet on phones */
.conversation { position: fixed; left: 0; right: 0; bottom: 0; height: 78dvh; z-index: 40; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .25s ease; border: 0; }
body.convo-open .conversation { transform: none; }
.convo-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.convo-head b { font-size: 17px; }
.conversation .transcript { padding: 14px 16px; }
.conversation .text-form { flex: none; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* menu drawer */
.menu-shade { position: fixed; inset: 0; background: rgba(31,36,48,.35); z-index: 60; opacity: 0; transition: opacity .2s; }
.menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); z-index: 61; background: var(--panel); box-shadow: -8px 0 24px rgba(0,0,0,.15); padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; transform: translateX(105%); transition: transform .22s ease; }
.menu-shade[hidden], .menu[hidden] { display: none; }
body.menu-open .menu { transform: none; }
body.menu-open .menu-shade { opacity: 1; }
.menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.menu-head b { font-size: 19px; }
.mi { text-align: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 600 15px Inter, sans-serif; color: var(--ink); cursor: pointer; }
.mi.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mi .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.menu .sec { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin: 10px 2px 0; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0; }
.seg > * { flex: 1; text-align: center; padding: 9px 0; font: 600 14px Inter, sans-serif; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg .on { background: var(--accent); color: #fff; }
.seg .he { font-family: "Frank Ruhl Libre", serif; font-size: 16px; }
.menu .grow { flex: 1; min-height: 12px; }
.menu .who { font-size: 12.5px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.menu .who .link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
.reader-bar .r-mic.on { background: var(--accent); }
.reader-bar .r-mic[data-state="listening"] { background: var(--orange); color: #fff; border-color: var(--orange); }
.reader-bar .r-mic[data-state="speaking"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.doc-row .del-doc.confirm { background: var(--orange); border-color: var(--orange); }

/* wide screens: conversation as a side column */
@media (min-width: 900px) {
  main.study { flex-direction: row-reverse; }
  .conversation { position: static; transform: none; height: auto; width: 38%; max-width: 460px; box-shadow: none; border-radius: 0; border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; }
  .convo-head #convoClose { display: none; }
}
.menu .lang-toggle { display: flex; margin: 0; border-radius: 999px; } .menu .lang-toggle button { padding: 9px 0; font-size: 14px; }

/* mute (2026-10-15) */
.ctl-row { display: flex; gap: 6px; }
.ctl-row[hidden] { display: none; }
.mute-btn { display: inline-flex; align-items: center; gap: 4px; }
.mute-btn::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3Cpath%20d%3D%22M3%203l18%2018%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3Cpath%20d%3D%22M3%203l18%2018%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat; }
.mute-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mic[data-muted="true"][data-state="listening"] { background: #8a8f99; box-shadow: none; }
.mic[data-muted="true"][data-state="listening"] .level { display: none; }
.mic[data-muted="true"][data-state="listening"] .mic-ico::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3Cpath%20d%3D%22M3%203l18%2018%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3Cpath%20d%3D%22M3%203l18%2018%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.mic-wrap { min-width: 0; }
.mute-btn[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2014a3%203%200%200%200%203-3V5a3%203%200%201%200-6%200v6a3%203%200%200%200%203%203Zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2Z%22/%3E%3C/svg%3E"); }

/* Powered by Sefaria badge (official badge, sefaria.org/static/img) */
.sefaria-badge { display: block; width: max-content; margin: 18px auto 0; line-height: 0; border-radius: 8px; }
.sefaria-badge img { width: 116px; height: auto; display: block; border-radius: 8px; }
.menu .sefaria-badge { margin: 14px 0 8px; }
.menu .sefaria-badge img { width: 104px; }

/* Sefaria badge centered in top bar (2026-10-15) */
header.topbar { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; }
header.topbar h1 { justify-self: start; white-space: nowrap; }
header.topbar .head-right { justify-self: end; display: flex; align-items: center; }
.sefaria-badge.top-badge { margin: 0; border-radius: 6px; }
.sefaria-badge.top-badge img { width: 72px; border-radius: 6px; }
@media (max-width: 400px) { header.topbar h1 .he { display: none; } }

/* email sign-in waiting box */
.code-box .link-btn { background: none; color: var(--accent); text-decoration: underline; padding: 4px; font-weight: 500; }

/* Upload button, left of the Berel strip (Danny 2026-10-16) */
.up-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.up-btn { width: 72px; height: 72px; border-radius: 16px; border: none; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; }
.up-lbl { font: 600 12px Inter, sans-serif; color: #fff; }
.up-btn:active { transform: scale(.95); }
.up-ico { width: 26px; height: 26px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V4M7%209l5-5%205%205M4%2016v3a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-3%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V4M7%209l5-5%205%205M4%2016v3a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-3%22/%3E%3C/svg%3E") center/contain no-repeat; }

/* Berel strip: a bit taller (about 5 lines), scrolls to the newest text (Danny 2026-10-16) */
.said span { display: block; -webkit-line-clamp: unset; max-height: calc(1.4em * 5); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }

/* Listen mode (2026-10-20): heard lines, the Listen pill, and the big button as "Ask Berel" (ear). */
.msg.heard { align-self: stretch; max-width: 100%; background: transparent; border-inline-start: 3px solid var(--accent); border-radius: 0; padding: 4px 10px; color: var(--ink); font-size: 15px; }
.listen-btn { white-space: nowrap; }
.listen-btn[aria-pressed="true"] { background: var(--orange); color: #fff; border-color: var(--orange); }
.mic[data-state="hearing"] { background: var(--accent); box-shadow: 0 0 0 6px rgba(27,79,114,.18); }
.mic[data-state="hearing"] .level { background: var(--accent); }
.mic[data-state="hearing"] .mic-ico::before { content: "👂"; background: none; -webkit-mask: none; mask: none; width: auto; height: auto; }
.code-sub { font: 400 13px/1.4 Inter, sans-serif; color: var(--muted); margin: 6px 0 0; }
.code-btns { display: flex; gap: 8px; justify-content: flex-end; }
.code-btns .ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ===== Home screen + three modes (Danny 2026-10-21) ===== */
header.topbar .head-left { justify-self: start; display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-mode="home"] .home-btn { display: none; }
.up-wrap { display: none !important; }
.mode-bar { flex: none; display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.mode-bar button { flex: 1; min-width: 0; padding: 9px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 600 14px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.mode-bar button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.home { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 14px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.home h2 { margin: 2px 0 0; font: 600 22px Inter, sans-serif; color: var(--ink); }
.home .tile { flex: 1; min-height: 104px; display: flex; align-items: center; gap: 18px; padding: 14px 20px; text-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink); }
.home .tile:active { transform: scale(.98); }
.home .tile b { display: block; font-size: 21px; }
.home .tile small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.big { width: 70px; height: 70px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; }
.b-blue { background: var(--accent); color: #fff; } .b-gold { background: var(--gold, #b5892f); color: #fff; } .b-orange { background: var(--orange); color: #fff; }
.recent p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.recent .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font: 400 13.5px Inter, sans-serif; color: var(--ink); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="home"] .home { display: flex; }
body[data-mode="home"] .mode-bar, body[data-mode="home"] main.study, body[data-mode="home"] .berel-bar { display: none !important; }

.pane { display: none; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; gap: 12px; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
body[data-pane="pick"][data-mode="upload"] #uploadPane, body[data-pane="pick"][data-mode="listen"] #listenPane { display: flex; }
body[data-pane="pick"] #studyArea, body[data-pane="pick"] .berel-bar { display: none !important; }
body[data-pane="pick"]:not(.convo-open) #convo { visibility: hidden; }
.pane-ttl { margin: 6px 0 0; font: 700 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold, #b5892f); }
.pane-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.pane-list { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); font: 600 16px Inter, sans-serif; color: var(--ink); text-align: start; cursor: pointer; width: 100%; }
.opt i, .opt-head i { font-style: normal; font-size: 24px; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #eef3f7; }
.opt small, .opt-head small { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--muted); }
.opt.small { padding: 11px 14px; font-size: 15px; }
.opt.small i { width: 40px; height: 40px; font-size: 19px; }
.opt.small b { font-weight: 600; display: block; }
.opt:active { transform: scale(.98); }
.opt-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.opt-head { display: flex; align-items: center; gap: 14px; font: 600 16px Inter, sans-serif; color: var(--ink); }
.opt-card input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.opt-card .go { font: 600 16px Inter, sans-serif; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }

/* Listen mode while listening: the transcript is the main screen */
body.listening[data-mode="listen"] #studyArea { display: none !important; }
body.listening[data-mode="listen"] #convo { position: static; transform: none; height: auto; flex: 1; min-height: 0; width: auto; max-width: none; box-shadow: none; border-radius: 0; border: 0; visibility: visible; display: flex; flex-direction: column; }
body.listening[data-mode="listen"] #convo .convo-head { display: none; }
body.listening[data-mode="listen"] #convo .transcript { font-size: calc(var(--doc-font, 20px) * .85); }
body.listening[data-mode="listen"] .msg.heard { font-size: inherit; line-height: 1.6; }
@media (max-width: 380px) { .mode-bar button { font-size: 13px; } }
@media (max-width: 460px) { header.topbar h1 .he { display: none; } }
body.listening[data-mode="listen"] #convo .text-form { display: none; }
body.listening[data-mode="listen"] #transcript > .hint { display: none; }

/* Pick up where you left off: a drop-down (Danny 2026-10-21) */
details.recent { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
details.recent summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font: 600 15px Inter, sans-serif; color: var(--ink); cursor: pointer; }
details.recent summary::-webkit-details-marker { display: none; }
details.recent .arrow { font-size: 18px; color: var(--accent); transition: transform .2s; }
details.recent[open] .arrow { transform: rotate(180deg); }
details.recent .chips { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--line); max-height: 40dvh; overflow-y: auto; }
details.recent .chip { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: start; padding: 12px 16px; font-size: 15px; }
details.recent .chip:last-child { border-bottom: 0; }

#muteBtn[aria-pressed="true"] { background: var(--orange); color: #fff; border-color: var(--orange); }
body.listening #ctlRow .end-btn { white-space: nowrap; }

.del-row { display: flex; align-items: stretch; gap: 6px; }
.del-row > .opt { flex: 1; min-width: 0; }
.del-x { flex: none; width: 44px; border: 1px solid var(--line, #ccc); border-radius: 12px; background: transparent; font-size: 18px; cursor: pointer; }
.del-x:disabled { opacity: .4; }
.mute-btn.no-ico::before { display: none; }

/* "Berel is working" banner (2026-10-25): big, centered above the footer, blue, spinner + words */
.busy { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 12px 8px; padding: 12px 16px; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(27,79,114,.25); animation: busyin .2s ease-out; }
.busy[hidden] { display: none !important; }
.busy-txt { display: flex; flex-direction: column; min-width: 0; }
.busy-txt b { font: 700 17px/1.25 Inter, sans-serif; letter-spacing: .01em; }
.busy-txt small { font: 500 13.5px/1.3 Inter, sans-serif; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busy-txt small:empty { display: none; }
.busy-spin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: busyspin .9s linear infinite; }
.busy[data-kind="thinking"] .busy-spin { border: none; width: 34px; height: 10px; background: radial-gradient(circle, #fff 45%, transparent 50%) 0 0/12px 10px repeat-x; animation: busydots 1.2s ease-in-out infinite; }
@keyframes busyspin { to { transform: rotate(360deg); } }
@keyframes busydots { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes busyin { from { opacity: 0; transform: translateY(6px); } }
body[data-mode="home"] .busy, body[data-pane="pick"] .busy { display: none !important; }