/* R55: shared roles, quiet nested surfaces and an opaque navigation shell. */
:root {
  --r55-type-title: var(--t-title-2, 1.0625rem);
  --r55-type-body: var(--t-body-2, .9375rem);
  --r55-type-action: var(--t-body-2, .9375rem);
  --r55-type-meta: var(--t-caption, .8125rem);
  --accent-fill: #1a56db;
  --accent-on-fill: #fff;
  --accent-text: #1a56db;
  --accent-soft: #eaf0ff;
  --r50-focus: var(--accent-text);
  --r55-menu-radius: var(--r-md, 16px);
  --r55-menu-item-radius: 10px; /* намеренный «врез» 6px внутри меню r-md; не шаг сетки */
  --r55-menu-padding: 6px;
  --r55-menu-shadow: var(--e-3, 0 12px 32px rgb(16 24 40 / .14));
  --r55-document-tone: rgb(15 23 42 / .035);
  --r55-document-border: rgb(15 23 42 / .08);
}
html[data-theme="dark"] {
  --accent-fill: #6b96ff;
  --accent-on-fill: #0b1220;
  --accent-text: #9bb8ff;
  --accent-soft: #233756;
  --r55-document-tone: rgb(255 255 255 / .035);
  --r55-document-border: rgb(255 255 255 / .10);
}

/* The old vy25-appear animation faded the entire view from zero. A visible
   view and its header now stay opaque. Hiding a view cancels child CSS
   animations synchronously; no timers, retained fill mode or layer hints. */
html #app .view {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}
#app .shell-main { background-color: var(--bg); }
@keyframes r55-content-enter { from { opacity: .72; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-vy-motion="off"]):not(.motion-off) #app .view:not(.hidden) :is(
    .feed-list > .feed-card:nth-child(-n+3),
    .chatlist > .chat-row:nth-child(-n+6),
    .services-grid > .service-card-row:nth-child(-n+4),
    .calls-list > :nth-child(-n+6),
    .settings-scroll > :first-child
  ) { animation: r55-content-enter 160ms cubic-bezier(.2,.8,.2,1) 0s; }
}

/* Four text roles. The profile hero keeps its separate 24px name style.
   M02 2026-09-14: литеральные line-height заменены на канон --lh-* из
   tokens-v2 (значения 1:1, вычисленная геометрия не изменилась). */
html #app .service-card__body > strong,
html #view-feed .feed-card__meta strong,
html .social-profile h3 {
  font-size: var(--r55-type-title);
  line-height: var(--lh-action, 1.35);
  font-weight: 600;
  letter-spacing: 0;
}
html #app .service-card__body > .service-card__description,
html #view-feed .feed-card__body,
html .social-profile .social-profile__bio {
  font-size: var(--r55-type-body);
  line-height: var(--lh-relaxed, 1.55);
  font-weight: 400;
}
html #app .service-card-share,
html #view-feed :is(.btn-text, .feed-card__clip-link),
html #app #view-feed #btn-feed-compose,
html .social-profile .social-profile__actions button {
  font-size: var(--r55-type-action);
  line-height: var(--lh-action, 1.35);
  font-weight: 600;
}
html #app .service-card__destination,
html #view-feed .feed-card__meta time,
html #view-feed .feed-card__meta .social-profile-link time,
html .social-profile :is(.social-profile__handle, .social-profile__caption) {
  font-size: var(--r55-type-meta);
  line-height: var(--lh-meta, 1.4);
  font-weight: 400;
}

/* One menu material; existing positions, action order and focus owners stay. */
html #view-chats .msg-act__menu,
html :is(.msg-act__menu, .vy-postmenu, .vy-action-menu),
html #chat-tools-panel {
  box-sizing: border-box;
  padding: var(--r55-menu-padding);
  border: 1px solid var(--border);
  border-radius: var(--r55-menu-radius);
  background: var(--surface) !important;
  color: var(--text);
  box-shadow: var(--r55-menu-shadow) !important;
}
html #view-chats .msg-act__menu > button,
html #chat-tools-panel .chat-tools-row,
html #chat-tools-panel .chat-tools-row__label,
html :is(.msg-act__menu > button, .vy-postmenu__item, .chat-tools-row, .vy-action-menu__item) {
  border-radius: var(--r55-menu-item-radius, 10px);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--r55-type-action);
  line-height: var(--lh-action, 1.35);
  font-weight: 500;
}
html #chat-tools-panel [data-chat-tool-control]:not([aria-pressed="true"]) { background: transparent; }
@media (hover: hover) {
  html :is(.msg-act__menu > button, .vy-postmenu__item, .chat-tools-row, .vy-action-menu__item):not(:disabled):hover {
    background: var(--surface-2) !important;
  }
}
html :is(.msg-act__menu > button, .vy-postmenu__item, .chat-tools-row, .vy-action-menu__item):focus-visible {
  background: var(--surface-2);
}

/* Accent text and accent fill are different roles, with explicit on-fill ink. */
html #app #composer-wrap .btn-send,
html #view-feed .btn-primary,
html #app #view-feed #btn-feed-compose,
html .social-profile .social-profile__actions .social-profile__primary {
  background: var(--accent-fill) !important;
  color: var(--accent-on-fill) !important;
}
html #app .btn-text,
html #view-feed .feed-card__clip-link,
html #view-settings :is(.vf-profile-edit, .seg__btn.is-active, .cache-seg__btn.is-active, .bg-tile--compact.is-active .bg-tile__name),
html #app :is(.sidenav__btn.is-active, .bottomnav__btn.is-active) {
  color: var(--accent-text) !important;
}
html #view-feed .feed-card__clip-link,
html #view-settings :is(.seg__btn.is-active, .cache-seg__btn.is-active) {
  background-color: var(--accent-soft);
}
html #view-settings .settings-scroll :is(button, a, [tabindex]):focus-visible {
  outline-color: var(--accent-text);
}

/* Selected icons switch explicit geometry. Never fill an SVG indiscriminately. */
html svg.vy-state-icon { fill: none !important; }
.vy-state-icon > .vy-state-icon__outline { display: inline; }
.vy-state-icon > .vy-state-icon__selected { display: none; }
:is(button[aria-pressed="true"], button[aria-selected="true"]) .vy-state-icon > .vy-state-icon__outline { display: none; }
:is(button[aria-pressed="true"], button[aria-selected="true"]) .vy-state-icon > .vy-state-icon__selected { display: inline; }
#app #view-clips .clip-rail__btn .clip-rail__ico svg { fill: none; }
#app #view-clips .clip-rail__btn[data-clip-like][aria-pressed="true"] {
  --r55-icon-detail: #3a0f23;
}
html :is(button[aria-pressed="true"], button[aria-selected="true"]):has(> .vy-state-icon) {
  background-color: var(--accent-soft);
  color: var(--accent-text);
}

/* A document is nested inside the message, with a restrained shared badge. */
html #app #view-chats #messages .bubble .file-chip {
  background: var(--r55-document-tone) !important;
  border: 1px solid var(--r55-document-border) !important;
  border-radius: var(--r-sm, 12px);
  color: inherit !important;
  box-shadow: none;
}
html #app #view-chats #messages .file-chip .file-badge {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
html #app #view-chats #messages .file-chip .file-badge::before { content: none; }
html #app #view-chats #messages .file-chip .file-badge__ext {
  background: transparent;
  color: inherit;
  font-size: var(--t-micro, .6875rem);
  letter-spacing: .02em;
  padding: 3px 0;
}
html #app #view-chats #messages .msg--out .file-chip .file-badge { color: var(--r11-muted); }
html #app #view-chats #messages .file-chip__name {
  font-size: var(--r55-type-body);
  font-weight: 600;
  line-height: var(--lh-meta, 1.4);
  overflow-wrap: anywhere;
}
html #app #view-chats #messages .file-chip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--r55-type-meta);
  line-height: var(--lh-meta, 1.4);
  font-weight: 400;
  color: var(--text-muted);
  white-space: normal;
}