/* HX Chat — Global Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-deepest: #05080f;
  --bg-deep: #0a0e17;
  --bg-primary: #0f1420;
  --bg-secondary: #151b2b;
  --bg-tertiary: #1b2236;
  --bg-elevated: #212942;
  --bg-hover: #252e4a;
  --bg-active: #2d3860;
  --accent-primary: #7c3aed;
  --accent-primary-hover: #6d28d9;
  --accent-primary-glow: rgba(124, 58, 237, 0.35);
  --accent-secondary: #06b6d4;
  --accent-secondary-glow: rgba(6, 182, 212, 0.25);
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-danger-hover: #dc2626;
  --text-primary: #e8eaf0;
  --text-secondary: #9ca3b8;
  --text-muted: #5d6680;
  --text-accent: #a78bfa;
  --text-link: #38bdf8;
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.15);
  --glass-bg: rgba(15,20,32,0.7);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: 20px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px var(--accent-primary-glow);
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 400ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 500ms cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font-family);font-size:0.9375rem;color:var(--text-primary);background:var(--bg-deep);line-height:1.5;overflow:hidden;min-height:100vh}
a{color:var(--text-link);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--accent-secondary)}
button{font-family:var(--font-family);cursor:pointer;border:none;outline:none;background:none;color:inherit}
input,textarea,select{font-family:var(--font-family);font-size:0.9375rem;color:var(--text-primary);outline:none;border:none;background:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}
*{scrollbar-width:thin;scrollbar-color:var(--bg-elevated) transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);font-weight:600;font-size:0.8125rem;transition:all var(--transition-fast);white-space:nowrap;user-select:none;position:relative;overflow:hidden}
.btn:active{transform:scale(0.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent-primary),#9333ea);color:#fff;box-shadow:0 2px 12px var(--accent-primary-glow)}
.btn-primary:hover{box-shadow:0 4px 20px var(--accent-primary-glow);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-default)}
.btn-secondary:hover{background:var(--bg-elevated);color:var(--text-primary)}
.btn-danger{background:linear-gradient(135deg,var(--accent-danger),#b91c1c);color:#fff}
.btn-danger:hover{box-shadow:0 4px 20px rgba(239,68,68,0.35);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.btn-sm{padding:6px 12px;font-size:0.6875rem}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-md)}

.input-group{position:relative;margin-bottom:16px}
.input-group label{display:block;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);margin-bottom:8px}
.input-group input,.input-group textarea,.input-group select{width:100%;padding:12px 16px;background:var(--bg-deep);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast)}
.input-group input:focus,.input-group textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow)}
.input-group input::placeholder,.input-group textarea::placeholder{color:var(--text-muted)}
.input-group .input-error{color:var(--accent-danger);font-size:0.6875rem;margin-top:4px}

.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em}
.badge-owner{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.badge-admin{background:linear-gradient(135deg,var(--accent-primary),#9333ea);color:#fff}
.badge-member{background:var(--bg-tertiary);color:var(--text-secondary)}

.avatar{width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8125rem;color:#fff;flex-shrink:0;position:relative;user-select:none}
.avatar-sm{width:28px;height:28px;font-size:0.6875rem}
.avatar-lg{width:56px;height:56px;font-size:1.125rem}
.avatar .status-dot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:var(--radius-full);border:2.5px solid var(--bg-secondary)}
.avatar .status-dot.online{background:var(--accent-success)}
.avatar .status-dot.offline{background:var(--text-muted)}

.tooltip{position:relative}
.tooltip::before{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(0.8);background:var(--bg-deepest);color:var(--text-primary);padding:6px 12px;border-radius:var(--radius-md);font-size:0.8125rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:all var(--transition-fast);z-index:1000;box-shadow:var(--shadow-lg)}
.tooltip:hover::before{opacity:1;transform:translateY(-50%) scale(1)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;visibility:hidden;transition:all var(--transition-base)}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);width:90%;max-width:480px;max-height:85vh;overflow-y:auto;transform:scale(0.9) translateY(20px);transition:transform var(--transition-bounce)}
.modal-overlay.active .modal{transform:scale(1) translateY(0)}
.modal-header{padding:24px;text-align:center}
.modal-header h2{font-size:1.375rem;font-weight:700}
.modal-header p{color:var(--text-secondary);font-size:0.8125rem;margin-top:8px}
.modal-body{padding:0 24px 24px}
.modal-footer{padding:16px 24px;background:var(--bg-primary);border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;gap:12px;border-radius:0 0 var(--radius-xl) var(--radius-xl)}

.context-menu{position:fixed;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;padding:4px;z-index:950;opacity:0;transform:scale(0.95);transition:all var(--transition-fast);pointer-events:none}
.context-menu.active{opacity:1;transform:scale(1);pointer-events:all}
.context-menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:0.8125rem;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.context-menu-item:hover{background:var(--accent-primary);color:#fff}
.context-menu-item.danger{color:var(--accent-danger)}
.context-menu-item.danger:hover{background:var(--accent-danger);color:#fff}
.context-menu-separator{height:1px;background:var(--border-subtle);margin:4px 0}

.toast-container{position:fixed;top:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:300px;max-width:420px;animation:toastIn .4s cubic-bezier(0.34,1.56,0.64,1) forwards;font-size:0.8125rem}
.toast.removing{animation:toastOut .3s ease forwards}
.toast-success{border-left:3px solid var(--accent-success)}
.toast-error{border-left:3px solid var(--accent-danger)}
.toast-info{border-left:3px solid var(--accent-secondary)}

.spinner{width:24px;height:24px;border:3px solid var(--border-default);border-top-color:var(--accent-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translateX(100px) scale(0.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(100px) scale(0.9)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 10px var(--accent-primary-glow)}50%{box-shadow:0 0 25px var(--accent-primary-glow),0 0 50px rgba(124,58,237,0.15)}}

.hidden{display:none !important}
.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-elevated) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}