/* Kurs mówionego angielskiego — paleta Solarized Light. */

* { box-sizing: border-box; }

:root {
  /* Solarized */
  --base3:  #fdf6e3;  /* tło */
  --base2:  #eee8d5;  /* tło wyróżnione */
  --base1:  #93a1a1;
  --base0:  #839496;
  --base00: #657b83;  /* tekst */
  --base01: #586e75;  /* tekst wyróżniony */
  --yellow: #b58900;
  --orange: #cb4b16;
  --red:    #dc322f;
  --blue:   #268bd2;
  --cyan:   #2aa198;
  --green:  #859900;

  --bg: var(--base3);
  --panel: var(--base2);
  --panel-2: var(--base3);
  --text: var(--base00);
  --muted: var(--base1);
  --accent: var(--blue);
  --good: var(--green);
  --ok: var(--yellow);
  --bad: var(--red);
  --border: #ded5bd;
  --coach: var(--base2);
  --user: rgba(38, 139, 210, 0.10);
}

/* --- Pasek odtwarzacza: jeden wspólny player + status nagrywania, zawsze
   widoczny u góry (position: fixed), żeby nigdy nie zgubić się co do tego,
   czy coś gra albo czy trwa nagrywanie. --- */
.player-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  background: var(--base01); color: var(--base3);
  padding: 7px 14px; font-size: 13px; min-height: 44px;
  box-shadow: 0 2px 8px rgba(0, 43, 54, 0.2);
}
.player-toggle {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  background: var(--base3); color: var(--base01); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.player-toggle:disabled { opacity: 0.35; cursor: default; }
.player-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; opacity: 0.9;
}
.player-rec { display: flex; align-items: center; gap: 6px; flex: none; }
.player-rec-label { white-space: nowrap; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.rec-dot.off { background: rgba(253, 246, 227, 0.3); }
.rec-dot.on   { background: var(--red);    animation: pulse 1.2s ease-in-out infinite; }
.rec-dot.busy { background: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }

/* Mobile first: jedna kolumna, ale treść (main) NAD sidebarem (menu, statystyki) —
   sidebar na mobile ląduje na dole, żeby ćwiczenie było widoczne od razu bez
   przewijania. Od 860px — dwie kolumny obok siebie, sidebar z powrotem po lewej
   (kolejność wizualna resetowana, żeby grid auto-flow trzymał się kolejności w DOM). */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 Georgia, "Times New Roman", serif;
  overflow-x: hidden;
  padding-top: 44px;   /* miejsce na position:fixed .player-bar */
  display: flex;
  flex-direction: column;
}
main { order: 1; }
.sidebar { order: 2; }
@media (min-width: 860px) {
  body { display: grid; grid-template-columns: 300px 1fr; overflow-x: visible; }
  main, .sidebar { order: 0; }
}

h1, h2, h3 { font-weight: 600; letter-spacing: 0.02em; color: var(--base01); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; }

/* --- Sidebar / dashboard --- */

.sidebar {
  background: var(--panel);
  padding: 14px 20px;
  border-top: 1px solid var(--border);   /* na mobile sidebar jest na dole, pod main */
}
@media (min-width: 860px) {
  .sidebar { padding: 24px 20px; border-right: 1px solid var(--border); border-top: 0; }
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; flex-wrap: wrap; }
.sidebar h1 { margin: 0; font-size: 22px; }
.sidebar h1 a { color: var(--orange); text-decoration: none; }
.sidebar h1 a:hover { text-decoration: underline; }
.sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
              color: var(--muted); margin: 28px 0 10px; }

/* Reszta panelu (statystyki, mapa wiedzy, słowa) zwinięta domyślnie na mobile —
   odsłania się stukiem, żeby nie zasłaniać ćwiczenia. Na desktopie zawsze otwarta. */
.sidebar-details summary {
  cursor: pointer; list-style: none; margin-top: 14px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.sidebar-details summary::-webkit-details-marker { display: none; }
.sidebar-details summary::before { content: "▸ "; }
.sidebar-details[open] summary::before { content: "▾ "; }
@media (min-width: 860px) {
  .sidebar-details summary { cursor: default; margin-top: 0; pointer-events: none; }
  .sidebar-details summary::before { display: none; }
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel-2); border: 1px solid var(--border);
        border-radius: 10px; padding: 10px 12px; text-align: center; }
.stat span { display: block; font-size: 24px; color: var(--accent); }
.stat label { font-size: 12px; color: var(--muted); }

.level { margin-top: 16px; font-size: 14px; color: var(--muted); }
.level span { color: var(--base01); }

.area-row { display: grid; grid-template-columns: 90px 1fr 42px; align-items: center;
            gap: 8px; margin-bottom: 8px; font-size: 13px; }
.bar { background: var(--panel-2); border: 1px solid var(--border);
       border-radius: 6px; height: 8px; overflow: hidden; }
.fill { background: var(--accent); height: 100%; transition: width 0.4s; }
.val { color: var(--muted); text-align: right; font-size: 12px; }

.weakest { margin: 0; padding-left: 18px; font-size: 13px; color: var(--base00); }
.weakest li { margin-bottom: 6px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between;
                margin: 28px 0 10px; }
.section-head h2 { margin: 0; }
.link-btn { background: none; padding: 0; font-size: 12px; color: var(--accent); }
.link-btn:hover { text-decoration: underline; }

.quick-add { display: flex; gap: 6px; margin-bottom: 10px; }
.quick-add input {
  flex: 1; min-width: 0; background: #fff; color: var(--text); font: inherit;
  font-size: 16px;   /* nie 13px — mniejszy font wywołuje auto-zoom na iOS Safari */
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.quick-add input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.quick-add button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }

/* --- Zakładki (Nowa sesja / Zdania / Własny tekst) --- */

.tab-bar {
  display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-btn {
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 600;
  padding: 10px 16px; border-bottom: 2px solid transparent; border-radius: 0;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-tabs-target="panel"][hidden] { display: none; }

/* --- Main --- */

main { padding: 20px clamp(16px, 4vw, 64px); max-width: 900px; }
@media (min-width: 860px) {
  main { padding: 32px clamp(20px, 5vw, 64px); }
}

.setup textarea {
  width: 100%; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; font: inherit;
  margin: 12px 0;
}
.setup textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button.primary {
  background: var(--accent); color: var(--base3); padding: 12px 24px; font-size: 17px;
}
button.primary:hover { background: #1f77b8; }
button.primary:disabled { opacity: 0.6; cursor: wait; }
button.secondary {
  background: var(--panel); color: var(--base01); padding: 10px 18px;
  border: 1px solid var(--border);
}
button.secondary:disabled { opacity: 0.6; cursor: wait; }

/* --- Chat --- */

.chat { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px;
        max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 8px; }
@supports (height: 100dvh) {
  /* 100vh na mobilnym Safari liczy się z paskiem adresu schowanym — 100dvh nie. */
  .chat { max-height: calc(100dvh - 220px); }
}

.bubble { max-width: 88%; padding: 14px 18px; border-radius: 14px;
          border: 1px solid var(--border); }
@media (min-width: 860px) {
  .bubble { max-width: 75%; }
}
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble.coach { background: var(--coach); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.user  { background: var(--user);  align-self: flex-end;   border-bottom-right-radius: 4px;
                border-color: rgba(38, 139, 210, 0.25); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--base3); }
.chip.good { color: var(--good); border: 1px solid var(--good); }
.chip.ok   { color: var(--ok);   border: 1px solid var(--ok); }
.chip.bad  { color: var(--bad);  border: 1px solid var(--bad); }

.worst { font-size: 13px; color: var(--orange); }

button.play {
  background: transparent; color: var(--muted); font-size: 13px; padding: 4px 0;
}
button.play:hover { color: var(--accent); }

.note { align-self: center; font-size: 13px; color: var(--muted);
        background: var(--panel); border: 1px solid var(--border);
        padding: 6px 14px; border-radius: 999px; }
.note.hint  { color: var(--yellow); }
.note.warn  { color: var(--orange); }
.note.error { color: var(--bad); }
.note.thinking { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

/* --- Controls --- */

.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
button.record {
  background: var(--base3); color: var(--base01); font-size: 18px;
  padding: 16px 32px; border: 2px solid var(--accent); border-radius: 999px;
}
button.record:hover { background: #f5eed7; }
button.record.recording {
  background: var(--bad); border-color: var(--bad); color: var(--base3);
  animation: pulse 1.2s ease-in-out infinite;
}
.rec-status { color: var(--muted); font-size: 14px; flex: 1; }

/* --- Summary --- */

.summary { background: var(--panel); border: 1px solid var(--border);
           border-radius: 14px; padding: 24px 28px; margin-top: 16px; }
.summary h2 { margin-top: 0; color: var(--orange); }
.summary .said   { color: var(--bad); text-decoration: line-through; }
.summary .better { color: var(--good); }
.summary .why    { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.summary li { margin-bottom: 14px; }
.summary .cards { color: var(--cyan); }
.summary button { margin-top: 12px; }

/* --- Historia sesji --- */

.history-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
                 color: var(--muted); margin: 32px 0 10px; }
.history { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.history-item { margin-bottom: 8px; }
.history-open {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "topic status" "date date";
  gap: 2px 12px; align-items: center; text-align: left;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; color: var(--text);
}
@media (min-width: 500px) {
  .history-open { grid-template-columns: 110px 1fr auto; grid-template-areas: "date topic status"; }
}
.history-open:hover { border-color: var(--accent); }
.history-date { grid-area: date; color: var(--muted); font-size: 13px; }
.history-topic { grid-area: topic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-status { grid-area: status; font-size: 12px; white-space: nowrap; }
.history-status.done { color: var(--muted); }
.history-status.open { color: var(--green); }

.history-group { list-style: none; margin-bottom: 18px; }
.history-group-head { display: flex; align-items: center; justify-content: space-between;
                       gap: 10px; margin: 0 0 6px; max-width: 560px; }
.history-group-title { font-size: 13px; font-weight: 600; margin: 0; color: var(--accent); }

.history-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.history-modes { display: flex; gap: 6px; justify-content: flex-end; }
.mode-icon {
  border: 1px solid var(--border); background: var(--panel); border-radius: 8px;
  font-size: 14px; line-height: 1; padding: 4px 8px; cursor: pointer; color: var(--text);
}
.mode-icon:hover { border-color: var(--accent); }

/* --- Panel "Uwagi" (lekcja: czat + boczna kolumna) --- */

main { max-width: 1240px; }
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
          gap: 24px; align-items: start; }
.lesson[hidden] { display: none; }
.lesson-main { min-width: 0; }

.feedback {
  position: sticky; top: 24px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
}
.feedback h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
               letter-spacing: 0.1em; color: var(--muted); }
.feedback-list { display: flex; flex-direction: column; gap: 10px; }

.fb-card { background: var(--base3); border: 1px solid var(--border);
           border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.fb-card.grammar { border-left: 4px solid var(--red); }
.fb-card.pron    { border-left: 4px solid var(--cyan); }
.fb-card p { margin: 2px 0; }
.fb-turn { display: block; font-size: 11px; text-transform: uppercase;
           letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
.fb-card .said   { color: var(--red); text-decoration: line-through; }
.fb-card .better { color: var(--green); font-weight: 600; }
.fb-card .why    { color: var(--base00); font-size: 13px; margin-top: 4px; }
.fb-card .pron-comment { color: var(--base01); }
.fb-card .pron-word    { color: var(--orange); font-size: 13px; }

/* Uwagi wpięte pod konkretne zdanie w podglądzie sesji (zamiast panelu z boku). */
.bubble-fb { background: var(--base3); border: 1px solid var(--border);
             border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-top: 8px; }
.bubble-fb.grammar { border-left: 4px solid var(--red); }
.bubble-fb.pron    { border-left: 4px solid var(--cyan); }
.bubble-fb p { margin: 2px 0; }
.bubble-fb .said   { color: var(--red); text-decoration: line-through; }
.bubble-fb .better { color: var(--green); font-weight: 600; }
.bubble-fb .why    { color: var(--base00); font-size: 12px; margin-top: 4px; }
.bubble-fb .pron-comment { color: var(--base01); }
.bubble-fb .pron-word    { color: var(--orange); font-size: 12px; }

@media (max-width: 1100px) {
  .lesson { grid-template-columns: 1fr; }
  .feedback { position: static; max-height: none; }
}

/* --- Listen & repeat --- */

.drill-form { max-width: 560px; }
.mode-btn {
  flex: 1; background: var(--panel); color: var(--muted); font-size: 14px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
}
.mode-btn.active { background: var(--accent); color: var(--base3); border-color: var(--accent); }
.drill-form input.drill-topic, .drill-form textarea {
  width: 100%; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; font: inherit;
  margin: 6px 0;
}
.drill-form input:focus, .drill-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.drill-count { display: flex; align-items: center; gap: 8px; font-size: 14px;
               color: var(--muted); margin: 10px 0; }
.drill-count select { font: inherit; font-size: 15px; padding: 6px 8px;
                       border: 1px solid var(--border); border-radius: 8px;
                       background: #fff; color: var(--text); }

.drill { max-width: 720px; }
.drill-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
              align-items: center; margin-bottom: 12px; }
.drill-progress { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
                  color: var(--muted); }

.drill-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.drill-modes .mode-btn { min-width: 130px; }

.drill-card { background: var(--panel); border: 1px solid var(--border);
              border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
              cursor: pointer; }
@media (min-width: 860px) {
  .drill-card { padding: 22px 26px; }
}
.drill-card:hover { border-color: var(--accent); }
.drill-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drill-card .play { pointer-events: none; }
.drill-sentence { font-size: 22px; color: var(--base01); margin: 0 0 8px; }
.drill-translation { color: var(--base00); font-size: 16px; margin: 0 0 8px; }
.drill-note { color: var(--muted); font-size: 14px; margin: 0 0 8px; }

.drill-result { margin-top: 18px; display: flex; flex-direction: column; gap: 8px;
                max-width: 720px; }
.drill-ok  { color: var(--green); font-weight: 600; }
.drill-bad { color: var(--red); font-weight: 600; }
.drill-transcript { color: var(--base00); }
.drill-comment { color: var(--muted); font-size: 14px; }

/* Modal ćwiczenia pojedynczego słowa. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(88, 110, 117, 0.35);   /* base01 z przezroczystością */
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px; min-width: min(320px, 90vw); max-width: 90vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 43, 54, 0.25);
}
@media (min-width: 860px) {
  .modal { padding: 28px 32px; }
}
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; padding: 4px;
}
.modal-close:hover { color: var(--orange); }
.modal-word { margin: 0 0 4px; font-size: 28px; color: var(--orange); }
.modal .controls { margin-top: 16px; gap: 10px; }
.word-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.word-link span { cursor: pointer; }
.word-link span:hover { color: var(--accent); }
.word-del {
  background: none; border: none; padding: 0 4px; cursor: pointer;
  color: var(--muted); font-size: 11px; line-height: 1; visibility: hidden;
}
.word-link:hover .word-del { visibility: visible; }
.word-del:hover { color: var(--red); }
@media (hover: none) {
  /* Dotyk nie ma hover — bez tego usuwanie słowa w sidebarze jest nieklikalne. */
  .word-del { visibility: visible; }
}

/* Panel zarządzania pełną listą słów. */
.modal-wide { width: 480px; max-height: 80vh; display: flex; flex-direction: column; }
.modal-wide .quick-add { margin-top: 4px; }
.words-panel-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.words-panel-list .word-link { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.words-panel-list .word-del { visibility: visible; }

/* Przycisk w sidebarze otwierający log nagrań (patrz .recordings-log-list niżej). */
.sidebar-log-btn { margin-top: 14px; width: 100%; }

/* Panel "Log nagrań" — wszystkie próby ze wszystkich ćwiczeń, od najnowszej. */
.recordings-log-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.recordings-log-row {
  border-left: 3px solid var(--border); padding: 4px 12px;
}
.recordings-log-row.ok  { border-color: var(--green); }
.recordings-log-row.bad { border-color: var(--red); }
.recordings-log-head { margin: 0 0 2px; font-weight: 600; color: var(--base01); font-size: 13px; }
.recordings-log-sentence { margin: 0 0 2px; }
.recordings-log-row p { margin: 2px 0; }

/* Nawigacja między stronami (pełny kurs / proste rozmowy). */
.page-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 20px; font-size: 13px; }
.page-nav a { color: var(--accent); text-decoration: none; }
.page-nav a:hover { text-decoration: underline; }
.page-nav a.current { color: var(--base01); font-weight: 600; pointer-events: none; }

/* Prosta rozmowa (prosta.html) — bez sidebara. */
body.single-column { grid-template-columns: 1fr; }
body.single-column main { margin: 0 auto; width: 100%; }
body.single-column .lesson-main { max-width: 680px; }
.lesson-main h2 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.lesson-main h2 small a { color: var(--accent); text-decoration: none; }
.note.warn  { color: var(--orange); animation: none; }
.note.error { color: var(--bad); animation: none; }

/* Pasek statusów zdań: analiza leci w tle, kropki pokazują wyniki. */
.drill-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.drill-dot {
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); color: var(--muted); background: var(--panel);
}
.drill-dot:hover { border-color: var(--blue); }
.drill-dot.busy { border-color: var(--blue); color: var(--blue);
                  animation: pulse 1.2s ease-in-out infinite; }
.drill-dot.ok   { background: var(--green);  border-color: var(--green);  color: var(--base3); }
.drill-dot.bad  { background: var(--red);    border-color: var(--red);    color: var(--base3); }
.drill-dot.warn { background: var(--yellow); border-color: var(--yellow); color: var(--base3); }
.drill-dot.current { outline: 2px solid var(--blue); outline-offset: 2px; }
.drill-dot.more { border-style: dashed; color: var(--accent); background: transparent; }
.drill-dot.more:hover { background: var(--panel); }
.drill-dot.done { box-shadow: 0 0 0 2px var(--green); }

.done-btn.active { background: var(--green); color: var(--base3); border-color: var(--green); }

/* Przegląd zdań w podsumowaniu. */
.drill-review { border-left: 3px solid var(--border); padding: 4px 12px; margin: 8px 0; }
.drill-review.ok  { border-color: var(--green); }
.drill-review.bad { border-color: var(--red); }
.drill-review.skip { opacity: 0.65; }
.drill-review-head { margin: 0 0 4px; color: var(--base01); font-weight: 600; }
.drill-review p { margin: 2px 0; }
.drill-review-group { display: flex; flex-direction: column; gap: 4px; }
.drill-review-old { opacity: 0.6; }

.summary .dims { list-style: none; padding: 0; }
.summary .dims li { margin-bottom: 10px; }