/* Light-theme safety net: loaded last so text stays visible on every page.
   Media screens (calls, camera, live, video players) intentionally stay dark. */
html, body { color:#172033; }

/* Form fields: dark text, readable placeholders */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not(.kite-live-modal *):not(#call-container *):not(.kite-camera-modal *),
textarea:not(.kite-live-modal *):not(#call-container *):not(.kite-camera-modal *),
select:not(.kite-live-modal *):not(#call-container *):not(.kite-camera-modal *) {
  color:#172033 !important;
  caret-color:#172033;
}
input::placeholder, textarea::placeholder { color:#7a879c !important; opacity:1; }
.kite-live-modal input::placeholder, #call-container input::placeholder, .kite-camera-modal input::placeholder { color:rgba(255,255,255,.7) !important; }
select option { color:#172033; background:#fff; }

/* Muted / helper texts that were pale-on-dark */
.group-section-label, .status-empty, .status-gallery-empty,
.profile-content-loading, #profile-container #profile-status, #profile-status-text { color:#5b6780 !important; opacity:1 !important; }

/* ---- Text that was white-on-translucent (invisible on light surfaces) ---- */
html[data-theme] .top-card,
html[data-theme] #contacts,
html[data-theme] #messages,
html[data-theme] #private-messages,
html[data-theme] #contact-list.contacts-page-list li,
html[data-theme] .contacts-tab:not(.active),
html[data-theme] .chat-history-content,
html[data-theme] .group-selected-chip,
html[data-theme] .status-upload-indicator,
html[data-theme] #status-upload-indicator,
html[data-theme] #profile-container .status-top-link,
html[data-theme] .reels-vol-row { color:#172033 !important; }
html[data-theme] .group-selected-chip { color:#0f6a3f !important; }

/* Inputs / textareas inside every page */
html[data-theme] #login-container input,
html[data-theme] #login-container select,
html[data-theme] #otp-section input,
html[data-theme] textarea#message-input,
html[data-theme] textarea#private-message-input,
html[data-theme] #kite-ai-image-prompt,
html[data-theme] #contacts-search,
html[data-theme] .search-row input,
html[data-theme] .kite-settings-select,
html[data-theme] .kite-pc-input,
html[data-theme] .group-field,
html[data-theme] .group-search,
html[data-theme] .group-composer textarea,
html[data-theme] .reels-comment-input-row input,
html[data-theme] .reels-field input,
html[data-theme] .status-composer-input,
html[data-theme] #status-text-input {
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  caret-color:#172033 !important;
}

/* Pale placeholder/helper labels on light backgrounds */
html[data-theme] .contacts-tab:not(.active),
html[data-theme] .search-row .media-tab:not(.active) { color:#fff !important; }

/* Reels bottom sheets / profile / composer are light pages (the video feed itself stays dark) */
#reels-overlay .reels-sheet,
#reels-overlay .reels-sheet .reels-sheet-header,
#reels-overlay .reels-sheet .reels-sheet-header strong,
#reels-overlay .reels-sheet .reels-field label,
#reels-overlay .reels-sheet .reels-comment-text,
#reels-overlay .reels-sheet .reels-comment-user { color:#172033; }
#reels-overlay .reels-sheet .reels-source-hint,
#reels-overlay .reels-sheet small { color:#5b6780; }

/* ---- Header: Kiters title, notification bell and menu (☰) use the theme colour ---- */
html[data-theme] #chat-header .kite-brand,
html[data-theme] #login-container h1 {
  background-image: linear-gradient(90deg, var(--kite-accent), var(--kite-accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
html[data-theme] #chat-header #notif-btn,
html[data-theme] #chat-header .kite-top-notification,
html[data-theme] #chat-header #logoutBtn,
html[data-theme] #chat-header .kite-more-top-left,
html[data-theme] .kite-main-header .kite-more-top-left {
  background: linear-gradient(135deg, var(--kite-accent), var(--kite-accent2)) !important;
  background-color: var(--kite-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kite-accent) 32%, transparent) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme] #chat-header #notif-btn i,
html[data-theme] #chat-header #logoutBtn i,
html[data-theme] #chat-header .kite-more-top-left i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}
html[data-theme] #chat-header #notif-btn::before,
html[data-theme] #chat-header #notif-btn::after,
html[data-theme] #chat-header .kite-more-top-left::before,
html[data-theme] #chat-header .kite-more-top-left::after { color:#fff !important; }
html[data-theme] #chat-header #notif-btn,
html[data-theme] #chat-header #logoutBtn,
html[data-theme] #chat-header .kite-more-top-left { min-width:36px !important; min-height:36px !important; border-radius:12px !important; }
html[data-theme] #chat-header #notif-btn i,
html[data-theme] #chat-header #logoutBtn i { font-size:16px !important; display:inline-block !important; }