/*
 * librifly-widget.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for the Librifly Customer Service floating chat widget.
 * Upload this file to your web server alongside librifly-chatbot.html.
 * Link it in your website pages with:
 *   <link rel="stylesheet" href="/librifly-widget.css">
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Floating help button ──────────────────────────────────────────────────── */
.librifly-widget-btn {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  z-index:       9998;

  display:       flex;
  align-items:   center;
  gap:           8px;

  height:        48px;
  padding:       0 20px;
  border:        none;
  border-radius: 24px;
  cursor:        pointer;

  background:    #2E9E8A;   /* Librifly teal */
  color:         #ffffff;

  font-family:   'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size:     14px;
  font-weight:   600;
  letter-spacing:.01em;

  box-shadow:    0 4px 20px rgba(0, 0, 0, 0.20);
  transition:    background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.librifly-widget-btn:hover {
  background:    #236E60;   /* Darker teal on hover */
  box-shadow:    0 6px 28px rgba(0, 0, 0, 0.26);
  transform:     translateY(-1px);
}

.librifly-widget-btn:active {
  transform:     translateY(0);
  box-shadow:    0 3px 12px rgba(0, 0, 0, 0.18);
}

.librifly-widget-btn span:first-child {
  font-size:     20px;
  line-height:   1;
}

/* ── Chat iframe ───────────────────────────────────────────────────────────── */
.librifly-widget-frame {
  position:      fixed;
  bottom:        86px;
  right:         24px;
  z-index:       9999;

  width:         380px;
  height:        580px;
  border:        none;
  border-radius: 14px;
  display:       none;             /* shown/hidden by the JS toggle */

  box-shadow:    0 8px 40px rgba(0, 0, 0, 0.18);

  /* Smooth open animation */
  animation:     widget-open 0.22s ease;
}

@keyframes widget-open {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Mobile adjustments ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .librifly-widget-frame {
    width:         100vw;
    height:        100dvh;   /* full screen on mobile */
    bottom:        0;
    right:         0;
    border-radius: 0;
  }

  .librifly-widget-btn {
    bottom: 16px;
    right:  16px;
  }
}

/* ── Optional: keep button above other fixed elements on your site ─────────── */
/*
   If your website has its own fixed header or footer that overlaps the button,
   adjust the bottom/right values here:

   .librifly-widget-btn  { bottom: 80px; }
   .librifly-widget-frame { bottom: 140px; }
*/