/*
 * SuM Chat — Frontend CSS
 * ---------------------------------------------------------------------------------
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Colours */
  --wpc-bg:            rgba(0, 0, 0, 0.45);
  --wpc-border:        rgba(255, 255, 255, 0.12);
  --wpc-text:          rgba(255, 255, 255, 0.92);
  --wpc-text-muted:    rgba(255, 255, 255, 0.50);
  --wpc-shadow:        0 10px 30px rgba(0, 0, 0, 0.30);
  --wpc-blur:          blur(15px);
  --wpc-radius:        16px;
  --wpc-accent:        rgb(0, 158, 224);
  --wpc-accent-rgb:    0, 158, 224;
  --wpc-glow:          rgba(0, 158, 224, 0.40);
  --wpc-overlay-z:     999900;

  /* Sizing helpers */
  --wpc-transition:    all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --wpc-btn-radius:    24px;
}

/* ==========================================================================
   2. GLASS UTILITY
   ========================================================================== */

.wpc-glass,
.wpc-live-button,
.wpc-chat-bubble {
  background:    var(--wpc-bg);
  backdrop-filter: var(--wpc-blur);
  -webkit-backdrop-filter: var(--wpc-blur);
  border:        1px solid var(--wpc-border);
  box-shadow:    var(--wpc-shadow);
  color:         var(--wpc-text);
}

/* ==========================================================================
   3. LIVE BUTTON (.wpc-live-button)
   ========================================================================== */

.wpc-live-button {
  position:      fixed;
  z-index:       var(--wpc-overlay-z);
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 18px;
  border-radius: var(--wpc-btn-radius);
  cursor:        pointer;
  user-select:   none;
  text-decoration: none;
  transition:    var(--wpc-transition);
  min-height:    42px;
  font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:     14px;
  line-height:   1.5;
}

.wpc-live-button:hover {
  transform:  scale(1.04);
  box-shadow: var(--wpc-shadow), 0 0 18px var(--wpc-glow);
}

.wpc-live-button:active {
  transform: scale(0.98);
}

/* Position variants */
.wpc-pos-bottom-right  { bottom: 24px; right: 24px; }
.wpc-pos-bottom-left   { bottom: 24px; left:  24px; }
.wpc-pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
.wpc-pos-top-right     { top:    24px; right: 24px; }
.wpc-pos-top-left      { top:    24px; left:  24px; }

.wpc-pos-bottom-center:hover {
  transform: translateX(-50%) scale(1.04);
}

/* Status dot */
.wpc-live-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

.wpc-live-button.wpc-online .wpc-live-dot {
  background: #34C759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation:  wpc-pulse-dot 1.4s ease-in-out infinite;
}

.wpc-live-button.wpc-offline .wpc-live-dot {
  background: var(--wpc-text-muted);
}

.wpc-live-button.wpc-offline {
  opacity: 0.72;
}

.wpc-live-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--wpc-text);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   3b. FALLBACK POPUP
   ========================================================================== */

.wpc-fallback-popup {
  min-width:     200px;
  max-width:     260px;
  padding:       16px 18px;
  border-radius: var(--wpc-radius);
  font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:     13px;
  line-height:   1.5;
  animation:     wpc-fade-in 0.2s ease;
}

.wpc-fallback-close {
  position:   absolute;
  top:        6px;
  right:      10px;
  cursor:     pointer;
  font-size:  18px;
  color:      var(--wpc-text-muted);
  line-height: 1;
}

.wpc-fallback-close:hover {
  color: var(--wpc-text);
}

.wpc-fallback-text {
  margin:  0 0 10px;
  color:   var(--wpc-text);
}

.wpc-fallback-link {
  display:       inline-block;
  padding:       6px 16px;
  background:    var(--wpc-accent);
  color:         #fff !important;
  border-radius: var(--wpc-btn-radius);
  text-decoration: none;
  font-size:     12px;
  font-weight:   600;
  transition:    opacity 0.2s;
}

.wpc-fallback-link:hover {
  opacity: 0.85;
}

/* ==========================================================================
   4. CHAT BUBBLE (.wpc-chat-bubble)
   ========================================================================== */

.wpc-chat-bubble {
  position:      fixed;
  z-index:       calc(var(--wpc-overlay-z) + 8);
  width:         300px;
  border-radius: var(--wpc-radius);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  max-height:    450px;
  font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:     14px;
  line-height:   1.5;
}

.wpc-chat-bubble.wpc-hidden {
  display: none !important;
}

.wpc-chat-bubble.wpc-minimized .wpc-chat-messages,
.wpc-chat-bubble.wpc-minimized .wpc-chat-input-area,
.wpc-chat-bubble.wpc-minimized .wpc-nickname-prompt {
  display: none;
}

/* Header */
.wpc-chat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-bottom:   1px solid var(--wpc-border);
  min-height:      42px;
  cursor:          default;
}

.wpc-chat-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--wpc-text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.wpc-chat-controls {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}

.wpc-chat-btn {
  background:    transparent;
  border:        none;
  color:         var(--wpc-text-muted);
  cursor:        pointer;
  padding:       4px;
  border-radius: 6px;
  transition:    color 0.15s, background 0.15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.wpc-chat-btn:hover {
  color:      var(--wpc-text);
  background: rgba(255, 255, 255, 0.10);
}

/* Nickname prompt */
.wpc-nickname-prompt {
  padding:      14px;
  text-align:   center;
  border-bottom: 1px solid var(--wpc-border);
}

.wpc-nickname-prompt p {
  font-size:     13px;
  color:         var(--wpc-text);
  margin-bottom: 10px;
}

.wpc-nickname-row {
  display: flex;
  gap:     8px;
}

.wpc-input {
  flex:          1;
  padding:       8px 12px;
  border:        1px solid var(--wpc-border);
  border-radius: 8px;
  background:    rgba(255, 255, 255, 0.08);
  color:         var(--wpc-text);
  font-size:     13px;
  outline:       none;
  transition:    border-color 0.15s;
}

.wpc-input:focus {
  border-color: var(--wpc-accent);
}

.wpc-input::placeholder {
  color: var(--wpc-text-muted);
}

.wpc-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       8px 16px;
  border-radius: 8px;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  border:        none;
  transition:    var(--wpc-transition);
}

.wpc-btn-primary {
  background: var(--wpc-accent);
  color:      #fff;
}

.wpc-btn-primary:hover {
  filter: brightness(1.1);
}

.wpc-btn-sm {
  padding:   6px 12px;
  font-size: 12px;
}

/* Messages */
.wpc-chat-messages {
  flex:        1;
  overflow-y:  auto;
  padding:     12px;
  display:     flex;
  flex-direction: column;
  gap:         8px;
  min-height:  120px;
  max-height:  280px;
}

.wpc-msg-owner,
.wpc-msg-visitor {
  max-width:     80%;
  padding:       7px 12px;
  border-radius: 12px;
  font-size:     13px;
  line-height:   1.45;
  word-wrap:     break-word;
  display:       flex;
  flex-direction: column;
  gap:           2px;
}

.wpc-msg-owner {
  align-self:   flex-start;
  background:   rgba(255, 255, 255, 0.10);
  border:       1px solid var(--wpc-border);
  border-radius: 12px 12px 12px 4px;
}

.wpc-msg-visitor {
  align-self:   flex-end;
  background:   var(--wpc-accent);
  color:        #fff;
  border-radius: 12px 12px 4px 12px;
}

.wpc-msg-sender {
  display:     block;
  font-size:   10px;
  font-weight: 600;
  opacity:     0.7;
  margin-bottom: 1px;
}

.wpc-msg-text {
  display: block;
}

.wpc-msg-time {
  font-size:  10px;
  opacity:    0.6;
  align-self: flex-end;
}

.wpc-msg-pending {
  opacity: 0.6;
}

.wpc-msg-error {
  border: 1px solid rgba(255, 59, 48, 0.4);
}

.wpc-msg-error-icon {
  color:     #ff3b30;
  font-size: 12px;
  cursor:    help;
}

.wpc-msg-system {
  text-align:  center;
  font-size:   12px;
  color:       var(--wpc-text-muted);
  padding:     6px 0;
  font-style:  italic;
}

/* Input area */
.wpc-chat-input-area {
  display:       flex;
  gap:           8px;
  padding:       10px 12px;
  border-top:    1px solid var(--wpc-border);
  align-items:   flex-end;
}

.wpc-chat-input {
  flex:          1;
  resize:        none;
  padding:       8px 12px;
  border:        1px solid var(--wpc-border);
  border-radius: 10px;
  background:    rgba(255, 255, 255, 0.08);
  color:         var(--wpc-text);
  font-size:     13px;
  font-family:   inherit;
  outline:       none;
  transition:    border-color 0.15s;
  min-height:    36px;
  max-height:    80px;
}

.wpc-chat-input:focus {
  border-color: var(--wpc-accent);
}

.wpc-chat-input::placeholder {
  color: var(--wpc-text-muted);
}

.wpc-chat-send {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    var(--wpc-accent);
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    transform 0.12s ease, filter 0.12s ease;
}

.wpc-chat-send:hover {
  transform: scale(1.08);
  filter:    brightness(1.15);
}

.wpc-chat-send svg {
  width:  14px;
  height: 14px;
}

/* ==========================================================================
   5. ANIMATIONS
   ========================================================================== */

@keyframes wpc-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
  .wpc-chat-bubble {
    width:  calc(100vw - 32px);
    left:   16px !important;
    right:  16px !important;
    bottom: 70px !important;
  }

  .wpc-live-button {
    padding: 8px 14px;
    min-height: 38px;
  }

  .wpc-live-label {
    font-size: 12px;
  }
}