/* ============================================================
   AI Chat Widget — Upgrade booking assistant
   Modern minimal float panel, bottom-right corner.
   Responsive: desktop + mobile.
   ============================================================ */

/* ---- Variables ---- */
:root {
    --ai-accent:       #7b5ea7;
    --ai-accent-dark:  #5d3f8f;
    --ai-accent-light: #eae0f8;
    --ai-bg:           #ffffff;
    --ai-msg-user-bg:  #7b5ea7;
    --ai-msg-user-fg:  #ffffff;
    --ai-msg-bot-bg:   #f3f4f6;
    --ai-msg-bot-fg:   #1a1a1a;
    --ai-border:       #e5e7eb;
    --ai-shadow:       0 8px 32px rgba(0,0,0,.18);
    --ai-radius:       16px;
    --ai-radius-sm:    10px;
    --ai-panel-w:      370px;
    --ai-panel-h:      520px;
    --ai-trigger-size: 58px;
    --ai-z:            9900;
}

/* ---- Trigger button ---- */
.ai-chat-trigger {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    z-index:         var(--ai-z);
    width:           var(--ai-trigger-size);
    height:          var(--ai-trigger-size);
    border-radius:   50%;
    background:      var(--ai-accent);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 16px rgba(123,94,167,.45);
    transition:      transform .2s ease, background .2s ease, opacity .2s ease;
    outline:         none;
}
.ai-chat-trigger:hover {
    background: var(--ai-accent-dark);
    transform:  scale(1.07);
}
.ai-chat-trigger svg {
    width:  26px;
    height: 26px;
    fill:   currentColor;
}
/* Pulsing ring when panel is closed */
.ai-chat-trigger::after {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: 50%;
    border:        2px solid var(--ai-accent);
    opacity:       0;
    animation:     ai-pulse 2.8s ease-out infinite;
}
@keyframes ai-pulse {
    0%   { opacity: .7; transform: scale(1);   }
    70%  { opacity: 0;  transform: scale(1.55);}
    100% { opacity: 0;  transform: scale(1.55);}
}
.ai-chat-widget.is-open .ai-chat-trigger::after {
    animation: none;
}

/* Badge on trigger (unread) */
.ai-chat-trigger-badge {
    position:      absolute;
    top:           2px;
    right:         2px;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    #e74c3c;
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid #fff;
    display:       none;
}
.ai-chat-trigger-badge.visible {
    display: flex;
}

/* ---- Panel ---- */
.ai-chat-panel {
    position:      fixed;
    bottom:        calc(var(--ai-trigger-size) + 36px);
    right:         24px;
    z-index:       var(--ai-z);
    width:         var(--ai-panel-w);
    height:        var(--ai-panel-h);
    max-height:    calc(100vh - var(--ai-trigger-size) - 60px);
    background:    var(--ai-bg);
    border-radius: var(--ai-radius);
    box-shadow:    var(--ai-shadow);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    /* hidden by default */
    opacity:       0;
    transform:     translateY(16px) scale(.97);
    pointer-events: none;
    transition:    opacity .22s ease, transform .22s ease;
}
.ai-chat-widget.is-open .ai-chat-panel {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: auto;
}

/* ---- Header ---- */
.ai-chat-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 16px;
    background:      var(--ai-accent);
    color:           #fff;
    flex-shrink:     0;
}
.ai-chat-header-avatar {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    rgba(255,255,255,.25);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.ai-chat-header-avatar svg {
    width:  20px;
    height: 20px;
    fill:   #fff;
}
.ai-chat-header-info {
    flex: 1;
    min-width: 0;
}
.ai-chat-header-name {
    font-size:   14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.ai-chat-header-status {
    font-size:  11px;
    opacity:    .8;
    margin-top: 1px;
}
.ai-chat-header-status::before {
    content:        '';
    display:        inline-block;
    width:          6px;
    height:         6px;
    border-radius:  50%;
    background:     #4ade80;
    margin-right:   5px;
    vertical-align: middle;
}
.ai-chat-close {
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.8);
    cursor:      pointer;
    padding:     4px;
    line-height: 1;
    border-radius: 50%;
    transition:  background .15s;
    flex-shrink: 0;
}
.ai-chat-close:hover {
    background: rgba(255,255,255,.15);
    color:      #fff;
}
.ai-chat-close svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
    display: block;
}

/* ---- Messages area ---- */
.ai-chat-messages {
    flex:       1;
    min-height: 180px;  /* prevent shrinking when textarea expands */
    overflow-y: auto;
    padding:    16px 14px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scroll-behavior: smooth;
}
.ai-chat-messages::-webkit-scrollbar {
    width: 4px;
}
.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: var(--ai-border);
    border-radius: 4px;
}

/* ---- Message bubbles ---- */
.ai-chat-message {
    display:   flex;
    gap:       8px;
    max-width: 88%;
    animation: ai-msg-in .18s ease;
}
@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.ai-chat-message.assistant {
    align-self: flex-start;
}
.ai-chat-message.user {
    align-self:     flex-end;
    flex-direction: row-reverse;
}
.ai-chat-bubble {
    padding:       10px 13px;
    border-radius: var(--ai-radius-sm);
    font-size:     14px;
    line-height:   1.5;
    word-break:    break-word;
    white-space:   pre-wrap;
}
.ai-chat-message.assistant .ai-chat-bubble {
    background:         var(--ai-msg-bot-bg);
    color:              var(--ai-msg-bot-fg);
    border-bottom-left-radius: 3px;
}
.ai-chat-message.user .ai-chat-bubble {
    background:          var(--ai-msg-user-bg);
    color:               var(--ai-msg-user-fg);
    border-bottom-right-radius: 3px;
}

/* ---- Typing indicator ---- */
.ai-chat-typing {
    display:    flex;
    gap:        8px;
    align-self: flex-start;
    animation:  ai-msg-in .18s ease;
}
.ai-chat-typing-bubble {
    background:    var(--ai-msg-bot-bg);
    border-radius: var(--ai-radius-sm);
    border-bottom-left-radius: 3px;
    padding:       12px 14px;
    display:       flex;
    gap:           5px;
    align-items:   center;
}
.ai-chat-typing-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #9ca3af;
    animation:     ai-typing-bounce 1.2s infinite ease-in-out both;
}
.ai-chat-typing-dot:nth-child(1) { animation-delay: 0s;    }
.ai-chat-typing-dot:nth-child(2) { animation-delay: .16s;  }
.ai-chat-typing-dot:nth-child(3) { animation-delay: .32s;  }
@keyframes ai-typing-bounce {
    0%, 80%, 100% { transform: scale(.8); opacity: .5; }
    40%           { transform: scale(1);  opacity: 1;  }
}

/* ---- Onboarding state (empty chat) ---- */
.ai-chat-onboarding {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         24px 20px;
    text-align:      center;
    color:           #6b7280;
    font-size:       13px;
}
.ai-chat-onboarding-icon {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    var(--ai-accent-light);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 4px;
}
.ai-chat-onboarding-icon svg {
    width:  26px;
    height: 26px;
    fill:   var(--ai-accent);
}
.ai-chat-onboarding-title {
    font-size:   16px;
    font-weight: 600;
    color:       #111827;
    line-height: 1.3;
}
.ai-chat-onboarding-hint {
    color:        #6b7280;
    font-size:    13px;
    line-height:  1.5;
    max-width:    260px;
}
.ai-chat-onboarding-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    justify-content: center;
    margin-top: 4px;
}
.ai-chat-chip {
    background:    var(--ai-accent-light);
    color:         var(--ai-accent-dark);
    border:        1px solid rgba(123,94,167,.2);
    border-radius: 20px;
    padding:       5px 12px;
    font-size:     12px;
    cursor:        pointer;
    transition:    background .15s, transform .1s;
    white-space:   nowrap;
}
.ai-chat-chip:hover {
    background: rgba(123,94,167,.15);
    transform:  translateY(-1px);
}

/* ---- Quick-reply option buttons (auto-send) ---- */
.ai-chat-suggestions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    margin:      2px 0 2px;
    align-self:  flex-start;
    max-width:   100%;
    animation:   ai-msg-in .18s ease;
}
.ai-chat-suggestion {
    background:    #fff;
    color:         var(--ai-accent-dark);
    border:        1px solid var(--ai-accent);
    border-radius: 20px;
    padding:       7px 14px;
    font-size:     13px;
    font-weight:   500;
    line-height:   1.2;
    cursor:        pointer;
    transition:    background .15s, color .15s, transform .1s;
    text-align:    left;
}
.ai-chat-suggestion:hover {
    background: var(--ai-accent);
    color:      #fff;
    transform:  translateY(-1px);
}

/* ---- Link to the filtered salons catalog ---- */
.ai-chat-salons-cta {
    display:    flex;
    margin:     2px 0 4px;
    align-self: flex-start;
    max-width:  100%;
}
.ai-chat-salons-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      var(--ai-accent-light);
    color:           var(--ai-accent-dark);
    border:          1px solid var(--ai-accent);
    border-radius:   var(--ai-radius-sm);
    padding:         9px 16px;
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      background .15s, color .15s, transform .1s;
}
.ai-chat-salons-cta-btn:hover {
    background:      var(--ai-accent);
    color:           #fff;
    transform:       translateY(-1px);
    text-decoration: none;
}

/* Numbered list markers inside an assistant message — adds spacing between items */
.ai-chat-li {
    display:     inline-block;
    margin-top:  7px;
    font-weight: 600;
    color:       var(--ai-accent-dark);
}

/* ---- Booking done state ---- */
.ai-chat-done {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         24px 20px;
    text-align:      center;
}
.ai-chat-done-icon {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    #d1fae5;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.ai-chat-done-icon svg {
    width:  28px;
    height: 28px;
    fill:   #059669;
}
.ai-chat-done-title {
    font-size:   16px;
    font-weight: 600;
    color:       #065f46;
}
.ai-chat-done-text {
    font-size:  13px;
    color:      #6b7280;
    max-width:  260px;
    line-height: 1.5;
}

/* ---- Register CTA (after a booking) ---- */
.ai-chat-register-cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin:          14px auto 0;
    padding:         10px 22px;
    background:      #7b5ea7;
    color:           #fff;
    border-radius:   var(--ai-radius-sm);
    text-decoration: none;
    font-size:       14px;
    font-weight:     600;
    transition:      background .15s, box-shadow .15s;
}
.ai-chat-register-cta:hover {
    background: #5d3f8f;
    color:      #fff;
    box-shadow: 0 6px 18px rgba(123, 94, 167, .35);
}
.ai-chat-register-hint {
    font-size:  12px;
    color:      #9387ab;
    max-width:  260px;
    line-height: 1.45;
    margin-top: 8px;
}

/* ---- Telegram CTA ---- */
.ai-chat-tg-cta {
    display:         flex;
    align-items:     center;
    gap:             8px;
    background:      #eff8ff;
    border:          1px solid #bfdbfe;
    border-radius:   var(--ai-radius-sm);
    padding:         10px 14px;
    margin:          4px 14px 10px;
    text-decoration: none;
    color:           #1e40af;
    font-size:       13px;
    font-weight:     500;
    transition:      background .15s;
    flex-shrink:     0;
}
.ai-chat-tg-cta:hover {
    background: #dbeafe;
    color:      #1e3a8a;
}
.ai-chat-tg-cta svg {
    width:     18px;
    height:    18px;
    flex-shrink: 0;
    fill:      #2563eb;
}

/* ---- Input area ---- */
.ai-chat-input-area {
    border-top: 1px solid var(--ai-border);
    padding:    10px 12px;
    display:    flex;
    gap:        8px;
    align-items: flex-end;
    flex-shrink: 0;
    background: #fff;
}
.ai-chat-input-wrap {
    flex:          1;
    position:      relative;
    min-width:     0;
}
.ai-chat-input {
    width:         100%;
    box-sizing:    border-box;
    resize:        none;
    border:        1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    padding:       9px 12px;
    font-size:     14px;
    line-height:   1.4;
    color:         #111827;
    background:    #f9fafb;
    outline:       none;
    transition:    border-color .15s, background .15s;
    max-height:    100px;
    overflow-y:    hidden;
    font-family:   inherit;
}
.ai-chat-input:focus {
    border-color: var(--ai-accent);
    background:   #fff;
}
.ai-chat-input::placeholder {
    color: #9ca3af;
}

/* ---- Action buttons (send, mic) ---- */
.ai-chat-btn {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background .15s, transform .1s;
    outline:       none;
}
.ai-chat-btn:hover {
    transform: scale(1.07);
}
.ai-chat-btn-send {
    background: var(--ai-accent);
    color:      #fff;
}
.ai-chat-btn-send:hover {
    background: var(--ai-accent-dark);
}
.ai-chat-btn-send:disabled {
    background: #d1d5db;
    cursor:     not-allowed;
    transform:  none;
}
.ai-chat-btn-send svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}
.ai-chat-btn-mic {
    background: #f3f4f6;
    color:      #6b7280;
}
.ai-chat-btn-mic:hover {
    background: #e5e7eb;
    color:      #374151;
}
.ai-chat-btn-mic.recording {
    background: #fee2e2;
    color:      #dc2626;
    animation:  ai-mic-pulse 1s ease infinite;
}
@keyframes ai-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
    50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.ai-chat-btn-mic svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* ---- Voice status bar ---- */
.ai-chat-voice-status {
    font-size:   12px;
    color:       #6b7280;
    padding:     4px 14px 0;
    min-height:  18px;
    flex-shrink: 0;
    display:     none;
}
.ai-chat-voice-status.visible {
    display: block;
}

/* ---- Salon cards ---- */
.ai-chat-salons {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    width:         100%;
    animation:     ai-msg-in .18s ease;
}
.ai-chat-salon-card {
    background:    #fff;
    border:        1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    padding:       12px 14px;
    font-size:     13px;
    box-shadow:    0 1px 4px rgba(0,0,0,.06);
    transition:    border-color .15s, box-shadow .15s;
}
.ai-chat-salon-card:hover {
    border-color: var(--ai-accent);
    box-shadow:   0 2px 8px rgba(123,94,167,.15);
}
.ai-chat-salon-name {
    font-size:   14px;
    font-weight: 600;
    color:       #111827;
    margin-bottom: 3px;
}
.ai-chat-salon-district {
    color:       var(--ai-accent);
    font-size:   11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}
.ai-chat-salon-address {
    color:       #6b7280;
    font-size:   12px;
    margin-bottom: 6px;
}
.ai-chat-salon-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 10px;
    flex-wrap:   wrap;
}
.ai-chat-salon-rating {
    color:       #d97706;
    font-size:   12px;
    font-weight: 600;
}
.ai-chat-salon-reviews {
    color:       #9ca3af;
    font-size:   11px;
}
.ai-chat-salon-online {
    background:  #d1fae5;
    color:       #065f46;
    font-size:   11px;
    font-weight: 500;
    padding:     2px 7px;
    border-radius: 10px;
}
.ai-chat-salon-choose {
    width:         100%;
    background:    var(--ai-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--ai-radius-sm);
    padding:       8px 0;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, transform .1s;
}
.ai-chat-salon-choose:hover {
    background: var(--ai-accent-dark);
    transform:  translateY(-1px);
}
.ai-chat-salon-choose:disabled {
    background: #d1d5db;
    cursor:     not-allowed;
    transform:  none;
}

/* ---- Responsive: mobile ---- */
@media (max-width: 480px) {
    :root {
        --ai-panel-w:      100%;
        --ai-panel-h:      70vh;
        --ai-trigger-size: 52px;
    }
    .ai-chat-panel {
        bottom:        0;
        right:         0;
        left:          0;
        max-width:     100vw;
        border-radius: var(--ai-radius) var(--ai-radius) 0 0;
        /* Keep input above iOS home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ai-chat-trigger {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        right:  16px;
    }
    /* Hide back-to-top button while chat panel is open to avoid overlap */
    .ai-chat-widget.is-open ~ .gotop,
    .ai-chat-widget.is-open ~ a.gotop {
        display: none !important;
    }
}