/* Flint Digital — Chat widget styles
   Extracted from components/chat-widget.blade.php inline <style> block
   Load via: <link rel="stylesheet" href="...css/chat-widget.css"> */
    /* --- Flint Chat Widget --- */
    .flint-chat-root {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 99999;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
    }
    .flint-chat-launcher {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 20px;
        background: linear-gradient(135deg, #5B4FE9, #7C3AED);
        color: #fff;
        border: none;
        border-radius: 9999px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 12px 40px rgba(91, 79, 233, 0.4);
        transition: transform .25s ease, box-shadow .25s ease;
    }
    .flint-chat-launcher:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 48px rgba(91, 79, 233, 0.55);
    }
    .flint-chat-launcher .icon {
        font-size: 22px;
        line-height: 1;
    }
    .flint-chat-panel {
        display: none;
        position: fixed;
        right: 22px;
        bottom: 84px;
        width: 360px;
        max-width: calc(100vw - 44px);
        height: 520px;
        max-height: calc(100vh - 120px);
        background: #fff;
        color: #1a1a2e;
        border-radius: 18px;
        box-shadow: 0 24px 80px rgba(15, 12, 41, 0.35);
        border: 1px solid rgba(0,0,0,.06);
        overflow: hidden;
        flex-direction: column;
    }
    .flint-chat-panel.open {
        display: flex;
    }
    .flint-chat-header {
        padding: 16px 18px;
        background: linear-gradient(135deg, #5B4FE9, #7C3AED);
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .flint-chat-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
        flex-shrink: 0;
    }
    .flint-chat-header-body { flex: 1; min-width: 0; }
    .flint-chat-header-title { font-weight: 700; font-size: 14px; }
    .flint-chat-header-sub { font-size: 11px; opacity: .85; }
    .flint-chat-close {
        background: rgba(255,255,255,.15);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        flex-shrink: 0;
    }
    .flint-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #f6f7fb;
    }
    .flint-chat-msg {
        max-width: 82%;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 13px;
        line-height: 1.45;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .flint-chat-msg.visitor {
        align-self: flex-end;
        background: linear-gradient(135deg, #5B4FE9, #7C3AED);
        color: #fff;
        border-bottom-right-radius: 4px;
    }
    .flint-chat-msg.admin {
        align-self: flex-start;
        background: #fff;
        color: #1a1a2e;
        border: 1px solid #e5e7f0;
        border-bottom-left-radius: 4px;
    }
    .flint-chat-msg .meta {
        display: block;
        margin-top: 3px;
        font-size: 10px;
        opacity: .7;
    }
    .flint-chat-typing {
        align-self: flex-start;
        background: #fff;
        border: 1px solid #e5e7f0;
        border-radius: 14px;
        border-bottom-left-radius: 4px;
        padding: 10px 14px;
        display: none;
        gap: 4px;
    }
    .flint-chat-typing.show { display: inline-flex; }
    .flint-chat-typing span {
        width: 6px; height: 6px; border-radius: 50%;
        background: #b0b3c8;
        animation: flint-blink 1.2s infinite;
    }
    .flint-chat-typing span:nth-child(2) { animation-delay: .2s; }
    .flint-chat-typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes flint-blink { 0%,80%,100% {opacity:.3} 40% {opacity:1} }

    .flint-chat-start {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 6px 0;
    }
    .flint-chat-start input,
    .flint-chat-start textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid #e2e4ef;
        border-radius: 10px;
        font-size: 13px;
        font-family: inherit;
        background: #fff;
        color: #1a1a2e;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease;
        box-sizing: border-box;
    }
    .flint-chat-start input:focus,
    .flint-chat-start textarea:focus {
        border-color: #5B4FE9;
        box-shadow: 0 0 0 3px rgba(91,79,233,.15);
    }
    .flint-chat-start textarea { resize: none; min-height: 64px; }
    .flint-chat-send-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        height: 52px;
        background: linear-gradient(135deg, #5B4FE9, #7C3AED);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: opacity .2s ease;
    }
    .flint-chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }
    .flint-chat-error {
        display: none;
        padding: 9px 12px;
        background: #fee2e2;
        color: #b91c1c;
        border-radius: 10px;
        font-size: 12px;
    }
    .flint-chat-error.show { display: block; }
    .flint-chat-footer {
        padding: 10px 12px;
        border-top: 1px solid #eef0f6;
        background: #fff;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .flint-chat-footer input {
        flex: 1;
        padding: 10px 14px;
        border: 1px solid #e2e4ef;
        border-radius: 9999px;
        font-size: 13px;
        font-family: inherit;
        color: #1a1a2e;
        outline: none;
        background: #f6f7fb;
    }
    .flint-chat-footer input:focus { border-color: #5B4FE9; }
    .flint-chat-footer button {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #5B4FE9, #7C3AED);
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .flint-chat-footer button:disabled { opacity: .5; cursor: not-allowed; }
    .flint-chat-banner {
        display: none;
        margin: 0 16px;
        padding: 10px 12px;
        background: #fef3c7;
        color: #92400e;
        border-radius: 10px;
        font-size: 12px;
        text-align: center;
    }
    .flint-chat-banner.show { display: block; }
    .flint-ticket {
        font-size: 11px;
        color: #6b7280;
        text-align: center;
        margin-top: -2px;
    }
    .flint-ticket b { color: #5B4FE9; }
    @media (max-width: 480px) {
        .flint-chat-panel { width: calc(100vw - 32px); right: 16px; bottom: 78px; }
        .flint-chat-launcher { padding: 12px 16px; }
        .flint-chat-launcher .label { display: none; }
    }