/* ============================================
   WHATSAPP HYBRID THEME FOR ZULIP
   Mix: Desktop App + Web Interface
   Version: 2.0 - Professional Edition
   ============================================ */

/* === CSS VARIABLES === */
:root {
  /* WhatsApp Dark Mode Colors - Web 2025 Style */
  --wa-bg-dark: #111B21;
  --wa-bg-darker: #0B141A;
  --wa-bg-panel: #202C33;
  --wa-bg-hover: #2A3942;
  --wa-bg-active: #2A3942;
  --wa-bg-sidebar: #111B21;
  
  /* WhatsApp Brand Colors - Official */
  --wa-green-primary: #00A884;
  --wa-green-light: #25D366;
  --wa-green-dark: #075E54;
  --wa-teal: #128C7E;
  --wa-teal-header: #075E54;
  
  /* Chat Bubble Colors */
  --wa-chat-bg: #0B141A;
  --wa-bubble-out: #005C4B;
  --wa-bubble-in: #202C33;
  --wa-bubble-out-light: #DCF8C6;
  --wa-bubble-in-light: #FFFFFF;
  
  /* Text Colors */
  --wa-text-primary: #E9EDEF;
  --wa-text-secondary: #8696A0;
  --wa-text-muted: #667781;
  --wa-text-white: #FFFFFF;
  
  /* Badge Colors - WhatsApp Green */
  --wa-badge-bg: #25D366;
  --wa-badge-text: #FFFFFF;
  
  /* Borders */
  --wa-border: #222D34;
  --wa-border-light: #2A3942;
  --wa-divider: #2A3942;
  
  /* Desktop App specific - wider spacing */
  --sidebar-width: 350px;
  --sidebar-padding: 12px;
  --item-padding-v: 14px;
  --item-padding-h: 16px;
}

/* === GLOBAL STYLES === */
body {
  background: var(--wa-bg-dark) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* === TOP HEADER - Desktop App Style (Thicker, Green Option) === */
.header,
#navbar,
.navbar,
.top_navbar,
#navbar-container,
.navbar-fixed-top,
#top_navbar {
  background: var(--wa-bg-panel) !important;
  border-bottom: 1px solid var(--wa-border) !important;
  box-shadow: none !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
}

/* Header text/icons */
.header *,
.navbar *,
.top_navbar *,
#navbar *,
#top_navbar * {
  color: var(--wa-text-primary) !important;
}

/* === LEFT SIDEBAR - Desktop App Style (Wider, More Padding) === */
#left-sidebar,
.left-sidebar,
.column-left,
#buddy_list_wrapper,
.left_sidebar_menu,
#left_sidebar_scroll_container {
  background: var(--wa-bg-sidebar) !important;
  border-right: 1px solid var(--wa-border) !important;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
}

/* === SEARCH BOX - Desktop App Style === */
#searchbox,
.search_box,
.search-input-container,
#search_query,
.navbar-search input,
.search-box input {
  background: var(--wa-bg-panel) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--wa-text-primary) !important;
  padding: 10px 16px 10px 40px !important;
  margin: var(--sidebar-padding) !important;
  font-size: 15px !important;
  height: 42px !important;
}

#searchbox::placeholder,
.search-input::placeholder,
#search_query::placeholder {
  color: var(--wa-text-muted) !important;
}

/* === SIDEBAR SECTION HEADERS - Desktop Style === */
/* WICHTIG: Section Headers komplett ohne Badges */
h4,
.sidebar-title,
.left-sidebar-title,
.views-label,
.streams_header,
.direct-messages-section-header,
.left_sidebar_menu_header,
#streams_header,
#direct-messages-section-header,
.views-label-container,
.zoom-out-label,
[data-section-header] {
  color: var(--wa-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 20px var(--item-padding-h) 10px var(--item-padding-h) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

/* VERSTECKE alle Badges auf Section Headers KOMPLETT */
h4 .unread_count,
h4 .unread-count,
h4 .unread_mention_info,
.sidebar-title .unread_count,
.views-label .unread_count,
.streams_header .unread_count,
.streams_header .unread_mention_info,
.left_sidebar_menu_header .unread_count,
.direct-messages-section-header .unread_count,
#streams_header .unread_count,
#direct-messages-section-header .unread_count,
.views-label-container .unread_count,
.zoom-out-label .unread_count,
[data-section-header] .unread_count,
.left-sidebar-title .unread_count,
.zoom-out .unread_count {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* === SIDEBAR LIST ITEMS - Desktop App Style (Mehr Padding) === */
.top_left_row,
.narrow-filter,
#stream_filters li,
#direct-messages-list li,
.dm-list-item,
.topic-list-item,
.stream-list-item,
ul.filters li,
.top_left_sidebar .top_left_row,
.zoom-in-hide,
.sidebar-row-container {
  margin: 2px 8px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  transition: background 0.15s ease !important;
}

/* Links/Content inside sidebar items - WhatsApp Desktop Style */
.top_left_row > a,
.narrow-filter > a,
#stream_filters li > a,
#direct-messages-list li > a,
.dm-list-item > a,
ul.filters li > a,
.sidebar-row,
.top_left_row a,
.stream_sidebar_row,
.topic-sidebar-row {
  color: var(--wa-text-primary) !important;
  padding: var(--item-padding-v) var(--item-padding-h) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  min-height: 58px !important;
}

/* Hover state - Desktop Style */
.top_left_row:hover,
.narrow-filter:hover,
#stream_filters li:hover,
#direct-messages-list li:hover,
.dm-list-item:hover,
ul.filters li:hover,
.stream_sidebar_row:hover,
.topic-sidebar-row:hover {
  background: var(--wa-bg-hover) !important;
}

/* Active/Selected state */
.active-filter,
.active-filter > a,
.top_left_row.active,
.narrow-filter.active,
li.active-filter,
.active-sub-filter {
  background: var(--wa-bg-active) !important;
}

/* === UNREAD BADGES - WhatsApp Style KLEINE RUNDE KREISE === */
/* Zuerst ALLE Badges verstecken */
.unread_count,
.unread-count,
span.unread_count,
span.unread-count {
  display: none !important;
}

/* Dann NUR auf List Items mit echtem Inhalt anzeigen */
.top_left_row .unread_count:not(:empty),
.narrow-filter .unread_count:not(:empty),
#stream_filters li .unread_count:not(:empty),
#direct-messages-list li .unread_count:not(:empty),
.dm-list-item .unread_count:not(:empty),
ul.filters li .unread_count:not(:empty),
.topic-list-item .unread_count:not(:empty),
.stream_sidebar_row .unread_count:not(:empty),
.topic-sidebar-row .unread_count:not(:empty),
li[data-stream-id] .unread_count:not(:empty),
.sidebar-row .unread_count:not(:empty) {
  /* Anzeigen */
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  
  /* PERFEKT RUND - WhatsApp Style */
  align-items: center !important;
  justify-content: center !important;
  background: var(--wa-badge-bg) !important;
  color: var(--wa-badge-text) !important;
  
  /* Feste Groesse fuer perfekte Kreise */
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 20px !important;
  max-width: 26px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 10px !important;
  
  /* Positionierung */
  margin-left: auto !important;
  flex-shrink: 0 !important;
  
  /* Text */
  line-height: 20px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  
  /* Keine haesslichen Effekte */
  box-shadow: none !important;
  border: none !important;
  text-shadow: none !important;
}

/* Badge mit nur einer Ziffer - perfekter Kreis */
.unread_count:not(:empty)[data-count="1"],
.unread_count:not(:empty)[data-count="2"],
.unread_count:not(:empty)[data-count="3"],
.unread_count:not(:empty)[data-count="4"],
.unread_count:not(:empty)[data-count="5"],
.unread_count:not(:empty)[data-count="6"],
.unread_count:not(:empty)[data-count="7"],
.unread_count:not(:empty)[data-count="8"],
.unread_count:not(:empty)[data-count="9"] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
}

/* Mention badges komplett verstecken */
.unread_mention_info,
.unread_mention_count,
span.unread_mention_info {
  display: none !important;
}

/* === SIDEBAR ICONS === */
.zulip-icon,
.left-sidebar i,
.left-sidebar svg,
.sidebar-menu-icon,
i.zulip-icon,
.fa,
.fa-solid,
.stream-privacy-type-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  color: var(--wa-text-secondary) !important;
  opacity: 0.9 !important;
  flex-shrink: 0 !important;
}

/* Stream color indicators - kleine Punkte */
.stream_marker,
.stream-sidebar-color,
span.stream_marker {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* === MAIN CHAT AREA - Web Style (kompakt, effizient) === */
.column-middle,
#message-feed-container,
.message-list-container,
#main_div,
.app-main,
#message_view_header,
.message-feed {
  background: var(--wa-chat-bg) !important;
}

/* WhatsApp Wallpaper Pattern - subtle */
.column-middle {
  background-color: var(--wa-chat-bg) !important;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23222D34' fill-opacity='0.25'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
}

/* === MESSAGE BUBBLES - WhatsApp Style === */
.message_row,
.messagebox-content {
  margin: 3px 0 !important;
  padding: 0 60px !important;
}

.message_content,
.messagebox {
  background: var(--wa-bubble-in) !important;
  color: var(--wa-text-primary) !important;
  border-radius: 8px !important;
  padding: 8px 12px 6px 12px !important;
  max-width: 65% !important;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13) !important;
  font-size: 14.2px !important;
  line-height: 1.45 !important;
  position: relative !important;
}

/* Outgoing messages (your own) - Green */
.include-sender .message_content,
.message_row.include-sender .messagebox,
.sent_by_me .message_content {
  background: var(--wa-bubble-out) !important;
  margin-left: auto !important;
  border-radius: 8px 0 8px 8px !important;
}

/* Incoming messages - tail */
.message_content:not(.sent_by_me) {
  border-radius: 0 8px 8px 8px !important;
}

/* Message sender name - WhatsApp colored names */
.sender_name,
.message_sender,
.sender_name-and-status {
  color: var(--wa-green-light) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 3px !important;
}

/* Message timestamp - bottom right like WhatsApp */
.message_time,
.timestamp,
time.message-time {
  color: var(--wa-text-muted) !important;
  font-size: 11px !important;
  opacity: 0.85 !important;
  float: right !important;
  margin-left: 10px !important;
  margin-top: 3px !important;
}

/* === COMPOSE BOX - Web Style (kompakt) === */
#compose,
.compose-box,
#compose-content,
.new_message_box,
#compose_banners {
  background: var(--wa-bg-panel) !important;
  border-top: 1px solid var(--wa-border) !important;
  padding: 10px 16px !important;
}

#compose-textarea,
.compose-textarea,
textarea.new_message_textarea,
#compose_box_input,
.message_comp textarea {
  background: var(--wa-bg-hover) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--wa-text-primary) !important;
  font-size: 15px !important;
  resize: none !important;
  min-height: 44px !important;
  max-height: 120px !important;
}

#compose-textarea::placeholder,
.compose-textarea::placeholder {
  color: var(--wa-text-muted) !important;
}

/* Send button - WhatsApp round green */
.compose_control_button[data-tippy-content*="Send"],
.send-button,
button.compose-send-button,
#compose-send-button,
.zulip-icon-send {
  background: var(--wa-green-primary) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.compose_control_button[data-tippy-content*="Send"]:hover,
.send-button:hover,
#compose-send-button:hover {
  background: var(--wa-green-light) !important;
}

.compose_control_button svg,
.send-button svg,
.send-button i,
#compose-send-button svg {
  color: white !important;
  fill: white !important;
}

/* Andere Compose Buttons */
.compose_control_button:not([data-tippy-content*="Send"]),
.compose_control_button_container button:not(.send-button) {
  background: transparent !important;
  color: var(--wa-text-secondary) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.compose_control_button:not([data-tippy-content*="Send"]):hover {
  background: var(--wa-bg-hover) !important;
}

/* === RIGHT SIDEBAR === */
#right-sidebar,
.column-right,
.right-sidebar-items,
#buddy_list_wrapper_right {
  background: var(--wa-bg-dark) !important;
  border-left: 1px solid var(--wa-border) !important;
}

#right-sidebar *,
.column-right * {
  color: var(--wa-text-primary) !important;
}

/* === DROPDOWNS & MENUS === */
.dropdown-menu,
.popover,
.modal-content,
.overlay-modal,
.typeahead,
.autocomplete-container {
  background: var(--wa-bg-panel) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
}

.dropdown-menu a,
.dropdown-item,
.popover a {
  color: var(--wa-text-primary) !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover {
  background: var(--wa-bg-hover) !important;
}

/* === BUTTONS - General === */
.btn,
button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  font-size: 14px !important;
}

.btn-primary,
button.primary,
.btn-success {
  background: var(--wa-green-primary) !important;
  border: none !important;
  color: white !important;
  padding: 10px 20px !important;
}

.btn-primary:hover,
button.primary:hover {
  background: var(--wa-green-light) !important;
}

/* === SCROLLBARS - Thin WhatsApp style === */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* === INPUT FIELDS === */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--wa-bg-hover) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 8px !important;
  color: var(--wa-text-primary) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--wa-green-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.25) !important;
}

/* === DATE SEPARATORS - WhatsApp style centered pill === */
.date_row,
.recipient_row,
.message-date-divider {
  text-align: center !important;
  margin: 20px 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.date_row span,
.recipient_row_date,
.date-text {
  background: var(--wa-bg-panel) !important;
  color: var(--wa-text-secondary) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* === AVATARS - Round WhatsApp style === */
.avatar,
.user-avatar,
img.avatar,
.message_avatar {
  border-radius: 50% !important;
  width: 45px !important;
  height: 45px !important;
  object-fit: cover !important;
}

/* Smaller avatars in lists */
.dm-list-item .avatar,
.stream_sidebar_row .avatar {
  width: 40px !important;
  height: 40px !important;
}

/* === LINKS === */
a {
  color: var(--wa-green-light) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--wa-green-primary) !important;
  text-decoration: underline !important;
}

/* === CODE BLOCKS === */
code,
pre,
.codehilite {
  background: var(--wa-bg-darker) !important;
  color: var(--wa-text-primary) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 13px !important;
}

pre,
.codehilite pre {
  padding: 14px !important;
  overflow-x: auto !important;
  border: 1px solid var(--wa-border) !important;
}

/* === EMOJI PICKER === */
.emoji-popover,
.emoji-picker,
.emoji-picker-popover {
  background: var(--wa-bg-panel) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 12px !important;
}

/* === TOOLTIPS === */
.tippy-box,
[data-tippy-root],
.tooltip {
  background: var(--wa-bg-panel) !important;
  color: var(--wa-text-primary) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  border: 1px solid var(--wa-border) !important;
}

.tippy-arrow,
.tooltip-arrow {
  color: var(--wa-bg-panel) !important;
}

/* === ALERTS & NOTIFICATIONS === */
.alert,
.alert-info,
.banner,
.home-page-warning,
.compose-banner {
  background: var(--wa-bg-panel) !important;
  border: 1px solid var(--wa-border) !important;
  border-left: 4px solid var(--wa-green-primary) !important;
  color: var(--wa-text-primary) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* === TOPIC/STREAM PILLS === */
.stream-label,
.topic-label,
.pill-label {
  background: var(--wa-bg-panel) !important;
  color: var(--wa-text-secondary) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* === SELECTION === */
::selection {
  background: rgba(37, 211, 102, 0.3) !important;
  color: var(--wa-text-primary) !important;
}

/* === FOCUS STATES === */
*:focus-visible {
  outline: 2px solid var(--wa-green-primary) !important;
  outline-offset: 2px !important;
}

/* === HIDE UNNECESSARY UI ELEMENTS === */
.stream-sidebar-menu-icon.fa-caret-down,
.topic_sidebar_menu_icon,
.stream-sidebar-arrow,
.topic-resolve-icon {
  display: none !important;
}

/* === LOADING STATES === */
.loading-indicator,
.spinner,
.loading_more_messages {
  color: var(--wa-green-primary) !important;
}

/* === UNREAD MARKER LINE === */
.unread-marker,
.unread_marker,
.message_marker {
  background: var(--wa-green-primary) !important;
  height: 2px !important;
}

/* === REACTIONS === */
.message_reaction,
.reaction {
  background: var(--wa-bg-hover) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 12px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.message_reaction:hover {
  background: var(--wa-bg-active) !important;
}

/* === TYPING INDICATOR === */
.typing-indicator,
.typing_notification {
  color: var(--wa-text-muted) !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* === FINAL OVERRIDES FOR BADGE CONSISTENCY === */
/* Nochmal sicherstellen: KEINE Badges auf Headers */
.streams_header,
.direct-messages-section-header,
.left_sidebar_menu_header,
#streams_header,
#direct-messages-section-header {
  & .unread_count,
  & > .unread_count,
  & span.unread_count {
    display: none !important;
  }
}

/* Sidebar Header Rows - komplett badge-frei */
.left-sidebar h4,
#left-sidebar h4,
.left_sidebar_menu h4 {
  & .unread_count {
    display: none !important;
  }
}

/* === END WHATSAPP HYBRID THEME === */