#chat-toggle,#notifications-toggle{top:22px;bottom:auto;z-index:5;width:44px;height:44px;opacity:1;background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}
#chat-toggle{right:130px}#notifications-toggle{right:76px}#notifications-toggle.has-unread:after{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;background:#b47a4f;border:2px solid #f5f2e9;border-radius:50%}
#chat-panel,#notifications-panel,#admin-panel,#friends-panel,#private-chat-panel{position:fixed;inset:12px 12px 12px auto;margin:0;width:min(400px,calc(100vw - 24px));height:calc(100dvh - 24px);max-width:none;max-height:none;padding:0;background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);border-radius:22px;backdrop-filter:blur(24px) saturate(110%);box-shadow:var(--glass-shadow);font:14px/1.5 'Alegreya Sans',system-ui,sans-serif;overflow:hidden}
#chat-panel[open],#notifications-panel[open],#admin-panel[open],#friends-panel[open],#private-chat-panel[open]{display:flex;flex-direction:column}
#chat-panel::backdrop,#notifications-panel::backdrop,#admin-panel::backdrop,#friends-panel::backdrop,#private-chat-panel::backdrop{background:#0b1b2020;backdrop-filter:blur(2px)}
#chat-panel header,#notifications-panel header,#admin-panel header,#friends-panel header,#private-chat-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 10px;border-bottom:1px solid var(--glass-line)}
#chat-panel header{align-items:center;padding-bottom:16px}#chat-panel .chat-header-copy{min-width:0}#chat-panel .chat-header-copy h1{margin-bottom:2px}#chat-panel .chat-header-actions{display:flex;align-items:center;gap:8px;flex:none}
#chat-panel #open-admin.chat-settings-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:transparent;border-radius:50%;color:var(--glass-ink)}#chat-panel #open-admin.chat-settings-button svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#chat-panel #open-admin.chat-settings-button:hover{background:var(--field-bg)}
#chat-panel h1,#notifications-panel h1,#admin-panel h1,#friends-panel h1,#private-chat-panel h1{font:400 25px Georgia;margin:0}#chat-panel header p,#friends-panel header p,#private-chat-panel header p{font-size:11px;opacity:.7;margin:2px 0 0}#chat-panel h2,#notifications-panel .notice-row h2,#admin-panel h2,#friends-panel h2,#private-chat-panel h2{font:400 18px Georgia;margin:0 0 10px}
#chat-panel button,#notifications-panel button,#admin-panel button,#friends-panel button,#private-chat-panel button{position:static;width:auto;height:auto;opacity:1;border:1px solid var(--glass-line);border-radius:12px;background:var(--field-bg);color:var(--glass-ink);padding:8px 12px;font:12px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer;backdrop-filter:none}
#chat-panel button:focus-visible,#notifications-panel button:focus-visible,#admin-panel button:focus-visible,#friends-panel button:focus-visible,#private-chat-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#chat-panel header button,#notifications-panel header button,#admin-panel header button,#friends-panel header button,#private-chat-panel header button{border:0;background:transparent;font:25px 'Alegreya Sans',system-ui,sans-serif;padding:0;line-height:1}
.chat-panel-body,.admin-body,.notifications-body,.friends-panel-body,.private-chat-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:18px 22px 24px}.chat-panel-body::-webkit-scrollbar,.admin-body::-webkit-scrollbar,.notifications-body::-webkit-scrollbar,.friends-panel-body::-webkit-scrollbar,.private-chat-body::-webkit-scrollbar,#chat-messages::-webkit-scrollbar{display:none}
.chat-panel-body section+section{margin-top:20px;padding-top:18px;border-top:1px solid var(--glass-line)}.chat-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.chat-section-heading span{font-size:10px;opacity:.65}
#watch-games{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:5px}#watch-games button{flex:none;max-width:180px;text-align:left}#watch-games button[aria-pressed=true]{border-color:var(--accent);background:#aebf9660}#watch-games:empty:after{content:"No games shared here yet.";font-size:12px;opacity:.7}
#watch-board{margin:8px 0 0;padding:10px;background:var(--field-bg);border:1px solid var(--glass-line);border-radius:12px}#watch-board h3{font:400 15px Georgia;margin:0 0 6px}#watch-board p{font-size:11px;opacity:.75;margin:6px 0}#watch-board .watch-grid{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:1px solid #71856c;border-radius:6px;overflow:hidden}#watch-board .watch-square{display:grid;place-items:center;background:#e5ddc4;color:#23352b;font:clamp(16px,4vw,29px) 'DejaVu Sans',serif}#watch-board .watch-square.dark{background:#7f9477}#watch-board .watch-square.light-piece{color:#fff8df;text-shadow:0 1px #263b2b,1px 0 #263b2b,-1px 0 #263b2b}#watch-board .sungka-watch{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}#watch-board .sungka-watch span{display:grid;place-items:center;min-height:28px;border-radius:9px;background:#c6ad77;color:#243b2d;font-size:12px}
#chat-messages{min-height:140px;max-height:240px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;padding:4px 0}#chat-messages .chat-message{padding:9px 10px;border-radius:12px;background:var(--field-bg);overflow-wrap:anywhere}#chat-messages strong{font-size:11px}#chat-messages time{font-size:10px;opacity:.6;margin-left:7px}#chat-messages p{margin:4px 0 0;font-size:13px;white-space:pre-wrap}#chat-form{display:grid;gap:6px;margin-top:12px}#chat-form label,#admin-panel label{font-size:11px}#chat-form input,#chat-form textarea,#admin-panel input,#admin-panel textarea{width:100%;min-width:0;border:1px solid var(--glass-line);border-radius:10px;background:var(--field-bg);color:var(--glass-ink);padding:10px;font:14px 'Alegreya Sans',system-ui,sans-serif}#chat-form button{justify-self:end;background:#465d48;color:#fff}#chat-status,#admin-status{min-height:1.3em;font-size:11px;margin:8px 0 0}
.voice-wrap{position:relative;border-top:1px solid var(--glass-line);padding:10px 22px max(12px,env(safe-area-inset-bottom))}.voice-wrap button{opacity:.4!important;cursor:not-allowed!important}.voice-tooltip{display:none;position:absolute;right:20px;bottom:52px;padding:5px 9px;border-radius:8px;background:#344239;color:#fff;font-size:11px}.voice-wrap:hover .voice-tooltip,.voice-wrap:focus .voice-tooltip{display:block}
.admin-body section+section{margin-top:22px;border-top:1px solid var(--glass-line);padding-top:18px}.admin-body form{display:grid;gap:8px}.admin-member,.notice-row{padding:10px 0;border-bottom:1px solid var(--glass-line)}.admin-member p,.notice-row p{margin:0 0 6px;font-size:12px}.admin-member small,.notice-row small{opacity:.7}.admin-member button,.notice-row button{margin-right:5px}.admin-delete{font-size:10px!important;margin-top:5px}.notification-actions{display:flex;gap:5px}
#admin-panel h1{font-family:'Maragsa',Georgia,serif;font-size:28px}#admin-panel .admin-body{padding:20px 22px 28px}#admin-panel .admin-body section{padding:16px;border:1px solid var(--glass-line);border-radius:16px;background:var(--field-bg)}#admin-panel .admin-body section+section{margin-top:14px;border-top:1px solid var(--glass-line);padding-top:16px}#admin-panel .admin-body h2{font:400 20px 'Maragsa',Georgia,serif;margin:0 0 8px}#admin-panel .admin-body .muted{margin:0 0 12px;font-size:12px;opacity:.72}#admin-panel .admin-lock{padding:10px 12px;border:1px dashed var(--glass-line);border-radius:12px;background:transparent}#admin-panel #delete-lantay-section{border-color:#a3423538;background:#a342350b}#admin-panel #delete-lantay-section button{color:#8d3d34;border-color:#a3423566;background:transparent}#admin-panel #admin-status{padding-top:4px}
@media(max-width:500px){#chat-toggle,#notifications-toggle{top:max(22px,env(safe-area-inset-top))}#chat-panel,#notifications-panel,#admin-panel{inset:0;width:100%;height:100dvh;border-radius:0}#chat-panel header,#notifications-panel header,#admin-panel header{padding-top:max(22px,env(safe-area-inset-top))}}
#chat-identity{font-size:11px;opacity:.7;margin:0 0 8px}

/* Phones: chat is a bottom sheet over the lower half, so the lantay stays in view above it. It grows while typing
   (the keyboard shrinks 100dvh, so the field stays visible) and keeps clear of the home indicator. */
@media(max-width:600px){
:root #chat-panel{inset:0;width:100%;height:100dvh;max-height:none;border-radius:0;padding-bottom:env(safe-area-inset-bottom);box-shadow:none;animation:none;}
:root #chat-panel header{position:relative;padding:22px 20px 10px}
:root #chat-panel header::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:currentColor;opacity:.25}
:root #chat-panel::backdrop{background:#0b1b2014;backdrop-filter:none}
}

/* Group chat, private chat and Ka-tambay actions share one quiet paper form language. */
.notification-actions{flex-wrap:wrap}
#chat-form,
.private-chat-form { display:grid; gap:6px; margin-top:12px; padding-top:2px; }
#chat-form label,
.private-chat-form label { font-size:11px; color:var(--glass-ink); opacity:.82; }
#chat-form textarea,
.private-chat-form textarea { box-sizing:border-box; width:100%; min-height:58px; resize:vertical; }
#chat-form button,
.private-chat-form button { justify-self:end; min-height:38px; padding:9px 14px; border-radius:999px; background:#465d48; color:#fff; }
#chat-form button:disabled,
.private-chat-form button:disabled { opacity:.55; cursor:wait; }
.private-chat-form .private-chat-status,
.friends-section .friends-status { min-height:1.3em; }
.private-consent { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; padding:10px 12px; border:1px dashed var(--glass-line); border-radius:12px; background:var(--field-bg); }
.private-consent-copy { flex:1 1 100%; margin:0; font-size:12px; }
.private-consent-action { width:auto; min-height:34px; padding:7px 12px; border:0; border-radius:999px; background:#465d48; color:#fff; cursor:pointer; }
.private-consent-action.secondary { background:transparent; border:1px solid var(--glass-line); color:var(--glass-ink); }
@media(prefers-reduced-motion:reduce){:root #chat-panel{animation:none;transition:none}}

/* Group chat section (Impeccable Live polish aa467782, variant 1). */
#chat-panel .chat-messages-section{padding-top:18px;margin-top:16px;border-top:1px solid var(--glass-line)}
#chat-panel .chat-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#chat-panel .chat-messages-section h2{margin:0;font:400 22px 'Maragsa',Georgia,serif}
#chat-panel .chat-chime-toggle{flex:none;min-height:30px;padding:5px 9px;border-radius:999px;background:transparent;font-size:11px;opacity:.78}
#chat-panel .chat-chime-toggle[aria-pressed=false]{opacity:.55}
#chat-panel .chat-chime-toggle:hover,#chat-panel .chat-chime-toggle:focus-visible{opacity:1;background:var(--field-bg)}
#chat-panel .chat-messages-section .chat-identity{margin:0 0 14px;color:var(--glass-ink);font-size:12px;opacity:.72}
#chat-panel .chat-messages-section #chat-messages{min-height:132px;padding:14px;border:1px solid var(--glass-line);border-radius:14px;background:var(--field-bg);box-shadow:inset 0 1px 0 #fff2}
#chat-panel .chat-messages-section form{margin-top:14px}
#chat-panel .chat-typing{min-height:16px;margin:2px 0 0;font-size:11px;opacity:.68;font-style:italic}

/* Computer: the chat opens as a side panel (not modal), so it needs its own place above the scene controls. */
#chat-panel{z-index:30}

/* Unread chat stays on the chat icon; scene speech replaces the old bottom toast. */
#chat-toggle.has-unread:after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;background:#c0473a;border:2px solid #f5f2e9;border-radius:50%}

/* Each message: the sender's Peep (or initial) in a small circle on the left, the name, time and text beside it. */
.chat-message.has-avatar{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-items:start}
.chat-message.has-avatar>:not(.chat-avatar){grid-column:2}
.chat-avatar{grid-column:1;grid-row:1 / span 3;width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-line);background:var(--field-bg);object-fit:cover;object-position:50% 12%}
.chat-initial{display:grid;place-items:center;font:600 14px 'Alegreya Sans',system-ui,sans-serif;color:var(--glass-ink)}

#admin-panel .admin-lock{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:14px}#admin-panel .admin-lock input{width:16px;height:16px;accent-color:#465d48}

#chat-status.is-error{color:#a34235;font-weight:600}.chat-retry{margin-top:6px!important;background:transparent!important;color:var(--glass-ink)!important}.chat-updated{font-size:10px;opacity:.65;white-space:nowrap}

/* Ka-tambay friends is a separate people list; the inbox is a separate conversation panel.
   Neither is rendered inside the group-chat panel. */
#friends-panel,#private-chat-panel{z-index:31}
#friends-panel h1,#private-chat-panel h1{font-family:'Maragsa',Georgia,serif;font-size:28px}
#friends-panel .friends-panel-body,#private-chat-panel .private-chat-body{padding:20px 22px 28px}
.friends-intro,.private-chat-intro{margin:0 0 14px;font-size:12px;opacity:.72}
.friends-list,.private-contacts{display:grid;gap:10px;margin:0}
.friend-row,.private-contact{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid var(--glass-line);border-radius:15px;background:var(--field-bg)}
.friend-avatar{display:block;width:42px;height:42px;border:1px solid var(--glass-line);border-radius:50%;background:var(--field-bg);object-fit:contain;object-position:50% 10%}
.friend-copy,.private-contact-copy{min-width:0;display:grid;gap:2px}.friend-copy strong,.private-contact-copy strong{overflow-wrap:anywhere}.friend-copy small,.private-contact-copy small{font-size:11px;opacity:.68}
.friend-actions{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:6px}.friend-actions button{min-height:32px;padding:6px 10px;border-radius:999px}.friend-actions button:nth-child(2){background:transparent}
.private-message-button{display:grid!important;place-items:center;width:34px!important;height:34px!important;padding:0!important;border-radius:50%!important;background:transparent!important}.private-message-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.private-chat-body{display:flex;flex-direction:column;gap:14px}.private-chat-body .private-chat-section{min-height:0;margin:0;padding-top:14px;border-top:1px solid var(--glass-line)}.private-chat-body .private-chat-section h2{font-family:'Maragsa',Georgia,serif;font-size:22px}.private-messages{max-height:none;min-height:120px;overflow-y:auto;scrollbar-width:none}.private-messages::-webkit-scrollbar{display:none}.private-chat-status,.friends-status{min-height:1.3em;font-size:11px;margin:8px 0 0}.private-chat-form{flex:none}
@media(max-width:600px){#friends-panel,#private-chat-panel{inset:auto 0 0;width:100%;height:min(78dvh,640px);max-height:none;border-radius:22px 22px 0 0}.friends-panel-body,.private-chat-body{padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px))!important}}

/* Conversation switching stays inside Tambay chat; account inbox stays separate. */
#chat-panel .chat-conversation-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#chat-panel #chat-conversation{display:block;width:min(100%,240px);min-height:36px;padding:7px 10px;border:1px solid var(--glass-line);border-radius:10px;background:var(--field-bg);color:var(--glass-ink);font:14px/1.2 'Alegreya Sans',system-ui,sans-serif}
#chat-panel #chat-conversation{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23344239' stroke-width='1.5'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
:root[data-time="night"] #chat-panel #chat-conversation{color-scheme:dark;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23edf0df' stroke-width='1.5'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E")}
#chat-conversation:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#room-private-section{margin-top:16px;padding-top:18px;border-top:1px dashed var(--glass-line)}
.private-chat-form textarea{width:100%;padding:10px;border:1px solid var(--glass-line);border-radius:10px;background:var(--field-bg);color:var(--glass-ink);font:inherit}
#friends-panel .friend-row,#private-chat-panel .private-contact{display:grid}
#friends-panel .friend-row strong{flex:none}
#private-chat-panel .inbox-back{margin-bottom:14px;border-radius:999px}
#private-chat-panel .private-chat-section{flex:1;min-height:0}
#private-chat-panel .private-chat-intro{display:none}
@media(max-width:600px){#chat-panel .chat-heading-row{flex-wrap:wrap;gap:6px}#chat-panel .chat-updated{flex-basis:100%}}
@media(pointer:coarse){#chat-panel #chat-conversation{min-height:40px}}

/* Availability is read from recent account/seat activity, never inferred from an open tab. */
.friend-presence{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#8c918d;align-self:center}
.friend-presence.is-online{background:#548658}
:root[data-time="night"] .friend-presence.is-online{background:#9cc7a1}
#private-chat-panel .private-contact{grid-template-columns:42px minmax(0,1fr) 8px auto}

/* Message moderation is a quiet admin-only cross, outside the reading column. */
#chat-panel .chat-message.has-avatar{position:relative;padding-right:38px}
#chat-panel .chat-message .admin-delete{position:absolute;inset:3px 0 auto auto;display:grid;place-items:center;width:32px;height:32px;min-height:32px;margin:0;padding:0;border:0;background:transparent;color:var(--glass-ink);font:22px/1 'Alegreya Sans',system-ui,sans-serif;font-size:20px!important;border-radius:50%}
#chat-panel .chat-message .admin-delete:hover,#chat-panel .chat-message .admin-delete:focus-visible{background:var(--field-bg)}

/* Safari's square native text-field ring is replaced by a rounded, themed focus edge. */
:root{--chat-focus:#647c65}
:root[data-time="night"]{--chat-focus:#a5b99c}
:root :is(#chat-message,#room-private-message,#private-chat-message):focus{outline:0;outline-offset:0;border-color:var(--chat-focus);box-shadow:inset 0 0 0 1px var(--chat-focus)}

/* Member history stays inside its existing management card. */
#admin-panel #admin-members{max-height:min(36svh,340px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 4px 4px 0}
#admin-members::-webkit-scrollbar{display:none}
#admin-members:focus-visible{outline:2px solid var(--chat-focus);outline-offset:3px;border-radius:8px}
#admin-members .member-presence{display:block;margin:0 0 6px;font-size:12px;opacity:.75}
/* A guest's private @Pepe exchange: only they see it, so it reads as a quiet aside in the group chat. */
#chat-messages .chat-message.private{background:transparent;border:1px dashed var(--glass-line)}
#chat-messages .chat-message.private[aria-busy=true] p{opacity:.7;font-style:italic}
#chat-messages .chat-message .private-tag{margin-left:6px;font-size:11px;opacity:.7}

/* The Pickleball release stays discoverable after its scene card closes. */
#notifications-panel .pickle-pinned-notice{border-color:var(--glass-line);background:var(--field-bg)}
#notifications-panel .pickle-pinned-notice>small{display:block;margin-bottom:5px;opacity:.7}