/* Stile del widget chatbot Tua Energia (Fase 0).
   Colori e logo sono PLACEHOLDER documentati: il branding definitivo (palette,
   logo coerenti col sito) va fornito dal cliente (RF-007, RNF-038). */

:root {
  /* Branding placeholder (RF-007): sostituire con la palette reale di Tua Energia. */
  --te-green: #a4ce4e;
  --te-green-dark: #93bd3c;
  --te-link: #7cb342;
  --te-user-bubble: #a4ce4e;
  --te-bot-bubble: #eceef0;
  --te-text: #2c2c2c;
  --te-text-light: #ffffff;
  --te-border: #e2e5e9;
  --te-muted: #8a9097;
  --te-fab-size: 48px;
  --te-fab-offset: 20px;
  --te-fab-gap: 12px;
  --te-panel-width: 520px;
  --te-panel-transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#te-chat-button {
  position: fixed;
  bottom: var(--te-fab-offset);
  right: var(--te-fab-offset);
  width: var(--te-fab-size);
  height: var(--te-fab-size);
  border-radius: 50%;
  border: none;
  background: var(--te-green);
  color: var(--te-text-light);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#te-chat-button:hover {
  background: var(--te-green-dark);
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

#te-chat-button:active {
  transform: scale(0.96);
}

#te-chat-button svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease;
}

#te-chat-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#te-chat-panel {
  position: fixed;
  bottom: calc(var(--te-fab-offset) + var(--te-fab-size) + var(--te-fab-gap));
  right: var(--te-fab-offset);
  width: var(--te-panel-width);
  max-width: calc(100vw - (var(--te-fab-offset) * 2));
  height: 700px;
  max-height: calc(100vh - var(--te-fab-offset) - var(--te-fab-size) - var(--te-fab-gap) - 16px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--te-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity var(--te-panel-transition),
    transform var(--te-panel-transition),
    visibility var(--te-panel-transition);
}

#te-chat-panel.te-panel-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#te-chat-panel[hidden] {
  display: none;
}

/* --- Header verde -------------------------------------------------------- */
.te-header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: var(--te-green);
  color: var(--te-text-light);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.te-header .te-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.te-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.te-header button {
  background: transparent;
  border: none;
  color: var(--te-text-light);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.te-header button:hover {
  opacity: 1;
}

/* Tooltip header: compaiono dopo una breve pausa al passaggio del mouse. */
.te-header button[data-tooltip] {
  position: relative;
}

.te-header button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  transform: none;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(32, 33, 36, 0.92);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  transition-delay: 0s;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.te-header button[data-tooltip]:hover::after,
.te-header button[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.45s;
}

/* --- Area messaggi ------------------------------------------------------- */
.te-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}

/* Schermata di benvenuto in cima alla conversazione. */
.te-welcome {
  text-align: center;
  padding: 14px 12px 8px;
}

.te-welcome-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.te-welcome-logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.te-welcome h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #1f1f1f;
}

.te-welcome p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--te-muted);
}

/* --- Righe messaggio (avatar + bolla) ------------------------------------ */
.te-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.te-row.user {
  justify-content: flex-end;
}

.te-row.bot {
  justify-content: flex-start;
}

.te-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.te-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.te-bot-bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 80%;
}

.te-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: normal;
}

.te-bubble.user {
  max-width: 80%;
  background: var(--te-user-bubble);
  color: var(--te-text-light);
  border-bottom-right-radius: 5px;
}

.te-bubble.bot {
  background: var(--te-bot-bubble);
  color: var(--te-text);
  border-bottom-left-radius: 5px;
}

/* Resa markdown compatta dentro le bolle dell'assistente (RF-006). */
.te-bubble.bot p {
  margin: 0 0 8px 0;
}
.te-bubble.bot p:last-child {
  margin-bottom: 0;
}
.te-bubble.bot ul,
.te-bubble.bot ol {
  margin: 4px 0;
  padding-left: 20px;
}
.te-bubble.bot a,
.te-link {
  color: var(--te-link);
  font-weight: 600;
  text-decoration: none;
}
.te-bubble.bot a:hover,
.te-link:hover {
  text-decoration: underline;
}

/* --- Indicatore di digitazione: tre puntini animati (Image #2) ----------- */
.te-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.te-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa0a6;
  animation: te-blink 1.4s infinite both;
}

.te-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.te-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes te-blink {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* --- Messaggio di sistema (errore generico, limite turni) - RNF-034/036. - */
.te-system {
  align-self: center;
  color: var(--te-muted);
  font-size: 13px;
  text-align: center;
  padding: 4px 12px;
}

/* --- Area input a pillola ------------------------------------------------ */
.te-input-area {
  padding: 10px 14px 6px;
  display: flex;
}

.te-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--te-border);
  border-radius: 26px;
  padding: 5px 5px 5px 16px;
}

.te-input-wrap textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  max-height: 96px;
  color: var(--te-text);
}

.te-send {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #eceef0;
  color: #5f6368;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.te-send:hover:not(:disabled) {
  background: #e0e2e5;
}

.te-send:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.te-input-wrap textarea:disabled {
  color: var(--te-muted);
}

/* --- Footer -------------------------------------------------------------- */
.te-footer {
  text-align: center;
  color: var(--te-muted);
  font-size: 12px;
  padding: 4px 0 12px;
}

.te-footer-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.te-footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  :root {
    --te-fab-size: 44px;
    --te-fab-offset: 16px;
    --te-fab-gap: 10px;
    --te-panel-width: 100%;
  }

  #te-chat-panel {
    height: min(700px, calc(100vh - var(--te-fab-offset) - var(--te-fab-size) - var(--te-fab-gap) - 12px));
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --te-panel-transition: 0.01s linear;
  }

  #te-chat-button,
  #te-chat-button svg {
    transition: none;
  }
}