/* ════════════════════════════════════════════════════
   KENT HEATING AI CHATBOT — WIDGET STYLES v2.0
   Headings : Barlow Condensed
   Body      : Public Sans
   Primary   : #e31837
════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --kh-red:        #e31837;
    --kh-red-dk:     #c41530;
    --kh-red-lt:     rgba(227,24,55,0.10);
    --kh-navy:       #0c1a2e;
    --kh-navy-mid:   #1a3050;
    --kh-white:      #ffffff;
    --kh-bg:         #f5f7fa;
    --kh-border:     #dde3eb;
    --kh-text:       #1a2533;
    --kh-muted:      #7a90a8;
    --kh-shadow:     0 16px 52px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.08);
    --kh-font-head:  'Barlow Condensed', system-ui, sans-serif;
    --kh-font:       'Public Sans', system-ui, sans-serif;
    --kh-radius:     20px;
    --kh-z:          99999;
}

/* ── Teaser ─────────────────────────────────────────────── */
#kh-teaser {
    position: fixed;
    bottom: 108px; right: 30px;
    background: var(--kh-white);
    color: var(--kh-text);
    padding: 10px 16px;
    border-radius: 22px 22px 4px 22px;
    font-family: var(--kh-font);
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    z-index: var(--kh-z);
    pointer-events: none; white-space: nowrap;
    /* JS controls visibility via opacity; transition gives a smooth pop-in */
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.17,.67,.38,1.4);
}
#kh-teaser.kh-teaser--visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── FAB ────────────────────────────────────────────────── */
#kh-fab {
    position: fixed; bottom: 30px; right: 30px;
    width: 62px; height: 62px;
    background: var(--kh-red); border: none; border-radius: 50%;
    cursor: pointer; outline: none;
    display: flex !important; align-items: center; justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 24px rgba(227,24,55,.48);
    z-index: var(--kh-z);
    transition: transform .22s cubic-bezier(.17,.67,.38,1.3), box-shadow .2s;
    position: fixed; /* re-state so position:relative below works for badge */
}
/* Force all SVGs inside our widget to be visible — overrides any theme reset */
#kh-fab svg,
#kh-send-btn svg,
#kh-chat-window svg {
    display: inline-block !important;
    visibility: visible !important;
    overflow: visible !important;
}
#kh-fab svg {
    width: 26px; height: 26px;
    stroke: #ffffff !important; fill: none !important;
    pointer-events: none;
}
#kh-fab:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(227,24,55,.6); }
#kh-fab:focus-visible { box-shadow:0 0 0 3px #fff,0 0 0 5px var(--kh-red); }
.kh-fab-badge {
    position: absolute; top:0; right:0;
    width:19px; height:19px;
    background: var(--kh-navy); color:#fff;
    border-radius:50%; border:2px solid #fff;
    font-family:var(--kh-font); font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
}

/* ── Chat Window ─────────────────────────────────────────── */
#kh-chat-window {
    position: fixed; bottom:108px; right:30px;
    width:375px; max-height:590px;
    background:var(--kh-white);
    border-radius:var(--kh-radius);
    box-shadow:var(--kh-shadow);
    display:flex; flex-direction:column;
    z-index:var(--kh-z); overflow:hidden;
    font-family:var(--kh-font);
    transform-origin:bottom right;
}
#kh-chat-window.kh-opening { animation:khWinOpen .3s cubic-bezier(.17,.67,.38,1.15) both; }
#kh-chat-window.kh-closing { animation:khWinClose .22s ease forwards; }
@keyframes khWinOpen {
    from { opacity:0; transform:scale(.8) translateY(20px); }
    to   { opacity:1; transform:scale(1)  translateY(0); }
}
@keyframes khWinClose { to { opacity:0; transform:scale(.8) translateY(20px); } }

/* ── Header ─────────────────────────────────────────────── */
.kh-cw-header {
    background:linear-gradient(140deg,var(--kh-navy) 0%,var(--kh-navy-mid) 100%);
    padding:17px 18px 15px;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0; position:relative; overflow:hidden;
}
.kh-cw-header::before {
    content:''; position:absolute; top:-20px; right:-20px;
    width:90px; height:90px;
    background:var(--kh-red); opacity:.08; border-radius:50%;
}
.kh-cw-header__left { display:flex; align-items:center; gap:11px; position:relative; }
.kh-cw-avatar {
    width:42px; height:42px; background:var(--kh-red);
    border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; box-shadow:0 3px 10px rgba(227,24,55,.4);
}
/* Logo variant — wider pill shape, white background */
.kh-cw-avatar--logo {
    width:auto; min-width:42px; max-width:120px;
    height:42px; background:#fff;
    border-radius:10px; padding:0 8px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.kh-cw-avatar--logo img {
    display:block; height:32px; max-width:110px;
    width:auto; object-fit:contain;
}
.kh-cw-header__info strong {
    display:block;
    font-family:var(--kh-font-head);
    font-size:18px; font-weight:700; letter-spacing:.4px;
    color:#fff; line-height:1.1;
}
.kh-cw-header__info span {
    font-family:var(--kh-font);
    font-size:11.5px; color:#7b9bbf;
    display:flex; align-items:center; gap:5px; margin-top:3px;
}
.kh-online-dot {
    width:7px; height:7px; background:#4cd97b;
    border-radius:50%; flex-shrink:0;
    animation:khPulse 2.5s infinite;
}
@keyframes khPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.kh-offline-indicator { width:7px; height:7px; background:#f59e0b; border-radius:50%; flex-shrink:0; }
.kh-cw-close {
    background:rgba(255,255,255,.08); border:none; color:#7b9bbf;
    cursor:pointer; padding:6px; border-radius:8px;
    display:flex; transition:color .15s,background .15s; position:relative;
}
.kh-cw-close:hover { color:#fff; background:rgba(255,255,255,.16); }

/* Offline banner */
.kh-offline-banner {
    background:#fff3cd; border-bottom:1px solid #ffc107;
    padding:8px 16px; font-size:12.5px;
    font-family:var(--kh-font); color:#856404; font-weight:500;
    text-align:center; flex-shrink:0;
}

/* ── Pre-chat Form ───────────────────────────────────────── */
.kh-prechat { padding:22px 18px 18px; flex:1; overflow-y:auto; background:var(--kh-bg); }
.kh-prechat__intro { text-align:center; margin-bottom:20px; }
.kh-prechat__icon  { font-size:32px; margin-bottom:8px; }
.kh-prechat__intro p { font-size:14px; color:var(--kh-muted); line-height:1.6; }
.kh-prechat__fields { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.kh-prechat__field label {
    display:block; font-family:var(--kh-font);
    font-size:11px; font-weight:700; color:var(--kh-text);
    margin-bottom:5px; text-transform:uppercase; letter-spacing:.7px;
}
.kh-optional { color:var(--kh-muted); font-weight:400; text-transform:none; letter-spacing:0; }
.kh-prechat__field input {
    width:100%; box-sizing:border-box;
    border:1.5px solid var(--kh-border); border-radius:10px;
    padding:10px 13px; font-family:var(--kh-font); font-size:14px;
    color:var(--kh-text); background:var(--kh-white); outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.kh-prechat__field input:focus { border-color:var(--kh-red); box-shadow:0 0 0 3px var(--kh-red-lt); }
.kh-consent-wrap {
    display:flex; align-items:flex-start; gap:9px;
    margin-bottom:16px; font-size:12px;
    font-family:var(--kh-font); color:var(--kh-muted); line-height:1.5;
}
.kh-consent-wrap input[type=checkbox] { margin-top:2px; flex-shrink:0; accent-color:var(--kh-red); }
.kh-consent-wrap a { color:var(--kh-red); }
.kh-prechat__actions { display:flex; flex-direction:column; gap:8px; }
.kh-btn-primary {
    background:var(--kh-red); color:#fff; border:none;
    border-radius:10px; padding:13px; width:100%;
    font-family:var(--kh-font-head); font-size:16px; font-weight:700; letter-spacing:.4px;
    cursor:pointer; transition:background .15s,transform .1s,box-shadow .15s;
}
.kh-btn-primary:hover { background:var(--kh-red-dk); transform:translateY(-1px); box-shadow:0 4px 14px rgba(227,24,55,.35); }
.kh-btn-skip { background:transparent; color:var(--kh-muted); border:none; font-family:var(--kh-font); font-size:13px; cursor:pointer; padding:6px; transition:color .15s; }
.kh-btn-skip:hover { color:var(--kh-text); }

/* ── Messages ────────────────────────────────────────────── */
.kh-messages {
    flex:1; overflow-y:auto; padding:16px 14px;
    display:flex; flex-direction:column; gap:10px;
    background:var(--kh-bg); scroll-behavior:smooth; min-height:0;
}
.kh-messages::-webkit-scrollbar { width:4px; }
.kh-messages::-webkit-scrollbar-thumb { background:#c8d3df; border-radius:4px; }
.kh-msg { display:flex; flex-direction:column; max-width:88%; animation:khMsgIn .22s ease both; }
@keyframes khMsgIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
.kh-msg--bot  { align-self:flex-start; }
.kh-msg--user { align-self:flex-end; }
.kh-bubble {
    padding:10px 14px; border-radius:16px;
    font-size:14px; line-height:1.58; font-family:var(--kh-font);
}
.kh-msg--bot  .kh-bubble { background:#fff; color:var(--kh-text); border-bottom-left-radius:4px; box-shadow:0 1px 5px rgba(0,0,0,.07); }
.kh-msg--user .kh-bubble { background:var(--kh-red); color:#fff; border-bottom-right-radius:4px; }
.kh-bubble a  { color:var(--kh-red); }
.kh-msg--user .kh-bubble a { color:rgba(255,255,255,.85); text-decoration:underline; }
.kh-msg--system { align-self:center; max-width:90%; }
.kh-msg--system .kh-bubble { background:transparent; color:var(--kh-muted); font-size:11.5px; text-align:center; box-shadow:none; padding:4px 8px; border-radius:0; }

/* Typing */
.kh-typing {
    display:flex; align-items:center; gap:4px;
    padding:11px 14px; background:#fff;
    border-radius:16px; border-bottom-left-radius:4px;
    width:fit-content; box-shadow:0 1px 5px rgba(0,0,0,.07);
}
.kh-dot { width:6px; height:6px; background:#b0bec8; border-radius:50%; animation:khDot 1.3s infinite; }
.kh-dot:nth-child(2){animation-delay:.18s} .kh-dot:nth-child(3){animation-delay:.36s}
@keyframes khDot { 0%,75%,100%{transform:translateY(0);opacity:.45} 38%{transform:translateY(-5px);opacity:1} }

/* ── Quick Replies ───────────────────────────────────────── */
.kh-quick-replies { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px 10px; background:var(--kh-bg); flex-shrink:0; }
.kh-qr {
    background:#fff; border:1.5px solid var(--kh-red); color:var(--kh-red);
    border-radius:20px; padding:6px 13px;
    font-family:var(--kh-font); font-size:12.5px; font-weight:600;
    cursor:pointer; transition:all .15s; white-space:nowrap;
}
.kh-qr:hover { background:var(--kh-red); color:#fff; }

/* ── Input ───────────────────────────────────────────────── */
.kh-input-row { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--kh-border); background:#fff; flex-shrink:0; }
#kh-input {
    flex:1; border:1.5px solid var(--kh-border); border-radius:22px;
    padding:9px 16px; font-family:var(--kh-font); font-size:14px;
    color:var(--kh-text); background:var(--kh-bg); outline:none;
    transition:border-color .2s,background .2s,box-shadow .2s;
}
#kh-input:focus { border-color:var(--kh-red); background:#fff; box-shadow:0 0 0 3px var(--kh-red-lt); }
#kh-input:disabled { opacity:.5; }
.kh-char-count { font-family:var(--kh-font); font-size:11px; color:var(--kh-muted); flex-shrink:0; min-width:28px; text-align:right; }
.kh-char-count.kh-over { color:var(--kh-red); font-weight:700; }
#kh-send-btn {
    width:42px; height:42px; background:var(--kh-red); border:none; border-radius:50%;
    cursor:pointer; display:flex !important; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0; transition:background .15s,transform .1s,box-shadow .15s;
    padding:0;
}
#kh-send-btn svg {
    width:18px; height:18px;
    stroke:#ffffff !important; fill:none !important;
    stroke-width:2.5px; pointer-events:none;
}
#kh-send-btn:hover:not(:disabled) { background:var(--kh-red-dk); transform:scale(1.08); box-shadow:0 3px 12px rgba(227,24,55,.4); }
#kh-send-btn:disabled { background:#d0d7e0; cursor:not-allowed; }
#kh-send-btn:disabled svg { stroke:#9aaabb !important; }

/* ── Footer ─────────────────────────────────────────────── */
.kh-cw-footer { text-align:center; font-family:var(--kh-font); font-size:10.5px; color:var(--kh-muted); padding:5px 14px 9px; background:#fff; flex-shrink:0; }
.kh-cw-footer a { color:var(--kh-red); text-decoration:none; font-weight:600; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:430px) {
    #kh-chat-window { width:calc(100vw - 20px); right:10px; bottom:88px; max-height:calc(100dvh - 108px); border-radius:16px; }
    #kh-fab    { right:18px; bottom:18px; width:56px; height:56px; }
    #kh-teaser { right:82px; bottom:26px; }
}