/* R11: quiet surfaces and stable media geometry; component-scoped overrides. */
:root { --r11-canvas:#f5f6f8; --r11-out:#e6efff; --r11-out-text:#14243e; --r11-muted:#52627a; }
html[data-theme="dark"] { --r11-canvas:#111821; --r11-out:#223d60; --r11-out-text:#f3f7ff; --r11-muted:#b9c9df; }
#app #sidenav,#app #panel-list,#app #bottomnav { background:var(--surface,#fff)!important; background-image:none!important; box-shadow:none!important; backdrop-filter:none!important; }
#app #sidenav::before,#app #sidenav::after,#app #panel-list::before,#app #panel-list::after { display:none!important; }
#app #sidenav .sidenav__btn,#app #bottomnav .bottomnav__btn { box-shadow:none!important; border:0!important; background:transparent!important; color:var(--text-muted,#536174)!important; }
#app #sidenav .sidenav__btn.is-active,#app #bottomnav .bottomnav__btn.is-active { background:var(--accent-soft,#e9efff)!important; color:var(--accent,#245bdc)!important; }
#app #chatlist .chat-row { box-shadow:none!important; border:0!important; border-radius:12px!important; margin:0 6px!important; width:calc(100% - 12px)!important; }
#app #chatlist .chat-row.is-active { background:var(--accent-soft,#e9efff)!important; outline:none!important; }
#app #chatlist .chat-row__avatar { box-shadow:none!important; border-radius:50%!important; }
#app #chatlist .chat-row__name { font-size:15px!important; line-height:21px!important; }
#app #chatlist .chat-row__preview { font-size:14px!important; line-height:20px!important; }
#app #chatlist .chat-row__time { font-size:12px!important; }
#app #panel-list .searchbar,#app #panel-list input { box-shadow:none!important; }
#app #view-chats #messages { overscroll-behavior:contain; scroll-behavior:auto!important; background-attachment:scroll!important; }
html[data-theme="light"][data-vy-chatbg="mist"] #app #view-chats #messages { background:var(--r11-canvas)!important; }
html[data-theme="dark"][data-vy-chatbg="dusk"] #app #view-chats #messages { background:var(--r11-canvas)!important; }
#app #view-chats #messages::before,#app #view-chats #messages::after { animation:none!important; pointer-events:none!important; }
#app #view-chats #messages .msg { animation:none!important; }
#app #view-chats #messages .bubble { box-shadow:0 1px 2px #1020340a!important; border:0!important; backdrop-filter:none!important; line-height:1.45; }
#app #view-chats #messages .msg--out > .bubble { background:var(--r11-out)!important; color:var(--r11-out-text)!important; }
#app #view-chats #messages .msg--out > .bubble::before,#app #view-chats #messages .msg--out > .bubble::after { display:none!important; }
#app #view-chats #messages .msg--out .bubble__text,#app #view-chats #messages .msg--out .callcard__title,#app #view-chats #messages .msg--out .voice-transcript { color:var(--r11-out-text)!important; }
#app #view-chats #messages .msg--out .bubble__meta,#app #view-chats #messages .msg--out .callcard__sub,#app #view-chats #messages .msg--out .voice-player__dur { color:var(--r11-muted)!important; opacity:1!important; }
#app #view-chats #messages .msg--out .voice-wave { color:var(--accent,#245bdc)!important; }
html[data-theme="dark"] #app #view-chats #messages .msg--out .voice-wave { color:#b8d4ff!important; }
#app #view-chats #messages .voice-player { grid-template-columns:42px minmax(90px,144px) 38px!important; gap:8px!important; max-width:100%!important; }
#app #view-chats #messages .voice-player__wave-wrap { width:100%!important; min-width:0!important; }
#app #view-chats #messages .voice-player__dur { font-variant-numeric:tabular-nums; }
#app #view-chats #messages .voice-transcript { font-size:14px!important; line-height:1.5!important; overflow-wrap:anywhere; }
#app #view-chats #messages .msg--sticker > .bubble { background:transparent!important; box-shadow:none!important; padding:0!important; border-radius:0!important; min-width:0!important; }
#app #view-chats #messages .msg--sticker .bubble__img { width:176px!important; height:176px!important; max-width:100%!important; object-fit:contain!important; border-radius:0!important; }
#app #view-chats #messages .msg--sticker .bubble__meta { width:max-content; margin:4px 0 0 auto; padding:2px 7px; border-radius:10px; background:var(--surface,#fff); color:var(--text-muted,#52627a)!important; }
#app #view-chats #composer-wrap,#app #view-chats #composer-bar { background:var(--surface,#fff)!important; box-shadow:none!important; backdrop-filter:none!important; }
#app #view-chats #composer-wrap .composer__field { border:1px solid var(--border,#e2e6ee)!important; box-shadow:none!important; border-radius:24px!important; background:var(--surface-2,#f4f6fa)!important; }
#app #view-chats #composer-wrap .composer__field:focus-within { border-color:var(--accent,#245bdc)!important; }
#app #view-chats #composer-wrap button { box-shadow:none!important; }
#app #view-chats #composer-wrap #composer-input { background:transparent!important; }
@media(min-width:861px) { #app #sidenav { width:76px!important; min-width:76px!important; padding:8px 4px!important; } #app #sidenav .sidenav__btn { min-height:64px!important; border-radius:14px!important; } #app #sidenav .sidenav__btn__label { font-size:11px!important; } }
@media(max-width:480px) { #app #view-chats #messages .voice-player { grid-template-columns:40px minmax(64px,120px) 34px!important; gap:6px!important; } #app #view-chats #messages .msg--sticker .bubble__img { width:156px!important; height:156px!important; } }
@media(prefers-reduced-motion:no-preference) { html:not([data-vy-motion="off"]) #app #sidenav .sidenav__btn,html:not([data-vy-motion="off"]) #app #bottomnav .bottomnav__btn { transition:background-color 140ms ease,color 140ms ease!important; } }
.maxi-ptr[hidden]{display:none!important}
#app #view-chats #messages details.voice-transcript summary{cursor:pointer;font-size:13px;font-weight:600;min-height:32px;display:flex;align-items:center;color:inherit}
#app #view-chats #messages details.voice-transcript[open]{max-height:260px;overflow:auto;overscroll-behavior:contain}
html #app #view-chats #messages .msg.msg--out > .bubble:has(.voice-player) { background:var(--r11-out)!important; color:var(--r11-out-text)!important; }
html #app #view-chats #messages .msg .bubble__text { background:transparent!important; box-shadow:none!important; border:0!important; padding:0!important; }
html #app #view-chats #messages .msg.msg--out .voice-player__play { background:var(--accent,#245bdc)!important; color:#fff!important; }
html #app #view-chats #messages .msg.msg--out .voice-player { color:var(--r11-out-text)!important; }

#app .service-card-row > .service-card{min-height:0!important;height:auto!important;flex:1 1 auto!important}
#app .service-card-share{flex:0 0 44px;min-width:132px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
#app .service-card-share::before{content:"↗";font-size:18px}

/* R20: readable links on light message bubbles; preserve dark contrast. */
html:not([data-theme="dark"]) #app #view-chats #messages .bubble a.dc-link{color:#174ea6!important;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] #app #view-chats #messages .bubble a.dc-link{color:#b8d4ff!important;text-decoration:underline;text-underline-offset:2px}
/* Keep short navigation labels intact on the desktop rail. */
#app #sidenav .sidenav__btn__label{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;font-size:10px!important;letter-spacing:0!important}

/* R23: emoji/sticker mode selector. Scope follows eco-max-vb's existing
   role/group + aria-pressed contract; no changes to selection behavior. */
.vb-emoji-panel [role="group"][aria-label="Тип эмоции"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px !important;
  margin: 0 12px 10px !important;
  padding: 4px !important;
  border: 1px solid var(--border, #e2e6ee);
  border-radius: 17px;
  background: var(--surface-2, #f4f6fa);
}
.vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button {
  appearance: none;
  min-width: 0;
  min-height: 44px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--text-muted, #536174) !important;
  font: inherit;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button[aria-pressed="true"] {
  background: var(--accent-soft, #e9efff) !important;
  color: var(--accent, #245bdc) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--accent, #245bdc);
}
.vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button:focus-visible {
  outline: 2px solid var(--accent, #245bdc);
  outline-offset: 2px;
}
@media (hover: hover) {
  .vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button[aria-pressed="false"]:hover {
    background: var(--surface, #fff) !important;
    color: var(--text, #162033) !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button {
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button:active {
    opacity: .82;
    transform: scale(.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Phone status imports older --ink/--line/--brand names. Map only these cards
   to the active Messenger palette so manual dark mode remains readable. */
html .phone-profile,
html .phone-required {
  color: var(--text, #162033) !important;
  background: var(--surface, #fff) !important;
  border-color: var(--border, #e2e6ee) !important;
}
html .phone-profile .phone-profile__title,
html .phone-profile .phone-profile__status,
html .phone-required p,
html .phone-required .phone-required__close {
  color: var(--text, #162033) !important;
}
html .phone-profile .phone-profile__badge,
html .phone-profile .phone-profile__hint {
  color: var(--text-muted, #536174) !important;
}
html .phone-profile[data-status="verified"] .phone-profile__badge {
  color: var(--accent, #245bdc) !important;
}
html .phone-profile__action {
  color: var(--accent, #245bdc) !important;
  background: var(--accent-soft, #e9efff) !important;
  border: 1px solid var(--accent, #245bdc);
}
html .phone-profile__action:focus-visible,
html .phone-required__close:focus-visible {
  outline-color: var(--accent, #245bdc) !important;
}
html[data-vy-motion="off"] .vb-emoji-panel [role="group"][aria-label="Тип эмоции"] > button {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* R24: service cards share one shape and clear app identities. */
#app .services-grid { display:grid!important; width:100%!important; max-width:none!important; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))!important; gap:16px!important; align-items:stretch; }
#app .service-card-row { overflow:hidden; border:1px solid var(--border,#e2e6ee); border-radius:22px; background:var(--surface,#fff); gap:0; box-shadow:0 3px 14px rgb(15 23 42 / .025); }
#app .service-card-row > .service-card { display:grid!important; grid-template-columns:56px minmax(0,1fr)!important; align-items:start!important; gap:14px!important; width:100%; padding:20px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; text-decoration:none; }
#app .service-card[data-service-id] .service-card__icon { width:56px!important; height:56px!important; flex:0 0 56px; border-radius:17px!important; padding:0!important; background:none!important; box-shadow:none!important; }
#app .service-card[data-service-id] .service-card__icon > svg { visibility:visible!important; display:block!important; width:56px!important; height:56px!important; }
#app .service-card__body { min-width:0; gap:7px!important; }
#app .service-card__body strong { color:var(--text,#162033); font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.015em; overflow-wrap:break-word; }
#app .service-card__body > span { color:var(--text-muted,#536174); font-size:14px; line-height:1.5; }
#app .service-card__body > small { color:var(--text-muted,#536174); font-size:12px; line-height:1.4; }
#app .service-card-share { margin:0 16px 14px!important; min-width:0!important; min-height:44px; padding:9px 14px; border:0!important; border-radius:12px; background:var(--surface-2,#f4f6fa)!important; color:var(--text,#162033)!important; }
#app .service-card:focus-visible { outline:2px solid var(--accent,#245bdc)!important; outline-offset:-3px; border-radius:20px!important; }
#app .service-card-share:focus-visible { outline:2px solid var(--accent,#245bdc)!important; outline-offset:2px; }
@media(hover:hover){ #app .service-card-row:hover { border-color:var(--accent,#245bdc); } #app .service-card-share:hover { background:var(--accent-soft,#e9efff)!important; color:var(--accent,#245bdc)!important; } }
@media(min-width:1400px){ #app .services-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; } }
@media(max-width:620px){ #app .services-grid { grid-template-columns:minmax(0,1fr)!important; gap:12px!important; } #app .service-card-row > .service-card { padding:17px!important; gap:13px!important; } #app .service-card__body strong { font-size:16px; } }
@media(prefers-reduced-motion:no-preference){ html:not([data-vy-motion="off"]) #app .service-card-share { transition:transform 140ms ease,opacity 140ms ease; } html:not([data-vy-motion="off"]) #app .service-card-share:active { transform:scale(.97); opacity:.85; } }

/* R25: expressive interaction without animating message geometry or scroll. */
@keyframes vy25-appear { from { opacity:0; } to { opacity:1; } }
@keyframes vy25-panel { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes vy25-icon { 0%,100% { rotate:0deg; scale:1; } 40% { rotate:-5deg; scale:1.07; } 75% { rotate:3deg; scale:1.025; } }
@media(prefers-reduced-motion:no-preference) {
 html:not([data-vy-motion="off"]) #app .view:not(.hidden) { animation:vy25-appear 240ms cubic-bezier(.2,.8,.2,1); }
 html:not([data-vy-motion="off"]) .social-profile[open],
 html:not([data-vy-motion="off"]) .mg-sheet:not(.hidden) .mg-sheet__panel,
 html:not([data-vy-motion="off"]) #view-chats .vb-emoji-panel,
 html:not([data-vy-motion="off"]) .thread-tools[open] .thread-tools__panel { animation:vy25-panel 220ms cubic-bezier(.16,1,.3,1); }
 html:not([data-vy-motion="off"]) #app .service-card-row { transition:translate 220ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms ease,border-color 180ms ease; }
 html:not([data-vy-motion="off"]) #app :is(.bottomnav__btn,.sidenav__btn,.btn-icon,.service-card-share),
 html:not([data-vy-motion="off"]) .vb-emoji-panel button,
 html:not([data-vy-motion="off"]) .mg-chip { transition:scale 160ms cubic-bezier(.2,.8,.2,1),opacity 160ms ease,background-color 160ms ease!important; }
 html:not([data-vy-motion="off"]) #app :is(.bottomnav__btn,.sidenav__btn,.btn-icon,.service-card-share):active,
 html:not([data-vy-motion="off"]) .vb-emoji-panel button:active,
 html:not([data-vy-motion="off"]) .mg-chip:active { scale:.94; }
 html:not([data-vy-motion="off"]) #app .composer__field { transition:border-color 180ms ease,box-shadow 180ms ease!important; }
 @media(hover:hover) {
  html:not([data-vy-motion="off"]) #app .service-card-row:hover { translate:0 -3px; box-shadow:0 8px 24px rgb(45 66 130 / .10); }
  html:not([data-vy-motion="off"]) #app .service-card-row:hover .service-card__icon > svg { animation:vy25-icon 480ms ease-out; }
  html:not([data-vy-motion="off"]) #app :is(.bottomnav__btn,.sidenav__btn,.btn-icon):hover { scale:1.045; }
  html:not([data-vy-motion="off"]) .vb-emoji-panel button:hover { scale:1.045; }
 }
}
/* Both preferences disable the new effects without changing panel placement. */
html[data-vy-motion="off"] #app .view,
html[data-vy-motion="off"] #app .service-card-row,
html[data-vy-motion="off"] #app .service-card__icon > svg,
html[data-vy-motion="off"] .social-profile,
html[data-vy-motion="off"] .mg-sheet__panel,
html[data-vy-motion="off"] .vb-emoji-panel,
html[data-vy-motion="off"] .thread-tools__panel { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
 #app .view,#app .service-card-row,#app .service-card__icon > svg,.social-profile,.mg-sheet__panel,.vb-emoji-panel,.thread-tools__panel { animation:none!important; }
}

@media(prefers-reduced-motion:no-preference) {
 html:not([data-vy-motion="off"]) #app :is(.bottomnav__btn,.sidenav__btn,.btn-icon,.service-card-share):active,
 html:not([data-vy-motion="off"]) .vb-emoji-panel button:active { scale:.94; }
}

/* R25: readable navigation and robust profile geometry. */
@media(min-width:861px) {
 #app #sidenav { width:88px!important; min-width:88px!important; }
 #app #sidenav .sidenav__btn__label { font-size:12px!important; line-height:16px!important; }
}
.social-profile[open] { display:flex; flex-direction:column; }
.social-profile__bar { flex:0 0 auto; }
.social-profile .social-profile__scroll { flex:1 1 auto; min-height:0; height:auto; }
.social-profile__handle { overflow-wrap:anywhere; }
.social-profile-link { min-height:44px; }
#thread-name { min-height:44px; }
html[data-vy-motion="off"] .social-profile button:active { transform:none; }