/* Chat: friends + DMs, same pixel language as the arcade */
#chat .cx { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; height: min(72vh, 680px); min-height: 460px; border: 4px solid var(--ink, #120c1e); box-shadow: 0 0 0 3px #2e2e63, 6px 8px 0 #05050f; background: linear-gradient(180deg, rgba(27, 27, 61, .97), rgba(12, 12, 32, .98)); font-family: var(--ui, 'Segoe UI', sans-serif); }
.cx-side { display: flex; flex-direction: column; min-height: 0; border-right: 3px solid #120c1e; background: rgba(8, 8, 26, .55); }
.cx-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 3px solid #120c1e; }
.cx-tabs button { position: relative; padding: 12px 2px 10px; font: 7px/1.2 var(--px, 'PressStart2P', monospace); color: #8a90b8; background: #0c0c22; border: 0; border-right: 2px solid #120c1e; cursor: pointer; }
.cx-tabs button:last-child { border-right: 0; } .cx-tabs button:hover { color: #fff; } .cx-tabs button.on { color: #1a0f00; background: #ffd23f; }
.cx-tabs b { position: absolute; top: 2px; right: 3px; min-width: 14px; padding: 2px 3px; font: 7px/1 var(--px, monospace); color: #fff; background: #ff3d81; } .cx-tabs b:empty { display: none; }
.cx-search { padding: 10px; border-bottom: 2px solid #120c1e; } .cx-search input { width: 100%; padding: 10px; font: 600 14px var(--ui, sans-serif); color: #fff; background: #07071a; border: 3px solid #120c1e; box-shadow: inset 0 0 0 2px #2e2e63; outline: none; }
.cx-list { flex: 1; overflow-y: auto; padding: 6px; }
.cx-row { display: flex; align-items: center; gap: 10px; padding: 9px; margin-bottom: 4px; cursor: pointer; background: rgba(255, 255, 255, .03); border: 2px solid transparent; }
.cx-row:hover { background: rgba(255, 61, 129, .12); } .cx-row.sel { border-color: #ffd23f; background: rgba(255, 210, 63, .1); }
.cx-av { position: relative; flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font: 14px var(--px, monospace); color: #120c1e; border: 3px solid #120c1e; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -2px 0 rgba(0, 0, 0, .25); }
.cx-dot { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #4b4f78; border: 3px solid #0c0c22; } .cx-dot.on { background: #3dff8b; box-shadow: 0 0 8px #3dff8b; }
.cx-mid { flex: 1; min-width: 0; } .cx-name { font-weight: 700; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-sub { font-size: 12px; color: #7a80a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .cx-right small { color: #6c7096; font-size: 11px; } .cx-unread { min-width: 18px; padding: 3px 5px; text-align: center; font: 8px var(--px, monospace); color: #fff; background: #ff3d81; }
.cx-h { margin: 10px 4px 6px; font: 7px var(--px, monospace); color: #6c7096; letter-spacing: 1px; }
.cx-acts { display: flex; gap: 6px; }
.cx-mini { padding: 7px 9px; font: 700 11px var(--ui, sans-serif); text-transform: uppercase; cursor: pointer; color: #fff; background: #2a2a55; border: 2px solid #120c1e; box-shadow: 0 3px 0 #05050f; } .cx-mini.ok { background: #3dff8b; color: #02210e; } .cx-mini.no { background: #7d1426; } .cx-mini:disabled { opacity: .55; cursor: default; }
.cx-btn { margin-top: 12px; padding: 10px 14px; font: 700 12px var(--ui, sans-serif); text-transform: uppercase; cursor: pointer; color: #1a0f00; background: linear-gradient(180deg, #ffe680, #ffd23f); border: 3px solid #120c1e; box-shadow: 0 4px 0 #6b4400; }
.cx-empty { padding: 26px 14px; text-align: center; color: #7a80a8; font-size: 13px; line-height: 1.5; } .cx-empty-t { margin-bottom: 4px; }
.cx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cx-placeholder { margin: auto; padding: 24px; text-align: center; max-width: 380px; } .cx-ph-t { font: 12px var(--px, monospace); color: #ffd23f; text-shadow: 3px 3px 0 #000; margin-bottom: 14px; } .cx-ph-s { color: #8a90b8; font-size: 14px; line-height: 1.6; }
.cx-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 3px solid #120c1e; background: rgba(8, 8, 26, .6); } .cx-back { display: none; width: 34px; height: 34px; font: 18px var(--px, monospace); color: #fff; background: #2a2a55; border: 2px solid #120c1e; cursor: pointer; } .cx-menu { display: flex; gap: 6px; }
.cx-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cx-day { align-self: center; margin: 6px 0; padding: 4px 10px; font: 7px var(--px, monospace); color: #6c7096; background: rgba(255, 255, 255, .05); }
.cx-msg { max-width: min(76%, 520px); padding: 9px 12px; border: 3px solid #120c1e; box-shadow: 3px 3px 0 #05050f; word-break: break-word; }
.cx-msg.mine { align-self: flex-end; background: linear-gradient(180deg, #ff6ba0, #ff3d81); color: #fff; } .cx-msg.theirs { align-self: flex-start; background: #23234d; color: #e7e9ff; } .cx-msg.err { background: #7d1426; }
.cx-txt { font-size: 14px; line-height: 1.45; } .cx-meta { margin-top: 3px; font-size: 10px; opacity: .65; text-align: right; }
.cx-comp { display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 3px solid #120c1e; background: rgba(8, 8, 26, .6); } .cx-input { flex: 1; min-width: 0; padding: 12px; font: 600 14px var(--ui, sans-serif); color: #fff; background: #07071a; border: 3px solid #120c1e; box-shadow: inset 0 0 0 2px #2e2e63; outline: none; } .cx-input:focus { box-shadow: inset 0 0 0 2px #2de2e6; }
.cx-cnt { font-size: 10px; color: #6c7096; width: 44px; text-align: right; } .cx-send { padding: 12px 16px; font: 9px var(--px, monospace); color: #1a0f00; background: linear-gradient(180deg, #ffe680, #ffd23f); border: 3px solid #120c1e; box-shadow: 0 4px 0 #6b4400; cursor: pointer; } .cx-send:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b4400; }
.cx-nav-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 2px 4px; font: 7px/1.3 var(--px, monospace); text-align: center; color: #fff; background: #ff3d81; vertical-align: top; }
@media (max-width: 760px) {
  #chat .cx { grid-template-columns: 1fr; height: 76vh; } #chat .cx .cx-main { display: none; } #chat .cx.thread-open .cx-side { display: none; } #chat .cx.thread-open .cx-main { display: flex; } .cx-back { display: block; } .cx-cnt { display: none; } .cx-menu .cx-mini { padding: 6px; font-size: 10px; }
}