/* The conversation box of the talking NPCs (ui/dialogue/), Animal Crossing style: a cream bubble at the bottom of the screen, the name
   of the NPC on a tilted tag, the text typed with the voice, a bouncing arrow, and the choices in a bubble of their own. */
.talk-box { position: absolute; left: 50%; bottom: 7%; width: min(760px, 92vw); transform: translateX(-50%); z-index: 40; pointer-events: auto; user-select: none; cursor: pointer; }
.talk-box.hidden { display: none; }
.talk-bubble { position: relative; min-height: 112px; padding: 26px 40px 30px; box-sizing: border-box; background: #fdf6e3; color: #6b4e2e; border-radius: 48px / 40px;
  box-shadow: 0 6px 0 #e8d9b4, 0 10px 26px rgba(40, 25, 5, 0.35); font: 600 21px/1.5 "Trebuchet MS", "Nunito", "Arial Rounded MT Bold", sans-serif; animation: talk-in 0.28s cubic-bezier(.34, 1.56, .64, 1); }
.talk-box.out .talk-bubble { animation: talk-out 0.2s ease-in forwards; }
.talk-name { position: absolute; left: 34px; top: -20px; padding: 4px 20px 5px; border-radius: 999px; background: var(--talk-accent, #ff8fc8); color: #fff; transform: rotate(-4deg);
  font: 800 17px/1.2 "Trebuchet MS", sans-serif; letter-spacing: 0.02em; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.talk-text .rest { visibility: hidden; }
.talk-arrow { position: absolute; left: 50%; bottom: 8px; width: 0; height: 0; margin-left: -11px; border: 11px solid transparent; border-top: 14px solid #f6a01a; border-bottom: 0;
  opacity: 0; animation: talk-arrow 0.7s ease-in-out infinite; }
.talk-box.ready .talk-arrow { opacity: 1; }
.talk-choices { position: absolute; right: 18px; bottom: calc(100% + 18px); min-width: 230px; padding: 12px 14px; background: #fdf6e3; border-radius: 26px; list-style: none; margin: 0;
  box-shadow: 0 5px 0 #e8d9b4, 0 8px 20px rgba(40, 25, 5, 0.3); animation: talk-in 0.22s cubic-bezier(.34, 1.56, .64, 1); }
.talk-choices.hidden { display: none; }
.talk-choices li { position: relative; padding: 5px 12px 5px 30px; border-radius: 14px; color: #6b4e2e; font: 700 18px/1.3 "Trebuchet MS", sans-serif; cursor: pointer; }
.talk-choices li.on { background: #fbe7b4; color: #4a3218; }
.talk-choices li.on::before { content: ''; position: absolute; left: 8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 12px solid #f6a01a; border-right: 0; animation: talk-point 0.6s ease-in-out infinite; }
@keyframes talk-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes talk-out { to { transform: scale(0.7); opacity: 0; } }
@keyframes talk-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes talk-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (max-width: 700px) { .talk-bubble { font-size: 17px; padding: 22px 26px 26px; min-height: 92px; } .talk-choices li { font-size: 16px; } }
/* The cinema of a conversation (ui/dialogue/talkCinema.js): bars, vignette, the HUD steps aside (body.talk-cine). */
.talk-cine { position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* (under #ui, after it in the stacking: the box stays over the bars) */
.talk-bar { position: absolute; left: 0; right: 0; height: 10.5vh; background: #07050c; transition: transform 0.65s cubic-bezier(.22, .9, .3, 1); }
.talk-bar.top { top: 0; transform: translateY(-101%); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.talk-bar.bottom { bottom: 0; transform: translateY(101%); box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.45); }
.talk-cine.on .talk-bar { transform: translateY(0); }
.talk-vignette { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; background: radial-gradient(ellipse 75% 70% at 50% 46%, rgba(0, 0, 0, 0) 55%, rgba(18, 8, 30, 0.55) 100%); }
.talk-cine.on .talk-vignette { opacity: 1; }
.talk-cine.nobars .talk-bar { transform: translateY(-101%) !important; } .talk-cine.nobars .talk-bar.bottom { transform: translateY(101%) !important; }
body.ui-hidden #ui, body.ui-hidden .npc-labels, body.ui-hidden .vfx-overlay { opacity: 0 !important; pointer-events: none !important; } /* key ] (ui/hideInterface.js) */
body.talk-cine #hud > :not(.talk-box), body.talk-cine .npc-labels, body.talk-cine .vfx-overlay { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease; }
body.talk-cine .talk-box { bottom: 3.5vh; }
.idle-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; } /* the fade through black between two idle views (scenes/idleViews.js) */
.talk-box.cut .talk-arrow { display: none; } /* a cutscene (TalkDialogue.playScene): the pages turn by themselves */
.talk-box.cut .talk-bubble::after { content: 'Échap : passer la scène'; position: absolute; right: 30px; bottom: 9px; font: 600 12px "Trebuchet MS", sans-serif; color: #b39c78; }