@import url('/game/loading/scrollbars.css');
.machine-chat{position:absolute;z-index:24;left:12px;bottom:86px;width:clamp(260px,29vw,550px);height:clamp(180px,30vh,280px);display:flex;flex-direction:column;box-sizing:border-box;border:1px solid #ffffff80;border-radius:20px;background:linear-gradient(135deg,#fff9,#eee4ff55);box-shadow:inset 0 1px 2px #fff9,0 6px 20px #29214a12;backdrop-filter:blur(8px);color:#18194e;opacity:.65;transition:background .2s,opacity .2s,box-shadow .2s;font-family:ClawSystemLocal,sans-serif;font-size:14px;overflow:hidden;touch-action:pan-y}
.machine-chat[hidden]{display:none}.machine-chat.is-open{opacity:1;background:linear-gradient(135deg,#fffcf9,#eee8ff);box-shadow:inset 0 1px 2px white,0 8px 24px #29214a33}
.machine-chat header{display:flex;align-items:center;padding:6px 10px;gap:8px}.machine-chat button{font:inherit;color:inherit;border:0;cursor:pointer;background:transparent;border-radius:10px;min-height:32px}.machine-chat-toggle{flex:1;text-align:left}.machine-chat-unread{border-radius:12px;background:#ff506a;color:white;padding:0 6px}.machine-chat-unread:empty{display:none}.machine-chat:not(.is-open) .machine-chat-close,.machine-chat:not(.is-open) .machine-chat-form,.machine-chat:not(.is-open) .machine-chat-more{display:none}
.machine-chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 8px;scrollbar-width:thin}.machine-chat:not(.is-open) .machine-chat-scroll{overflow:hidden}.machine-chat-row{padding:4px 0;line-height:1.5;overflow-wrap:anywhere}.machine-chat-row strong{font-weight:400;color:#7456a6;margin-right:8px}.machine-chat-empty{margin:6px 0;color:#726c8d}.machine-chat-status{font-size:12px;margin:0 12px;line-height:1.4}.machine-chat-status:empty{display:none}.machine-chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid #d8cef0}.machine-chat-form input{min-width:0;flex:1;font:inherit;border:1px solid #d2c4f3;border-radius:12px;padding:8px;background:#fff;color:#18194e}.machine-chat-form button{background:linear-gradient(#ff6b7a,#ff3651);color:white;padding:0 10px}.machine-chat button:disabled{opacity:.5;cursor:default}.machine-chat button:focus-visible,.machine-chat input:focus-visible{outline:2px solid #9674d8;outline-offset:-2px}
@media(max-width:700px) and (orientation:portrait){.machine-chat{left:8px;bottom:66px;width:55%;height:15vh;min-height:100px;border-radius:14px;font-size:12px}.machine-chat.is-open{width:calc(100% - 16px);height:min(340px,48vh)}.machine-chat header{padding:2px 6px}.machine-chat-scroll{padding:0 8px 6px}}
@media(max-height:600px) and (orientation:landscape){.machine-chat{left:auto;right:8px;top:74px;bottom:118px;width:22%;height:auto;min-height:80px;border-radius:14px;font-size:12px}.machine-chat.is-open{width:36%;bottom:8px}.machine-chat header{padding:2px 6px}.machine-chat-form{flex-wrap:wrap}.machine-chat-form input{width:100%}}
@media(prefers-reduced-motion:reduce){.machine-chat{transition:none}}
#room .machine-chat header{flex-wrap:nowrap;gap:8px;justify-content:flex-start}
#room .machine-chat button{width:auto;margin:0;padding:5px 8px;flex-shrink:0;font-weight:400;white-space:nowrap}
#room .machine-chat .machine-chat-toggle{flex:1;min-width:0;text-align:left}
#room .machine-chat input{width:0;flex:1 1 0;margin:0;padding:8px;min-width:0}
#room .machine-chat .machine-chat-form button{flex:0 0 auto;color:white}
#room .machine-chat p{color:#70658b}
@media(max-width:700px) and (orientation:portrait){#room .machine-chat.is-open{bottom:110px;max-height:calc(var(--game-h,100dvh) - 190px)}}
@media(max-height:600px) and (orientation:landscape){#room .machine-chat.is-open{bottom:118px}}

/* Equal space above and below a visible chat status message. */
.machine-chat-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:6px 0;align-items:start}
#room .machine-chat-avatar.profile-layered-avatar{width:30px;height:30px;margin:1px 0 0;aspect-ratio:1}
.machine-chat-copy{min-width:0}.machine-chat-author{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;line-height:1.5}
.machine-chat-row strong{margin:0;overflow-wrap:anywhere}.machine-chat-text{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.machine-chat-title{display:inline-flex;align-items:center;gap:3px;max-width:100%;color:#8a66ac;font-size:11px;line-height:1.4}
.machine-chat-title span{min-width:0;overflow-wrap:anywhere}#room .machine-chat-title img{width:18px;height:18px;object-fit:contain;flex:none;margin:0}
@media(max-width:700px){.machine-chat-row{grid-template-columns:26px minmax(0,1fr);gap:6px}#room .machine-chat-avatar.profile-layered-avatar{width:26px;height:26px}.machine-chat-title{font-size:10px}#room .machine-chat-title img{width:16px;height:16px}}
.machine-chat-status{flex:none;margin:0 12px;padding:8px 0;line-height:1.5}
.machine-chat:has(.machine-chat-status:not(:empty)) .machine-chat-scroll{padding-bottom:0}
/* Mobile WebGL overlays must not create a backdrop-filter compositing halo. */
@media(max-width:700px),(hover:none) and (pointer:coarse),(max-height:600px) and (orientation:landscape){
 #room .machine-chat{backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background:linear-gradient(135deg,#ffffff99,#eee4ff88);box-shadow:inset 0 1px 2px #fff9}
 #room .machine-chat.is-open{background:linear-gradient(135deg,#fffcf9f5,#eee8fff5);box-shadow:inset 0 1px 2px white}
}