:root { color-scheme: dark; font-family: Inter, "Noto Sans SC", sans-serif; background: #07050e; color: #f7f5ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; background: #08050f; }
button, input { font: inherit; } button { border: 0; color: inherit; cursor: pointer; } button:disabled { cursor: wait; opacity: .65; }
.app-shell { position:relative; z-index:2; height: 100vh; display: flex; padding: 0; }
.app-shell::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.intro { position: fixed; inset: 0; z-index: 9999; background: #08050f; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s; }
.intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; color: #fff; }
.intro-card img { width: 165px; height: 165px; border-radius: 39px; box-shadow: 0 4px 36px rgba(127, 169, 255, 0.3); }
.intro-wordmark { font-size: 50px; font-weight: 700; letter-spacing: -0.06em; }
.intro-card p { color: #a3a3aa; font-size: 15px; margin: 0; }
.phone { width: 100%; height: 100%; position: relative; overflow: hidden; border: none; border-radius: 0; background: linear-gradient(132deg, rgba(23, 17, 31, 0.6), rgba(11, 8, 18, 0.45) 55%, rgba(19, 10, 28, 0.55)); box-shadow: none; backdrop-filter: blur(40px); isolation: isolate; }
.language-toggle { position: absolute; z-index: 20; top: 24px; right: 24px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid #d7c9ff4d; border-radius: 11px; color: #f6f2ff; background: #3c2856a6; box-shadow: 0 5px 18px #0006, inset 0 1px #ffffff3d; font: 12px "DM Mono", monospace; letter-spacing: .04em; backdrop-filter: blur(14px); transition: all 0.2s; }.language-toggle:hover { background: #67438cd9; transform: translateY(-1px); }
.liquid-scene { display: none !important; }
@keyframes popIn { 0% { opacity: 0; transform: translateY(20px) scale(0.9); filter: blur(4px); } 60% { transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes fluidRibbon { 0%{transform:translate3d(-5%,-8%,0) rotate(-11deg) scaleX(.9) skewX(-8deg);border-radius:56% 44% 63% 37% / 46% 57% 43% 54%} 46%{transform:translate3d(8%,9%,0) rotate(4deg) scaleX(1.05) skewX(6deg);border-radius:42% 58% 38% 62% / 59% 39% 61% 41%} 100%{transform:translate3d(-2%,19%,0) rotate(-5deg) scaleX(.96) skewX(-4deg);border-radius:53% 47% 56% 44% / 41% 62% 38% 59%} } @keyframes fluidGlow { from{transform:translate3d(15%,-15%,0) rotate(-13deg) scale(.8)} to{transform:translate3d(-15%,22%,0) rotate(12deg) scale(1.2)} }
.phone::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, #fff0 18%, #cbb8ff12 48%, #fff0 74%); opacity: .16; }
.auth { width: 100%; height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 15% 88%,#4f1a913b,transparent 50%),linear-gradient(135deg,#150c26e8,#080912e8 60%,#120820e6); }
.auth::before,.auth::after { content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:48% 52% 47% 53% / 52% 38% 62% 48%; mix-blend-mode:screen; }
.auth::before { width:128%; height:31%; left:-18%; top:33%; opacity:.95; background:linear-gradient(105deg,#4e13aa 0%,#9e42f1 28%,#d5a8ff 39%,#8de8ff 53%,#8f52ef 71%,#29105d 100%); box-shadow:0 0 22px #b366ff,0 0 64px #7f3dff,inset 0 2px 9px #fff8,inset 0 -9px 20px #30106e; filter:blur(.25px); transform:rotate(-8deg); animation:fluidRibbon 9s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.auth::after { width:80%; height:25%; right:-25%; top:46%; opacity:.64; background:linear-gradient(110deg,transparent,#6324c9 16%,#b970ff 43%,#79dfff 63%,#6324c9 78%,transparent); box-shadow:0 0 38px #9857ff,0 0 80px #4d22b4; filter:blur(13px); animation:fluidGlow 12s ease-in-out infinite alternate; }
.auth-art { position:relative; padding:52px; display:flex; flex-direction:column; justify-content:space-between; border-right:none; }
.auth-art > * { position:relative; z-index:1; }
.brand { display: flex; align-items: flex-end; gap: 11px; font-weight: 700; letter-spacing: -.06em; font-size: 36px; line-height: 1.35; }.brand-mark { width: 60px; height: 60px; border-radius: 18px; background: url('./assets/app-icon.png') center / cover; box-shadow: 0 2px 18px #7fa9ff66; }
.hero-copy { max-width: 420px; }.eyebrow { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.6); font: 600 12px "DM Mono", monospace; letter-spacing: .08em; }.hero-copy h1 { margin: 16px 0; font-size: clamp(38px, 4vw, 64px); line-height: 1.08; letter-spacing: -.075em; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.7); font-weight: 700; }.hero-copy p { color: #f0f0f5; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.6); line-height: 1.7; font-size: 15px; font-weight: 500; }
.tiny-users { display: flex; align-items: center; margin-top: 30px; }.tiny-users .mini { width: 27px; height: 27px; margin-right: -7px; border: 2px solid #1a1a1d; border-radius: 50%; background: var(--a); }.tiny-users span { margin-left: 15px; color: #909096; font-size: 12px; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 60px; max-width: 480px; width: 100%; margin: auto; transform: scale(1.15); transform-origin: center; }.auth-panel h2 { margin: 0 0 8px; letter-spacing: -.05em; font-size: 29px; }.muted { color: #929298; margin: 0 0 28px; font-size: 14px; }
.form { display: grid; gap: 13px; }.field { position: relative; }.field input { width: 100%; outline: none; padding: 15px 16px; border: 1px solid rgba(255,255,255,0.25); border-radius: 13px; color: #ffffff; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.6); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(48px); transition: .2s; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); }.field input::placeholder { color: rgba(255,255,255,0.7); }.field input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); box-shadow: 0 0 0 3px rgba(255,255,255,0.1), inset 0 1px 1px rgba(255,255,255,0.15); }
.primary { padding: 15px 18px; background: #7f3dff; backdrop-filter: none; border: none; color: #fff; border-radius: 13px; font-weight: 700; transition: transform .2s, background .2s; box-shadow: 0 8px 24px rgba(127,61,255,0.4); text-shadow: none; }.primary:hover { background: #6a2bda; transform: translateY(-1px); }.switch { margin-top: 21px; color: #94949a; font-size: 13px; text-align: center; }.text-btn { background: transparent; padding: 0; color: #eee; text-decoration: underline; text-underline-offset: 3px; }.admin-link { margin-top:12px; border:0; background:transparent; color:#66666d; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.avatar-chooser { display: flex; align-items: center; gap: 14px; margin-bottom: 7px; }.avatar { position: relative; overflow: hidden; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #333; object-fit: cover; }.avatar.large { width: 74px; height: 74px; border-radius: 50%; }.avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg,#fff3,transparent 45%); pointer-events:none; }.avatar-options { display: flex; gap: 8px; }.secondary, .icon-btn { background: #7f3dff; backdrop-filter: none; border: none; border-radius: 10px; color: #fff; box-shadow: 0 4px 12px rgba(127,61,255,0.3); }.secondary { padding: 9px 11px; font-size: 12px; }.secondary:hover, .icon-btn:hover { background: #6a2bda; }.hint { font-size: 11px; color: #77777e; margin-top: 7px; }
.chat-layout { height: 100%; display: grid; grid-template-columns: 300px 1fr; }.sidebar { padding: 28px 16px 18px; background: linear-gradient(135deg, rgba(40, 20, 65, 0.85), rgba(12, 8, 20, 0.95)); backdrop-filter: blur(24px); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; z-index: 5; position: relative; }.sidebar-top { padding: 0 10px 21px; display: flex; justify-content: space-between; align-items:center; }.sidebar-top .brand { font-size: 28px; }.sidebar-top .brand-mark { width: 48px;height:48px; }.icon-btn { width: 31px; height: 31px; font-size: 20px; display: grid; place-items:center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }.search { padding: 11px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); background: rgba(20, 15, 30, 0.6); backdrop-filter: blur(64px); font-size: 12px; transition: .2s; }.search::placeholder { color: rgba(255,255,255,0.6); }.search:focus { border-color: rgba(255,255,255,0.2); background: rgba(20, 15, 30, 0.75); box-shadow: 0 0 0 3px rgba(20,15,30,0.4); }.section-label { margin: 25px 10px 10px; color: #77777e; font: 11px "DM Mono", monospace; letter-spacing:.06em; }.contact { padding: 9px; display:flex; align-items:center; gap: 11px; border-radius: 12px; cursor:pointer; background: rgba(48, 48, 52, 0.2); backdrop-filter: blur(8px); border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }.contact:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.1); transform: translateX(4px); }.contact .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; align-self: center; }.contact-info { min-width:0; flex:1; }.contact-name { font-size:13px; font-weight: 600; }.contact-status { margin-top:3px; color:#909097;font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.online { display:inline-block; width:7px;height:7px;background:#b7ff62;border-radius:50%; box-shadow:0 0 8px #b7ff62; margin-right:4px; vertical-align:middle; }
.avatar-wrapper { position: relative; display: inline-flex; flex-shrink: 0; }
.unread-badge { position: absolute; top: -2px; right: -4px; background: #ff3b30; color: white; font-size: 10px; font-weight: bold; padding: 0 4px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #202023; }
.account { margin-top:auto; padding: 11px 8px; display:flex; align-items:center; gap:10px; border-top: 1px solid #ffffff0d; }.account .avatar { width:33px;height:33px;border-radius:50%; }.account-name{ font-size:12px; font-weight:600; }.account-action { margin-left:auto; background:transparent;color:#888;font-size:17px; transition: color 0.2s; }.account-action:hover { color: #fff; }
@keyframes popIn { 0% { opacity: 0; transform: translateY(20px) scale(0.9); filter: blur(4px); } 60% { transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.conversation { display:flex; flex-direction:column; min-width:0; height: 100%; overflow: hidden; position: relative; isolation: isolate; background: radial-gradient(ellipse at 15% 88%,#4f1a913b,transparent 50%),linear-gradient(135deg,#150c26e8,#080912e8 60%,#120820e6); }.conversation::before, .conversation::after { content: ""; position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; }.conversation::before { width: 128%; height: 31%; left: -18%; top: 33%; opacity: .7; background: linear-gradient(105deg,#4e13aa 0%,#9e42f1 28%,#d5a8ff 39%,#8de8ff 53%,#8f52ef 71%,#29105d 100%); filter: blur(5px); box-shadow: 0 0 40px 12px rgba(168,117,255,0.55), 0 0 80px 24px rgba(100,50,200,0.3); will-change: transform; animation: rectRibbon 18s ease-in-out infinite alternate; }.conversation::after { width: 80%; height: 25%; right: -25%; top: 46%; opacity: .5; background: linear-gradient(110deg,transparent,#6324c9 16%,#b970ff 43%,#79dfff 63%,#6324c9 78%,transparent); filter: blur(8px); box-shadow: 0 0 50px 16px rgba(121,223,255,0.35), 0 0 90px 32px rgba(99,36,201,0.25); will-change: transform; animation: rectGlow 22s ease-in-out infinite alternate; } @keyframes rectRibbon { 0% { transform: translate3d(-5%, -8%, 0) rotate(-8deg) scaleX(.9) skewX(-4deg); } 100% { transform: translate3d(5%, 15%, 0) rotate(-2deg) scaleX(1.05) skewX(4deg); } } @keyframes rectGlow { 0% { transform: translate3d(10%, -10%, 0) rotate(-10deg) scale(.85); } 100% { transform: translate3d(-10%, 15%, 0) rotate(8deg) scale(1.15); } }.chat-head { height:82px; padding: 0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.06); background: rgba(15, 12, 20, 0.3); backdrop-filter: blur(16px); z-index: 10; flex-shrink: 0; }.chat-person { display:flex;align-items:center;gap:12px; }.chat-person .avatar { width:39px;height:39px;border-radius:50%; }.chat-title{font-size:14px;font-weight:600}.chat-subtitle{color:#888;font-size:11px;margin-top:3px}.head-actions{display:flex;gap:8px;margin-right:48px;}.messages { flex:1; overflow-y:auto; padding: 32px 32px 140px; display:flex; flex-direction:column; gap:16px; min-height: 0; position: relative; z-index: 1; }.date { align-self:center; color:#9a9aa1; background:rgba(32, 32, 35, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); padding:5px 9px;border-radius:7px;font:10px "DM Mono",monospace; flex-shrink: 0; }.message { max-width:68%; display:flex; gap:9px; align-self:flex-end; align-items:flex-start; transform-origin: top right; flex-direction:row-reverse; flex-shrink: 0; }.message.self { align-self:flex-start; flex-direction:row; transform-origin: top left; }.message .avatar { width:29px;height:29px;border-radius:50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2); flex-shrink: 0; }.message-content-wrapper { display:flex; flex-direction:column; max-width:100%; }.message-name { font-size:11px; color:#a875ff; margin-bottom:4px; padding:0 4px; text-shadow:0 1px 2px rgba(0,0,0,0.5); }.self .message-content-wrapper { align-items:flex-start; }.bubble { padding: 12px 16px; line-height:1.5; font-size:14px; color:#ffffff; font-weight: 500; text-shadow: none; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px) saturate(1.2); border:1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-radius: 18px 5px 18px 18px; position:relative; }.self .bubble { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(168, 117, 255, 0.6); box-shadow: 0 8px 24px rgba(0,0,0,0.2); color: #ffffff; border-radius: 5px 18px 18px 18px; }.message-meta { font-size:10px;color:#818187;margin-top:5px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }.composer { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 22px 20px; padding: 8px 8px 8px 16px; border:1px solid rgba(127,61,255,0.4); border-radius:16px; display:flex; gap:8px; align-items:flex-end; background:rgba(10, 8, 15, 0.9); backdrop-filter:blur(4px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); transition: all 0.3s ease; z-index: 20; }.composer:focus-within { border-color: rgba(168,117,255,0.6); background:rgba(10, 8, 15, 0.95); }.composer textarea { flex:1; outline:0;border:0;background:transparent;color:#ffffff;font-size:14px; font-weight: 500; text-shadow: none; resize:none; padding:8px 0; height: 80px; overflow-y:auto; font-family:inherit; line-height:1.5; scroll-behavior:smooth; }.composer textarea::placeholder { color: rgba(255,255,255,0.6); font-weight: normal; text-shadow: none; }.composer.expanded textarea { height: 320px; }.composer textarea::-webkit-scrollbar { width:4px; }.composer textarea::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:4px; }.send { width:34px;height:34px;border-radius:11px;background:rgba(127,61,255,0.3);backdrop-filter:blur(12px);border:1px solid rgba(127,61,255,0.5);color:#fff;font-size:17px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); margin-bottom:4px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(127,61,255,0.2); text-shadow:none; }.send:hover { background: rgba(127,61,255,0.45); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(127,61,255,0.4); }.expand-btn { position: absolute; top: -14px; right: 11px; width: 28px; height: 28px; border-radius: 50%; background: rgba(127,61,255,0.3); backdrop-filter: blur(12px); border: 1px solid rgba(127,61,255,0.5); color: #fff; text-shadow: none; display: grid; place-items: center; font-size: 10px; cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(127,61,255,0.2); transition: 0.2s; }.expand-btn:hover { background: rgba(127,61,255,0.45); transform: scale(1.05); }.empty-chat { height:100%; display:grid;place-items:center;text-align:center;color:#85858b; flex: 1; }.empty-chat h3{color:#eee;margin-bottom:6px;letter-spacing:-.04em}.notice { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:rgba(20, 15, 30, 0.6); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255,255,255,0.1); color:#ffffff;padding:16px 24px;border-radius:10px;font-size:16px; text-shadow:none; white-space:pre-wrap; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index:99999; }.notice.show{opacity:1;transform:translateX(-50%) translateY(0)}
.admin-login { height:100%; width:min(100%,460px); margin:auto; display:flex; flex-direction:column; justify-content:center; gap:56px; padding:42px; }.admin-login h2{margin:12px 0 8px;font-size:30px;letter-spacing:-.05em}.admin-console { height:100%; padding:38px 46px; overflow:auto; }.admin-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:45px}.admin-head .eyebrow{margin-top:13px}.admin-table{border:1px solid #37373d;border-radius:16px;overflow:hidden}.table-row{min-height:74px;padding:13px 19px;display:grid;grid-template-columns:1.7fr 1fr .8fr 1.45fr;gap:14px;align-items:center;border-top:1px solid #ffffff0d;font-size:12px}.table-row:first-child{border-top:0}.table-label{min-height:37px;color:#76767d;font:10px "DM Mono",monospace;letter-spacing:.05em;background:#1c1c1f}.user-cell{display:flex;align-items:center;gap:10px;min-width:0}.user-cell .avatar{width:39px;height:39px;border-radius:50%}.user-cell strong,.user-cell small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-cell small{margin-top:4px;color:#818187;font-size:10px}.when{color:#9a9aa1}.badge{font-style:normal;color:#c5ff8a;background:#a2ff2712;border:1px solid #a2ff2730;border-radius:7px;padding:4px 7px;font-size:10px}.badge.danger{color:#ff8b8b;background:#ff575712;border-color:#ff575730}.admin-actions{display:flex;justify-content:flex-end;gap:7px}.admin-actions .secondary{padding:7px 8px;font-size:11px}.admin-actions .delete{color:#ff9b9b}.empty-admin{padding:50px;color:#777;text-align:center;font-size:13px}
@media (max-width: 768px) { 
  .app-shell { padding:0; }
  .phone { border-radius:0; height:100vh; height:100dvh; min-height:0; border:0; }
  .auth { grid-template-columns: 1fr; }
  .auth-art{ display:none; }
  .auth-panel{padding:32px;}
  .chat-layout { display: flex; width: 200vw; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); transform: translateX(0); }
  .chat-layout.mobile-view-chat { transform: translateX(-100vw); }
  .sidebar { width: 100vw; flex-shrink: 0; display: flex; }
  .conversation { width: 100vw; flex-shrink: 0; }
  .chat-head { padding: 0 16px; }
  .messages { padding: 20px 16px 120px; }
  .composer { margin: 0 10px 12px; }
  .message { max-width: 85%; }
  .mobile-back-btn { display: grid !important; margin-right: 8px; width: 32px; height: 32px; background: rgba(255,255,255,0.1); border-radius: 50%; font-size: 16px; place-items: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-layout { grid-template-columns: 260px 1fr; }
  .sidebar { padding: 20px 12px 14px; }
  .messages { padding: 24px 20px 120px; }
  .composer { margin: 0 16px 16px; }
}
@media (min-width: 1440px) {
  .chat-layout { grid-template-columns: 360px 1fr; }
  .sidebar { padding: 32px 24px 24px; }
}
.mobile-back-btn { display: none; }
@media (max-width: 768px) { .language-toggle { top: 12px; right: 12px; } }
@media (max-width: 768px) { .admin-console{padding:28px 17px}.admin-head{margin-bottom:27px}.table-row{grid-template-columns:1fr auto;gap:10px}.table-label span:nth-child(2),.table-label span:nth-child(3),.when{display:none}.admin-actions{justify-content:start}.admin-login{padding:30px} }

.contact.active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: scale(1.02); }
.accept-btn { margin-left: auto; font-size: 12px; padding: 4px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); color: #111; cursor: pointer; transition: all 0.2s; }
.accept-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(255,255,255,0.2); }
.msg-media { max-width: 200px; max-height: 200px; border-radius: 12px; display: block; }
.msg-file { display: inline-block; padding: 8px 12px; background: rgba(0,0,0,0.05); border-radius: 8px; text-decoration: none; color: inherit; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(16px) saturate(120%); animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.composer-disabled { padding: 16px; text-align: center; color: #888; background: rgba(32,32,35,0.4); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.06); margin-top: auto; }
.auth-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(32px); border: 1px solid rgba(255,255,255,0.08); border-radius: 32px; box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 0 20px rgba(255,255,255,0.03); }

.add-menu-item { font-size: 14px; text-align: left; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 12, 25, 0.2); width: 100%; padding: 12px 14px; color: #ff007f; font-weight: 500; border-radius: 10px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-shadow: none; }
html[lang="en"] .add-menu-item { font-size: 12.5px; padding: 12px 10px; }
.add-menu-item:hover { background: rgba(127, 61, 255, 0.2); border-color: rgba(255, 0, 127, 0.4); color: #ff007f; transform: translateY(-1px); }

.group-badge { position: absolute; bottom: -2px; right: -4px; background: linear-gradient(135deg, #7f3dff, #a875ff); color: white; font-size: 9px; font-weight: bold; padding: 0 4px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #202023; }
.cg-friend-item:hover { background: rgba(168,117,255,0.07) !important; }
#create-group-overlay input { color: #fff !important; }
#create-group-overlay input::placeholder { color: rgba(255,255,255,0.4); }

.danger-btn { background: #e91e63; backdrop-filter: none; border: none; border-radius: 10px; color: #fff; box-shadow: 0 4px 12px rgba(233,30,99,0.3); padding: 9px 11px; font-size: 12px; transition: all 0.2s; } .danger-btn:hover { background: #d81b60; transform: translateY(-1px); }


/* Badge and Status Styles */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-dot.online { background: #34c759; box-shadow: 0 0 6px rgba(52,199,89,0.5); }
.status-dot.offline { background: #8e8e93; }
.contact-avatar-wrapper { position: relative; display: inline-block; }