/* Talking with a teller: a paper panel under the room scene, in the same large type as the readings (PC 24px / phone 22px). */
#chatPanel{--chat-ink:#26211e;--chat-muted:#443a31;--chat-wine:#54152b;--chat-gold:#c29b5d;box-sizing:border-box;position:relative;width:min(980px,100%);margin:0 auto;padding:0 0 22px;border:2px solid #b18c53;border-radius:12px;background:#fff8e9;box-shadow:0 24px 80px #10060477;color:var(--chat-ink);color-scheme:light;font:500 24px/1.85 var(--sans,sans-serif);letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;text-shadow:none;scroll-margin-top:20px}
#chatPanel *{box-sizing:border-box}

.chat-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"face titles left" "face titles back";align-items:center;gap:8px 18px;padding:20px 24px;border-bottom:3px solid var(--chat-gold);border-radius:10px 10px 0 0;background:linear-gradient(120deg,#6b2438,#3a0d1c);color:#fff5dd}
.chat-head-face,.chat-face,.chat-offer-face{display:block;flex:none;border-radius:50%;background-image:url('../characters.webp');background-size:482.667% 362%;background-position:var(--portrait-position);background-repeat:no-repeat;border:3px solid #d9b56f;box-shadow:0 0 0 3px #3a0d1c}
.chat-head-face{grid-area:face;width:84px;height:84px}
.chat-titles{grid-area:titles;min-width:0}
.chat-kicker{margin:0;color:#f0cf86;font:700 18px/1.5 var(--sans,sans-serif)}
.chat-titles h2{margin:2px 0 6px;color:#fff5dd;font:800 30px/1.35 var(--sans,sans-serif)}
.chat-tag{display:inline-block;padding:2px 12px;border:2px solid #e2bd72;border-radius:999px;color:#fff5dd;font:700 18px/1.5 var(--sans,sans-serif)}
.chat-left{grid-area:left;justify-self:end;padding:4px 14px;border-radius:999px;background:linear-gradient(135deg,#f8e2a8,#c99a4d);color:#2a120c;font:800 19px/1.5 var(--sans,sans-serif);white-space:nowrap}
.chat-back{grid-area:back;justify-self:end;min-height:50px;padding:8px 16px;border:2px solid #e2bd72;border-radius:999px;background:transparent;color:#fff5dd;font:700 19px/1.4 var(--sans,sans-serif);cursor:pointer}
.chat-back:hover,.chat-back:focus-visible{background:#ffffff1f}
.chat-note{margin:0;padding:12px 24px;background:#f6ead0;color:var(--chat-muted);font:500 18px/1.6 var(--sans,sans-serif)}

.chat-log{display:flex;flex-direction:column;gap:20px;padding:22px 24px 8px}
.chat-row{display:flex;align-items:flex-start;gap:14px;scroll-margin-top:24px}
.chat-face{width:58px;height:58px;margin-top:4px}
.is-teller .chat-bubble{flex:1 1 auto;max-width:calc(100% - 72px);padding:14px 20px 6px;border:1px solid #e0c897;border-radius:4px 16px 16px 16px;background:#fffdf6;box-shadow:0 3px 10px #54152b12}
.chat-speaker{margin:0 0 6px;color:var(--chat-wine);font:800 19px/1.5 var(--sans,sans-serif)}
.chat-narration{margin:0 0 12px;color:#9a4a12;font-weight:500}
.chat-speech{margin:0 0 12px;color:var(--chat-ink);font-weight:600}
.is-user{justify-content:flex-end}
.is-user .chat-bubble{max-width:82%;margin:0;padding:12px 20px;border-radius:16px 4px 16px 16px;background:linear-gradient(120deg,#6b2438,#4a1424);color:#fff5dd;font-weight:600;white-space:pre-wrap}
.chat-dots{display:inline-flex;gap:8px;margin:0 0 12px}
.chat-dots i{width:10px;height:10px;border-radius:50%;background:#c29b5d;animation:chat-dot 1.4s ease-in-out infinite}
.chat-dots i:nth-child(2){animation-delay:.2s}.chat-dots i:nth-child(3){animation-delay:.4s}
@keyframes chat-dot{0%,100%{opacity:.25}50%{opacity:1}}

.chat-suggestions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 0 72px}
.chat-chip{min-height:50px;padding:8px 16px;border:2px solid #c9a86f;border-radius:999px;background:#fff3dc;color:#3a1a22;font:650 19px/1.4 var(--sans,sans-serif);text-align:left;cursor:pointer}
.chat-chip:hover,.chat-chip:focus-visible{border-color:var(--chat-wine);background:#ffe9c2}
.chat-error{margin:0;padding:12px 16px;border-left:5px solid #7a1f3a;background:#fbe4e4;color:#7a1f3a;font:700 20px/1.6 var(--sans,sans-serif)}
.chat-notice{margin:0;padding:12px 16px;border-left:5px solid #b8843a;background:#fff3dc;color:#54152b;font:700 20px/1.6 var(--sans,sans-serif)}

/* "대화 10번 더 하기": the button, then the Toss payment area opening under it. */
.chat-end .chat-buy{display:block;width:100%;margin:4px 0 0}
.chat-pay-status{margin:8px 0 0;color:#7a1f3a;font:700 19px/1.6 var(--sans,sans-serif)}
.chat-pay-status:empty{display:none}
.chat-pay{margin-top:14px;padding:16px;border:1px solid #d9c49b;border-radius:10px;background:#fff}
.chat-pay-title{margin:0 0 8px;color:#3a1a22;font:800 21px/1.5 var(--sans,sans-serif)}
.chat-pay-note{margin:10px 0;color:#443a31;font:500 17px/1.6 var(--sans,sans-serif)}
.chat-pay .chat-primary{display:block;width:100%}
.chat-pay .rp-test-badge{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:#fde7c8;color:#7a3d12;font:700 16px/1.5 var(--sans,sans-serif)}
.chat-more{margin-top:18px;padding-top:14px;border-top:1px solid #e0c897}
.chat-more summary{color:#54152b;font:800 20px/1.6 var(--sans,sans-serif);cursor:pointer}
.chat-more .chat-offer-body{padding-top:12px}

.chat-composer{display:flex;gap:12px;align-items:stretch;padding:16px 24px 0}
.chat-composer textarea{flex:1 1 auto;min-height:72px;padding:12px 16px;border:2px solid #b89262;border-radius:10px;background:#fff;color:var(--chat-ink);font:600 21px/1.5 var(--sans,sans-serif);resize:vertical}
.chat-composer textarea:focus-visible{outline:3px solid #8a2a47;outline-offset:2px}
.chat-send,.chat-primary{min-width:120px;min-height:64px;padding:10px 22px;border:3px solid #d9b56f;border-radius:10px;background:linear-gradient(120deg,#6b2438,#4a1424);color:#fff5dd;font:800 22px/1.4 var(--sans,sans-serif);cursor:pointer}
.chat-send:focus-visible,.chat-primary:focus-visible,.chat-chip:focus-visible,.chat-back:focus-visible{outline:3px solid #ffe3a1;outline-offset:3px}
.chat-waiting{margin:16px 24px 0;color:var(--chat-muted);font:600 20px/1.6 var(--sans,sans-serif)}
.chat-end{margin:16px 24px 0;padding:20px 22px;border:2px solid var(--chat-gold);border-radius:10px;background:#fff3dc}
.chat-end .chat-end-title{margin:0 0 12px;color:var(--chat-wine);font:800 24px/1.5 var(--sans,sans-serif)}
.chat-end-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}
.chat-secondary{min-height:56px;padding:10px 20px;border:2px solid #b89262;border-radius:10px;background:#fff;color:#3a1a22;font:700 20px/1.4 var(--sans,sans-serif);cursor:pointer}
.chat-secondary:hover,.chat-secondary:focus-visible{border-color:#54152b;background:#fff3dc}

/* "Keep talking with a deep reading": the lead line, how it works, and one button per topic. Used in the chat's
   last box and in the pop-up shown when today's free conversation is already used. */
.chat-offer-lead{margin:0 0 10px;padding:12px 16px;border-left:6px solid #c29b5d;border-radius:0 8px 8px 0;background:#fff8e9;color:#54152b;font:800 22px/1.6 var(--sans,sans-serif)}
.chat-offer-how{margin:0 0 14px;color:#443a31;font:500 19px/1.7 var(--sans,sans-serif)}
.chat-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.chat-topic{min-height:58px;padding:10px 14px;border:2px solid #c9a86f;border-radius:10px;background:#fffdf6;color:#3a1a22;font:700 20px/1.4 var(--sans,sans-serif);text-align:center;cursor:pointer}
.chat-topic:hover,.chat-topic:focus-visible{border-color:#54152b;background:#ffe9c2}
.chat-topic.is-specialty{border-color:#8a2a47;background:#fff0e0}
.chat-topic em{display:inline-block;margin-left:8px;padding:0 9px;border-radius:999px;background:#54152b;color:#fff5dd;font:700 15px/1.7 var(--sans,sans-serif);font-style:normal;vertical-align:2px}
.chat-topic:focus-visible,.chat-secondary:focus-visible{outline:3px solid #8a2a47;outline-offset:2px}

.chat-offer{box-sizing:border-box;width:min(760px,calc(100% - 32px));max-height:calc(100% - 40px);padding:0;border:2px solid #b18c53;border-radius:12px;background:#fff8e9;box-shadow:0 24px 80px #100604aa;color:#26211e;color-scheme:light;font:500 22px/1.75 var(--sans,sans-serif);letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;overscroll-behavior:contain}
.chat-offer *{box-sizing:border-box}
.chat-offer::backdrop{background:#100604b3}
.chat-offer-inner{padding:0 0 22px}
.chat-offer-head{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:3px solid #c29b5d;background:linear-gradient(120deg,#6b2438,#3a0d1c)}
.chat-offer-face{width:64px;height:64px}
.chat-offer-title{margin:0;color:#fff5dd;font:800 26px/1.4 var(--sans,sans-serif);outline:none}
.chat-offer .chat-offer-body{padding:18px 22px 0}
.chat-offer .chat-offer-lead{background:#fff3dc}
.chat-offer-note{margin:14px 22px 0;color:#443a31;font:500 18px/1.6 var(--sans,sans-serif)}
.chat-offer .chat-end-actions{margin:14px 22px 0}

@media(max-width:720px){
  #chatPanel{font-size:22px;border-radius:10px}
  .chat-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"face titles" "left left" "back back";padding:16px}
  .chat-head-face{width:64px;height:64px}
  .chat-titles h2{font-size:25px}
  .chat-left{justify-self:start}
  .chat-back{justify-self:stretch}
  .chat-note{padding:10px 16px}
  .chat-log{padding:18px 14px 6px;gap:16px}
  .chat-face{width:44px;height:44px}
  .is-teller .chat-bubble{max-width:calc(100% - 56px);padding:12px 14px 4px}
  .is-user .chat-bubble{max-width:90%}
  .chat-suggestions{margin-left:0}
  .chat-composer{flex-direction:column;padding:14px 14px 0}
  .chat-send{width:100%}
  .chat-waiting,.chat-end{margin:14px 14px 0}
  .chat-end{padding:16px 14px}
  .chat-offer-lead{font-size:20px}
  .chat-offer-how{font-size:18px}
  .chat-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat-topic{font-size:19px;padding:10px 8px}
  .chat-end-actions .chat-secondary{flex:1 1 100%}
  .chat-offer{width:calc(100% - 24px);font-size:20px}
  .chat-offer-head{padding:14px 16px;gap:12px}
  .chat-offer-face{width:52px;height:52px}
  .chat-offer-title{font-size:22px}
  .chat-offer .chat-offer-body{padding:14px 16px 0}
  .chat-offer-note{margin:12px 16px 0}
  .chat-offer .chat-end-actions{margin:12px 16px 0}
}
@media(prefers-reduced-motion:reduce){.chat-dots i{animation:none;opacity:.7}}

/* The way in from a paid reading: the strongest of the bottom buttons. */
#readingDemo .rp-talk{border-color:#d9b56f;background:linear-gradient(120deg,#6b2438,#4a1424);color:#fff5dd}
#readingDemo .rp-talk::before{content:"☾";margin-right:8px;color:#f0cf86}