/* Zhakaw 3.0 feature UI layer */
:root{--v3-soft:color-mix(in srgb,var(--accent) 9%,var(--panel));--v3-border:color-mix(in srgb,var(--accent) 24%,var(--line));}

/* Personal identity */
.avatar{position:relative;display:inline-grid;place-items:center;overflow:visible}
.avatar>img,.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.avatar-emoji{line-height:1;background:linear-gradient(145deg,var(--panel2),var(--panel));font-size:1.35em}
.frame-none,.avatar-frame-none{box-shadow:none}
.frame-gold,.avatar-frame-gold{border:2px solid #f4b942!important;box-shadow:0 0 0 2px #f4b94233,0 0 15px #f4b94255!important}
.frame-neon,.avatar-frame-neon{border:2px solid #22d3ee!important;box-shadow:0 0 0 2px #8b5cf633,0 0 17px #22d3ee88!important;animation:v3-frame-pulse 2.2s ease-in-out infinite}
.frame-royal,.avatar-frame-royal{border:2px solid #a78bfa!important;box-shadow:0 0 0 2px #7c3aed44,0 0 18px #7c3aed77!important}
.frame-fire,.avatar-frame-fire{border:2px solid #fb7185!important;box-shadow:0 0 0 2px #f9731640,0 0 18px #f9731688!important;animation:v3-frame-fire 1.8s ease-in-out infinite}
.frame-ice,.avatar-frame-ice{border:2px solid #7dd3fc!important;box-shadow:0 0 0 2px #38bdf844,0 0 18px #38bdf877!important}
@keyframes v3-frame-pulse{50%{filter:brightness(1.25);box-shadow:0 0 0 3px #8b5cf644,0 0 24px #22d3eeaa}}
@keyframes v3-frame-fire{50%{filter:saturate(1.35);box-shadow:0 0 0 3px #fb718544,0 0 24px #f97316aa}}
.name-color-default{color:inherit}.name-color-red{color:#ef4444!important}.name-color-orange{color:#f97316!important}.name-color-gold{color:#d99a17!important}.name-color-green{color:#16a34a!important}.name-color-cyan{color:#0891b2!important}.name-color-blue{color:#2563eb!important}.name-color-violet{color:#7c3aed!important}.name-color-pink{color:#db2777!important}.name-color-rainbow{background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#8b5cf6,#ec4899);background-size:220% auto;color:transparent!important;background-clip:text;-webkit-background-clip:text;animation:v3-rainbow 3s linear infinite}
@keyframes v3-rainbow{to{background-position:220% center}}
.verified-mark{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#0ea5e9;color:white;font-size:9px;line-height:1;vertical-align:middle;box-shadow:0 0 0 2px color-mix(in srgb,#0ea5e9 18%,transparent)}
.message-level{font-size:9px;color:var(--classic-muted,var(--muted));padding:1px 4px;border-radius:999px;background:var(--classic-hover,var(--panel2));white-space:nowrap}

/* Chat interactions */
.chat-log{isolation:isolate}
.chat-log.is-pinned{background:color-mix(in srgb,#f59e0b 8%,transparent);box-shadow:inset 3px 0 #f59e0b}
.chat-log-name{border:0;background:transparent;padding:0;text-align:start;line-height:1.2}
.message-edited,.message-pinned{font-size:8px;color:var(--classic-muted,var(--muted));white-space:nowrap}
.message-pinned{color:#b7791f}
.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.message-reaction{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--classic-border,var(--line));background:var(--classic-panel-soft,var(--panel2));color:var(--classic-text,var(--text));border-radius:999px;padding:2px 7px;min-height:24px;cursor:pointer;font-size:12px}
.message-reaction b{font-size:9px;color:var(--classic-muted,var(--muted))}.message-reaction.mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--classic-panel,var(--panel)))}
.reaction-picker{display:none;position:absolute;z-index:12;right:50px;top:25px;gap:2px;padding:5px;border:1px solid var(--classic-border,var(--line));background:var(--classic-panel,var(--panel));border-radius:999px;box-shadow:var(--classic-shadow,var(--shadow))}
.reaction-picker.show{display:flex}.reaction-picker button{width:29px;height:29px;border:0;background:transparent;border-radius:50%;font-size:17px;cursor:pointer}.reaction-picker button:hover{background:var(--classic-hover,var(--panel2));transform:scale(1.12)}
.pinned-bar{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid color-mix(in srgb,#f59e0b 34%,var(--classic-border,var(--line)));background:color-mix(in srgb,#f59e0b 9%,var(--classic-panel,var(--panel)));min-height:42px;color:var(--classic-text,var(--text))}
.pinned-bar[hidden]{display:none}.pinned-bar>span{font-size:18px}.pinned-bar>div{min-width:0;display:flex;flex-direction:column}.pinned-bar strong{font-size:10px}.pinned-bar small{font-size:10px;color:var(--classic-muted,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pinned-bar button{margin-inline-start:auto;border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:800;cursor:pointer}
.typing{min-height:18px;padding:2px 14px 3px;font-size:10px;color:var(--classic-muted,var(--muted));font-style:italic}
.mention-link{border:0;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);border-radius:5px;padding:0 3px;font-weight:750;cursor:pointer}

/* Unread counters */
.head-option{position:relative}.head-option.has-unread .head-dot{display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4444;color:white;font-size:8px;font-weight:900;position:absolute;right:2px;top:3px;border:2px solid var(--classic-head-bg,var(--panel))}
.classic-room-count.has-unread{background:#ef4444!important;color:white!important;min-width:20px;padding:2px 5px;border-radius:999px;font-weight:900;box-shadow:0 2px 8px #ef444455}
.footer-notify{display:none}.footer-notify.show{display:grid;place-items:center;position:absolute;right:2px;top:1px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#ef4444;color:#fff;font-size:8px;font-weight:900}

/* Dynamic member card and social hub */
.user-card-v3{display:grid;gap:15px}.user-card-hero{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),color-mix(in srgb,var(--accent2) 7%,var(--panel)))}
.user-card-hero .avatar.lg{width:76px;height:76px;border-radius:50%;font-size:34px;flex:0 0 76px}.user-card-hero h2{margin:0 0 4px;font-size:20px}.user-card-hero p{margin:0;color:var(--muted);font-size:12px}.online-dot{margin-inline-start:auto;width:13px;height:13px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px color-mix(in srgb,#94a3b8 15%,transparent)}.online-dot.is-online{background:#22c55e;box-shadow:0 0 0 4px #22c55e22}
.user-card-bio{margin:0;line-height:1.65;color:var(--muted)}.user-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.user-card-stats span{display:grid;text-align:center;padding:10px 5px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:10px;color:var(--muted)}.user-card-stats b{font-size:16px;color:var(--text)}
.profile-badges{display:flex;flex-wrap:wrap;gap:6px}.profile-badge,.profile-badges>span{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-size:10px}
.user-card-actions{display:flex;flex-wrap:wrap;gap:7px}.compact-btn{width:auto!important;display:inline-flex!important;align-items:center;justify-content:center;padding:8px 11px!important;font-size:11px!important}.user-card-link{text-decoration:none}
.social-hub{min-height:280px}.social-tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:10px;overflow:auto}.social-tabs button{border:0;background:transparent;color:var(--muted);padding:9px 10px;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;font-size:11px;font-weight:750}.social-tabs button.active{color:var(--accent);border-color:var(--accent)}.social-tabs b{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-inline-start:3px;border-radius:999px;background:var(--panel2);font-size:8px}.social-panel{display:none}.social-panel.active{display:block}.social-user-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid var(--line)}.social-user-copy{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;border:0;background:transparent;text-align:start;cursor:pointer}.social-user-copy strong{font-size:12px}.social-user-copy small{color:var(--muted);font-size:9px}.social-user-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.search-user-button{width:100%;border:0;background:transparent;text-align:start}.compact-empty{padding:25px 12px!important}

/* GIF library, membership, room info */
.gif-search{display:grid;gap:12px}.gif-search-head{display:flex;gap:8px}.gif-search-head input{flex:1;min-width:0;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:11px;padding:9px 11px}.gif-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:55vh;overflow:auto}.gif-grid>button{border:0;padding:0;background:var(--panel2);border-radius:10px;overflow:hidden;aspect-ratio:1;cursor:pointer}.gif-grid img{width:100%;height:100%;object-fit:cover;display:block}.gif-grid>button:hover{outline:2px solid var(--accent);transform:translateY(-1px)}
.membership-card{display:grid;gap:13px}.membership-rank{padding:19px;border-radius:17px;text-align:center;font-size:24px;font-weight:950;letter-spacing:.12em;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}.membership-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.membership-stats span{display:grid;text-align:center;padding:10px;border:1px solid var(--line);border-radius:11px;color:var(--muted);font-size:9px}.membership-stats b{font-size:16px;color:var(--text)}.room-info-modal{display:grid;gap:12px}.room-info-modal section{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.room-info-modal h4{margin:0 0 7px}.room-info-modal p{margin:0;line-height:1.65;color:var(--muted);white-space:normal}

/* Profile v3 */
.profile-page-v3{overflow:hidden}.profile-page-v3 .profile-cover{margin-top:14px;background-size:cover;background-position:center}.profile-page-v3 .profile-head{display:flex;align-items:flex-end;gap:17px;margin:-44px 24px 0;position:relative}.profile-page-v3 .profile-head>.avatar{width:106px;height:106px;border-radius:50%;font-size:44px;border:5px solid var(--panel)}.profile-page-v3 .profile-info{min-width:0;flex:1}.profile-page-v3 .profile-info h1{margin:0 0 4px}.profile-page-v3 .profile-actions{display:flex;gap:7px;flex-wrap:wrap}.profile-level{display:grid;gap:7px;margin:22px 24px}.profile-level>div{display:flex;justify-content:space-between;font-size:11px}.profile-level progress{width:100%;height:9px;accent-color:var(--accent)}.profile-stat-grid{grid-template-columns:repeat(6,1fr)}.profile-bio{white-space:pre-wrap;line-height:1.7}.guest-custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Admin v3 */
.admin-page-v3{max-width:1320px}.admin-titlebar{display:flex;align-items:center;gap:12px;margin-bottom:20px}.admin-titlebar img{width:48px;height:48px}.admin-titlebar h1{margin:0}.admin-titlebar>a{margin-inline-start:auto}.admin-user-actions{display:flex;gap:5px;flex-wrap:wrap}.mini-select{max-width:126px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:5px;font-size:10px}.admin-broadcast{margin-top:22px;padding:18px;border:1px solid var(--v3-border);border-radius:16px;background:var(--v3-soft)}.admin-broadcast h2{margin-top:0}.admin-broadcast textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);padding:11px;resize:vertical}.admin-broadcast button{width:auto;margin-top:8px}.room-background-preview{height:120px;border-radius:12px;background-size:cover;background-position:center;border:1px solid var(--line);margin-bottom:8px}.room-expiry-note{padding:8px 10px;border-radius:9px;background:var(--panel2);color:var(--muted);font-size:10px}

/* Room background: keep content readable */
.classic-chat-page[style*="--room-bg-image"] .chat-stream-wrap{position:relative;background-image:linear-gradient(color-mix(in srgb,var(--classic-panel,var(--panel)) 87%,transparent),color-mix(in srgb,var(--classic-panel,var(--panel)) 87%,transparent)),var(--room-bg-image);background-size:cover;background-position:center;background-attachment:local}
.classic-chat-page[style*="--room-bg-image"] .chat-log{backdrop-filter:blur(2px)}

/* Utility */
.check-line{display:flex!important;align-items:center;gap:7px;font-size:11px}.check-line input{width:auto!important}.form-grid .full{grid-column:1/-1}.quick-tool-grid button{min-height:82px}.footer-item{position:relative}.primary-btn:disabled,.secondary-btn:disabled{opacity:.55;cursor:not-allowed}

@media(max-width:850px){
  html,body.classic-chat-page{height:100%;height:100dvh;overflow:hidden}
  .classic-chat-page .classic-shell{height:100dvh;min-height:100dvh}
  .classic-chat-page .chat-stage{height:calc(100dvh - var(--classic-head) - var(--classic-foot));overflow:hidden}
  .classic-chat-page .chat-stream-wrap{min-height:0;overflow:hidden}
  .classic-chat-page .classic-messages{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .reaction-picker{right:8px;top:25px;max-width:calc(100vw - 20px);overflow-x:auto}
  .chat-log-actions{right:6px!important;max-width:calc(100vw - 65px);overflow-x:auto}
  .user-card-stats,.membership-stats{grid-template-columns:repeat(2,1fr)}
  .gif-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-page-v3 .profile-head{align-items:center;margin:-36px 10px 0;flex-wrap:wrap}.profile-page-v3 .profile-head>.avatar{width:82px;height:82px;flex:0 0 82px}.profile-page-v3 .profile-actions{width:100%}.profile-stat-grid{grid-template-columns:repeat(2,1fr)}
  .guest-custom-grid{grid-template-columns:1fr}
  .admin-page-v3{padding:14px}.admin-titlebar{flex-wrap:wrap}.admin-titlebar>a{margin-inline-start:0}.admin-layout{grid-template-columns:1fr}.admin-nav{display:flex;overflow-x:auto;gap:4px}.admin-nav a{white-space:nowrap}.admin-user-actions{min-width:260px}
  .mobile-panel-open .left-panel.open,.mobile-panel-open .right-panel.open{touch-action:pan-y}
}
@media(max-width:460px){
  .user-card-hero{padding:12px}.user-card-hero .avatar.lg{width:62px;height:62px;flex-basis:62px}.user-card-hero h2{font-size:16px}.user-card-stats{grid-template-columns:repeat(2,1fr)}
  .pinned-bar{padding:5px 8px}.pinned-bar small{max-width:68vw}.message-level{display:none}
  .social-user-actions .mini-btn{padding:4px 6px;font-size:8px}.gif-search-head{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.frame-neon,.avatar-frame-neon,.frame-fire,.avatar-frame-fire,.name-color-rainbow{animation:none!important}}
.admin-log-table{max-height:540px;overflow:auto}.log-message-cell{min-width:280px;max-width:520px;white-space:pre-wrap;word-break:break-word;line-height:1.45}