/* wazup additions — appended on top of the untouched template.
   1) component styles for new capabilities (menus, voice notes, reactions...)
   2) light theme: overrides of the template's exact Tailwind color classes
   3) mobile: single-pane behavior like WhatsApp mobile
   The template's own classes and markup are never redefined in dark mode. */

/* ---------- component variables ---------- */
:root {
  --wz-panel: #233138;
  --wz-panel-hover: #182229;
  --wz-menu-text: #e9edef;
  --wz-menu-dim: #8696a0;
  --wz-input-bg: #2a3942;
  --wz-border: rgba(134, 150, 160, 0.15);
  --wz-presence-ring: #111b21;
}
html.wazup-light {
  --wz-panel: #ffffff;
  --wz-panel-hover: #f5f6f6;
  --wz-menu-text: #111b21;
  --wz-menu-dim: #667781;
  --wz-input-bg: #f0f2f5;
  --wz-border: rgba(17, 27, 33, 0.1);
  --wz-presence-ring: #ffffff;
}

/* ---------- layout robustness (same look, guaranteed fit) ---------- */
html, body { height: 100%; }
body { overflow: hidden; }
/* desktop app fills the window edge-to-edge (template had m-5 + calc(100vh-40px) backdrop border) */
#wazup-app { min-height: 0; margin: 0; height: 100vh; height: 100dvh; }
#wazup-rail { overflow-y: auto; overflow-x: hidden; }
#wazup-chatlist { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#wazup-chat-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#wazup-conversation { min-width: 0; }
#wazup-convo-wrap { display: flex; flex-direction: column; height: 100%; min-width: 0; }
#wazup-messages { flex: 1 1 0; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wazup-back { display: none; }

/* thin scrollbars, both themes */
#wazup-messages::-webkit-scrollbar, #wazup-chat-rows::-webkit-scrollbar, .wazup-menu::-webkit-scrollbar { width: 6px; }
#wazup-messages::-webkit-scrollbar-thumb, #wazup-chat-rows::-webkit-scrollbar-thumb, .wazup-menu::-webkit-scrollbar-thumb { background: rgba(134, 150, 160, 0.35); border-radius: 3px; }

/* ---------- avatars / presence ---------- */
.wazup-avatar { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--wz-hue, transparent); }
.wazup-presence { position: absolute; right: 10px; bottom: 10px; width: 12px; height: 12px; border-radius: 50%; background: #06cf9c; border: 2px solid var(--wz-presence-ring); }

/* ---------- bubbles: wrap, width, extras ---------- */
.wazup-msg { flex-direction: column; align-items: flex-start; max-width: 100%; }
.wazup-msg.justify-end { align-items: flex-end; }
.wazup-bubble { max-width: min(65vw, 520px); overflow-wrap: anywhere; padding-right: 4rem; }
.wazup-msg-body { display: block; min-width: 0; }
.wazup-ticks { display: inline-flex; margin-left: 3px; }
.wazup-mention { color: #00a884; background: rgba(0, 168, 132, 0.14); border-radius: 3px; padding: 0 2px; }

/* quoted reply inside a bubble + live reply bar above the composer */
.wazup-quote { border-left: 4px solid #00a884; background: rgba(17, 27, 33, 0.35); border-radius: 4px; padding: 3px 7px; margin-bottom: 3px; max-width: 300px; }
.wazup-quote-name { color: #00a884; font-size: 12.5px; font-weight: 600; }
.wazup-quote-text { color: var(--wz-menu-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wazup-replybar { flex-basis: 100%; order: -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wazup-replybar .wazup-quote { flex: 1 1 auto; margin: 0; }
.wazup-reply-x { color: var(--wz-menu-dim); background: none; border: none; font-size: 15px; cursor: pointer; padding: 6px; }

/* hover actions on a bubble — anchored to the bubble itself (WHA-208), hang just outside its edge */
.wazup-msg-actions { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; right: -68px; }
.wazup-msg.justify-end .wazup-msg-actions { right: auto; left: -68px; }
.wazup-msg-btn { display: flex; padding: 5px; border-radius: 9999px; color: var(--wz-menu-dim); background: var(--wz-panel); border: 1px solid var(--wz-border); cursor: pointer; }

/* reactions — circular chips hugging the bubble's lower corner, WhatsApp-style (WHA-207) */
.wazup-reactions { display: flex; gap: 4px; margin-top: -13px; position: relative; z-index: 1; flex-wrap: wrap; }
.wazup-msg:not(.justify-end) .wazup-reactions { margin-left: 12px; }
.wazup-msg.justify-end .wazup-reactions { margin-right: 70px; } /* WHA-231: clear the timestamp + ticks zone (~60px) + gap */
.wazup-react-chip { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; background: var(--wz-panel); border: 1px solid var(--wz-border); color: var(--wz-menu-text); box-shadow: 0 1px 2px rgba(11, 20, 26, 0.3); cursor: default; padding: 0; position: relative; }
.wazup-react-mine { border-color: #00a884; }
.wazup-react-count { position: absolute; bottom: -3px; right: -4px; background: #00a884; color: #111b21; font-size: 9px; font-weight: 700; font-style: normal; min-width: 13px; height: 13px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; }

/* selected conversation stays highlighted in the chat list (WHA-215) */
#wazup-chat-rows .wazup-row.wazup-selected { background: #2a3942; }
html.wazup-light #wazup-chat-rows .wazup-row.wazup-selected { background: #f0f2f5; }

/* row controls: speaker + star toggles (WHA-221/222) */
.wazup-row-btn { display: flex; padding: 2px; background: none; border: none; color: #8696a0; cursor: pointer; border-radius: 6px; }
.wazup-row-btn:hover { color: #e9edef; }
html.wazup-light .wazup-row-btn:hover { color: #111b21; }
.wazup-row-btn.wazup-star-on:hover { color: #f2b90c; }

/* filter buttons keep a persistent selected state (WHA-216) */
#wazup-filters button.wazup-fsel { color: #00a884; background: #0a332c; }
html.wazup-light #wazup-filters button.wazup-fsel { color: #00a884; background: #d9fdd3; }

/* archived entry: hover + persistent highlight while viewing archived (WHA-217) */
#wazup-archived:hover { background: #202c33; }
html.wazup-light #wazup-archived:hover { background: #f5f6f6; }
#wazup-archived.wazup-archsel { background: #2a3942; }
html.wazup-light #wazup-archived.wazup-archsel { background: #f0f2f5; }

/* emoji quick-react: emojis the human already used get a checked ring (WHA-226) */
.wazup-emoji-quick.wazup-react-on { background: rgba(0, 168, 132, 0.22); box-shadow: inset 0 0 0 2px #00a884; }

/* drag & drop onto the conversation (WHA-225) */
#wazup-messages { position: relative; }
#wazup-messages.wazup-dropping::after {
  content: 'Drop files to send'; position: absolute; inset: 10px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #00a884; border-radius: 12px;
  background: rgba(17, 27, 33, 0.72); color: #00a884; font-size: 15px; pointer-events: none;
}
html.wazup-light #wazup-messages.wazup-dropping::after { background: rgba(239, 234, 226, 0.85); }

/* settings (WHA-223): lives INSIDE the existing panes - rail stays, same pane dimensions as chat */
#wazup-app { position: relative; }
#wazup-set-nav-pane, #wazup-set-content-pane { display: none; }
body.wazup-settings-open #wazup-chatlist > :not(#wazup-set-nav-pane) { display: none !important; }
body.wazup-settings-open #wazup-set-nav-pane { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
body.wazup-settings-open #wazup-convo-wrap > :not(#wazup-set-content-pane) { display: none !important; }
body.wazup-settings-open #wazup-set-content-pane { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.wazup-set-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-top: 4px; }
/* WHA-232: settings entries as contact-row blocks - same height, floating icons (no circles) */
#wazup-set-nav-pane .wazup-set-item {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 16px; margin: 0 12px; border-radius: 8px;
  color: var(--wz-menu-text); cursor: pointer; font-size: 16px;
  min-height: 73px; box-sizing: border-box;
}
#wazup-set-nav-pane .wazup-set-item > span:last-child { display: flex; flex-direction: column; gap: 3px; }
#wazup-set-nav-pane .wazup-set-item small { color: var(--wz-menu-dim); font-size: 12.5px; }
#wazup-set-nav-pane .wazup-set-item .wazup-set-ico { width: 28px; display: flex; justify-content: center; }
#wazup-set-nav-pane .wazup-set-item .wazup-set-ico svg { width: 24px; height: 24px; }
#wazup-set-nav-pane .wazup-set-item:hover { background: var(--wz-panel-hover); }
#wazup-set-nav-pane .wazup-set-item.wazup-set-active { background: var(--wz-panel-hover); color: #00a884; }
#wazup-set-nav-pane .wazup-set-item svg { flex: 0 0 auto; color: inherit; }
.wazup-set-build { margin-top: auto; text-align: center; font-size: 10px; color: var(--wz-menu-dim); padding: 10px 0; }
#wazup-set-content-pane { color: var(--wz-menu-text); }
#wazup-set-content-head { display: none; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: 17px; }
.wazup-set-back { display: none; background: none; border: none; color: var(--wz-menu-dim); cursor: pointer; padding: 4px; }
#wazup-set-content { flex: 1 1 0; min-height: 0; overflow: auto; padding: 20px 24px; color: var(--wz-menu-text); }
#wazup-set-content h2 { margin: 0 0 12px; font-size: 18px; }
#wazup-set-content iframe { width: 100%; height: calc(100% - 52px); border: 0; border-radius: 8px; background: #fff; min-height: 420px; }
.wazup-set-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 8px; font-size: 14px; color: var(--wz-menu-text); }
.wazup-set-row:hover { background: var(--wz-panel-hover); }
.wazup-set-row .grow { flex: 1; }
.wazup-set-row .dim { color: var(--wz-menu-dim); font-size: 12.5px; }
.wazup-set-kbd { font-family: ui-monospace, monospace; font-size: 12px; background: var(--wz-input-bg); color: var(--wz-menu-text); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 14px; }

/* ============================================================
   LIGHT THEME — overrides of the template's own color classes
   ============================================================ */
html.wazup-light .bg-\[\#262524\] { background: #d1d7db; }
html.wazup-light .bg-\[\#202c33\] { background: #f0f2f5; }
html.wazup-light .bg-\[\#111B21\] { background: #ffffff; }
html.wazup-light #wazup-messages.bg-\[\#111B21\] { background: #efeae2; }
html.wazup-light #wazup-messages .bg-\[\#202c33\] { background: #ffffff; }
html.wazup-light .hover\:bg-\[\#202c33\]:hover { background: #f5f6f6; }
html.wazup-light .bg-\[\#2a3942\] { background: #ffffff; }
html.wazup-light #wazup-composer { background: #f0f2f5; }
html.wazup-light .bg-\[\#005c4b\] { background: #d9fdd3; }
html.wazup-light .bg-\[\#182229\] { background: #ffffff; }
html.wazup-light .bg-\[\#00a884\] { background: #00a884; }
html.wazup-light .focus\:bg-\[\#0a332c\]:focus { background: #d9fdd3; }
html.wazup-light .active\:bg-\[\#ffffff1a\]:active, html.wazup-light .focus\:bg-\[\#ffffff1a\]:focus { background: rgba(17, 27, 33, 0.07); }

html.wazup-light .text-\[\#e9edef\] { color: #111b21; }
html.wazup-light .text-\[\#aebac1\] { color: #54656f; }
html.wazup-light .text-\[\#8696a0\] { color: #667781; }
html.wazup-light .text-\[\#fff9\] { color: rgba(17, 27, 33, 0.45); }
/* the template ships text-[111b21] (missing #, generates no rule); pin the badge text */
.text-\[111b21\] { color: #111b21; }

html.wazup-light .border-\[\#8696a026\], html.wazup-light .border-r-\[\#8696a026\],
html.wazup-light .border-l-\[\#8696a026\], html.wazup-light .border-t-\[\#8696a026\] { border-color: #e9edef; }

html.wazup-light #wazup-chat-header { box-shadow: 0 1px 3px rgba(11, 20, 26, 0.08) !important; }
html.wazup-light .wazup-bubble { box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important; }
html.wazup-light .wazup-quote { background: rgba(17, 27, 33, 0.06); }
html.wazup-light .wazup-quote-text { color: #667781; }

/* ============================================================
   MOBILE — one pane at a time, like WhatsApp mobile;
   the side rail becomes a thumb-reachable bottom nav bar (WHA-209)
   ============================================================ */
@media (max-width: 768px) {
  #wazup-app { grid-template-columns: 1fr; margin: 0; height: 100dvh; padding-bottom: 56px; }
  body { margin: 0; }

  /* rail -> bottom navigation bar (list view only) */
  #wazup-rail {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 50;
    background: #202c33; border-top: 1px solid rgba(134, 150, 160, 0.2); overflow: visible;
  }
  #wazup-rail > div {
    display: flex; flex-direction: row !important; align-items: center; justify-content: space-around;
    height: 56px; padding: 0 4px !important; margin: 0 !important; gap: 0 !important;
  }
  #wazup-rail > div > div { flex-direction: row !important; align-items: center; gap: 4px !important; margin: 0 !important; }
  html.wazup-light #wazup-rail { background: #ffffff; border-top: 1px solid #e9edef; }

  body.wazup-chat-open #wazup-rail { display: none; }
  #wazup-conversation { display: none; }
  body.wazup-chat-open #wazup-chatlist { display: none; }
  body.wazup-chat-open #wazup-conversation { display: flex; }
  .wazup-back { display: inline-flex; }
  .wazup-bubble { max-width: 82vw; }
  .wazup-media-img { max-width: 74vw; }
  #wazup-composer { padding: 8px; }
  #wazup-composer .mx-3 { margin-left: 2px; margin-right: 2px; }
  /* WHA-224: touch screens have no hover — actions stay visible OUTSIDE the bubble
     (left of sender messages, right of your own) so they never cover text */
  #wazup-messages .wazup-msg-actions {
    right: 100%; left: auto; opacity: 1;
    flex-direction: column; gap: 2px; width: 18px;
  }
  #wazup-messages .wazup-msg.justify-end .wazup-msg-actions { left: 100%; right: auto; }
  .wazup-msg-btn { padding: 2px; }
  .wazup-msg-btn svg { width: 13px; height: 13px; }

  /* WHA-223 settings: two-screen via the existing panes */
  body.wazup-settings-open #wazup-conversation { display: none; }
  body.wazup-settings-open.wazup-set-detail #wazup-chatlist { display: none; }
  body.wazup-settings-open.wazup-set-detail #wazup-conversation { display: flex; }
  body.wazup-settings-open.wazup-set-detail #wazup-set-content-head { display: flex; }
  body.wazup-settings-open.wazup-set-detail .wazup-set-back { display: inline-flex; }

  /* WHA-220: chat-list header controls stay on one line */
  #wazup-chatlist .flex.items-center.justify-between > div { flex-shrink: 0; }
}

/* composer: voice recording bar - hidden by default, themed, only while recording (WHA-227) */
.wazup-recbar { display: none; }
#wazup-composer.wazup-recording > *:not(.wazup-recbar):not(.wazup-replybar) { display: none !important; }
#wazup-composer.wazup-recording .wazup-recbar { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; padding: 4px 8px; }
.wazup-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #f15c6d; animation: wz-pulse 1.1s ease-in-out infinite; }
@keyframes wz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.wazup-rec-time { font-size: 13px; color: var(--wz-menu-text); font-variant-numeric: tabular-nums; }
.wazup-rec-hint { color: var(--wz-menu-dim); font-size: 12.5px; flex: 1; }
.wazup-rec-cancel, .wazup-rec-send { display: flex; padding: 8px; border-radius: 9999px; background: none; border: none; cursor: pointer; color: var(--wz-menu-dim); }
.wazup-rec-send { color: #00a884; }

/* profile picture (WHA-230) */
.wazup-avatar-img { width: 100%; height: auto; border-radius: 50%; object-fit: cover; aspect-ratio: 1; display: block; }

/* MCP tools list (WHA-229) */
.wazup-mcp-tools { margin: 0 0 14px; }

/* voice notes (restored - block was lost in a refactor) */
.wazup-audio { display: flex; align-items: center; gap: 8px; min-width: 220px; padding: 2px 0; }
.wazup-audio-play { display: flex; padding: 6px; border-radius: 9999px; color: var(--wz-menu-dim); background: none; border: none; cursor: pointer; }
.wazup-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; }
.wazup-wave i { display: inline-block; width: 2px; border-radius: 1px; background: rgba(134, 150, 160, 0.55); }
.wazup-wave-fill { position: absolute; inset: 0; width: 0%; overflow: hidden; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.wazup-wave-fill i { background: #00a884; flex: 0 0 auto; }
.wazup-audio-time { font-size: 11px; color: var(--wz-menu-dim); min-width: 34px; text-align: right; }
.wazup-transcript { color: var(--wz-menu-dim); font-size: 12px; font-style: italic; margin-top: 3px; max-width: 280px; }

/* media / files (restored) */
.wazup-media-img { display: block; max-width: min(320px, 60vw); border-radius: 8px; }
.wazup-file { display: flex; align-items: center; gap: 8px; min-width: 210px; padding: 3px 2px; color: inherit; text-decoration: none; border-radius: 6px; }
.wazup-file:hover { background: rgba(134, 150, 160, 0.12); }
.wazup-file-meta { min-width: 0; }
.wazup-file-name { display: block; font-size: 13px; overflow-wrap: anywhere; }
.wazup-file-size { display: block; font-size: 11px; color: var(--wz-menu-dim); }
.wazup-file svg { color: #7f66ff; flex: 0 0 auto; }

/* popups (restored) */
.wazup-menu-wide { min-width: 260px; }
.wazup-menu-item { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.wazup-menu-item:hover { background: var(--wz-panel-hover); }
.wazup-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.wazup-emoji-grid button { font-size: 19px; padding: 4px; border-radius: 6px; background: none; border: none; cursor: pointer; }
.wazup-emoji-grid button:hover { background: var(--wz-panel-hover); }
.wazup-emoji-quick { font-size: 22px; padding: 6px 8px; background: none; border: none; cursor: pointer; border-radius: 8px; }
.wazup-form { padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.wazup-input-sm { background: var(--wz-input-bg); color: var(--wz-menu-text); border: none; outline: none; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; }
.wazup-input-sm::placeholder { color: var(--wz-menu-dim); }
.wazup-group-members { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; font-size: 13.5px; }
.wazup-group-members label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wazup-btn { background: #00a884; color: #111b21; border: none; border-radius: 9999px; padding: 8px 0; font-weight: 600; font-size: 13px; cursor: pointer; }
.wazup-btn:hover { filter: brightness(1.07); }

/* rail nav: persistent highlight on the active section's button (WHA-233) */
#wazup-rail button.wazup-nav-active { background: rgba(255, 255, 255, 0.14); }
html.wazup-light #wazup-rail button.wazup-nav-active { background: rgba(17, 27, 33, 0.09); }