/* Live chat box shared by Coop Race and Coop Wheel (uses each page's own color variables) */
.chat{background:var(--paper-2);border:3px solid var(--char);border-radius:14px;box-shadow:5px 5px 0 var(--char);padding:14px 16px;margin:16px 0}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chat-head h2{font-family:var(--display);font-weight:400;color:var(--barn);margin:0;font-size:22px;letter-spacing:.4px}
.chat-head .chat-live{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--olive);border:2px solid var(--char);margin-right:8px;vertical-align:1px}
.chat-clear{font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--paper);color:var(--char);border:2px solid var(--char);border-radius:999px;padding:3px 12px;box-shadow:2px 2px 0 var(--char)}
.chat-clear:hover{background:#F0C4BD}
.chat-list{list-style:none;margin:0;padding:8px;height:260px;overflow-y:auto;background:#FFFBF3;border:2px solid var(--char);border-radius:10px;display:flex;flex-direction:column;gap:6px}
.chat-list li{display:flex;align-items:flex-start;gap:8px;line-height:1.35;font-size:15px;padding:3px 4px;border-radius:6px;overflow-wrap:anywhere}
.chat-list li:hover{background:rgba(217,162,58,.12)}
.chat-list .who{font-family:var(--display);font-weight:400;color:var(--barn);white-space:nowrap}
.chat-list .host-tag{display:inline-block;background:var(--mustard);color:var(--char);border:2px solid var(--char);border-radius:999px;font-family:var(--body);font-size:11px;font-weight:700;padding:0 7px;margin-left:5px;vertical-align:2px}
.chat-list .text{flex:1}
.chat-list .del{flex:none;border:2px solid var(--char);background:var(--paper);color:var(--barn);border-radius:6px;width:24px;height:24px;line-height:18px;font-weight:700;cursor:pointer;padding:0}
.chat-list .del:hover{background:var(--barn);color:var(--paper)}
.chat-empty{color:var(--muted);font-style:italic;text-align:center;margin:auto}
.chat-form{display:grid;grid-template-columns:170px 1fr auto;gap:8px;margin-top:10px}
.chat-form input{font:inherit;border:2px solid var(--char);border-radius:9px;padding:9px 11px;background:#FFFBF3;color:var(--char);min-width:0}
.chat-form input:focus{outline:3px solid var(--mustard);outline-offset:1px}
.chat-form button{font:inherit;font-family:var(--display);font-weight:400;font-size:17px;cursor:pointer;border:2px solid var(--char);border-radius:9px;padding:8px 18px;background:var(--barn);color:var(--paper);box-shadow:3px 3px 0 var(--char)}
.chat-form button:hover{background:var(--barn-dk)}
.chat-form button:disabled{opacity:.5;cursor:not-allowed}
.chat-note{min-height:18px;font-size:13px;font-weight:700;color:var(--barn);margin-top:6px}
.chat-head-btns{display:flex;gap:8px;align-items:center}
.chat-toggle{font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--barn);color:var(--paper);border:2px solid var(--char);border-radius:999px;padding:3px 14px;box-shadow:2px 2px 0 var(--char)}
.chat-unread{display:inline-block;min-width:22px;text-align:center;background:var(--barn);color:var(--paper);border:2px solid var(--char);border-radius:999px;font-family:var(--body);font-size:12px;font-weight:700;padding:0 6px;margin-left:8px;vertical-align:3px}
.chat-unread[hidden],.chat-body[hidden]{display:none}
.chat.chat-folded{padding:10px 14px}
.chat.chat-folded .chat-head{margin-bottom:0;cursor:pointer}
@media (max-width:700px){
  .chat-form{grid-template-columns:1fr auto}
  .chat-form .chat-name{grid-column:1 / -1}
  .chat-list{height:220px}
}