/* =============================================================
   Live chat widget — floating, accessible, brand colours
   ============================================================= */

.sdtk-chat {
    position: fixed; bottom: 20px; right: 20px;
    z-index: 9999; font-family: inherit;
}

/* Force [hidden] to win over display:flex on .sdtk-chat__form / .sdtk-chat */
.sdtk-chat[hidden],
.sdtk-chat__form[hidden],
.sdtk-chat__panel[hidden] {
    display: none !important;
}

.sdtk-chat__launcher {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; background: var(--sdtk-orange, #f15a22); color: #fff;
    border: 0; border-radius: 999px; cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: background .2s ease, transform .2s ease;
}
.sdtk-chat__launcher:hover { background: var(--sdtk-orange-dark, #c8410f); transform: translateY(-1px); }
.sdtk-chat__launcher svg { display: block; }
.sdtk-chat[data-state="open"] .sdtk-chat__launcher { display: none; }

.sdtk-chat__panel {
    position: fixed; bottom: 20px; right: 20px;
    width: min(380px, calc(100vw - 24px));
    height: min(600px, calc(100vh - 48px));
    max-height: 720px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.22);
    display: none; flex-direction: column; overflow: hidden;
    border: 1px solid var(--sdtk-line, #e5e7eb);
}
.sdtk-chat__panel.is-open { display: flex; }

.sdtk-chat__head {
    background: var(--sdtk-blue, #0047ab); color: #fff;
    padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
}
.sdtk-chat__head-info { display: flex; flex-direction: column; gap: 2px; }
.sdtk-chat__head-info strong { font-size: 15px; font-weight: 700; }
.sdtk-chat__head-info span { font-size: 12px; color: rgba(255,255,255,.85); }
.sdtk-chat__close {
    background: transparent; border: 0; color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
    transition: opacity .15s ease;
}
.sdtk-chat__close:hover { opacity: .7; }

.sdtk-chat__body {
    flex: 1; overflow-y: auto; padding: 16px;
    background: #f8fafc; display: flex; flex-direction: column; gap: 8px;
}
.sdtk-chat__bubble {
    max-width: 85%; padding: 10px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.45; word-wrap: break-word;
    animation: sdtk-bubble-in .25s ease;
}
@keyframes sdtk-bubble-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sdtk-chat__bubble--bot {
    align-self: flex-start;
    background: #fff; color: #1a1a1a;
    border: 1px solid var(--sdtk-line, #e5e7eb);
    border-bottom-left-radius: 4px;
}
.sdtk-chat__bubble--user {
    align-self: flex-end;
    background: var(--sdtk-blue, #0047ab); color: #fff;
    border-bottom-right-radius: 4px;
}
.sdtk-chat__bubble-label {
    display: block; font-size: 11px; font-weight: 700; color: var(--sdtk-orange, #f15a22);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}

.sdtk-chat__suggestions {
    padding: 10px 14px; background: #fff;
    border-top: 1px solid var(--sdtk-line, #e5e7eb);
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 220px; overflow-y: auto;
}
.sdtk-chat__chip {
    background: #fff; border: 1px solid var(--sdtk-line, #e5e7eb);
    border-radius: 999px; padding: 7px 12px;
    font-size: 12.5px; font-weight: 600; color: #1a1a1a;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
    text-align: left; line-height: 1.3;
}
.sdtk-chat__chip:hover { background: var(--sdtk-soft, #f8fafc); border-color: var(--sdtk-blue, #0047ab); color: var(--sdtk-blue, #0047ab); }
.sdtk-chat__chip:focus-visible { outline: 2px solid var(--sdtk-orange, #f15a22); outline-offset: 1px; }
.sdtk-chat__chip--primary { background: var(--sdtk-orange, #f15a22); color: #fff; border-color: var(--sdtk-orange, #f15a22); }
.sdtk-chat__chip--primary:hover { background: var(--sdtk-orange-dark, #c8410f); color: #fff; border-color: var(--sdtk-orange-dark, #c8410f); }

.sdtk-chat__form {
    padding: 14px 16px; background: #fff;
    border-top: 1px solid var(--sdtk-line, #e5e7eb);
    display: flex; flex-direction: column; gap: 10px;
    max-height: 60vh; overflow-y: auto;
}
.sdtk-chat__form-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sdtk-chat__field { display: flex; flex-direction: column; gap: 4px; }
.sdtk-chat__field span { font-size: 12px; font-weight: 600; color: var(--sdtk-text, #1a1a1a); }
.sdtk-chat__field input,
.sdtk-chat__field textarea {
    padding: 9px 12px; border: 1px solid var(--sdtk-line, #e5e7eb);
    border-radius: 6px; font-size: 14px; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sdtk-chat__field input:focus, .sdtk-chat__field textarea:focus {
    outline: none; border-color: var(--sdtk-blue, #0047ab);
    box-shadow: 0 0 0 3px rgba(0,71,171,.15);
}
.sdtk-chat__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sdtk-chat__submit {
    background: var(--sdtk-orange, #f15a22); color: #fff;
    padding: 11px 16px; border: 0; border-radius: 6px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .15s ease;
}
.sdtk-chat__submit:hover { background: var(--sdtk-orange-dark, #c8410f); }
.sdtk-chat__submit:disabled { opacity: .6; cursor: wait; }
.sdtk-chat__note { margin: 0; font-size: 11px; color: var(--sdtk-muted, #475569); text-align: center; }

.sdtk-chat__reply {
    display: flex; gap: 6px; width: 100%;
}
.sdtk-chat__reply input {
    flex: 1; padding: 9px 12px; border: 1px solid var(--sdtk-line, #e5e7eb);
    border-radius: 999px; font-size: 14px; font-family: inherit;
}
.sdtk-chat__reply input:focus {
    outline: none; border-color: var(--sdtk-blue, #0047ab);
    box-shadow: 0 0 0 3px rgba(0,71,171,.15);
}
.sdtk-chat__reply button {
    background: var(--sdtk-blue, #0047ab); color: #fff; border: 0;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 18px; font-weight: 700; cursor: pointer;
    flex-shrink: 0;
}
.sdtk-chat__reply button:hover { background: var(--sdtk-blue-dark, #002f6c); }

/* Inline trigger link (preheader / contact page) */
.sdtk-chat-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    color: inherit; text-decoration: none; font-weight: 600;
    transition: opacity .2s ease;
}
.sdtk-chat-trigger:hover { opacity: .8; color: inherit; text-decoration: none; }

/* Mobile */
@media (max-width: 540px) {
    .sdtk-chat { bottom: 12px; right: 12px; }
    .sdtk-chat__launcher-label { display: none; }
    .sdtk-chat__launcher { padding: 14px; border-radius: 50%; }
    .sdtk-chat__panel {
        bottom: 0; right: 0; left: 0; top: 0;
        width: 100vw; height: 100vh; max-height: none;
        border-radius: 0;
    }
}