/**
 * Debtia Crisp Chat Overrides
 *
 * Custom styling for Crisp chat widget to match Debtia brand
 * Uses body prefix and !important to override Crisp's inline styles
 *
 * @package Debtia
 */

/* ===========================================
   Trigger Button (Closed & Opened states)
   =========================================== */

/* Chat trigger button - both states */
body .cc-yv368 .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_opened],
body .cc-yv368 .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_closed] {
    background: linear-gradient(135deg, #088c76 0%, #002954 100%) !important;
    box-shadow: 0 4px 20px rgba(8, 140, 118, 0.4) !important;
    transition: all 0.3s ease !important;
}

body .cc-yv368 .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_opened]:hover,
body .cc-yv368 .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_closed]:hover {
    box-shadow: 0 6px 28px rgba(8, 140, 118, 0.5) !important;
    transform: scale(1.05) !important;
}

/* Trigger button hover with outline (specific Crisp selector) */
body .cc-yv368[data-website-logo=false][data-last-operator-face=false][data-ongoing-operator-face=false][data-full-view=false] .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_opened]:hover,
body .cc-yv368[data-website-logo=false][data-last-operator-face=false][data-ongoing-operator-face=false][data-full-view=false] .cc-1kr6o .cc-18ov6 .cc-1qbp0 .cc-otlyh[data-id=chat_closed]:hover {
    outline-width: 5px !important;
    outline-color: rgba(8, 140, 118, 0.15) !important;
    background: linear-gradient(135deg, #067a67 0%, #001f40 100%) !important;
}

/* ===========================================
   Input Field Focus State
   =========================================== */

body .crisp-client .cc-1rjtq--focused {
    border-color: #088c76 !important;
    box-shadow: 0 0 0 3px rgba(8, 140, 118, 0.15), 0 2px 3px rgba(0, 41, 84, 0.02) !important;
}

/* ===========================================
   Chat Window Header
   =========================================== */

/* Main header container */
body .crisp-client .cc-yv368 .cc-16grk {
    background: linear-gradient(135deg, #088c76 0%, #002954 100%) !important;
}

/* Header shadow (::before) */
body .crisp-client .cc-yv368 .cc-16grk::before {
    background: linear-gradient(180deg, rgba(0, 41, 84, 0.15) 0%, transparent 100%) !important;
    opacity: 0.5 !important;
}

/* Header background shapes (::after) */
body .crisp-client .cc-yv368 .cc-16grk::after {
    background-image: none !important;
    opacity: 0.1 !important;
}

/* ===========================================
   Operator Avatar in Chat
   =========================================== */

/* Avatar ring/border for operator messages */
body .crisp-client .cc-1y2jb .cc-1sqaq .cc-nb9p2--operator .cc-lpnsx .cc-1ikzx {
    border-color: #088c76 !important;
    box-shadow: 0 2px 8px rgba(8, 140, 118, 0.3) !important;
}

/* Operator message bubble styling */
body .crisp-client .cc-1y2jb .cc-1sqaq .cc-nb9p2--operator .cc-1tqok {
    background-color: #f0f7f6 !important;
    border-color: rgba(8, 140, 118, 0.1) !important;
}

/* ===========================================
   Hide "We run on Crisp" Label
   =========================================== */

body .crisp-client .cc-13mua {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ===========================================
   Additional Styling Enhancements
   =========================================== */

/* Send button */
body .crisp-client .cc-yv368 .cc-1a6q5 .cc-1h7p6 .cc-k61dj {
    background: #088c76 !important;
}

body .crisp-client .cc-yv368 .cc-1a6q5 .cc-1h7p6 .cc-k61dj:hover {
    background: #067a67 !important;
}

/* Chat window border radius */
body .crisp-client .cc-yv368 .cc-1x2f4 {
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 41, 84, 0.2) !important;
}

/* Online status indicator */
body .crisp-client .cc-yv368 .cc-16grk .cc-1x2f4 .cc-1vrh3 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* User message bubbles */
body .crisp-client .cc-1y2jb .cc-1sqaq .cc-nb9p2--visitor .cc-1tqok {
    background: linear-gradient(135deg, #088c76 0%, #067a67 100%) !important;
}

/* Links in chat */
body .crisp-client .cc-yv368 a {
    color: #088c76 !important;
}

body .crisp-client .cc-yv368 a:hover {
    color: #002954 !important;
}

/* Input field focus state (alternative selector) */
body .crisp-client .cc-yv368 .cc-1a6q5 .cc-1h7p6 .cc-1cr5h:focus {
    border-color: #088c76 !important;
    box-shadow: 0 0 0 2px rgba(8, 140, 118, 0.2) !important;
}

/* Typing indicator */
body .crisp-client .cc-yv368 .cc-1y2jb .cc-19ts7 {
    color: #088c76 !important;
}

/* Unread badge */
body .crisp-client .cc-yv368 .cc-1kr6o .cc-12slu {
    background: #002954 !important;
}

/* Scrollbar in chat */
body .crisp-client .cc-yv368 .cc-1y2jb::-webkit-scrollbar-thumb {
    background: rgba(8, 140, 118, 0.3) !important;
}

body .crisp-client .cc-yv368 .cc-1y2jb::-webkit-scrollbar-thumb:hover {
    background: rgba(8, 140, 118, 0.5) !important;
}

/* Close button in header */
body .crisp-client .cc-yv368 .cc-16grk .cc-1d5mg {
    opacity: 0.8 !important;
}

body .crisp-client .cc-yv368 .cc-16grk .cc-1d5mg:hover {
    opacity: 1 !important;
}

/* Emoji picker button */
body .crisp-client .cc-yv368 .cc-1a6q5 .cc-1h7p6 .cc-1rwfkz:hover {
    color: #088c76 !important;
}

/* File attachment button */
body .crisp-client .cc-yv368 .cc-1a6q5 .cc-1h7p6 .cc-1y3v2z:hover {
    color: #088c76 !important;
}

body .crisp-client .cc-yv368 .cc-fx907 {
    background: #088c76 !important;
}