/*
 * 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%);
  --wa-doodle-tile: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.1'%20stroke-linecap='round'%20opacity='0.045'%3E%3Ccircle%20cx='20'%20cy='24'%20r='6'/%3E%3Cpath%20d='M52%2018c4%200%207%203%207%207s-3%207-7%207-7-3-7-7%203-7%207-7z'/%3E%3Cpath%20d='M90%2012l6%206M96%2012l-6%206'/%3E%3Cpath%20d='M118%2030c6%202%2010%208%208%2014'/%3E%3Cpath%20d='M14%2060c0-6%205-10%2011-10'/%3E%3Ccircle%20cx='60'%20cy='58'%20r='4'/%3E%3Cpath%20d='M100%2054c5%203%205%2010%200%2013s-11-2-9-8'/%3E%3Cpath%20d='M8%2098l7-7M8%2091l7%207'/%3E%3Cpath%20d='M45%2092c5-4%2012-2%2013%204'/%3E%3Ccircle%20cx='88'%20cy='96'%20r='5'/%3E%3Cpath%20d='M122%2088c4%204%202%2011-4%2012'/%3E%3Cpath%20d='M30%20126c0-5%204-9%209-9'/%3E%3Cpath%20d='M68%20122l6%206M74%20122l-6%206'/%3E%3Ccircle%20cx='112'%20cy='124'%20r='4'/%3E%3C/g%3E%3C/svg%3E");
}

* {
  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-doodle-tile),
    var(--wa-app-bg) !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  position: relative;
}

.wa-date-pill {
  background: rgba(24, 34, 41, 0.92) !important;
  color: var(--wa-text-soft) !important;
  letter-spacing: 0.02em;
}

.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;
  }
}