.app { --conversation-bg:#071729; --conversation-surface:#142a43; --conversation-text:#f4f8fc; --conversation-muted:#bdccdd; --conversation-border:#526780; --conversation-action:#1262e9; }
.app[data-appearance="white"] { --conversation-bg:#f5f8fc; --conversation-surface:#fff; --conversation-text:#13283f; --conversation-muted:#435b74; --conversation-border:#a0b1c4; }
.app[data-appearance="black"] { --conversation-bg:#071014; --conversation-surface:#162428; --conversation-action:#006c83; }
.app[data-screen="messages"] { background:var(--conversation-bg); grid-template-rows:minmax(0,1fr) auto; gap:8px; padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
.app[data-screen="messages"] .legal-links { display:none; }
.app[data-screen="messages"] .topbar { display:none; }
.app[data-screen="messages"] .messages-screen { grid-template-columns:minmax(0,1fr); overflow:hidden; padding:0; }
.app[data-screen="messages"] .bottom-nav { display:grid; position:static; inset:auto; transform:none; margin:0; grid-template-columns:repeat(auto-fit,minmax(4rem,1fr)); gap:2px; background:var(--conversation-surface); }
.app[data-screen="messages"] .bottom-nav button { overflow-wrap:anywhere; padding:4px 0; }
.app .conversation-panel { width:100%; height:100%; min-height:0; max-height:100%; display:grid; grid-template-columns:minmax(250px,34%) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; background:var(--conversation-bg); color:var(--conversation-text); border:1px solid var(--conversation-border); border-radius:20px; overflow:hidden; }
.app .conversation-panel * { box-sizing:border-box; }
.app .conversation-panel h2 { font-size:1.35rem; color:var(--conversation-text); margin:0; overflow-wrap:anywhere; }
.app .conversation-panel p { margin:4px 0; color:var(--conversation-text); font-weight:400; line-height:1.5; overflow-wrap:anywhere; }
.app .conversation-panel button { min-height:44px; padding:10px 14px; border:1px solid var(--conversation-border); border-radius:12px; color:var(--conversation-text); background:var(--conversation-surface); font:inherit; cursor:pointer; }
.app .conversation-panel button:disabled { opacity:.6; cursor:default; }
.app .conversation-panel :focus-visible { outline:3px solid #27bada; outline-offset:2px; }
.app .conversation-panel label { display:grid; gap:8px; color:var(--conversation-muted); }
.app .conversation-panel input,.app .conversation-panel textarea { width:100%; min-width:0; min-height:44px; padding:12px; font:inherit; color:var(--conversation-text); background:var(--conversation-surface); border:1px solid var(--conversation-border); border-radius:12px; }
.app .conversation-panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; flex-wrap:wrap; }
.conversation-inbox { min-height:0; overflow:auto; border-right:1px solid var(--conversation-border); }
.conversation-inbox>label { margin:0 14px 12px; }
.conversation-list { padding:0 14px 14px; }
.conversation-list .conversation-row { display:grid; text-align:left; width:100%; margin:8px 0; gap:6px; }
.app .conversation-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--conversation-muted); }
.conversation-row strong { overflow-wrap:anywhere; }
.conversation-detail { min-width:0; min-height:0; display:flex; flex-direction:column; }
.conversation-detail header { border-bottom:1px solid var(--conversation-border); justify-content:flex-start; }
.conversation-detail header>div { flex:1; min-width:0; }
.conversation-history { padding:16px; flex:1; min-height:40px; overflow:auto; }
.conversation-bubble { width:fit-content; max-width:92%; margin:8px 0; padding:12px; background:var(--conversation-surface); border:1px solid var(--conversation-border); border-radius:16px; }
.app .conversation-game-invite { display:grid; gap:10px; width:min(100%,280px); margin:12px 0; text-align:left; font-weight:700; }
.conversation-game-invite img { width:100%; aspect-ratio:12/7; object-fit:cover; border-radius:8px; }
.conversation-bubble.own { margin-left:auto; }
.conversation-bubble p { white-space:pre-wrap; }
.app .conversation-bubble strong { font-size:.85rem; color:var(--conversation-muted); }
.app .conversation-panel form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; border-top:1px solid var(--conversation-border); }
.app .conversation-panel form label { grid-column:1/-1; }
.app .conversation-panel textarea { resize:vertical; max-height:160px; }
.app .conversation-panel [data-send-message] { background:var(--conversation-action); color:white; }
.app .conversation-panel footer { grid-column:1/-1; display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:8px 14px; border-top:1px solid var(--conversation-border); }
.app .conversation-panel footer p { flex:1; }
@media(max-width:899px){
 .app .conversation-panel { grid-template-columns:minmax(0,1fr); max-height:none; border:0; border-radius:0; padding-bottom:0; }
 .conversation-inbox { border:0; }
 .app .conversation-panel[data-view="inbox"] .conversation-detail,.app .conversation-panel[data-view="thread"] .conversation-inbox { display:none; }
 .app .conversation-panel footer { grid-column:1; }
}
@media(max-height:450px){
 .app .conversation-panel { max-height:100%; overflow:auto; }
 .conversation-detail { min-height:0; }
 .app .conversation-panel form { padding:8px 12px; }
 .app .conversation-panel header { padding:8px 12px; }
 .app .conversation-panel .conversation-detail header p { display:none; }
 .app .conversation-panel form label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .app .conversation-panel textarea { height:44px; }
 .app .conversation-panel .conversation-history { padding:4px 12px; }
}
.app .conversation-panel [data-thread-games] { padding:12px; overflow:auto; max-height:55%; border-bottom:1px solid var(--conversation-border); }
.app .conversation-panel [data-thread-games] button { margin:4px; }
.app .conversation-panel[data-view="game"] { grid-template-columns:minmax(0,1fr); }
.app .conversation-panel[data-view="game"] .conversation-detail,.app .conversation-panel[data-view="game"] .conversation-inbox { display:none; }
.conversation-match { min-height:0; min-width:0; display:flex; flex-direction:column; overflow:auto; }
.conversation-match[hidden] { display:none; }
.app .conversation-match header { flex-shrink:0; }
.app .conversation-match>[role="status"] { padding:0 14px; }
.conversation-match [data-match-surface] { flex:1; min-height:160px; display:flex; flex-direction:column; }
.conversation-match iframe { width:100%; height:100%; min-height:240px; flex:1; border:0; background:var(--conversation-bg); }
.message-connect { padding:8px 14px 14px; width:100%; margin:auto; }
.message-connect-board { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); aspect-ratio:7/6; width:min(100%,620px); margin:12px auto; gap:6px; padding:10px; background:#1967bc; border-radius:18px; }
.app .message-connect-board button { min-width:0; min-height:0; aspect-ratio:1; border:0; border-radius:50%; padding:0; display:grid; place-items:center; background:#08213f; opacity:1; }
.message-connect-board span { width:86%; aspect-ratio:1; border-radius:50%; }
.message-connect-board .red span { background:#ef3549; box-shadow:inset 0 0 0 3px #ff6b77,inset 0 0 0 5px #bd2435; }
.message-connect-board .yellow span { background:#f7c62d; box-shadow:inset 0 0 0 3px #ffe88c,inset 0 0 0 5px #c59a12; }
.message-connect-board .preview span { outline:3px dashed white; outline-offset:2px; animation:message-piece-drop .22s ease-out; }
.message-connect-actions { display:flex; justify-content:flex-end; gap:8px; }
@keyframes message-piece-drop { from { transform:translateY(-22px); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){.message-connect-board .preview span { animation:none; }}
@media(orientation:landscape) and (max-height:550px){
 .app[data-screen="messages"]:has(.conversation-panel[data-view="game"]) .bottom-nav { display:none; }
 .app .conversation-panel[data-view="game"] .conversation-match, .app .active-game-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,26%); grid-template-rows:auto auto auto minmax(0,1fr); overflow:auto; }
 .conversation-match [data-match-surface] { grid-column:1; grid-row:1/5; min-height:0; }
 .conversation-match [data-match-surface]:has(.message-connect),.message-connect { display:contents; }
 .app .conversation-match header { grid-column:2; display:grid; padding:4px; gap:4px; }
 .app .conversation-match>[role="status"] { grid-column:2; padding:0 4px; }
 .conversation-match [data-match-retry] { grid-column:2; }
 .message-connect>p { grid-column:2; font-size:.8rem; }
 .message-connect-board { grid-column:1; grid-row:1/5; align-self:center; width:min(100%,calc((var(--match-height,300px) - 12px)*7/6)); gap:3px; padding:6px; margin:4px auto; }
 .message-connect-actions { grid-column:2; align-items:start; justify-content:flex-start; }
 .app .message-connect-actions button { min-height:36px; padding:5px 12px; }
 .conversation-match iframe { min-height:160px; }
}