/* ============================================================
   CHAT — Notebook page, Tom Riddle diary effect
   ============================================================ */

.chat-page {
  min-height: 100vh;
  padding: 110px 24px 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 10;
}

.notebook {
  /* Line height and where the pen sits in it: text baselines land on
     the ruled lines instead of floating between them. */
  --lh: 36px;
  --rule-at: 27px;
  --margin-x: 64px;
  --pad-l: 80px;
  --pad-r: 60px;
  --page: #F5F1E6;
  --rule: rgba(108,128,170,0.42);

  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--page);
  border-radius: 4px;
  box-shadow:
    0 30px 60px -30px rgba(40,30,15,0.45),
    0 12px 24px -12px rgba(40,30,15,0.20);
  /* clip, not hidden: hidden would make the notebook a scroll box and
     stop the composer from sticking to the bottom of the screen. */
  overflow: hidden;
  overflow: clip;
}

/* Decorative left binding — punched holes + faint shadow */
.notebook::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42px;
  background:
    linear-gradient(to right, rgba(40,30,15,0.10) 0, rgba(40,30,15,0.04) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.notebook .holes {
  position: absolute;
  top: 60px; bottom: 60px; left: 18px;
  width: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}
.notebook .holes::before,
.notebook .holes::after,
.notebook .holes .mid {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2a2a 0%, #0a0a0a 60%, #050505 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(0,0,0,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.35);
}

/* Inner page area — ruled paper */
/* Red margin line down the whole page */
.notebook-page,
.composer-wrap {
  background-image: linear-gradient(
    to right,
    transparent calc(var(--margin-x) - 1px),
    rgba(196,90,70,0.55) calc(var(--margin-x) - 1px),
    rgba(196,90,70,0.55) var(--margin-x),
    transparent var(--margin-x)
  );
  background-repeat: no-repeat;
}
.notebook-page {
  position: relative;
  padding: 56px var(--pad-r) 32px var(--pad-l);
}

/* Ruled area: the header sits in the blank band at the top of the page,
   like a real notebook, and the rules start where the writing does.
   Negative margins run the rules out to both edges of the page. */
.lined {
  margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));
  padding: 0 var(--pad-r) 0 var(--pad-l);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-at) - 1px),
    var(--rule) calc(var(--rule-at) - 1px),
    var(--rule) var(--rule-at),
    transparent var(--rule-at),
    transparent var(--lh)
  );
}

/* Paper grain on the notebook */
.notebook-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.notebook-page > * { position: relative; z-index: 2; }

/* Notebook head */
.notebook-head {
  margin-bottom: 24px;
  /* sit above first ruled line */
  padding-bottom: 8px;
}
.notebook-head .chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(40,30,15,0.55);
  margin-bottom: 14px;
}
.notebook-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.04;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.notebook-head h1 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  padding-bottom: 0.08em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M2 5.5C30 2.5 62 6.5 90 3.8S114 4 118 3' fill='none' stroke='%231A1916' stroke-width='2.2' stroke-linecap='round'/></svg>") left bottom / 100% 0.16em no-repeat;
}
.notebook-head .subhead {
  font-family: var(--font-hand); font-style: italic; font-size-adjust: 0.4;
  font-size: 22px;
  color: rgba(40,30,15,0.6);
  line-height: 1.3;
}

/* Messages */
.messages {
  font-family: var(--font-hand); font-style: italic; font-size-adjust: 0.4;
  font-size: 26px;
  line-height: var(--lh);
  color: #1a2240;
  letter-spacing: 0.005em;
  min-height: calc(var(--lh) * 8);
  transition: opacity 320ms ease, transform 360ms cubic-bezier(.5,0,.75,0), filter 320ms ease;
}
/* "tear out this page": the writing lifts off before the page clears */
.messages.tearing { opacity: 0; transform: translate(14px, -18px) rotate(1.4deg); filter: blur(1px); }

.msg {
  margin: 0 0 var(--lh) 0;
  padding: 0;
  overflow-wrap: break-word;
  hyphens: none;
}
.msg .speaker {
  display: inline;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;   /* keep the small tag from stretching the ruled line */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-right: 10px;
  vertical-align: 5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.msg-user .speaker {
  color: rgba(40,30,15,0.65);
  background: rgba(40,30,15,0.06);
}
.msg-ai .speaker {
  color: rgba(20,25,55,0.65);
  background: rgba(60,75,140,0.10);
}
.msg-user .content {
  font-style: italic;
  color: #4a4a4a;
}
.msg-ai .content {
  color: #1a2240;
  font-weight: 500;
}
.msg-error .content { color: #884330; }

/* Markdown bits, in pen: bold presses harder, code is printed */
.ink-word { display: inline-block; white-space: nowrap; }
.ink-b { font-weight: 700; color: #0f1633; }
.ink-i { font-style: italic; }
.ink-code {
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(60,75,140,0.09);
  vertical-align: 2px;
}
/* The code chip fades in with its first letter, not before it */
.ink-code { animation: inkWriteLite 300ms both; }
/* Underlines don't carry into inline-block words, so each letter carries
   its own, and it inks in with the letter. */
.msg-ai .content a { color: inherit; text-decoration: none; }
.msg-ai .content a .diary-char {
  text-decoration: underline;
  text-decoration-color: rgba(60,75,140,0.45);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.msg-ai .content a:hover .diary-char { text-decoration-color: currentColor; }

.retry-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 5px;
  margin-left: 10px;
  padding: 5px 10px;
  color: #884330;
  background: rgba(136,67,48,0.08);
  border: 1px solid rgba(136,67,48,0.3);
  border-radius: 999px;
  cursor: pointer;
}
.retry-btn:hover { background: rgba(136,67,48,0.14); }

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

/* Time of writing — pencilled in the margin after the ink dries. */
.msg .stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: rgba(40, 30, 15, 0.34);
  margin-left: 10px;
  vertical-align: 3px;
  white-space: nowrap;
  animation: stampIn 420ms ease-out both;
}
@keyframes stampIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg .stamp { animation: none; }
}

/* Character ink-on-paper animation */
.diary-char {
  display: inline;
  opacity: 0;
  animation: inkWrite 540ms cubic-bezier(0,.9,.35,1) forwards;
}

/* Word characters get inline-block so transforms apply */
.diary-char.word-char {
  display: inline-block;
  transform-origin: 50% 80%;
}

@keyframes inkWrite {
  /*
   * 0%  — ink nib just touches paper: tiny, almost black, blurry blob
   * 12% — ink spreads fast into paper fibres: briefly wider/taller than final glyph
   * 40% — ink dries, contracts, sharpens
   * 100%— fully settled letter
   */
  0% {
    opacity: 0;
    filter: blur(5px) brightness(0.06);
    transform: scaleX(.6) scaleY(.45) translateY(4px) rotate(var(--r, 0deg));
  }
  12% {
    opacity: 1;
    filter: blur(2.5px) brightness(.42);
    transform: scaleX(1.18) scaleY(1.14) translateY(-2px) rotate(var(--r, 0deg));
  }
  40% {
    filter: blur(.5px) brightness(.86);
    transform: scaleX(1.02) scaleY(1.02) translateY(.5px) rotate(var(--r, 0deg));
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scaleX(1) scaleY(1) translateY(0) rotate(var(--r, 0deg));
  }
}

/* Quill-nib cursor that pulses while Karunya is "writing" */
.msg-ai .content.writing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: .85em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -1px;
  border-radius: 1px;
  animation: nibPulse .48s ease-in-out infinite alternate;
}
@keyframes nibPulse {
  from { opacity: .8;  transform: scaleY(1); }
  to   { opacity: .2;  transform: scaleY(.55); }
}

/* Writing indicator */
.msg-writing .content { color: rgba(40,30,15,0.55); font-style: italic; }
.writing-dots span {
  display: inline-block;
  animation: dotPulse 1.4s infinite;
}
.writing-dots span:nth-child(2) { animation-delay: 0.18s; }
.writing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

/* Suggested prompts (empty state) */
/* Each row of chips is exactly one ruled line tall */
.suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 var(--lh) 0;
  align-items: center;
}
.suggested .hint {
  width: 100%;
  font-family: var(--font-hand); font-style: italic; font-size-adjust: 0.4;
  font-size: 22px;
  line-height: var(--lh);
  color: rgba(40,30,15,0.55);
}
.suggest-btn {
  height: calc(var(--lh) - 6px);
  margin: 3px 0;
  font-family: var(--font-hand); font-style: italic; font-size-adjust: 0.4;
  font-size: 19px;
  line-height: 1;
  color: #1a2240;
  background: rgba(255,250,235,0.6);
  border: 1.5px solid rgba(40,30,15,0.18);
  padding: 0 14px;
  border-radius: 24px;
  cursor: pointer;
  transition: background 180ms, transform 160ms var(--ease-out), border-color 180ms;
}
.suggest-btn:hover { background: rgba(60,75,140,0.10); border-color: rgba(40,30,15,0.35); transform: rotate(-1deg) translateY(-1px); }
.suggest-btn:active { transform: scale(0.97); }

/* Composer: a strip of the same page that stays at the bottom of the
   screen once the conversation is longer than the window. */
.composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 calc(-1 * var(--pad-r)) -32px calc(-1 * var(--pad-l));
  padding: 14px var(--pad-r) max(18px, env(safe-area-inset-bottom)) var(--pad-l);
  background-color: var(--page);
  box-shadow: 0 -14px 16px -12px var(--page);
}
.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.composer::before {
  content: '✒';
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%) rotate(-30deg);
  font-size: 22px;
  color: rgba(40,30,15,0.45);
  pointer-events: none;
}
.composer input {
  flex: 1;
  min-width: 0;
  height: var(--lh);
  border: none;
  outline: none;
  font-family: var(--font-hand); font-style: italic; font-size-adjust: 0.4;
  font-size: 26px;
  line-height: var(--lh);
  color: #1a2240;
  padding: 0;
  caret-color: #1a2240;
  /* the line you write on, a shade darker than the page rules */
  background: linear-gradient(
    to bottom,
    transparent calc(var(--rule-at) - 1px),
    rgba(60,75,140,0.5) calc(var(--rule-at) - 1px),
    rgba(60,75,140,0.5) calc(var(--rule-at) + 0.5px),
    transparent calc(var(--rule-at) + 0.5px)
  );
}
.composer input::placeholder {
  color: rgba(40,30,15,0.35);
  font-style: italic;
}
.composer input:disabled { opacity: 0.5; }

.send-btn {
  font-family: var(--font-mono);
  font-size: 18px;
  background: rgba(40,30,15,0.06);
  border: 1.5px solid rgba(40,30,15,0.20);
  color: #1a1a1a;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 180ms, color 180ms, border-color 180ms, transform 220ms var(--ease-out);
}
.send-btn:hover { background: rgba(40,30,15,0.12); }
/* Something to send: the button fills with ink */
.send-btn.ready { background: #1a2240; border-color: #1a2240; color: var(--page); transform: rotate(-8deg); }
.send-btn.ready:hover { background: #0f1633; }
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bottom hint */
.composer-hint {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(40,30,15,0.45);
}
.fresh-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(40,30,15,0.6);
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(40,30,15,0.35);
  padding: 0 0 1px;
  cursor: pointer;
}
.fresh-btn:hover { color: #1a1a1a; border-bottom-style: solid; }
.fresh-btn[hidden] { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .chat-page { padding: 90px 12px 40px; }
  .notebook { --lh: 34px; --rule-at: 25px; --margin-x: 44px; --pad-l: 56px; --pad-r: 24px; }
  .notebook-page { padding-top: 44px; padding-bottom: 28px; }
  .composer-wrap { margin-bottom: -28px; }
  .notebook .holes { left: 10px; top: 50px; bottom: 50px; }
  .notebook::before { width: 28px; }
  .notebook-head h1 { font-size: 38px; }
  .notebook-head .subhead { font-size: 18px; }
  .messages, .composer input { font-size: 22px; }
  .composer::before { left: -22px; font-size: 18px; }
  .suggest-btn { font-size: 17px; padding: 0 12px; }
}

@media (max-width: 420px) {
  .notebook { --rule-at: 24px; --pad-l: 46px; --pad-r: 16px; --margin-x: 36px; }
  .notebook-page { padding-top: 36px; padding-bottom: 24px; }
  .composer-wrap { margin-bottom: -24px; }
  .notebook-head h1 { font-size: 32px; }
  .messages, .composer input { font-size: 20px; }
}

/* Phones: the blur-and-scale ink is a filter per letter, which is a lot of
   paint for a long reply. Same timing, just opacity and a small drop. */
@keyframes inkWriteLite {
  from { opacity: 0; transform: translateY(3px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}
@media (hover: none) and (pointer: coarse) {
  .diary-char { animation-name: inkWriteLite; animation-duration: 360ms; }
  .notebook-page::before { mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .diary-char { animation: none; opacity: 1; }
  .messages { transition: none; }
}