/* Miki-bot — vzhľad.
   Rozmery, zaoblenie aj písmo sú odvodené z miki.sk. Widget dedí písmo
   z témy, takže sadne sám. Farby sa dajú prepísať premennými nižšie:

     .mikibot { --mb-akcent: #1a1a1a; --mb-radius: 9px; }

   Na počítači je to dlaždica v bočnom stĺpci.
   Pod 900 px sa mení na bublinu v rohu, ktorá sa rozbalí do panela. */

.mikibot {
  --mb-akcent:     #1a1a1a;
  --mb-akcent-txt: #ffffff;
  --mb-podklad:    #ffffff;
  --mb-ramik:      #d9dcdf;
  --mb-text:       #404041;
  --mb-tlmene:     #75787c;
  --mb-bublina:    #f2f3f5;
  --mb-jemne:      #fbfbfb;   /* rovnaký podklad ako box s profesiami */
  --mb-disk:       #f4f2ee;
  --mb-radius:     9px;
  --mb-chyba-pod:  #fdf0ee;
  --mb-chyba-ram:  #e8c4bd;

  display: block;
  color: var(--mb-text);
  font-size: 16px;
  line-height: 1.6;
}

.mikibot *, .mikibot *::before, .mikibot *::after { box-sizing: border-box; }

/* ---------- karta ------------------------------------------------------- */

/* Susedia v stĺpci nemajú rámik, ale jemný tieň. Bot mal presne naopak,
   preto z celého stĺpca vytŕčal. Tieň je ten istý ako na farebných
   odkazoch, polomer 9 px sedí s nimi aj s boxom profesií. */
.mikibot__karta {
  display: flex;
  flex-direction: column;
  background: var(--mb-podklad);
  border: 0;
  border-radius: var(--mb-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.mikibot__hlava {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .85rem .9rem;
  background: var(--mb-akcent);
  color: var(--mb-akcent-txt);
}

/* Zhodné s nadpisom „Upravte si profil na mieru" vedľa: 16 px, hrúbka 400,
   riadkovanie 1.35 (= 21,6 px). Nič z toho nie je odhad, je to odmerané. */
.mikibot__nazov {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
}

/* Odlesk cez čiernu lištu tu bol a je preč — pohyb v hlavičke súperil
   s bodkami vo vstupnom poli a dve animácie naraz sú o jednu veľa. */

.mikibot__telo { padding: .85rem .9rem; }

.mikibot__vyzva { margin: 0 0 .7rem; font-size: .95rem; }

.mikibot__volby { display: flex; flex-direction: column; gap: 6px; }

.mikibot__volba {
  width: 100%;
  min-height: 40px;
  padding: .55rem .8rem;
  border: 1px solid var(--mb-ramik);
  border-radius: var(--mb-radius);
  background: var(--mb-jemne);
  color: inherit;
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.mikibot__volba:hover,
.mikibot__volba:focus-visible {
  border-color: var(--mb-akcent);
  background: var(--mb-bublina);
  transform: translateX(2px);
}

.mikibot__volba:focus-visible { outline: 2px solid var(--mb-akcent); outline-offset: 1px; }

/* ---------- rozhovor ---------------------------------------------------- */

.mikibot__rozhovor {
  display: none;
  flex-direction: column;
  gap: .75rem;
  max-height: 340px;
  overflow-y: auto;
  padding: .85rem .9rem;
  overscroll-behavior: contain;
}

.mikibot__rozhovor.je-vidno { display: flex; }

.mikibot__sprava { max-width: 94%; font-size: .9rem; }
.mikibot__sprava--ja { align-self: flex-end; }

.mikibot__bublina {
  padding: .6rem .8rem;
  border-radius: var(--mb-radius);
  background: var(--mb-bublina);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mikibot__sprava--ja .mikibot__bublina {
  background: var(--mb-akcent);
  color: var(--mb-akcent-txt);
}

.mikibot__sprava--chyba .mikibot__bublina {
  background: var(--mb-chyba-pod);
  border: 1px solid var(--mb-chyba-ram);
}

/* Odkaz priamo vo vete odpovede. Podčiarknutý, aby bolo na prvý pohľad
   jasné, že sa naň dá kliknúť — samotná farba na to nestačí. */
.mikibot__odkaz {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.mikibot__odkaz:hover,
.mikibot__odkaz:focus-visible { text-decoration-thickness: 2px; }

.mikibot__zdroje {
  margin: .45rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
}

.mikibot__zdroje li { margin-top: .28rem; }

.mikibot__zdroje a {
  color: var(--mb-tlmene);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mikibot__zdroje a:hover { color: var(--mb-text); }

/* ---------- píše ------------------------------------------------------- */

.mikibot__pise { display: inline-flex; gap: 4px; padding: .75rem .85rem; }

.mikibot__pise i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mb-tlmene);
  animation: mikibot-skok 1.2s infinite;
}

.mikibot__stav {
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--mb-tlmene);
}

.mikibot__stav:empty { display: none; }

/* Očakávaný čas. Tlmenejší než popis fázy — je to poznámka, nie hlásenie. */
.mikibot__cakanie {
  margin: .15rem 0 0;
  font-size: .72rem;
  color: var(--mb-tlmene);
  opacity: .8;
}

.mikibot__pise i:nth-child(2) { animation-delay: .15s; }
.mikibot__pise i:nth-child(3) { animation-delay: .3s; }

@keyframes mikibot-skok {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- vstup ------------------------------------------------------- */

.mikibot__vstup {
  position: relative;   /* kotva pre návnadu nad poľom */
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: .75rem .9rem .85rem;
  border-top: 1px solid var(--mb-ramik);
}

.mikibot__pole {
  flex: 1;
  min-width: 0;
  min-height: 2.4rem;
  max-height: 7rem;
  padding: .5rem .65rem;
  border: 1px solid var(--mb-ramik);
  border-radius: var(--mb-radius);
  background: var(--mb-podklad);
  color: inherit;
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;   /* JS ho zapne, až keď text prerastie strop */
}

/* Nápoveda tlmenejšia než písaný text, nech je jasné, že je to len výzva. */
.mikibot__pole::placeholder { color: var(--mb-tlmene); opacity: 1; }

.mikibot__pole:focus-visible { outline: 2px solid var(--mb-akcent); outline-offset: 1px; }

/* Návnada leží nad vstupným poľom namiesto placeholdera. Musí mať rovnaké
   písmo aj odsadenie ako pole, inak by text pri písaní poskočil.
   pointer-events: none je tu kľúčové — ťuknutie musí prejsť do poľa. */
.mikibot__navnada {
  position: absolute;
  left: .9rem;
  top: .75rem;
  display: flex;
  /* baseline, nie center — bodky majú sedieť na účiarí písma ako výpustka,
     nie sa vznášať v strede riadku. Bloku bez textu sa účiarie odvodí od
     spodnej hrany, takže spodok bodiek dosadne presne na pätku. */
  align-items: baseline;
  gap: 5px;
  padding: .5rem .65rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--mb-tlmene);
  pointer-events: none;
  transition: opacity .15s;
}

.mikibot__navnada.je-prec { opacity: 0; }

.mikibot__navnada-bodky { display: inline-flex; gap: 3px; }

.mikibot__navnada-bodky i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: mikibot-skok 1.2s infinite;
}

.mikibot__navnada-bodky i:nth-child(2) { animation-delay: .15s; }
.mikibot__navnada-bodky i:nth-child(3) { animation-delay: .3s; }

.mikibot__poslat {
  padding: .55rem .9rem;
  border: 0;
  border-radius: var(--mb-radius);
  background: var(--mb-akcent);
  color: var(--mb-akcent-txt);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.mikibot__poslat[disabled] { opacity: .45; cursor: default; }
.mikibot__poslat:focus-visible { outline: 2px solid var(--mb-text); outline-offset: 2px; }

.mikibot__pata {
  margin: 0;
  padding: 0 .9rem .85rem;
  font-size: .75rem;
  color: var(--mb-tlmene);
}

/* ---------- panáčik v bubline ------------------------------------------- */
/* Na počítači už nie je, ostáva len v spúšťači na mobile. Má čiernu
   šiltovku aj bundu, preto svetlý kruh pod ním. */

.mikibot__panacik {
  flex: 0 0 auto;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mb-disk);
  overflow: hidden;
}

/* Ikonka je 244 × 244 a už je orezaná na hlavu, takže sa nezväčšuje
   ani neposúva. Predtým som ju ťahal na 148 % a dvíhal nahor, aby som
   ten výrez spravil za behu — odtiaľ pochádzal ten splostený dojem.
   object-fit: cover je poistka, keby raz prišiel neštvorcový obrázok. */
.mikibot__panacik img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- spúšťač a zatváranie (len na mobile) ------------------------ */

.mikibot__spustac,
.mikibot__zavri { display: none; }

/* ---------- mobil: bublina v rohu --------------------------------------- */

@media (max-width: 899px) {
  /* Nie holý kruh, ale pilulka s menom. Samotná bublina nikomu nepovie,
     čo sa pod ňou skrýva, a nikto na ňu neťukne.
     Vľavo zámerne: vpravo dole sedí na miki.sk vyskakovacia kartička
     s referenciami (#mp-trust, z-index 9999) — bublina bola pod ňou
     a všetky ťuknutia chytala ona. Vrstva je nad ňou pre istotu. */
  .mikibot__spustac {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 10000;
    max-width: calc(100vw - 28px);
    padding: 6px 18px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: var(--mb-akcent);
    color: var(--mb-akcent-txt);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  }

  .mikibot__spustac .mikibot__panacik { width: 46px; height: 46px; }

  .mikibot__spustac-text {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .mikibot__spustac:focus-visible { outline: 3px solid var(--mb-text); outline-offset: 3px; }

  /* Karta sa drží pri spodku a je vysoká presne toľko, koľko má obsahu.
     Na úvodnej obrazovke sú to tri tlačidlá, nie celá obrazovka. Rastie
     až s rozhovorom, najviac do 85 % výšky okna. */
  .mikibot__karta {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    max-height: 85vh;
    max-height: 85dvh;   /* dvh počíta s lištami prehliadača, vh nie */
    /* Nad vyskakovacou kartičkou s referenciami (#mp-trust, 9999). Tá sa
       na mobile roztiahne cez celý spodok obrazovky a pri zhodnej vrstve
       vyhráva, lebo je v stránke neskôr — ťuknutia na vstupné pole aj na
       Poslať potom chytala ona a bot vyzeral zamrznutý. */
    z-index: 10001;
    display: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  }

  .mikibot--otvorene .mikibot__karta { display: flex; }
  .mikibot--otvorene .mikibot__spustac { display: none; }

  /* Kým je rozhovor otvorený, kartička s referenciami sa skryje. Zdvihnutá
     vrstva síce ťuknutia už prepustí, ale obe veci by sedeli na tom istom
     mieste a prekrývali by sa. Trieda sa pridáva a odoberá v miki-bot.js. */
  body.mikibot-otvorene #mp-trust { display: none !important; }

  /* Na domovskej stránke sa na mobile referencie nezobrazujú vôbec —
     spodný roh tam patrí bublinke bota. Na článkoch, Grilovačke aj
     Školeniach zostávajú tak, ako boli. Trieda „home" je WordPressova
     a má ju jedine úvodná stránka. */
  body.home #mp-trust { display: none !important; }

  /* Karta zostáva nízka aj počas písania. Skúšal som ju pri zameraní poľa
     roztiahnuť na celú obrazovku, aby sa vstup dostal nad klávesnicu —
     lenže ten skok pôsobil ako porucha a diagnostika na telefóne ukázala,
     že ťuknutie na Poslať funguje aj bez toho. */

  .mikibot__rozhovor { max-height: 55vh; max-height: 55dvh; flex: 0 1 auto; }
  .mikibot__telo { flex: 0 1 auto; overflow-y: auto; }

  /* Riadok so vstupom sa nikdy nesmie zmenšiť ani odscrollovať preč —
     je to jediná cesta, ako položiť ďalšiu otázku. */
  .mikibot__vstup { flex: 0 0 auto; }

  /* Presne 16 px, ani o desatinu menej. Safari na iPhone pri ťuknutí do
     poľa s menším písmom priblíži celú stránku — karta je pripnutá cez
     position:fixed, pri priblížení odskočí a tlačidlo ujde spod prsta.
     Šestnástka je hranica, pri ktorej Safari nezoomuje. */
  .mikibot__pole { font-size: 16px; }

  /* Návnada musí mať to isté písmo ako pole, inak by sa pri ťuknutí posunul
     text o kúsok a vyzeralo by to ako chyba. */
  .mikibot__navnada { font-size: 16px; }

  .mikibot__zavri {
    display: block;
    margin-left: auto;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .mikibot__zavri:focus-visible { outline: 2px solid var(--mb-akcent-txt); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .mikibot__panacik,
  .mikibot__panacik.poskok { animation: none; }
  .mikibot__pise i { animation: none; opacity: .5; }
  .mikibot__navnada-bodky i { animation: none; opacity: .5; }
  .mikibot__volba { transition: none; }
}