/**
 * TTW Smart Multi-Channel Floating Contact Widget
 * File: assets/css/ttw-widget.css
 * Version: 1.0.0
 * Author: TTW Premium Widgets
 *
 * TABLE OF CONTENTS:
 * 1. CSS Custom Properties (Design Tokens)
 * 2. Dark Mode Variables
 * 3. Base Widget Container
 * 4. Main Floating Button
 * 5. Notification Badge
 * 6. Pulse Animation Ring
 * 7. Chat Panel (Glassmorphism)
 * 8. Panel Header
 * 9. Agent / Greeting Card
 * 10. Channel Buttons List
 * 11. Individual Channel Button
 * 12. Panel Footer
 * 13. Animations & Keyframes
 * 14. Responsive / Mobile Overrides
 * 15. Accessibility - Reduced Motion
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
  /* -- Brand Colors -- */
  --ttw-primary:          #075e54;     /* Main accent (used for FAB) */
  --ttw-primary-light:    #128c7e;
  --ttw-primary-glow:     rgba(7, 94, 84, 0.35);

  /* -- Panel Glassmorphism (Light Mode) -- */
  --ttw-panel-bg:         rgba(255, 255, 255, 0.72);
  --ttw-panel-border:     rgba(255, 255, 255, 0.55);
  --ttw-panel-blur:       20px;
  --ttw-panel-shadow:     0 24px 60px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0,0,0,0.10);

  /* -- Header -- */
  --ttw-header-bg:        linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  --ttw-header-text:      #ffffff;

  /* -- Channel Buttons -- */
  --ttw-btn-bg:           rgba(255, 255, 255, 0.85);
  --ttw-btn-border:       rgba(0, 0, 0, 0.07);
  --ttw-btn-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
  --ttw-btn-hover-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  --ttw-btn-text:         #1a1a2e;
  --ttw-btn-sub:          #6b7280;

  /* -- Footer -- */
  --ttw-footer-text:      rgba(100, 100, 120, 0.7);

  /* -- Structural -- */
  --ttw-panel-width:      340px;
  --ttw-fab-size:         60px;
  --ttw-radius-panel:     20px;
  --ttw-radius-btn:       14px;
  --ttw-radius-fab:       50%;

  /* -- Z-Index -- */
  --ttw-z:                9999;

  /* -- Transitions -- */
  --ttw-ease:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --ttw-ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ttw-duration:         0.35s;

  /* -- Position Offset -- */
  --ttw-offset-bottom:    28px;
  --ttw-offset-side:      24px;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */

[data-ttw-theme="dark"] {
  --ttw-panel-bg:         rgba(18, 24, 38, 0.82);
  --ttw-panel-border:     rgba(255, 255, 255, 0.10);
  --ttw-panel-shadow:     0 24px 60px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0,0,0,0.30);

  --ttw-btn-bg:           rgba(30, 38, 58, 0.90);
  --ttw-btn-border:       rgba(255, 255, 255, 0.08);
  --ttw-btn-shadow:       0 2px 12px rgba(0, 0, 0, 0.25);
  --ttw-btn-hover-shadow: 0 6px 24px rgba(0, 0, 0, 0.40);
  --ttw-btn-text:         #f0f4f8;
  --ttw-btn-sub:          #8a94a6;

  --ttw-footer-text:      rgba(140, 148, 166, 0.6);
}

/* ==========================================================================
   3. BASE WIDGET CONTAINER
   ========================================================================== */

/**
 * The root wrapper. All widget elements live inside this.
 * Position is driven by data attributes set from config.js.
 */
.ttw-widget-root {
  position: fixed;
  bottom: var(--ttw-offset-bottom);
  right: var(--ttw-offset-side);
  z-index: var(--ttw-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Left-positioned variant */
.ttw-widget-root[data-position="left"] {
  right: auto;
  left: var(--ttw-offset-side);
  align-items: flex-start;
}

/* All child elements inherit box-sizing */
.ttw-widget-root *,
.ttw-widget-root *::before,
.ttw-widget-root *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   4. MAIN FLOATING ACTION BUTTON (FAB)
   ========================================================================== */

.ttw-fab {
  position: relative;
  width: var(--ttw-fab-size);
  height: var(--ttw-fab-size);
  border-radius: var(--ttw-radius-fab);
  background: var(--ttw-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--ttw-primary-glow), 0 2px 8px rgba(0,0,0,0.2);
  transition:
    transform var(--ttw-duration) var(--ttw-ease),
    box-shadow var(--ttw-duration) var(--ttw-ease-out),
    background-color var(--ttw-duration) ease;
  outline: none;
  flex-shrink: 0;
  /* Bounce-in on page load */
  animation: ttw-bounce-in 0.6s var(--ttw-ease) both;
}

.ttw-fab:hover {
  transform: scale(1.10);
  box-shadow: 0 8px 32px var(--ttw-primary-glow), 0 4px 16px rgba(0,0,0,0.25);
  background: var(--ttw-primary-light);
}

.ttw-fab:focus-visible {
  outline: 3px solid var(--ttw-primary-light);
  outline-offset: 3px;
}

.ttw-fab:active {
  transform: scale(0.96);
}

/* FAB Icon wrapper — holds the two swapping icons */
.ttw-fab-icon-wrap {
  position: relative;
  width: 28px;
  height: 28px;
}

/* Both icons sit on top of each other; visibility toggled via class */
.ttw-fab-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.30s var(--ttw-ease);
}

/* Chat icon — visible by default */
.ttw-fab-icon--chat {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Close icon — hidden by default */
.ttw-fab-icon--close {
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
}

/* When panel is OPEN, swap icons */
.ttw-widget-root[data-open="true"] .ttw-fab-icon--chat {
  opacity: 0;
  transform: scale(0.6) rotate(90deg);
}

.ttw-widget-root[data-open="true"] .ttw-fab-icon--close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ==========================================================================
   5. NOTIFICATION BADGE
   ========================================================================== */

.ttw-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  border: 2.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ttw-ease);
  animation: ttw-badge-pop 0.5s var(--ttw-ease) 0.8s both;
}

/* Badge hides when panel opens */
.ttw-widget-root[data-open="true"] .ttw-badge {
  opacity: 0;
  transform: scale(0);
}

/* ==========================================================================
   6. PULSE ANIMATION RING
   ========================================================================== */

.ttw-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2.5px solid var(--ttw-primary-light);
  animation: ttw-pulse 2.2s ease-out 1.2s infinite;
  pointer-events: none;
}

/* Stop pulsing once panel is open */
.ttw-widget-root[data-open="true"] .ttw-pulse-ring {
  animation-play-state: paused;
  opacity: 0;
}

/* ==========================================================================
   7. CHAT PANEL (GLASSMORPHISM)
   ========================================================================== */

.ttw-panel {
  width: var(--ttw-panel-width);
  border-radius: var(--ttw-radius-panel);
  background: var(--ttw-panel-bg);
  border: 1px solid var(--ttw-panel-border);
  box-shadow: var(--ttw-panel-shadow);
  /* The glassmorphism effect */
  backdrop-filter: blur(var(--ttw-panel-blur));
  -webkit-backdrop-filter: blur(var(--ttw-panel-blur));
  overflow: hidden;

  /* Hidden / collapsed state */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  transform-origin: bottom right;
  transition:
    opacity var(--ttw-duration) var(--ttw-ease-out),
    transform var(--ttw-duration) var(--ttw-ease);
}

/* Left-positioned panel adjusts transform origin */
.ttw-widget-root[data-position="left"] .ttw-panel {
  transform-origin: bottom left;
}

/* Visible / open state */
.ttw-widget-root[data-open="true"] .ttw-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ==========================================================================
   8. PANEL HEADER
   ========================================================================== */

.ttw-panel-header {
  background: var(--ttw-header-bg);
  padding: 20px 20px 24px;
  position: relative;
  overflow: hidden;
}

/* Decorative background circles for depth */
.ttw-panel-header::before,
.ttw-panel-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.ttw-panel-header::before {
  width: 120px;
  height: 120px;
  top: -40px;
  right: -20px;
}

.ttw-panel-header::after {
  width: 80px;
  height: 80px;
  bottom: -30px;
  left: 20px;
}

/* ==========================================================================
   9. AGENT / GREETING CARD
   ========================================================================== */

.ttw-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ttw-agent-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.ttw-agent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.6);
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
}

/* Online status dot on avatar */
.ttw-agent-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid white;
}

.ttw-agent-info {
  flex: 1;
  min-width: 0;
}

.ttw-agent-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ttw-header-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttw-agent-tagline {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* Greeting message bubble */
.ttw-greeting {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px 12px 12px 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   10. CHANNEL BUTTONS LIST
   ========================================================================== */

.ttw-channels {
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 0;
}

/* ==========================================================================
   11. INDIVIDUAL CHANNEL BUTTON
   ========================================================================== */

.ttw-channel-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--ttw-radius-btn);
  background: var(--ttw-btn-bg);
  border: 1px solid var(--ttw-btn-border);
  box-shadow: var(--ttw-btn-shadow);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.22s var(--ttw-ease),
    box-shadow 0.22s var(--ttw-ease-out),
    background-color 0.18s ease;
  outline: none;
  /* Staggered reveal animation */
  opacity: 0;
  animation: none;
}

/* Trigger stagger when panel opens */
.ttw-widget-root[data-open="true"] .ttw-channel-btn {
  animation: ttw-slide-up 0.40s var(--ttw-ease) both;
}

/* Stagger delays for each channel item */
.ttw-widget-root[data-open="true"] .ttw-channels li:nth-child(1) .ttw-channel-btn { animation-delay: 0.05s; }
.ttw-widget-root[data-open="true"] .ttw-channels li:nth-child(2) .ttw-channel-btn { animation-delay: 0.10s; }
.ttw-widget-root[data-open="true"] .ttw-channels li:nth-child(3) .ttw-channel-btn { animation-delay: 0.15s; }
.ttw-widget-root[data-open="true"] .ttw-channels li:nth-child(4) .ttw-channel-btn { animation-delay: 0.20s; }
.ttw-widget-root[data-open="true"] .ttw-channels li:nth-child(5) .ttw-channel-btn { animation-delay: 0.25s; }

.ttw-channel-btn:hover {
  transform: translateX(-4px);
  box-shadow: var(--ttw-btn-hover-shadow);
}

.ttw-widget-root[data-position="left"] .ttw-channel-btn:hover {
  transform: translateX(4px);
}

.ttw-channel-btn:focus-visible {
  outline: 2px solid var(--ttw-primary-light);
  outline-offset: 2px;
}

.ttw-channel-btn:active {
  transform: scale(0.98);
}

/* Icon circle */
.ttw-channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.22s var(--ttw-ease);
}

.ttw-channel-btn:hover .ttw-channel-icon {
  transform: scale(1.12) rotate(-6deg);
}

/* Text block */
.ttw-channel-text {
  flex: 1;
  min-width: 0;
}

.ttw-channel-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ttw-btn-text);
  line-height: 1.3;
}

.ttw-channel-sub {
  display: block;
  font-size: 11.5px;
  color: var(--ttw-btn-sub);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arrow chevron on right */
.ttw-channel-arrow {
  color: var(--ttw-btn-sub);
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.22s var(--ttw-ease-out);
  flex-shrink: 0;
}

.ttw-channel-btn:hover .ttw-channel-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* -- Channel brand colors (icon backgrounds) -- */
.ttw-channel-icon--whatsapp  { background: #dcfce7; color: #16a34a; }
.ttw-channel-icon--messenger { background: #ede9fe; color: #7c3aed; }
.ttw-channel-icon--telegram  { background: #dbeafe; color: #1d4ed8; }
.ttw-channel-icon--email     { background: #fef3c7; color: #b45309; }
.ttw-channel-icon--phone     { background: #fee2e2; color: #dc2626; }

[data-ttw-theme="dark"] .ttw-channel-icon--whatsapp  { background: rgba(22, 163, 74, 0.18);  color: #4ade80; }
[data-ttw-theme="dark"] .ttw-channel-icon--messenger { background: rgba(124, 58, 237, 0.18); color: #a78bfa; }
[data-ttw-theme="dark"] .ttw-channel-icon--telegram  { background: rgba(29, 78, 216, 0.18);  color: #60a5fa; }
[data-ttw-theme="dark"] .ttw-channel-icon--email     { background: rgba(180, 83, 9, 0.18);   color: #fbbf24; }
[data-ttw-theme="dark"] .ttw-channel-icon--phone     { background: rgba(220, 38, 38, 0.18);  color: #f87171; }

/* ==========================================================================
   12. PANEL FOOTER
   ========================================================================== */

.ttw-panel-footer {
  text-align: center;
  padding: 8px 14px 16px;
  font-size: 11px;
  color: var(--ttw-footer-text);
}

.ttw-panel-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.ttw-panel-footer a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   13. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/**
 * @keyframe ttw-bounce-in
 * Initial load animation for the FAB button.
 */
@keyframes ttw-bounce-in {
  0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  80%  { transform: scale(0.96) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/**
 * @keyframe ttw-badge-pop
 * Pops the notification badge in after the FAB loads.
 */
@keyframes ttw-badge-pop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/**
 * @keyframe ttw-pulse
 * Continuous pulsing ring around the FAB to draw attention.
 */
@keyframes ttw-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0;   }
  100% { transform: scale(1.45); opacity: 0;   }
}

/**
 * @keyframe ttw-slide-up
 * Staggered slide-up reveal for each channel button.
 */
@keyframes ttw-slide-up {
  0%   { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ==========================================================================
   14. RESPONSIVE / MOBILE OVERRIDES
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --ttw-panel-width:    calc(100vw - 32px);
    --ttw-offset-bottom: 20px;
    --ttw-offset-side:   16px;
    --ttw-fab-size:      56px;
  }

  .ttw-panel {
    /* On very small screens, snap to screen edges cleanly */
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
  }
}

/* ==========================================================================
   15. ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

/**
 * Respect user's OS-level "Reduce Motion" preference.
 * Disables non-essential animations while keeping transitions functional.
 */
@media (prefers-reduced-motion: reduce) {
  .ttw-fab,
  .ttw-badge,
  .ttw-pulse-ring,
  .ttw-panel,
  .ttw-channel-btn,
  .ttw-fab-icon {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  /* Ensure items are visible without animation */
  .ttw-widget-root[data-open="true"] .ttw-channel-btn {
    opacity: 1;
  }

  .ttw-pulse-ring {
    display: none;
  }
}