/* vAvtobyse Stage 2E1 — one-click voice chat from the active conversation */
.chat-voice-call-button{
  min-width:96px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border-color:rgba(216,172,73,.28)!important;
  background:linear-gradient(180deg,rgba(216,172,73,.10),rgba(255,255,255,.025))!important;
  color:var(--text-main,#e8e2d5)!important;
}
.chat-voice-call-button:hover{border-color:rgba(216,172,73,.55)!important;background:rgba(216,172,73,.14)!important}
.chat-voice-call-button.voice-connected{border-color:rgba(102,190,112,.56)!important;background:rgba(75,151,83,.16)!important;box-shadow:inset 0 0 0 1px rgba(102,190,112,.08)}
.chat-voice-call-image{width:20px;height:20px;display:block;filter:invert(1) opacity(.88)}
.chat-voice-call-button.voice-connected .chat-voice-call-image{filter:invert(78%) sepia(23%) saturate(740%) hue-rotate(73deg) brightness(94%)}
.chat-voice-call-text{font-size:12px;font-weight:800;white-space:nowrap}
.voice-context-note{margin:0 14px 8px;padding:8px 10px;border:1px solid rgba(216,172,73,.20);border-radius:10px;background:rgba(216,172,73,.055);color:#cfc6b2;font-size:11px;line-height:1.35}
.voice-context-note strong{color:#f0d994}
@media(max-width:820px){
  html.vav-mobile-layout .chat-header{grid-template-columns:42px 46px minmax(0,1fr) 42px 42px!important}
  html.vav-mobile-layout .chat-voice-call-button{min-width:42px;width:42px;height:42px;min-height:42px;padding:0;border-radius:13px!important}
  html.vav-mobile-layout .chat-voice-call-text{display:none}
  html.vav-mobile-layout .chat-voice-call-image{width:20px;height:20px}
}
@media(max-width:370px){
  html.vav-mobile-layout .chat-header{grid-template-columns:40px 43px minmax(0,1fr) 40px 40px!important}
  html.vav-mobile-layout .chat-voice-call-button{min-width:40px;width:40px;height:40px;min-height:40px}
}
@media(min-width:821px) and (max-width:1050px){.chat-voice-call-button{min-width:44px;padding:8px}.chat-voice-call-text{display:none}}

/* vAvtobyse Stage 2E2 — Telegram-like call surface + clearer voice states */
.chat-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.chat-header-actions .chat-voice-call-button,
.chat-header-actions .chat-info-button{
  flex:0 0 auto;
}
.chat-voice-call-button::before,
.chat-voice-call-button::after{
  content:none!important;
  display:none!important;
}

@media(max-width:820px){
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-header{
    grid-template-columns:42px 46px minmax(0,1fr) auto!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-header-actions{
    gap:5px!important;
  }
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-voice-call-button,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-info-button{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:13px!important;
  }
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-voice-call-button::before,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-voice-call-button::after{
    content:none!important;
    display:none!important;
  }
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-voice-call-image{
    width:21px!important;
    height:21px!important;
  }
}
@media(max-width:390px){
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-header{
    grid-template-columns:38px 42px minmax(0,1fr) auto!important;
    gap:4px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-header-actions{gap:4px!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-voice-call-button,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .chat-info-button{
    width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
  }
}

.voice-state-toggle,
.voice-call-toggle{
  --voice-state-color:#78cf82;
  --voice-state-bg:rgba(75,158,85,.14);
  --voice-state-border:rgba(120,207,130,.42);
}
.voice-state-toggle.state-off,
.voice-call-toggle.state-off{
  --voice-state-color:#ef7368;
  --voice-state-bg:rgba(175,58,49,.17);
  --voice-state-border:rgba(239,115,104,.46);
}
.voice-state-toggle{
  color:var(--voice-state-color)!important;
  border-color:var(--voice-state-border)!important;
  background:var(--voice-state-bg)!important;
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  text-align:left!important;
  column-gap:8px!important;
  row-gap:1px!important;
  min-width:142px;
}
.voice-state-toggle .voice-toggle-icon{grid-row:1/3}
.voice-state-toggle>span:not(.voice-toggle-icon){font-weight:800;color:#efe8d8}
.voice-state-toggle>small{font-size:10px;color:var(--voice-state-color)}
.voice-toggle-icon{width:25px;height:25px;display:grid;place-items:center;color:var(--voice-state-color)}
.voice-toggle-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.state-on .voice-toggle-slash{display:none}
.state-off .voice-toggle-slash{display:block}

.voice-call-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(8,12,14,.74);
  backdrop-filter:blur(12px);
}
.voice-call-overlay.hidden{display:none}
.voice-call-card{
  width:min(430px,100%);
  min-height:560px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(216,172,73,.34);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 18%,rgba(216,172,73,.13),transparent 34%),
    linear-gradient(180deg,#364044,#252d31 52%,#20272b);
  box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04);
  color:#f4ecd8;
}
.voice-call-topbar{
  align-self:stretch;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:auto;
  color:#cfc6b2;
  font-size:12px;
  font-weight:800;
  text-align:center;
  letter-spacing:.02em;
}
.voice-call-minimize{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:rgba(255,255,255,.05);color:#f0d994;font-size:31px;line-height:1;
}
.voice-call-live-dot{justify-self:end;width:11px;height:11px;border-radius:50%;background:#78cf82;box-shadow:0 0 0 5px rgba(120,207,130,.09),0 0 18px rgba(120,207,130,.35)}
.voice-call-avatar{
  width:126px;height:126px;margin-top:34px;border-radius:34px;display:grid;place-items:center;
  border:2px solid rgba(216,172,73,.42);background:#303a3f center/cover no-repeat;
  box-shadow:0 16px 42px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04);
  color:#f0d994;font-size:48px;font-weight:900;overflow:hidden;
}
.voice-call-name{margin-top:22px;font-size:27px;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-call-status{margin-top:9px;color:#c7bfad;font-size:14px;text-align:center}
.voice-call-duration{margin-top:7px;color:#e0ca8d;font-variant-numeric:tabular-nums;font-size:13px}
.voice-call-duration.hidden{display:none}
.voice-call-controls,.voice-call-incoming{
  width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:34px;
}
.voice-call-incoming{grid-template-columns:repeat(2,1fr)}
.voice-call-incoming.hidden{display:none}
.voice-call-toggle,.voice-call-hangup,.voice-call-accept,.voice-call-decline{
  min-height:88px;border-radius:20px;border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;font-weight:800;color:#eee5d2;background:rgba(255,255,255,.05);
}
.voice-call-toggle{color:var(--voice-state-color);border-color:var(--voice-state-border);background:var(--voice-state-bg)}
.voice-call-toggle>span:not(.voice-toggle-icon){color:#efe8d8}
.voice-call-toggle>small{font-size:10px;color:var(--voice-state-color)}
.voice-call-hangup,.voice-call-decline{background:rgba(183,58,48,.22);border-color:rgba(239,115,104,.48);color:#ffd6d1}
.voice-call-accept{background:rgba(64,155,77,.24);border-color:rgba(120,207,130,.52);color:#def7e1}
.voice-call-hangup>span:first-child,.voice-call-accept>span:first-child,.voice-call-decline>span:first-child{font-size:24px;transform:rotate(135deg)}
.voice-call-accept>span:first-child{transform:none}

.voice-call-eyebrow{
  margin-top:20px;color:#f0c85c;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.voice-call-eyebrow.hidden{display:none}
.voice-call-overlay.incoming .voice-call-card{
  background:
    radial-gradient(circle at 50% 19%,rgba(216,172,73,.22),transparent 36%),
    radial-gradient(circle at 50% 62%,rgba(71,145,82,.08),transparent 34%),
    linear-gradient(180deg,#394347,#252d31 52%,#1e2529);
}
.voice-call-overlay.incoming .voice-call-avatar{
  animation:vavIncomingAvatarPulse 1.55s ease-in-out infinite;
}
.voice-call-overlay.incoming .voice-call-minimize{visibility:hidden;pointer-events:none}
.voice-call-overlay.incoming .voice-call-live-dot{background:#e8b94a;box-shadow:0 0 0 5px rgba(232,185,74,.10),0 0 20px rgba(232,185,74,.45)}
@keyframes vavIncomingAvatarPulse{
  0%,100%{transform:scale(1);box-shadow:0 16px 42px rgba(0,0,0,.34),0 0 0 0 rgba(232,185,74,.22)}
  50%{transform:scale(1.035);box-shadow:0 18px 48px rgba(0,0,0,.4),0 0 0 16px rgba(232,185,74,0)}
}

@media(max-width:720px){
  .voice-call-overlay{padding:0;place-items:stretch}
  .voice-call-card{
    width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0;
    padding:max(18px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
  }
  .voice-call-avatar{width:122px;height:122px;border-radius:32px;margin-top:8vh}
  .voice-call-name{font-size:28px}
  .voice-call-overlay.incoming .voice-call-card{justify-content:flex-start}
  .voice-call-overlay.incoming .voice-call-eyebrow{margin-top:7vh;font-size:14px}
  .voice-call-overlay.incoming .voice-call-avatar{margin-top:22px;width:138px;height:138px;border-radius:38px}
  .voice-call-overlay.incoming .voice-call-name{margin-top:24px;font-size:30px}
  .voice-call-overlay.incoming .voice-call-status{font-size:16px;color:#eee4cf}
  .voice-call-overlay.incoming .voice-call-incoming{margin-top:auto;padding-top:28px;padding-bottom:max(18px,env(safe-area-inset-bottom));gap:14px}
  .voice-call-overlay.incoming .voice-call-accept,.voice-call-overlay.incoming .voice-call-decline{min-height:104px;border-radius:26px;font-size:15px}
  .voice-call-overlay.incoming .voice-call-accept>span:first-child,.voice-call-overlay.incoming .voice-call-decline>span:first-child{font-size:31px}
  .voice-call-controls,.voice-call-incoming{padding-top:24px}
  .voice-room-controls .voice-state-toggle{min-width:0}
}

/* vAvtobyse Stage 2E6 FINAL CALL UX — direct, readable phone-like calls */
.voice-call-overlay{
  background:
    radial-gradient(circle at 50% 16%,rgba(226,181,70,.12),transparent 36%),
    rgba(12,17,20,.92)!important;
  backdrop-filter:blur(18px) saturate(.9)!important;
}
.voice-call-card{
  position:relative;
  overflow:hidden;
}
.voice-call-card::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.3;
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.028) 48%,transparent 56%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);
}
.voice-call-card>*{position:relative;z-index:1}
.voice-call-topbar{font-size:13px!important;letter-spacing:.025em!important}
.voice-call-eyebrow{
  padding:7px 12px;border:1px solid rgba(231,185,73,.26);border-radius:999px;
  background:rgba(231,185,73,.08);font-size:12px!important;letter-spacing:.12em!important;
}
.voice-call-avatar{
  width:144px!important;height:144px!important;border-radius:38px!important;
  border:2px solid rgba(228,182,70,.56)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.4),0 0 0 8px rgba(228,182,70,.045)!important;
}
.voice-call-name{font-size:31px!important;font-weight:900!important;letter-spacing:-.02em}
.voice-call-status{font-size:16px!important;min-height:24px;color:#d9d1be!important}
.voice-call-duration{font-size:15px!important;color:#efce73!important;font-weight:800}
.voice-call-toggle,.voice-call-hangup,.voice-call-accept,.voice-call-decline{
  min-height:96px!important;border-radius:24px!important;font-size:14px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.12);
}
.voice-phone-icon{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voice-call-hangup .voice-phone-icon,.voice-call-decline .voice-phone-icon{transform:rotate(135deg)}
.voice-call-accept .voice-phone-icon{transform:none}
.voice-call-hangup,.voice-call-decline{
  background:linear-gradient(180deg,rgba(177,55,49,.30),rgba(123,35,31,.22))!important;
  border-color:rgba(241,113,103,.58)!important;color:#ffd9d5!important;
}
.voice-call-accept{
  background:linear-gradient(180deg,rgba(67,174,83,.34),rgba(42,116,53,.22))!important;
  border-color:rgba(121,218,135,.62)!important;color:#e2ffe6!important;
}
.voice-call-overlay.incoming .voice-call-card{
  background:
    radial-gradient(circle at 50% 24%,rgba(73,165,87,.13),transparent 34%),
    radial-gradient(circle at 50% 8%,rgba(231,185,73,.18),transparent 31%),
    linear-gradient(180deg,#364145 0%,#252e32 51%,#1d2529 100%)!important;
}
.voice-call-overlay.outgoing .voice-call-card{
  background:
    radial-gradient(circle at 50% 18%,rgba(231,185,73,.16),transparent 34%),
    linear-gradient(180deg,#374145 0%,#252e32 54%,#1e262a 100%)!important;
}
.voice-call-overlay.incoming .voice-call-incoming{gap:18px!important}
.voice-call-overlay.incoming .voice-call-accept,
.voice-call-overlay.incoming .voice-call-decline{min-height:112px!important}
.voice-call-overlay.incoming .voice-call-live-dot{animation:vavCallRingDot 1s ease-in-out infinite}
@keyframes vavCallRingDot{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

@media(max-width:720px){
  .voice-call-overlay{inset:0!important;padding:0!important;place-items:stretch!important}
  .voice-call-card{
    width:100%!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;
    border:0!important;border-radius:0!important;
    padding:max(18px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom))!important;
  }
  .voice-call-topbar{margin-bottom:0!important}
  .voice-call-eyebrow{margin-top:7vh!important}
  .voice-call-avatar{margin-top:24px!important;width:148px!important;height:148px!important;border-radius:40px!important}
  .voice-call-name{font-size:32px!important;margin-top:26px!important}
  .voice-call-status{font-size:17px!important;margin-top:10px!important}
  .voice-call-controls{margin-top:auto!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important;gap:10px!important}
  .voice-call-incoming{margin-top:auto!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  .voice-call-overlay.incoming .voice-call-eyebrow{margin-top:8vh!important}
  .voice-call-overlay.incoming .voice-call-avatar{margin-top:24px!important}
  .voice-call-overlay.incoming .voice-call-incoming{grid-template-columns:1fr 1fr!important}
}
@media(max-width:380px){
  .voice-call-avatar{width:130px!important;height:130px!important;border-radius:34px!important}
  .voice-call-name{font-size:28px!important}
  .voice-call-toggle,.voice-call-hangup{min-height:88px!important}
  .voice-call-controls{gap:7px!important}
}


/* vAvtobyse Stage 2E8 — phone-like audio route selector */
.voice-call-controls{grid-template-columns:repeat(4,1fr)!important}
.voice-call-route{
  min-height:88px;border-radius:20px;border:1px solid rgba(115,183,225,.38);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;font-weight:800;color:#d9eefb;background:rgba(73,137,177,.12);
}
.voice-call-route>span:not(.voice-call-route-icon){color:#efe8d8}
.voice-call-route>small{font-size:10px;color:#8dc7e7;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
.voice-call-route-icon{width:25px;height:25px;display:grid;place-items:center;color:#8dc7e7}
.voice-call-route-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.voice-call-route[data-route-kind="phone"]{border-color:rgba(120,207,130,.46);background:rgba(64,155,77,.16)}
.voice-call-route[data-route-kind="phone"] .voice-call-route-icon,.voice-call-route[data-route-kind="phone"]>small{color:#78cf82}
.voice-call-route[data-route-kind="speaker"]{border-color:rgba(231,185,73,.48);background:rgba(231,185,73,.12)}
.voice-call-route[data-route-kind="speaker"] .voice-call-route-icon,.voice-call-route[data-route-kind="speaker"]>small{color:#e7b949}
.voice-call-route-sheet{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.voice-call-route-sheet.hidden{display:none}
.voice-call-route-backdrop{position:absolute;inset:0;border:0;background:rgba(4,7,9,.64);backdrop-filter:blur(5px)}
.voice-call-route-panel{position:relative;width:min(420px,calc(100% - 20px));max-height:min(70vh,590px);overflow:auto;margin:10px;padding:14px;border:1px solid rgba(216,172,73,.30);border-radius:22px;background:#263035;box-shadow:0 22px 70px rgba(0,0,0,.55)}
.voice-call-route-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px}
.voice-call-route-titlebar>div{display:flex;flex-direction:column;gap:2px}.voice-call-route-titlebar strong{font-size:16px;color:#f3ead6}.voice-call-route-titlebar small{font-size:11px;color:#aaa291}
.voice-call-route-titlebar>button{width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);color:#eee5d2;font-size:24px}
.voice-call-route-list{display:grid;gap:8px}
.voice-call-route-row{display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:10px;min-height:62px;padding:8px 10px;text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035);color:#efe8d8}
.voice-call-route-row:disabled{opacity:.42}.voice-call-route-row.active{border-color:rgba(120,207,130,.46);background:rgba(64,155,77,.12)}
.voice-call-route-row-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(216,172,73,.08);color:#efcf79;font-size:15px;font-weight:900}
.voice-call-route-row-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.voice-call-route-row-copy strong{font-size:14px}.voice-call-route-row-copy small{font-size:10px;color:#aaa291;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-call-route-check{opacity:0;color:#78cf82;font-size:18px}.voice-call-route-row.active .voice-call-route-check{opacity:1}
.voice-call-route-hint{margin:10px 2px 0;color:#9f9888;font-size:10px;line-height:1.35}
@media(max-width:720px){
  .voice-call-controls{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .voice-call-toggle,.voice-call-route,.voice-call-hangup{min-height:78px!important;border-radius:20px!important}
  .voice-call-route-panel{width:calc(100% - 16px);margin:8px;margin-bottom:max(8px,env(safe-area-inset-bottom));max-height:66vh;border-radius:24px}
}

/* DIRECT_CALL_IN_CHAT_V26 */
#activeChat.voice-call-active{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
#activeChat.voice-call-active>.group-pinned-banner,
#activeChat.voice-call-active>.typing-indicator,
#activeChat.voice-call-active>.message-sync-status,
#activeChat.voice-call-active>.selection-bar,
#activeChat.voice-call-active>.message-list,
#activeChat.voice-call-active>.composer{display:none!important}
.voice-call-overlay.in-chat-call{
  position:relative!important;inset:auto!important;z-index:4!important;flex:1 1 auto!important;
  width:100%!important;min-height:0!important;padding:0!important;place-items:stretch!important;
  background:radial-gradient(circle at 50% 16%,rgba(226,181,70,.11),transparent 38%),var(--th-chat,#151d21)!important;
  backdrop-filter:none!important;
}
.voice-call-overlay.in-chat-call .voice-call-card{
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:clamp(14px,2.2vw,24px)!important;
}
.voice-call-overlay.in-chat-call .voice-call-topbar{margin-bottom:auto!important}
.voice-call-overlay.in-chat-call .voice-call-avatar{margin-top:clamp(16px,5vh,52px)!important}
.voice-call-overlay.in-chat-call .voice-call-controls,
.voice-call-overlay.in-chat-call .voice-call-incoming{max-width:620px;margin-left:auto!important;margin-right:auto!important}
@media(max-width:720px){
  .voice-call-overlay.in-chat-call .voice-call-card{height:100%!important;min-height:0!important;padding:14px 14px max(16px,env(safe-area-inset-bottom))!important}
  .voice-call-overlay.in-chat-call .voice-call-avatar{width:118px!important;height:118px!important;border-radius:32px!important;margin-top:5vh!important}
  .voice-call-overlay.in-chat-call .voice-call-name{font-size:27px!important}
}