/* ═══════════════════════════════════════════════════════════════
   PALETTE — Krishna: peacock teal, midnight indigo, temple gold,
   marigold, and the ivory of a lamp-lit shrine.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ivory:#FCFAF5;      --ivory-2:#F6F1E7;
  --paper:#FFFFFF;
  --ink:#191528;        --ink-2:#3A3350;      --ink-3:#7B7391;
  --gold:#B08428;       --gold-2:#D4A94A;     --gold-soft:#EBD9A8;
  --peacock:#0E6C7C;    --peacock-2:#158FA3;
  --marigold:#D97B29;
  --line:rgba(25,21,40,.09);
  --line-2:rgba(25,21,40,.055);
  --glow:radial-gradient(1200px 620px at 50% -14%, rgba(212,169,74,.20) 0%, rgba(212,169,74,.05) 38%, transparent 68%);
  --shadow-sm:0 1px 2px rgba(25,21,40,.05), 0 4px 14px rgba(25,21,40,.045);
  --shadow-md:0 2px 6px rgba(25,21,40,.06), 0 16px 44px rgba(25,21,40,.09);
  --shadow-lg:0 30px 90px rgba(25,21,40,.22);
  --bubble:rgba(14,108,124,.055);
  --bubble-line:rgba(14,108,124,.13);
  --feather-core:#16233F;
  --veil:rgba(246,241,231,.72);
  --scrim:rgba(25,21,40,.34);
}
[data-theme="night"]{
  --ivory:#0A0912;      --ivory-2:#0F0D1A;
  --paper:#16131F;
  --ink:#EDE8F7;        --ink-2:#C4BCD8;      --ink-3:#8A81A3;
  --gold:#D9AE55;       --gold-2:#E8C97E;     --gold-soft:#5E4A22;
  --peacock:#3FB3C6;    --peacock-2:#5FCBDC;
  --marigold:#E09A55;
  --line:rgba(237,232,247,.10);
  --line-2:rgba(237,232,247,.06);
  --glow:radial-gradient(1200px 620px at 50% -14%, rgba(63,179,198,.14) 0%, rgba(217,174,85,.05) 40%, transparent 70%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 16px 44px rgba(0,0,0,.4);
  --shadow-lg:0 30px 90px rgba(0,0,0,.6);
  --bubble:rgba(63,179,198,.09);
  --bubble-line:rgba(63,179,198,.18);
  --feather-core:#0B1A33;
  --veil:rgba(10,9,18,.72);
  --scrim:rgba(5,4,10,.62);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column;
  background:var(--glow), linear-gradient(180deg,var(--ivory) 0%, var(--ivory-2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background-color .5s ease, color .5s ease;
}
::selection{background:rgba(212,169,74,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ── header ───────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:0 26px; height:78px;
  background:var(--veil); backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line-2);
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.mark{width:34px;height:34px;flex:0 0 auto}
.title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:25px; font-weight:500; letter-spacing:.2px; line-height:1.05;
  white-space:nowrap;
}
.title small{
  display:block; font-family:'Inter',sans-serif; font-size:9.5px; font-weight:500;
  letter-spacing:2.3px; text-transform:uppercase; color:var(--ink-3); margin-top:4px;
}
.hgroup{display:flex;align-items:center;gap:6px}

/* header controls: quiet until touched */
.pill{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border:1px solid transparent; border-radius:99px; background:transparent;
  color:var(--ink-2); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:450;
  cursor:pointer; transition:background .18s, border-color .18s, color .18s;
  white-space:nowrap;
}
.pill:hover{background:var(--bubble); border-color:var(--bubble-line); color:var(--ink)}
.pill.ico{width:34px;padding:0;justify-content:center}
.pill svg{display:block}
.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap select{
  appearance:none;-webkit-appearance:none;
  height:34px; padding:0 30px 0 13px; border-radius:99px;
  border:1px solid transparent; background:transparent; color:var(--ink-2);
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:450; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.selwrap:hover select{background:var(--bubble);border-color:var(--bubble-line)}
.selwrap select:focus{outline:none;border-color:var(--gold-2)}
.selwrap:after{
  content:""; position:absolute; right:13px; top:50%; width:6px; height:6px;
  border-right:1.4px solid var(--ink-3); border-bottom:1.4px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* ── reading column ───────────────────────────────────────── */
main{flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth}
.wrap{max-width:660px; margin:0 auto; padding:0 26px 8px}

/* opening shloka */
.invocation{padding:74px 0 54px; text-align:center; animation:veil 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes veil{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.invocation .deva{
  font-family:'Tiro Devanagari Sanskrit',serif;
  font-size:21px; line-height:2.05; color:var(--gold);
  letter-spacing:.3px;
}
.invocation .tr{
  font-family:'EB Garamond',Georgia,serif; font-style:italic;
  font-size:15.5px; line-height:1.85; color:var(--ink-3);
  margin:20px auto 0; max-width:470px;
}
.invocation .ref{
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:500;
  letter-spacing:2.6px; text-transform:uppercase; color:var(--gold);
  margin-top:20px; opacity:.75;
}
.rule{
  height:1px; margin:46px auto 0; max-width:190px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 22%,var(--gold-2) 50%,var(--gold-soft) 78%,transparent);
  opacity:.85;
}

/* ── messages ─────────────────────────────────────────────── */
#log{padding-bottom:26px}
.msg{animation:enter .5s cubic-bezier(.22,1,.36,1) both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.msg.user{
  margin:34px 0 34px auto; width:fit-content; max-width:80%;
  padding:12px 18px; border-radius:20px 20px 5px 20px;
  background:var(--bubble); border:1px solid var(--bubble-line);
  font-size:15px; line-height:1.6; color:var(--ink);
  letter-spacing:-.005em;
}
.msg.krishna{margin:0 0 42px; max-width:100%}
.msg.krishna .who{
  display:flex; align-items:center; gap:11px;
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:2.6px; text-transform:uppercase; color:var(--gold);
  margin-bottom:16px; opacity:.9;
}
.msg.krishna .who:after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--gold-soft),transparent);
}
.msg.krishna .body{
  display:block;
  font-family:'EB Garamond',Georgia,serif;
  font-size:19px; line-height:1.82; color:var(--ink);
  white-space:pre-wrap; letter-spacing:.002em;
}
.msg.krishna em{font-style:italic; color:var(--peacock)}
.msg.krishna strong{font-weight:500; color:var(--gold); letter-spacing:.01em}

/* verse reference — a quiet marginal note, not a badge */
.cite{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:500;
  letter-spacing:.9px; color:var(--gold); white-space:nowrap;
  padding-bottom:1px; border-bottom:1px solid var(--gold-soft);
  margin:0 1px; vertical-align:.12em;
}

.cut{
  display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2);
  font-family:'Inter',sans-serif; font-size:11.5px; color:var(--marigold); opacity:.85;
}
.msg.err .body,.msg.err{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.7;
  color:var(--marigold); white-space:normal;
}
.msg.err .who{color:var(--marigold)}
.msg.err .who:after{background:linear-gradient(90deg,rgba(217,123,41,.35),transparent)}

/* ── the living mor pankh ─────────────────────────────────────
   A real feather: quill, rachis, barbs fanning along it, and the
   ocellus at the tip. A breeze travels up the barbs; the eye
   breathes; the whole plume sways from its quill.
   ─────────────────────────────────────────────────────────── */
.feather{display:inline-block; line-height:0}
.feather svg{display:block; overflow:visible}
.feather .plume{
  transform-box:view-box; transform-origin:21px 88px;
  animation:plumeSway var(--sway,9s) ease-in-out infinite;
}
.feather .fib{
  animation:fibShimmer var(--breeze,5.4s) ease-in-out infinite;
}
.feather .eye{
  transform-box:view-box; transform-origin:62px 27px;
  animation:eyeBreathe var(--pulse,6s) ease-in-out infinite;
}
.feather .glint{
  transform-box:view-box; transform-origin:62px 27px;
  animation:glint var(--pulse,6s) ease-in-out infinite;
}
@keyframes plumeSway{
  0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)}
}
@keyframes fibShimmer{
  0%,100%{opacity:.62} 50%{opacity:1}
}
@keyframes eyeBreathe{
  0%,100%{transform:scale(.965)} 50%{transform:scale(1.045)}
}
@keyframes glint{
  0%,100%{opacity:.12} 45%{opacity:.6} 55%{opacity:.55}
}

/* header mark — always alive, but barely. Quickens while speaking. */
.mark{width:64px;height:64px;flex:0 0 auto;margin:-6px -8px -6px -10px}
.mark svg{width:64px;height:64px}
.mark{--sway:13s; --breeze:7.5s; --pulse:8s}
.mark.busy{--sway:4.2s; --breeze:2.1s; --pulse:2.6s}

/* thinking indicator */
.think{display:inline-flex; align-items:center; height:64px; margin:-6px 0 -6px -8px}
.think svg{width:64px;height:64px}
.think{--sway:4.2s; --breeze:2.1s; --pulse:2.6s}

/* ── openers ──────────────────────────────────────────────── */
.starters{display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 8px}
.starters button{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:450;
  color:var(--ink-2); background:transparent;
  border:1px solid var(--line); border-radius:99px; padding:9px 15px;
  cursor:pointer; transition:all .2s cubic-bezier(.22,1,.36,1);
  animation:enter .6s cubic-bezier(.22,1,.36,1) both;
}
.starters button:hover{
  color:var(--ink); border-color:var(--gold-2);
  background:var(--bubble); transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.starters button:nth-child(2){animation-delay:.05s}
.starters button:nth-child(3){animation-delay:.1s}
.starters button:nth-child(4){animation-delay:.15s}
.starters button:nth-child(5){animation-delay:.2s}
.starters button:nth-child(6){animation-delay:.25s}

/* ── composer ─────────────────────────────────────────────── */
footer{
  position:sticky; bottom:0; z-index:20; padding:12px 26px 20px;
  background:linear-gradient(180deg,transparent, var(--ivory-2) 32%);
}
.composer{
  max-width:660px; margin:0 auto;
  display:flex; align-items:flex-end; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:26px; padding:7px 7px 7px 20px;
  box-shadow:var(--shadow-md);
  transition:border-color .22s, box-shadow .22s;
}
.composer:focus-within{border-color:var(--gold-2); box-shadow:var(--shadow-md), 0 0 0 4px rgba(212,169,74,.11)}
#input{
  flex:1; border:0; background:transparent; color:var(--ink); resize:none;
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.6;
  padding:11px 0; min-height:44px; max-height:200px; outline:none;
  letter-spacing:-.005em;
}
#input::placeholder{color:var(--ink-3); opacity:.72}
#send{
  flex:0 0 auto; width:40px; height:40px; border:0; border-radius:99px; cursor:pointer;
  background:linear-gradient(160deg,var(--gold-2),var(--gold));
  color:#FFFDF7; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(176,132,40,.3);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, opacity .18s;
}
#send:hover:not(:disabled){transform:translateY(-1.5px); box-shadow:0 6px 18px rgba(176,132,40,.4)}
#send:active:not(:disabled){transform:translateY(0)}
#send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.hint{
  max-width:660px; margin:11px auto 0; text-align:center;
  font-family:'Inter',sans-serif; font-size:10.5px; line-height:1.6;
  color:var(--ink-3); opacity:.72; letter-spacing:.1px;
}

/* ── setup dialog ─────────────────────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--scrim); backdrop-filter:blur(10px); overflow-y:auto;
  animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay[hidden]{display:none}
.card{
  width:100%; max-width:520px; margin:auto;
  background:var(--paper); border:1px solid var(--line);
  border-radius:22px; padding:32px 30px 26px;
  box-shadow:var(--shadow-lg);
  animation:enter .42s cubic-bezier(.22,1,.36,1);
}
.card h2{
  margin:0 0 7px; font-family:'Cormorant Garamond',Georgia,serif;
  font-size:25px; font-weight:500; letter-spacing:.1px;
}
.card .sub{margin:0 0 22px; font-size:13px; line-height:1.65; color:var(--ink-3)}

.opt{
  display:block; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:8px; cursor:pointer;
  transition:border-color .18s, background .18s, transform .18s;
}
.opt:hover{border-color:var(--gold-soft); background:var(--bubble)}
.opt.sel{border-color:var(--gold-2); background:var(--bubble); box-shadow:0 0 0 3px rgba(212,169,74,.1)}
.opt input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.opt:focus-within{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(212,169,74,.12)}
.opt .row1{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;letter-spacing:-.01em}
.opt .row2{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.6}
.tag{
  font-size:9px; letter-spacing:1.3px; text-transform:uppercase; font-weight:600;
  padding:2.5px 8px; border-radius:99px;
}
.tag.free{background:rgba(14,108,124,.1); color:var(--peacock); border:1px solid rgba(14,108,124,.22)}
.tag.paid{background:transparent; color:var(--ink-3); border:1px solid var(--line)}

.fields{margin-top:20px; padding-top:20px; border-top:1px solid var(--line-2)}
.fields label{
  display:flex; align-items:center; gap:10px;
  font-size:9.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px;
}
.fields input{
  width:100%; background:var(--ivory-2); border:1px solid var(--line);
  color:var(--ink); border-radius:11px; padding:12px 14px; margin-bottom:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.fields input:focus{border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(212,169,74,.11)}
button.mini{
  background:none;border:none;padding:0; color:var(--peacock);
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; transition:color .18s;
}
button.mini:hover{color:var(--gold)}
button.mini:disabled{color:var(--ink-3);cursor:default}
.modelnote{font-size:11.5px;color:var(--ink-3);margin:-8px 0 15px;line-height:1.6}
.modelnote.bad{color:var(--marigold)}
.modelnote.good{color:var(--peacock)}
.keyerr{color:var(--marigold);font-size:12px;margin:0 0 13px;line-height:1.55}
.cardrow{display:flex;align-items:center;gap:9px;margin-top:6px}
.cardrow a{color:var(--peacock);font-size:12.5px;text-decoration:none;font-weight:450}
.cardrow a:hover{color:var(--gold)}
.btn{
  height:38px; padding:0 17px; border-radius:99px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  background:transparent; color:var(--ink-2); border:1px solid var(--line);
  transition:all .18s;
}
.btn:hover{border-color:var(--ink-3); color:var(--ink)}
.btn.primary{
  background:linear-gradient(160deg,var(--gold-2),var(--gold));
  color:#FFFDF7; border:0; font-weight:600;
  box-shadow:0 2px 10px rgba(176,132,40,.28);
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(176,132,40,.36)}
.fineprint{margin:18px 0 0; font-size:10.5px; color:var(--ink-3); line-height:1.7; white-space:pre-line; opacity:.85}

/* ── Responsive layout ───────────────────────────────────── */

/* Tablets + phones */
@media (max-width: 760px){

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    min-height:100dvh;
  }

  header{
    height:auto;
    min-height:0;
    padding:
      max(8px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      8px
      max(14px, env(safe-area-inset-left));

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:4px 8px;
  }

  /* Partha branding */
  .brand{
    flex:1 1 auto;
    min-width:120px;
    margin:0;
    gap:4px;
  }

  .mark{
    width:48px;
    height:48px;
    margin:-3px -4px -3px -7px;
    flex:0 0 48px;
  }

  .mark svg{
    width:48px;
    height:48px;
  }

  .title{
    font-size:clamp(20px, 6vw, 24px);
    line-height:1;
  }

  .title small{
    display:none;
  }

  /* Controls become their own full row */
  .hgroup{
    flex:1 0 100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    min-width:0;
  }

  .selwrap{
    margin-right:auto;
    min-width:0;
  }

  .selwrap select{
    width:auto;
    max-width:120px;
    height:36px;
    padding:0 27px 0 10px;
    font-size:12px;
    text-overflow:ellipsis;
  }

  .selwrap:after{
    right:10px;
  }

  .pill{
    height:36px;
    font-size:12px;
  }

  .pill.ico{
    width:36px;
    min-width:36px;
    padding:0;
  }

  #clear{
    padding:0 10px;
  }

  /* Main content */
  .wrap{
    width:100%;
    max-width:660px;
    padding-left:clamp(16px, 5vw, 26px);
    padding-right:clamp(16px, 5vw, 26px);
  }

  .invocation{
    padding:clamp(34px, 8vw, 50px) 0 32px;
  }

  .invocation .deva{
    font-size:clamp(15px, 4.5vw, 18px);
    line-height:1.95;
  }

  .invocation .tr{
    font-size:clamp(14px, 4vw, 15.5px);
    padding:0 4px;
  }

  .invocation .ref{
    font-size:9px;
    letter-spacing:2px;
  }

  .rule{
    margin-top:34px;
  }

  .starters{
    gap:9px;
    margin-top:30px;
  }

  .starters button{
    width:100%;
    text-align:left;
    font-size:13px;
    line-height:1.45;
    padding:11px 15px;
  }

  .msg.user{
    max-width:88%;
  }

  .msg.krishna .body{
    font-size:17.5px;
    line-height:1.75;
  }

  /* Composer */
  footer{
    width:100%;
    padding:
      10px
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .composer{
    width:100%;
    max-width:660px;
    padding-left:16px;
  }

  #input{
    min-width:0;
    font-size:16px; /* prevents iPhone Safari zoom */
  }

  .hint{
    padding:0 8px;
    font-size:10px;
  }

  .card{
    padding:24px 18px 20px;
  }
}


/* Small phones */
@media (max-width: 430px){

  header{
    padding-left:10px;
    padding-right:10px;
  }

  .mark{
    width:43px;
    height:43px;
    flex-basis:43px;
  }

  .mark svg{
    width:43px;
    height:43px;
  }

  .title{
    font-size:20px;
  }

  .hgroup{
    gap:2px;
  }

  .selwrap select{
    max-width:105px;
    font-size:11.5px;
  }

  .pill.ico{
    width:34px;
    min-width:34px;
    height:34px;
  }

  #clear{
    font-size:11.5px;
    padding:0 7px;
  }

  .wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .invocation{
    padding-top:30px;
  }

  .starters button{
    font-size:12.5px;
  }
}


/* Extremely narrow phones */
@media (max-width: 350px){

  .title{
    font-size:18px;
  }

  .mark{
    width:39px;
    height:39px;
    flex-basis:39px;
  }

  .mark svg{
    width:39px;
    height:39px;
  }

  .selwrap select{
    max-width:90px;
    font-size:11px;
  }

  #clear{
    font-size:0;
    width:38px;
    padding:0;
  }

  #clear::after{
    content:"New";
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}