/* Floating toggle button */
.sk-wa-widget-toggle {
   cursor: pointer;
   position: fixed;
   z-index: 9000;
   right: 20px;
   bottom: 20px;
   display: flex;
   justify-content: center;
   width: 56px;
   height: 56px;
   border: none;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
   border-radius: 50%;
   align-items: center;
   font-size: 28px;
}

.sk-wa-widget-toggle--left {
   right: auto;
   left: 20px;
}

.sk-wa-widget-toggle::after {
   content: '';
   display: block;
   width: 32px;
   height: 32px;
   background: url('/Apps/WhatsAppWidget/Images/whatsapp.svg') no-repeat;
}

/* Panel container */
.sk-wa-widget-panel {
   /* User variables */
   --wallpaper-color: #ece5dd;
   --chat-color: #d7e8bf;

   /* Theme variables */
   --color: rgba(68, 68, 68, 1);
   --shadow: rgba(0, 0, 0, 0.15);
   --header-bg: rgba(255, 255, 255, 1);
   --header-shadow: rgba(0, 0, 0, 0.05);
   --header-img: url('/Apps/WhatsAppWidget/Images/close.svg');
   --avatar-bg: rgba(217, 217, 217, 1);
   --message-bg: rgba(255, 255, 255, 1);
   --footer-bg: rgba(255, 255, 255, 1);
   --footer-shadow: rgba(0, 0, 0, 0.1);
   --btn-bg: rgba(25, 145, 83, 1);

   position: fixed;
   z-index: 9000;
   right: 20px;
   bottom: 20px;
   overflow: hidden;
   display: flex;
   width: 400px;
   height: 500px;
   background: var(--wallpaper-color);
   color: var(--color);
   flex-direction: column;
   box-shadow: 0px 2px 6px 0px var(--shadow);
   border-radius: 24px;

   font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
}

.sk-wa-space-for-panel .sk-wa-widget-panel {
   right: 430px;
}

.sk-wa-widget-panel.sk-wa-theme-dark {
   /* User variables */
   --wallpaper-color: #161717;
   --chat-color: #0a4636;

   /* Theme variables */
   --color: #fafafa;
   --shadow: rgba(0, 0, 0, 0.15);
   --header-bg: #161717;
   --header-shadow: rgba(0, 0, 0, 0.05);
   --avatar-bg: #242626;
   --message-bg: #242626;
   --footer-bg: rgba(255, 255, 255, 1);
   --footer-shadow: rgba(0, 0, 0, 0.1);
   --btn-bg: rgba(25, 145, 83, 1);
   --header-img: url('/Apps/WhatsAppWidget/Images/close-white.svg');
}

.sk-wa-widget-panel--left {
   right: auto;
   left: 20px;
}

/* Header */
.sk-wa-widget-header {
   display: flex;
   padding: 26px;
   background: var(--header-bg);
   align-items: center;
   box-shadow: 0px 2px 6px 0px var(--header-shadow);
}

.sk-wa-widget-avatar {
   overflow: hidden;
   display: flex;
   justify-content: center;
   width: 24px;
   height: 24px;
   margin-right: 8px;
   background: var(--avatar-bg);
   border-radius: 8px;
   align-items: center;
   font-weight: 600;
}

.sk-wa-widget-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sk-wa-widget-close {
   margin-left: auto;
}

.sk-wa-widget-close::after {
   content: '';
   display: block;
   width: 12px;
   height: 12px;
   background: var(--header-img) no-repeat;
}

/* Body */
.sk-wa-widget-body {
   display: flex;
   gap: 8px;
   padding: 16px;
   flex-direction: column;
}

.sk-wa-widget-message {
   width: 287px;
   padding: 16px 8px;
   background: var(--message-bg);
   min-width: 240px;
   font-size: 14px;
   border-radius: 16px;
   align-content: center;
}

.sk-wa-widget-message-outgoing {
   margin-left: auto;
   background: var(--chat-color);
}

/* Footer (input + button) */
.sk-wa-widget-footer {
   position: relative;
   display: flex;
   gap: 12px;
   width: 367px;
   height: 48px;
   margin: auto 16px 10px;
   background: var(--footer-bg);
   box-shadow: 0px 2px 6px 0px var(--footer-shadow);
   border-radius: 34px;
}

.sk-wa-widget-input {
   width: calc(100% - 40px);
   padding: 0 8px;
   border: none;
   background: transparent;
}

.sk-wa-widget-button {
   position: absolute;
   right: 8px;
   width: 36px;
   height: 36px;
   background: var(--btn-bg);
   border-radius: 50%;
   align-self: anchor-center;
   justify-items: center;
   cursor: pointer;
}

.sk-wa-widget-input[disabled],
.sk-wa-widget-button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
}

.sk-wa-widget-button::after {
   content: '';
   display: block;
   width: 18px;
   height: 16.5px;
   background: url('/Apps/WhatsAppWidget/Images/arrow.svg') no-repeat;
}

/* ===== Animations for toggle button ===== */

.sk-wa-widget-toggle {
   /* animation base */
   opacity: 1;
   transform: translateY(0) scale(1);
   visibility: visible;

   transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
}

.sk-wa-widget-toggle--visible {
   opacity: 1;
   transform: translateY(0) scale(1);
   visibility: visible;
   pointer-events: auto;
}

.sk-wa-widget-toggle--hidden {
   opacity: 0;
   transform: translateY(16px) scale(0.9);
   visibility: hidden;
   pointer-events: none;
}

/* ===== Animations for chat panel ===== */

.sk-wa-widget-panel {
   /* animation base */
   opacity: 0;
   transform: translateY(16px) scale(0.96);
   visibility: hidden;
   pointer-events: none;

   transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
}

.sk-wa-widget-panel--visible {
   opacity: 1;
   transform: translateY(0) scale(1);
   visibility: visible;
   pointer-events: auto;
}

.sk-wa-widget-panel--hidden {
   opacity: 0;
   transform: translateY(16px) scale(0.96);
   visibility: hidden;
   pointer-events: none;
}