/* =============================================================================
   CHAT WIDGET — CUSTOMER FACING
   ============================================================================= */


/* ── FAB (Floating Action Button) ─────────────────────────────── */

.chat-fab {
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   background: linear-gradient(135deg, #185FA5, #0C447C);
   color: #fff;
   border: none;
   border-radius: 50px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
   font-family: inherit;
   box-shadow: 0 4px 20px rgba(24, 95, 165, 0.35);
   transition: transform 0.2s, box-shadow 0.2s;
   z-index: 9998;
}
.chat-fab:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 24px rgba(24, 95, 165, 0.45);
   background: linear-gradient(135deg, #185FA5, #0C447C);
   background-image: linear-gradient(135deg, #185FA5, #0C447C);
   text-shadow: none;
}
.chat-fab:hover [data-icon="rys"]:empty::before {
   color: #FF6600;
}
.chat-fab svg {
   flex-shrink: 0;
}
.chat-fab [data-icon="rys"] {
   font-size: 20px;
   flex-shrink: 0;
   line-height: 1;
}
/* Font Awesome fallback when the icon system (data-is) is unavailable (ti.2) */
[data-icon="rys"]:empty::before {
   font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 900;
   content: "\f075";
   color: #FF6600;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.chat-fab-text {
   display: flex;
   flex-direction: column;
   text-align: center;
   line-height: 1.2;
}
.chat-fab-title {
   font-size: 13px;
   font-weight: 600;
}
.chat-fab-sub {
   font-size: 10px;
   font-weight: 400;
   opacity: 0.85;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}
.chat-fab-sub::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #2BE38A;
   box-shadow: 0 0 0 0 rgba(43, 227, 138, 0.7);
   animation: chat-fab-live-pulse 2s infinite;
   flex-shrink: 0;
}
.chat-fab.is-offline .chat-fab-sub::before {
   display: none;
}
@keyframes chat-fab-live-pulse {
   0%   { box-shadow: 0 0 0 0 rgba(43, 227, 138, 0.7); }
   70%  { box-shadow: 0 0 0 6px rgba(43, 227, 138, 0); }
   100% { box-shadow: 0 0 0 0 rgba(43, 227, 138, 0); }
}
.chat-chip-live-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #229A60;
   background: #E7F6EE;
   border: 1px solid #C7EAD6;
   border-radius: 10px;
   padding: 2px 7px;
   margin-left: 8px;
   vertical-align: middle;
}
.chat-chip-live-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #2BB673;
   box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.6);
   animation: chat-chip-live-pulse 2s infinite;
   flex-shrink: 0;
}
@keyframes chat-chip-live-pulse {
   0%   { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.6); }
   70%  { box-shadow: 0 0 0 5px rgba(43, 182, 115, 0); }
   100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); }
}


/* ── Widget container ─────────────────────────────────────────── */

.chat-widget {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 380px;
   max-height: 580px;
   background: #fff;
   border-radius: 16px;
   border: 1px solid rgba(0,0,0,0.08);
   box-shadow: 0 12px 40px rgba(0,0,0,0.12);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 9999;
   font-family: inherit;
}

@media (max-width: 440px) {
   .chat-widget {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      max-height: none;
      border-radius: 0;
      border: none;
      box-shadow: none;
   }
   .chat-body {
      min-height: 0 !important;
      flex: 1 1 0% !important;
      overflow-y: auto !important;
   }
   .chat-fab {
      bottom: 14px;
      right: 14px;
   }
}


/* ── Header ───────────────────────────────────────────────────── */

.chat-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   background: linear-gradient(135deg, #185FA5, #0C447C);
   flex-shrink: 0;
}
.chat-header-left {
   display: flex;
   align-items: center;
   gap: 10px;
}
.chat-header-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #5DCAA5;
   border: 2px solid rgba(255,255,255,0.3);
   flex-shrink: 0;
}
.chat-header-logo {
   font-size: 22px;
   flex-shrink: 0;
   line-height: 1;
}
.chat-header-title {
   font-weight: 500;
   font-size: 14px;
   color: #fff;
}
.chat-header-subtitle {
   font-size: 11px;
   color: rgba(255,255,255,0.6);
   display: inline-flex;
   align-items: center;
   gap: 5px;
}
.chat-header-subtitle.is-live::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #2BE38A;
   box-shadow: 0 0 0 0 rgba(43, 227, 138, 0.7);
   animation: chat-fab-live-pulse 2s infinite;
   flex-shrink: 0;
}
.chat-close-btn {
   background: none;
   border: none;
   color: rgba(255,255,255,0.6);
   font-size: 20px;
   cursor: pointer;
   padding: 2px 8px;
   line-height: 1;
}
.chat-close-btn:hover {
   color: #fff;
}
.chat-header-right {
   display: flex;
   align-items: center;
   gap: 6px;
}
.chat-end-btn {
   padding: 4px 10px;
   font-size: 11px;
   font-family: inherit;
   border: 1px solid rgba(255,255,255,0.3);
   background: rgba(255,255,255,0.1);
   color: rgba(255,255,255,0.8);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s;
}
.chat-end-btn:hover {
   background: rgba(255,255,255,0.2);
   color: #fff;
}
.chat-chip--danger {
   background: #E24B4A;
   color: #fff;
   border-color: #E24B4A;
}
.chat-chip--danger:hover {
   background: #A32D2D;
}


/* ── Message body ─────────────────────────────────────────────── */

.chat-body {
   flex: 1;
   overflow-y: auto;
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-height: 200px;
}


/* ── Bubbles ──────────────────────────────────────────────────── */

.chat-row {
   display: flex;
   margin: 3px 0;
}
.chat-row--bot {
   justify-content: flex-start;
}
.chat-row--user {
   justify-content: flex-end;
}

.chat-bubble {
   max-width: 84%;
   padding: 10px 14px;
   border-radius: 14px;
   font-size: 13.5px;
   line-height: 1.5;
   word-wrap: break-word;
   white-space: pre-wrap;
}
.chat-bubble--bot {
   background: #f3f3f3;
   color: #1a1a1a;
   border-bottom-left-radius: 4px;
}
.chat-bubble--user {
   background: #185FA5;
   color: #fff;
   border-bottom-right-radius: 4px;
}
/* Agent (live human specialist) — soft blue tint + brand-blue accent
   stripe so customers can tell at a glance when a real person has joined
   the conversation versus the scripted bot. */
.chat-bubble--agent {
   background: #e0ecf8;
   color: #0f172a;
   border-left: 3px solid #185FA5;
   border-bottom-left-radius: 4px;
   padding-left: 11px;
}
.chat-bubble--agent .chat-bubble-time {
   color: #5b7fa8;
}

.chat-bubble-time {
   font-size: 10px;
   margin-top: 3px;
   text-align: right;
}
.chat-bubble--bot .chat-bubble-time,
.chat-bubble--agent .chat-bubble-time {
   color: #aaa;
}
.chat-bubble--user .chat-bubble-time {
   color: rgba(255,255,255,0.55);
}

/* Links inside bot bubbles — clear color + underline so they read as links */
.chat-bubble--bot a,
.chat-bubble--agent a {
   color: #185FA5;
   font-weight: 600;
   text-decoration: underline;
}
.chat-bubble--bot a:hover,
.chat-bubble--agent a:hover { color: #0d4480; }


/* ── Typing indicator ─────────────────────────────────────────── */

.chat-typing {
   display: flex;
   gap: 4px;
   padding: 14px 14px 10px;
}
.chat-typing-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #bbb;
   animation: chatTypingBounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes chatTypingBounce {
   0%, 80%, 100% { transform: translateY(0); }
   40% { transform: translateY(-5px); }
}


/* ── Quick-reply chips area ───────────────────────────────────── */

.chat-options {
   padding: 4px 14px 8px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   max-height: 240px;
   overflow-x: hidden;
   overflow-y: auto;
   flex-shrink: 0;
}
.chat-options:empty {
   display: none;
}

.chat-chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 8px 14px;
   font-size: 13px;
   font-family: inherit;
   border: 1px solid rgba(0,0,0,0.12);
   background: #fff;
   color: #1a1a1a;
   border-radius: 20px;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s;
   white-space: nowrap;
   text-decoration: none;
}
.chat-chip:hover {
   background: #f5f5f5;
   border-color: rgba(0,0,0,0.2);
}
.chat-chip--primary {
   background: #185FA5;
   color: #fff;
   border-color: #185FA5;
}
.chat-chip--primary:hover {
   background: #0C447C;
}

/* Big chips for initial prompt — unmissable CTAs */
.chat-options--initial {
   flex-direction: column;
   gap: 8px;
   padding: 8px 14px 12px;
   max-height: none;
   overflow: visible;
}
.chat-chip--big {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 14px 20px;
   font-size: 15px;
   font-weight: 600;
   border-radius: 12px;
   border: 2px solid rgba(0,0,0,0.1);
   background: #fff;
   color: #1a1a1a;
   transition: all 0.15s;
   text-decoration: none;
}
.chat-chip--big .chat-chip-icon {
   font-size: 18px;
}
.chat-chip--big:hover {
   border-color: #185FA5;
   background: #EBF4FF;
}
.chat-chip--big:active {
   transform: scale(0.98);
}

@media (max-width: 440px) {
   .chat-chip--big {
      padding: 16px 20px;
      font-size: 17px;
   }
   /* Bigger tap target + extra breathing room above the bottom edge so the
      "Skip if you prefer..." button isn't crowded against the phone's
      home-bar / browser chrome. safe-area-inset-bottom adds the iOS home
      indicator clearance on top of the base 32px gap. */
   .chat-amenity-footer {
      padding: 10px 14px calc(32px + env(safe-area-inset-bottom, 0px));
   }
   .chat-amenity-done {
      font-size: 15px;
      padding: 14px 16px;
      min-height: 48px;
   }

   /* Mobile-wide bump: chat copy, chips, inputs and amenity rows are all
      a touch larger so the widget reads comfortably at arm's length and
      every tap target clears the 44px iOS minimum. */
   .chat-bubble {
      font-size: 15px;
      padding: 12px 15px;
   }
   .chat-bubble-time {
      font-size: 11px;
   }
   .chat-header-title { font-size: 16px; }
   .chat-header-subtitle { font-size: 12px; }
   .chat-end-btn { font-size: 13px; padding: 6px 12px; }
   .chat-close-btn { font-size: 24px; padding: 4px 10px; }

   .chat-chip {
      font-size: 15px;
      padding: 11px 16px;
      min-height: 44px;
   }
   .chat-chip-icon { font-size: 16px; }

   .chat-input {
      font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus */
      padding: 12px 14px;
   }
   .chat-send-btn {
      width: 44px;
      height: 44px;
   }

   .chat-amenity {
      font-size: 15px;
      padding: 12px 16px;
      min-height: 44px;
   }
   .chat-amenity-icon { font-size: 17px; }
   .chat-amenity-group-header {
      padding: 12px 14px;
      font-size: 15px;
   }
   .chat-amenity-group-title { font-size: 15px; }

   .chat-event-name { font-size: 15px; }
   .chat-event-detail,
   .chat-event-meta { font-size: 13px; }
   .chat-event-item { padding: 12px 14px; }
}
.chat-chip-icon {
   font-size: 14px;
   line-height: 1;
}


/* ── Amenity chips (stacked, toggleable) ──────────────────────── */

.chat-options--stacked {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: stretch;
}

.chat-amenity {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 14px;
   font-size: 13px;
   font-family: inherit;
   border: 1px solid rgba(0,0,0,0.08);
   background: #fff;
   color: #1a1a1a;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
   width: 100%;
}
.chat-amenity:hover {
   border-color: rgba(0,0,0,0.15);
}
.chat-amenity.is-selected {
   border-color: #185FA5;
   background: #E6F1FB;
}
.chat-amenity-icon {
   font-size: 15px;
   flex-shrink: 0;
}
.chat-amenity-label {
   flex: 1;
}
.chat-amenity-check {
   color: #185FA5;
   font-weight: 500;
   font-size: 14px;
}

/* ── Amenity accordion layout ─────────────────────────────────── */

.chat-options--amenities {
   flex-direction: column;
   flex-wrap: nowrap !important;
   padding: 0;
   max-height: none;
   overflow: visible;
   gap: 0;
   flex-shrink: 0;
}

.chat-amenity-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 4px 14px 0;
}

/* Footer with done button — absolutely positioned, NEVER moves */
.chat-amenity-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 8px 14px 10px;
   background: #fff;
   border-top: 1px solid rgba(0,0,0,0.08);
   z-index: 10;
}
.chat-amenity-done {
   width: 100%;
   justify-content: center;
   display: flex;
   font-size: 12px;
}

/* Group container */
.chat-amenity-group {
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 10px;
   overflow: hidden;
   background: #fff;
}

/* Group header — arrow left, content right */
.chat-amenity-group-header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   transition: background 0.15s;
   background: #f7f8fa;
}
.chat-amenity-group-header:active {
   background: #eef0f4;
}
.chat-amenity-group.is-open .chat-amenity-group-header {
   border-bottom: 1px solid rgba(0,0,0,0.08);
}
.chat-amenity-group-arrow {
   font-size: 14px;
   font-weight: 400;
   color: #999;
   flex-shrink: 0;
   transition: transform 0.2s;
   line-height: 1;
   width: 16px;
   text-align: center;
}
.chat-amenity-group.is-open .chat-amenity-group-arrow {
   color: #185FA5;
}
.chat-amenity-group-icon {
   font-size: 15px;
   flex-shrink: 0;
   line-height: 1;
}
.chat-amenity-group-title {
   flex: 1;
   font-size: 13px;
   font-weight: 700;
   color: #1a1a1a;
   letter-spacing: 0.2px;
}
.chat-amenity-group-count {
   font-size: 10px;
   font-weight: 500;
   color: #999;
   background: rgba(0,0,0,0.06);
   padding: 1px 7px;
   border-radius: 8px;
   flex-shrink: 0;
}
.chat-amenity-group-badge {
   font-size: 10px;
   font-weight: 600;
   color: #185FA5;
   background: #E6F1FB;
   padding: 2px 7px;
   border-radius: 8px;
}
.chat-amenity-group-badge:empty {
   display: none;
}

/* Group body — animated expand (mobile inline) */
.chat-amenity-group-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
   background: #fff;
}

/* On desktop, hide the inline body — flyout portal is used instead */
@media (min-width: 441px) {
   .chat-amenity-group-body {
      display: none !important;
   }
   .chat-amenity-group.is-open .chat-amenity-group-header {
      background: #EBF4FF;
      border-bottom: none;
      border-left: 3px solid #185FA5;
   }
}

/* Desktop flyout — portal on document.body, escapes widget overflow */
.chat-amenity-flyout {
   position: fixed;
   width: 220px;
   background: #fff;
   border: 1px solid rgba(0,0,0,0.12);
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.12);
   z-index: 10001;
   overflow: hidden;
}
.chat-amenity-flyout .chat-amenity {
   border: none;
   border-top: 1px solid rgba(0,0,0,0.04);
   padding: 10px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 400;
   color: #444;
   background: #fff;
   transition: background 0.15s;
   font-family: inherit;
}
.chat-amenity-flyout .chat-amenity:first-child { border-top: none; }
.chat-amenity-flyout .chat-amenity:hover { background: #f9f9f9; }
.chat-amenity-flyout .chat-amenity.is-selected { background: #EBF4FF; color: #1a1a1a; font-weight: 500; }
.chat-amenity-flyout .chat-amenity .chat-amenity-icon { font-size: 13px; opacity: 0.6; }
.chat-amenity-flyout .chat-amenity.is-selected .chat-amenity-icon { opacity: 1; }
.chat-amenity-group-body .chat-amenity {
   border: none;
   border-radius: 0;
   border-top: 1px solid rgba(0,0,0,0.04);
   padding: 9px 14px 9px 38px;
   margin: 0;
   font-size: 13px;
   font-weight: 400;
   color: #444;
}
.chat-amenity-group-body .chat-amenity .chat-amenity-icon {
   font-size: 13px;
   opacity: 0.6;
}
.chat-amenity-group-body .chat-amenity .chat-amenity-label {
   font-weight: 400;
}
.chat-amenity-group-body .chat-amenity:hover {
   background: #f9f9f9;
}
.chat-amenity-group-body .chat-amenity.is-selected {
   background: #EBF4FF;
   color: #1a1a1a;
   font-weight: 500;
}
.chat-amenity-group-body .chat-amenity.is-selected .chat-amenity-icon {
   opacity: 1;
}

/* Group divider (unused now but kept for compatibility) */
.chat-amenity-divider {
   font-size: 11px;
   font-weight: 700;
   color: #888;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 8px 4px 4px;
}
.chat-amenity-divider:first-child {
   padding-top: 0;
}


/* ── Event list (search results) ──────────────────────────────── */

.chat-event-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 4px 0 0;
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 10px;
   overflow: hidden;
}

.chat-event-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   background: #fff;
   cursor: pointer;
   text-align: left;
   font-family: inherit;
   transition: background 0.15s;
   width: 100%;
   border: none;
   border-top: 1px solid rgba(0,0,0,0.05);
   box-sizing: border-box;
}
.chat-event-item:first-child { border-top: none; }
.chat-event-item:hover { background: #f9f9f9; }
.chat-event-item.is-selected { background: #EBF4FF; }
.chat-event-item-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.chat-event-check {
   width: 20px; height: 20px; border-radius: 50%;
   border: 2px solid rgba(0,0,0,0.15); flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
   transition: all 0.15s;
}
.chat-event-item.is-selected .chat-event-check {
   border-color: #185FA5; background: #185FA5;
}
.chat-event-item.is-selected .chat-event-check::after {
   content: '✓'; color: #fff; font-size: 11px; font-weight: 600;
}

.chat-event-name { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.chat-event-detail { font-weight: 400; color: #666; font-size: 12px; }
.chat-event-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #888; margin-top: 1px; }
.chat-event-price { font-weight: 600; color: #185FA5; font-size: 12px; }
.chat-event-date { font-size: 12px; color: #888; }
.chat-event-more { font-size: 11px; color: #999; text-align: center; padding: 8px 0; background: #fafafa; border-top: 1px solid rgba(0,0,0,0.05); }

.chat-event-expand {
   display: block;
   width: 100%;
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
   color: #185FA5;
   background: #fafafa;
   border: none;
   border-top: 1px solid rgba(0,0,0,0.05);
   padding: 10px 14px;
   cursor: pointer;
   text-align: center;
   transition: background 0.15s;
}
.chat-event-expand:hover { background: #f1f5fa; }

.chat-event-actions {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-top: 10px;
}
.chat-event-done-btn {
   width: 100%;
   justify-content: center;
   display: flex;
}
.chat-event-browse-btn {
   width: 100%;
   justify-content: center;
   display: flex;
}
.chat-row--wide {
   max-width: 100%;
   width: 100%;
   display: block;
}
.chat-row--wide .chat-event-actions {
   width: 100%;
}
.chat-row--wide .chat-event-list {
   width: 100%;
}


/* ── Input bar ────────────────────────────────────────────────── */

.chat-input-bar {
   display: flex;
   gap: 8px;
   padding: 10px 14px;
   border-top: 1px solid rgba(0,0,0,0.06);
   background: #fff;
   flex-shrink: 0;
}

.chat-input {
   flex: 1;
   padding: 9px 12px;
   font-size: 13px;
   font-family: inherit;
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 8px;
   background: #f7f7f7;
   color: #1a1a1a;
   outline: none;
   transition: border-color 0.15s;
}
.chat-input:focus {
   border-color: #185FA5;
}
.chat-input::placeholder {
   color: #aaa;
}

.chat-send-btn {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: none;
   background: #185FA5;
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: opacity 0.15s;
}
.chat-send-btn:disabled {
   opacity: 0.35;
   cursor: default;
}


/* ── Handoff bar ──────────────────────────────────────────────── */

.chat-handoff-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   background: #EBF4FF;
   font-size: 13px;
   color: #555;
   flex-shrink: 0;
}
.chat-handoff-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #0067ce;
   animation: chatHandoffPulse 1.5s ease-in-out infinite;
}
.chat-handoff-logo {
   font-size: 16px;
   flex-shrink: 0;
   animation: chatHandoffPulse 1.5s ease-in-out infinite;
}
@keyframes chatHandoffPulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}


/* ── Header right (minimize + end chat) ───────────────────────── */

.chat-header-right {
   display: flex;
   align-items: center;
   gap: 6px;
}

.chat-end-btn {
   padding: 4px 10px;
   font-size: 11px;
   font-family: inherit;
   font-weight: 500;
   border: 1px solid rgba(255,255,255,0.35);
   background: transparent;
   color: rgba(255,255,255,0.8);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s;
}
.chat-end-btn:hover {
   background: rgba(255,255,255,0.15);
   color: #fff;
   border-color: rgba(255,255,255,0.5);
}

/* ── Danger chip (end chat confirmation) ──────────────────────── */

.chat-chip--danger {
   background: #E24B4A;
   color: #fff;
   border-color: #E24B4A;
}
.chat-chip--danger:hover {
   background: #c93a39;
}



/* ── Header right section ─────────────────────────────────────── */

.chat-header-right {
   display: flex;
   align-items: center;
   gap: 6px;
}

/* ── End chat button ──────────────────────────────────────────── */

.chat-end-btn {
   padding: 4px 10px;
   font-size: 11px;
   font-family: inherit;
   border: 1px solid rgba(255,255,255,0.35);
   background: transparent;
   color: rgba(255,255,255,0.8);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s;
}
.chat-end-btn:hover {
   background: rgba(255,255,255,0.15);
   color: #fff;
   border-color: rgba(255,255,255,0.5);
}

/* ── Danger chip (end chat confirm) ───────────────────────────── */

.chat-chip--danger {
   background: #E24B4A;
   color: #fff;
   border-color: #E24B4A;
}
.chat-chip--danger:hover {
   background: #c43a39;
}


/* ── End chat button + header right ───────────────────────────── */

.chat-header-right {
   display: flex;
   align-items: center;
   gap: 6px;
}
.chat-end-btn {
   padding: 4px 10px;
   font-size: 11px;
   font-family: inherit;
   font-weight: 500;
   border: 1px solid rgba(255,255,255,0.3);
   background: transparent;
   color: rgba(255,255,255,0.7);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.15s;
}
.chat-end-btn:hover {
   background: rgba(255,255,255,0.1);
   color: #fff;
   border-color: rgba(255,255,255,0.5);
}

/* Danger chip for end chat confirmation */
.chat-chip--danger {
   background: #E24B4A;
   color: #fff;
   border-color: #E24B4A;
}
.chat-chip--danger:hover {
   background: #c93d3d;
}


/* ── Chat closed banner (agent closed) ────────────────────────── */

.chat-closed-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 20px 16px;
   margin: 12px 0;
   background: #FEF0F0;
   border: 1px solid #F7C1C1;
   border-radius: 12px;
}
.chat-closed-banner-icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #E24B4A;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
}
.chat-closed-banner-title {
   font-weight: 600;
   font-size: 14px;
   color: #791F1F;
   margin-bottom: 4px;
}
.chat-closed-banner-text {
   font-size: 12px;
   color: #A32D2D;
   line-height: 1.5;
   max-width: 260px;
}


/* ── Ticket suggestion cards (sent by agent) ─────────────────── */

.chat-sugg-intro {
   font-weight: 600;
   font-size: 13px;
   margin-bottom: 8px;
}
.chat-sugg-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.chat-sugg-card {
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 10px;
   overflow: hidden;
   background: #fff;
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-sugg-card:hover {
   border-color: rgba(0,0,0,0.2);
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.chat-sugg-photo {
   width: 100%;
   max-height: 120px;
   overflow: hidden;
}
.chat-sugg-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.chat-sugg-body {
   padding: 10px 12px;
}
.chat-sugg-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
}
.chat-sugg-section {
   font-weight: 600;
   font-size: 13px;
   color: #1a1a1a;
}
.chat-sugg-price {
   font-weight: 600;
   font-size: 14px;
   color: #185FA5;
}
.chat-sugg-price small {
   font-weight: 400;
   font-size: 11px;
   color: #999;
}
.chat-sugg-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-bottom: 6px;
}
.chat-sugg-tag {
   display: inline-flex;
   align-items: center;
   padding: 2px 7px;
   font-size: 10px;
   font-weight: 600;
   border-radius: 4px;
   white-space: nowrap;
}
.chat-sugg-tag--marquee { background: #FFF3CD; color: #8B6914; }
.chat-sugg-tag--deal { background: #E1F5EE; color: #0F7B55; }
.chat-sugg-tag--seats { background: #EBF4FF; color: #185FA5; }
.chat-sugg-detail {
   font-size: 11px;
   color: #888;
   margin-bottom: 8px;
}
.chat-sugg-cta {
   display: block;
   text-align: center;
   padding: 8px 12px;
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   background: #185FA5;
   border-radius: 8px;
   text-decoration: none;
   transition: background 0.15s;
}
.chat-sugg-cta:hover {
   background: #0C447C;
}

/* Make suggestion cards work inside bot bubbles */
.chat-bubble--bot .chat-sugg-card {
   border-color: rgba(0,0,0,0.08);
}
.chat-bubble--bot .chat-sugg-intro {
   color: #1a1a1a;
}
.chat-bubble--bot .chat-sugg-cta,
.chat-bubble--agent .chat-sugg-cta {
   color: #fff;
   text-decoration: none;
}
.chat-bubble--bot .chat-sugg-cta:hover,
.chat-bubble--agent .chat-sugg-cta:hover {
   color: #fff;
   text-decoration: none;
}


/* ── Chat Ticket Modal (lightweight, in-page) ────────────────── */

.ctm-overlay {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(0,0,0,0.5);
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}
.ctm-dialog {
   background: #fff;
   border-radius: 14px;
   width: 100%;
   max-width: 380px;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ctm-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid rgba(0,0,0,0.06);
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 1;
   border-radius: 14px 14px 0 0;
}
.ctm-header-title {
   font-size: 13px;
   font-weight: 600;
   color: #1a1a1a;
}
.ctm-close {
   width: 28px;
   height: 28px;
   border: none;
   background: #f0f0f0;
   border-radius: 50%;
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #666;
   flex-shrink: 0;
}
.ctm-close:hover {
   background: #e0e0e0;
}
.ctm-photo {
   width: 100%;
   max-height: 200px;
   overflow: hidden;
}
.ctm-photo img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   display: block;
}
.ctm-body {
   padding: 16px;
}
.ctm-primary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}
.ctm-seats {
   font-size: 16px;
   font-weight: 600;
   color: #1a1a1a;
}
.ctm-price {
   font-size: 18px;
   font-weight: 700;
   color: #185FA5;
}
.ctm-price span {
   font-size: 12px;
   font-weight: 400;
   color: #999;
}
.ctm-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-bottom: 14px;
}
.ctm-section {
   margin-bottom: 12px;
}
.ctm-section-title {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #999;
   margin-bottom: 3px;
}
.ctm-section-text {
   font-size: 13px;
   color: #1a1a1a;
   line-height: 1.5;
}
.ctm-checkout,
a.ctm-checkout,
a.ctm-checkout:link,
a.ctm-checkout:visited,
a.ctm-checkout:hover {
   display: block;
   text-align: center;
   padding: 14px 16px;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   background: linear-gradient(135deg, #185FA5, #0C447C);
   border-radius: 10px;
   text-decoration: none;
   margin: 16px 0 12px;
   transition: opacity 0.15s;
}
a.ctm-checkout:hover {
   opacity: 0.9;
   color: #fff;
   text-decoration: none;
}
.ctm-trust {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   padding: 10px 12px;
   background: #f8f8f8;
   border-radius: 8px;
   font-size: 11px;
   color: #888;
   line-height: 1.4;
}
.ctm-trust-icon {
   color: #1D9E75;
   font-weight: 700;
   font-size: 13px;
   flex-shrink: 0;
}


/* ── Chat history loading spinner ────────────────────────────── */

.chat-history-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 40px 20px;
   font-size: 13px;
   color: #999;
}
.chat-history-spinner {
   width: 18px;
   height: 18px;
   border: 2px solid rgba(0,0,0,0.08);
   border-top-color: #185FA5;
   border-radius: 50%;
   animation: chatSpinHistory 0.6s linear infinite;
   flex-shrink: 0;
}
@keyframes chatSpinHistory {
   to { transform: rotate(360deg); }
}

/* ── Raise FAB and widget above fixed footer on ti.2 pages ── */
body:has(footer.footer-main) .chat-fab,
body:has(footer.footer-main) .chat-widget {
   bottom: 64px;
}
/* ── Raise further when map legend is also visible ── */
body:has(footer.footer-main):has(#map-legend-container) .chat-fab,
body:has(footer.footer-main):has(#map-legend-container) .chat-widget {
   bottom: 100px;
}

/* ── Hide return-to-top when chat FAB is present ── */
body:has(.chat-fab) #return-to-top {
   display: none !important;
}

/* ── Mobile body padding so FAB doesn't overlap bottom content ── */
@media (max-width: 959px) {
   body:has(.chat-fab) {
      padding-bottom: 60px;
   }
}