/* Chat box (roadmap item 59, src/chat-ui.js): transparent at the bottom left (ถาม 6), solid while in use.
   Desktop: above the skill bar where the two would meet, at the very bottom once the screen is wide
   enough; touch screens: a panel opened by the 💬 button, above the joystick. No animation loops. */
#chat-box{--chat-ink:#fffbe8;--chat-shade:0 1px 2px #0f1a12,0 0 3px #0f1a12cc;position:absolute;z-index:3;left:16px;bottom:calc(38px + clamp(44px,4vw,68px)*1.85 + 14px);width:min(420px,34vw);display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:10px;background:#0000;color:var(--chat-ink);font:500 13px/1.4 "Noto Sans Thai",Tahoma,sans-serif;pointer-events:auto;transition:background-color .15s}
#chat-box[hidden],.chat-touch-button[hidden],#chat-box [hidden]{display:none!important}
#chat-box:hover,#chat-box.chat-focus,#chat-box:focus-within{background:#1c2a2ccc}
@media (min-width:1760px){#chat-box{bottom:28px}}
@media (max-width:1050px){#chat-box{bottom:calc(32px + clamp(35px,5vw,49px)*1.85 + 14px);width:min(380px,40vw)}}
.chat-head{display:flex;align-items:center;gap:4px;min-width:0}
.chat-tabs{display:flex;flex:1;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}
.chat-tabs::-webkit-scrollbar{display:none}
.chat-tab,.chat-fold,.chat-close{flex:none;padding:1px 8px;border:1px solid #f3e3b155;border-radius:9px;background:#18262acc;color:#f6ecc9;font-size:11px;line-height:18px;text-shadow:var(--chat-shade)}
.chat-tab.active{background:#c8a767;border-color:#f3e3b1;color:#1d2a20;text-shadow:none}
.chat-tab-close{margin-left:5px;opacity:.75}
.chat-close{display:none}
#chat-box:not(:hover):not(.chat-focus):not(:focus-within) .chat-tabs,#chat-box:not(:hover):not(.chat-focus):not(:focus-within) .chat-fold{opacity:.55}
.chat-log{margin:0;padding:0 2px 0 0;list-style:none;height:180px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8a76788 transparent}
#chat-box.chat-collapsed .chat-log{height:0;overflow:hidden}
.chat-line{padding:1px 2px;overflow-wrap:anywhere;text-shadow:var(--chat-shade)}
.chat-line.chat-old{opacity:.38}
#chat-box:hover .chat-line.chat-old,#chat-box.chat-focus .chat-line.chat-old,#chat-box:focus-within .chat-line.chat-old{opacity:1}
.chat-tag{font-size:11px;opacity:.9}
.chat-name{font-weight:700}
.chat-nearby .chat-tag,.chat-nearby .chat-name{color:#fffbe8}
.chat-map .chat-tag,.chat-map .chat-name{color:#a6e4ff}
.chat-trade .chat-tag,.chat-trade .chat-name{color:#ffd27a}
.chat-world .chat-tag,.chat-world .chat-name{color:#ffad8f}
/* Item 61: party chat (green, never a speech bubble). */
.chat-party .chat-tag,.chat-party .chat-name{color:#8fe08a}
.chat-tab[data-chat-tab="party"][hidden]{display:none}
/* Item 67: player guild chat (gold, never a speech bubble). */
.chat-guild .chat-tag,.chat-guild .chat-name{color:#f0d27a}
.chat-tab[data-chat-tab="guild"][hidden]{display:none}
.chat-system .chat-tag,.chat-system .chat-name{color:#f0b2ff}
.chat-line-notice{color:#d4d6cf;font-size:12px;font-style:italic}
.chat-line-mine .chat-name{text-decoration:underline;text-decoration-color:#ffffff66}
.chat-item{display:inline;padding:0 3px;margin:0 1px;border:1px solid #e9c66d99;border-radius:5px;background:#3c2f1ccc;color:#ffe3a1;font:inherit;font-weight:700;cursor:pointer;text-shadow:none}
.chat-item:hover,.chat-item:focus-visible{background:#5c4523}
.chat-form{display:flex;gap:4px;align-items:stretch;min-width:0}
.chat-channel,.chat-input,.chat-emoji-button,.chat-send{border:1px solid #f3e3b166;border-radius:7px;background:#121d1fd9;color:#fffbe8;font:500 13px "Noto Sans Thai",Tahoma,sans-serif}
.chat-channel{flex:none;width:76px;padding:0 4px}
.chat-input{flex:1;min-width:0;padding:5px 8px}
.chat-input::placeholder{color:#e8e2c6a8}
.chat-input:disabled,.chat-channel:disabled{opacity:.6}
.chat-emoji-button{flex:none;width:32px;padding:0}
.chat-send{flex:none;min-width:44px;padding:0 8px;background:#c8a767;color:#1d2a20;font-weight:700}
.chat-send:disabled{background:#566158;color:#e8e2c6;cursor:default}
#chat-box:not(:hover):not(.chat-focus):not(:focus-within) .chat-form{opacity:.6}
.chat-emoji-panel{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;padding:5px;border:1px solid #f3e3b155;border-radius:8px;background:#121d1ff2}
.chat-emoji-panel button{padding:2px 0;border-radius:5px;background:none;font-size:17px;line-height:24px}
.chat-emoji-panel button:hover,.chat-emoji-panel button:focus-visible{background:#ffffff22}
.chat-attachments{display:flex;flex-wrap:wrap;gap:4px}
.chat-attachment{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border:1px solid #e9c66d99;border-radius:8px;background:#3c2f1ccc;color:#ffe3a1;font-size:11px}
.chat-attachment button{padding:0 2px;background:none;color:#ffe3a1}
.chat-item-card{position:absolute;bottom:calc(100% + 6px);left:0;z-index:4;width:min(240px,calc(100vw - 32px));padding:9px 10px;border:2px solid #c8a767;border-radius:10px;background:linear-gradient(160deg,#2a3a33f7,#18241ff7);color:#fffbe8;box-shadow:0 6px 18px #0008;font-size:12px}
.chat-card-top{display:flex;align-items:center;gap:8px}
.chat-card-image{width:36px;height:36px;object-fit:contain;flex:none}
.chat-card-title{flex:1;color:#ffe3a1;font-size:14px}
.chat-card-close{flex:none;width:24px;height:24px;border-radius:50%;background:#ffffff1a;color:#fffbe8}
.chat-card-kind{margin:4px 0 2px;color:#d9d0aa}
.chat-card-stats{margin:4px 0;padding-left:16px}
.chat-card-note{margin:4px 0 0;color:#d4d6cf}
.chat-item-card .item-compare{margin-top:6px}
.chat-touch-button{display:none}
.chat-touch-icon{font-size:18px;line-height:1}
@media (pointer:coarse){
 #chat-box{left:8px;bottom:240px;width:min(360px,calc(100vw - 16px));background:#1c2a2ce6;display:none}
 #chat-box.chat-open{display:flex}
 .chat-close{display:block}
 .chat-fold{display:none}
 .chat-log{height:150px}
 .chat-channel,.chat-input,.chat-emoji-button,.chat-send{font-size:16px}
 .chat-touch-button{display:grid}
 .chat-line.chat-old{opacity:1}
}
@media (pointer:coarse) and (max-height:500px){
 /* Landscape phones: right of the joystick, above the skill bar (same height rule as .hud-utilities). */
 #chat-box{left:148px;bottom:calc(clamp(29px,4.2vw,46px)*1.85 + 44px + max(0px,400px - 100dvh));width:min(380px,calc(100vw - 360px));min-width:220px}
 .chat-log{height:max(56px,calc(100dvh - 300px))}
}
/* Item 47: item links take their rarity colour (set from the item registry). */
.chat-item[data-rarity]{color:var(--rarity)}
/* Item 60 whispers: pink/violet in every tab; a name with data-whisper-id is clicked or tapped to whisper back. */
.chat-whisper,.chat-whisper .chat-tag,.chat-whisper .chat-name{color:#ffa6e8}
.chat-whisper-dir{font-size:12px;opacity:.9}
.chat-whisper.chat-whisper-out,.chat-whisper.chat-whisper-out .chat-name{color:#d8b4ff}
.chat-name[data-whisper-id]{cursor:pointer}
.chat-name[data-whisper-id]:hover,.chat-name[data-whisper-id]:focus-visible{text-decoration:underline;outline:none}
.chat-mail{margin-left:6px;padding:0 6px;border:1px solid #f3e3b166;border-radius:6px;background:#3c2f1ccc;color:#ffe3a1;font:inherit;font-style:normal;cursor:pointer}
@media (pointer:coarse){.chat-name[data-whisper-id]{padding:2px 0}}