/* Kaila chat page (/chat.php) — 14 Nov 2026. Same palette and fonts as style.css / bible-reader.css.
   Layout keeps the guardian's face clear: title sits above it, the chat card sits below it,
   and the card scrolls inside itself so the page never slides over the artwork. */
.kc-page{position:relative;z-index:2;display:flex;flex-direction:column;max-width:44rem;margin:0 auto;
  min-height:calc(100dvh - 4.5rem);padding:.9rem 0 3rem}
.kc-head{text-align:center}
.kc-title{margin:0;font-family:Cinzel,serif;font-size:clamp(1.35rem,3.6vw,1.8rem);color:#f0e8d4;letter-spacing:.04em}
.kc-lead{margin:.2rem auto 0;max-width:30rem;font-size:.9rem;line-height:1.45;color:rgba(220,210,190,.78)}
/* the card starts below the angel's face (face sits about 25–38% down the screen) */
.kc-card{margin-top:max(1rem,calc(44dvh - 9rem));flex:1 1 auto;display:flex;flex-direction:column;min-height:18rem;
  max-height:calc(56dvh + 2rem);border-radius:14px;border:1px solid rgba(212,168,75,.28);background:rgba(6,4,12,.66);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.kc-log{flex:1 1 auto;overflow-y:auto;padding:1rem 1rem .5rem;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:thin}
.kc-msg{display:flex;margin:0 0 .75rem}
.kc-user{justify-content:flex-end}
.kc-bubble{max-width:88%;padding:.65rem .85rem;border-radius:14px;line-height:1.55;font-size:.97rem;color:#ebe3d2;overflow-wrap:anywhere}
.kc-bubble p{margin:0 0 .5rem}.kc-bubble p:last-child{margin-bottom:0}
.kc-bot .kc-bubble{background:rgba(255,255,255,.04);border:1px solid rgba(212,168,75,.16);border-top-left-radius:4px}
.kc-user .kc-bubble{background:rgba(212,168,75,.16);border:1px solid rgba(212,168,75,.3);border-top-right-radius:4px;color:#f4f0e6}
.kc-bubble a{color:#e8c56a;text-decoration:none}.kc-bubble a:hover{text-decoration:underline}
.kc-cite{font-size:.75em;font-weight:700;vertical-align:super;line-height:0;padding:0 .1em}
.kc-thinking{display:inline-flex;align-items:center;gap:.5rem;color:rgba(212,168,75,.9);font-size:.9rem;font-style:italic}
.kc-dots{display:inline-flex;gap:.25rem}
.kc-dots i{width:.38rem;height:.38rem;border-radius:50%;background:#d4a84b;opacity:.3;animation:kcDot 1.2s infinite ease-in-out}
.kc-dots i:nth-child(2){animation-delay:.2s}.kc-dots i:nth-child(3){animation-delay:.4s}
@keyframes kcDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.kc-caret{display:inline-block;width:.45em;height:1em;margin-left:.1em;vertical-align:-.12em;background:rgba(212,168,75,.6);animation:kcBlink 1s steps(2) infinite}
@keyframes kcBlink{50%{opacity:0}}
.kc-sources{margin:.6rem 0 0;padding:.5rem 0 0;border-top:1px solid rgba(212,168,75,.15);font-size:.82rem;line-height:1.45;list-style:none}
.kc-sources li{margin:.15rem 0;color:rgba(200,190,170,.8)}
.kc-sources .kc-n{display:inline-block;min-width:1.4em;color:#d4a84b;font-weight:700}
.kc-sources .kc-alt{margin-left:.35rem;font-size:.92em;color:rgba(212,168,75,.75)}
.kc-snip{display:block;margin:.1rem 0 .35rem 1.4em;color:rgba(220,210,190,.75)}
.kc-map{display:flex;gap:.7rem;align-items:center;margin:.65rem 0 0;padding:.5rem;border-radius:10px;border:1px solid rgba(212,168,75,.22);
  background:rgba(8,6,14,.55);text-decoration:none;color:#ebe3d2}
.kc-map:hover{border-color:rgba(212,168,75,.5)}
.kc-map img{width:5.5rem;height:4.1rem;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#111}
.kc-map strong{display:block;font-family:Cinzel,serif;font-size:.86rem;color:#e8c56a}
.kc-map span{display:block;font-size:.8rem;color:rgba(220,210,190,.75);line-height:1.35}
.kc-suggest{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.kc-suggest button{-webkit-appearance:none;appearance:none;border:1px solid rgba(212,168,75,.3);background:rgba(8,6,14,.6);color:rgba(240,232,212,.88);
  border-radius:999px;padding:.38rem .75rem;font:inherit;font-size:.84rem;cursor:pointer}
.kc-suggest button:hover{background:rgba(212,168,75,.12);color:#e8c56a}
.kc-form{display:flex;gap:.5rem;align-items:flex-end;padding:.65rem .75rem;border-top:1px solid rgba(212,168,75,.18);background:rgba(4,3,9,.55)}
.kc-input{flex:1 1 auto;min-width:0;resize:none;max-height:7.5rem;padding:.62rem .9rem;border-radius:18px;border:1px solid rgba(212,168,75,.35);
  background:rgba(8,6,14,.8);color:#f0e8d4;font:inherit;font-size:1rem;line-height:1.4;outline:none}
.kc-input:focus{border-color:rgba(212,168,75,.7)}
.kc-send{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,220,140,.35);cursor:pointer;
  color:#1a1208;background:linear-gradient(180deg,#f0d080,#d4a84b);display:inline-flex;align-items:center;justify-content:center}
.kc-send:disabled{opacity:.45;cursor:default}
.kc-note{margin:0;padding:.1rem .9rem .55rem;font-size:.7rem;color:rgba(180,170,150,.55);text-align:center;background:rgba(4,3,9,.55)}
.kc-noscript{position:relative;z-index:2;text-align:center}
@media (max-width:600px){
  .kc-page{padding-top:.6rem;padding-bottom:2.6rem;min-height:calc(100dvh - 4rem)}
  .kc-lead{font-size:.84rem}
  .kc-card{margin-top:max(.75rem,calc(36dvh - 7.5rem));max-height:none;border-radius:12px}
  .kc-bubble{max-width:94%;font-size:.95rem}
  .kc-log{padding:.8rem .7rem .4rem}
}
@media (prefers-reduced-motion:reduce){.kc-dots i,.kc-caret{animation:none}.kc-log{scroll-behavior:auto}}