/* ==========================================================================
   Rigicon AI Widget — Main Stylesheet
   Aesthetic: Refined Clinical Trust
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens) — ElevenLabs corporate palette
   -------------------------------------------------------------------------- */
:root {
  /* Base (surface) */
  --riaw-white:          #ffffff;            /* base */
  --riaw-surface:        #f9fafb;            /* base hover */
  --riaw-surface-active: #f3f4f6;            /* base active */
  --riaw-border:         #e5e7eb;            /* base border */
  --riaw-text-muted:     #6b7280;            /* base subtle */
  --riaw-primary:        #000000;            /* base primary (body text) */
  --riaw-error:          #ef4444;            /* base error */

  /* Accent (dark buttons / focus ring) */
  --riaw-accent-bg:      #000000;            /* accent */
  --riaw-accent-hover:   #1f2937;            /* accent hover */
  --riaw-accent-active:  #374151;            /* accent active */
  --riaw-accent-border:  #4b5563;            /* accent border */
  --riaw-accent-subtle:  #6b7280;            /* accent subtle */
  --riaw-accent-text:    #ffffff;            /* accent primary (on accent bg) */
  --riaw-accent:         #000000;            /* focus outline */

  /* Shadows */
  --riaw-shadow:         0 8px 32px rgba(0, 0, 0, 0.12);
  --riaw-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.08);

  /* Typography */
  --riaw-font:           'Montserrat', sans-serif;
  --riaw-font-size:      14px;
  --riaw-font-bold:      700;
  --riaw-font-semi:      600;

  /* Layout */
  --riaw-fab-height:     52px;
  --riaw-orb-size:       36px;
  --riaw-orb-color-1:    #2792dc;            /* kept blue — matches ElevenLabs orb defaults */
  --riaw-orb-color-2:    #9ce6e6;
  --riaw-panel-w:        380px;
  --riaw-panel-w-md:     360px;
  --riaw-panel-max-h:    680px;
  --riaw-radius:         24px;               /* sheet radius from ElevenLabs settings */
  --riaw-radius-sm:      15px;               /* bubble radius from ElevenLabs settings */
  --riaw-radius-fab:     30px;               /* compact sheet radius */
  --riaw-radius-button:  18px;               /* button radius */
  --riaw-z:              99999;
  --riaw-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --riaw-duration:       300ms;
  --riaw-gap:            10px;
  --riaw-bottom-offset:  24px;
  --riaw-side-offset:    24px;
}

/* --------------------------------------------------------------------------
   2. Widget Container
   -------------------------------------------------------------------------- */
.riaw-widget {
  font-family: var(--riaw-font);
  font-size:   var(--riaw-font-size);
  position:    fixed;
  bottom:      var(--riaw-bottom-offset);
  right:       var(--riaw-side-offset);
  z-index:     var(--riaw-z);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   3. FAB Button — pill shape (ElevenLabs ElevenAgents style)
   -------------------------------------------------------------------------- */
.riaw-fab {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             0;
  height:          var(--riaw-fab-height);
  border-radius:   var(--riaw-radius-fab);
  background:      var(--riaw-white);
  border:          none;
  cursor:          pointer;
  box-shadow:      0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
  transition:      transform var(--riaw-duration) var(--riaw-ease),
                   box-shadow var(--riaw-duration) var(--riaw-ease);
  will-change:     transform, box-shadow;
  padding:         8px;
  outline:         none;
  overflow:        hidden;
  white-space:     nowrap;
}

.riaw-fab:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.10);
}

.riaw-fab:focus-visible {
  outline:        2px solid var(--riaw-accent);
  outline-offset: 3px;
}

/* Orb — left side, WebGL2 canvas renders the animated sphere */
.riaw-fab-orb {
  position:      relative;
  width:         var(--riaw-orb-size);
  height:        var(--riaw-orb-size);
  flex-shrink:   0;
  border-radius: 50%;
  overflow:      hidden;
  margin-right:  4px;
  background:    var(--riaw-border); /* thin ring base-border, shown 1px around canvas */
}

.riaw-fab-orb-canvas {
  display:       block;
  position:      absolute;
  inset:         1px;
  width:         calc(100% - 2px);
  height:        calc(100% - 2px);
  border-radius: 50%;
}

/* Action section — dark rounded button (right side, ElevenLabs accent) */
.riaw-fab-action {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  height:          var(--riaw-orb-size);
  padding:         0 12px;
  border-radius:   var(--riaw-radius-button);
  background:      var(--riaw-accent-bg);
  color:           var(--riaw-accent-text);
  border:          1px solid var(--riaw-accent-bg);
  font-family:     var(--riaw-font);
  font-size:       13px;
  font-weight:     var(--riaw-font-semi);
  letter-spacing:  0.01em;
  line-height:     1;
  flex-shrink:     0;
  transition:      background var(--riaw-duration) var(--riaw-ease),
                   border-color var(--riaw-duration) var(--riaw-ease);
}

.riaw-fab:hover .riaw-fab-action {
  background:   var(--riaw-accent-hover);
  border-color: var(--riaw-accent-hover);
}

/* v3.1 — when the panel is open, collapse the action pill so only the orb remains.
   Reverts to full pill as soon as aria-expanded flips back to false. */
.riaw-fab[aria-expanded="true"] .riaw-fab-action {
  max-width:    0;
  padding:      0;
  border-width: 0;
  margin:       0;
  overflow:     hidden;
  opacity:      0;
  transition:   max-width 0.25s var(--riaw-ease),
                padding   0.25s var(--riaw-ease),
                opacity   0.2s  var(--riaw-ease);
}
.riaw-fab[aria-expanded="false"] .riaw-fab-action {
  max-width: 180px;
  opacity:   1;
  transition: max-width 0.3s var(--riaw-ease),
              opacity   0.25s var(--riaw-ease) 0.05s;
}

.riaw-fab-action-icon {
  flex-shrink: 0;
  opacity:     0.9;
}

/* Text label inside the action */
.riaw-fab-label {
  display:       block;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  /* v9 — no max-width so longer localized labels (e.g. German
     "Virtueller Assistent", Portuguese "Assistente Virtual") are not
     truncated mid-word. The pill expands to fit the text. */
  max-width:     none;
}

/* Pulse animation — gentle glow on the pill */
.riaw-fab.riaw-animate {
  animation: riaw-pill-glow 3s ease-in-out infinite;
}

.riaw-fab:hover,
.riaw-fab[aria-expanded="true"] {
  animation: none;
}

@keyframes riaw-pill-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08); }
  50%       { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.08); }
}

/* --------------------------------------------------------------------------
   4. Widget Panel
   -------------------------------------------------------------------------- */
.riaw-panel {
  position:      absolute;
  bottom:        calc(var(--riaw-fab-height) + 12px);
  right:         0;
  width:         var(--riaw-panel-w);
  max-height:    var(--riaw-panel-max-h);
  overflow-y:    auto;
  background:    var(--riaw-white);
  border-radius: var(--riaw-radius);
  box-shadow:    var(--riaw-shadow);
  border:        1px solid var(--riaw-border);
  display:       none;
  will-change:   opacity, transform;
}

.riaw-panel.riaw-visible {
  display:   block;
  animation: riaw-slide-up var(--riaw-duration) var(--riaw-ease) forwards;
  will-change: auto;
}

.riaw-panel.riaw-closing {
  animation:    riaw-slide-down var(--riaw-duration) var(--riaw-ease) forwards;
  pointer-events: none;
}

@keyframes riaw-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes riaw-slide-down {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.97); }
}

/* --------------------------------------------------------------------------
   5. Panel Header
   -------------------------------------------------------------------------- */
.riaw-panel-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          16px 18px;
  background:       var(--riaw-accent-bg);
  color:            var(--riaw-accent-text);
  border-radius:    var(--riaw-radius) var(--riaw-radius) 0 0;
  /* z-index no longer needed — consent overlay is flow-based, not absolute */
}

.riaw-panel-identity {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.riaw-panel-avatar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.15);
  flex-shrink:     0;
}

.riaw-panel-title {
  display:     block;
  font-family: var(--riaw-font);
  font-weight: var(--riaw-font-bold);
  font-size:   15px;
  line-height: 1.2;
}

.riaw-panel-status {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   11px;
  opacity:     0.85;
  margin-top:  2px;
}

.riaw-status-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #22c55e;
  flex-shrink:   0;
}

.riaw-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.12);
  color:           var(--riaw-white);
  border:          none;
  cursor:          pointer;
  transition:      background var(--riaw-duration) var(--riaw-ease);
  padding:         0;
  flex-shrink:     0;
}

.riaw-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.riaw-close-btn:focus-visible {
  outline:        2px solid var(--riaw-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Greeting
   -------------------------------------------------------------------------- */
.riaw-panel-greeting {
  padding:     14px 16px 8px;
  color:       var(--riaw-primary);
  font-size:   13px;
  line-height: 1.5;
  border-bottom: 1px solid var(--riaw-border);
}

.riaw-panel-greeting p {
  margin: 0;
  font-weight: var(--riaw-font-semi);
}

/* --------------------------------------------------------------------------
   7. Option Cards
   -------------------------------------------------------------------------- */
.riaw-panel-options {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--riaw-gap);
}

.riaw-option {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  border-radius: var(--riaw-radius-sm);
  text-decoration: none;
  cursor:        pointer;
  width:         100%;
  box-sizing:    border-box; /* anchors default to content-box → overflow; force border-box */
  text-align:    left;
  font-family:   var(--riaw-font);
  transition:    transform var(--riaw-duration) var(--riaw-ease),
                 box-shadow var(--riaw-duration) var(--riaw-ease),
                 background var(--riaw-duration) var(--riaw-ease),
                 border-color var(--riaw-duration) var(--riaw-ease);
}

.riaw-option:hover {
  transform: translateY(-2px);
}

.riaw-option:focus-visible {
  outline:        2px solid var(--riaw-accent);
  outline-offset: 2px;
}

/* Chat & Phone Card — ElevenLabs base surface */
.riaw-option-chat {
  background:  var(--riaw-white);
  color:       var(--riaw-primary);
  border:      1px solid var(--riaw-border);
}

.riaw-option-chat:hover {
  border-color: var(--riaw-primary);
  background:   var(--riaw-surface);
  box-shadow:   var(--riaw-shadow-sm);
  color:        var(--riaw-primary);
  text-decoration: none;
}

/* Phone/Florence option — border only on hover (not always visible) */
.riaw-option-phone {
  background:  var(--riaw-white);
  color:       var(--riaw-primary);
  border:      1px solid transparent;
  transition:  border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.riaw-option-phone:hover {
  border-color: var(--riaw-primary);
  background:   var(--riaw-surface);
  box-shadow:   var(--riaw-shadow-sm);
}

.riaw-option-chat:active {
  background: var(--riaw-surface-active);
}

.riaw-option-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--riaw-surface);
  color:           var(--riaw-primary);
  width:           40px;
  height:          40px;
  border-radius:   50%;
  flex-shrink:     0;
  background:      rgba(255, 255, 255, 0.15);
}

.riaw-option-chat .riaw-option-icon {
  background: var(--riaw-surface);
  color:      var(--riaw-primary);
}

/* Online dot overlay on option icon circle */
.riaw-option-icon {
  position: relative;
}

.riaw-option-online-dot {
  position:      absolute;
  top:           -2px;
  right:         -2px;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    #22c55e;
  border:        2px solid var(--riaw-white);
  box-shadow:    0 0 0 1px rgba(34, 197, 94, 0.3);
  animation:     riaw-dot-pulse 2s ease-in-out infinite;
}

@keyframes riaw-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3); }
  50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
}

/* In the chat button variant, ensure the online dot still shows over the dark icon bg */
.riaw-option-chat .riaw-option-online-dot {
  border-color: var(--riaw-white);
}

.riaw-option-content {
  flex: 1;
  min-width: 0;
}

.riaw-option-label {
  display:     block;
  font-weight: var(--riaw-font-bold);
  font-size:   14px;
  line-height: 1.2;
}

.riaw-option-sub {
  display:    block;
  font-size:  11px;
  color:      var(--riaw-text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.riaw-option-phone-number {
  display:    block;
  font-size:  12px;
  font-weight: var(--riaw-font-semi);
  color:      var(--riaw-primary);
  margin-top: 3px;
}

/* Desktop note (visible on desktop, hidden on mobile) */
.riaw-desktop-note {
  font-size:  10px;
  opacity:    0.65;
  display:    block;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Jetlink default widget hider — plugin replaces Jetlink's own UI.
   The iframe is hidden by default. Only shown when html.riaw-jl-active is set
   (toggled by riaw-widget.js when the user opens chat via our button).
   -------------------------------------------------------------------------- */
.jl-chat-button,
[class*="jetlink-fab"],
[id*="jetlink-chat-button"] {
  display: none !important;
}

#jetlinkWidgetFrame,
iframe[id*="jetlink"],
iframe[src*="jetlink"] {
  visibility:     hidden !important;
  opacity:        0 !important;
  pointer-events: none !important;
  transition:     opacity 200ms ease, visibility 0s linear 200ms !important;
}

html.riaw-jl-active #jetlinkWidgetFrame,
html.riaw-jl-active iframe[id*="jetlink"],
html.riaw-jl-active iframe[src*="jetlink"] {
  visibility:     visible !important;
  opacity:        1 !important;
  pointer-events: auto !important;
  transition:     opacity 200ms ease, visibility 0s linear 0s !important;
}

/* Hide our entire widget (FAB + panel) while Jetlink chat is open.
   User clicks "Chat with Rigiman" → panel closes → Jetlink opens →
   this rule hides the pill FAB so only the Jetlink chat is visible. */
html.riaw-jl-active .riaw-widget {
  opacity:        0 !important;
  visibility:     hidden !important;
  pointer-events: none !important;
  transition:     opacity 200ms ease, visibility 0s linear 200ms !important;
}

/* --------------------------------------------------------------------------
   8. Tablet Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) and (min-width: 768px) {
  .riaw-panel {
    width: var(--riaw-panel-w-md);
  }
}

/* --------------------------------------------------------------------------
   9. Mobile Responsive (Bottom Sheet)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .riaw-widget {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right:  16px;
  }

  /* v9 — Mobile FAB now matches desktop: full pill with orbit + label.
     The old v1 rule that hid .riaw-fab-label here was removed so the
     "AI Assistant" text (or its localized equivalent) shows on mobile too. */

  .riaw-panel {
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    width:         100%;
    max-height:    80vh;
    border-radius: var(--riaw-radius) var(--riaw-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .riaw-panel.riaw-visible {
    animation: riaw-slide-up-mobile var(--riaw-duration) var(--riaw-ease) forwards;
  }

  .riaw-panel.riaw-closing {
    animation: riaw-slide-down-mobile var(--riaw-duration) var(--riaw-ease) forwards;
  }

  @keyframes riaw-slide-up-mobile {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  @keyframes riaw-slide-down-mobile {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
  }

  .riaw-desktop-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Bottom-left position variant
   -------------------------------------------------------------------------- */
.riaw-widget.riaw-position-bottom-left {
  right: auto;
  left:  var(--riaw-side-offset);
}

.riaw-widget.riaw-position-bottom-left .riaw-panel {
  right: auto;
  left:  0;
}

/* --------------------------------------------------------------------------
   11. prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .riaw-fab,
  .riaw-fab.riaw-animate {
    animation:   none !important;
    will-change: auto;
  }
  .riaw-fab-orb-inner::before {
    animation: none !important;
  }
  .riaw-panel {
    transition: opacity var(--riaw-duration) !important;
    animation:  none !important;
  }
  .riaw-panel.riaw-visible {
    display:  block;
    opacity:  1;
    transform: none;
    animation: riaw-fade-in var(--riaw-duration) ease forwards;
  }
  @keyframes riaw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .riaw-option-phone,
  .riaw-option-chat {
    transition: none !important;
  }
  .riaw-option-online-dot {
    animation: none !important;
  }
}

/* ============================================================================
   v2 — Rigiman mascot + speech bubble
   ============================================================================ */

/* Mascot color tokens (ElevenLabs palette — dark eyes, amber expert glasses) */
:root {
  --riaw-mascot-white:          #ffffff;
  --riaw-mascot-white-darker:   #e5e7eb;
  --riaw-mascot-dark:           #111827;
  /* v2.1 — eyes must be LIGHT so they're visible against the near-black visor.
     Before: #000000 (invisible, black-on-black). Now: off-white with a soft glow. */
  --riaw-mascot-eye-color:      #f8fafc;
  --riaw-mascot-eye-sad-color:  #94a3b8;
  --riaw-mascot-amber:          #f59e0b;
  --riaw-mascot-shadow:         rgba(0, 0, 0, 0.15);
}

/* ----- Mascot + bubble layout ---------------------------------------------- */
.riaw-panel .riaw-mascot-wrap {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  padding:     16px 18px 12px;
  /* Replaces old .riaw-panel-greeting block */
}

.riaw-panel .riaw-mascot-figure {
  flex:              0 0 auto;
  width:             110px;
  height:            130px;
  position:          relative;
  /* v3.1 — shrunk further (0.36) and pushed down 8px so antennas don't clip
     under the panel header */
  transform:         scale(0.36);
  transform-origin:  top center;
  margin:            8px -10px -38px 10px;
  overflow:          visible;
}

.riaw-panel .riaw-mascot-bubble {
  position:     relative;
  flex:         1 1 auto;
  min-height:   72px;
  padding:      14px 16px 14px 18px;
  background:   #ffffff;
  border:       1px solid var(--riaw-border, #e5e7eb);
  border-radius: 14px;
  font-size:    14px;
  line-height:  1.5;
  color:        #111827;
  box-shadow:   0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Triangle pointer on the left edge of the bubble */
.riaw-panel .riaw-mascot-bubble::before {
  content:      "";
  position:     absolute;
  top:          20px;
  left:         -8px;
  width:        0;
  height:       0;
  border-top:   8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--riaw-border, #e5e7eb);
}
.riaw-panel .riaw-mascot-bubble::after {
  content:      "";
  position:     absolute;
  top:          20px;
  left:         -7px;
  width:        0;
  height:       0;
  border-top:   8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
}

.riaw-panel .riaw-mascot-bubble-text {
  min-height: 40px;
  word-wrap:  break-word;
}

/* Blinking caret shown while typing */
.riaw-panel .riaw-mascot-bubble-text.is-typing::after {
  content:       "|";
  display:       inline-block;
  margin-left:   2px;
  opacity:       0.7;
  animation:     riaw-mascot-caret 0.9s steps(1) infinite;
}
@keyframes riaw-mascot-caret {
  0%, 49%   { opacity: 0.7; }
  50%, 100% { opacity: 0; }
}

.riaw-panel .riaw-mascot-skip {
  position:        absolute;
  right:           8px;
  bottom:          8px;
  width:           22px;
  height:          22px;
  padding:         0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          1px solid var(--riaw-border, #e5e7eb);
  border-radius:   999px;
  color:           #6b7280;
  cursor:          pointer;
  transition:      all 0.15s ease;
}
.riaw-panel .riaw-mascot-skip:hover {
  background: #f9fafb;
  color:      #111827;
  transform:  translateX(1px);
}

/* v3.1 — icon swap: show skip chevron while running, refresh arrow when done */
.riaw-panel .riaw-mascot-skip .riaw-mascot-skip-icon {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  transition: opacity 0.18s ease;
}
.riaw-panel .riaw-mascot-skip .riaw-mascot-skip-icon-restart { opacity: 0; }
.riaw-panel .riaw-mascot-skip .riaw-mascot-skip-icon-next    { opacity: 1; }
.riaw-panel .riaw-mascot-skip.is-done .riaw-mascot-skip-icon-next    { opacity: 0; }
.riaw-panel .riaw-mascot-skip.is-done .riaw-mascot-skip-icon-restart { opacity: 1; }
/* A gentle hover spin on the restart icon to cue "click to replay" */
.riaw-panel .riaw-mascot-skip.is-done:hover .riaw-mascot-skip-icon-restart {
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RTL: mirror the layout so mascot is on the right, bubble on the left */
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-wrap {
  flex-direction: row-reverse;
}
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-figure {
  transform:        scale(0.36) scaleX(-1);
  transform-origin: top center;
  margin:           8px 10px -38px -10px;
}
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-bubble::before,
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-bubble::after {
  left:         auto;
  right:        -8px;
  border-right: none;
  border-left:  8px solid var(--riaw-border, #e5e7eb);
}
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-bubble::after {
  right:             -7px;
  border-left-color: #ffffff;
}
.riaw-widget.riaw-rtl .riaw-panel .riaw-mascot-skip {
  right: auto;
  left:  8px;
}

/* Hide the old greeting block if it's still in the DOM for any reason */
.riaw-panel .riaw-panel-greeting { display: none; }

/* ----- 3D Rigiman mascot (ported from robot-smooth-3d.html) ---------------- */

.riaw-panel .riaw-mascot {
  position:         relative;
  transform-style:  preserve-3d;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  transition:       transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  perspective:      1500px;
}

/* Default floating animation */
.riaw-panel .riaw-mascot.is-floating {
  animation: riaw-mascot-float 4s ease-in-out infinite;
}
@keyframes riaw-mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

/* --- 3D Head Structure --- */
.riaw-panel .riaw-mascot-head-3d {
  width:            160px;
  height:           130px;
  transform-style:  preserve-3d;
  position:         relative;
  z-index:          10;
}

.riaw-panel .riaw-mascot-head-front,
.riaw-panel .riaw-mascot-head-back {
  position:            absolute;
  width:               100%;
  height:              100%;
  background:          var(--riaw-mascot-white);
  border-radius:       80px 80px 60px 60px;
  backface-visibility: hidden;
  display:             flex;
  justify-content:     center;
  align-items:         center;
  box-shadow:          inset -8px -8px 15px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.05);
}

.riaw-panel .riaw-mascot-head-front { transform: translateZ(15px); }
.riaw-panel .riaw-mascot-head-back {
  transform:  translateZ(-15px) rotateY(180deg);
  background: var(--riaw-mascot-white-darker);
  box-shadow: inset 8px -8px 15px rgba(0,0,0,0.05);
}

/* Antennas */
.riaw-panel .riaw-mascot-antenna {
  position:         absolute;
  top:              -25px;
  width:            4px;
  height:           35px;
  background:       var(--riaw-mascot-dark);
  transform-style:  preserve-3d;
}
.riaw-panel .riaw-mascot-antenna::after {
  content:       '';
  position:      absolute;
  top:           -10px;
  left:          -6px;
  width:         16px;
  height:        16px;
  background:    var(--riaw-mascot-dark);
  border-radius: 50%;
  box-shadow:    0 5px 10px rgba(0,0,0,0.2);
}
.riaw-panel .riaw-mascot-antenna-left  { left:  40px; transform: rotate(-15deg) translateZ(0px); }
.riaw-panel .riaw-mascot-antenna-right { right: 40px; transform: rotate(15deg)  translateZ(0px); }

/* Ears */
.riaw-panel .riaw-mascot-ear {
  position:      absolute;
  width:         15px;
  height:        40px;
  background:    #cbd5e1;
  border-radius: 8px;
  top:           45px;
  z-index:       -1;
}
.riaw-panel .riaw-mascot-ear-left  { left:  -10px; }
.riaw-panel .riaw-mascot-ear-right { right: -10px; }

/* Visor & Eyes */
.riaw-panel .riaw-mascot-visor {
  width:            120px;
  height:           48px;
  background:       var(--riaw-mascot-dark);
  border-radius:    20px;
  display:          flex;
  justify-content:  space-around;
  align-items:      center;
  padding:          0 15px;
  position:         relative;
  transform:        translateZ(20px);
  box-shadow:       0 5px 15px rgba(0,0,0,0.1);
}

.riaw-panel .riaw-mascot-eye {
  width:         14px;
  height:        14px;
  background:    var(--riaw-mascot-eye-color);
  border-radius: 50%;
  box-shadow:    0 0 10px var(--riaw-mascot-eye-color);
  transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.riaw-panel .riaw-mascot-mouth {
  position:        absolute;
  bottom:          22px;
  width:           34px;
  height:          12px;
  border-bottom:   3px solid var(--riaw-mascot-dark);
  border-radius:   50%;
  transform:       translateZ(10px);
  opacity:         0.8;
  transition:      all 0.3s;
}

/* --- 3D Body Structure --- */
.riaw-panel .riaw-mascot-body-3d {
  width:            130px;
  height:           130px;
  margin-top:       -15px;
  transform-style:  preserve-3d;
  position:         relative;
  z-index:          5;
}

.riaw-panel .riaw-mascot-body-front,
.riaw-panel .riaw-mascot-body-back {
  position:            absolute;
  width:               100%;
  height:              100%;
  background:          var(--riaw-mascot-white);
  border-radius:       15px 15px 65px 65px;
  backface-visibility: hidden;
  box-shadow:          inset -8px -8px 15px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05);
}

.riaw-panel .riaw-mascot-body-front { transform: translateZ(15px); }
.riaw-panel .riaw-mascot-body-back {
  transform:  translateZ(-15px) rotateY(180deg);
  background: var(--riaw-mascot-white-darker);
  box-shadow: inset 8px -8px 15px rgba(0,0,0,0.05);
}

.riaw-panel .riaw-mascot-chest-bar {
  position:      absolute;
  top:           40px;
  left:          50%;
  transform:     translateX(-50%) translateZ(5px);
  width:         40px;
  height:        8px;
  background:    #cbd5e1;
  border-radius: 4px;
  overflow:      hidden;
}
.riaw-panel .riaw-mascot-chest-level {
  width:       60%;
  height:      100%;
  background:  #10b981;
  transition:  width 0.3s;
}

/* Arms (3D) */
.riaw-panel .riaw-mascot-arm {
  position:         absolute;
  width:            32px;
  height:           75px;
  background:       var(--riaw-mascot-white);
  border-radius:    20px;
  top:              130px;
  z-index:          12;
  transition:       all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style:  preserve-3d;
  box-shadow:       inset -5px -5px 10px rgba(0,0,0,0.05);
}
.riaw-panel .riaw-mascot-arm-left  { left:  -32px; transform-origin: center 15px; transform: translateZ(10px); }
.riaw-panel .riaw-mascot-arm-right { right: -32px; transform-origin: center 15px; transform: translateZ(10px); }

.riaw-panel .riaw-mascot-finger {
  position:      absolute;
  top:           -15px;
  left:          11px;
  width:         10px;
  height:        25px;
  background:    var(--riaw-mascot-white);
  border-radius: 10px;
  opacity:       0;
  transition:    opacity 0.3s;
}

/* Ground Shadow */
.riaw-panel .riaw-mascot-ground {
  position:      absolute;
  bottom:        -50px;
  left:          50%;
  transform:     translateX(-50%);
  width:         120px;
  height:        15px;
  background:    var(--riaw-mascot-shadow);
  border-radius: 50%;
  filter:        blur(2px);
  animation:     riaw-mascot-shadow-float 4s ease-in-out infinite;
  z-index:       1;
}
@keyframes riaw-mascot-shadow-float {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: 0.6; }
  50%      { transform: translateX(-50%) scale(0.8); opacity: 0.3; }
}

/* =========================================================
   11 MODES & ANIMATIONS
   ========================================================= */

/* 1. True Spin */
.riaw-panel .riaw-mascot.mode-spin { animation: riaw-mascot-spin 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
@keyframes riaw-mascot-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* 2. Thinking Mode */
.riaw-panel .riaw-mascot.mode-thinking .riaw-mascot-arm-right { transform: rotate(-130deg) translate(-20px, 15px) translateZ(25px); }
.riaw-panel .riaw-mascot.mode-thinking .riaw-mascot-head-3d   { transform: rotateZ(10deg); }
.riaw-panel .riaw-mascot.mode-thinking .riaw-mascot-eye       { animation: riaw-mascot-move-eyes 2s infinite linear; }
@keyframes riaw-mascot-move-eyes {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-10px) translateZ(5px); }
  75%      { transform: translateX(10px)  translateZ(5px); }
}

/* 3. Writing Mode (Typing Dots) */
.riaw-panel .riaw-mascot-typing-dots {
  display:   none;
  gap:       4px;
  position:  absolute;
  transform: translateZ(5px);
}
.riaw-panel .riaw-mascot-dot {
  width:         8px;
  height:        8px;
  background:    var(--riaw-mascot-eye-color);
  border-radius: 50%;
  animation:     riaw-mascot-dot-bounce 1.4s infinite ease-in-out both;
  box-shadow:    0 0 8px var(--riaw-mascot-eye-color);
}
.riaw-panel .riaw-mascot-dot:nth-child(1) { animation-delay: -0.32s; }
.riaw-panel .riaw-mascot-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes riaw-mascot-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}
.riaw-panel .riaw-mascot.mode-writing .riaw-mascot-typing-dots { display: flex; }
.riaw-panel .riaw-mascot.mode-writing .riaw-mascot-eye         { display: none; }

.riaw-panel .riaw-mascot.mode-writing .riaw-mascot-arm-right {
  transform: rotate(-90deg) translateZ(25px);
  animation: riaw-mascot-writing-act 0.3s infinite alternate;
}
@keyframes riaw-mascot-writing-act {
  0%   { transform: rotate(-80deg) translateZ(25px) translateY(-5px); }
  100% { transform: rotate(-95deg) translateZ(25px) translateY(5px); }
}

/* 4. Sad Mode */
.riaw-panel .riaw-mascot.mode-sad .riaw-mascot-head-3d { transform: translateY(15px) rotateX(15deg) rotateZ(5deg); }
.riaw-panel .riaw-mascot.mode-sad .riaw-mascot-mouth  {
  border-bottom: none;
  border-top:    3px solid var(--riaw-mascot-dark);
  bottom:        18px;
}
.riaw-panel .riaw-mascot.mode-sad .riaw-mascot-eye {
  height:     6px;
  background: var(--riaw-mascot-eye-sad-color);
  box-shadow: 0 0 5px var(--riaw-mascot-eye-sad-color);
  transform:  translateY(5px);
}
.riaw-panel .riaw-mascot.mode-sad .riaw-mascot-chest-level {
  background: #ef4444;
  width:      15%;
}

/* 5. Smiling Mode */
.riaw-panel .riaw-mascot.mode-smiling .riaw-mascot-head-3d { transform: translateY(-5px); }
.riaw-panel .riaw-mascot.mode-smiling .riaw-mascot-mouth {
  opacity:      1;
  border-width: 4px;
  width:        40px;
}
.riaw-panel .riaw-mascot.mode-smiling .riaw-mascot-eye {
  border-radius: 50% 50% 0 0;
  height:        8px;
  transform:     translateY(3px);
  clip-path:     ellipse(60% 50% at 50% 0%);
}

/* 6. Happy Mode */
.riaw-panel .riaw-mascot.mode-happy { animation: riaw-mascot-jump 0.6s ease infinite; }
.riaw-panel .riaw-mascot.mode-happy .riaw-mascot-arm-left  { transform: rotate(140deg)  translateZ(10px); }
.riaw-panel .riaw-mascot.mode-happy .riaw-mascot-arm-right { transform: rotate(-140deg) translateZ(10px); }
.riaw-panel .riaw-mascot.mode-happy .riaw-mascot-eye      { transform: scale(1.3); }
@keyframes riaw-mascot-jump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}

/* 7. Expert Mode (Glasses) */
.riaw-panel .riaw-mascot-glasses {
  display:      none;
  position:     absolute;
  width:        100%;
  height:       100%;
  border-top:   2px solid var(--riaw-mascot-amber);
  top:          15px;
  z-index:      15;
  transform:    translateZ(15px);
}
.riaw-panel .riaw-mascot-glasses::before,
.riaw-panel .riaw-mascot-glasses::after {
  content:       '';
  position:      absolute;
  width:         45px;
  height:        45px;
  border:        3px solid var(--riaw-mascot-amber);
  border-radius: 50%;
  top:           -15px;
  background:    rgba(245, 158, 11, 0.1);
}
.riaw-panel .riaw-mascot-glasses::before { left:  10px; }
.riaw-panel .riaw-mascot-glasses::after  { right: 10px; }
.riaw-panel .riaw-mascot.mode-expert .riaw-mascot-glasses { display: block; }
.riaw-panel .riaw-mascot.mode-expert .riaw-mascot-eye {
  background: var(--riaw-mascot-amber);
  box-shadow: 0 0 12px var(--riaw-mascot-amber);
}
.riaw-panel .riaw-mascot.mode-expert .riaw-mascot-head-3d { transform: translateY(-5px); }

/* 8. Knocking */
.riaw-panel .riaw-mascot.mode-knock { animation: riaw-mascot-knock-approach 0.6s forwards; }
.riaw-panel .riaw-mascot.mode-knock .riaw-mascot-arm-right {
  animation: riaw-mascot-knock 0.6s ease infinite;
}
@keyframes riaw-mascot-knock-approach {
  to { transform: scale(1.1) translateY(-10px); }
}
@keyframes riaw-mascot-knock {
  0%, 100% { transform: rotate(-90deg) translateZ(10px); }
  50%      { transform: rotate(-90deg) translateZ(50px) scale(1.2); }
}

/* 9. Goodbye Mode */
.riaw-panel .riaw-mascot.mode-goodbye .riaw-mascot-arm-left { animation: riaw-mascot-wave 1.2s ease-in-out infinite; }
@keyframes riaw-mascot-wave {
  0%, 100% { transform: rotate(150deg) translateZ(10px); }
  50%      { transform: rotate(110deg) rotateY(20deg) translateZ(20px); }
}

/* 10. Joy Jump */
.riaw-panel .riaw-mascot.mode-joy { animation: riaw-mascot-joy 1.2s ease-in-out infinite; }
.riaw-panel .riaw-mascot.mode-joy .riaw-mascot-arm { transform: rotate(160deg) translateZ(10px); }
.riaw-panel .riaw-mascot.mode-joy .riaw-mascot-eye {
  border-radius: 50% 50% 0 0;
  height:        8px;
  clip-path:     ellipse(60% 50% at 50% 0%);
}
@keyframes riaw-mascot-joy {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50%      { transform: translateY(-80px) rotateY(180deg) scale(1.1); }
}

/* 11. Shush Mode */
.riaw-panel .riaw-mascot.mode-shush .riaw-mascot-arm-right { transform: rotate(-130deg) translate(-25px, -15px) translateZ(60px); }
.riaw-panel .riaw-mascot.mode-shush .riaw-mascot-finger    { opacity: 1; }
.riaw-panel .riaw-mascot.mode-shush .riaw-mascot-mouth {
  width:  8px;
  height: 8px;
}

/* ----- Mascot reduced-motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .riaw-panel .riaw-mascot,
  .riaw-panel .riaw-mascot *,
  .riaw-panel .riaw-mascot-bubble-text.is-typing::after {
    animation:  none !important;
    transition: none !important;
  }
}

/* ============================================================================
   v1.5 — Consent Overlay (slides up inside the panel)
   ============================================================================ */

/* The overlay covers the panel below the header — absolute positioned so the
   panel itself doesn't resize. options + mascot are behind it. */
/* v1.5.3 fix — consent overlay is now a FLOW element (not absolute).
   When shown, mascot-wrap + panel-options are hidden via JS and the
   overlay takes their place in the natural document flow. This avoids
   z-index conflicts with the panel header and ensures the consent
   header (← Back + title) is always visible below the panel header. */
.riaw-consent-overlay {
  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
  min-height:     0;
  overflow-y:     auto;
}

.riaw-consent-header {
  display:          flex;
  align-items:      center;
  gap:              10px;
  padding:          10px 14px;
  background:       var(--riaw-accent-bg, #000);
  color:            var(--riaw-accent-text, #fff);
  border-radius:    0;
  flex-shrink:      0;
}

.riaw-consent-back {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  width:       28px;
  height:      28px;
  padding:     0;
  border:      none;
  border-radius: 50%;
  background:  rgba(255, 255, 255, 0.15);
  color:       inherit;
  cursor:      pointer;
  transition:  background 0.15s ease;
}
.riaw-consent-back:hover {
  background: rgba(255, 255, 255, 0.3);
}

.riaw-consent-title {
  font-family:   var(--riaw-font, 'Montserrat', sans-serif);
  font-size:     15px;
  font-weight:   600;
}

.riaw-consent-body {
  flex:        1 1 auto;
  padding:     10px 14px;
  overflow-y:  auto;
  /* Ensure body scrolls within overlay, not the whole panel */
  min-height:  0;
}

.riaw-consent-check {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  margin-bottom: 10px;
  cursor:      pointer;
}

.riaw-consent-check input[type="checkbox"] {
  flex-shrink:   0;
  width:         16px;
  height:        16px;
  margin-top:    1px;
  accent-color:  #10b981;
  cursor:        pointer;
}

.riaw-consent-text {
  font-size:    11px;
  line-height:  1.4;
  color:        #374151;
}

.riaw-consent-footer {
  flex-shrink:  0;
  padding:      8px 14px 12px;
  text-align:   center;
}

.riaw-consent-call-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         12px 20px;
  border:          none;
  border-radius:   12px;
  background:      #10b981;
  color:           #ffffff;
  font-family:     var(--riaw-font, 'Montserrat', sans-serif);
  font-size:       15px;
  font-weight:     600;
  cursor:          pointer;
  transition:      background 0.2s ease, opacity 0.2s ease;
}
.riaw-consent-call-btn:hover:not(:disabled) {
  background: #059669;
}
.riaw-consent-call-btn:disabled {
  background:   #d1d5db;
  color:        #9ca3af;
  cursor:       not-allowed;
  opacity:      0.7;
}
.riaw-consent-call-btn svg {
  flex-shrink: 0;
}

.riaw-consent-links {
  margin-top:  10px;
  font-size:   12px;
  color:       #9ca3af;
}
.riaw-consent-links a {
  color:           #6b7280;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.riaw-consent-links a:hover {
  color: #111827;
}
.riaw-consent-sep {
  margin: 0 6px;
}

/* RTL: flip back arrow direction */
.riaw-widget.riaw-rtl .riaw-consent-back svg {
  transform: scaleX(-1);
}
.riaw-widget.riaw-rtl .riaw-consent-text {
  text-align: right;
}

/* Phone option — hide phone number display (v1.5: consent handles the call) */
.riaw-option-phone .riaw-option-phone-number {
  display: none;
}

/* Florence AI supported languages — rotating badge inside consent overlay footer */
.riaw-florence-langs {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           5px;
  padding:       8px 0 0;
  font-size:     11px;
  color:         #6b7280;
  min-height:    20px;
}
.riaw-florence-langs-label {
  white-space: nowrap;
  flex-shrink: 0;
  /* Fixed position — never shifts when badge text changes width */
}
.riaw-florence-langs-badge {
  display:     inline-block;
  min-width:   80px;         /* reserve space so label doesn't shift */
  font-weight: 600;
  color:       #374151;
  transition:  opacity 0.4s ease-in-out;
}
.riaw-florence-langs-badge.is-fading {
  opacity: 0;
}

/* Desktop: show phone number link, hide Call Now button */
.riaw-consent-number {
  text-align: center;
  margin-bottom: 10px;
}
.riaw-consent-phone-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         14px 20px;
  background:      #10b981;
  color:           #ffffff;
  font-family:     var(--riaw-font, 'Montserrat', sans-serif);
  font-size:       18px;
  font-weight:     700;
  letter-spacing:  0.02em;
  border-radius:   12px;
  text-decoration: none;
  transition:      background 0.2s ease;
  box-sizing:      border-box;
}
.riaw-consent-phone-link:hover {
  background: #059669;
  color:      #ffffff;
}

/* Disclaimer text */
.riaw-consent-disclaimer {
  font-size:    11px;
  line-height:  1.3;
  color:        #9ca3af;
  text-align:   center;
  margin:       8px 0 4px;
  font-style:   italic;
}

/* v1.5.2 — Desktop: "Access AI Assistant" buton gösterilir, tıklayınca numara reveal olur.
   Mobile: aynı buton görünür ama tıklayınca direkt tel: arama yapar.
   Phone number element her iki platformda da gizli başlar, JS ile açılır. */