:root{
 --v31-glass:rgba(18,32,48,.72);
 --v31-glass-light:rgba(255,255,255,.72);
 --v31-border:rgba(148,190,225,.22);
 --v31-shadow:0 18px 50px rgba(0,0,0,.22);
 --v31-read:#39a8ff;
}
.bitex-wordmark{
 display:inline-block;font-family:'Segoe UI',Tahoma,sans-serif;font-weight:900;
 background:linear-gradient(45deg,#ff3b30,#ff9f0a,#ffd60a,#30d158,#0a84ff,#5e5ce6,#bf5af2);
 background-size:300% 300%;-webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;color:transparent;animation:rainbow-shine 5s linear infinite;
 letter-spacing:-.035em
}
@keyframes rainbow-shine{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.welcome-wordmark{font-size:clamp(42px,7vw,92px);filter:drop-shadow(0 12px 28px rgba(66,153,225,.22))}
.welcome-mark{display:none!important}
.glass-ui .sidebar,.glass-ui .chat-head,.glass-ui .composer,.glass-ui .settings-card,.glass-ui .admin-card,
.glass-ui .conference-stage,.glass-ui .call-copy,.glass-ui .conference-chat{
 backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
 background:var(--v31-glass)!important;border:1px solid var(--v31-border)!important;box-shadow:var(--v31-shadow)
}
.messages.custom-wallpaper{background-image:linear-gradient(rgba(6,18,31,.2),rgba(6,18,31,.2)),var(--custom-wallpaper)!important;background-size:cover!important;background-position:center!important;background-attachment:local!important}
body[data-wallpaper=waves] .messages{background-color:#0d1c2b!important;background-image:radial-gradient(circle at 20% 30%,rgba(42,174,255,.16),transparent 26%),radial-gradient(circle at 80% 70%,rgba(136,84,255,.14),transparent 24%)!important}
body[data-wallpaper=aurora] .messages{background:linear-gradient(135deg,#081927,#15354d 42%,#173f3c 72%,#241a46)!important}
body[data-bubble-style=glass] .bubble{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16)!important}
body[data-bubble-style=soft] .mine .bubble{background:linear-gradient(135deg,#18a5a5,#38bfc0)!important}
body[data-bubble-style=minimal] .bubble{box-shadow:none!important;border-radius:12px!important}
body.compact-mode .message{margin-block:2px!important}
body.compact-mode .bubble{padding:6px 9px!important}
.setting-help{display:block;opacity:.68;font-size:12px;line-height:1.8;margin-top:4px}
.password-field,.password-inline{position:relative;display:flex;align-items:center}
.password-field input,.password-inline input{padding-left:76px!important}
.password-toggle,.password-inline button{position:absolute;left:8px;border:0;background:transparent;color:#2785d8;font-weight:800;cursor:pointer;z-index:2}
.message .bubble footer{display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important;flex-wrap:nowrap!important}
.message-time,.ticks{display:inline-flex!important;align-items:center!important;line-height:1!important}
.ticks{min-width:18px;letter-spacing:-4px;font-weight:900;color:rgba(255,255,255,.72)}
.ticks::before{content:'✓';letter-spacing:0}
.ticks.delivered::before{content:'✓'}
.ticks.seen::before{content:'✓✓';color:var(--v31-read);letter-spacing:-3px}
.message-meta-stack{display:flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important}
.call-layer.audio-call::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(62,189,255,.32),transparent 30%),linear-gradient(145deg,#071726,#0e3046 48%,#241b4d);z-index:0}
.call-layer.audio-call #remoteVideo,.call-layer.audio-call #localVideo{opacity:0!important}
.call-layer.audio-call .call-avatar{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1fb5ad,#4d8df7);box-shadow:0 0 0 14px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.34)}
#callTimer{display:block;margin-top:8px;font-size:18px;font-variant-numeric:tabular-nums;color:#d9f4ff}
.conference-chat{position:absolute;left:18px;bottom:88px;width:min(350px,calc(100% - 36px));height:360px;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;z-index:8}
.conference-chat header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--v31-border)}
.conference-chat header button{border:0;border-radius:10px;padding:7px 10px}
#conferenceChatMessages{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.conference-chat-message{background:rgba(255,255,255,.1);padding:8px 10px;border-radius:12px}
.conference-chat-message.mine{background:rgba(30,177,165,.32)}
.conference-chat-message small{display:block;opacity:.68;margin-top:3px}
#conferenceChatForm{display:flex;padding:9px;gap:7px;border-top:1px solid var(--v31-border)}
#conferenceChatForm input{flex:1;border:1px solid var(--v31-border);border-radius:12px;background:rgba(0,0,0,.16);color:inherit;padding:10px}
#conferenceChatForm button{border:0;border-radius:12px;padding:0 14px;background:#22b4aa;color:#fff;font-weight:800}
.admin-role-select{padding:8px 10px;border-radius:10px;border:1px solid #cbd5e1;background:#fff}
.swipe-reply-hint{position:absolute;inset-inline-start:-42px;top:50%;transform:translateY(-50%);opacity:0;transition:.15s}
.message.swiping .swipe-reply-hint{opacity:1}
@media(max-width:850px){
 .chat-head{min-height:76px;padding:8px 10px!important}
 .chat-identity{min-width:0;flex:1}
 .chat-identity>div:last-child{min-width:0}
 #chatTitle{font-size:17px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #chatStatus{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
 .message{max-width:88%!important}
 .message .bubble{max-width:100%!important}
 .message .bubble footer{justify-content:flex-end}
 .message .bubble footer time{font-size:10px!important}
 .ticks{font-size:12px!important}
 .conversation-item time{font-size:10px;min-width:38px;text-align:left}
 .conference-chat{position:fixed;left:8px;right:8px;bottom:76px;width:auto;height:42vh}
 #shareScreen.unsupported{opacity:.45}
}


/* v32: compact conference chat */
.conference-chat-toggle{
 position:absolute;left:18px;bottom:96px;z-index:10;border:1px solid var(--v31-border);
 border-radius:16px;padding:10px 14px;background:rgba(20,37,54,.86);color:#fff;
 display:flex;align-items:center;gap:9px;box-shadow:var(--v31-shadow);cursor:pointer
}
.conference-chat-toggle b{min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;background:#334155;font-size:11px}
.conference-chat-toggle b:not(.has-unread){display:none}
.conference-chat-toggle b.has-unread{background:#ef4444}
.conference-chat.collapsed{display:none!important}
#closeConferenceChat{font-size:24px;line-height:1;background:transparent!important;color:inherit!important}
.conference-chat header>div{display:flex;align-items:center;gap:7px}

/* v32: 3 conference tiles per row */
.video-grid{
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-auto-rows:minmax(150px,1fr);
 overflow:auto!important;
 align-content:start
}
.video-tile{min-height:150px!important;aspect-ratio:16/10}
.video-tile video{min-height:0}

/* v32 settings */
#appearanceSettings{font-size:15px!important;line-height:1.9}
.v32-settings-section{border:1px solid var(--line);border-radius:18px;padding:18px;margin:0 0 16px;background:rgba(255,255,255,.025)}
.v32-settings-section h3{margin:0 0 13px;font-size:17px}
.v32-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v32-settings-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px}
.v32-settings-grid .field,#appearanceSettings>.v32-settings-section>.field{width:100%;min-height:48px;font-size:14px;padding:0 13px;border-radius:13px}
.v32-palette{display:grid;grid-template-columns:repeat(6,minmax(72px,1fr));gap:10px}
.v32-palette label{cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.v32-palette input{position:absolute;opacity:0;pointer-events:none}
.v32-palette span{width:38px;height:38px;border-radius:50%;background:var(--swatch);border:3px solid transparent;box-shadow:0 3px 12px rgba(0,0,0,.24);transition:.18s}
[data-swatch="accent-blue"]{--swatch:#2785d8}[data-swatch="accent-violet"]{--swatch:#7c5ce5}[data-swatch="accent-teal"]{--swatch:#079b91}[data-swatch="accent-rose"]{--swatch:#d94e79}[data-swatch="accent-amber"]{--swatch:#d48212}[data-swatch="accent-cyan"]{--swatch:#0891b2}[data-swatch="accent-green"]{--swatch:#16a34a}[data-swatch="accent-lime"]{--swatch:#65a30d}[data-swatch="accent-orange"]{--swatch:#ea580c}[data-swatch="accent-red"]{--swatch:#dc2626}[data-swatch="accent-pink"]{--swatch:#db2777}[data-swatch="accent-indigo"]{--swatch:#4f46e5}
[data-swatch="bubble-sky"]{--swatch:#38bdf8}[data-swatch="bubble-mint"]{--swatch:#34d399}[data-swatch="bubble-violet"]{--swatch:#a78bfa}[data-swatch="bubble-rose"]{--swatch:#fb7185}[data-swatch="bubble-amber"]{--swatch:#fbbf24}[data-swatch="bubble-cyan"]{--swatch:#22d3ee}[data-swatch="bubble-green"]{--swatch:#4ade80}[data-swatch="bubble-lime"]{--swatch:#a3e635}[data-swatch="bubble-orange"]{--swatch:#fb923c}[data-swatch="bubble-red"]{--swatch:#f87171}[data-swatch="bubble-pink"]{--swatch:#f472b6}[data-swatch="bubble-indigo"]{--swatch:#818cf8}
[data-swatch="font_color-auto"]{--swatch:linear-gradient(135deg,#111827,#f8fafc)}[data-swatch="font_color-white"]{--swatch:#f8fafc}[data-swatch="font_color-black"]{--swatch:#0f172a}[data-swatch="font_color-slate"]{--swatch:#94a3b8}[data-swatch="font_color-blue"]{--swatch:#60a5fa}[data-swatch="font_color-cyan"]{--swatch:#22d3ee}[data-swatch="font_color-teal"]{--swatch:#2dd4bf}[data-swatch="font_color-green"]{--swatch:#4ade80}[data-swatch="font_color-lime"]{--swatch:#a3e635}[data-swatch="font_color-amber"]{--swatch:#fbbf24}[data-swatch="font_color-orange"]{--swatch:#fb923c}[data-swatch="font_color-rose"]{--swatch:#fb7185}[data-swatch="font_color-pink"]{--swatch:#f472b6}[data-swatch="font_color-violet"]{--swatch:#a78bfa}
.v32-palette input:checked+span{border-color:#fff;outline:3px solid var(--blue);transform:scale(1.1)}
.v32-palette small{font-size:11px;white-space:nowrap}
.v32-check{display:flex!important;align-items:flex-start;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:14px!important}
.v32-check input{margin-top:5px;width:18px;height:18px}
.v32-check span{display:flex;flex-direction:column}
.v32-check small,.v32-upload small{font-size:12px;opacity:.7;line-height:1.8;margin-top:2px}
.v32-upload{display:flex!important;flex-direction:column;gap:8px;padding:16px 4px;font-size:14px!important}
.v32-upload input{font-size:13px;border:1px dashed var(--line);padding:11px;border-radius:12px}
body{color:var(--user-font-color,var(--text))!important}
body[data-font-color]:not([data-font-color="auto"]) :is(h1,h2,h3,h4,p,label,small,b,span,a,button,.field,.settings-nav button){color:var(--user-font-color)!important}
body[data-surface-style="solid"] :is(.sidebar,.chat-head,.composer,.settings-card,.settings-panel,.conference-stage,.conference-chat){backdrop-filter:none!important;background:var(--solid)!important}
body[data-surface-style="soft"] :is(.sidebar,.chat-head,.composer,.settings-card,.settings-panel,.conference-stage,.conference-chat){backdrop-filter:blur(8px)!important;background:rgba(30,48,66,.88)!important}
body[data-wallpaper="waves"] .app-shell{background:radial-gradient(circle at 15% 15%,rgba(34,211,238,.13),transparent 25%),radial-gradient(circle at 85% 80%,rgba(139,92,246,.15),transparent 30%),var(--bg)!important}
body[data-wallpaper="aurora"] .app-shell{background:linear-gradient(135deg,#071725,#123650 48%,#16453e 75%,#291b50)!important}
body[data-wallpaper="paper"] .app-shell{background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px)!important;background-size:22px 22px!important}

@media(max-width:850px){
 .conference-chat-toggle{position:fixed;left:10px;bottom:84px}
 .conference-chat{height:min(58vh,520px)!important;bottom:80px!important}
 .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:6px!important;grid-auto-rows:minmax(100px,1fr)}
 .video-tile{min-height:100px!important;border-radius:10px!important;aspect-ratio:3/4}
 .video-tile span{font-size:8px!important;bottom:4px!important;right:4px!important;padding:3px 5px!important}
 .v32-settings-grid{grid-template-columns:1fr}
 .v32-palette{grid-template-columns:repeat(4,minmax(58px,1fr))}
 #appearanceSettings{font-size:14px!important}
 .v32-settings-section{padding:14px}
}


/* ==================== BitexRoom v33 overhaul ==================== */

/* Two video tiles per row, stable on mobile and desktop */
.video-grid{
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-auto-rows:minmax(190px,1fr)!important;
 gap:12px!important;
 padding:14px!important;
 align-content:start!important;
}
.video-tile{
 min-width:0!important;
 min-height:190px!important;
 aspect-ratio:16/10!important;
 border-radius:18px!important;
 overflow:hidden!important;
 background:#142536!important;
 border:1px solid rgba(125,184,226,.2)!important;
 box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}
.video-tile video{width:100%!important;height:100%!important;object-fit:cover!important;background:#08131d!important}
.video-tile.connecting::after{content:'در حال اتصال…';position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,15,24,.64);z-index:3;color:#d9efff}
.video-tile.failed::after{content:'اتصال تصویر برقرار نشد';position:absolute;inset:0;display:grid;place-items:center;background:rgba(65,10,15,.72);z-index:3;color:#ffd9dc}
.video-tile.mic-off::before{content:'میکروفن خاموش';position:absolute;left:8px;top:8px;z-index:4;background:rgba(220,38,38,.86);color:#fff;border-radius:10px;padding:4px 7px;font-size:10px}

/* Conference chat: no overlap between launcher and send controls */
.conference-chat-toggle.hidden-while-open{display:none!important}
.conference-chat{
 left:18px!important;
 bottom:92px!important;
 width:min(390px,calc(100% - 36px))!important;
 height:min(500px,62vh)!important;
}
#conferenceChatForm{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;
 align-items:center!important;
 gap:8px!important;
 padding:10px!important;
 background:rgba(8,20,31,.94)!important;
}
#conferenceChatForm input{
 min-width:0!important;
 width:100%!important;
 height:44px!important;
 margin:0!important;
 padding:0 13px!important;
}
#conferenceChatForm button{
 position:static!important;
 min-width:76px!important;
 height:44px!important;
 padding:0 14px!important;
 border-radius:13px!important;
 background:linear-gradient(135deg,var(--blue),var(--blue2))!important;
 color:#fff!important;
 box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 30%,transparent)!important;
}
#closeConferenceChat{
 width:38px!important;height:38px!important;border-radius:12px!important;
 background:rgba(255,255,255,.08)!important;color:#e6f5ff!important
}

/* Meeting control buttons */
.meeting-controls button,.call-controls button{
 width:54px!important;height:54px!important;min-width:54px!important;
 border-radius:17px!important;
 border:1px solid rgba(149,206,239,.2)!important;
 background:linear-gradient(145deg,#20384c,#122333)!important;
 color:#8cefe3!important;
 box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08)!important;
 display:grid!important;place-items:center!important;
 transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.meeting-controls button:hover,.call-controls button:hover{transform:translateY(-2px)!important;background:linear-gradient(145deg,#294b63,#173044)!important}
.meeting-controls button.off,.call-controls button.off{
 background:linear-gradient(145deg,#7f1d2d,#4b1320)!important;
 color:#ffdbe0!important;border-color:rgba(255,121,139,.35)!important
}
.meeting-controls .danger,.call-controls .danger,.leave-room{
 width:auto!important;min-width:120px!important;border-radius:17px!important;
 background:linear-gradient(135deg,#e64b59,#ff6c78)!important;color:#fff!important
}
.meeting-controls .ui-icon,.call-controls .ui-icon{
 width:24px!important;height:24px!important;fill:currentColor!important;color:inherit!important
}

/* One-to-one call UI */
.call-layer{background:radial-gradient(circle at 50% 22%,#183c56 0,#0d1b28 36%,#050b11 100%)!important}
.call-controls{padding:10px 12px;border-radius:22px;background:rgba(8,20,31,.64);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1)}
.call-layer #remoteVideo{background:#071019!important}
.call-layer #localVideo{box-shadow:0 14px 38px rgba(0,0,0,.38)!important}

/* Always use selected bubble color */
.mine .bubble,
body[data-bubble-style="soft"] .mine .bubble,
body[data-bubble-style="glass"] .mine .bubble,
body[data-bubble-style="minimal"] .mine .bubble{
 background:var(--bubble)!important;
}
.mine .bubble::after{background:var(--bubble)!important}
.appearance-preview .preview-bubble.mine{background:var(--bubble)!important}

/* Reaction tray opens below the message */
.reaction-tray{
 top:calc(100% + 8px)!important;
 bottom:auto!important;
 inset-inline-start:0!important;
 transform:none!important;
 max-height:180px!important;
 overflow:auto!important;
}
.message:nth-last-child(-n+2) .reaction-tray{
 top:auto!important;
 bottom:calc(100% + 8px)!important;
}

/* Make all extended palette values visually active */
body[data-accent="cyan"]{--blue:#0891b2;--blue2:#22d3ee}
body[data-accent="green"]{--blue:#16a34a;--blue2:#4ade80}
body[data-accent="lime"]{--blue:#65a30d;--blue2:#a3e635}
body[data-accent="orange"]{--blue:#ea580c;--blue2:#fb923c}
body[data-accent="red"]{--blue:#dc2626;--blue2:#f87171}
body[data-accent="pink"]{--blue:#db2777;--blue2:#f472b6}
body[data-accent="indigo"]{--blue:#4f46e5;--blue2:#818cf8}

/* Improve conference message cards */
.conference-chat-message{
 border:1px solid rgba(135,190,226,.13)!important;
 background:rgba(25,48,66,.86)!important;
 box-shadow:0 8px 18px rgba(0,0,0,.14)!important;
}
.conference-chat-message.mine{background:color-mix(in srgb,var(--blue) 38%,#173145)!important}
.saved-from-label{font-size:10px;color:var(--muted);border-inline-start:3px solid var(--blue);padding:4px 7px;margin-bottom:7px}.save-message-button:disabled{opacity:.45;cursor:wait}
#readerContent .reader-image{max-width:100%;max-height:75vh;object-fit:contain}

@media(max-width:850px){
 .video-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(130px,1fr)!important;
  gap:7px!important;padding:7px!important
 }
 .video-tile{min-height:130px!important;aspect-ratio:3/4!important;border-radius:13px!important}
 .conference-chat{
  position:fixed!important;left:8px!important;right:8px!important;bottom:76px!important;
  width:auto!important;height:min(58vh,520px)!important
 }
 #conferenceChatForm{grid-template-columns:minmax(0,1fr) 72px!important}
 #conferenceChatForm button{min-width:72px!important}
 .meeting-controls button,.call-controls button{
  width:50px!important;height:50px!important;min-width:50px!important;border-radius:15px!important
 }
 .meeting-controls .danger,.call-controls .danger,.leave-room{min-width:104px!important}
 .reaction-tray{width:min(240px,calc(100vw - 44px))!important;grid-template-columns:repeat(6,1fr)!important}
}

/* v34 product identity */
.brand-mark-inline{display:inline-flex;align-items:center;gap:9px}
.brand-mark-inline::before{content:'';width:28px;height:28px;flex:0 0 28px;background:url('school-app-mark.svg?v=1.0.17') center/contain no-repeat}

/* v36 saved messages, inline video, and transfer progress */
.saved-avatar{font-size:18px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.video-message{display:grid;gap:7px;max-width:min(520px,78vw)}.video-message video{width:100%;max-height:420px;border-radius:14px;background:#000}.video-message a{font-size:12px;text-decoration:none;color:var(--blue)}
.transfer-progress{margin:10px auto;padding:10px 14px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);width:min(420px,85%);display:grid;gap:6px}.transfer-progress progress{width:100%}.transfer-progress small,.download-progress{font-size:12px;opacity:.75}.download-progress{padding:6px 0}