/**
 * Dodona — storefront chat + floating launcher (frontend only).
 *
 * Scoped under .front-chat-wrapper, .front-chat, .front-fab*.
 */

/**
 * Base layout — load with shortcode / floating chat.
 */
 .front-chat-wrapper,
 .front-chat-wrapper * {
   box-sizing: border-box;
 }
 
 .front-chat-wrapper,
 .front-chat {
   width: 100%;
   max-width: 400px;
   margin: 0;
 }
 
 /* Modern storefront chat (floating + shortcode) */
 .front-chatbot-container.front-chat--modern {
   --front-chat-brand: #0052cc;
   --front-chat-user-bg: #e3f0ff;
   --front-chat-user-text: #0b3d7a;
   display: flex;
   flex-direction: column;
   border-radius: 16px;
   background: #0675c4;
   overflow: hidden;
   border: 1px solid #ececec;
 }
 
 .front-chat--modern .front-chat-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 12px 14px;
   background: #fff;
   border-bottom: 1px solid #eef0f2;
 }
 
 .front-chat--modern .front-chat-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
 }
 
 .front-chat--modern .front-chat-avatar {
   position: relative;
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--front-chat-brand);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
 }
 
 .front-chat--modern .front-chat-avatar__initial {
   font-size: 14px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.03em;
   user-select: none;
 }
 
 .front-chat--modern .front-chat-online-dot {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #00a32a;
   border: 2px solid #fff;
 }
 
 .front-chat--modern .front-chat-title {
   font-weight: 700;
   font-size: 15px;
   color: #1d2327;
   letter-spacing: -0.01em;
 }
 
 .front-chat--modern .front-chat-topbar-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
 /* Floating chat — mobile only: plain X after theme toggle (no pill/bg like icon-btn) */
 .front-chat-float-close {
   display: none;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   color: #1d2327;
   cursor: pointer;
   line-height: 0;
   opacity: 0.72;
 }
 
 .front-chat-float-close:hover {
   opacity: 1;
   background: transparent;
 }
 
 .front-chat-float-close:focus-visible {
   outline: 2px solid var(--front-chat-brand, #0f62fe);
   outline-offset: 2px;
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-chat-float-close {
   display: inline-flex;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-float-close {
   color: #f0f0f1;
 }
 
 .front-chat--modern .front-chat-icon-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   padding: 0;
   border: none;
   border-radius: 10px;
   background: transparent;
   color: #50575e;
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
 }
 
 .front-chat--modern .front-chat-icon-btn:hover {
   background: #f0f0f1;
   color: #1d2327;
 }
 
 .front-chat--modern .front-chat-ico {
   display: block;
 }
 
 .front-chat--modern .front-chat-history {
   flex: 1;
   min-height: 240px;
   max-height: min(380px, 48vh);
   overflow-y: auto;
   padding: 14px 14px 10px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   background: #f4f5f7;
 }
 
 .front-chat--modern .front-chat-bubble {
   max-width: 90%;
   border-radius: 14px;
   font-size: 14px;
   line-height: 1.5;
   word-break: break-word;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .front-chat--modern .front-chat-bubble__inner {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 12px 14px;
 }
 
 .front-chat--modern .front-chat-bubble__avatar {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--front-chat-brand);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 2px;
 }
 
 .front-chat--modern .front-chat-bubble__initial {
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.03em;
   user-select: none;
 }
 
 .front-chat--modern .front-chat-bubble.type-assistant .front-bubble-text {
   flex: 1;
   min-width: 0;
 }
 
 .front-chat--modern .front-chat-bubble.type-assistant {
   align-self: flex-start;
   background: #fff;
   border: 1px solid #e8eaed;
 }
 
 /* Assistant “typing…” — staggered dots (human-ish rhythm) */
 .front-chat-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }
 
 .front-chat--modern .front-chat-bubble--typing .front-chat-bubble__inner {
   padding: 12px 16px;
   min-height: 0;
   align-items: center;
   justify-content: flex-start;
   gap: 0;
 }
 
 .front-chat--modern .front-chat-bubble--typing-dots .front-chat-bubble__inner {
   padding: 10px 14px;
 }
 
 .front-chat--modern .front-chat-bubble--typing.type-assistant .front-bubble-text {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex: 0 0 auto;
   min-width: 0;
   min-height: 22px;
 }
 
 .front-chat-typing__dots {
   display: inline-flex;
   align-items: flex-end;
   gap: 5px;
   padding: 2px 0 3px;
   height: 22px;
 }
 
 .front-chat-typing__dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--front-chat-brand);
   opacity: 0.35;
   transform-origin: 50% 100%;
   /* One seamless loop per dot; staggered delays = continuous wave until reply */
   animation: front-chat-typing-wave 1.05s ease-in-out infinite;
   will-change: transform, opacity;
 }
 
 .front-chat-typing__dot:nth-child(1) {
   animation-delay: 0s;
 }
 
 .front-chat-typing__dot:nth-child(2) {
   animation-delay: 0.18s;
 }
 
 .front-chat-typing__dot:nth-child(3) {
   animation-delay: 0.36s;
 }
 
 @keyframes front-chat-typing-wave {
   0%,
   100% {
     transform: translateY(0) scale(1);
     opacity: 0.35;
   }
 
   40% {
     transform: translateY(-7px) scale(1.12);
     opacity: 1;
   }
 
   70% {
     transform: translateY(-2px) scale(1);
     opacity: 0.55;
   }
 }
 
 @keyframes front-chat-typing-wave-soft {
   0%,
   100% {
     opacity: 0.4;
   }
 
   50% {
     opacity: 0.95;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .front-chat-typing__dot {
     animation: front-chat-typing-wave-soft 1.6s ease-in-out infinite;
     will-change: opacity;
   }
 }
 
 .front-chat--modern .front-chat-bubble.type-user {
   align-self: flex-end;
   background: var(--front-chat-user-bg);
   border: 1px solid #c5daf5;
   color: var(--front-chat-user-text);
 }
 
 .front-chat--modern .front-chat-bubble.type-user .front-chat-bubble__inner {
   padding: 10px 14px;
 }
 
 .front-chat--modern .front-chat-bubble.type-user .front-chat-bubble__avatar {
   display: none;
 }
 
 .front-bubble-text a:not(.front-chat-msg-link--pill):not(.front-chat-msg-link--simple) {
   color: inherit;
   text-decoration: underline;
 }
 
 /* Shop, cart, category, etc. — theme-colored text link only (same tab) */
 .front-bubble-text a.front-chat-msg-link--simple {
   display: inline;
   padding: 0;
   margin: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--front-chat-brand);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
   word-break: break-word;
 }
 
 .front-bubble-text a.front-chat-msg-link--simple:hover {
   opacity: 0.88;
   text-decoration-thickness: 2px;
 }
 
 .front-bubble-text a.front-chat-msg-link--simple:focus-visible {
   outline: 2px solid var(--front-chat-brand);
   outline-offset: 2px;
 }
 
 .front-chat--dark.front-chat--modern .front-bubble-text a.front-chat-msg-link--simple {
   color: var(--front-chat-brand);
   filter: brightness(1.15);
 }
 
 /* Product / shop links — pill, tinted with --front-chat-brand (set on .front-chatbot-container) */
 .front-bubble-text a.front-chat-msg-link--pill {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-top: 10px;
   padding: 9px 16px 9px 12px;
   border-radius: 100px;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
   line-height: 1.25;
   color: var(--front-chat-brand);
   background: color-mix(in srgb, var(--front-chat-brand) 16%, #ffffff);
   border: 1px solid color-mix(in srgb, var(--front-chat-brand) 38%, #dcdcde);
   max-width: 100%;
   vertical-align: middle;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 
 .front-bubble-text a.front-chat-msg-link--pill:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px color-mix(in srgb, var(--front-chat-brand) 28%, transparent);
 }
 
 .front-chat-msg-link__ico-wrap {
   display: flex;
   flex-shrink: 0;
   opacity: 0.92;
 }
 
 .front-chat-msg-link__label {
   min-width: 0;
   word-break: break-word;
 }
 
 .front-chat--dark.front-chat--modern .front-bubble-text a.front-chat-msg-link--pill {
   color: #e8eef8;
   background: color-mix(in srgb, var(--front-chat-brand) 34%, #2a2a2a);
   border-color: color-mix(in srgb, var(--front-chat-brand) 55%, #444444);
 }
 
 .front-chat--modern .front-chat-composer {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px 14px;
   background: #fff;
   border-top: 1px solid #eef0f2;
 }
 
 .front-chat--modern .front-chat-input-field {
   flex: 1;
   min-width: 0;
   padding: 12px 16px;
   border: 2px solid #dcdcde;
   border-radius: 999px;
   font-size: 14px;
   background: #fff;
 }
 
 .front-chat--modern .front-chat-send-btn {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: #1d2327;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0;
   transition: transform 0.1s ease, opacity 0.15s ease;
 }
 
 .front-chat--modern .front-chat-send-btn:hover:not(:disabled) {
   transform: scale(1.04);
 }
 
 .front-chat--modern .front-chat-send-btn:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
 /* Dark mode (toggle) */
 .front-chatbot-container.front-chat--dark.front-chat--modern {
   background: #1e1e1e;
   border-color: #333;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-topbar,
 .front-chat--dark.front-chat--modern .front-chat-composer {
   background: #1e1e1e;
   border-color: #333;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-title {
   color: #f0f0f1;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-history {
   background: #2c2c2c;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-bubble.type-assistant {
   background: #2a2a2a;
   border-color: #444;
   color: #f0f0f1;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-bubble.type-user {
   background: #1a3a5c;
   border-color: #2c5282;
   color: #e2ecf7;
 }
 
 .front-chat--dark.front-chat--modern .front-chat-input-field {
   background: #2c2c2c;
   border-color: #444;
   color: #f0f0f1;
 }
 
 /* Floating launcher — SVG chat / close (offsets set inline from admin config) */
 .front-fab {
   position: fixed;
   z-index: 99998;
   width: 58px;
   height: 58px;
   padding: 0;
   border-radius: 50%;
   border: none;
   background: var(--front-fab-bg, #0052cc);
   color: #fff;
   cursor: pointer;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .front-fab:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
 }
 
 .front-fab__icon-wrap {
   position: relative;
   width: 26px;
   height: 26px;
 }
 
 .front-fab__svg {
   position: absolute;
   left: 0;
   top: 0;
   transition: opacity 0.18s ease, transform 0.18s ease;
 }
 
 .front-fab__svg--chat {
   opacity: 1;
   transform: scale(1);
 }
 
 .front-fab__svg--close {
   opacity: 0;
   transform: scale(0.85);
 }
 
 .front-fab--open .front-fab__svg--chat {
   opacity: 0;
   transform: scale(0.85);
 }
 
 .front-fab--open .front-fab__svg--close {
   opacity: 1;
   transform: scale(1);
 }
 
 .front-fab-panel {
   position: fixed;
   z-index: 99999;
   width: min(400px, calc(100vw - 24px));
   max-height: min(580px, calc(100vh - 120px));
   overflow: visible;
 }
 
 .front-fab-panel__inner {
   padding: 0;
   border-radius: 16px;
   overflow: hidden;
 }
 
 /* Mobile: open chat = near full-screen sheet; FAB at top of column (see front-chat-engine.js) */
 #front-float-root.front-float-root--layout-mobile-open {
   position: fixed;
   inset: var(--fab-mobile-inset, 10px);
   z-index: 99999;
   display: flex;
   flex-direction: column;
   gap: 10px;
   box-sizing: border-box;
 }
 
 /* Mobile sheet: close = minimal X in chat topbar; round FAB hidden while open */
 #front-float-root.front-float-root--layout-mobile-open .front-fab {
   display: none !important;
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-fab-panel {
   position: relative;
   flex: 1;
   min-height: 0;
   width: 100% !important;
   max-height: none !important;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-fab-panel__inner {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
   border-radius: 0;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-chat-app-mount {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-chatbot-container.front-chat--modern {
   flex: 1;
   min-height: 0;
   max-height: none;
   border-radius: 0;
 }
 
 #front-float-root.front-float-root--layout-mobile-open .front-chat--modern .front-chat-history {
   flex: 1;
   min-height: 0;
   max-height: none;
 }
 
 /* Mobile: no rounded corners on the chat shell (float sheet + inline shortcode) */
 @media (max-width: 782px) {
   .front-chatbot-container.front-chat--modern {
     border-radius: 0;
   }
 }
 
 /* No page scroll behind open floating chat (JS toggles classes on html/body) */
 html.dodona-scroll-lock {
   overflow: hidden;
   overscroll-behavior: none;
 }
 
 body.dodona-scroll-lock {
   position: fixed;
   left: 0;
   right: 0;
   width: 100%;
   overflow: hidden;
   overscroll-behavior: none;
 }