/* ===== Chat Widget Conny - CSS ===== */

:root {
  --cw-primary: #2060ff;
  --cw-bg: #ffffff;
  --cw-text: #0f172a;
  --cw-muted: #64748b;
  --cw-user: #e9f0ff;
  --cw-bot: #f7f7f9;
  --cw-success: #16a34a;
  --cw-danger: #ef4444;
  --cw-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  --cw-radius: 12px;
  --cw-z: 2147483000;
}

/* Bottone flottante */
.cw-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--cw-z);
  width: 64px; height: 64px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white; display: grid; place-items: center;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer; user-select: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cw-launcher:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.cw-launcher svg { width: 26px; height: 26px; }
.cw-status-dot {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 999px;
  border: 2px solid white; background: var(--cw-danger);
}
.cw-status-dot.cw-connected { background: var(--cw-success); }

/* Finestra chat */
.cw-panel {
  position: fixed; right: 20px; bottom: 100px; width: 380px; max-width: calc(100vw - 40px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: none; flex-direction: column; z-index: var(--cw-z);
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative; /* Solo per permettere il posizionamento assoluto degli elementi interni */
}
.cw-panel.cw-open { display: flex; }
.cw-header {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}
.cw-title {
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cw-header .cw-status-dot { position: static; border: none; width: 10px; height: 10px; }
.cw-header .cw-sub { color: var(--cw-muted); font-size: 12px; margin-left: auto; }
.cw-close { background: transparent; border: 0; color: #64748b; cursor: pointer; padding: 6px; border-radius: 8px; }
.cw-close:hover { background: #f1f5f9; }

.cw-messages { height: 340px; overflow: auto; padding: 12px; background: #fafafa; }
.cw-row { display: flex; gap: 8px; margin: 6px 0; }
.cw-bubble { padding: 10px 12px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.cw-user { margin-left: auto; background: var(--cw-user); }
.cw-bot { margin-right: auto; background: var(--cw-bot); }

/* Stili per elementi markdown nelle bolle bot */
.cw-bot h1, .cw-bot h2, .cw-bot h3 { margin: 8px 0 4px 0; font-weight: 600; }

/* Cursore lampeggiante durante streaming */
.cw-typing-cursor {
  animation: cw-blink 1s infinite;
  color: #666;
  font-weight: normal;
  margin-left: 1px;
}

@keyframes cw-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cw-bot h1 { font-size: 18px; }
.cw-bot h2 { font-size: 16px; }
.cw-bot h3 { font-size: 15px; }
.cw-bot p { margin: 6px 0; }
.cw-bot ul, .cw-bot ol { margin: 6px 0; padding-left: 20px; }
.cw-bot li { margin: 2px 0; }
.cw-bot code { background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px; font-size: 13px; }
.cw-bot strong { font-weight: 600; }
.cw-bot em { font-style: italic; }
.cw-bot a { color: var(--cw-primary); text-decoration: underline; }
.cw-bot a:hover { text-decoration: none; }
.cw-meta { font-size: 11px; color: var(--cw-muted); margin-top: 4px; }

.cw-typing { display: none; align-items: center; gap: 6px; color: var(--cw-muted); font-size: 13px; padding: 6px 12px; }
.cw-typing.cw-show { display: flex; }
.cw-dots span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--cw-muted); border-radius: 999px; opacity: .4; animation: blink 1.4s infinite; }
.cw-dots span:nth-child(2) { animation-delay: .2s; }
.cw-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }

.cw-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e5e7eb; }
.cw-input input { flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; outline: none; }
.cw-input button { background: var(--cw-primary); color: white; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; }

/* Pulsante chiamata vocale */
.cw-voice-btn {
  position: relative;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.cw-voice-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.cw-voice-btn svg {
  width: 20px;
  height: 20px;
}

.cw-voice-btn.cw-voice-connecting {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  animation: spin 1s linear infinite;
}

.cw-voice-btn.cw-voice-muted {
  background: linear-gradient(135deg, #6b7280, #4b5563) !important;
}

.cw-voice-status {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  background: #ef4444; /* Pallino rosso di default */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.cw-voice-status.cw-voice-connected {
  background: var(--cw-success);
}

.cw-voice-status.cw-voice-error {
  background: var(--cw-danger);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Maniglia di ridimensionamento */
.cw-panel { position: fixed; }
.cw-resize { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; cursor: nwse-resize; opacity: .5; }
.cw-resize::before { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-left: 2px solid #94a3b8; border-top: 2px solid #94a3b8; border-radius: 2px; }

/* Indicatore di volume verticale */
.cw-volume-indicator {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 44px;
  width: 30px;
  gap: 1px;
  margin-right: 8px;
}

.cw-volume-indicator.cw-active {
  display: flex;
}

.cw-volume-bar {
  width: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: all 0.1s ease;
}

.cw-volume-bar.cw-bar-1 { height: 6px; }
.cw-volume-bar.cw-bar-2 { height: 10px; }
.cw-volume-bar.cw-bar-3 { height: 14px; }
.cw-volume-bar.cw-bar-4 { height: 18px; }
.cw-volume-bar.cw-bar-5 { height: 22px; }
.cw-volume-bar.cw-bar-6 { height: 26px; }
.cw-volume-bar.cw-bar-7 { height: 30px; }
.cw-volume-bar.cw-bar-8 { height: 34px; }

.cw-volume-bar.cw-active-low {
  background: linear-gradient(to top, #16a34a, #22c55e);
}

.cw-volume-bar.cw-active-medium {
  background: linear-gradient(to top, #f59e0b, #fbbf24);
}

.cw-volume-bar.cw-active-high {
  background: linear-gradient(to top, #ef4444, #f87171);
}

/* Stili per messaggi vocali nella chat */
.cw-bubble.cw-voice-message {
  position: relative;
  border-left: 4px solid #16a34a;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  font-style: italic;
}

.cw-bubble.cw-voice-message.cw-user {
  border-left: 4px solid var(--cw-primary);
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.cw-voice-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* Animazione del pulsante quando sta parlando */
.cw-voice-btn.cw-voice-speaking {
  animation: pulse-speaking 1.5s ease-in-out infinite;
}

@keyframes pulse-speaking {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
  }
}

/* Animazione Sunburst Vocale - DENTRO LA CHAT */
.cw-voice-waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(64, 224, 208, 0.1), rgba(70, 130, 180, 0.1), rgba(100, 149, 237, 0.1));
  backdrop-filter: blur(15px);
  border-radius: 12px;
  z-index: 10;
  pointer-events: auto; /* Permette click sui pulsanti interni */
  overflow: hidden;
}

.cw-voice-waves.cw-active {
  display: flex;
}

.cw-voice-waves-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sunburst effect - raggi che partono dal centro */
.cw-sunburst {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(64, 224, 208, 0.8) 0deg,
    rgba(70, 130, 180, 0.6) 60deg,
    rgba(100, 149, 237, 0.8) 120deg,
    rgba(135, 206, 235, 0.6) 180deg,
    rgba(173, 216, 230, 0.8) 240deg,
    rgba(64, 224, 208, 0.6) 300deg,
    rgba(64, 224, 208, 0.8) 360deg
  );
  animation: sunburst-rotate 4s linear infinite;
  mask: radial-gradient(circle, transparent 60px, black 80px, transparent 150px);
  -webkit-mask: radial-gradient(circle, transparent 60px, black 80px, transparent 150px);
}

/* Centro pulsante */
.cw-voice-center {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #40e0d0, #4682b4, #6495ed);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 20px rgba(64, 224, 208, 0.6),
    0 0 40px rgba(70, 130, 180, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  animation: center-pulse 2s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cw-voice-center:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 25px rgba(64, 224, 208, 0.8),
    0 0 50px rgba(70, 130, 180, 0.6),
    inset 0 0 25px rgba(255, 255, 255, 0.3);
}

/* Icona microfono nel centro */
.cw-voice-center svg {
  width: 30px;
  height: 30px;
  color: white;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Pulsante termina chiamata nell'overlay */
.cw-voice-end-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 
    0 4px 15px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 20;
  pointer-events: auto; /* Assicura che il pulsante sia cliccabile */
  user-select: none; /* Previene selezione del testo */
}

.cw-voice-end-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 
    0 6px 20px rgba(239, 68, 68, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.3);
}

.cw-voice-end-btn:active {
  transform: translateX(-50%) scale(0.98);
  box-shadow: 
    0 2px 10px rgba(239, 68, 68, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.cw-voice-end-btn svg {
  width: 16px;
  height: 16px;
}

/* Stato pulsante vocale quando attivo */
.cw-voice-btn.cw-voice-active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  animation: pulse 2s infinite;
}

.cw-voice-btn.cw-voice-active:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Onde concentriche di sfondo */
.cw-voice-wave {
  position: absolute;
  border: 2px solid rgba(64, 224, 208, 0.3);
  border-radius: 50%;
  animation: wave-expand-new 3s ease-out infinite;
}

.cw-voice-wave:nth-child(1) { animation-delay: 0s; }
.cw-voice-wave:nth-child(2) { animation-delay: 0.6s; }
.cw-voice-wave:nth-child(3) { animation-delay: 1.2s; }
.cw-voice-wave:nth-child(4) { animation-delay: 1.8s; }
.cw-voice-wave:nth-child(5) { animation-delay: 2.4s; }

/* Animazioni */
@keyframes sunburst-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes center-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(64, 224, 208, 0.6),
      0 0 40px rgba(70, 130, 180, 0.4),
      inset 0 0 20px rgba(255, 255, 255, 0.2);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 
      0 0 30px rgba(64, 224, 208, 0.8),
      0 0 60px rgba(70, 130, 180, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

@keyframes wave-expand-new {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0.8;
    border-width: 2px;
  }
  50% {
    border-width: 1px;
    opacity: 0.4;
  }
  100% {
    width: 250px;
    height: 250px;
    opacity: 0;
    border-width: 0.5px;
  }
}

/* Stati volume dinamici */
.cw-voice-waves.cw-low-volume .cw-sunburst {
  animation-duration: 6s;
  opacity: 0.6;
}

.cw-voice-waves.cw-medium-volume .cw-sunburst {
  animation-duration: 4s;
  opacity: 0.8;
}

.cw-voice-waves.cw-high-volume .cw-sunburst {
  animation-duration: 2s;
  opacity: 1;
}

.cw-voice-waves.cw-high-volume .cw-voice-center {
  background: linear-gradient(135deg, #ff6b6b, #ffa500, #ff1493);
  box-shadow: 
    0 0 25px rgba(255, 107, 107, 0.8),
    0 0 50px rgba(255, 165, 0, 0.6),
    inset 0 0 25px rgba(255, 255, 255, 0.3);
}

.cw-voice-waves.cw-medium-volume .cw-voice-center {
  background: linear-gradient(135deg, #ffa500, #ffd700, #ffb347);
  box-shadow: 
    0 0 22px rgba(255, 165, 0, 0.7),
    0 0 45px rgba(255, 215, 0, 0.5),
    inset 0 0 22px rgba(255, 255, 255, 0.25);
}