/* ============================================================
   Minilytic Website Chat Widget — Styles
   Self-contained, mobile-responsive. Ships its own palette so it
   renders correctly on the public marketing pages, which do not
   define the CRM theme.css custom properties.
   ============================================================ */

/* ---------- Chat-specific custom properties ---------- */
:root {
    --chat-width: 380px;
    --chat-height: 75vh;
    --chat-radius: 16px;
    --chat-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Self-contained palette (matches Minilytic brand) ----------
   Scoped to the widget roots so it neither leaks onto the host page nor
   depends on theme.css. The blue brand mirrors assets/minilytic/*.css. */
#crm-chat-panel,
#crm-chat-bubble,
#crm-chat-overlay {
    --primary:        #2563EB;
    --primary-dark:   #1D4ED8;
    --secondary:      #6366F1;
    --surface-card:   #ffffff;
    --page-bg:        #f8fafc;
    --border-color:   #e6e8ec;
    --glass-bg:       #f1f5f9;
    --glass-border:   #e6e8ec;
    --text:           #111827;
    --muted-text:     #6b7280;
    --input-bg:       #ffffff;
    --success:        #16a34a;
    --danger:         #ef4444;
    --box-shadow-lg:  0 16px 40px -8px rgba(15, 23, 42, 0.22);
}

/* ---------- Sidebar chatbot toggle (launcher) ---------- */
.sidebar-chat-toggle i {
    color: white;
}

/* ---------- Chat panel overlay (mobile) ---------- */
#crm-chat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    /* On mobile the overlay is display:block even when hidden (see the small-screen
       media query). Without this it would sit invisibly over the whole viewport and
       swallow taps meant for the launcher bubble, so the chat never opens. Only let
       it capture input while it's actually visible. */
    pointer-events: none;
    transition: opacity var(--chat-transition);
}

#crm-chat-overlay.crm-chat-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Chat panel ---------- */
#crm-chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: var(--chat-width);
    height: var(--chat-height);
    max-height: calc(100vh - 48px);
    border-radius: var(--chat-radius);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--chat-transition), opacity var(--chat-transition);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-lg);
}

#crm-chat-panel.crm-chat-panel--open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Floating launcher bubble (minimized state) ---------- */
#crm-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    box-shadow: var(--box-shadow-lg);
    z-index: 9997;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    pointer-events: none;
    transition: transform var(--chat-transition), opacity var(--chat-transition);
}

#crm-chat-bubble.crm-chat-bubble--visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

#crm-chat-bubble:hover {
    transform: scale(1.08) translateY(0);
}

#crm-chat-bubble svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* ---------- Proactive greeting teaser (homepage) ---------- */
#crm-chat-teaser {
    /* Self-contained palette (matches the bubble; not dependent on theme.css). */
    --primary:   #2563EB;
    --secondary: #6366F1;
    position: fixed;
    right: 24px;
    bottom: 96px;                 /* just above the 60px bubble at bottom:24px */
    width: 300px;
    max-width: calc(100vw - 48px);
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.22);
    padding: 14px 14px 12px;
    z-index: 9998;                /* above the bubble (9997), below the panel (9999) */
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity var(--chat-transition), transform var(--chat-transition);
    font-family: inherit;
}

#crm-chat-teaser.crm-chat-teaser--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Little pointer aimed at the launcher bubble below-right. */
#crm-chat-teaser::after {
    content: '';
    position: absolute;
    right: 26px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-right: 1px solid #e6e8ec;
    border-bottom: 1px solid #e6e8ec;
    transform: rotate(45deg);
}

.crm-chat-teaser__close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 4px;
}

.crm-chat-teaser__close:hover { color: #6b7280; }

.crm-chat-teaser__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 14px;          /* clear the close button */
}

.crm-chat-teaser__avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

.crm-chat-teaser__avatar svg { width: 18px; height: 18px; fill: currentColor; }

.crm-chat-teaser__text {
    font-size: 13.5px;
    line-height: 1.45;
    color: #111827;
}

.crm-chat-teaser__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.crm-chat-teaser__btn {
    flex: 1;
    cursor: pointer;
    border: 1px solid #e6e8ec;
    background: #f1f5f9;
    color: #111827;
    border-radius: 10px;
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 600;
    transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}

.crm-chat-teaser__btn:hover { transform: translateY(-1px); }

.crm-chat-teaser__btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    color: #fff;
}

@media (max-width: 480px) {
    #crm-chat-teaser {
        right: 16px;
        bottom: 88px;
        width: calc(100vw - 32px);
    }
    #crm-chat-teaser::after { right: 22px; }
}

/* ---------- Chat header ---------- */
.crm-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    flex-shrink: 0;
}

.crm-chat-header__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.crm-chat-header__title svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.crm-chat-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.crm-chat-header__btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.crm-chat-header__btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.crm-chat-header__btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ---------- Messages area ---------- */
.crm-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: var(--page-bg);
}

/* Thin scrollbar */
.crm-chat-messages::-webkit-scrollbar {
    width: 5px;
}

.crm-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.crm-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* ---------- Message bubbles ---------- */
.crm-chat-msg {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: crm-chat-msg-in 0.25s ease-out;
}

@keyframes crm-chat-msg-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-chat-msg--user {
    align-self: flex-end;
    align-items: flex-end;
}

.crm-chat-msg--assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.crm-chat-msg__bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}

.crm-chat-msg--user .crm-chat-msg__bubble {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.crm-chat-msg--assistant .crm-chat-msg__bubble {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

/* ---------- Message meta (time, feedback) ---------- */
.crm-chat-msg__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted-text);
    padding: 0 4px;
}

.crm-chat-msg__time {
    opacity: 0.7;
}

/* ---------- Feedback buttons ---------- */
.crm-chat-feedback {
    display: flex;
    gap: 4px;
}

.crm-chat-feedback__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--muted-text);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    display: flex;
    align-items: center;
}

.crm-chat-feedback__btn:hover {
    opacity: 1;
}

.crm-chat-feedback__btn--active.crm-chat-feedback__btn--up {
    color: var(--success);
    opacity: 1;
}

.crm-chat-feedback__btn--active.crm-chat-feedback__btn--down {
    color: var(--danger);
    opacity: 1;
}

.crm-chat-feedback__btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------- Typing indicator ---------- */
.crm-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    align-self: flex-start;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    animation: crm-chat-msg-in 0.25s ease-out;
}

.crm-chat-typing__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-text);
    animation: crm-chat-typing-bounce 1.4s infinite ease-in-out;
}

.crm-chat-typing__dot:nth-child(1) {
    animation-delay: 0s;
}

.crm-chat-typing__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.crm-chat-typing__dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes crm-chat-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ---------- Error message ---------- */
.crm-chat-error {
    align-self: center;
    text-align: center;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    color: var(--danger);
    font-size: 13px;
    max-width: 90%;
    animation: crm-chat-msg-in 0.25s ease-out;
}

.crm-chat-error__retry {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.crm-chat-error__retry:hover {
    opacity: 0.85;
}

/* ---------- Follow-up suggestion chips ---------- */
.crm-chat-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 10px;
    align-self: flex-start;
    animation: crm-chat-suggest-in 0.25s ease;
}

@keyframes crm-chat-suggest-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.crm-chat-suggest__chip {
    padding: 7px 12px;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.crm-chat-suggest__chip:hover {
    background: var(--primary);
    color: #fff;
}

/* Starter chips under the opening greeting: centered, roomier. */
.crm-chat-suggest--starters {
    align-self: center;
    justify-content: center;
    max-width: 92%;
    margin: 4px auto 12px;
}

/* ---------- Welcome / empty state ---------- */
.crm-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 24px;
    color: var(--muted-text);
    gap: 8px;
}

.crm-chat-welcome__icon {
    font-size: 36px;
    margin-bottom: 4px;
    opacity: 0.6;
}

.crm-chat-welcome__text {
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Input area ---------- */
.crm-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface-card);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.crm-chat-input__field {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.45;
    max-height: 120px;
    min-height: 42px;
    background: var(--input-bg);
    color: var(--text);
    transition: border-color 0.2s;
    outline: none;
}

.crm-chat-input__field::placeholder {
    color: var(--muted-text);
    opacity: 0.7;
}

.crm-chat-input__field:focus {
    border-color: var(--primary);
}

.crm-chat-input__send {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.15s;
}

.crm-chat-input__send:hover:not(:disabled) {
    transform: scale(1.05);
}

.crm-chat-input__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.crm-chat-input__send svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ---------- Markdown content styles ---------- */
.crm-chat-msg__content p {
    margin: 0 0 8px;
}

.crm-chat-msg__content p:last-child {
    margin-bottom: 0;
}

.crm-chat-msg__content strong {
    font-weight: 600;
}

.crm-chat-msg__content em {
    font-style: italic;
}

.crm-chat-msg__content code {
    background: rgba(0, 0, 0, 0.15);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'Courier New', Courier, monospace;
}

.crm-chat-msg__content pre {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    margin: 8px 0;
}

.crm-chat-msg__content pre code {
    background: none;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}

.crm-chat-msg__content ul,
.crm-chat-msg__content ol {
    margin: 4px 0;
    padding-left: 20px;
}

.crm-chat-msg__content li {
    margin-bottom: 2px;
}

.crm-chat-msg__content a {
    color: var(--primary);
    text-decoration: underline;
}

.crm-chat-msg__content blockquote {
    border-left: 3px solid var(--primary);
    margin: 8px 0;
    padding: 4px 12px;
    opacity: 0.85;
}

/* ---------- Lead / "Book a demo" form ---------- */
.crm-chat-leadform {
    align-self: stretch;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--box-shadow-lg);
    animation: crm-chat-msg-in 0.25s ease-out;
}

.crm-chat-leadform__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.crm-chat-leadform__sub {
    font-size: 12.5px;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.crm-chat-lf__field {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.crm-chat-lf__field::placeholder {
    color: var(--muted-text);
    opacity: 0.7;
}

.crm-chat-lf__field:focus {
    border-color: var(--primary);
}

textarea.crm-chat-lf-note {
    resize: none;
    line-height: 1.45;
}

.crm-chat-lf__error {
    font-size: 12px;
    color: var(--danger);
    min-height: 0;
}

.crm-chat-lf__error:empty {
    display: none;
}

.crm-chat-leadform__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.crm-chat-lf-submit {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    transition: opacity 0.2s, transform 0.15s;
}

.crm-chat-lf-submit:hover:not(:disabled) {
    transform: translateY(-1px);
}

.crm-chat-lf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.crm-chat-lf-cancel {
    border: none;
    background: none;
    color: var(--muted-text);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 6px;
}

.crm-chat-lf-cancel:hover {
    color: var(--text);
}

.crm-chat-leadform__done {
    align-self: stretch;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--text);
    animation: crm-chat-msg-in 0.25s ease-out;
}

/* ---------- Responsive — small screens ---------- */
@media (max-width: 480px) {
    #crm-chat-panel {
        /* Anchor to BOTH edges instead of bottom:0 + height:100vh. On mobile
           100vh counts the area behind the address bar, so a bottom-anchored
           100vh panel overflows upward and hides its own header (close/minimize)
           under the browser chrome/notch. top:0 + bottom:0 fills exactly the
           visible viewport, keeping the header on-screen. */
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: 0;
    }

    /* Keep the header controls clear of the status bar / notch on devices that
       report a top safe-area inset (e.g. iOS with a notch). */
    .crm-chat-header {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }

    /* Keep the send button/input clear of the home-indicator gesture area. */
    .crm-chat-input {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    #crm-chat-overlay {
        display: block;
    }

    .crm-chat-msg {
        max-width: 92%;
    }
}

/* ---------- Responsive — tablets ---------- */
@media (min-width: 481px) and (max-width: 768px) {
    #crm-chat-panel {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 16px;
    }
}