/* ============================================================
   CT Communications — Unified Floating Action Button + Chat Widget
   [Your Website]
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --ct-primary:       #1a3a5c;
    --ct-accent:        #e8a020;
    --ct-accent-dark:   #c98a10;
    --ct-user-bg:       #1a3a5c;
    --ct-user-text:     #ffffff;
    --ct-bot-bg:        #ffffff;
    --ct-bot-text:      #1a2533;
    --ct-border:        #dde4ed;
    --ct-shadow:        0 8px 32px rgba(26, 58, 92, 0.18);
    --ct-shadow-sm:     0 2px 8px rgba(26, 58, 92, 0.10);
    --ct-radius:        16px;
    --ct-radius-sm:     10px;
    --ct-font-ui:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ct-widget-width:  360px;
    --ct-widget-height: 520px;
    --ct-z:             999990;
}

/* ══════════════════════════════════════════════════════════════
   FAB CONTAINER
   ══════════════════════════════════════════════════════════════ */
#ct-fab-root {
    position:       fixed !important;
    bottom:         24px !important;
    top:            auto !important;
    right:          24px !important;
    left:           auto !important;
    z-index:        var(--ct-z) !important;
    display:        flex !important;
    flex-direction: column-reverse;
    align-items:    flex-end;
    gap:            12px;
    margin:         0 !important;
    transform:      none !important;
}

/* ── "Need Help?" label — inside FAB root, beside launcher ─── */
#ct-fab-need-help {
    position:      absolute;
    bottom:        10px;
    right:         66px;
    white-space:   nowrap;
    font-family:   var(--ct-font-ui);
    font-size:     12px;
    font-weight:   500;
    color:         #4a5568;
    background:    rgba(255,255,255,0.92);
    padding:       4px 10px;
    border-radius: 12px;
    box-shadow:    0 1px 6px rgba(26,58,92,0.12);
    border:        1px solid #e2e8f0;
    pointer-events: none;
    transition:    opacity 0.2s ease;
}

/* ── Main FAB Button ───────────────────────────────────────── */
#ct-fab-main {
    width:           58px;
    height:          58px;
    border-radius:   50%;
    background:      var(--ct-primary);
    border:          3px solid var(--ct-accent);
    box-shadow:      var(--ct-shadow);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
    outline:         none;
    overflow:        hidden;
    padding:         0;
    flex-shrink:     0;
    position:        relative;
}

#ct-fab-main:hover  { transform: scale(1.08); box-shadow: 0 12px 36px rgba(26,58,92,0.28); }
#ct-fab-main:active { transform: scale(0.96); }

#ct-fab-main svg {
    width:      26px;
    height:     26px;
    fill:       #ffffff;
    transition: opacity 0.15s ease, transform 0.2s ease;
    position:   absolute;
}

#ct-fab-main .ct-fab-icon-main  { opacity: 1; transform: rotate(0deg) scale(1); }
#ct-fab-main .ct-fab-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
#ct-fab-main.ct-fab-open .ct-fab-icon-main  { opacity: 0; transform: rotate(90deg) scale(0.7); }
#ct-fab-main.ct-fab-open .ct-fab-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

#ct-fab-main .ct-fab-custom-icon {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
    position:      absolute;
    inset:         0;
    transition:    opacity 0.15s ease;
}
#ct-fab-main.ct-fab-open .ct-fab-custom-icon { opacity: 0; }

#ct-fab-badge {
    position:      absolute;
    top:           -3px;
    right:         -3px;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--ct-accent);
    border:        2px solid #fff;
    display:       none;
    pointer-events: none;
}
#ct-fab-badge.ct-visible { display: block; }

/* ── Action Buttons ────────────────────────────────────────── */
#ct-fab-actions {
    position:       absolute;
    bottom:         70px;
    right:          0;
    display:        flex;
    flex-direction: column-reverse;
    align-items:    flex-end;
    gap:            10px;
    opacity:        0;
    transform:      translateY(10px);
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease;
}


#ct-fab-actions.ct-fab-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: all;
}

.ct-fab-action-item {
    display:     flex;
    align-items: center;
    gap:         10px;
}


.ct-fab-action-item:nth-child(1) { transition-delay: 0.00s; }
.ct-fab-action-item:nth-child(2) { transition-delay: 0.04s; }
.ct-fab-action-item:nth-child(3) { transition-delay: 0.08s; }
.ct-fab-action-item:nth-child(4) { transition-delay: 0.12s; }

.ct-fab-action-label {
    background:   #ffffff;
    color:        #1e293b;
    font-family:  var(--ct-font-ui);
    font-size:    13px;
    font-weight:  500;
    padding:      6px 12px;
    border-radius: 20px;
    box-shadow:   0 2px 8px rgba(26,58,92,0.13);
    white-space:  nowrap;
    user-select:  none;
    border:       1px solid #e2e8f0;
    line-height:  1.3;
}

.ct-fab-action-btn {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--ct-shadow-sm);
    flex-shrink:     0;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    outline:         none;
}

.ct-fab-action-btn:hover  { transform: scale(1.12); box-shadow: 0 4px 16px rgba(26,58,92,0.22); }
.ct-fab-action-btn:active { transform: scale(0.95); }

.ct-fab-action-btn svg { width: 20px; height: 20px; fill: #ffffff; }

.ct-fab-btn-chat  { background: var(--ct-primary); }
.ct-fab-btn-sms   { background: #16a34a; }
.ct-fab-btn-email { background: #2563eb; }
.ct-fab-btn-faq   { background: #7c3aed; }

/* ══════════════════════════════════════════════════════════════
   CHAT WINDOW
   ══════════════════════════════════════════════════════════════ */
#ct-chat-window {
    position:       fixed !important;
    bottom:         96px !important;
    top:            auto !important;
    right:          24px !important;
    left:           auto !important;
    z-index:        calc(var(--ct-z) + 1);
    width:          var(--ct-widget-width);
    height:         var(--ct-widget-height);
    max-height:     80vh;
    border-radius:  var(--ct-radius);
    background:     #ffffff;
    box-shadow:     var(--ct-shadow);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    border:         1px solid var(--ct-border);
    opacity:        0;
    transform:      translateY(16px) scale(0.97);
    pointer-events: none;
    transition:     opacity 0.22s ease, transform 0.22s ease;
    margin:         0 !important;
}

#ct-chat-window.ct-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

/* ── Chat Header ───────────────────────────────────────────── */
#ct-chat-header {
    background:  var(--ct-primary);
    padding:     14px 18px;
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
}

.ct-header-avatar {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      var(--ct-accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
}

.ct-header-avatar svg  { width: 20px; height: 20px; fill: var(--ct-primary); }
.ct-header-avatar img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-header-text        { flex: 1; }

#ct-chat-close-btn {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.15);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.15s ease;
    outline:         none;
    padding:         0;
}
#ct-chat-close-btn:hover { background: rgba(255,255,255,0.28); }
#ct-chat-close-btn svg   { width: 16px; height: 16px; fill: #ffffff; }

.ct-header-name {
    font-family:    var(--ct-font-ui);
    font-size:      14px;
    font-weight:    600;
    color:          #ffffff;
    line-height:    1.2;
    letter-spacing: 0.01em;
}

.ct-header-status {
    font-family: var(--ct-font-ui);
    font-size:   11px;
    color:       rgba(255,255,255,0.65);
    margin-top:  2px;
}

.ct-header-status::before {
    content:        '';
    display:        inline-block;
    width:          6px;
    height:         6px;
    border-radius:  50%;
    background:     #4ade80;
    margin-right:   5px;
    vertical-align: middle;
}

/* ── Messages ──────────────────────────────────────────────── */
#ct-chat-messages {
    flex:            1;
    overflow-y:      auto;
    padding:         16px 14px;
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    background:      #f8fafc;
    scroll-behavior: smooth;
}

#ct-chat-messages::-webkit-scrollbar       { width: 4px; }
#ct-chat-messages::-webkit-scrollbar-track { background: transparent; }
#ct-chat-messages::-webkit-scrollbar-thumb { background: var(--ct-border); border-radius: 4px; }

.ct-message-row        { display: flex; gap: 8px; max-width: 100%; }
.ct-message-row.ct-user { flex-direction: row-reverse; }

.ct-message-bubble {
    max-width:     80%;
    padding:       10px 13px;
    border-radius: var(--ct-radius-sm);
    font-family:   var(--ct-font-ui);
    font-size:     13.5px;
    line-height:   1.5;
}

.ct-message-row.ct-bot .ct-message-bubble {
    background:               var(--ct-bot-bg);
    color:                    var(--ct-bot-text);
    border:                   1px solid var(--ct-border);
    border-bottom-left-radius: 3px;
    box-shadow:               var(--ct-shadow-sm);
}

.ct-message-row.ct-user .ct-message-bubble {
    background:                var(--ct-user-bg);
    color:                     var(--ct-user-text);
    border-bottom-right-radius: 3px;
}

/* ── Typing ────────────────────────────────────────────────── */
.ct-typing-indicator        { display: flex; gap: 4px; padding: 12px 14px; align-items: center; }
.ct-typing-indicator span   { width: 6px; height: 6px; border-radius: 50%; background: var(--ct-border); display: inline-block; animation: ct-bounce 1.2s infinite ease-in-out; }
.ct-typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
.ct-typing-indicator span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ct-bounce {
    0%, 60%, 100% { transform: translateY(0);    background: var(--ct-border); }
    30%            { transform: translateY(-5px); background: var(--ct-primary); }
}

/* ── Intro Message ─────────────────────────────────────────── */
.ct-intro-message {
    background:    linear-gradient(135deg, #eef4fb 0%, #f8fafc 100%);
    border:        1px solid var(--ct-border);
    border-radius: var(--ct-radius-sm);
    padding:       12px 14px;
    font-family:   var(--ct-font-ui);
    font-size:     13px;
    color:         #4a5568;
    line-height:   1.55;
}

.ct-intro-message strong {
    display:       block;
    color:         var(--ct-primary);
    font-size:     13.5px;
    margin-bottom: 4px;
}

/* ── Input Area ────────────────────────────────────────────── */
#ct-chat-input-area {
    display:     flex;
    gap:         8px;
    padding:     12px 14px;
    border-top:  1px solid var(--ct-border);
    background:  #ffffff;
    flex-shrink: 0;
}

#ct-chat-input {
    flex:          1;
    padding:       9px 13px;
    border:        1px solid var(--ct-border);
    border-radius: 22px;
    font-family:   var(--ct-font-ui);
    font-size:     13.5px;
    color:         var(--ct-bot-text);
    background:    #f8fafc;
    resize:        none;
    min-height:    40px;
    max-height:    100px;
    line-height:   1.45;
    outline:       none;
    transition:    border-color 0.15s ease;
}

#ct-chat-input:focus        { border-color: var(--ct-primary); background: #ffffff; }
#ct-chat-input::placeholder { color: #a0aec0; }

#ct-chat-send {
    width:           72px;
    height:          40px;
    border-radius:   10px;
    background:      var(--ct-primary);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.15s ease, transform 0.12s ease;
    outline:         none;
    align-self:      flex-end;
    padding:         0 12px;
    font-family:     var(--ct-font-ui);
    font-size:       13px;
    font-weight:     600;
    color:           #ffffff;
    letter-spacing:  0.01em;
}

#ct-chat-send:hover:not(:disabled)  { background: var(--ct-accent-dark); }
#ct-chat-send:active:not(:disabled) { transform: scale(0.92); }
#ct-chat-send:disabled              { background: var(--ct-border); cursor: not-allowed; }

/* ── Footer ────────────────────────────────────────────────── */
#ct-chat-footer-note {
    text-align:  center;
    font-family: var(--ct-font-ui);
    font-size:   12.5px;
    color:       #64748b;
    padding:     6px 14px 10px;
    background:  #ffffff;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 420px) {
    :root { --ct-widget-width: calc(100vw - 24px); }

    #ct-chat-window {
        right:  12px !important;
        bottom: 90px !important;
        left:   12px !important;
        top:    auto !important;
        width:  auto;
    }

    #ct-fab-root { right: 16px !important; bottom: 16px !important; top: auto !important; }
}