/* Chat Center – Frontend CSS */
:root {
    --cc-primary:   #2271b1;
    --cc-accent:    #00a32a;
    --cc-dark:      #1d2327;
    --cc-light:     #f6f7f7;
    --cc-border:    #dcdcde;
    --cc-radius:    14px;
    --cc-shadow:    0 8px 32px rgba(0,0,0,.18);
    --cc-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Icon bubble ─────────────────────────────────────────────────── */
#cc-chat-icon {
    position: fixed;
    z-index: 99999;
    cursor: pointer;
    border-radius: 50%;
    background: var(--cc-primary);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--cc-shadow);
    transition: transform .2s;
}
#cc-chat-icon:hover { transform: scale(1.1); }
#cc-chat-icon svg  { fill: #fff; }
#cc-chat-icon.cc-has-custom-image { padding: 0; overflow: hidden; }

#cc-chat-icon.top-left     { top: 20px;    left: 20px;  }
#cc-chat-icon.top-right    { top: 20px;    right: 20px; }
#cc-chat-icon.bottom-left  { bottom: 20px; left: 20px;  }
#cc-chat-icon.bottom-right { bottom: 20px; right: 20px; }

@keyframes cc-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
#cc-chat-icon.cc-spinning { animation: cc-spin .8s ease-in-out; }
#cc-chat-icon { transform-style: preserve-3d; }

/* ── Greeting bubble above the icon ──────────────────────────────── */
#cc-chat-bubble {
    position: fixed;
    z-index: 99998;
    max-width: 240px;
    background: #fff;
    color: var(--cc-dark);
    font-family: var(--cc-font);
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 30px 12px 14px;
    border-radius: 14px;
    box-shadow: var(--cc-shadow);
    animation: cc-bubble-in .35s ease-out;
}
#cc-chat-bubble::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
}
#cc-chat-bubble .cc-bubble-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    color: #8a8f98;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}
#cc-chat-bubble .cc-bubble-close:hover { color: var(--cc-dark); }

/* Position bubbles above the icon, matching each corner */
#cc-chat-bubble.bottom-right { bottom: 92px; right: 20px; }
#cc-chat-bubble.bottom-right::after { bottom: -6px; right: 24px; }

#cc-chat-bubble.bottom-left { bottom: 92px; left: 20px; }
#cc-chat-bubble.bottom-left::after { bottom: -6px; left: 24px; }

#cc-chat-bubble.top-right { top: 92px; right: 20px; }
#cc-chat-bubble.top-right::after { top: -6px; right: 24px; }

#cc-chat-bubble.top-left { top: 92px; left: 20px; }
#cc-chat-bubble.top-left::after { top: -6px; left: 24px; }

@keyframes cc-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    #cc-chat-bubble { max-width: 200px; font-size: 13px; }
}

/* ── Chat window ─────────────────────────────────────────────────── */
#cc-chat-window {
    position: fixed;
    z-index: 99998;
    width: 360px;
    max-height: 520px;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    font-family: var(--cc-font);
    font-size: 14px;
    transition: opacity .25s, transform .25s;
}
#cc-chat-window.hidden { opacity:0; pointer-events:none; transform: translateY(12px); }

#cc-chat-window.bottom-right { bottom: 90px; right: 20px; }
#cc-chat-window.bottom-left  { bottom: 90px; left:  20px; }
#cc-chat-window.top-right    { top: 90px;    right: 20px; }
#cc-chat-window.top-left     { top: 90px;    left:  20px; }

/* Header */
.cc-win-header {
    background: var(--cc-primary);
    color: #fff;
    padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
}
.cc-win-header h4 { margin:0; font-size:15px; font-weight:600; }
.cc-win-close {
    background: none; border: none; color:#fff; font-size:18px; cursor:pointer; line-height:1;
}

/* Identification form */
#cc-id-form { padding: 18px 20px; }
#cc-id-form p { margin:0 0 12px; color: #555; font-size:14px; }
#cc-id-form input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--cc-border);
    border-radius: 8px; font-size:14px; box-sizing:border-box; margin-bottom:8px;
}
#cc-id-form button {
    width:100%; background: var(--cc-primary); color:#fff; border:none;
    padding: 10px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600;
    margin-top:4px;
}
#cc-id-form button:hover { background: #1a5fa0; }
.cc-form-error { color: #d63638; font-size:12px; margin:6px 0 0; }

/* Messages */
#cc-messages {
    flex:1; overflow-y:auto; padding:12px 14px;
    display:flex; flex-direction:column; gap:8px;
    background: #fafafa;
}
.cc-msg {
    display:flex; flex-direction:column; max-width:80%;
}
.cc-msg.client  { align-self:flex-end;  align-items:flex-end;  }
.cc-msg.operator,
.cc-msg.ai,
.cc-msg.system  { align-self:flex-start; align-items:flex-start; }

.cc-msg-bubble {
    padding: 9px 13px; border-radius:12px; line-height:1.45; word-break:break-word;
}
.cc-msg.client   .cc-msg-bubble { background: var(--cc-primary); color:#fff; border-bottom-right-radius:3px; }
.cc-msg.operator .cc-msg-bubble { background: #e8f5e9; color: var(--cc-dark); border-bottom-left-radius:3px; }
.cc-msg.ai       .cc-msg-bubble { background: #e3f2fd; color: var(--cc-dark); border-bottom-left-radius:3px; }
.cc-msg.system   .cc-msg-bubble { background: #f0f0f0; color:#666; font-size:13px; }
.cc-msg-bubble a { color: inherit; text-decoration: underline; word-break: break-word; }
.cc-msg.client   .cc-msg-bubble a { color: #fff; }
.cc-msg.ai       .cc-msg-bubble a,
.cc-msg.operator .cc-msg-bubble a { color: var(--cc-primary); }

.cc-msg-time { font-size:11px; color:#999; margin-top:2px; }

/* Typing indicator */
.cc-typing .cc-msg-bubble { display:flex; gap:4px; align-items:center; }
.cc-dot { width:7px; height:7px; border-radius:50%; background:#aaa; animation: cc-bounce 1.2s infinite; }
.cc-dot:nth-child(2) { animation-delay:.2s; }
.cc-dot:nth-child(3) { animation-delay:.4s; }
@keyframes cc-bounce { 0%,80%,100%{transform:scale(0);} 40%{transform:scale(1);} }

/* Input area */
.cc-input-area {
    display:flex; padding:10px 12px; border-top:1px solid var(--cc-border); gap:8px; background:#fff;
}
.cc-input-area textarea {
    flex:1; resize:none; border:1px solid var(--cc-border); border-radius:8px;
    padding:8px 10px; font-size:14px; font-family:inherit; max-height:100px;
}
.cc-input-area button {
    background: var(--cc-primary); color:#fff; border:none; border-radius:8px;
    padding: 0 16px; cursor:pointer; font-weight:600; white-space:nowrap;
}
.cc-input-area button:hover { background: #1a5fa0; }

/* Closed notice */
.cc-closed-notice {
    text-align:center; padding:16px; color:#888; font-size:13px;
}

/* Offline notice */
.cc-offline-notice {
    background: #fff3cd; color:#856404; padding:8px 14px; font-size:13px; text-align:center;
}

/* Responsive */
@media(max-width:400px){
    #cc-chat-window { width:calc(100vw - 20px); right:10px!important; left:10px!important; }
}

/* Disabled state while waiting for AI */
.cc-input-area textarea:disabled { opacity: .5; cursor: not-allowed; }
.cc-input-area button:disabled    { opacity: .5; cursor: not-allowed; }

/* ── Language picker ─────────────────────────────────────────────── */
#cc-lang-picker { padding: 20px 16px; text-align:center; }
.cc-lang-header { font-size:14px; color:#444; margin:0 0 14px; font-weight:500; }
.cc-lang-flags  { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.cc-flag-btn {
    font-size:36px; background:none; border:2px solid transparent;
    border-radius:10px; cursor:pointer; padding:6px 8px; line-height:1;
    transition: border-color .2s, transform .15s;
}
.cc-flag-btn:hover { border-color: var(--cc-primary); transform:scale(1.15); }

/* ── ID form ─────────────────────────────────────────────────────── */
#cc-id-form { padding: 18px 20px; }
#cc-id-form input {
    width:100%; padding:9px 12px; border:1px solid var(--cc-border);
    border-radius:8px; font-size:14px; box-sizing:border-box; margin-bottom:8px;
}
#cc-id-form button {
    width:100%; background:var(--cc-primary); color:#fff; border:none;
    padding:10px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; margin-top:4px;
}
#cc-id-form button:hover { background:#1a5fa0; }
.cc-form-error { color:#d63638; font-size:12px; margin:6px 0 0; }

/* ── Sender name above bubble ────────────────────────────────────── */
.cc-msg-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 3px;
}
.cc-msg.client  .cc-msg-name { text-align: right; color: #4a90d9; }
.cc-msg.operator .cc-msg-name,
.cc-msg.ai       .cc-msg-name { text-align: left; color: #2e7d32; }
.cc-msg.system   .cc-msg-name { display: none; }

/* ── Markdown rendering inside AI bubbles ────────────────────────── */
.cc-msg.ai .cc-msg-bubble ul,
.cc-msg.ai .cc-msg-bubble ol {
    margin: 6px 0 6px 18px;
    padding: 0;
}
.cc-msg.ai .cc-msg-bubble li {
    margin-bottom: 3px;
    line-height: 1.5;
}
.cc-msg.ai .cc-msg-bubble strong { font-weight: 700; }
.cc-msg.ai .cc-msg-bubble em     { font-style: italic; }