: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; }
.tab-btn { background: transparent; border: none; padding: 6px 14px; border-radius: 10px; color: #a0a0a5; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .tab-btn:hover { color: #fff; } .tab-btn.active { background: rgba(255,255,255,0.1); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.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: var(--sidebar-width, 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; min-height: 0; }.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-list { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.contact-list::-webkit-scrollbar { width: 4px; }
.contact-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.contact:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.1); transform: translateX(4px); }.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.45); backdrop-filter:blur(16px); 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.55); }.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; pointer-events:none; 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); pointer-events:auto;}
.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:#d1d1d6;font-size:13px;font-weight:500;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:#b7ff62;background:rgba(183,255,98,0.12);border:1px solid rgba(183,255,98,0.4);border-radius:7px;padding:4px 7px;font-size:10px}.badge.danger{color:#ff5555;background:rgba(255,85,85,0.12);border-color:rgba(255,85,85,0.4)}.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 (min-width: 769px) and (max-width: 1024px) {
  .chat-layout { grid-template-columns: var(--sidebar-width, 260px) 1fr; }
  .sidebar { padding: 20px 12px 14px; }
  .messages { padding: 24px 20px 120px; }
  .composer, .composer-disabled { margin: 0 16px 16px; }
}
@media (min-width: 1440px) {
  .chat-layout { grid-template-columns: var(--sidebar-width, 360px) 1fr; }
  .sidebar { padding: 32px 24px 24px; }
}
.mobile-back-btn { display: none; }
@media (min-width: 769px) and (pointer: fine) { }


.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 { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 22px 20px; padding: 22px 16px; text-align: center; color: #888; background: rgba(10, 8, 15, 0.9); backdrop-filter: blur(4px); border: 1px solid rgba(127,61,255,0.4); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 20; font-size: 14px; font-weight: 500; }
.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); }
.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: #f93e6c; backdrop-filter: none; border: none; border-radius: 10px; color: #fff; box-shadow: 0 4px 12px rgba(249,62,108,0.3); padding: 9px 11px; font-size: 12px; transition: all 0.2s; } .danger-btn:hover { background: #e02a55; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(249,62,108,0.4); }
.vivid-danger-btn { background: rgba(127,61,255,0.75); backdrop-filter: blur(12px); border: none; border-radius: 10px; color: #ff6b6b; box-shadow: 0 4px 12px rgba(127,61,255,0.3); padding: 9px 11px; font-size: 12px; transition: all 0.2s; font-weight: bold; } .vivid-danger-btn:hover { background: rgba(106,43,218,0.85); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(127,61,255,0.4); color: #ff8c8c; }


/* 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; }

/* Resizer */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  z-index: 100;
  transition: background 0.2s;
}
.sidebar-resizer:hover, .sidebar-resizer.active {
  background: rgba(255, 255, 255, 0.15);
}

/* Sidebar Collapse */
.sidebar.collapsed {
  padding: 0 !important;
  border-right: none !important;
  background: transparent !important;
}
.sidebar.collapsed > *:not(.sidebar-resizer) {
  display: none !important;
}
.sidebar.collapsed .sidebar-resizer {
  right: -10px;
  width: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(168, 117, 255, 0.5);
}
.sidebar.collapsed .sidebar-resizer:hover {
  background: rgba(255, 255, 255, 0.1);
  border-left: 2px solid rgba(168, 117, 255, 0.9);
}

/* Emoji Picker */
.emoji-picker-container { flex-direction: column; position: absolute; bottom: calc(100% + 12px); left: 16px; background: rgba(15,15,20,0.75); backdrop-filter: blur(32px) saturate(200%); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 16px; width: 540px; max-width: calc(100% - 32px); box-sizing: border-box; box-shadow: 0 12px 48px rgba(0,0,0,0.6); z-index: 20; }
.emoji-tabs { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 14px; margin-bottom: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; max-height: 240px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 4px 20px 4px 4px; margin: 0; justify-items: center; }
.emoji-grid::-webkit-scrollbar { width: 8px; }
.emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.emoji-grid::-webkit-scrollbar-track { background: transparent; }
.emoji-item { cursor: pointer; font-size: 28px; width: 100%; text-align: center; line-height: 1.1; transition: transform 0.1s; }
.emoji-tab-icon { cursor: pointer; font-size: 20px; padding: 6px 8px; border-radius: 6px; transition: background 0.2s; }

@media (max-height: 600px) and (orientation: landscape) {
  /* Admin Console */
  .admin-console { padding: 12px 16px !important; }
  .admin-head { margin-bottom: 12px !important; }
  .admin-brand-container { display: none !important; }
  .table-row { min-height: 52px !important; padding: 6px 12px !important; font-size: 11px !important; }
  .user-cell .avatar { width: 32px !important; height: 32px !important; }
  .admin-actions .secondary, .admin-actions .danger-btn, .admin-actions .vivid-danger-btn { padding: 5px 8px !important; font-size: 10px !important; }

  /* Chat Interface Landscape Optimization */
  .sidebar { padding: 12px 10px 8px !important; }
  .chat-layout, .sidebar, .conversation { min-height: 0 !important; }
  .sidebar-top { padding-bottom: 8px !important; padding-right: 10px !important; }
  .sidebar-top .brand { font-size: 18px !important; }
  .sidebar-top .brand-mark { width: 28px !important; height: 28px !important; }
  .icon-btn { width: 26px !important; height: 26px !important; font-size: 16px !important; }
  .search { padding: 6px 12px !important; font-size: 11px !important; border-radius: 8px !important; }
  .section-label { margin: 12px 8px 6px !important; font-size: 10px !important; }
  
  .contact { padding: 4px 6px !important; border-radius: 8px !important; gap: 8px !important; }
  .contact .avatar { width: 28px !important; height: 28px !important; }
  .contact-name { font-size: 11px !important; }
  .contact-status { font-size: 9px !important; margin-top: 1px !important; }
  
  .account { padding: 6px !important; gap: 6px !important; }
  .account .avatar { width: 24px !important; height: 24px !important; }
  .account-name { font-size: 11px !important; }
  .account-action { font-size: 14px !important; }
  
  .chat-head { height: 44px !important; padding: 0 12px !important; }
  .chat-person .avatar { width: 28px !important; height: 28px !important; }
  .chat-title { font-size: 13px !important; }
  .chat-subtitle { font-size: 9px !important; margin-top: 1px !important; }
  .head-actions { margin-right: 44px !important; }
  .language-toggle { top: 9px !important; right: 12px !important; width: 26px !important; height: 26px !important; font-size: 10px !important; padding: 0 !important; }
  
  .messages { padding: 8px 12px 60px !important; gap: 4px !important; }
  .message { gap: 4px !important; }
  .message .avatar { width: 24px !important; height: 24px !important; }
  .message-name { font-size: 12px !important; margin-bottom: 0 !important; }
  .msg-role-tag { font-size: 9px !important; padding: 0 3px !important; margin-left: 4px !important; line-height: 1.1 !important; border-radius: 2px !important; border-width: 0.5px !important; }
  .message-meta { font-size: 9px !important; margin-top: 1px !important; }
  .bubble { padding: 7px 11px !important; font-size: 13px !important; border-radius: 8px 2px 8px 8px !important; line-height: 1.3 !important; word-break: break-word !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; }
  .self .bubble { border-radius: 2px 8px 8px 8px !important; }
  .date { padding: 2px 6px !important; font-size: 9px !important; margin: 2px 0 !important; border-radius: 4px !important; line-height: 1.2 !important; }
  .msg-media { max-width: 120px; max-height: 120px; }
  
  .composer { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 12px 10px !important; padding: 4px 10px !important; border-radius: 12px !important; background: rgba(10, 8, 15, 0.45) !important; backdrop-filter: blur(16px) !important; }
  .composer-disabled { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 12px 10px !important; padding: 6px 10px !important; border-radius: 12px !important; background: rgba(10, 8, 15, 0.9) !important; backdrop-filter: blur(16px) !important; font-size: 8px !important; font-weight: normal !important; font-style: normal !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
  .composer textarea { height: 32px !important; font-size: 14px !important; padding: 7px 0 !important; line-height: 1.4 !important; }
  .composer.expanded textarea { height: 94px !important; }
  .send, .icon-btn { width: 28px !important; height: 28px !important; margin-bottom: 2px !important; font-size: 14px !important; }
  .expand-btn { width: 20px !important; height: 20px !important; top: -10px !important; right: 12px !important; font-size: 8px !important; }
  
  /* Modals & Dropdown & Auth Compression */
  .auth-art { transform: scale(0.75); transform-origin: left center; }
  .auth-panel { padding: 24px !important; width: 100% !important; max-width: 480px !important; transform: scale(0.75) !important; transform-origin: right center !important; }
  .auth-panel h2 { margin: 0 0 8px !important; font-size: 15px !important; }
  .auth-panel .field input { padding: 6px 10px !important; font-size: 12px !important; margin-bottom: 6px !important; }
  .auth-panel .primary, .auth-panel .secondary { padding: 6px 12px !important; font-size: 11px !important; }
  .cg-member-item, .cg-friend-item { padding: 4px 8px !important; gap: 8px !important; margin-bottom: 2px !important; }
  .cg-member-item .avatar, .cg-friend-item .avatar { width: 22px !important; height: 22px !important; }
  .cg-member-item .secondary, .cg-member-item .danger-btn { padding: 4px 6px !important; font-size: 9px !important; }
  #member-search-input, #friend-search-input, .auth-panel input[type="text"] { padding: 6px 10px !important; font-size: 11px !important; }
  
  .cg-group-info { padding: 12px 16px !important; }
  .cg-info-card { padding: 12px 16px !important; margin-bottom: 6px !important; border-radius: 12px !important; }
  .cg-info-label { margin-bottom: 6px !important; font-size: 9px !important; }
  .cg-info-card img#avatar-preview { width: 44px !important; height: 44px !important; }
  .cg-info-card label, .cg-info-card #ai-gen-btn { padding: 6px 10px !important; font-size: 11px !important; border-radius: 8px !important; margin-bottom: 4px !important; }
  #gd-name-input { padding: 6px 10px !important; font-size: 12px !important; border-radius: 8px !important; }
  .cg-save-btn { padding: 6px 12px !important; font-size: 11px !important; border-radius: 8px !important; }
  .cg-info-field { padding: 6px 10px !important; font-size: 12px !important; border-radius: 8px !important; }
  .cg-close-btn { padding: 8px !important; font-size: 12px !important; border-radius: 8px !important; }
  
  #chat-menu, #add-menu { padding: 4px !important; gap: 2px !important; width: 120px !important; }
  .add-menu-item, #chat-menu .secondary { padding: 6px 8px !important; font-size: 11px !important; border-radius: 6px !important; }
  
  /* Emoji Picker Landscape */
  .emoji-picker-container { width: 320px !important; max-width: calc(100% - 24px) !important; left: 12px !important; padding: 12px 12px 12px 8px !important; bottom: calc(100% + 6px) !important; box-sizing: border-box !important; }
  .emoji-tabs { padding-bottom: 6px !important; margin-bottom: 6px !important; justify-content: space-between !important; }
  .emoji-tab-icon { font-size: 15px !important; padding: 4px !important; border-radius: 4px !important; }
  .emoji-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 8px !important; max-height: 150px !important; padding: 2px 16px 2px 2px !important; margin: 0 !important; justify-items: center !important; }
  .emoji-grid::-webkit-scrollbar { width: 4px !important; }
  .emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2) !important; border-radius: 4px !important; }
  .emoji-item { font-size: 26px !important; width: 100% !important; text-align: center !important; }
}
/* -------------------------------------------
   Mobile H5 Adaptation 
------------------------------------------- */
@media screen and (max-width: 768px) {
  /* General & Prevention of overflow */
  html, body { width: 100%; overflow-x: hidden; position: fixed; }
  .phone { border-radius: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border: none; }
  
  /* Font & Button Resizing */
  .brand { font-size: 24px !important; }
  .brand-mark { width: 32px !important; height: 32px !important; }
  .intro-wordmark { font-size: 32px !important; }
  .intro-card img { width: 100px !important; height: 100px !important; border-radius: 24px !important; }
  
  /* Auth / Login */
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .admin-login { padding: 24px; }
  .auth-panel { padding: 24px !important; width: 90% !important; max-width: 90% !important; border-radius: 20px !important; margin: auto !important; transform: scale(1) !important; }
  .modal-overlay .auth-panel { max-width: 320px !important; width: 85vw !important; padding: 24px !important; }
  .field input { padding: 12px 14px !important; font-size: 14px !important; }
  .primary { padding: 12px 14px !important; font-size: 14px !important; }
  .language-toggle { top: 12px !important; right: 12px !important; width: 28px !important; height: 28px !important; font-size: 10px !important; }
  
  /* Layout: Sidebar and Chat Slide */
  .chat-layout { display: flex !important; width: 200vw !important; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; transform: translateX(0); grid-template-columns: none !important; }
  .chat-layout.mobile-view-chat { transform: translateX(-100vw) !important; }
  .sidebar, .conversation { width: 100vw !important; flex-shrink: 0 !important; }
  
  /* Sidebar */
  .sidebar-resizer { display: none !important; }
  .sidebar { padding: 12px 10px 8px !important; }
  .sidebar-top { padding-bottom: 12px !important; padding-right: 44px !important; }
  .sidebar-top .brand { font-size: 20px !important; }
  .sidebar-top .brand-mark { width: 28px !important; height: 28px !important; }
  .contact { padding: 8px !important; gap: 8px !important; }
  .contact .avatar { width: 34px !important; height: 34px !important; }
  .contact-name { font-size: 12px !important; }
  .contact-status { font-size: 10px !important; }
  .search { padding: 8px 10px !important; font-size: 11px !important; }
  
  /* Chat View */
  .chat-head { padding: 0 12px !important; height: 50px !important; }
  .chat-person .avatar { width: 32px !important; height: 32px !important; }
  .chat-title { font-size: 13px !important; }
  .chat-subtitle { font-size: 10px !important; }
  .mobile-back-btn { display: grid !important; margin-right: 6px; width: 28px; height: 28px; background: rgba(255,255,255,0.1); border-radius: 50%; font-size: 14px; place-items: center; }
  .messages { padding: 12px 12px 80px !important; gap: 10px !important; }
  .bubble { padding: 9px 13px !important; font-size: 13px !important; border-radius: 14px 4px 14px 14px !important; word-break: break-word !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; }
  .self .bubble { border-radius: 4px 14px 14px 14px !important; }
  .message .avatar { width: 28px !important; height: 28px !important; }
  .message-name { font-size: 11px !important; margin-bottom: 2px !important; }
  .date { font-size: 10px !important; padding: 4px 8px !important; }
  .msg-media { max-width: 160px; max-height: 160px; }
  
  /* Composer (Fixed Bottom) */
  .composer { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 6px 6px !important; padding: 12px !important; border-radius: 12px !important; }
  .composer-disabled { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 6px 6px !important; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(10, 8, 15, 0.9) !important; font-size: 9px !important; font-weight: normal !important; font-style: normal !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
  .composer textarea { height: 36px !important; font-size: 13px !important; padding: 8px 0 !important; }
  .send { width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 8px !important; margin-bottom: 3px !important; }
  .icon-btn { width: 28px !important; height: 28px !important; margin-bottom: 3px !important; }
  .composer.expanded textarea { height: 164px !important; }
  
  /* Emoji Picker Mobile */
  .emoji-picker-container { width: calc(100vw - 24px) !important; left: 6px !important; padding: 12px 12px 12px 8px !important; box-sizing: border-box !important; }
  .emoji-tabs { padding-bottom: 6px !important; margin-bottom: 6px !important; justify-content: space-between !important; }
  .emoji-tab-icon { font-size: 15px !important; padding: 4px !important; border-radius: 4px !important; }
  .emoji-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 6px !important; max-height: 200px !important; padding: 2px 16px 2px 2px !important; margin: 0 !important; justify-items: center !important; }
  .emoji-grid::-webkit-scrollbar { width: 4px !important; }
  .emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2) !important; border-radius: 4px !important; }
  .emoji-item { font-size: 25px !important; width: 100% !important; text-align: center !important; }
  
  /* Notice Popup (Very Small) */
  .notice {
    padding: 8px 12px !important;
    font-size: 11px !important;
    bottom: 20px !important;
    width: 80vw !important;
    max-width: 280px !important;
    text-align: center !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
  }
  
  /* Admin Panel & Vertical Tables */
  .admin-console { padding: 14px 12px !important; }
  .admin-head { margin-bottom: 12px !important; }
  .admin-tabs { width: 100% !important; justify-content: center !important; }
  .admin-controls { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .admin-table { border: none !important; background: transparent !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; overflow: visible !important; }
  .table-row {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-height: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  .table-label { display: none !important; }
  .table-row > * { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-direction: row !important; }
  
  /* Cell contents alignment */
  .table-row .user-cell { justify-content: flex-start !important; max-width: 100% !important; overflow: hidden !important; }
  .table-row .user-cell > div { text-align: left !important; min-width: 0 !important; }
  .table-row .admin-actions { margin-top: 4px !important; justify-content: flex-end !important; width: 100% !important; gap: 8px !important; }
  .table-row > span { text-align: right !important; }
  
  /* Add labels before data in mobile vertical view for clarity */
  .table-row > span.when::before { content: "日期 / 时间: "; color: rgba(255,255,255,0.4); font-size: 11px; margin-right: auto; }
  .table-row > span:nth-child(4):not(.when):not(.admin-actions)::before { content: "成员数 / 状态: "; color: rgba(255,255,255,0.4); font-size: 11px; margin-right: auto; }
  .table-row > span:nth-child(5):not(.when):not(.admin-actions)::before { content: "状态: "; color: rgba(255,255,255,0.4); font-size: 11px; margin-right: auto; }
  
  /* Prevent horizontal overflow on long emails or names */
  .user-cell strong, .user-cell small { white-space: normal !important; word-break: break-all !important; line-height: 1.4 !important; }
}

/* Visible group join-request reminders */
.contact-request-status{color:#d5b9ff;font-weight:600}.contact-request-pill{flex-shrink:0;padding:5px 8px;border:1px solid rgba(190,139,255,.38);border-radius:999px;color:#eadcff;background:rgba(127,61,255,.2);box-shadow:0 4px 14px rgba(127,61,255,.2);font-size:10px;font-weight:700;white-space:nowrap}.group-join-request-alert{position:relative;z-index:9;width:auto;margin:12px 24px 0;padding:11px 14px;display:flex;align-items:center;gap:11px;color:#fff;text-align:left;border:1px solid rgba(188,135,255,.38);border-radius:14px;background:linear-gradient(105deg,rgba(96,39,175,.78),rgba(56,30,94,.72));box-shadow:0 10px 28px rgba(48,15,87,.28);backdrop-filter:blur(18px);cursor:pointer;transition:.2s}.group-join-request-alert:hover{transform:translateY(-1px);border-color:rgba(218,185,255,.62)}.group-join-request-alert>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.group-join-request-alert strong{font-size:13px}.group-join-request-alert small{color:rgba(255,255,255,.66);font-size:10px}.group-join-request-alert b{color:#d9baff;font-size:24px;font-weight:400}.group-request-alert-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#d2a4ff;box-shadow:0 0 0 5px rgba(210,164,255,.12),0 0 14px rgba(210,164,255,.85)}@media screen and (max-width:768px){.contact-request-pill{padding:4px 7px;font-size:9px}.group-join-request-alert{margin:8px 12px 0;padding:9px 11px;border-radius:12px}.group-join-request-alert strong{font-size:12px}.group-join-request-alert small{font-size:9px}}

/* Unified friend / group search modal */
#friend-modal { padding: clamp(14px, 3vw, 32px); }
.unified-search-panel {
  justify-content: flex-start !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 32px);
  padding: 32px !important;
  margin: auto !important;
  transform: none !important;
  overflow-y: auto;
  border-radius: 26px !important;
  background: linear-gradient(145deg, rgba(28,23,39,.82), rgba(13,12,21,.9)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.1) !important;
}
.unified-search-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35em;
  margin: 0 0 22px !important;
  color: #fff;
  font-size: clamp(27px, 3vw, 32px) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.055em;
}
.unified-search-title span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  opacity: 1;
}
.unified-search-panel .field input {
  min-height: 52px;
  padding: 14px 16px !important;
  margin: 0 !important;
  border-radius: 15px;
  font-size: 15px !important;
  background: rgba(255,255,255,.11);
}
.unified-search-panel #search-friend-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  padding: 13px 18px !important;
  border-radius: 15px;
  font-size: 15px !important;
  box-shadow: 0 10px 28px rgba(127,61,255,.34);
}
.unified-search-results {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.unified-search-results:empty { display: none; }
.unified-search-result-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 24px rgba(0,0,0,.17);
}
.unified-search-result-card .avatar {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.unified-result-copy { flex: 1; min-width: 0; }
.unified-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.unified-result-title strong {
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unified-result-title > span {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #cbb4ff;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(168,117,255,.28);
  border-radius: 999px;
  background: rgba(127,61,255,.1);
}
.unified-result-meta {
  overflow: hidden;
  margin-top: 5px;
  color: rgba(235,230,245,.57);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unified-result-action {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px !important;
  border: 1px solid rgba(168,117,255,.32);
  border-radius: 14px;
  font-size: 13px !important;
  font-weight: 600;
  background: rgba(127,61,255,.22);
  box-shadow: 0 8px 22px rgba(74,27,160,.2);
}
.unified-search-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.unified-search-state.success {
  color: #aef2c3;
  border-color: rgba(78,203,124,.22);
  background: rgba(38,151,82,.09);
}
.unified-search-state.pending {
  color: #d6c4ff;
  border-color: rgba(168,117,255,.2);
  background: rgba(127,61,255,.08);
}
.unified-search-state.error {
  color: #ffb6c7;
  border-color: rgba(255,91,128,.2);
  background: rgba(180,39,76,.08);
}
.unified-search-footer { margin-top: 16px !important; }
.unified-search-footer .text-btn {
  padding: 6px 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  #friend-modal { padding: 12px; }
  #friend-modal .unified-search-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px);
    padding: 22px !important;
    border-radius: 22px !important;
  }
  #friend-modal .unified-search-title {
    gap: .3em;
    margin-bottom: 18px !important;
    font-size: clamp(23px, 7vw, 28px) !important;
  }
  .unified-search-panel .field input {
    min-height: 48px;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .unified-search-panel #search-friend-btn {
    min-height: 46px;
    margin-top: 12px;
    padding: 11px 14px !important;
    font-size: 14px !important;
  }
  .unified-search-results { margin-top: 13px; gap: 9px; }
  .unified-search-result-card { gap: 12px; padding: 12px; border-radius: 15px; }
  .unified-search-result-card .avatar { width: 44px; height: 44px; }
  .unified-result-title strong { font-size: 15px; }
  .unified-result-meta { font-size: 11px; }
  .unified-result-action, .unified-search-state { min-height: 42px; font-size: 12px !important; }
  .unified-search-footer { margin-top: 12px !important; }
}

@media (max-height: 600px) and (orientation: landscape) {
  #friend-modal { padding: 8px; }
  #friend-modal .unified-search-panel {
    width: min(520px, calc(100vw - 24px)) !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 16px);
    padding: 16px 20px !important;
    transform: none !important;
  }
  #friend-modal .unified-search-title { margin-bottom: 10px !important; font-size: 21px !important; }
  .unified-search-panel .field input { min-height: 40px; padding: 8px 12px !important; }
  .unified-search-panel #search-friend-btn { min-height: 38px; margin-top: 8px; padding: 8px 12px !important; }
  .unified-search-results { margin-top: 8px; }
  .unified-search-result-card { padding: 8px 10px; }
  .unified-search-result-card .avatar { width: 36px; height: 36px; }
  .unified-result-action, .unified-search-state { min-height: 36px; padding: 7px 10px !important; }
  .unified-search-footer { margin-top: 6px !important; }
}/* Media Viewer */
.media-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}
.media-viewer.hidden {
  opacity: 0;
  pointer-events: none;
}
.media-viewer-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.media-viewer-container:active {
  cursor: grabbing;
}
.media-viewer-container img, .media-viewer-container video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.1s ease-out;
  transform-origin: center center;
  will-change: transform;
}
.media-viewer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 100000;
  transition: background 0.2s;
}
.media-viewer-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.media-viewer-download {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  z-index: 100000;
  transition: background 0.2s;
}
.media-viewer-download:hover {
  background: rgba(255, 255, 255, 0.3);
}
.msg-video-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.msg-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.msg-video-play-icon svg {
  margin-left: 4px;
}

/* QQ-style file messages */
.bubble:has(> .msg-file-card) { padding: 4px; background: rgba(255,255,255,0.02); }
.msg-file-card { width: min(360px,62vw); min-width: 280px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:15px; color:#fff; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.18); cursor:default; outline:none; }
.msg-file-card:focus-visible { border-color:rgba(168,117,255,.7); box-shadow:0 0 0 3px rgba(127,61,255,.2); }
.msg-file-icon { position:relative; isolation:isolate; width:52px; height:58px; display:grid; place-items:center; border-radius:10px 10px 12px 12px; color:#fff; background:linear-gradient(145deg,#72727c,#42424d); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 7px 16px rgba(0,0,0,.24); overflow:hidden; transition:transform .2s ease,filter .2s ease; }
.msg-file-card:hover .msg-file-icon { transform:translateY(-1px); filter:saturate(1.08) brightness(1.04); }
.msg-file-icon::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:rgba(255,255,255,.32); opacity:.72; }
.msg-file-icon::after { content:""; position:absolute; z-index:3; top:0; right:0; border-style:solid; border-width:0 0 12px 12px; border-color:transparent transparent rgba(255,255,255,.3) transparent; filter:drop-shadow(-1px 1px 0 rgba(0,0,0,.08)); }
.msg-file-mark { position:relative; z-index:2; max-width:44px; overflow:hidden; color:#fff; font:750 10px/1 "DM Mono",monospace; letter-spacing:-.06em; text-shadow:0 1px 2px rgba(0,0,0,.22); transform:translateY(-5px); }
.msg-file-detail { position:absolute; z-index:2; left:10px; right:8px; bottom:8px; height:9px; display:block; opacity:.9; }
.file-kind-pdf { background:linear-gradient(145deg,#ff7185,#d72b50 72%); }
.file-kind-pdf .msg-file-detail { height:2px; border-radius:4px; background:rgba(255,255,255,.86); box-shadow:0 -4px 0 rgba(255,255,255,.42); }
.file-kind-word { background:linear-gradient(145deg,#65a9ff,#2867cf 74%); }
.file-kind-word .msg-file-detail,.file-kind-text .msg-file-detail { height:1px; border-radius:3px; background:rgba(255,255,255,.82); box-shadow:0 -4px 0 rgba(255,255,255,.66),0 -8px 0 rgba(255,255,255,.38); }
.file-kind-sheet { background:linear-gradient(145deg,#45d197,#14865d 74%); }
.file-kind-sheet .msg-file-detail { height:11px; border:1px solid rgba(255,255,255,.68); border-radius:2px; background:repeating-linear-gradient(to right,transparent 0 7px,rgba(255,255,255,.5) 7px 8px),repeating-linear-gradient(to bottom,transparent 0 4px,rgba(255,255,255,.48) 4px 5px); }
.file-kind-slides { background:linear-gradient(145deg,#ffa06f,#d85834 74%); }
.file-kind-slides .msg-file-detail { height:9px; border:1px solid rgba(255,255,255,.72); border-radius:2px; background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.55) 46% 57%,transparent 58%); }
.file-kind-archive { background:linear-gradient(145deg,#b184ff,#6937c8 74%); }
.file-kind-archive .msg-file-detail { left:24px; right:auto; bottom:5px; width:5px; height:20px; border-radius:2px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0 3px,rgba(45,22,85,.6) 3px 5px); box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.file-kind-text { background:linear-gradient(145deg,#68c4ff,#4772d8 74%); }
.file-kind-code { background:linear-gradient(145deg,#58d4cf,#237f9f 74%); }
.file-kind-code .msg-file-detail { height:7px; background:radial-gradient(circle at 4px 50%,rgba(255,255,255,.9) 0 2px,transparent 2.5px),radial-gradient(circle at 12px 50%,rgba(255,255,255,.62) 0 2px,transparent 2.5px),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) right center/14px 1px no-repeat; }
.file-kind-app { background:linear-gradient(145deg,#858691,#4e4e5d 74%); }
.file-kind-app .msg-file-detail { height:10px; background:radial-gradient(circle at 3px 3px,rgba(255,255,255,.9) 0 1.4px,transparent 1.8px),radial-gradient(circle at 50% 8px,rgba(255,255,255,.7) 0 1.4px,transparent 1.8px),radial-gradient(circle at calc(100% - 3px) 3px,rgba(255,255,255,.9) 0 1.4px,transparent 1.8px),linear-gradient(25deg,transparent 46%,rgba(255,255,255,.38) 47% 53%,transparent 54%); }
.file-kind-generic .msg-file-detail { height:3px; border-radius:4px; background:linear-gradient(90deg,rgba(255,255,255,.78) 0 28%,transparent 28% 36%,rgba(255,255,255,.5) 36% 66%,transparent 66% 74%,rgba(255,255,255,.32) 74%); }
.msg-file-info { min-width:0; align-self:center; }
.msg-file-info strong { display:block; overflow:hidden; color:#f7f4ff; font-size:13px; font-weight:650; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.msg-file-info small { display:block; margin-top:5px; overflow:hidden; color:rgba(255,255,255,.52); font-size:10px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.msg-file-actions { display:flex; flex-direction:column; gap:6px; }
.msg-file-actions a,.msg-file-actions button { min-width:54px; height:30px; display:grid; place-items:center; padding:0 10px; border:1px solid rgba(168,117,255,.32); border-radius:9px; color:#dbc6ff; background:rgba(127,61,255,.13); font:600 10px/1 inherit; text-decoration:none; cursor:pointer; transition:.2s; }
.msg-file-actions a:hover,.msg-file-actions button:hover { color:#fff; border-color:rgba(194,153,255,.58); background:rgba(127,61,255,.28); transform:translateY(-1px); }
.msg-file-actions .msg-file-download-btn { color:#f2eaff; background:linear-gradient(135deg,rgba(127,61,255,.46),rgba(112,64,208,.34)); }

.chat-upload-progress { position:fixed; right:26px; bottom:126px; z-index:110000; width:min(370px,calc(100vw - 32px)); display:flex; align-items:center; gap:12px; padding:14px; border:1px solid rgba(190,145,255,.3); border-radius:17px; color:#fff; background:rgba(22,16,34,.94); backdrop-filter:blur(22px); box-shadow:0 18px 46px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); animation:fileProgressIn .24s ease-out; }
.chat-upload-progress.leaving { opacity:0; transform:translateY(8px); transition:.22s; }
.chat-upload-progress-icon { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; color:#fff; font-size:20px; background:linear-gradient(135deg,#975fff,#6935da); box-shadow:0 7px 18px rgba(127,61,255,.3); }
.chat-upload-progress-main { min-width:0; flex:1; }
.chat-upload-progress-name { overflow:hidden; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.chat-upload-progress-track { height:4px; margin:8px 0 6px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.chat-upload-progress-track i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#8e51ff,#d5b0ff); transition:width .2s; }
.chat-upload-progress-meta { display:flex; justify-content:space-between; gap:10px; color:rgba(255,255,255,.52); font-size:9px; }
.chat-upload-progress-meta b { color:#c9a8ff; font-weight:600; }
.chat-upload-progress>button { width:30px; height:30px; flex-shrink:0; border:0; border-radius:10px; color:rgba(255,255,255,.65); background:rgba(255,255,255,.07); font-size:18px; cursor:pointer; }
@keyframes fileProgressIn { from { opacity:0; transform:translateY(10px) scale(.98); } }

.file-preview-overlay { position:fixed; inset:0; z-index:120000; display:grid; place-items:center; padding:24px; background:rgba(5,3,11,.78); backdrop-filter:blur(18px); animation:fadeIn .2s ease-out; }
.file-preview-panel { width:min(1040px,94vw); height:min(780px,90vh); min-height:360px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:22px; color:#fff; background:linear-gradient(145deg,rgba(27,21,39,.98),rgba(14,13,21,.98)); box-shadow:0 28px 80px rgba(0,0,0,.58); }
.file-preview-panel>header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px 12px 20px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.file-preview-panel>header>div:first-child { min-width:0; }
.file-preview-panel>header strong { display:block; max-width:min(640px,58vw); overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.file-preview-panel>header small { display:block; margin-top:4px; color:rgba(255,255,255,.48); font-size:10px; }
.file-preview-panel>header>div:last-child { display:flex; align-items:center; gap:8px; }
.file-preview-panel>header a,.file-preview-panel>header button { height:36px; display:grid; place-items:center; padding:0 15px; border:1px solid rgba(168,117,255,.3); border-radius:11px; color:#eadfff; background:rgba(127,61,255,.18); font-size:12px; text-decoration:none; cursor:pointer; }
.file-preview-panel>header button { width:36px; padding:0; color:#bbb; background:rgba(255,255,255,.06); font-size:20px; }
.file-preview-panel>main { position:relative; min-height:0; flex:1; overflow:auto; background:rgba(5,5,9,.45); overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; }
.file-preview-panel iframe { width:100%; height:100%; border:0; background:#fff; }
.file-preview-panel pre { min-height:100%; margin:0; padding:24px; box-sizing:border-box; color:#e8e4ef; font:12px/1.7 "DM Mono",monospace; tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere; }
.file-preview-loading,.file-preview-error { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:rgba(255,255,255,.58); font-size:12px; }
.file-preview-loading i { width:28px; height:28px; border:2px solid rgba(255,255,255,.1); border-top-color:#a875ff; border-radius:50%; animation:spin .8s linear infinite; }
.file-preview-error { color:#ffb8c8; }
.file-preview-error small { color:rgba(255,255,255,.44); }
.file-preview-note { position:sticky; top:0; z-index:2; padding:7px 12px; color:#dfccff; background:rgba(92,47,154,.92); font-size:10px; text-align:center; }
.file-preview-table-wrap { min-width:100%; overflow:auto; }
.file-preview-table-wrap table { min-width:100%; border-collapse:separate; border-spacing:0; color:#e9e5ef; font-size:11px; }
.file-preview-table-wrap th,.file-preview-table-wrap td { max-width:320px; padding:9px 11px; overflow:hidden; border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.file-preview-table-wrap th { position:sticky; top:0; z-index:1; color:#e8d8ff; background:#292033; font-weight:650; }
.file-preview-table-wrap tr:nth-child(even) td { background:rgba(255,255,255,.018); }

@media screen and (max-width:768px) {
  .msg-file-card { width:min(60vw,240px); min-width:0; grid-template-columns:38px minmax(0,1fr); gap:6px; padding:6px; }
  .msg-file-icon { width:38px; height:44px; border-radius:8px; }
  .msg-file-icon span { max-width:34px; font-size:8px; transform:translateY(-3px); }
  .msg-file-info strong { font-size:9px; }
  .msg-file-info small { margin-top:1px; font-size:8px; }
  .msg-file-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex-direction:row; gap:4px; }
  .msg-file-actions:has(> :only-child) { grid-template-columns:1fr; }
  .msg-file-actions a,.msg-file-actions button { min-height:26px; font-size:8px; border-radius:6px; }
  .chat-upload-progress { right:12px; bottom:calc(92px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); box-sizing:border-box; padding:12px; }
  .file-preview-overlay { padding:0; }
  .file-preview-panel { width:100vw; height:100dvh; min-height:0; border:0; border-radius:0; }
  .file-preview-panel>header { min-height:58px; padding:calc(9px + env(safe-area-inset-top)) 10px 9px 14px; }
  .file-preview-panel>header strong { max-width:48vw; font-size:12px; }
  .file-preview-panel>header a { height:34px; padding:0 12px; }
  .file-preview-panel>header button { width:34px; height:34px; }
  .file-preview-panel pre { padding:16px; font-size:11px; }
  .file-preview-table-wrap th,.file-preview-table-wrap td { padding:8px 9px; font-size:10px; }
}

@media screen and (max-width:480px) and (orientation:portrait) {
  .msg-file-card { width:min(80vw,320px); }
  .msg-file-info strong { font-size:11px; }
  .msg-file-info small { font-size:9px; }
  .msg-file-actions a,.msg-file-actions button { min-height:44px; border-radius:11px; font-size:12px; }
  .chat-upload-progress-icon { width:38px; height:38px; }
  .file-preview-panel>header strong { max-width:42vw; }
}

@media screen and (max-width:932px) and (orientation:landscape) {
  .msg-file-card { width:min(44vw,320px); min-width:240px; grid-template-columns:40px minmax(0,1fr) auto; padding:5px 6px; gap:6px; }
  .msg-file-icon { width:40px; height:46px; border-radius:8px; }
  .msg-file-icon span { max-width:36px; font-size:9px; transform:translateY(-3px); }
  .msg-file-info strong { font-size:12px; }
  .msg-file-info small { margin-top:2px; font-size:10px; }
  .msg-file-actions { display:flex; grid-column:auto; flex-direction:column; gap:4px; }
  .msg-file-actions a,.msg-file-actions button { min-width:64px; min-height:32px; font-size:11px; border-radius:6px; padding:0 8px; }
  .chat-upload-progress { right:16px; bottom:72px; width:min(340px,44vw); padding:10px 12px; }
  .file-preview-overlay { padding:0; }
  .file-preview-panel { width:100vw; height:100dvh; border:0; border-radius:0; }
  .file-preview-panel>header { min-height:48px; padding:6px max(10px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left)); }
  .file-preview-panel>header strong { max-width:60vw; font-size:12px; }
  .file-preview-panel>header small { margin-top:2px; }
  .file-preview-panel>header a,.file-preview-panel>header button { height:32px; }
  .file-preview-panel pre { padding:14px 18px; font-size:10px; line-height:1.55; }
}

/* Voice messages: long-press recording and frosted playback card */
.bubble:has(> .msg-audio-card) { padding:5px; background:rgba(12,9,20,.58); }
.msg-audio-card { --voice-progress:0%; width:min(var(--voice-width),68vw); min-width:154px; height:54px; display:flex; align-items:center; gap:10px; padding:7px 13px 7px 8px; overflow:hidden; color:#f8f3ff; border:1px solid rgba(194,153,255,.28); border-radius:15px; background:linear-gradient(135deg,rgba(111,55,194,.34),rgba(28,24,41,.68)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 22px rgba(0,0,0,.2); backdrop-filter:blur(20px) saturate(1.2); cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.msg-audio-card:hover { transform:translateY(-1px); border-color:rgba(210,177,255,.5); background:linear-gradient(135deg,rgba(126,65,216,.42),rgba(35,28,50,.74)); }
.msg-audio-card:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(127,61,255,.24),inset 0 1px 0 rgba(255,255,255,.1); }
.msg-audio-card audio { display:none; }
.msg-audio-play { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; padding-left:2px; border:1px solid rgba(224,205,255,.38); border-radius:50%; color:#fff; background:linear-gradient(145deg,rgba(155,92,255,.78),rgba(101,50,188,.58)); box-shadow:0 5px 14px rgba(97,40,190,.32),inset 0 1px 0 rgba(255,255,255,.2); font-size:12px; line-height:1; }
.msg-audio-card.is-playing .msg-audio-play { padding-left:0; background:linear-gradient(145deg,#ad7aff,#7541cf); }
.msg-audio-wave { position:relative; flex:1; min-width:0; height:28px; display:flex; align-items:center; justify-content:space-between; gap:2px; }
.msg-audio-wave::after { content:""; position:absolute; inset:0; width:var(--voice-progress); border-radius:5px; background:linear-gradient(90deg,rgba(210,179,255,.22),rgba(141,88,255,.08)); pointer-events:none; transition:width .15s linear; }
.msg-audio-wave i { position:relative; z-index:1; width:2px; height:var(--voice-bar); flex:0 1 2px; max-height:25px; border-radius:3px; background:linear-gradient(to bottom,#d8c0ff,#9d64ff); box-shadow:0 0 5px rgba(168,117,255,.25); opacity:.78; }
.msg-audio-card.is-playing .msg-audio-wave i { animation:voiceBarPulse .8s ease-in-out infinite alternate; animation-delay:calc(var(--voice-bar) * -18ms); opacity:1; }
.msg-audio-duration { flex:0 0 auto; color:rgba(242,233,255,.78); font:650 11px/1 "DM Mono",monospace; white-space:nowrap; }
@keyframes voiceBarPulse { from{transform:scaleY(.52);opacity:.58} to{transform:scaleY(1);opacity:1} }

.voice-recording-state { position:absolute; inset:7px 10px; display:none; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; color:#fff; pointer-events:none; }
.voice-live-dot { width:9px; height:9px; border-radius:50%; background:#c49aff; box-shadow:0 0 0 5px rgba(168,117,255,.13),0 0 16px rgba(168,117,255,.82); animation:voiceLive 1.15s ease-in-out infinite; }
.voice-recording-copy { min-width:0; overflow:hidden; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.voice-recording-time { min-width:44px; color:#eee5ff; font:700 12px/1 "DM Mono",monospace; text-align:right; }
.voice-recording-wave { height:26px; display:flex; align-items:center; gap:2px; }
.voice-recording-wave i { width:2px; height:var(--voice-bar); max-height:22px; border-radius:2px; background:#c69dff; animation:voiceBarPulse .58s ease-in-out infinite alternate; animation-delay:calc(var(--voice-bar) * -20ms); }
.composer.voice-holding { border-color:rgba(181,132,255,.72); background:rgba(34,20,52,.68); box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 3px rgba(127,61,255,.1); }
.composer.voice-recording { min-height:66px; border-color:rgba(185,137,255,.72)!important; background:linear-gradient(110deg,rgba(63,31,105,.83),rgba(20,16,31,.85))!important; box-shadow:0 10px 34px rgba(0,0,0,.42),0 0 30px rgba(127,61,255,.2); }
.composer.voice-recording > :not(.voice-recording-state) { opacity:0!important; visibility:hidden!important; pointer-events:none!important; }
.composer.voice-recording .voice-recording-state { display:grid; }
.composer.voice-recording.voice-cancel { border-color:rgba(255,104,133,.72)!important; background:linear-gradient(110deg,rgba(105,30,53,.84),rgba(31,15,27,.88))!important; }
.composer.voice-recording.voice-cancel .voice-live-dot { background:#ff718d; box-shadow:0 0 0 5px rgba(255,91,124,.12),0 0 16px rgba(255,91,124,.7); }
.composer.voice-recording.voice-countdown:not(.voice-cancel) { border-color:rgba(255,196,94,.68)!important; }
.composer.voice-recording.voice-countdown:not(.voice-cancel) .voice-live-dot { background:#ffc45e; box-shadow:0 0 0 5px rgba(255,196,94,.12),0 0 16px rgba(255,196,94,.72); }
@keyframes voiceLive { 50%{transform:scale(.78);opacity:.65} }

@media screen and (max-width:768px) {
  .msg-audio-card { width:min(var(--voice-width),60vw); height:38px; gap:6px; padding-right:8px; }
  .msg-audio-play { width:22px; height:22px; flex-basis:22px; font-size: 9px; }
  .msg-audio-duration { font-size: 10px; }
  .msg-audio-wave { gap:1.5px; }
  .voice-recording-state { inset:6px 10px; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .voice-recording-wave { display:none; }
  .voice-recording-copy { font-size:11px; }
  .composer.voice-recording { min-height:58px; padding:8px 10px!important; }
}

@media screen and (max-width:932px) and (max-height:600px) and (orientation:landscape) {
  .msg-audio-card { width:min(var(--voice-width),46vw); height:38px; min-width:146px; }
  .msg-audio-play { width:26px; height:26px; flex-basis:26px; }
  .msg-audio-duration { font-size:9px; }
  .composer.voice-recording { min-height:46px; }
  .voice-recording-state { inset:4px 9px; }
  .voice-recording-copy,.voice-recording-time { font-size:9px; }
}

/* QR scanner: the app owns the purple reticle; suppress the library's white corner shaders. */
#qr-reader #qr-shaded-region {
  border-color: transparent !important;
  outline: 0 !important;
}
#qr-reader #qr-shaded-region > div {
  display: none !important;
}
.qr-reticle {
  display: block !important;
}