/* ==========================================================================
   Zulu Web - Master CSS Design Tokens & Dark/Light Theme System
   Pixel-perfect match with mobile app exact color palette & design tokens
   ========================================================================== */

:root {
  /* ================= LIGHT THEME ================= */
  --bg-scaffold: #F4F5F6;
  --bg-surface: #FFFFFF;
  --bg-header: #006B3C;
  --border-subtle: #E0E0E0;
  --border-card: #E5E7EB;

  /* Typography */
  --text-primary: #1E1E1E;
  --text-secondary: #6B7280;
  --text-muted: #8596A0;

  /* Accents & Brand */
  --brand-primary: #006B3C;
  --brand-secondary: #D4A017;
  --accent-emerald: #00A884;
  --accent-danger: #E90B41;

  /* Chat Screen */
  --chat-bg: #E8DED5;
  --chat-date-chip-bg: #FFFFFF;
  --chat-date-chip-text: #006B3C;

  /* Message Bubbles */
  --bubble-sent-bg: #BFE8AC;
  --bubble-sent-text: #006B3C;
  --bubble-sent-time: #4A6B48;
  --bubble-sent-tick: #00A884;
  --bubble-received-bg: #FFFFFF;
  --bubble-received-text: #1E1E1E;
  --bubble-received-time: #8596A0;
  --bubble-link-color: #009688;

  /* Quoted / Replied Message */
  --reply-bg: rgba(0, 0, 0, 0.05);
  --reply-border: #006B3C;
  --reply-title: #006B3C;
  --reply-text: #4A6B48;

  /* Reaction Badge Pill */
  --reaction-pill-bg: #FFFFFF;
  --reaction-pill-border: #E0E0E0;

  /* Inputs & Forms */
  --input-bg: #FFFFFF;
  --input-border: #E0E0E0;
  --input-text: #1E1E1E;
  --input-placeholder: #8596A0;

  /* Overlays / Popups */
  --dialog-bg: #FFFFFF;
  --dropdown-bg: #FFFFFF;
  --dropdown-hover: #F4F5F6;
  --active-item-bg: rgba(0, 107, 60, 0.12);
  --scrollbar-thumb: #D1D5DB;
  --scrollbar-track: #F4F5F6;

  /* Legacy & Helper Aliases */
  --bg-main: var(--bg-scaffold);
  --border-color: var(--border-subtle);
  --accent: var(--brand-primary);
  --accent-secondary: var(--brand-secondary);
  --item-hover: rgba(0, 107, 60, 0.08);
  --item-selected: var(--active-item-bg);
}

[data-theme="dark"], .dark {
  /* ================= DARK THEME (EXACT MOBILE TOKENS) ================= */
  --bg-scaffold: #0B100C;
  --bg-surface: #121D17;
  --bg-header: #0B100C;
  --border-subtle: #1B4D31;
  --border-card: #1B4D31;

  /* Typography */
  --text-primary: #FFFFFF;
  --text-secondary: #D0D5DD;
  --text-muted: #8FA396;

  /* Accents & Brand */
  --brand-primary: #006B3C;
  --brand-secondary: #00A884;
  --accent-emerald: #00A884;
  --accent-danger: #E90B41;

  /* Chat Screen */
  --chat-bg: #090E0A;
  --chat-date-chip-bg: #121D17;
  --chat-date-chip-text: #D0D5DD;

  /* Message Bubbles */
  --bubble-sent-bg: #004D28;
  --bubble-sent-text: #FFFFFF;
  --bubble-sent-time: #8FA396;
  --bubble-sent-tick: #00A884;
  --bubble-received-bg: #1B2820;
  --bubble-received-text: #FFFFFF;
  --bubble-received-time: #8FA396;
  --bubble-link-color: #00A884;

  /* Quoted / Replied Message */
  --reply-bg: rgba(0, 0, 0, 0.35);
  --reply-border: #00A884;
  --reply-title: #00A884;
  --reply-text: #D0D5DD;

  /* Reaction Badge Pill */
  --reaction-pill-bg: #121D17;
  --reaction-pill-border: #1B4D31;

  /* Inputs & Forms */
  --input-bg: #121D17;
  --input-border: #1B4D31;
  --input-text: #FFFFFF;
  --input-placeholder: #8FA396;

  /* Overlays / Popups */
  --dialog-bg: #121D17;
  --dropdown-bg: #121D17;
  --dropdown-hover: rgba(0, 168, 132, 0.12);
  --active-item-bg: rgba(27, 77, 49, 0.4);
  --scrollbar-thumb: #1B4D31;
  --scrollbar-track: #0B100C;

  /* Legacy & Helper Aliases */
  --bg-main: var(--bg-scaffold);
  --border-color: var(--border-subtle);
  --accent: var(--accent-emerald);
  --accent-secondary: var(--accent-emerald);
  --item-hover: rgba(0, 168, 132, 0.08);
  --item-selected: var(--active-item-bg);
}

/* ==========================================================================
   Base DOM Styles & Global Reset
   ========================================================================== */
html, body {
  background-color: var(--bg-scaffold);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

flt-glass-pane, flutter-view, canvas {
  background-color: transparent !important;
}

/* ==========================================================================
   Custom Scrollbars
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ==========================================================================
   1. Header & Navigation Bars
   ========================================================================== */
.zulu-header, .app-header, .top-bar, .navbar {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary);
}

.header-title, .user-name, .contact-header-name {
  color: #FFFFFF !important;
  font-weight: 600;
}

.header-subtitle, .online-status, .typing-status {
  color: var(--accent-emerald) !important;
  font-size: 12px;
}

.header-icon, .action-icon {
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.header-icon:hover, .action-icon:hover {
  color: var(--accent-emerald) !important;
  transform: scale(1.05);
}

/* ==========================================================================
   2. Sidebar & Recent Chats List
   ========================================================================== */
.sidebar, .sidebar-container, .nav-rail-sidebar {
  background-color: var(--bg-surface) !important;
  border-right: 1px solid var(--border-subtle);
}

.chat-list-item, .contact-list-tile {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.15s ease;
}

.chat-list-item:hover, .contact-list-tile:hover {
  background-color: var(--item-hover) !important;
}

.chat-list-item.active, .chat-list-item.selected, .contact-list-tile.selected {
  background-color: var(--active-item-bg) !important;
  border-left: 3px solid var(--accent-emerald) !important;
}

.chat-item-name, .contact-item-name {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.chat-item-last-msg, .chat-item-preview {
  color: var(--text-muted) !important;
}

.chat-item-timestamp, .msg-timestamp {
  color: var(--text-muted) !important;
}

.unread-count-badge {
  background-color: var(--accent-emerald) !important;
  color: #0B100C !important;
  font-weight: bold;
  border-radius: 9999px;
  font-size: 11px;
  padding: 2px 7px;
}

.list-divider {
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ==========================================================================
   3. Chat Window & Conversation View
   ========================================================================== */
.chat-screen-container, .chat-window, .conversation-area {
  background-color: var(--chat-bg) !important;
}

.chat-date-chip, .date-divider-chip {
  background-color: var(--chat-date-chip-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--chat-date-chip-text) !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
}

.scroll-to-bottom-fab {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--accent-emerald) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

/* ==========================================================================
   4. Chat Bubbles & Content
   ========================================================================== */
.bubble-sent {
  background-color: var(--bubble-sent-bg) !important;
  color: var(--bubble-sent-text) !important;
}

.bubble-sent .bubble-text {
  color: var(--bubble-sent-text) !important;
}

.bubble-sent .bubble-time {
  color: var(--bubble-sent-time) !important;
}

.bubble-sent .bubble-tick {
  color: var(--bubble-sent-tick) !important;
}

.bubble-received {
  background-color: var(--bubble-received-bg) !important;
  color: var(--bubble-received-text) !important;
}

.bubble-received .bubble-text {
  color: var(--bubble-received-text) !important;
}

.bubble-received .bubble-time {
  color: var(--bubble-received-time) !important;
}

.group-sender-name {
  color: var(--accent-emerald) !important;
  font-weight: 600;
}

.message-link, .bubble-link {
  color: var(--bubble-link-color) !important;
  text-decoration: none;
}

.message-link:hover, .bubble-link:hover {
  text-decoration: underline;
}

/* Quoted / Reply Container Inside Bubble */
.reply-container, .quoted-message-card {
  background-color: var(--reply-bg) !important;
  border-left: 3px solid var(--reply-border) !important;
  border-radius: 6px;
  padding: 6px 10px;
}

.quoted-sender-name, .reply-title {
  color: var(--reply-title) !important;
  font-weight: 600;
  font-size: 12.5px;
}

.quoted-text-preview, .reply-text {
  color: var(--reply-text) !important;
  font-size: 13px;
}

/* Reaction Emoji Badge Pill */
.reaction-badge-pill, .reaction-pill {
  background-color: var(--reaction-pill-bg) !important;
  border: 1px solid var(--reaction-pill-border) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

/* ==========================================================================
   5. Media & Document Bubbles
   ========================================================================== */
.audio-player-bubble {
  color: var(--text-primary);
}

.audio-play-btn {
  background-color: var(--accent-emerald) !important;
  color: #FFFFFF !important;
  border-radius: 50%;
}

.audio-waveform-active {
  color: var(--accent-emerald) !important;
}

.audio-waveform-inactive {
  color: var(--border-subtle) !important;
}

.audio-duration-text {
  color: var(--text-muted) !important;
  font-size: 11px;
}

.audio-speed-badge {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--accent-emerald) !important;
  font-size: 10px;
  font-weight: bold;
  border-radius: 10px;
}

.document-file-card {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px;
  padding: 8px 12px;
}

.document-file-name {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14px;
}

.document-file-info, .document-file-ext {
  color: var(--text-muted) !important;
  font-size: 11.5px;
}

.document-download-icon {
  color: var(--accent-emerald) !important;
}

.media-caption-text {
  color: #FFFFFF !important;
  font-size: 14px;
}

.media-caption-time {
  color: var(--text-muted) !important;
  font-size: 10px;
}

/* ==========================================================================
   6. Bottom Chat Input Bar & Toolbar
   ========================================================================== */
.bottom-input-bar, .chat-input-container {
  background-color: var(--bg-header) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* Flutter Web internal text editing host and inputs must stay completely transparent & unstyled */
flt-text-editing-host input,
flt-text-editing-host textarea,
flt-glass-pane input,
flt-glass-pane textarea,
flutter-view input,
flutter-view textarea,
input[flt-text-editing-host],
textarea[flt-text-editing-host] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.chat-text-input {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 24px;
}

.chat-text-input:focus {
  border-color: var(--accent-emerald) !important;
  outline: none;
}

.chat-text-input::placeholder {
  color: var(--input-placeholder) !important;
}

.input-action-btn, .toolbar-icon {
  color: var(--text-muted) !important;
  transition: color 0.15s ease;
}

.input-action-btn:hover, .toolbar-icon:hover {
  color: var(--accent-emerald) !important;
}

.send-btn-active {
  background-color: var(--accent-emerald) !important;
  color: #FFFFFF !important;
  border-radius: 50%;
  border: none;
}

.attachment-drawer, .popup-attachment-menu {
  background-color: var(--dropdown-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px;
}

.attachment-drawer-item {
  color: var(--text-primary) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.attachment-drawer-item:hover {
  background-color: var(--dropdown-hover) !important;
  color: var(--accent-emerald) !important;
}

/* ==========================================================================
   7. Modals, Dialogs, Dropdowns & Context Menus
   ========================================================================== */
.zulu-modal, .zulu-dialog, .modal-content {
  background-color: var(--dialog-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px;
}

.modal-header-title, .dialog-title {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.modal-body-text, .dialog-body {
  color: var(--text-secondary) !important;
}

.modal-backdrop-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

.dropdown-menu, .context-menu, .menu-popup {
  background-color: var(--dropdown-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px;
}

.dropdown-item, .context-menu-item {
  color: var(--text-primary) !important;
}

.dropdown-item .icon, .context-menu-item .icon {
  color: var(--text-muted) !important;
}

.dropdown-item:hover, .context-menu-item:hover,
.dropdown-item:focus, .context-menu-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--accent-emerald) !important;
}

.btn-primary {
  background-color: var(--accent-emerald) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background-color: #009677 !important;
}

.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 8px;
}

.btn-danger {
  color: var(--accent-danger) !important;
}

/* ==========================================================================
   8. Form Controls & Settings Toggles
   ========================================================================== */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent-emerald);
  border-color: var(--border-subtle);
}

.switch-toggle-track-active {
  background-color: rgba(0, 168, 132, 0.5) !important;
}

.switch-toggle-thumb-active {
  background-color: var(--accent-emerald) !important;
}

.search-input-field {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.search-input-field::placeholder {
  color: var(--input-placeholder) !important;
}

/* ==========================================================================
   9. Native Picture-in-Picture Dark Theme Styling
   ========================================================================== */
.zp-docpip-container {
  background-color: var(--bg-scaffold) !important;
  color: var(--text-primary) !important;
}

.zp-docpip-header {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}