/* ============================================================
   Ask Waldo - standalone chat
   Design portovany z chatbot screenov uciacej appky (style.css).
   ============================================================ */

@font-face {
  font-family: 'Apotek';
  src: url('../fonts/ApotekComp_Black.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'NotoCond';
  src: url('../fonts/NotoSans_ExtraCondensedBold.otf') format('opentype');
  font-display: swap;
}

:root {
  --bubble: #3a3a3a;          /* zladene so sedou texturou (waldoSheet ton) */
  --accent: #FFD200;
  --ink: #f4f1ea;
  --dim: rgba(255,255,255,.55);
  --top-h: calc(env(safe-area-inset-top, 0px) + 86px);   /* pod appbarom (logo + burger) */
  --foot-h: calc(env(safe-area-inset-bottom, 0px) + 100px);   /* composer + credit paticka */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  /* seda textura ako waldoSheet popup v appke (stmavena na #4d4d4d ton) */
  background: linear-gradient(rgba(77,77,77,.6), rgba(77,77,77,.6)), #4d4d4d url('../img/table-bcg3.jpg') center / cover no-repeat fixed;
  color: var(--ink);
  font-family: 'NotoCond', 'Noto Sans', sans-serif;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ===== Hlavicka: logo vlavo, burger vpravo, gradient do stratena ===== */
#appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 22;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 54px;   /* dlhsi dobeh gradientu pod logom */
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
#appbar > * { pointer-events: auto; }
/* margin 6px = rovnaka vyska riadku ako 54px burger -> logo sa nehybe */
.ab-logo { height: 42px; width: auto; display: block; margin: 6px 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* burger (port z appky) - mimo appbaru, VZDY fixed nad vsetkym vratane draweru */
#burger {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 18px; z-index: 27;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
#burger span {
  display: block; width: 23px; height: 4px; border-radius: 1px; background: #fff;
  transition: transform .35s cubic-bezier(.22,.9,.3,1), opacity .25s;
}
#burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#burger.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
#burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== Drawer (port z appky, rookie light mode) ===== */
.menuBack {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 24;
}
.menuBack.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(80vw, 360px);
  background: #fff; color: #1d1d1b;
  border-radius: 22px 0 0 22px;
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.22,.9,.3,1);
  z-index: 25; display: flex; flex-direction: column; overflow: hidden;
}
.drawer.show { transform: translateX(0); }

@keyframes drHeroIn { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes drItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drHeroOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
@keyframes drItemOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
.drawer.show .dr-hero { animation: drHeroIn .385s ease .07s both; }
.drawer.show .dr-learn { animation: drItemIn .29s ease .5s both; }
.drawer.show .dr-rules { animation: drItemIn .29s ease .6s both; }
.drawer.closing .dr-rules { animation: drItemOut .14s ease 0s both; }
.drawer.closing .dr-learn { animation: drItemOut .14s ease .04s both; }
.drawer.closing .dr-hero  { animation: drHeroOut .18s ease .18s both; }

.dr-hero {
  position: relative; overflow: hidden;
  flex: 0 1 30vh; min-height: 90px;
  background: #fff; border-radius: 22px 0 0 0;
  will-change: transform, opacity;
}
.dr-hero-img {
  position: absolute; inset: -1px; z-index: 0;
  background: url('../img/hero-rookie.jpg') center top / cover no-repeat;
}
.dr-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-color: #fff;
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 96%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 60%, #000 96%, #000 100%);
}
.dr-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,30,.6) 0%, rgba(20,16,30,0) 32%);
}
.dr-body {
  position: relative; z-index: 2;
  flex: 1 0 auto; min-height: 0;
  margin-top: -1px; background: #fff;
  padding: 12px 22px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: flex-end;
}
.dr-bottom { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px); }
.dr-btn {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(1.05rem, 2.7vh, 1.45rem); text-align: center;
  border: none; cursor: pointer; text-decoration: none;
  padding: clamp(8px, 1.4vh, 11px) 18px; border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.dr-learn {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #ffe24d 100%);
  color: #1a1a1a; box-shadow: none;
}
.dr-rules {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #a648b0 0%, #813889 55%, #67246f 100%);
  color: #fff; box-shadow: none;
}
.dr-rules::before, .dr-learn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: drShine 6.5s ease-in-out infinite;
}
.dr-learn::before { animation-delay: -3.25s; }   /* lesk na striedacku, nie naraz */
@keyframes drShine { 0% { left: -60%; } 30% { left: 130%; } 100% { left: 130%; } }

/* otvorene menu: burger (X, z-27) je nad drawerom (z-25); logo aj gradient
   ostavaju v appbare (z-22) pod backdropom (z-24) a stmavia sa s nim.
   X ostava biele - sedi nad hero fotkou draweru s tmavym gradientom hore. */

/* ===== Chat ===== */
.chat {
  height: 100%; width: 100%; max-width: 540px; margin: 0 auto;
  padding: calc(var(--top-h) + 8px) 18px calc(var(--foot-h) + 46px);   /* +46 = fade zona konci nad inputom */
  overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px;
  /* texturove pozadie nedovoli gradient scrim -> spravy sa pod headerom/composerom vymaskuju */
  mask-image: linear-gradient(transparent calc(var(--top-h) - 34px), #000 var(--top-h), #000 calc(100% - var(--foot-h) - 42px), transparent calc(100% - var(--foot-h)));
  -webkit-mask-image: linear-gradient(transparent calc(var(--top-h) - 34px), #000 var(--top-h), #000 calc(100% - var(--foot-h) - 42px), transparent calc(100% - var(--foot-h)));
}
.chat::-webkit-scrollbar { display: none; }

.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.msg .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; flex: none; object-fit: cover; }
.msg .bubble {
  background: var(--bubble); color: var(--ink);
  padding: 10px 13px; border-radius: 14px;
  font-size: 1rem; line-height: 1.3;
  white-space: pre-wrap; overflow-wrap: break-word;
}
/* dlhsi user text sa zalamuje tak, aby jeho lavy okraj sedel s lavym okrajom
   Waldovho textu: avatar 42px + gap 14px - padding bubliny 13px = 43px */
.msg.user { align-self: flex-end; max-width: none; margin-left: 43px; }
.msg.user .bubble { background: var(--accent); color: #161616; border-bottom-right-radius: 4px; }

/* Waldo bez bubliny - text priamo na texture, styl ako ws-txt vo waldoSheet.
   Plna sirka: text konci 18px od praveho okraja (= padding chatu, rovnako
   ako je avatar odsadeny zlava). */
.msg.waldo { align-items: flex-start; gap: 14px; max-width: 100%; width: 100%; }
.msg.waldo .bubble { flex: 1; white-space: normal; }   /* markdown blocky, nie pre-wrap */

/* markdown vnutri Waldovej odpovede */
.msg.waldo .bubble p { margin: 0 0 .55em; }
.msg.waldo .bubble p:last-child, .msg.waldo .bubble ul:last-child, .msg.waldo .bubble ol:last-child { margin-bottom: 0; }
.msg.waldo .bubble ul, .msg.waldo .bubble ol { margin: 0 0 .55em; padding-left: 1.25em; }
.msg.waldo .bubble li { margin-bottom: .3em; }
.msg.waldo .bubble strong { color: var(--accent); font-weight: bold; }
.msg.waldo .av { width: 42px; height: 42px; border: none; }   /* avatar-waldo.png bez bielej linky */
.msg.waldo .bubble {
  background: transparent; padding: 0; border-radius: 0;
  color: #fff; font-weight: bold; line-height: 1.25;
  margin-top: 2px;   /* text zarovnany s hornou hranou avatara */
}
/* error hlasky: hovori ich tiez Waldo, ale italic a tlmene */
.msg.waldo.err .bubble { font-style: italic; font-weight: normal; color: rgba(255,255,255,.78); }

/* typewriter: nevypisana cast textu je neviditelna, ale drzi layout
   (slova sa nezalamuju dodatocne); kurzor bezi za aktivnou vypisanou castou */
.msg.waldo .bubble .tw-rest { visibility: hidden; }
.msg.waldo .bubble.typing .tw-done.active::after {
  content: '▌'; display: inline-block; width: 0; overflow: visible;
  color: #fff; animation: wtBlink .8s step-end infinite;
}
@keyframes wtBlink { 50% { opacity: 0; } }

.msg.enter { animation: msgIn .3s cubic-bezier(.22,.9,.32,1); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }

/* typing indicator (kym caka na odpoved servera) */
.msg.typing .bubble { display: flex; gap: 5px; padding: 12px 0 0; }
.typing .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dim);
  animation: tDot 1.1s ease-in-out infinite;
}
.typing .dot:nth-child(2) { animation-delay: .18s; }
.typing .dot:nth-child(3) { animation-delay: .36s; }
@keyframes tDot { 30% { transform: translateY(-5px); opacity: 1; } 60% { transform: none; opacity: .5; } }

/* ===== Patreon gate ===== */
.gate {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
}
.cta {
  position: relative; overflow: hidden;
  display: block; width: 100%; max-width: 400px;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.35rem; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, var(--accent) 0%, #ffe24d 100%);
  color: #1a1a1a;
  padding: 13px 18px; border-radius: 6px; border: none; cursor: pointer;
  animation: msgIn .35s cubic-bezier(.22,.9,.32,1);
}
.cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: ctaShine 6.5s ease-in-out infinite;
}
@keyframes ctaShine { 0%, 55% { left: -60%; } 75%, 100% { left: 120%; } }
.cta:active { transform: scale(.98); }
.gate-note { font-size: .8rem; color: var(--dim); letter-spacing: .3px; }

/* ===== Composer (rainbow border port z .opt-rainbow) ===== */
#composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; align-items: center;
  max-width: 540px; margin: 0 auto;
  padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 34px);   /* miesto pre credit paticku */
}

/* paticka ako na homescreene appky (.home-credit) */
.home-credit {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%); z-index: 20;
  font-family: 'NotoCond', sans-serif; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .576rem; color: rgba(255,255,255,.6); text-shadow: 0 1px 4px rgba(0,0,0,.5);
  white-space: nowrap; pointer-events: none;
}
body.locked .home-credit { display: none; }   /* gate ma vlastnu spodnu zonu */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rotate-border { from { --angle: 0deg; } to { --angle: 360deg; } }
.input-wrap {
  position: relative; flex: 1;
  background: var(--bubble);
  border: 2px solid transparent; border-radius: 12px;
}
.input-wrap::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 12px; border: 2px solid transparent;
  background:
    linear-gradient(var(--bubble), var(--bubble)) padding-box,
    conic-gradient(from var(--angle),
      transparent 0%, #ff5d5d 5%, var(--accent) 11%, #5ed4ff 17%, #b06bff 22%, transparent 27%) border-box;
  animation: rotate-border 4s linear infinite;
  pointer-events: none; z-index: 0;
}
#input {
  position: relative; z-index: 1;
  width: 100%; background: transparent; border: none; outline: none;
  color: #fff; font-family: 'NotoCond', sans-serif;
  font-size: 1.02rem; letter-spacing: .3px;
  padding: 13px 16px;
}
#input::placeholder { color: var(--dim); }
/* prazdny submit: zatras oknom na pisanie */
.input-wrap.shake { animation: inputShake .4s ease; }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  35% { transform: translateX(6px); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(3px); }
}
#send {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent); color: #161616;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s, opacity .2s;
}
#send:active { transform: scale(.92); }
#send:disabled { opacity: .4; pointer-events: none; }
body.locked #composer { display: none; }