.online-social-overlay { --social-edge:#293b61; --social-accent:#00e5ff; position:fixed; inset:0; z-index:18000; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:center; background:rgba(3,6,15,.92); box-sizing:border-box; color:#f3f5ff; }
.online-social-overlay[hidden] {display:none;}
.online-social-card {width:min(100%,680px); max-height:100%; display:flex; flex-direction:column; gap:12px; padding:16px; box-sizing:border-box; border:1px solid var(--social-accent); border-radius:22px; background:linear-gradient(145deg,#11162a,#090e1c); box-shadow:0 0 24px #00e5ff16; font-family:inherit; overflow:hidden;}
.online-social-card header {display:flex; align-items:center; justify-content:space-between; gap:12px;}
.online-social-card h2 {font-size:clamp(20px,5vw,28px); margin:0; color:var(--social-accent);}
.online-social-card h3 {font-size:17px;margin:0;}
.online-social-card p {margin:4px 0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.65;}
.online-social-body {min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:10px; padding:2px;}
.online-social-card label {display:flex;flex-direction:column;gap:6px;font-size:14px;}
.online-social-card input,.online-social-card textarea {box-sizing:border-box;width:100%;min-height:44px;background:#080e1e;color:#fff;border:1px solid var(--social-edge);border-radius:10px;padding:10px;font:inherit;}
.online-social-card textarea {min-height:88px;resize:vertical;max-height:160px;}
.online-social-button {min-height:44px; margin:0; padding:8px 12px; font:inherit; font-size:14px; border-radius:12px; color:#fff; background:#19213a; border:1px solid var(--social-edge); cursor:pointer; flex-shrink:0;}
.online-social-button:disabled {opacity:.55;cursor:wait;}
.online-social-button:focus-visible,.online-social-card input:focus-visible,.online-social-card textarea:focus-visible {outline:2px solid var(--social-accent);outline-offset:2px;}
.online-social-row {display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border:1px solid var(--social-edge);border-radius:14px;background:#121a2c;}
.online-social-row img {width:44px;height:44px;object-fit:contain;}
.online-social-person {flex:1;min-width:0;overflow-wrap:anywhere;}
.online-social-actions {display:flex;flex-wrap:wrap;gap:8px;}
.online-social-message {border:1px solid var(--social-edge);border-radius:12px;padding:10px;background:#111a2c;}
.online-social-message.mine {border-color:#00b4cc;background:#09323c;}
#online-social-status {font-size:14px;color:#9eadc9;}
#online-social-status[data-state=error] {color:#ff768b;}
#online-social-back {width:100%;}
@media(max-width:360px) {.online-social-card{padding:12px;gap:8px}.online-social-actions{width:100%}.online-social-actions button{flex:1}.online-social-row{padding:10px}}