/* Visible language access; the demo is content, not a nested touch-scrolling app. */
.navbar-inner { gap: 20px; }
.nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-brand .lang-dropdown { width: auto; }
.nav-brand .lang-toggle { width: auto; min-width: 72px; min-height: 44px; font-size: .875rem; background: #fff; }
.nav-brand .lang-menu { inset-inline-start: 0; inset-inline-end: auto; }
.nav-brand .lang-menu a { min-height: 44px; display: flex; align-items: center; padding: 10px 16px; }
.phone-mockup .chat-body { overscroll-behavior: auto; }
.phone-mockup .chat-body.chat-static {
  height: auto; min-height: 420px; overflow: visible; touch-action: pan-y pinch-zoom;
}
.phone-mockup .chat-body.chat-static .chat-bubble { opacity: 1; transform: none; transition: none; }
.nav-brand :focus-visible { outline: 3px solid #166534; outline-offset: 3px; }
@media (max-width: 768px) {
  .navbar-inner { gap: 12px; }
  .nav-brand { gap: 12px; min-width: 0; }
  .nav-brand .lang-menu {
    position: absolute; top: calc(100% + 8px); margin: 0;
    width: min(240px, calc(100vw - 48px)); min-width: 0;
    inset-inline-start: auto; inset-inline-end: 0;
    max-height: min(360px, calc(100dvh - 84px));
    box-shadow: 0 12px 32px rgba(23,35,29,.14);
  }
  /* Anchor to the brand group's viewport-safe edge, including RTL. */
  .nav-brand { position: relative; }
  .nav-brand .lang-dropdown { position: static; }
  .nav-brand .lang-menu { inset-inline-start: 0; inset-inline-end: auto; }
  .menu-toggle { flex-shrink: 0; margin-inline-start: auto; }
}
@media (max-width: 768px), (any-pointer: coarse) {
  .phone-mockup .chat-body { height: auto; min-height: 420px; overflow: visible; touch-action: pan-y pinch-zoom; }
  .phone-mockup .chat-bubble { opacity: 1; transform: none; transition: none; }
  .phone-mockup .typing-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mockup .chat-body { height: auto; overflow: visible; }
}