:root {
    --ccb-teal: #0e5d56;
    --ccb-teal-dark: #0a4944;
    --ccb-orange: #f5a623;
    --ccb-bg: #ffffff;
    --ccb-text: #1a1a1a;
    --ccb-muted: #f4f6f7;
    --ccb-border: #e3e8ea;
}

#ccb-root, #ccb-root * { box-sizing: border-box; }

/* Floating bubble */
#ccb-bubble {
    position: fixed !important; right: 20px; bottom: 20px; z-index: 99998;
    width: 60px !important; height: 60px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important;
    background: var(--ccb-teal) !important;
    border: 3px solid var(--ccb-orange) !important;
    color: #fff !important; cursor: pointer;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: transform .15s ease;
    line-height: 1 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
#ccb-bubble:hover { transform: scale(1.05); }
#ccb-bubble svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    vertical-align: middle;
}
#ccb-bubble svg * {
    stroke: #ffffff !important;
    fill: none !important;
}

/* Panel */
#ccb-panel {
    position: fixed; right: 20px; bottom: 90px; z-index: 99999;
    width: 380px; max-width: calc(100vw - 24px);
    height: 600px; max-height: calc(100vh - 110px);
    background: var(--ccb-bg);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    display: none; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ccb-text);
}
#ccb-panel.ccb-open { display: flex; }

/* Header */
.ccb-header {
    background: var(--ccb-teal);
    color: #fff;
    padding: 14px 16px 12px;
    position: relative;
}
.ccb-header h3 { margin: 0; font-size: 17px; font-weight: 700; color:#fff; }
.ccb-header .ccb-subtitle { font-size: 12px; color: var(--ccb-orange); margin-top: 2px; }
.ccb-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--ccb-orange);
}
.ccb-close {
    position: absolute; right: 10px; top: 10px;
    background: transparent; border: 0; color: #fff;
    width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1;
	&:hover {
      background: transparent;
    }
}

/* Body */
.ccb-body {
    flex: 1; overflow-y: auto; padding: 14px;
    background: #fff;
    display: flex; flex-direction: column; gap: 10px;
}

/* Messages */
.ccb-msg-bot {
    background: #fff;
    border: 1px solid var(--ccb-border);
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 85%;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ccb-msg-bot .ccb-bot-name {
    color: var(--ccb-teal); font-weight: 700; font-size: 13px; display:block; margin-bottom: 4px;
}
.ccb-msg-bot p {
    margin: 0; font-size: 14px; line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Closing message — visually indicates the chat session has ended */
.ccb-msg-closing {
    border: 3px solid var(--ccb-orange);
}

.ccb-msg-user {
    align-self: flex-end;
    background: var(--ccb-teal);
    color: #fff;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 14px; font-weight: 600;
    max-width: 80%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Typing indicator */
.ccb-typing-dots {
    display: inline-flex; gap: 4px; align-items: center; height: 16px;
}
.ccb-typing-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ccb-teal);
    opacity: 0.4;
    animation: ccb-typing-bounce 1.2s infinite ease-in-out;
}
.ccb-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ccb-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ccb-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}


/* Choices */
.ccb-choices { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 4px; }
.ccb-choice-btn {
    background: #fff;
    border: 1px solid var(--ccb-teal);
    color: var(--ccb-teal);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: background .12s ease;
	&:hover {
		background: #c59d5f;
		border: 1px solid #c59d5f;
		color: #fff;
	}
}

.ccb-actions { display: flex; justify-content: center; padding: 6px 14px 12px; }
.ccb-back-btn {
    background: #fff; border: 1px solid var(--ccb-teal); color: var(--ccb-teal);
    border-radius: 999px; padding: 7px 16px; font-size: 13px; cursor: pointer;
}
.ccb-back-btn:hover { background: var(--ccb-muted); }

/* Text input */
.ccb-text-input-wrap { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ccb-border); }
.ccb-text-input-wrap input {
    flex: 1; border: 1px solid var(--ccb-border); border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.ccb-text-input-wrap button {
    background: var(--ccb-teal); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: 600;
}

@media (max-width: 480px) {
    #ccb-panel {
        right: 8px; left: 8px; width: auto;
        top: 8px; bottom: 80px;
        height: auto;
        max-height: none;
    }
}