/* ============================================================
   Floating — left vertical quick-contact stack · right AI assistant FAB
============================================================ */

/* ============================================================
   FLOATING ACTION BUTTONS — Left vertical stack + Right AI FAB
============================================================ */
    /* === LEFT: vertical stack (centered) === */
    .float-side {
      position: fixed;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 500;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.float-btn {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
      transition: transform 0.3s var(--ease-spring),
        box-shadow 0.3s var(--ease-smooth);
    }

.float-btn::before {
      /* subtle ring on hover */
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid currentColor;
      opacity: 0;
      transition: opacity 0.25s ease, inset 0.25s ease;
    }

.float-btn:hover {
      transform: scale(1.10) translateX(3px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    }

.float-btn:hover::before {
      opacity: 0.30;
      inset: -6px;
    }

.float-btn-wa {
      background: #25D366;
    }

.float-btn-tg {
      background: #229ED9;
    }

.float-btn-msgr {
      background: #0084FF;
    }

.float-btn-call {
      background: var(--amber);
    }

/* Tooltip on hover (desktop only) */
    .float-tooltip {
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%) translateX(-6px);
      background: var(--color-sky-800);
      color: #fff;
      padding: 8px 14px;
      border-radius: 10px;
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      letter-spacing: 0.01em;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      box-shadow: 0 6px 20px rgba(15, 26, 46, 0.20);
    }

.float-tooltip::before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-right-color: var(--color-sky-800);
    }

.float-btn:hover .float-tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

/* === RIGHT: AI assistant FAB === */
    .fab-ai {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 500;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      color: #fff;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border: none;
      cursor: pointer;
      box-shadow: 0 14px 36px rgba(37, 99, 235, 0.45);
      transition: transform 0.3s var(--ease-spring);
      animation: fab-pulse 2.6s ease-in-out infinite;
    }

@keyframes fab-pulse {

      0%,
      100% {
        box-shadow: 0 14px 36px rgba(37, 99, 235, 0.45),
          0 0 0 0 rgba(37, 99, 235, 0.35);
      }

      50% {
        box-shadow: 0 14px 36px rgba(37, 99, 235, 0.45),
          0 0 0 16px rgba(37, 99, 235, 0);
      }
    }

.fab-ai:hover {
      transform: scale(1.10);
    }

.fab-ai-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      animation: fab-bob 3s ease-in-out infinite;
    }

@keyframes fab-bob {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-3px);
      }
    }

.fab-ai-label {
      position: absolute;
      right: calc(100% + 14px);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: var(--color-sky-800);
      color: #fff;
      padding: 10px 18px;
      border-radius: 12px;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      box-shadow: 0 6px 20px rgba(15, 26, 46, 0.22);
    }

.fab-ai-label::after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 7px solid transparent;
      border-left-color: var(--color-sky-800);
    }

.fab-ai:hover .fab-ai-label {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

.fab-ai-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #10B981;
      border: 2px solid #fff;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
    }