.hud-chatter{position:absolute;z-index:5;right:20px;bottom:118px;display:flex;align-items:center;gap:10px;width:min(342px,calc(100vw - 24px));padding:8px 13px 8px 8px;border:1px solid color-mix(in srgb,var(--chatter-color) 70%,#fff);border-radius:12px;background:linear-gradient(115deg,#071c31ef,#102c4beb);box-shadow:0 6px 18px #00132699,inset 0 1px 0 #ffffff25;color:#efffff;pointer-events:none}
.hud-chatter[hidden]{display:none!important}.hud-chatter.on{animation:chatterIn .22s ease-out both}
.hud-chatter img{flex:0 0 52px;width:52px;height:52px;object-fit:contain;border-radius:10px;background:color-mix(in srgb,var(--chatter-color) 15%,#06192f)}
.chatter-copy{display:grid;gap:3px;min-width:0}.chatter-copy strong{color:var(--chatter-color);font:900 12px/1.15 var(--display);letter-spacing:.06em}.chatter-copy>span{font:700 13px/1.35 var(--ui);overflow-wrap:anywhere}
@keyframes chatterIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.hud-chatter{right:8px;bottom:66px;width:min(255px,calc(100vw - 24px));padding:6px 9px 6px 6px;gap:7px}.hud-chatter img{flex-basis:38px;width:38px;height:38px}.chatter-copy strong{font-size:10px}.chatter-copy>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hud-chatter.on{animation:none}}
html.op-a11y-still .hud-chatter.on{animation:none}

/* A speech bubble from the animated octopus in its corner
   (game-feel.js .match-buddy): the tail points down at it. */
.hud-chatter{transform-origin:88% 100%}
.hud-chatter::after{content:"";position:absolute;right:36px;bottom:-8px;width:14px;height:14px;background:#0f2a48;border-right:1px solid color-mix(in srgb,var(--chatter-color) 70%,#fff);border-bottom:1px solid color-mix(in srgb,var(--chatter-color) 70%,#fff);transform:rotate(45deg)}
@media(max-width:760px){.hud-chatter::after{right:18px}}

/* THE CORNER (octopus-chatter.js applyCorner → html[data-buddy-corner]):
   bottom left by default, or any corner from Settings / the dashboard.
   The buddy and its bubble always move together; in a top corner they
   drop below the HUD's chips and the bubble hangs under the buddy with
   its tail pointing up at it. */
html[data-buddy-corner="bl"] #ui>.match-buddy,html[data-buddy-corner="tl"] #ui>.match-buddy{right:auto;left:20px}
html[data-buddy-corner="tl"] #ui>.match-buddy,html[data-buddy-corner="tr"] #ui>.match-buddy{bottom:auto;top:64px}
html[data-buddy-corner="bl"] .hud-chatter,html[data-buddy-corner="tl"] .hud-chatter{right:auto;left:20px;transform-origin:12% 100%}
html[data-buddy-corner="bl"] .hud-chatter::after,html[data-buddy-corner="tl"] .hud-chatter::after{right:auto;left:36px}
html[data-buddy-corner="tl"] .hud-chatter,html[data-buddy-corner="tr"] .hud-chatter{bottom:auto;top:160px}
html[data-buddy-corner="tr"] .hud-chatter{transform-origin:88% 0%}
html[data-buddy-corner="tl"] .hud-chatter{transform-origin:12% 0%}
html[data-buddy-corner="tl"] .hud-chatter::after,html[data-buddy-corner="tr"] .hud-chatter::after{bottom:auto;top:-8px;border-right:0;border-bottom:0;border-left:1px solid color-mix(in srgb,var(--chatter-color) 70%,#fff);border-top:1px solid color-mix(in srgb,var(--chatter-color) 70%,#fff)}
@media(max-width:760px){
  html[data-buddy-corner="bl"] #ui>.match-buddy,html[data-buddy-corner="tl"] #ui>.match-buddy{left:8px}
  html[data-buddy-corner="tl"] #ui>.match-buddy,html[data-buddy-corner="tr"] #ui>.match-buddy{top:52px}
  html[data-buddy-corner="bl"] .hud-chatter,html[data-buddy-corner="tl"] .hud-chatter{left:8px}
  html[data-buddy-corner="bl"] .hud-chatter::after,html[data-buddy-corner="tl"] .hud-chatter::after{left:18px}
  html[data-buddy-corner="tl"] .hud-chatter,html[data-buddy-corner="tr"] .hud-chatter{top:110px}
}