/* V8 targeted fixes: performance, presence/read stability, and composer polish.
   Scoped to chat UI; no Firebase/data markup changes. */

:root {
  --chat-font-ui: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body,
.chat-main,
.sidebar-menu,
.right-info-panel,
.admin-modal,
.account-modal {
  font-family: var(--chat-font-ui) !important;
}

/* Readability across both themes. */
:root[data-theme="dark"] .chat-main,
:root[data-theme="dark"] .sidebar-menu,
:root[data-theme="dark"] .right-info-panel {
  --chat-muted-readable: #aeb9c9;
}
:root[data-theme="light"] .chat-main,
:root[data-theme="light"] .sidebar-menu,
:root[data-theme="light"] .right-info-panel {
  --chat-muted-readable: #475569;
}

.chat-header-status,
.room-sub,
.msg-sender,
.presence-label,
.section-header,
.chat-input::placeholder,
.msg-search-box::placeholder {
  color: var(--chat-muted-readable, var(--text-sub)) !important;
}

/* Zalo-like composer: clean toolbar, compact icon buttons, soft surfaces. */
.chat-input-zone {
  background: var(--bg-header) !important;
  border-top: 1px solid var(--border-color) !important;
}

.zalo-toolbar {
  min-height: 42px !important;
  padding: 5px 14px !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent !important;
}

.z-tool-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  color: var(--chat-muted-readable, var(--text-sub)) !important;
  background: transparent !important;
  transition: background .16s ease, color .16s ease, transform .12s ease !important;
}

.z-tool-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor;
  fill: currentColor;
}

.z-tool-icon:hover,
.z-tool-icon:focus-visible {
  color: var(--text-main) !important;
  background: var(--hover-bg) !important;
  transform: none !important;
  outline: none !important;
}

.zalo-input-area {
  gap: 8px !important;
  padding: 8px 12px !important;
  align-items: center !important;
  background: transparent !important;
}

.zalo-input-box {
  min-height: 44px !important;
  border-radius: 22px !important;
  border: 1px solid var(--border-color) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
  padding: 2px 12px !important;
}

.chat-input {
  min-height: 40px !important;
  padding: 9px 10px !important;
  border-radius: 20px !important;
  font-family: var(--chat-font-ui) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #0f172a !important;
  background: transparent !important;
}

:root[data-theme="dark"] .zalo-input-box {
  background: #fff !important;
  border-color: #d7dee8 !important;
}

:root[data-theme="dark"] .chat-input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: var(--primary) !important;
}

:root[data-theme="light"] .zalo-input-box {
  background: #fff !important;
}

.send-submit-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) .25, transparent) !important;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease !important;
}
.send-submit-btn:hover,
.send-submit-btn:focus-visible {
  background: color-mix(in srgb, var(--primary) 85%, #000) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) .30, transparent) !important;
  outline: none !important;
}
.send-submit-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Search field must start clean; do not visually resemble an Admin filter. */
.msg-search-box {
  font-family: var(--chat-font-ui) !important;
  font-size: 12px !important;
}

/* Mobile keeps the same visual language without changing the app shell geometry. */
@media (max-width: 767px) {
  .zalo-toolbar { padding: 4px 8px !important; min-height: 40px !important; gap: 2px !important; }
  .z-tool-icon { width: 34px !important; height: 34px !important; }
  .zalo-input-area { padding: 7px 8px !important; gap: 7px !important; }
  .zalo-input-box { min-height: 44px !important; border-radius: 22px !important; }
  .chat-input { font-size: 16px !important; min-height: 40px !important; }
  .send-submit-btn { width: 42px !important; height: 42px !important; min-width: 42px !important; }
}