#chatModal { z-index:115; padding:8px; box-sizing:border-box; background:#03121ade; backdrop-filter:blur(6px); }
#chatModal [hidden] { display:none!important; }
.chat-contacts { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:15px 12px; scrollbar-width:thin; scrollbar-color:#d3b773 #0c2737; }
.chat-contact { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:12px 9px; margin:7px 0; min-height:83px; border:1px solid #6c969c55; border-radius:12px; background:linear-gradient(120deg,#224651,#143441); color:#f2f7f5; text-align:left; cursor:pointer; }
.chat-contact-info { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:4px 7px; }
.chat-contact-info strong { width:100%; font:850 15px/1.2 system-ui; overflow-wrap:anywhere; }
.chat-contact-status { font:750 9px/1 system-ui; color:#bacdd2; }.chat-contact-status.online { color:#abedbf; }
.chat-contact-info p { flex-basis:100%; min-width:0; margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#b8d0d5; font:450 12px/1.35 system-ui; }
.chat-unread { display:grid; place-items:center; min-width:23px; height:23px; padding:0 4px; border-radius:8px; color:#27342a; background:#ead185; font:900 11px/1 system-ui; }
.chat-contact-arrow { padding:0 3px; color:#d2e7e8; font:400 26px/1 system-ui; }
.chat-thread { flex:1; min-height:0; display:flex; flex-direction:column; }
.chat-thread-header { flex:none; display:flex; gap:8px; align-items:center; padding:9px 12px; background:#214a56; border-bottom:1px solid #76939740; }
.chat-thread-header .bando-avatar { width:29px; height:34px; }
.chat-thread-header > div { min-width:0; }
.chat-thread-header strong { display:block; font:850 14px/1.2 system-ui; overflow-wrap:anywhere; }.chat-thread-header small { display:block; margin-top:3px; color:#c5dedb; font:500 10px/1.2 system-ui; }
#chatBack { width:32px; min-height:33px; font-size:23px; padding:0; }
.chat-older { flex:none; align-self:center; margin:7px 0 0; padding:5px 11px; border:1px solid #70939a; border-radius:7px; background:#21404e; color:#cee2e5; font:700 10px/1.2 system-ui; cursor:pointer; }
.chat-messages { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px 11px 8px; background:radial-gradient(ellipse at top right,#345e5720,transparent 70%),#0d2938; scrollbar-width:thin; scrollbar-color:#c8b67a #143747; }
.chat-day { display:block; width:max-content; margin:5px auto 12px; padding:4px 8px; border-radius:6px; background:#1a3c49; color:#bed2d5; font:600 9px/1 system-ui; }
.chat-message { width:max-content; max-width:84%; box-sizing:border-box; margin:6px auto 6px 0; padding:10px 11px 6px; border:1px solid #658f9540; border-radius:12px 12px 12px 3px; color:#eff6f6; background:#254955; box-shadow:0 2px 4px #00192135; }
.chat-message.mine { margin-left:auto; margin-right:0; border-radius:12px 12px 3px 12px; background:#3c6659; border-color:#a0c3944a; }
.chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font:450 14px/1.45 system-ui; color:#f1f7f2; text-align:left; }.chat-message time { display:block; margin-top:4px; text-align:right; font:500 9px/1 system-ui; color:#c3dcd4; }
.chat-conversation-empty { max-width:260px; margin:30px auto; padding:17px; border:1px solid #70918a45; border-radius:12px; color:#c6dcd6; font:500 13px/1.5 system-ui; text-align:center; }
.chat-form { flex:none; display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:5px 7px; align-items:center; padding:9px 11px 6px; background:#1a3c49; border-top:1px solid #829d972b; }
.chat-form textarea { display:block; box-sizing:border-box; min-width:0; width:100%; max-height:100px; min-height:44px; resize:none; border:1px solid #749398; border-radius:9px; background:#092731; color:#eef7f5; padding:8px 9px; font:450 16px/1.35 system-ui; }
.chat-form textarea::placeholder { color:#a8c5ca; }.chat-form .bando-action { min-height:43px; padding:6px; }.chat-form small { grid-column:1/-1; color:#a9c4c8; font:500 8px/1 system-ui; text-align:right; }
#chatModal .bando-notice { flex:none; margin:0; padding:0 12px; color:#ffdf9b; font:700 11px/1.35 system-ui; }
#chatModal .bando-notice:not(:empty) { padding:8px 12px; }
#chatModal button:focus-visible,#chatModal textarea:focus-visible { outline:3px solid #acecff; outline-offset:2px; }
#homeNoticeCount { position:absolute; right:-5px; top:-4px; display:grid; place-items:center; min-width:17px; height:18px; padding:0 3px; border:1px solid #fff0b2; border-radius:6px; color:#fff8de; background:#ae503b; font:850 10px/1 system-ui; }
#homeNoticeCount[hidden],#homeChatUnread[hidden] { display:none; }
#homeChatUnread:not(:empty) { display:inline-block; margin-left:6px; padding:3px 6px; border-radius:5px; background:#edd18a; color:#2c3e38; font:850 10px/1 system-ui; }
.social-top-toast { position:absolute; top:max(9px,env(safe-area-inset-top)); left:7px; right:7px; z-index:140; display:flex; align-items:center; gap:7px; padding:10px 8px; border:1px solid #e6ce8b; border-radius:13px; background:linear-gradient(115deg,#255662f5,#123345f5); color:#f4f5ed; box-shadow:0 5px 16px #001525aa; pointer-events:auto; animation:bando-notice-in .22s ease-out; }
.social-top-toast > .bando-avatar { width:32px; height:38px; }.social-toast-copy { min-width:0; flex:1; }.social-toast-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:850 12px/1.25 system-ui; color:#fff0bd; }.social-toast-copy p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:3px 0 0; font:450 11px/1.35 system-ui; color:#cde0df; overflow-wrap:anywhere; }
.social-toast-open { flex:none; padding:6px 9px; min-height:33px; border:1px solid #efd493; border-radius:7px; background:#e1c276; color:#293b37; font:850 10px/1 system-ui; cursor:pointer; }.social-toast-close { flex:none; width:24px; height:32px; padding:0; border:0; background:transparent; color:#d7e6e0; font:400 23px/1 system-ui; cursor:pointer; }
@keyframes bando-notice-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .social-top-toast { animation:none; } }

/* O chat acompanha o viewport visível do teclado; o canvas/frame do jogo não é redimensionado. */
#chatModal.chat-keyboard-layout { position:fixed; inset:0 0 auto; height:var(--chat-visible-height,100dvh); max-height:var(--chat-visible-height,100dvh); min-height:0; padding:3px 5px 2px; overflow:hidden; align-items:stretch; justify-content:center; transform:translateY(var(--chat-visible-offset,0px)); }
#chatModal.chat-keyboard-layout .chat-sheet { width:min(100%,470px); height:100%; max-height:100%; min-height:0; border-radius:13px; }
#chatModal.chat-keyboard-layout .bando-header { flex:none; padding:6px 9px; grid-template-columns:34px minmax(0,1fr) 34px; gap:6px; }
#chatModal.chat-keyboard-layout .bando-header > .bando-avatar { width:34px; height:38px; }
#chatModal.chat-keyboard-layout .bando-header p { display:none; }
#chatModal.chat-keyboard-layout .chat-thread-header { padding:5px 9px; }
#chatModal.chat-keyboard-layout .chat-form { padding:5px 7px max(5px,env(safe-area-inset-bottom)); }
#chatModal.chat-keyboard-layout .chat-form textarea { min-height:40px; max-height:76px; }