/* R50: final shared interaction layer. No backend or message-contract changes. */
:root {
  --r50-ease: cubic-bezier(.2,.8,.2,1);
  --r50-focus: var(--accent, #245bdc);
}
/* Motion shorthands must never reuse a duration+easing token as easing. */
.msg-act__picker.react-picker, .msg-act__menu {
  animation: r50-panel-enter 160ms var(--r50-ease) 0s both !important;
}
.bubble-react.maxi-new { animation: r50-react-enter 180ms var(--r50-ease) 0s both !important; }
.maxi-bounce { animation: none !important; }
#app #view-chats #messages .msg.maxi-new > .bubble { animation: none !important; }
#app #view-chats #messages .msg.r50-message-enter > .bubble {
  animation: r50-message-enter 160ms var(--r50-ease) 0s both !important;
}
#app #view-chats #composer-wrap .btn-send:not(.hidden) {
  animation: r50-control-enter 140ms var(--r50-ease) 0s both !important;
}
@keyframes r50-panel-enter { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes r50-message-enter { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes r50-react-enter { from { opacity: .5; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes r50-control-enter { from { opacity: .4; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* Exactly one hover scale: avoid compounding legacy scale and transform. */
#view-chats .vb-emoji-panel__grid button, .react-picker__btn {
  scale: 1 !important;
  transition: background-color 120ms ease, transform 120ms ease !important;
}
#view-chats .vb-emoji-panel__grid button:hover, .react-picker__btn:hover { transform: scale(1.06) !important; }
#view-chats .vb-emoji-panel__grid {
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
  overflow-x: hidden;
}
#view-chats .vb-emoji-panel__grid button { width: 44px !important; height: 44px !important; min-width: 44px; justify-self: center; }
#view-chats .vb-emoji-panel { max-width: calc(100vw - 16px); }
#view-chats .vb-emoji-panel__close { width: 44px; height: 44px; }
/* Some older styles use a mojibake attribute selector: match the semantic group. */
#view-chats .vb-emoji-panel [role="group"] { 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); border-radius: 14px; background: var(--surface-2); }
#view-chats .vb-emoji-panel [role="group"] > button { min-width: 0; min-height: 44px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; background: transparent; color: var(--text-muted); cursor: pointer; }
#view-chats .vb-emoji-panel [role="group"] > button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px #13254214; }

/* Focus remains visible on all of the pale composer and popover surfaces. */
#app #view-chats #composer-wrap .composer__field:focus-within {
  border-color: var(--r50-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--r50-focus) 28%, transparent) !important;
}
#app :is(button, a, [tabindex="0"]):focus-visible,
.vb-emoji-panel button:focus-visible, .msg-act__menu button:focus-visible,
.chat-tools-panel button:focus-visible, .vy-ask button:focus-visible {
  outline: 2px solid var(--r50-focus) !important;
  outline-offset: 3px !important;
}
#app #view-chats #messages .msg--out .file-chip__name { color: var(--r11-out-text) !important; }
#app #view-chats #messages .msg--out .file-chip__meta { color: var(--r11-muted) !important; font-size: 12px; opacity: 1; }
#app #view-chats #messages .msg--out .file-chip__meta a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
.vy-ask__btn--secondary { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.mg-upbar__fill { width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform 160ms linear; }
.chat-tools-panel { border-radius: 16px; box-shadow: 0 12px 40px #0e203626; }
.chat-tools-row { min-height: 48px; border-radius: 10px; cursor: pointer; }
.chat-tools-row:hover { background: var(--surface-2); }
#app #bottomnav { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
#app #bottomnav .bottomnav__btn { min-width: 0; }
@media(max-width:480px) {
  #app #view-chats #composer-wrap #btn-circle { display: none !important; }
  #app #bottomnav .bottomnav__btn__label { font-size: 10px !important; white-space: nowrap; }
}
@media(hover:none) {
  #view-chats .vb-emoji-panel__grid button:hover, .react-picker__btn:hover { transform: none !important; }
}
/* Reset delays as well as duration, including root and pseudo-elements. */
@media(prefers-reduced-motion:reduce) {
  html, html *, html *::before, html *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  #app #view-chats #messages .msg.r50-message-enter > .bubble,
  .msg-act__picker.react-picker, .msg-act__menu,
  .bubble-react.maxi-new, #app #view-chats #composer-wrap .btn-send:not(.hidden) { animation: none !important; }
}
html[data-vy-motion="off"], html[data-vy-motion="off"] *, html[data-vy-motion="off"] *::before, html[data-vy-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}