/* ============================================================
   VGL-ASSISTANT – Stylesheet
   Vollstaendig isoliert: keine externen Styles koennen eindringen
============================================================ */

/* ── Stufe 1: Harter Reset fuer alle Elemente im Panel ── */
#vgl_assistant_panel,
#vgl_assistant_panel *,
#vgl_assistant_panel *::before,
#vgl_assistant_panel *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-shadow: none !important;
  float: none !important;
  vertical-align: baseline !important;
}

/* ── Stufe 2: Farb- und Schrift-Normalisierung ── */
#vgl_assistant_panel * {
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  list-style: none;
}

/* ── CSS-Variablen ── */
#vgl_assistant_panel {
  --primary:    #2563eb;
  --primary-d:  #1d4ed8;
  --accent:     #0ea5e9;
  --success:    #22c55e;
  --success-d:  #16a34a;
  --danger:     #ef4444;
  --danger-d:   #b91c1c;
  --bg:         #f1f5f9;
  --card:       #ffffff;
  --text:       #1e293b;
  --muted:      #64748b;
  --border:     #e2e8f0;
  --radius:     12px;
  --shadow:     0 4px 24px rgba(0, 0, 0, .08);
  --ai-bg:      #0f172a;
  --ai-surface: rgba(255, 255, 255, .06);
  --ai-text:    #e2e8f0;
}

/* ── Wrapper: gedockt in helpBoxRight (Standard) ── */
#vgl_assistant_panel {
  width: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── Floating-Zustand: rechts unten fixiert ── */
#vgl_assistant_panel.va-floating {
  position: fixed !important;
  bottom: 94px !important;
  right: 24px !important;
  width: 310px !important;
  max-width: calc(100vw - 32px) !important;
  box-shadow: 0 6px 32px rgba(0,0,0,.15) !important;
  z-index: 9999 !important;
}

/* Auch ueber .vgl-assistant-Klasse ansprechen (Fallback) */
.vgl-assistant {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Panel-Ueberschrift ── */
#vgl_assistant_panel .vgl-assistant-header {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 .35rem 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: .1rem !important;
}

/* ── KI-Panel ── */
#vgl_assistant_panel .ai-panel {
  background: #ffffff !important;
  
  padding: .7rem !important;
  color: #1e293b !important;
  display: none !important;
  flex-direction: column !important;
  gap: .7rem !important;
  position: static !important;
  min-height: 0 !important;
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
}

#vgl_assistant_panel .ai-panel.panel-visible {
  display: flex !important;
}

/* ── Avatar ── */
#vgl_assistant_panel .ai-avatar {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#vgl_assistant_panel .ai-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

#vgl_assistant_panel .pulse-ring {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  border: 2px solid var(--accent) !important;
  background: transparent !important;
  opacity: 0 !important;
}

#vgl_assistant_panel .ai-avatar.speaking .pulse-ring {
  animation: va-pulse 1.2s ease-out infinite !important;
}

@keyframes va-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 0;  }
}

/* ── Panel-Header ── */
#vgl_assistant_panel .chat-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  background: transparent !important;
  
}

#vgl_assistant_panel .chat-panel-header-info {
  flex: 1 !important;
  min-width: 0 !important;
}

#vgl_assistant_panel .chat-panel-header-info strong {
  display: block !important;
  color: #1e293b !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background: transparent !important;
}

/* ── Status-Bar ── */
#vgl_assistant_panel .ai-status-bar {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: .76rem !important;
  color: #64748b !important;
  text-align: left !important;
  min-height: auto !important;
  display: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1.4 !important;
  border: none !important;
  box-shadow: none !important;
}

#vgl_assistant_panel .ai-status-bar.active {
  color: var(--primary) !important;
}

/* ── Visualizer ── */
/* .active-Klasse wird per JS gesetzt – daher explizit display:flex !important */
#vgl_assistant_panel .visualizer.active {
  display: flex !important;
}

#vgl_assistant_panel .visualizer {
  display: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 14px !important;
  background: transparent !important;
}

#vgl_assistant_panel .bar {
  width: 3px !important;
  background: var(--primary) !important;
  border-radius: 2px !important;
  min-height: 4px !important;
  animation: va-bounce .6s ease-in-out infinite !important;
  border: none !important;
}

#vgl_assistant_panel .bar:nth-child(1) { animation-delay: 0s !important;   height: 4px !important; }
#vgl_assistant_panel .bar:nth-child(2) { animation-delay: .1s !important;  height: 9px !important; }
#vgl_assistant_panel .bar:nth-child(3) { animation-delay: .2s !important;  height: 12px !important; }
#vgl_assistant_panel .bar:nth-child(4) { animation-delay: .3s !important;  height: 9px !important; }
#vgl_assistant_panel .bar:nth-child(5) { animation-delay: .4s !important;  height: 4px !important; }

@keyframes va-bounce {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.8); }
}

/* ── Feld-Info-Box ── */
#vgl_assistant_panel .ai-field-info {
  background: rgba(14, 165, 233, .1) !important;
  border: 1px solid rgba(14, 165, 233, .4) !important;
  border-radius: 8px !important;
  padding: .75rem !important;
  font-size: .8rem !important;
  color: #0369a1 !important;
  display: none !important;
  line-height: 1.55 !important;
  box-shadow: none !important;
}

#vgl_assistant_panel .ai-field-info.visible {
  display: block !important;
}

#vgl_assistant_panel .ai-field-info-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .4rem !important;
  background: transparent !important;
}

#vgl_assistant_panel .ai-field-info strong {
  color: #0284c7 !important;
  display: block !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  background: transparent !important;
}

#vgl_assistant_panel .btn-field-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #0284c7 !important;
  padding: 2px 0 2px 4px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
}

#vgl_assistant_panel .btn-field-toggle:hover {
  color: #0369a1 !important;
}

/* Aufgeklappt: X anzeigen, Chevron verstecken */
#vgl_assistant_panel .btn-field-toggle .icon-expand { display: none !important; }
#vgl_assistant_panel .btn-field-toggle .icon-close  { display: block !important; }

/* Eingeklappt: Chevron anzeigen, X verstecken */
#vgl_assistant_panel .ai-field-info.collapsed .btn-field-toggle .icon-close   { display: none !important; }
#vgl_assistant_panel .ai-field-info.collapsed .btn-field-toggle .icon-expand  { display: block !important; }

#vgl_assistant_panel .ai-field-info #aiFieldText {
  display: block !important;
  max-height: 200px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  margin-top: .3rem !important;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease !important;
  color: #0369a1 !important;
  font-size: .8rem !important;
}

#vgl_assistant_panel .ai-field-info.collapsed #aiFieldText {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
}

/* ── Chat-Fenster ── */
#vgl_assistant_panel .chat-window {
  flex: 1 !important;
  min-height: 40px !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .45rem !important;
  padding: .2rem 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
  transition: min-height .35s ease, max-height .35s ease !important;
}

#vgl_assistant_panel .chat-window.expanded {
  min-height: 290px !important;
  max-height: 290px !important;
}

/* ── Nachrichten ── */
#vgl_assistant_panel .chat-msg {
  display: flex !important;
  max-width: 88% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 0 !important;
}

#vgl_assistant_panel .chat-msg.user {
  align-self: flex-end !important;
}

#vgl_assistant_panel .chat-msg.assistant {
  align-self: flex-start !important;
}

#vgl_assistant_panel .chat-bubble {
  padding: .5rem .82rem !important;
  border-radius: 14px !important;
  font-size: .84rem !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  border: none !important;
  box-shadow: none !important;
}

#vgl_assistant_panel .chat-msg.user .chat-bubble {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
}

#vgl_assistant_panel .chat-msg.assistant .chat-bubble {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-bottom-left-radius: 4px !important;
  font-size: 13px !important;
}

#vgl_assistant_panel .chat-msg.system {
  justify-content: center !important;
}

#vgl_assistant_panel .chat-msg.system .chat-bubble {
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid #cccccc !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  opacity: 0.7 !important;
  text-align: center !important;
  padding: 5px 10px !important;
}

/* ── Eingabe-Zeile ── */
#vgl_assistant_panel .chat-input-row {
  display: flex !important;
  gap: .4rem !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#vgl_assistant_panel .chat-text-input {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: .38rem .88rem !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 22px !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  font-size: max(16px, .88rem) !important; /* min. 16px verhindert Auto-Zoom auf iOS/Chrome */
  font-weight: normal !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  touch-action: manipulation !important; /* verhindert Doppeltipp-Zoom */
}

#vgl_assistant_panel .chat-text-input::placeholder {
  color: #94a3b8 !important;
  font-weight: normal !important;
}

#vgl_assistant_panel .chat-text-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none !important;
}

/* ── Send-Button ── */
#vgl_assistant_panel .btn-send {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: opacity .2s, transform .15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#vgl_assistant_panel .btn-send:hover {
  opacity: .85 !important;
  transform: scale(1.08) !important;
}

#vgl_assistant_panel .btn-send svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Trenner ── */
#vgl_assistant_panel .chat-or-divider {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  font-size: .72rem !important;
  color: #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: transparent !important;
  border: none !important;
}

#vgl_assistant_panel .chat-or-divider::before,
#vgl_assistant_panel .chat-or-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #e2e8f0 !important;
  display: block !important;
}

/* ── Sprach-Zeile ── */
#vgl_assistant_panel .chat-voice-row {
  display: flex !important;
  background: transparent !important;
  border: none !important;
}

/* ── Mic-Button ── */
#vgl_assistant_panel .btn-mic {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  padding: .45rem .7rem !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #ffffff !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25) !important;
  transition: opacity .2s, transform .15s, box-shadow .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-align: center !important;
}

#vgl_assistant_panel .btn-mic:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35) !important;
}

#vgl_assistant_panel .btn-mic:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25) !important;
}

#vgl_assistant_panel .btn-mic.active {
  background: linear-gradient(135deg, var(--success), var(--success-d)) !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, .3) !important;
  animation: va-micPulse 1.6s ease-in-out infinite !important;
}

#vgl_assistant_panel .btn-mic.active:hover {
  box-shadow: 0 4px 14px rgba(34, 197, 94, .4) !important;
}

#vgl_assistant_panel .btn-mic-label {
  font-size: inherit !important;
  color: inherit !important;
}

#vgl_assistant_panel .btn-mic svg,
#vgl_assistant_panel .btn-send svg {
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0 !important;
  display: block !important;
}

#vgl_assistant_panel .btn-field-toggle svg {
  fill: none;
  stroke: currentColor;
  flex-shrink: 0 !important;
}

@keyframes va-micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  50%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

/* ── Modus-Sperre ── */
/* .btn-mic bleibt im Text-Modus klickbar – Wechsel zu Sprach-Modus erlaubt */

#vgl_assistant_panel .chat-mode-locked.mode-voice .chat-text-input,
#vgl_assistant_panel .chat-mode-locked.mode-voice .btn-send {
  opacity: .3 !important;
  pointer-events: none !important;
}

/* ── Unterbrechungs-Button ── */
#vgl_assistant_panel .btn-interrupt {
  display: none !important;
  width: 100% !important;
  padding: .42rem !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px !important;
  color: #dc2626 !important;
  font-size: .79rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-align: center !important;
}

#vgl_assistant_panel .btn-interrupt.visible {
  display: block !important;
}

#vgl_assistant_panel .btn-interrupt:hover {
  background: #fee2e2 !important;
}

/* ── Reset-Button ── */
#vgl_assistant_panel .btn-reset {
  width: 100% !important;
  padding: .42rem !important;
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #64748b !important;
  font-size: .79rem !important;
  font-weight: normal !important;
  cursor: pointer !important;
  transition: border-color .2s, color .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-align: center !important;
}

#vgl_assistant_panel .btn-reset:hover {
  border-color: #94a3b8 !important;
  color: #475569 !important;
}

/* ── Datenschutz-Hinweis ── */
#vgl_assistant_panel .chat-privacy {
  font-size: .71rem !important;
  color: #94a3b8 !important;
  text-align: center !important;
  line-height: 1.45 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}

/* ── Toggle-Leiste ── */
#vgl_assistant_panel .vgl-assistant-toggle {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  padding: .5rem .7rem !important;
  cursor: pointer !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  user-select: none !important;
  transition: background .15s !important;
}

#vgl_assistant_panel .vgl-assistant-toggle.open {
  border-radius: 8px 8px 0 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

#vgl_assistant_panel .vgl-assistant-toggle:hover {
  background: #f1f5f9 !important;
}

#vgl_assistant_panel .va-toggle-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#vgl_assistant_panel .va-toggle-label {
  flex: 1 !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
}

/* Berater-Modus-Badge neben dem Toggle-Label */
#vgl_assistant_panel .va-modes-badge {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: #2563eb !important;
  border-radius: 10px !important;
  padding: .12rem .45rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#vgl_assistant_panel .va-toggle-chevron {
  flex-shrink: 0 !important;
  color: #94a3b8 !important;
  display: block !important;
}

/* Geschlossen: Chevron sichtbar, X versteckt */
#vgl_assistant_panel .va-toggle-icon-close  { display: none !important; }
#vgl_assistant_panel .va-toggle-icon-expand { display: block !important; }

/* Offen: X sichtbar, Chevron versteckt */
#vgl_assistant_panel .vgl-assistant-toggle.open .va-toggle-icon-expand { display: none !important; }
#vgl_assistant_panel .vgl-assistant-toggle.open .va-toggle-icon-close  { display: block !important; }

/* ai-panel: kein border-top + untere Ecken runden wenn toggle darueber */
#vgl_assistant_panel .ai-panel {
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
}

/* ── helpBoxRight(Detail) .htext – aktiv wenn KI-Assistent geladen ── */
#vvergleich #helpBoxRight .htext,
#vvergleich #helpBoxRightDetail .htext {
  
  padding-bottom: 10px !important;
    font-size: 0.9rem !important;
}

/* ── Drag-Cursor auf der Toggle-Leiste im floating-Zustand ── */
#vgl_assistant_panel.va-floating .vgl-assistant-toggle {
  cursor: grab !important;
}

#vgl_assistant_panel.va-floating .vgl-assistant-toggle.va-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

/* ── Scrollbar ── */
#vgl_assistant_panel ::-webkit-scrollbar { width: 5px; }
#vgl_assistant_panel ::-webkit-scrollbar-track { background: transparent; }
#vgl_assistant_panel ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── SVG-Icons ── */
#vgl_assistant_panel svg {
  overflow: visible !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ── Panel innerhalb .dialog-content: kein extra margin ── */
.dialog-content #vgl_assistant_panel {
  margin: 0 !important;
}

/* ── Mobile: Floating-Panel als Vollbild (inkl. aufgeklappter Tastatur) ── */
@media only screen and (max-width: 600px) {
  #vgl_assistant_panel.va-floating {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    top: 0 !important; /* wird per JS via visualViewport ueberschrieben */
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important; /* wird per JS via visualViewport ueberschrieben */
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
      margin: 0 !important;
  }

  /* Toggle-Leiste oben fixiert, kein Rounding */
  #vgl_assistant_panel.va-floating .vgl-assistant-toggle {
    flex-shrink: 0 !important;
    border-radius: 0 !important;
  }

  /* ai-panel fuellt den restlichen Platz */
  #vgl_assistant_panel.va-floating .ai-panel {
    flex: 1 1 0 !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Chat-Fenster streckt sich auf verfuegbaren Platz */
  #vgl_assistant_panel.va-floating .chat-window {
    flex: 1 1 0 !important;
    min-height: 60px !important;
    max-height: none !important;
  }
}

/* ── Mobile FAB (Avatar + "Fragen?" – dauerhafter Einstiegspunkt auf Mobile) ── */
#va-mobile-fab {
  position: fixed !important;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  left: 16px !important;
  right: auto !important;
  transform: none !important;
  top: auto !important;
  z-index: 10001 !important;
  display: flex;   /* kein !important – JS steuert show/hide via style.display */
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 13px 7px 8px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.13) !important;
  cursor: pointer !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: box-shadow .2s, background .15s !important;
}

#va-mobile-fab:hover,
#va-mobile-fab:active {
  background: #f1f5f9 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
}

#va-mobile-fab img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#va-mobile-fab span {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
}