:root {
  --bg: #0e1117; --panel: #161a23; --panel-2: #1c2130; --border: #2a3040;
  --text: #e8eaf0; --muted: #9aa3b5; --accent: #4f8cff; --accent-2: #7aa2ff;
  --ok: #3ccf6a; --partial: #f5a623; --error: #ff5c5c; --unknown: #9aa3b5; --chat: #7aa2ff;
  --radius: 12px; --btn-radius: 8px; --on-accent: #fff; --math: #7ef29a; --pen: #ffd166;
  --accent-rgb: 79,140,255; --accent2-rgb: 122,162,255; --tint-rgb: 255,255,255;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  display: flex; flex-direction: column;
}
button, select, input { font: inherit; color: inherit; }
.btn {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--btn-radius);
  padding: 6px 12px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
select, input[type="text"], input[type="password"] {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--btn-radius); padding: 6px 10px;
}
.muted { color: var(--muted); font-size: 0.9em; }
.hidden { display: none !important; }

/* ---- horná lišta ---- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.1em; white-space: nowrap; color: inherit; text-decoration: none; }
.brand:hover { color: var(--accent-2); }
.brand-logo { width: 30px; height: 30px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; flex: none; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.controls select { max-width: 260px; }
.task-search { position: relative; }
.task-search input { width: 190px; padding: 7px 10px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--panel-2); color: inherit; font: inherit; }
.task-search input:focus { outline: none; border-color: var(--accent); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(440px, 92vw); max-height: 65vh; overflow: auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.35); padding: 6px; }
.search-results h4 { margin: 8px 8px 4px; font-size: .78em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.search-results button { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.search-results button:hover, .search-results button.active { background: var(--panel-2); }
.search-results button small { display: block; color: var(--muted); font-size: .82em; margin-top: 1px; }
.search-results mark { background: rgba(var(--accent-rgb), .3); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-results .empty { padding: 10px; color: var(--muted); }
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle.small { font-size: 0.9em; color: var(--muted); }
.ai-light { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border, #444); border-radius: 999px; font-size: .88em; cursor: help; white-space: nowrap; }
.ai-light .ai-dot { font-size: 1.15em; line-height: 1; color: var(--muted); }
.ai-light.ok .ai-dot { color: var(--ok); }
.ai-light.down { border-color: var(--error); }
.ai-light.down .ai-dot { color: var(--error); }
.ai-light.fallback { border-color: #d99a00; }
.ai-light.fallback .ai-dot { color: #d99a00; }
.ai-light.checking .ai-dot { animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .25; } }
.conn { color: var(--error); font-size: 1.2em; }
.conn.on { color: var(--ok); }

/* ---- rozloženie ---- */
.layout {
  flex: 1; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 12px; padding: 12px 16px; min-height: 0;
}
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ---- plátno ---- */
.task-card { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.task-problem { font-weight: 600; }
.task-display {
  font: 600 1.4em/1.3 "Cascadia Mono", Consolas, monospace; color: var(--math); margin: 6px 0; white-space: pre-wrap;
}
.task-meta { color: var(--muted); font-size: 0.85em; }
/* vyfarbovanie a zakrúžkovanie: mriežka s číslami */
.task-grid { margin: 8px 0 4px; --pick: #2fb457; }
.task-grid[data-color="red"] { --pick: #e5484d; } .task-grid[data-color="blue"] { --pick: #3b82f6; }
.task-grid[data-color="orange"] { --pick: #f59e0b; } .task-grid[data-color="yellow"] { --pick: #eab308; } .task-grid[data-color="purple"] { --pick: #8b5cf6; }
.grid-board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.grid-row { display: flex; gap: 6px; flex-wrap: wrap; }
.grid-cell {
  min-width: 48px; min-height: 48px; padding: 4px 8px; font: 700 1.15em/1 "Segoe UI", system-ui, sans-serif; color: inherit; cursor: pointer;
  background: var(--panel-2); border: 2px solid var(--border); border-radius: 12px; transition: transform .08s, background .12s;
}
.grid-cell:hover { transform: scale(1.06); }
.grid-cell.picked { background: var(--pick); border-color: var(--pick); color: #fff; }
.task-grid[data-mode="circle"] .grid-cell.picked { background: transparent; color: inherit; border: 4px solid var(--pick); border-radius: 50%; min-width: 56px; min-height: 56px; }
.grid-cell:disabled { cursor: default; transform: none; opacity: .85; }
.task-grid.solved .grid-check { display: none; }
.grid-check { font-size: 1em; padding: 8px 16px; }
/* grafika v rozhovore: obrázok z emoji a mriežka pod úvodnou správou učiteľa */
.bubble .task-visual { margin-top: 10px; white-space: normal; }
.task-figure { display: block; width: 100%; max-width: 360px; height: auto; margin: 6px 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
.task-figure .fig-shape { fill: rgba(var(--accent-rgb), .10); stroke: var(--text); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.task-figure line.fig-shape, .task-figure path.fig-shape { fill: none; }
.task-figure .fig-aux { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.task-figure .fig-mark { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.task-figure .fig-graph { fill: rgba(var(--accent-rgb), .12); stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.task-figure line.fig-graph { fill: none; }
.task-figure .fig-grid { stroke: var(--border); stroke-width: .8; }
.task-figure .fig-axis { stroke: var(--muted); stroke-width: 1.4; }
.task-figure .dashed { stroke-dasharray: 5 4; }
.task-figure .fig-dot { fill: var(--text); stroke: none; }
.task-figure text { font: 600 12px system-ui, sans-serif; paint-order: stroke; stroke: var(--panel-2); stroke-width: 3px; stroke-linejoin: round; }
.task-figure .fig-t-len { fill: var(--text); }
.task-figure .fig-t-unk { fill: var(--partial); }
.task-figure .fig-t-vert { fill: var(--accent-2); font-size: 13px; font-weight: 700; }
.task-figure .fig-t-ang { fill: var(--muted); font-size: 11px; }
.task-figure .fig-t-axis { fill: var(--muted); font-size: 10px; font-weight: 500; }
.task-picture { font-size: 2em; line-height: 1.25; letter-spacing: 3px; word-break: break-all; margin-bottom: 8px; white-space: pre-line; }
.bubble .task-grid { margin: 4px 0 0; }
.msg-row.pinned.has-visual { max-height: 72vh; }
.canvas-tools {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.tools-title { font-weight: 600; margin-right: 6px; }
.tool { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.tool.active { border-color: var(--accent); background: rgba(var(--accent-rgb),.15); }
.canvas-wrap { display: flex; flex-direction: column; flex: 1; min-height: 220px; overflow: hidden; }
.lines { list-style: none; margin: 0; padding: 12px 16px 4px; flex: 0 1 auto; min-height: 0; max-height: 48%; overflow-y: auto; }
.line {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 10px; margin-bottom: 6px; border-radius: 8px;
  border-left: 4px solid var(--unknown); background: rgba(var(--tint-rgb),.03);
  font: 1.1em "Cascadia Mono", Consolas, monospace; transition: background .25s, box-shadow .25s;
}
.line .n { color: var(--muted); font-size: 0.85em; }
.line .msg { color: var(--muted); font: 0.8em/1.3 "Segoe UI", system-ui, sans-serif; grid-column: 2 / 4; }
.line.ok { border-left-color: var(--ok); }
.line.partial { border-left-color: var(--partial); }
.line.error { border-left-color: var(--error); }
.line.unknown { border-left-color: var(--unknown); }
.line.active {
  background: rgba(var(--accent-rgb),.18); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb),.45);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--accent-2), 0 0 26px rgba(var(--accent2-rgb),.6); } }
.legend { padding: 6px 12px; color: var(--muted); font-size: 0.8em; border-top: 1px solid var(--border); }

/* ---- rozhovor ---- */
.transcript { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-row { display: flex; gap: 10px; align-items: flex-start; }
/* úvodná správa so zadaním: pripnutá navrchu rozhovoru, zvyšok sa posúva pod ňou */
.msg-row.pinned {
  position: sticky; top: -12px; z-index: 3; margin: -12px -16px 0; padding: 12px 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--border); max-height: 12em; overflow-y: auto; flex-shrink: 0;
}
.bubble {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; max-width: 90%; white-space: pre-wrap;
}
.msg-row.student .bubble { background: rgba(var(--accent-rgb),.12); }
.msg-row.teacher .bubble.speaking { border-color: var(--accent); }
.bubble .src { color: var(--muted); font-size: 0.75em; }
/* katalóg mikrolekcií */
#microCatalog { max-width: 620px; width: min(620px, 94vw); }
.micro-catalog { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.micro-catalog details { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.micro-catalog summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.micro-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; gap: 1px; padding: 8px 10px; margin-top: 4px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: inherit; cursor: pointer; font: inherit; }
.micro-item:hover, .micro-item:focus-visible { border-color: var(--accent); }
.micro-item small { color: var(--muted); }
/* rodina: výber profilu a rodičovská správa */
#familyDialog { max-width: 560px; width: min(560px, 94vw); }
#familyBody h4 { margin: 14px 0 6px; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.kid-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--border);
  background: var(--panel-2); color: inherit; cursor: pointer; font: inherit; }
.kid-card:hover, .kid-card.active { border-color: var(--accent); }
.kid-card small { color: var(--muted); }
.fam-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fam-form input, .fam-form select { flex: 1 1 140px; min-width: 0; }
.fam-form.col { flex-direction: column; }
.fam-form.col input, .fam-form.col select, .fam-form.col .btn { flex: 0 0 auto; }
.fam-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fam-kids { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fam-kid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fam-kid-actions { margin-left: auto; display: flex; gap: 6px; }
.fam-kid .fam-form { flex-basis: 100%; margin-top: 2px; }
.fam-code { font-size: 1.3em; letter-spacing: .12em; }
.fam-warn { flex-basis: 100%; font-size: .9em; line-height: 1.45; }
#loginDialog details { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
#loginDialog details[open] { display: flex; flex-direction: column; gap: 10px; }
#loginDialog summary { cursor: pointer; font-weight: 600; }
.legacy-actions { display: flex; gap: 8px; justify-content: flex-end; }
.google-btn { min-height: 44px; display: flex; justify-content: center; }
/* písomné počítanie pod seba (dialóg 🧮) */
#columnDialog { max-width: 520px; width: min(520px, 94vw); }
.col-tabs { display: flex; gap: 6px; }
.col-pane { display: flex; flex-direction: column; gap: 10px; }
.col-pane[hidden] { display: none; }
.col-inputs { display: flex; gap: 6px; flex-wrap: wrap; }
.col-inputs input { flex: 1 1 120px; min-width: 0; }
.col-preview { margin: 0; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  font: 1.3em/1.4 ui-monospace, Consolas, "Courier New", monospace; white-space: pre; overflow-x: auto; min-height: 3.2em; }
.col-preview .pad { opacity: .35; }
.col-preview .res { color: var(--accent); }
.frac-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 1.2em; }
.frac { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.frac input { width: 64px; text-align: center; }
.frac .bar { display: block; height: 3px; width: 100%; background: var(--text); border-radius: 2px; }
#colError { min-height: 1.3em; color: var(--error); }
.bubble .suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }   /* ponuka úloh po privítaní */
.bubble .suggest .chip-btn { text-align: left; max-width: 100%; }
.bubble .suggest .chip-btn small { display: block; color: var(--muted); font-size: 0.78em; }
.bubble .seg.active { background: rgba(var(--accent-rgb),.25); border-radius: 4px; }
.micro {
  margin: 0 16px 8px; padding: 10px 12px; border-radius: var(--radius);
  background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.5);
}
.micro h4 { margin: 0 0 4px; }
.micro .prereq { color: var(--muted); font-size: 0.8em; margin-top: 6px; }
.micro .body { font-size: 0.92em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.micro .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.composer input { flex: 1; }
.mic { background: var(--panel-2); border: 1px solid var(--border); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; }
.mic.listening { border-color: var(--error); box-shadow: 0 0 0 4px rgba(255,92,92,.25); animation: pulse-red 1s infinite; }
@keyframes pulse-red { 50% { box-shadow: 0 0 0 8px rgba(255,92,92,.1); } }
.send { padding: 0 14px; }
.hint { padding: 4px 16px 10px; color: var(--muted); font-size: 0.85em; min-height: 1.4em; }

/* ---- Fáza 2: OCR a mikrolekcie ---- */
.spacer { flex: 1; }
.btn.small { padding: 2px 8px; font-size: 0.85em; }
.mic.small { width: 34px; height: 34px; }
/* orezanie fotky pred rozpoznaním */
#cropDialog { max-width: min(720px, 96vw); width: min(720px, 96vw); }
.crop-stage { display: flex; justify-content: center; background: #111; border-radius: 8px; overflow: hidden; }
#cropPhotoCanvas { display: block; max-width: 100%; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.crop-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 860px) { #cropDialog h3 { margin: 0; } #cropInfo { font-size: 13px; margin: 0; } }
.ocr-preview { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--border); background: #fff; object-fit: contain; }
.ocr-lines { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.ocr-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.ocr-line .ocr-text { font-family: "Cascadia Mono", Consolas, monospace; }
.bad { color: var(--error); }
.offer {
  margin: 0 16px 8px; padding: 10px 12px; border-radius: var(--radius);
  background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.6);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
#microDialog, #ocrDialog, #taskDialog { max-width: min(680px, 94vw); width: min(680px, 94vw); }
.micro-dialog { min-width: 0; }
.micro-head { display: flex; justify-content: space-between; align-items: center; }
.micro-head h3 { margin: 0; }
.timer { font: 600 1.1em "Cascadia Mono", Consolas, monospace; color: var(--partial); }
.micro-text { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; line-height: 1.55; max-height: 40vh; overflow-y: auto; }
.micro-text p { margin: 0 0 10px; }
.micro-text p:last-child { margin-bottom: 0; }
.micro-tools { display: flex; align-items: center; gap: 10px; }
.micro-hint { margin: 0; font-size: 0.85em; }
.micro-progress { display: flex; align-items: center; gap: 6px; }
.micro-progress .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); display: inline-block; }
.micro-progress .dot.done { background: var(--ok); }
.micro-progress .dot.now { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3); }
.micro-exercise { border-top: 1px solid var(--border); padding-top: 10px; }
.micro-prompt { font-weight: 600; margin-bottom: 8px; }
#microForm { display: flex; gap: 8px; align-items: center; }
#microForm input[type=text] { flex: 1; }
.micro-feedback { min-height: 1.4em; margin-top: 8px; }
.micro-feedback.ok { color: var(--ok); }
.micro-feedback.bad { color: var(--error); }
.micro-feedback.reveal { color: var(--partial); }

/* ---- Fáza 4: profil, pokrok, prémium ---- */
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.chip.logged { border-color: var(--accent); }
.toasts { position: fixed; right: 16px; top: 64px; display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none; }
.toast { background: var(--panel-2); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; opacity: 0; transform: translateX(20px); transition: all .3s; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.toast.show { opacity: 1; transform: none; }
.toast.badge { border-color: var(--partial); }
#profileDialog { max-width: min(860px, 96vw); width: min(860px, 96vw); }
.profile-body { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.profile-body h4 { margin: 10px 0 4px; }
.profile-body h5 { margin: 6px 0 4px; color: var(--muted); }
.profile-body ul { margin: 0; padding-left: 18px; }
.compact li { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.stat small { color: var(--muted); }
.stat code { font-size: 0.85em; }
.lvl { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.lvl div { height: 100%; background: var(--accent); }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 90px; align-items: end; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; align-items: center; gap: 2px; }
.bar div { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar span { font-size: 0.65em; color: var(--muted); }
.kg-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.kg-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.kg-node { border-radius: 999px; padding: 3px 10px; font-size: 0.85em; border: 1px solid var(--border); background: var(--panel-2); cursor: default; }
.kg-node.mastered { border-color: var(--ok); background: rgba(60,207,106,.15); }
.kg-node.learning { border-color: var(--partial); background: rgba(245,166,35,.15); }
.kg-node.weak { border-color: var(--error); background: rgba(255,92,92,.18); }
.kg-node.unknown { opacity: .6; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.badge { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; opacity: .4; display: flex; flex-direction: column; gap: 4px; }
.badge span { font-size: 1.6em; }
.badge small { font-size: 0.75em; }
.badge.earned { opacity: 1; border-color: var(--partial); }

/* ---- dialóg ---- */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); max-width: 440px; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form label { display: flex; flex-direction: column; gap: 4px; }
.settings-form label.toggle { flex-direction: row; align-items: center; }
.settings-form .consent, .fam-form .consent { align-items: flex-start; font-size: .86em; line-height: 1.35; cursor: pointer; }
.settings-form .consent input, .fam-form .consent input { margin-top: 3px; flex: none; }
.settings-form .legal { font-size: .8em; margin-top: 6px; }
.settings-form .legal a, .consent a { color: inherit; text-decoration: underline; }
.settings-form menu { display: flex; gap: 8px; justify-content: flex-end; margin: 0; padding: 0; }

/* ---- vlastný príklad (fotka / ručný zápis) ---- */
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.task-actions .btn { cursor: pointer; }
.task-candidates { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow: auto; }
.task-cand { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.task-cand.picked { border-color: var(--accent); }
.task-cand input[type=text] { width: 100%; box-sizing: border-box; }
.task-cand .cand-math { font-family: "Cascadia Mono", Consolas, monospace; }
.task-cand-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand-badge { font-size: 0.85em; }
.cand-badge.ok { color: #1a9d4c; }
.cand-badge.bad { color: #d4551d; }
.cand-retry { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); }
.task-cand .task-cand-head { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.task-cand .task-cand-head input[type=radio] { width: auto; margin: 0; }

/* ---- ročník a zoznam tém ---- */
.grade-notice { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--partial); background: var(--panel-2); border-radius: 6px; }
.grade-group { display: flex; flex-direction: column; gap: 6px; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { min-width: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: inherit; cursor: pointer; font: inherit; }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-btn.suggested { border-color: var(--partial); box-shadow: 0 0 0 2px rgba(245,166,35,.35); }
#gradeDialog { max-width: min(560px, 94vw); width: min(560px, 94vw); }
.toast.info { border-color: var(--border); max-width: 340px; }
.kg-node.above { opacity: 0.5; border-style: dashed; }

[hidden] { display: none !important; }

/* ---- vzhľad: avatary a výber učiteľa ---- */
.av {
  --s: 40px;
  flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  font-size: calc(var(--s) * 0.58); line-height: 1; overflow: hidden; user-select: none;
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb),.14) inset;
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.xs { --s: 22px; vertical-align: middle; margin-right: 6px; }
.av.sm { --s: 30px; margin-top: 2px; }
.av.md { --s: 44px; }
.av.lg { --s: 72px; }

.teacher-strip {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; cursor: pointer; text-align: left;
  background: var(--panel-2); color: inherit; font: inherit; border: 0; border-bottom: 1px solid var(--border);
}
.teacher-strip:hover .teacher-change { color: var(--accent-2); }
.teacher-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.teacher-text .muted { font-size: 0.85em; }
.teacher-change { font-size: 0.8em; }
.teacher-strip.speaking .av { animation: av-talk 0.7s ease-in-out infinite; box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(var(--accent-rgb),.55); }
@keyframes av-talk { 50% { transform: scale(1.09) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .teacher-strip.speaking .av { animation: none; } }

.look-form { max-width: 640px; }
.look-form h4 { margin: 14px 0 6px; }
.look-preview { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px; background: var(--panel-2); border-radius: var(--radius); }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.look-grid.teachers { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.look-tile {
  display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: var(--radius);
  background: transparent; border: 2px solid var(--border); color: inherit; font: inherit; cursor: pointer;
}
.look-tile:hover { border-color: var(--accent-2); }
.look-tile[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb),.16); }
.look-tile.wide { justify-content: flex-start; text-align: left; }
.teacher-tile-inner { display: flex; align-items: center; gap: 10px; }
.teacher-tile-text { display: flex; flex-direction: column; line-height: 1.25; }
.teacher-tile-text small { color: var(--muted); }
.look-photo { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.look-crop { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 10px 0; padding: 10px; background: var(--panel-2); border-radius: var(--radius); }
.look-crop canvas { width: 220px; height: 220px; max-width: 100%; border-radius: 50%; touch-action: none; cursor: grab; background: #000; }
.look-crop canvas:active { cursor: grabbing; }
.crop-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.crop-side label { display: flex; flex-direction: column; gap: 4px; }
#lookDialog { max-width: min(680px, 94vw); width: 680px; }

.av.sym { font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-weight: 700; font-size: calc(var(--s) * 0.56); }
.look-styles { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.look-style {
  padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border);
  color: inherit; font: inherit; cursor: pointer;
}
.look-style:hover { border-color: var(--accent-2); }
.look-style[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==== štýly rozhrania podľa veku: <html data-ui="vesele | hry | seriozne"> ====
   vesele   - 1.–4. ročník: svetlé, farebné, veľké a zaoblené, štvorčekový zošit, bez technických volieb
   hry      - 5.–9. ročník: tmavé, sýte farby, žiara a prechody
   seriozne - SŠ: tlmená grafitová, tenké línie, menšie písmo, matematika v serife
   Bez atribútu platí základný tmavý vzhľad (ako „hry", len pokojnejší). */
:root { color-scheme: dark; }

/* ---------- veselé ---------- */
:root[data-ui="vesele"] {
  color-scheme: light;
  --bg: #fff6e5; --panel: #ffffff; --panel-2: #fff1d8; --border: #f0d6a4;
  --text: #2b2d42; --muted: #6a6d82; --accent: #5b6cff; --accent-2: #ff7a2f;
  --ok: #17a34a; --partial: #f59e0b; --error: #e5484d; --unknown: #9a9db0; --chat: #5b6cff;
  --radius: 22px; --btn-radius: 16px; --math: #16783a; --pen: #e5484d;
  --accent-rgb: 91,108,255; --accent2-rgb: 255,122,47; --tint-rgb: 0,0,0;
}
:root[data-ui="vesele"] body { font-family: "Trebuchet MS", "Segoe UI Rounded", "Segoe UI", system-ui, sans-serif; font-size: 18px; }
:root[data-ui="vesele"] #providerSelect, :root[data-ui="vesele"] #modelSelect { display: none; }
:root[data-ui="vesele"] .brand { color: var(--accent); }
:root[data-ui="vesele"] .topbar { border-bottom: 3px solid var(--border); }
:root[data-ui="vesele"] .btn { border-width: 2px; padding: 9px 16px; font-weight: 600; }
:root[data-ui="vesele"] .btn.small { padding: 6px 12px; font-size: 0.9em; }
:root[data-ui="vesele"] .btn.primary { box-shadow: 0 3px 0 rgba(0,0,0,.18); }
:root[data-ui="vesele"] select, :root[data-ui="vesele"] input[type="text"], :root[data-ui="vesele"] input[type="password"] { border-width: 2px; padding: 8px 12px; }
:root[data-ui="vesele"] .panel { border-width: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.06); }
:root[data-ui="vesele"] .task-problem { font-size: 1.15em; }
:root[data-ui="vesele"] .task-display { font-size: 2em; }
:root[data-ui="vesele"] .pad {
  background:
    linear-gradient(rgba(var(--accent-rgb),.16) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(var(--accent-rgb),.16) 1px, transparent 1px) 0 0/28px 28px;
}
:root[data-ui="vesele"] .line { padding: 10px 14px; border-left-width: 8px; font-size: 1.3em; background: rgba(255,255,255,.85); }
:root[data-ui="vesele"] .line .msg { font-size: 0.8em; }
:root[data-ui="vesele"] .bubble { padding: 12px 16px; font-size: 1.05em; border-width: 2px; }
:root[data-ui="vesele"] .msg-row.student .bubble { background: rgba(var(--accent-rgb),.12); }
:root[data-ui="vesele"] .msg-row.teacher .bubble { background: #fff7e8; }
:root[data-ui="vesele"] .av.sm { --s: 42px; }
:root[data-ui="vesele"] .teacher-strip .av { --s: 58px; }
:root[data-ui="vesele"] .teacher-strip { padding: 10px 16px; }
:root[data-ui="vesele"] .mic { width: 58px; height: 58px; font-size: 1.4em; border-width: 2px; }
:root[data-ui="vesele"] .composer input { padding: 12px 18px; border-radius: 999px; }
:root[data-ui="vesele"] .send { padding: 0 22px; }
:root[data-ui="vesele"] .legend, :root[data-ui="vesele"] .hint { font-size: 0.95em; }
:root[data-ui="vesele"] .chip { border-width: 2px; }
:root[data-ui="vesele"] .toast { color: var(--text); }
:root[data-ui="vesele"] .kg-node { font-size: 0.95em; }

/* ---------- šport a hry ---------- */
:root[data-ui="hry"] {
  --bg: #0a0d17; --panel: #121729; --panel-2: #1a2140; --border: #2b3566;
  --accent: #7c5cff; --accent-2: #22d3ee; --accent-rgb: 124,92,255; --accent2-rgb: 34,211,238;
  --math: #5cf2c4; --pen: #22d3ee; --radius: 16px; --btn-radius: 12px;
}
:root[data-ui="hry"] .topbar { background: linear-gradient(90deg, var(--panel), var(--panel-2)); }
:root[data-ui="hry"] .brand { background: linear-gradient(90deg, #a78bfa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-ui="hry"] .btn.primary, :root[data-ui="hry"] .look-style[aria-pressed="true"] { background: linear-gradient(135deg, #7c5cff, #22b8f0); border-color: transparent; }
:root[data-ui="hry"] .btn:hover { box-shadow: 0 0 12px rgba(var(--accent-rgb),.45); }
:root[data-ui="hry"] .panel { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.12), 0 8px 28px rgba(0,0,0,.35); }
:root[data-ui="hry"] .task-display { text-shadow: 0 0 14px rgba(92,242,196,.35); }
:root[data-ui="hry"] .msg-row.student .bubble { background: linear-gradient(135deg, rgba(var(--accent-rgb),.28), rgba(var(--accent2-rgb),.12)); border-color: rgba(var(--accent-rgb),.5); }
:root[data-ui="hry"] .chip.logged { box-shadow: 0 0 10px rgba(var(--accent-rgb),.5); }
:root[data-ui="hry"] .lvl div, :root[data-ui="hry"] .bar div { background: linear-gradient(90deg, #7c5cff, #22d3ee); }
:root[data-ui="hry"] .pad {
  background: radial-gradient(rgba(var(--accent2-rgb),.16) 1px, transparent 1.5px) 0 0/24px 24px;
}

/* ---------- seriózne ---------- */
:root[data-ui="seriozne"] {
  --bg: #0f1115; --panel: #16181d; --panel-2: #1c1f26; --border: #2b2f38;
  --text: #e6e8ec; --muted: #8b93a3; --accent: #4a6fa5; --accent-2: #8aa4d0;
  --ok: #4aa66a; --partial: #c99a3b; --error: #d9534f; --unknown: #8b93a3; --chat: #8aa4d0;
  --radius: 6px; --btn-radius: 4px; --math: #e6e8ec; --pen: #c9d1e0;
  --accent-rgb: 74,111,165; --accent2-rgb: 138,164,208;
}
:root[data-ui="seriozne"] body { font-size: 15px; }
:root[data-ui="seriozne"] .brand { font-weight: 600; letter-spacing: 0.02em; }
:root[data-ui="seriozne"] .panel { box-shadow: none; }
:root[data-ui="seriozne"] .task-display { font-family: "Cambria Math", "STIX Two Math", Cambria, "Times New Roman", serif; font-weight: 500; font-size: 1.6em; letter-spacing: 0.02em; padding-left: 12px; border-left: 3px solid var(--accent); }
:root[data-ui="seriozne"] .line { font-size: 1.05em; }
:root[data-ui="seriozne"] .line.active { animation: none; box-shadow: 0 0 0 1px var(--accent); }
:root[data-ui="seriozne"] .msg-row.student .bubble { background: rgba(var(--accent-rgb),.16); }
:root[data-ui="seriozne"] .bubble { padding: 7px 11px; }
:root[data-ui="seriozne"] .teacher-strip.speaking .av { animation: none; }
:root[data-ui="seriozne"] .legend, :root[data-ui="seriozne"] .hint { font-size: 0.8em; }
:root[data-ui="seriozne"] .toast { box-shadow: none; }

/* pevná farba písma na tlačidlách s farebným pozadím */
.btn.primary, .look-style[aria-pressed="true"], .chip-btn.active { color: var(--on-accent); }

/* značka: Formiax a pod ním motto */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-weight: 800; letter-spacing: 0.02em; }
.brand .motto { font-size: 0.58em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); -webkit-text-fill-color: currentColor; }
@media (max-width: 420px) { .brand .motto { display: none; } }

/* vlastný príklad: textové pole zadania a príznaky čítania fotky */
.task-cand textarea.cand-statement { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2, transparent); color: inherit; }
.cand-flags { font-size: 0.88em; color: #1a9d4c; }
.cand-flags:empty { display: none; }
.cand-flags.warn { color: #c2410c; font-weight: 600; }
.cand-badge.pending { color: var(--muted); }
.task-candidates { max-height: 360px; }

/* ==== písacia plocha (rukopis): samostatná plocha pod krokmi, nie priehľadná vrstva cez ne ==== */
.canvas-panel { overflow-y: auto; }
.pad {
  position: relative; flex: 1 1 200px; min-height: 140px; margin: 8px 12px 12px; overflow: hidden; touch-action: none;
  border: 2px dashed var(--border); border-radius: 12px;
  background: linear-gradient(transparent 31px, rgba(var(--tint-rgb),.07) 32px) 0 0/100% 32px;
}
#drawing { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pad-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; color: var(--muted); pointer-events: none; font-size: .92em; line-height: 1.5; }
.pad:not(.empty) .pad-hint { display: none; }
.tool:hover { border-color: var(--border); }
.hide-sm { display: inline; }
@media (max-width: 480px) { .hide-sm { display: none; } }

/* ==== kompaktná horná lišta (do 1100 px): výber úlohy a nastavenia sú v rozbaľovacom menu ☰ ==== */
.menu-btn, .task-more, .mobile-tabs { display: none; }
@media (max-width: 1100px) {
  .topbar { position: relative; flex-wrap: nowrap; gap: 8px; padding: 6px 10px; }
  .brand-text { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; justify-content: flex-start; padding: 6px 12px; }
  .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .controls {
    display: none; position: absolute; z-index: 70; top: calc(100% + 4px); left: 8px; right: 8px; flex: none;
    max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain;
    gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.35);
  }
  body.menu-open .controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controls > * { grid-column: 1 / -1; }
  .controls > #restartBtn, .controls > #lookBtn, .controls > #settingsBtn { grid-column: auto; padding: 8px 2px; font-size: .82em; text-align: center; white-space: nowrap; }
  .controls select, .controls .task-search input { width: 100%; max-width: none; }
  .controls .toggle::after { content: "Čítať odpovede nahlas"; }
  #restartBtn::after { content: " Odznova"; } #lookBtn::after { content: " Vzhľad"; } #settingsBtn::after { content: " Nastavenia"; }
  .search-results { position: static; width: 100%; max-height: 38vh; box-shadow: none; margin-top: 6px; }
  #userChip { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; flex: none; }
  .ai-light .ai-text { display: none; }
  .ai-light { padding: 3px 7px; }
  .toasts { left: 8px; right: 8px; top: 60px; align-items: flex-end; }
  .toast.info { max-width: none; }
}
@media (max-width: 700px) { .chip-more { display: none; } #userChip b { display: inline-block; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } }

/* ==== mobil a malé obrazovky (do 860 px): spoločné zhutnenie ==== */
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; }
  :root[data-ui] .menu-btn { padding: 6px 12px; }
  .panel { overflow-y: auto; }                                 /* nič sa neorezáva: keď sa obsah nezmestí, panel sa dá posunúť */
  .task-card { padding: 8px 12px; }
  .task-meta { display: none; }
  :root[data-ui] .task-problem { font-size: .92em; line-height: 1.35; }
  :root[data-ui] .task-display { font-size: 1.2em; margin: 2px 0; }
  :root[data-ui] .task-more { display: inline-flex; margin-top: 4px; padding: 3px 10px; font-size: .8em; }
  .task-actions { display: none; margin-top: 8px; }
  .task-card.more .task-actions { display: flex; }
  .canvas-tools { gap: 3px; padding: 4px 6px; flex-wrap: wrap; }
  .tools-title { display: none; }
  .canvas-tools .tool { min-width: 36px; min-height: 36px; padding: 2px 4px; font-size: 1.15em; }
  :root[data-ui] .canvas-tools .btn.small { padding: 4px 8px; font-size: .85em; white-space: nowrap; }
  .pad { margin: 8px; min-height: 110px; }
  .legend { display: none; }
  .teacher-change, .teacher-text .muted { display: none; }
  :root[data-ui] .teacher-strip { padding: 4px 10px; }
  :root[data-ui] .teacher-strip .av { --s: 34px; }
  .micro { margin: 0; padding: 6px 10px; }
  .micro h4 { margin: 0; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .micro .body, .micro .prereq { display: none; }
  .micro .actions { margin-top: 6px; flex-wrap: nowrap; }
  :root[data-ui] .micro .actions .btn { flex: 1 1 auto; min-height: 38px; padding: 4px 8px; font-size: .85em; white-space: nowrap; }
  .composer { gap: 6px; padding: 6px; }
  :root[data-ui] .composer .mic { width: 44px; height: 44px; font-size: 1.1em; }
  :root[data-ui] .composer input { min-width: 0; padding: 10px 14px; }
  :root[data-ui] .send { min-width: 44px; min-height: 44px; padding: 0 12px; }
  .hint { padding: 0 6px 2px; min-height: 0; line-height: 1.3; }
  :root[data-ui] .hint { font-size: .8em; }
  .conn.on { display: none; }
  dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
  #microDialog { padding: 12px; }
  #microDialog .settings-form { gap: 8px; }
  .micro-head h3 { font-size: 1em; }
  .micro-text { max-height: 26vh; padding: 8px 10px; }
}

/* ==== mobil: dve záložky – Rozhovor (učiteľ + písací riadok) a Plátno (rukopis); platí na výšku aj na šírku ==== */
@media (max-width: 860px) {
  body { height: 100vh; height: 100dvh; }
  .layout { display: flex; flex-direction: column; overflow: hidden; padding: 8px 8px 0; }
  .canvas-panel, .chat-panel { display: contents; }
  .task-card { order: 1; flex: none; max-height: 34%; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
  .teacher-strip { order: 2; flex: none; width: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .transcript { order: 3; flex: 1 1 0; min-height: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
  .msg-row.pinned { position: static; margin: 0; padding: 0; max-height: none; border: 0; background: none; }
  #microLesson { order: 4; flex: none; }
  .composer { order: 5; flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
  .canvas-tools { order: 3; flex: none; border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
  .canvas-wrap { order: 4; flex: 1 1 0; min-height: 0; background: var(--panel); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .hint { order: 6; flex: none; }
  .mobile-tabs {
    display: flex; order: 9; flex: none; gap: 6px; margin: 0 -8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); border-top: 1px solid var(--border);
  }
  .mtab { position: relative; flex: 1; min-height: 46px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--panel-2); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
  .mtab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .mtab.unread::after { content: ""; position: absolute; top: 7px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px var(--panel-2); }
  .layout[data-view="chat"] :is(.canvas-tools, .canvas-wrap) { display: none; }
  .layout[data-view="canvas"] :is(.teacher-strip, .transcript, #microLesson, .composer) { display: none; }
  .layout[data-view="canvas"] .task-more, .layout[data-view="canvas"] .task-actions { display: none; }      /* na písanie treba miesto: karta úlohy sa skráti */
  .layout[data-view="canvas"] .task-problem { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.typing .mobile-tabs, body.typing .teacher-strip { display: none; }      /* pri písaní na klávesnici ostane viac miesta */
}

/* ==== nízke okno (telefón na šírku, otvorená klávesnica): rozloženie ostáva, všetko sa len zhustí ==== */
@media (max-width: 860px) and (max-height: 560px) {
  .topbar { padding: 3px 10px; }
  .layout { gap: 6px; padding: 6px 6px 0; }
  .task-card { max-height: 28%; padding: 6px 10px; }
  .task-problem { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  :root[data-ui] .task-display { font-size: 1.1em; }
  #microLesson, .teacher-strip { display: none !important; }
  .layout[data-view="chat"] .task-card { display: none; }                       /* zadanie je v prvej správe rozhovoru */
  .layout[data-view="canvas"] .task-problem, .layout[data-view="canvas"] .hint { display: none; }   /* na plátne ostane len zápis úlohy */
  .mobile-tabs { margin: 0 -6px; padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
  .mtab { min-height: 36px; }
  .hide-sm { display: none; }
  .pad { margin: 6px 8px 8px; min-height: 90px; }
}

/* ---- spätná väzba (beta) ---- */
.feedback-form textarea, .feedback-form input[type="email"] { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); resize: vertical; }
.feedback-form .score-wrap { display: flex; flex-direction: column; gap: 6px; }
.feedback-form .score { display: flex; flex-wrap: wrap; gap: 4px; }
.feedback-form .score-btn { min-width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.feedback-form .score-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.feedback-form .small { font-size: .8em; margin: 0; }
.feedback-form label small { font-weight: normal; }