/* ── TarifWerk Guide (Kunden-Assistent) ───────────────────────── */
.twg-fab {
  position: fixed;
  left: var(--s5);
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-full);
  background: var(--gradient-accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: var(--text-sm);
  border: none;
  box-shadow: 0 10px 30px -8px var(--accent-glow), 0 4px 14px -6px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.twg-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -8px var(--accent-glow); }
.twg-fab svg { flex-shrink: 0; }
@media (max-width: 767px) {
  .twg-fab { left: var(--s4); bottom: calc(76px + env(safe-area-inset-bottom)); padding: 0.65rem 1rem; }
}

.twg-panel {
  position: fixed;
  left: var(--s5);
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  z-index: 96;
  width: min(380px, calc(100vw - 2 * var(--s5)));
  max-height: min(600px, calc(100dvh - 120px));
  display: none;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: twg-in 0.35s var(--ease-out);
}
.twg-panel.open { display: flex; }
@keyframes twg-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 767px) {
  .twg-panel { left: var(--s4); right: var(--s4); width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px); }
}

.twg-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: linear-gradient(135deg, var(--accent-dim), transparent 70%), var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.twg-head-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: grid; place-items: center;
  color: var(--on-accent);
  overflow: hidden;
}
.twg-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.twg-head-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.2; }
.twg-head-sub { font-size: var(--text-xs); color: var(--text-soft); display: flex; align-items: center; gap: 0.35rem; }
.twg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.2s ease-in-out infinite; }
.twg-close {
  margin-left: auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-muted);
  transition: all var(--t-fast);
}
.twg-close:hover { color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }

.twg-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-height: 180px;
  scrollbar-width: thin;
}
.twg-msg {
  max-width: 85%;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  animation: twg-msg-in 0.3s var(--ease-out);
}
@keyframes twg-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.twg-msg.bot {
  align-self: flex-start;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: var(--r-xs);
}
.twg-msg.user {
  align-self: flex-end;
  background: var(--gradient-accent);
  color: var(--on-accent);
  border-bottom-right-radius: var(--r-xs);
}
.twg-msg a { color: var(--accent-cyan); font-weight: 600; }
.twg-msg.bot a { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--s2); padding: 0.35rem 0.85rem; background: var(--accent-dim); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); border-radius: var(--r-full); font-size: var(--text-xs); }
.twg-msg.bot a:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }

.twg-typing { display: inline-flex; gap: 4px; padding: var(--s3) var(--s4); }
.twg-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-soft);
  animation: twg-bounce 1.2s ease-in-out infinite;
}
.twg-typing i:nth-child(2) { animation-delay: 0.15s; }
.twg-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes twg-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.twg-chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding: 0 var(--s5) var(--s3);
}
.twg-chip {
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
}
.twg-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

.twg-input-row {
  display: flex; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.twg-input {
  flex: 1;
  padding: 0.65rem 0.95rem;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.twg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.twg-send {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.twg-send:hover { transform: scale(1.08); box-shadow: 0 6px 18px -6px var(--accent-glow); }
.twg-send:active { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
  .twg-panel, .twg-msg { animation: none !important; }
  .twg-fab, .twg-send { transition: none !important; }
}