/* ROPHL Chat styles - matches main site theme */
.chat-hero{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;overflow:hidden;position:relative}
.chat-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,#ffe00055,transparent 70%)}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:#0f1f3d;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.45rem .8rem;border-radius:999px}
.dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block}
.dot-live{background:#22c55e;box-shadow:0 0 0 4px #22c55e33;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #22c55e22}}
.hero-art{display:flex;flex-direction:column;gap:.6rem;min-width:240px}
.chat-bubble-preview{background:#fff;border:1px solid #e1e6ed;padding:.7rem 1rem;border-radius:1rem;box-shadow:0 10px 25px rgba(18,35,79,.08);font-size:.9rem;color:#10203b;max-width:260px}
.b1{align-self:flex-start;border-bottom-left-radius:.25rem}
.b2{align-self:flex-end;background:#0047b3;color:#fff;border-bottom-right-radius:.25rem}
.b3{align-self:flex-start;border-bottom-left-radius:.25rem}
.setup-warning{background:#fff7e6;border:1px solid #f5c518;color:#6b4e00;padding:.9rem 1.1rem;margin-bottom:1.25rem;line-height:1.6}
.setup-warning code{background:#00000010;padding:.1rem .35rem}
.chat-shell{display:grid;grid-template-columns:320px 1fr;gap:1.25rem;align-items:start}
.chat-side{display:grid;gap:1rem}
.side-card{background:#fff;border:1px solid #e1e6ed;box-shadow:0 16px 32px rgba(18,35,79,.06);padding:1.25rem}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f1f4f8;padding:.3rem;margin-bottom:1rem}
.auth-tab{border:none;background:transparent;padding:.65rem;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;cursor:pointer;color:#64748b}
.auth-tab.active{background:#000;color:#ffe000}
.field{display:grid;gap:.4rem;margin-bottom:.85rem}
.field label{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#10203b}
.field input{padding:.8rem .9rem;border:1px solid #d7dce1;border-radius:.35rem;font-size:.95rem;width:100%}
.field input:focus{outline:2px solid #0047b3;border-color:#0047b3}
.primary-btn{background:#0047b3;color:#fff;border:none;padding:.85rem;font-weight:800;font-size:.95rem;cursor:pointer;width:100%}
.primary-btn:hover{background:#003a93}
.primary-btn:disabled{opacity:.6;cursor:wait}
.auth-hint{min-height:1.2rem;font-size:.85rem;color:#b30000;margin:.6rem 0}
.auth-hint.ok{color:#0a7a2e}
.auth-sub{font-size:.8rem;color:#64748b;line-height:1.6;margin:0}
.profile-top{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem}
.avatar{width:3rem;height:3rem;border-radius:50%;background:#0047b3;color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.3rem;flex-shrink:0}
.profile-name{margin:0;font-weight:800;color:#10203b}
.profile-email{margin:0;font-size:.8rem;color:#64748b;word-break:break-all}
.online-pill{margin-left:auto;font-size:.7rem;font-weight:800;background:#e8f9ee;color:#0a7a2e;padding:.3rem .6rem;border-radius:999px;display:inline-flex;gap:.35rem;align-items:center;text-transform:uppercase}
.name-row{display:flex;gap:.5rem}
.small-btn{background:#fff;border:1px solid #0047b3;color:#0047b3;font-weight:800;padding:.7rem .9rem;cursor:pointer;white-space:nowrap}
.small-btn:hover{background:#eef6ff}
.ghost-btn{width:100%;background:#000;color:#fff;border:none;padding:.8rem;font-weight:800;cursor:pointer;margin-bottom:1rem}
.ghost-btn:hover{background:#222}
.rules-box{background:#f8fafc;border:1px solid #e1e6ed;padding:.9rem}
.rules-box h3{margin:0 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#10203b}
.rules-box ul{margin:0;padding-left:1.1rem;color:#42506f;font-size:.85rem;line-height:1.8}
.stats-card{display:flex;gap:1rem;text-align:center}
.stat{flex:1;background:#f8fafc;border:1px solid #e1e6ed;padding:.8rem}
.stat-num{display:block;font-size:1.4rem;font-weight:900;color:#10203b}
.stat-num.live{color:#0a7a2e;font-size:1rem}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:700}
.chat-main{background:#fff;border:1px solid #e1e6ed;box-shadow:0 16px 32px rgba(18,35,79,.06);display:flex;flex-direction:column;min-height:560px;overflow:hidden}
.chat-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid #e1e6ed;background:linear-gradient(180deg,#fff,#f8fafc)}
.chat-topbar h2{margin:0;color:#10203b;font-size:1.15rem}
.chat-topbar p{margin:.2rem 0 0;color:#64748b;font-size:.85rem}
.messages{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:.8rem;max-height:480px;min-height:320px;background:#f4f5f7;background-image:radial-gradient(#d7dce1 1px,transparent 1px);background-size:22px 22px}
.messages-empty{text-align:center;background:#fff;border:1px dashed #cbd5e1;padding:2.5rem 1.5rem;color:#64748b;margin:auto}
.empty-icon{font-weight:900;letter-spacing:.2em;color:#0047b3;margin-bottom:.5rem}
.msg{display:flex;gap:.6rem;align-items:flex-end;max-width:85%}
.msg-avatar{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;flex-shrink:0;font-size:.95rem}
.msg-body{background:#fff;border:1px solid #e1e6ed;padding:.6rem .85rem;border-radius:1rem;box-shadow:0 6px 16px rgba(18,35,79,.06);min-width:0}
.msg-meta{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.2rem;flex-wrap:wrap}
.msg-name{font-weight:800;font-size:.8rem;color:#10203b}
.msg-time{font-size:.72rem;color:#94a3b8}
.msg-text{margin:0;color:#1a1a1a;line-height:1.6;word-break:break-word;font-size:.93rem}
.msg-delete{background:none;border:none;color:#b30000;cursor:pointer;font-size:.75rem;padding:0}
.msg-delete:hover{text-decoration:underline}
.msg.mine{margin-left:auto;flex-direction:row-reverse}
.msg.mine .msg-body{background:#0047b3;border-color:#0047b3;color:#fff}
.msg.mine .msg-name{color:#ffe000}
.msg.mine .msg-text{color:#fff}
.msg.mine .msg-time{color:#cfe0ff}
.composer{display:flex;gap:.6rem;padding:1rem 1.25rem;border-top:1px solid #e1e6ed;background:#fff}
.composer input{flex:1;padding:.9rem 1rem;border:1px solid #d7dce1;border-radius:999px;font-size:.95rem}
.composer input:focus{outline:2px solid #0047b3}
.composer input:disabled{background:#f1f4f8}
.send-btn{background:#000;color:#ffe000;border:none;border-radius:999px;padding:.9rem 1.5rem;font-weight:900;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.send-btn:hover:not(:disabled){background:#222;transform:translateY(-1px)}
.send-btn:disabled{opacity:.5;cursor:not-allowed}
.composer-hint{margin:0;padding:0 1.25rem .9rem;color:#94a3b8;font-size:.78rem}
.composer-hint kbd{background:#f1f4f8;border:1px solid #d7dce1;padding:.1rem .35rem;border-radius:.25rem}
@media(max-width:980px){.chat-shell{grid-template-columns:1fr}.hero-art{display:none}.chat-hero{flex-direction:column;align-items:flex-start}}
@media(max-width:680px){.msg{max-width:95%}.composer{flex-direction:column}.send-btn{width:100%}}