/* Mini feed and deliberate conversation view, inspired by PocketMMO UIChat. */
body #chat { opacity: 1; }
#chat-toggle { display: none; }
#chat-compose { display: flex; gap: 6px; align-items: stretch; }
body #chat-input { flex: 1; min-width: 0; margin: 0; }
#chat-send { border: var(--edge); border-radius: 4px; background: #29443f; color: var(--cream); padding: 6px 12px; }
/* Let the avatar silhouette sit directly over the world. */
body #hud, body #hud-portrait { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
body #hud-icon { mask-image: none; -webkit-mask-image: none; filter: drop-shadow(0 2px 2px #07151ba0); }
body #hud-name { text-shadow: 0 1px 3px #000, 0 0 6px #000; }
body .hud-info .chip { background: none; border: 0; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
@media (orientation: landscape) and (max-height: 600px) {
  body #hud { width: 188px; padding: 0; }
  body #hud-portrait { width: 40px; height: 44px; overflow: visible; }
  body #hud-icon { width: 48px; height: 54px; top: -4px; left: -5px; }
  body #hud-level { left: 0; bottom: -2px; border-radius: 8px; background: #17272bd9; }
  body .hud-info { margin-left: 47px; }
  body #chat, body #chat:focus-within { width: 220px; bottom: 72px; z-index: 5; background: none; }
  #chat-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px;
    padding: 5px 9px; border: 1px solid #a7b8aa30; border-radius: 4px 4px 0 0; background: #10232bd9;
    color: #d9e2d8; font: 500 11px var(--body); cursor: pointer; }
  body #chat:not(.is-open) #chat-compose { display: none; }
  body #chat:not(.is-open) #log { display: block; max-height: 46px; overflow: hidden; pointer-events: none;
    background: linear-gradient(90deg,#10232bba,#10232b60); padding: 3px 8px; }
  body #chat:not(.is-open) #log .log-line { display: none; }
  body #chat:not(.is-open) #log .log-line:nth-last-child(-n+2) { display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; opacity: .9; }
  body #chat .log-line { background: none; border: 0; border-radius: 0; padding: 2px 0; margin: 0;
    font: 11px/1.45 var(--body); text-shadow: 0 1px 2px #000; }
  body #chat.is-open, body #chat.is-open:focus-within { position: fixed; top: var(--safe-t); bottom: var(--safe-b);
    left: var(--safe-l); width: min(440px,calc(100vw - var(--safe-l) - var(--safe-r))); z-index: 65;
    display: flex; flex-direction: column; gap: 0; padding: 12px; border: var(--edge); border-radius: 5px;
    background: #11252bf5; box-shadow: 0 12px 30px #0007; }
  body #chat.is-open #chat-toggle { flex: none; min-height: 40px; border: 0; border-bottom: var(--edge); border-radius: 0;
    padding: 0 0 10px; margin-bottom: 8px; background: none; font: 18px var(--title); }
  body #chat.is-open #chat-toggle>span:last-child { font-size: 0; }
  body #chat.is-open #chat-toggle>span:last-child::after { content: '×'; font: 24px var(--body); padding: 0 10px; }
  body #chat.is-open #log { display: block; flex: 1; min-height: 0; max-height: none; overflow-y: auto; pointer-events: auto; }
  body #chat.is-open #log .log-line { opacity: 1; font-size: 13px; padding: 5px 0; overflow-wrap: anywhere; }
  body #chat.is-open #chat-compose { flex: none; padding-top: 10px; }
  body #chat.is-open #chat-input { height: 44px; min-height: 44px; font-size: 16px; background: #08191f; }
  body #chat-send { min-height: 44px; font-size: 12px; }
}