/* A little room for local, character-led conversation. */
.storybook-talk-link,.guide-talk-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; font-size: .9rem; font-weight: 700; color: var(--forest); text-underline-offset: 5px; }
.storybook-talk-link { margin-top: 14px; }
.guide-talk-link { margin: -13px 0 16px; padding: 0 8px; }
.conversation-introduction { max-width: none; padding-bottom: 14px; }
.conversation-room { display: grid; grid-template-columns: minmax(235px, 300px) minmax(0, 1fr); gap: 18px; align-items: stretch; min-height: 680px; }
.conversation-character { isolation: isolate; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px 0; border: 1px solid #d7c8ad; border-radius: 24px; background: linear-gradient(145deg, #e1ecd9 0%, #f8eccc 70%, #e9d3ac 100%); box-shadow: 0 9px 25px #70523220; }
.conversation-character::before { content: ''; position: absolute; z-index: -1; bottom: 155px; left: 18%; right: 18%; height: 245px; border: 11px solid #ca9b6a; border-bottom-width: 17px; border-radius: 140px 140px 8px 8px; background: linear-gradient(165deg, #e0ebce 0%, #bcd7c1 52%, #89b6a6 53%, #b3c9a3 100%); box-shadow: inset 0 3px 7px #738b6b45, 0 5px 12px #7359392e; }
.conversation-character::after { content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 25px; height: 94px; border-radius: 50%; background: radial-gradient(ellipse, #fff7e8aa 0%, #d5ae8799 65%, transparent 67%); }
.conversation-character .eyebrow { align-self: stretch; text-align: left; }
.conversation-character-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 100%; }
.conversation-character-buttons button,.conversation-mode button { border: 1px solid #c8b598; background: #fffaf0dc; box-shadow: inset 0 2px 2px #fff; font-size: .78rem; padding: 8px 11px; }
.conversation-character-buttons .active,.conversation-mode .active { color: #fffdf8; background: linear-gradient(180deg, #517660, #355b46); border-color: #355b46; box-shadow: inset 0 2px 2px #ffffff38, 0 4px 10px #45694a36; }
.conversation-character h2 { margin: 26px 0 7px; font-family: var(--serif); font-size: 1.55rem; }
.conversation-character-note { min-height: 74px; max-width: 240px; font-size: .82rem; line-height: 1.9; margin-bottom: 0; }
.conversation-character > img { display: block; width: min(100%, 230px); height: 330px; margin-top: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(8px 9px 6px #705a3d59); }
.conversation-credit { align-self: stretch; margin: 0 -18px; padding: 10px 8px 12px; background: #fff8e8d9; font-size: .7rem; line-height: 1.5; }
.conversation-panel { min-width: 0; display: flex; flex-direction: column; border: 1px solid #d8c8af; border-radius: 24px; overflow: hidden; background: #fffaf2; box-shadow: 0 9px 25px #7052321c; }
.conversation-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid #e1d3bc; background: linear-gradient(180deg, #fffaf0, #f6ebd8); }
.conversation-mode { display: flex; gap: 8px; flex-wrap: wrap; }
.conversation-panel-head .text-button { font-size: .78rem; padding: 8px; }
.conversation-log { flex: 1; min-height: 350px; max-height: 560px; overflow-y: auto; padding: 27px clamp(16px, 3vw, 38px); scroll-behavior: smooth; background: radial-gradient(circle at 100% 0%, #e9f0e5 0, transparent 240px), radial-gradient(circle at 0% 100%, #f7e8da 0, transparent 240px), #fffaf2; }
.conversation-message { max-width: 85%; margin: 0 0 18px; }
.conversation-message.visitor { margin-left: auto; }
.conversation-speaker { margin: 0 0 4px; color: #69594f; font-size: .73rem; font-weight: 700; }
.conversation-message.visitor .conversation-speaker { text-align: right; }
.conversation-message > p:not(.conversation-speaker) { display: inline-block; max-width: 100%; margin: 0; padding: 13px 18px; border: 1px solid #d6c7af; border-radius: 8px 19px 19px 19px; background: linear-gradient(155deg, #fffefa, #f6eddf); box-shadow: 0 4px 12px #6d553216; font-size: .91rem; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-line; }
.conversation-message.visitor > p:not(.conversation-speaker) { float: right; clear: both; border-color: #b6d0b5; border-radius: 19px 8px 19px 19px; background: linear-gradient(145deg, #e4f0df, #d8e8d5); }
.conversation-message.visitor::after { content: ''; display: block; clear: both; }
.conversation-recommendations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.conversation-work { min-width: 0; border: 1px solid #d7c2a3; border-left: 5px solid #7e9d79; border-radius: 13px; padding: 15px; background: #fffdf8; box-shadow: 3px 4px 0 #e9ddca; }
.conversation-work.palette-clay { border-left-color: #c6786a; }.conversation-work.palette-indigo { border-left-color: #7b8daa; }.conversation-work.palette-ochre { border-left-color: #cba05b; }.conversation-work.palette-rose { border-left-color: #ba8291; }.conversation-work.palette-slate { border-left-color: #78939a; }
.conversation-work-kicker { margin: 0 0 4px!important; padding: 0!important; border: 0!important; background: none!important; box-shadow: none!important; font-family: Georgia,serif; font-size: .66rem!important; letter-spacing: .08em; color: #8f7458; }
.conversation-work h3 { margin: 0 0 5px; font-family: var(--serif); font-size: .97rem; overflow-wrap: anywhere; }
.conversation-work h3 a { color: var(--ink); }
.conversation-work > p:not(.conversation-work-kicker) { margin: 0 0 6px; font-size: .77rem; line-height: 1.6; }
.conversation-work small { font-size: .69rem; color: var(--muted); }
.conversation-appears a { color: var(--forest); }
.conversation-bottom { padding: 15px 22px 18px; border-top: 1px solid #e1d3bc; background: #fffaf0; }
.conversation-suggestions { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.conversation-chip { min-height: 40px; padding: 6px 13px; background: #f4eee2; border-color: #d0bfa6; font-size: .75rem; font-weight: 500; }
.conversation-form label { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 700; }
.conversation-form > div { display: flex; gap: 9px; }
.conversation-form input { min-width: 0; flex: 1; min-height: 48px; padding: 10px 14px; border: 1px solid #bea98b; border-radius: 15px; background: #fffdfa; color: var(--ink); font: inherit; }
.conversation-form button { min-width: 78px; }
.conversation-disclosure { line-height: 1.6; margin: 11px 0 0; }
.conversation-back { margin: 20px 0; font-size: .84rem; }
@media (max-width: 900px) {
  .conversation-room { grid-template-columns: 240px minmax(0, 1fr); }
  .conversation-character > img { height: 290px; }
  .conversation-recommendations { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .conversation-room { grid-template-columns: 1fr; min-height: 0; }
  .conversation-character { min-height: 235px; align-items: flex-start; padding: 18px 15px 0; text-align: left; }
  .conversation-character::before { top: 36px; bottom: auto; left: auto; right: 22px; width: 112px; height: 160px; border-width: 7px; border-bottom-width: 10px; }
  .conversation-character-buttons { position: relative; z-index: 1; justify-content: flex-start; width: 70%; }
  .conversation-character h2 { position: relative; z-index: 1; width: 60%; margin: 15px 0 5px; font-size: 1.23rem; }
  .conversation-character-note { position: relative; z-index: 1; width: 52%; min-height: 0; padding-bottom: 30px; font-size: .76rem; }
  .conversation-character > img { position: absolute; right: 8px; bottom: 30px; width: 38%; height: 190px; }
  .conversation-credit { z-index: 1; margin-top: auto; width: calc(100% + 30px); }
  .conversation-panel { min-height: 630px; }
  .conversation-log { max-height: 430px; }
}
@media (max-width: 390px) {
  .conversation-character-buttons { width: 78%; }
  .conversation-character-buttons button { min-height: 38px; font-size: .72rem; padding: 6px 8px; }
  .conversation-panel-head { padding: 12px; }
  .conversation-message { max-width: 95%; }
  .conversation-bottom { padding: 13px; }
  .conversation-form button { min-width: 65px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .conversation-log { scroll-behavior: auto; } }
.conversation-sources { margin: 10px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line, #dfcfb7); }
.conversation-sources li { margin: 0 0 12px; overflow-wrap: anywhere; }
.conversation-sources small { display: block; margin-top: 4px; font-size: .7rem; line-height: 1.55; }
.conversation-sources a { text-underline-offset: 3px; }
#site-knowledge-status { overflow-wrap: anywhere; margin-top: 14px; }
.word-record-card { margin-bottom: 18px; padding: 14px; border: 1px solid var(--line, #dfcfb7); border-radius: 16px; background: #fffdf7; }
.word-record-card h3 { margin: 0 0 8px; font-size: 1rem; }
.word-record-card label { display: block; margin: 12px 0 6px; font-size: .8rem; }
.word-record-card textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; min-height: 108px; padding: 10px; border: 1px solid #c9b99c; border-radius: 8px; font: inherit; background: #fff; color: inherit; }
.word-record-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.word-record-actions button { min-height: 44px; min-width: 76px; }
.word-record-error { color: #8f3828; font-size: .78rem; }
.word-record-card p { overflow-wrap: anywhere; }