/* 2026-10-15 말풍선 수정안: 실제 화자 꼬리와 얼굴·이름을 함께 표시한다. */
#talk{position:fixed;left:0;right:0;bottom:0;z-index:28;display:none;pointer-events:none;
  padding:26px 24px max(24px,env(safe-area-inset-bottom))}
#talk.open{display:block}
#talk .tkBox{pointer-events:auto;position:relative;width:min(680px,100%);margin:0 auto;outline:none;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  gap:12px 22px;min-height:108px;max-height:35vh;padding:18px 24px 26px;
  border:2px solid #7d8fa7;border-radius:24px;background:#fff;
  box-shadow:0 10px 28px rgba(20,30,45,.18)}
#talk.choosing .tkBox{width:min(900px,100%);grid-template-columns:minmax(0,1fr) minmax(220px,42%)}
#talk:not(.choosing) .tkBox{cursor:pointer}
#talk .tkBox::before{content:'';position:absolute;top:-12px;left:var(--speech-x,64px);
  width:20px;height:20px;transform:translateX(-50%) rotate(45deg);
  border-left:2px solid #7d8fa7;border-top:2px solid #7d8fa7;background:#fff;pointer-events:none}
#talk .tkWho{position:relative;grid-column:1/-1;max-width:100%;width:fit-content;
  display:flex;align-items:center;gap:10px;margin:0;padding:5px 12px 5px 5px;
  border:1px solid #d7e3f0;border-radius:24px;background:#eef3f9;color:var(--ink)}
#talk .tkWho>span:last-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0}
#talk .tkFace{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  overflow:hidden;background:#fff;font-size:20px}
#talk .tkFace img{width:100%;height:100%;object-fit:cover;display:block}
#talk .tkWho b{font-size:14px;font-weight:700;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#talk .tkWho small{font-size:12px;color:var(--mute);white-space:normal;overflow-wrap:anywhere}
#talk .tkWho small:empty{display:none}
#talk .tkTx{min-width:0;min-height:0;align-self:stretch;overflow:auto;margin:0;padding-right:4px;
  font-size:17px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
#talk .tkOpts{min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:2px}
#talk .tkOpts:empty{display:none}
#talk .tkOpts .btn{position:relative;text-align:left;border-radius:12px;min-height:44px;flex-shrink:0;
  padding:9px 12px 9px 36px;font-size:14px;line-height:1.4;width:100%;background:#f7f9fc}
#talk .tkOpts .btn::before{content:attr(data-n);position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--mute);font-size:12px;font-weight:600}
#talk .tkOpts .btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
#talk .tkOpts .btn.pri::before{color:#fff}
#talk .tkOpts .btn:not(.pri):hover,#talk .tkOpts .btn:not(.pri):focus-visible{background:var(--soft);border-color:var(--mute)}
#talk .tkOpts .btn:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#talk .tkOpts .btn:disabled{opacity:.55;cursor:default}
#talk:not(.choosing) .tkBox::after{content:'계속 ›';position:absolute;right:24px;bottom:7px;font-size:11px;color:var(--mute)}
#talk .tkBar{height:5px;border-radius:3px;background:var(--soft);margin-top:4px;overflow:hidden;flex:none}
#talk .tkBar i{display:block;height:100%;width:100%;background:var(--bad)}
#talk .tkIn{display:flex;gap:6px;width:100%}
#talk .tkIn input{flex:1 1 auto;min-width:0;padding:9px 12px;border:1px solid var(--line2);border-radius:12px;
  font:inherit;font-size:14px;line-height:1.4;background:#fff;color:var(--ink)}
#talk .tkIn input:focus{outline:2px solid var(--acc);outline-offset:0}
#talk .tkIn input:disabled{opacity:.55}
#talk .tkOpts .tkIn .btn{flex:none;width:auto;padding:9px 14px}
#talk .tkOpts .tkIn .btn::before{content:none}
#talk.me .tkBox,#talk.me .tkBox::before{border-color:#607c9e;background:#f7faff}
#talk.me .tkWho,#talk.me .tkTx{color:var(--ink)}
body.talk-on #pcHint,body.talk-on #toasts,body.talk-on #phoneBar{display:none}
#dialog{border:2px solid #7d8fa7;border-radius:24px;box-shadow:0 10px 28px rgba(20,30,45,.18)}
#dialog::before{content:'';position:absolute;left:48px;top:-12px;width:20px;height:20px;transform:rotate(45deg);
  background:#fff;border-left:2px solid #7d8fa7;border-top:2px solid #7d8fa7;pointer-events:none}
#dialog .who{color:var(--ink);font-weight:700}
@media(max-width:760px){
  #talk{padding:26px 12px max(12px,env(safe-area-inset-bottom))}
  #talk .tkBox,#talk.choosing .tkBox{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    gap:10px;padding:14px 16px 24px;max-height:56vh;border-radius:20px}
  #talk .tkTx{font-size:15.5px;max-height:17vh}
  #talk .tkOpts{max-height:24vh}
  #talk .tkOpts .btn{font-size:14px;padding:10px 12px 10px 40px}
  #talk .tkWho{padding-right:10px}
  #talk .tkFace{width:30px;height:30px}
}