/* StudioOS — czat recepcyjny. Mobile-first, 390 px.
   Motyw: tablica suchościeralna w boksie treningowym.
   Kolory sygnałowe (niebieski, żółty) z oznaczeń talerzy olimpijskich. */

:root {
  --plaster:   #F2F1EE;  /* tynk — tło */
  --card:      #FFFFFF;
  --ink:       #1C1C1A;  /* atrament */
  --steel:     #6E7273;  /* tekst drugorzędny */
  --hairline:  #D6D5D0;
  --signal:    #1D63A8;  /* talerz 20 kg */
  --signal-dk: #164B80;
  --caution:   #E6B10A;  /* talerz 15 kg */
  --caution-bg:#FBF3D8;

  --col: 26rem;          /* szerokość kolumny czatu */
  --r: 3px;              /* promień — mały, bo to tablica, nie kafelek */

  --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --plaster:   #17191A;
    --card:      #202324;
    --ink:       #ECEAE4;
    --steel:     #9DA3A4;
    --hairline:  #343839;
    --signal:    #5B9BDC;
    --signal-dk: #7FB4E8;
    --caution:   #E6B10A;
    --caution-bg:#2E2710;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-text-size-adjust: 100%;
}

/* Kolumna telefonu, wycentrowana na większych ekranach */
.shell {
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--plaster);
  border-inline: 1px solid var(--hairline);
}
@media (max-width: 27rem) { .shell { border-inline: 0; } }

/* ------------------------------------------------------------ nagłówek */
.head {
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 2px solid var(--ink);
}
.head h1 {
  margin: 0;
  font: 600 1.6rem/1.05 var(--display);
  letter-spacing: 0.01em;
}
.head p {
  margin: 0.15rem 0 0;
  color: var(--steel);
  font-size: 0.82rem;
}

/* Paski stanu. Kreska po lewej niesie informację, nie ozdabia. */
.strip {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--hairline);
}
.strip--closed  { background: var(--caution-bg); border-left: 4px solid var(--caution); }
.strip--demo    { background: transparent; color: var(--steel); border-left: 4px solid var(--hairline); }
.strip b { font-weight: 600; }

/* --------------------------------------------------------------- czat */
.log {
  flex: 1 1 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
}

/* Asystent: płaski blok z kreską markera. Nie bąbelek. */
.msg--bot {
  border-left: 2px solid var(--steel);
  padding-left: 0.75rem;
  max-width: 92%;
}
.msg--bot p { margin: 0 0 0.5rem; }
.msg--bot p:last-child { margin-bottom: 0; }

/* Klient: wypełniony blok, dosunięty do prawej */
.msg--me {
  align-self: flex-end;
  max-width: 85%;
  background: var(--signal);
  color: #fff;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r);
}
@media (prefers-color-scheme: dark) { .msg--me { color: #0E1B28; } }

.msg--note {
  border: 1px solid var(--caution);
  border-left-width: 4px;
  background: var(--caution-bg);
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
}
.msg--note b { display: block; font: 600 1rem/1.2 var(--display); margin-bottom: 0.2rem; }

/* Karta polecenia z linkami do WodGuru */
.offer {
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 0.8rem;
}
.offer h2 { margin: 0 0 0.1rem; font: 600 1.15rem/1.15 var(--display); }
.offer p { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--steel); }
.offer .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ------------------------------------------------------- formularz numeru */
.phone {
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 0.8rem;
}
.phone h2 { margin: 0 0 0.1rem; font: 600 1.15rem/1.15 var(--display); }
.phone .why { margin: 0 0 0.7rem; font-size: 0.84rem; color: var(--steel); }
.phone label { display: block; font-size: 0.84rem; margin-bottom: 0.25rem; }
.phone input[type="tel"], .phone input[type="text"] {
  width: 100%;
  font: 400 1rem var(--body);
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--plaster);
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.consent { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.82rem; }
.consent input { margin: 0.2rem 0 0; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

/* --------------------------------------------------------- szybkie pytania */
.chips {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  font: 500 0.86rem var(--body);
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  cursor: pointer;
}
.chip:hover { background: var(--ink); color: var(--plaster); }

/* --------------------------------------------------------------- pisanie */
.composer {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-top: 2px solid var(--ink);
  background: var(--plaster);
}
.composer input {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 1rem var(--body);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
}
.count { font-size: 0.72rem; color: var(--steel); padding: 0 1rem 0.5rem; }
.count[data-over="1"] { color: #B3261E; font-weight: 600; }

/* --------------------------------------------------------------- przyciski */
.btn {
  font: 500 0.9rem var(--body);
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn--ghost { background: transparent; color: var(--signal); }
.btn:disabled { opacity: 0.45; cursor: default; }
@media (prefers-color-scheme: dark) { .btn { color: #0E1B28; } .btn--ghost { color: var(--signal); } }

/* --------------------------------------------------------------- stopka */
.foot {
  padding: 0.6rem 1rem 1rem;
  font-size: 0.76rem;
  color: var(--steel);
  border-top: 1px solid var(--hairline);
}
.foot a { color: var(--steel); }

/* Dostępność: ostrość ogniska widoczna wszędzie */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Jedyna animacja: kropki „pisze". Odpowiada na działanie użytkownika. */
.typing { display: inline-flex; gap: 0.2rem; padding-left: 0.75rem; border-left: 2px solid var(--steel); }
.typing i {
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--steel); animation: blink 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%,60%,100% { opacity: 0.25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; opacity: 0.5; }
}

/* =================================================== widok dla recepcji */
.brief { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.brief > header { border-bottom: 2px solid var(--ink); padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.brief h1 { margin: 0; font: 600 1.9rem/1.05 var(--display); }
.brief .when { color: var(--steel); font-size: 0.85rem; margin: 0.2rem 0 0; }

/* Liczby jako zdanie, nie kafelki. Celowo: kafelki to najbardziej
   zużyty wzorzec i nic tu nie wnoszą. */
.counts { font: 400 1.05rem/1.9 var(--body); margin: 0 0 1.5rem; }
.counts b { font: 600 1.6rem/1 var(--display); vertical-align: -0.05em; }

.brief h2 {
  font: 600 1.2rem/1.2 var(--display);
  margin: 1.75rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--hairline);
}
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 0.7rem 0 0.7rem 0.85rem; border-bottom: 1px solid var(--hairline); border-left: 4px solid transparent; }
.items li[data-kind="zdrowie"]    { border-left-color: var(--caution); background: var(--caution-bg); }
.items li[data-kind="rabat"]      { border-left-color: var(--signal); }
.items li[data-kind="reklamacja"] { border-left-color: #B3261E; }
.items .meta { display: block; color: var(--steel); font-size: 0.8rem; margin-top: 0.15rem; }
.items .tel { font-variant-numeric: tabular-nums; font-weight: 600; }
.empty { color: var(--steel); font-size: 0.9rem; padding: 0.7rem 0; }

/* Klasy zamiast atrybutów style="" — dzięki temu CSP może zabronić
   stylów osadzonych w HTML (style-src 'self' bez 'unsafe-inline'). */
.strip--spaced { margin-bottom: 1.4rem; }
.back { margin-top: 2rem; }
.phone .status { margin: 0.6rem 0 0; }
.tight { margin: 0 !important; }