/* CannaDoc Chatbot Widget */

:root {
    --cdc-primary:      #16d2ff;
    --cdc-primary-dark: #0088aa;
    --cdc-bg:           #070f18;
    --cdc-header:       #071e2e;
    --cdc-msg-bot:      #071a26;
    --cdc-text:         #d0f0fc;
    --cdc-bottom:       28px;
    --cdc-pos-right:    28px;
    --cdc-pos-left:     auto;
}

#cdc-root * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── TOGGLE BUTTON ─────────────────────────────────────────── */
#cdc-toggle {
    position: fixed;
    bottom: var(--cdc-bottom);
    right: var(--cdc-pos-right);
    left:  var(--cdc-pos-left);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cdc-primary-dark), var(--cdc-primary));
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(22, 210, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}
#cdc-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(22, 210, 255, 0.6);
}
#cdc-toggle-logo-wrap {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
#cdc-toggle-icon {
    width: 30px; height: 30px;
    fill: #ffffff;
    display: block;
    transition: transform 0.2s;
}
#cdc-toggle.is-open #cdc-toggle-icon { transform: rotate(90deg); }
#cdc-dot {
    position: absolute;
    top: 0; right: 0;
    width: 13px; height: 13px;
    background: #ff4f4f;
    border-radius: 50%;
    border: 2px solid var(--cdc-bg);
    display: none;
    z-index: 2;
}

/* ── CHAT WINDOW ───────────────────────────────────────────── */
#cdc-window {
    position: fixed;
    bottom: calc(var(--cdc-bottom) + 78px);
    right: var(--cdc-pos-right);
    left:  var(--cdc-pos-left);
    width: 370px;
    max-width: calc(100vw - 20px);
    height: 560px;
    max-height: calc(100vh - 120px);
    background: var(--cdc-bg);
    border: 1px solid rgba(22, 210, 255, 0.25);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(22,210,255,0.1);
    z-index: 2147483646;
    transform: scale(0.92) translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), opacity 0.22s;
}
#cdc-window.cdc-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* ── HEADER ────────────────────────────────────────────────── */
#cdc-header {
    background: var(--cdc-header);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(22, 210, 255, 0.15);
}
#cdc-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cdc-primary-dark), var(--cdc-primary));
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.cdc-avatar-logo {
    width: 34px; height: 34px;
    object-fit: contain;
}
#cdc-header-info h3 {
    color: #e0f7ff;
    font-size: 14.5px;
    font-weight: 700;
}
#cdc-header-info p {
    color: #5cc8e0;
    font-size: 11.5px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
#cdc-status-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: #00d4a8;
    border-radius: 50%;
    animation: cdc-pulse 2s infinite;
}
@keyframes cdc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
#cdc-close {
    margin-left: auto;
    background: none; border: none;
    color: #5cc8e0;
    cursor: pointer;
    font-size: 18px;
    padding: 5px 6px;
    border-radius: 6px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
#cdc-close:hover { color:#fff; background:rgba(255,255,255,.1); }
.cdc-header-btn {
    background:none; border:none; cursor:pointer;
    padding:5px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.cdc-header-btn svg { width:18px; height:18px; fill:#5cc8e0; }
.cdc-header-btn:hover { background:rgba(255,255,255,.1); }

/* ── MESSAGES ──────────────────────────────────────────────── */
#cdc-messages {
    flex:1; overflow-y:auto;
    padding:14px;
    display:flex; flex-direction:column; gap:9px;
    scroll-behavior:smooth;
    min-height: 80px;
}
#cdc-messages::-webkit-scrollbar { width:4px; }
#cdc-messages::-webkit-scrollbar-thumb { background:rgba(22,210,255,.3); border-radius:4px; }

.cdc-msg {
    max-width:86%;
    padding:10px 13px;
    border-radius:14px;
    font-size:13.5px;
    line-height:1.52;
    word-break:break-word;
}
.cdc-msg.cdc-bot {
    background: var(--cdc-msg-bot);
    color: var(--cdc-text);
    border-bottom-left-radius:4px;
    align-self:flex-start;
    border:1px solid rgba(22,210,255,.2);
}
.cdc-msg.cdc-user {
    background: linear-gradient(135deg, var(--cdc-primary-dark), var(--cdc-primary));
    color:#fff;
    border-bottom-right-radius:4px;
    align-self:flex-end;
}
.cdc-msg a { color:var(--cdc-primary); text-decoration:underline; }

/* ── TYPING ────────────────────────────────────────────────── */
#cdc-typing {
    background:var(--cdc-msg-bot);
    border:1px solid rgba(22,210,255,.2);
    border-radius:14px; border-bottom-left-radius:4px;
    padding:12px 15px;
    align-self:flex-start;
    display:none; gap:5px; align-items:center;
}
#cdc-typing.cdc-visible { display:flex; }
#cdc-typing span {
    width:7px; height:7px;
    background:var(--cdc-primary);
    border-radius:50%;
    animation:cdc-typing 1.2s infinite;
}
#cdc-typing span:nth-child(2){animation-delay:.2s}
#cdc-typing span:nth-child(3){animation-delay:.4s}
@keyframes cdc-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ── MODE CHOOSER ──────────────────────────────────────────── */
#cdc-mode-chooser {
    display:none; position:absolute; inset:0;
    background:rgba(7,15,24,.93);
    z-index:10; align-items:center; justify-content:center;
    border-radius:18px;
}
#cdc-mode-chooser.cdc-visible { display:flex; }
.cdc-mode-inner { text-align:center; padding:24px; }
.cdc-mode-title { color:var(--cdc-text); font-size:16px; font-weight:700; margin-bottom:24px; }
.cdc-mode-btns { display:flex; gap:16px; justify-content:center; }
.cdc-mode-btn {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--cdc-msg-bot);
    border:2px solid rgba(22,210,255,.3);
    border-radius:16px; padding:22px 26px;
    cursor:pointer; color:var(--cdc-text);
    font-size:14px; font-family:inherit;
    transition:border-color .18s, transform .15s;
    min-width:110px;
}
.cdc-mode-btn:hover { border-color:var(--cdc-primary); transform:translateY(-2px); }
.cdc-mode-icon { font-size:32px; line-height:1; }

/* ── QUICK REPLIES ─────────────────────────────────────────── */
#cdc-quick { padding:0 14px 10px; display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
#cdc-quick.cdc-hidden { display:none; }
.cdc-qbtn {
    background:var(--cdc-msg-bot);
    border:1px solid rgba(22,210,255,.4);
    color:#7de0f7;
    border-radius:20px; padding:5px 12px;
    font-size:12px; cursor:pointer;
    transition:background .15s, color .15s;
    font-family:inherit;
}
.cdc-qbtn:hover { background:var(--cdc-primary); color:#fff; }

/* ── INPUT ROW ─────────────────────────────────────────────── */
#cdc-input-row {
    padding:11px 14px;
    border-top:1px solid rgba(22,210,255,.15);
    display:flex; gap:8px; flex-shrink:0;
    background:rgba(7,15,24,.6);
}
#cdc-input {
    flex:1;
    background:var(--cdc-msg-bot);
    border:1px solid rgba(22,210,255,.2);
    border-radius:12px; padding:9px 13px;
    color:var(--cdc-text); font-size:13.5px;
    outline:none; resize:none; font-family:inherit;
    line-height:1.4; max-height:96px;
    transition:border-color .15s;
}
#cdc-input:focus { border-color:var(--cdc-primary); }
#cdc-input::placeholder { color:rgba(208,240,252,.3); }
#cdc-send {
    width:40px; height:40px; border-radius:10px;
    background:linear-gradient(135deg,var(--cdc-primary-dark),var(--cdc-primary));
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; align-self:flex-end;
    transition:opacity .15s;
}
#cdc-send:hover { opacity:.85; }
#cdc-send:disabled { opacity:.38; cursor:not-allowed; }
#cdc-send svg { width:18px; height:18px; fill:#fff; }

/* ── VOICE ROW ─────────────────────────────────────────────── */
#cdc-voice-row {
    padding:10px 14px;
    border-top:1px solid rgba(22,210,255,.15);
    flex-direction:column; align-items:center; gap:8px;
    flex-shrink:0; background:rgba(7,15,24,.6);
}
#cdc-voice-status { font-size:12px; color:rgba(208,240,252,.5); text-align:center; }
#cdc-mic-btn {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--cdc-primary-dark),var(--cdc-primary));
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:box-shadow .2s, transform .15s;
}
#cdc-mic-btn svg { width:24px; height:24px; fill:#fff; }
#cdc-mic-btn:hover { transform:scale(1.06); }
#cdc-mic-btn.cdc-recording {
    background:linear-gradient(135deg,#8b0000,#f44336);
    animation:cdc-mic-pulse 1s infinite;
}
@keyframes cdc-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,67,54,.4)}50%{box-shadow:0 0 0 12px rgba(244,67,54,0)}}
#cdc-mic-btn.cdc-speaking { box-shadow:0 0 0 6px rgba(22,210,255,.3); }
.cdc-link-btn {
    background:none; border:none; color:#5cc8e0;
    font-size:11.5px; cursor:pointer;
    text-decoration:underline; font-family:inherit; padding:0;
}
.cdc-link-btn:hover { color:var(--cdc-primary); }

/* ── DISCLAIMER ────────────────────────────────────────────── */
#cdc-disclaimer {
    text-align:center; font-size:10px;
    color:rgba(208,240,252,.3);
    padding:5px 14px 9px; flex-shrink:0; line-height:1.4;
}

/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width:480px) {
    #cdc-window {
        top: 12px !important;
        bottom: calc(var(--cdc-bottom) + 74px) !important;
        right: 8px !important;
        left:  8px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 16px !important;
    }
    #cdc-toggle {
        bottom: var(--cdc-bottom) !important;
        right:  var(--cdc-pos-right) !important;
        left:   var(--cdc-pos-left)  !important;
    }
}

/* ── WHATSAPP BUTTON ───────────────────────────────────────── */
.cdc-wa-button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 700;
    margin: 4px 14px 8px;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 12px rgba(37,211,102,0.35);
    align-self: stretch;
}
.cdc-wa-button:hover {
    background: #1da851;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,211,102,0.5);
}
.cdc-wa-button svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    flex-shrink: 0;
}

/* ── WHATSAPP QUICK BUTTON (in quick replies area) ─────────── */
.cdc-wa-divider {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: rgba(208,240,252,0.3);
    margin: 4px 0 2px;
}
.cdc-wa-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 28px);
    margin: 0 14px 4px;
    background: #25d366;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 700;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 12px rgba(37,211,102,0.35);
}
.cdc-wa-quick-btn:hover {
    background: #1da851;
    transform: translateY(-1px);
}
.cdc-wa-quick-btn svg { flex-shrink: 0; }