/* v567 product foundation: final design, interaction, and accessibility contract. */
:root {
  --fl-color-canvas: #f8fafc;
  --fl-color-surface: #ffffff;
  --fl-color-surface-muted: #f1f5f9;
  --fl-color-text: #101828;
  --fl-color-text-muted: #667085;
  --fl-color-primary: #0f766e;
  --fl-color-accent: #f97316;
  --fl-color-danger: #dc2626;
  --fl-color-focus: #2563eb;
  --fl-border: #d8dee8;
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-5: 24px;
  --fl-space-6: 32px;
  --fl-radius-sm: 6px;
  --fl-radius-md: 8px;
  --fl-radius-lg: 16px;
  --fl-radius-pill: 999px;
  --fl-touch: 48px;
  --fl-motion-fast: 180ms;
  --fl-motion-standard: 220ms;
  --fl-ease: cubic-bezier(0.2, 0, 0, 1);
  --fl-shadow-control: 0 4px 12px rgba(16, 24, 40, 0.1);
  letter-spacing: 0;
}

* { box-sizing: border-box; }

button,
[role="button"],
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
[role="button"],
.view-tab,
.contact-row,
.conversation-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:not(.message-bubble),
[role="button"]:not(.message-bubble),
.view-tab {
  min-width: var(--fl-touch);
  min-height: var(--fl-touch);
}

:where(button, [role="button"], input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fl-color-focus) 72%, white);
  outline-offset: 2px;
}

.view-tab,
.icon-button,
.primary-button,
.ghost-button,
.send-button {
  transition: transform var(--fl-motion-fast) var(--fl-ease), opacity var(--fl-motion-fast) var(--fl-ease), background-color var(--fl-motion-fast) var(--fl-ease);
}

:where(.view-tab, .icon-button, .primary-button, .ghost-button, .send-button):active { transform: scale(0.96); }
.view-tab[aria-current="page"] { color: var(--fl-color-primary); }

.room-screen.is-transitioning :where(.home-panel, .contacts-panel, .chat-panel) {
  transition: opacity var(--fl-motion-fast) var(--fl-ease), transform var(--fl-motion-fast) var(--fl-ease) !important;
}

:where(.contacts-list, .messages, .chats-directory-list, .settings-card) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.contacts-list, .messages, .chats-directory-list) :where(.contact-row, .conversation-row, .message-row) {
  contain: layout paint style;
}

:root.native-android :where(.contacts-list, .messages, .chats-directory-list, .contact-row, .conversation-row, .message-row, .message-bubble, .app-nav) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.room-screen[data-view="chat"] .message-form {
  gap: var(--fl-space-2) !important;
  background: color-mix(in srgb, var(--fl-color-surface) 96%, transparent) !important;
  border-top: 1px solid var(--fl-border) !important;
}

.room-screen[data-view="chat"] #message-input {
  min-height: 48px !important;
  max-height: 112px !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 24px !important;
  background: var(--fl-color-surface) !important;
  color: var(--fl-color-text) !important;
}

.room-screen[data-view="chat"] :where(#attach-menu-toggle, .send-button),
.room-screen[data-view="chat"] .chat-header-actions :where(button, .icon-button) {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}

.room-screen[data-view="call"].call-active .call-actions { gap: var(--fl-space-2) !important; }
.room-screen[data-view="call"].call-active .call-actions :where(.icon-button, .danger-button) {
  min-width: 48px !important;
  min-height: 48px !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fl-color-canvas: #0b1220;
    --fl-color-surface: #111827;
    --fl-color-surface-muted: #1f2937;
    --fl-color-text: #f8fafc;
    --fl-color-text-muted: #cbd5e1;
    --fl-border: #374151;
  }
}

@media (max-width: 380px), (max-height: 640px) {
  :root { --fl-space-4: 12px; --fl-space-5: 18px; }
  .chat-title-block h2 { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}