/*
 * SHALUB CRM - WhatsApp Web-inspired skin
 */

:root {
  --wa-app-bg: #0b141a;
  --wa-panel: #111b21;
  --wa-panel-alt: #202c33;
  --wa-border: #2a3942;
  --wa-text: #e9edef;
  --wa-text-soft: #8696a0;
  --wa-text-muted: #667781;
  --wa-accent: #25d366;
  --wa-gold: #c9a646;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  --wa-doodle: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.03) 0, rgba(255,255,255,0) 42%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.025) 0, rgba(255,255,255,0) 38%),
                radial-gradient(circle at 60% 70%, rgba(255,255,255,0.02) 0, rgba(255,255,255,0) 34%);
}

* {
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

#whatsapp-inbox-container {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--wa-app-bg);
}

#wa-inbox-chat-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

#wa-inbox-chat-list::-webkit-scrollbar,
#wa-inbox-messages::-webkit-scrollbar {
  width: 6px;
}

#wa-inbox-chat-list::-webkit-scrollbar-thumb,
#wa-inbox-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}

#wa-inbox-chat-list::-webkit-scrollbar-track,
#wa-inbox-messages::-webkit-scrollbar-track {
  background: transparent;
}

#wa-inbox-messages {
  background:
    linear-gradient(180deg, rgba(11,20,26,0.92), rgba(11,20,26,0.98)),
    var(--wa-doodle),
    var(--wa-app-bg) !important;
  position: relative;
}

.wa-chat-row {
  position: relative;
}

.wa-chat-row::after {
  content: "";
  position: absolute;
  left: 76px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.03);
}

.wa-chat-row:last-child::after {
  display: none;
}

.chat-message {
  display: flex;
}

.chat-message .bubble {
  position: relative;
  max-width: min(720px, 72%);
  padding: 7px 9px 8px;
  border-radius: 7.5px;
  box-shadow: var(--wa-shadow);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--wa-text) !important;
}

.bubble-out {
  background: var(--wa-bubble-out) !important;
  border-top-right-radius: 0 !important;
  margin-left: auto;
}

.bubble-in {
  background: var(--wa-bubble-in) !important;
  border-top-left-radius: 0 !important;
  margin-right: auto;
}

.bubble-out::after,
.bubble-in::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 13px;
}

.bubble-out::after {
  right: -6px;
  background: linear-gradient(135deg, var(--wa-bubble-out) 0 50%, transparent 50% 100%);
}

.bubble-in::after {
  left: -6px;
  background: linear-gradient(225deg, var(--wa-bubble-in) 0 50%, transparent 50% 100%);
}

#wa-inbox-conv-header,
#wa-inbox-input-area {
  backdrop-filter: blur(10px);
}

#wa-inbox-msg-input {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

#wa-inbox-msg-input:focus {
  background: #233138 !important;
}

.wa-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: wa-skeleton-pulse 1.4s infinite linear;
  border-radius: 10px;
}

@keyframes wa-skeleton-pulse {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.wa-audio-wrapper {
  background: rgba(255,255,255,0.04) !important;
}

.btn-ai-magic {
  background: linear-gradient(135deg, #f5d971 0%, #c9a646 100%);
  color: #111b21;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(201, 166, 70, 0.28);
}

.btn-ai-magic:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(201, 166, 70, 0.36);
}

#whatsapp-inbox-container.focus-mode {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: var(--wa-app-bg);
}

.focus-mode #wa-inbox-chat-list {
  width: 90px;
}

.focus-mode #wa-inbox-chat-list .wa-chat-row .flex-1 {
  display: none;
}

.focus-mode #wa-inbox-chat-list .wa-chat-row {
  justify-content: center;
  padding: 16px 0;
}

#wa-canned-menu {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 27, 33, 0.96) !important;
  backdrop-filter: blur(18px);
  max-height: 300px;
  overflow-y: auto;
}

#wa-canned-menu div:hover {
  background: rgba(201, 166, 70, 0.16) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .chat-message .bubble {
    max-width: 90% !important;
  }
  
  #wa-inbox-conv-header {
    height: auto !important;
    padding: 8px 12px !important;
  }
  
  #wa-inbox-input-area {
    padding: 8px !important;
  }
  
  #wa-inbox-msg-input {
    padding: 8px 12px !important;
  }
}