/* =============================================================
   Kio Pulse Chat — Stylesheet
   Works within an existing WordPress theme (get_header/footer).
   Font:    Poppins (enqueued by plugin PHP)
   Colors:  K Red #FF0032 · K Dark Purple #2D1B69 · K Black #0D0D0D
   ============================================================= */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    --k-red:          #FF0032;
    --k-red-hover:    #D9002B;
    --k-purple:       #2D1B69;
    --k-black:        #0D0D0D;
    --k-light-pink:   #F9EEE8;
    --k-white:        #FFFFFF;
    --k-gray-100:     #F5F5F5;
    --k-gray-200:     #EBEBEB;
    --k-gray-400:     #B0B0B0;
    --k-gray-600:     #6B6B6B;
    --k-gradient:     linear-gradient(44deg, #2D1B69 0%, #FF0032 67%, #F9EEE8 100%);
    --k-bg:           #D1CED4;

    --font:           'Poppins', sans-serif;
    --radius-bubble:  18px;
    --radius-input:   28px;
    --max-w:          680px;
    --transition:     0.2s ease;
}

/* ── Accessibility helper ─────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Page background ──────────────────────────────────────── */
body.kio-pulse-chat-page {
    background: var(--k-bg) !important;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

/* ── Root container ───────────────────────────────────────── */
/* Fills from below the theme header down to the footer.
   Uses min-height so it stretches on short content and
   the sticky input always stays at the bottom of the viewport. */
#kio-chat-root {
    display:        flex;
    flex-direction: column;
    min-height:     80vh;
    max-width:      860px;
    margin:         0 auto;
    background:     var(--k-white);
    font-family:    var(--font);
}

/* ── Top bar ──────────────────────────────────────────────── */
.kio-topbar {
    flex-shrink: 0;
    display:     flex;
    justify-content: flex-end;
    align-items: center;
    padding:     16px 28px 0;
}

.kio-topbar__status {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.kio-status-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
    transition:    background var(--transition);
}

.kio-status-dot--connecting { background: #F59E0B; animation: kio-blink 1.2s infinite; }
.kio-status-dot--connected  { background: #22C55E; }
.kio-status-dot--idle       { background: var(--k-gray-400); }
.kio-status-dot--error      { background: var(--k-red); }

@keyframes kio-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

.kio-status-label {
    font-size:   12px;
    font-weight: 400;
    color:       var(--k-gray-600);
}

/* ── Hero ─────────────────────────────────────────────────── */
.kio-hero {
    flex-shrink: 0;
    text-align:  center;
    padding:     40px 24px 24px;
}

.kio-hero__title {
    font-family:    var(--font) !important;
    font-size:      42px !important;
    font-weight:    300 !important;
    line-height:    1.15 !important;
    letter-spacing: -0.02em !important;
    background:     var(--k-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display:        inline-block;
    margin:         0 !important;
}

/* ── Messages ─────────────────────────────────────────────── */
.kio-messages {
    flex:    1;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap:     12px;
}

/* ── Message rows ─────────────────────────────────────────── */
.kio-msg {
    display:   flex;
    gap:       10px;
    width:     100%;
    max-width: var(--max-w);
    margin:    0 auto;
    animation: kio-in .18s ease;
}

@keyframes kio-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kio-msg--agent { align-items: flex-end; }
.kio-msg--user  { align-items: flex-end; flex-direction: row-reverse; }

.kio-msg__avatar {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     13px;
    font-weight:   500;
    color:         var(--k-white);
    font-family:   var(--font);
}

.kio-msg--agent .kio-msg__avatar { background: var(--k-gradient); }
.kio-msg--user  .kio-msg__avatar { background: var(--k-gray-200); color: var(--k-gray-600); }

.kio-msg__bubble {
    padding:       12px 16px;
    border-radius: var(--radius-bubble);
    font-size:     15px !important;
    font-weight:   300;
    line-height:   1.6 !important;
    word-break:    break-word;
    max-width:     calc(100% - 44px);
    font-family:   var(--font) !important;
}

.kio-msg--agent .kio-msg__bubble {
    background:                var(--k-gray-100);
    color:                     var(--k-black) !important;
    border-bottom-left-radius: 4px;
}

.kio-msg--user .kio-msg__bubble {
    background:                 var(--k-red);
    color:                      var(--k-white) !important;
    border-bottom-right-radius: 4px;
    font-weight: 400;
}

/* Error bubbles */
.kio-msg--error,
.kio-msg--system {
    justify-content: center;
    max-width: var(--max-w);
}

.kio-msg--error .kio-msg__bubble {
    background:    rgba(255, 0, 50, 0.07);
    color:         var(--k-red) !important;
    border-radius: 10px;
    font-size:     13px !important;
    font-weight:   400;
    text-align:    center;
}

/* ── Markdown inside agent bubbles ────────────────────────── */

/* ── Restore user-agent defaults that the theme resets ────────
   Using standard margin/padding properties for cross-browser
   compatibility (Firefox, Safari, Chrome).
   ──────────────────────────────────────────────────────────── */

body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble p {
    display:      block !important;
    margin-top:   0 !important;
    margin-bottom: 1em !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding:      0 !important;
    font-size:    15px !important;
    line-height:  1.6 !important;
    color:        var(--k-black) !important;
}
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble p:last-child {
    margin-bottom: 0 !important;
}

body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble ul,
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble ol {
    display:      block !important;
    margin-top:   1em !important;
    margin-bottom: 1em !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 0 !important;
}
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble ul {
    list-style-type: disc !important;
}
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble ol {
    list-style-type: decimal !important;
}

body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble li {
    display:      list-item !important;
    list-style:   inherit !important;
    font-size:    15px !important;
    line-height:  1.6 !important;
    color:        var(--k-black) !important;
}

/* ── Links — maximum specificity to beat any theme reset ─────── */
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble a,
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble a:link,
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble a:visited {
    color:                 #FF0032 !important;
    text-decoration:       underline !important;
    text-underline-offset: 2px !important;
    word-break:            break-word !important;
    font-weight:           400 !important;
    display:               inline !important;
}
body.kio-pulse-chat-page #kio-chat-root .kio-msg--agent .kio-msg__bubble a:hover {
    color:           #D9002B !important;
    text-decoration: underline !important;
}

body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble strong {
    font-weight: 600 !important;
    color: #3C2646 !important;
}
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble em {
    font-style: italic !important;
}
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble code {
    background:    var(--k-gray-200) !important;
    padding:       1px 5px !important;
    border-radius: 4px !important;
    font-size:     13px !important;
    font-family:   monospace !important;
}
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h1,
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h2,
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h3 {
    font-weight:  500 !important;
    margin:       10px 0 6px !important;
    line-height:  1.3 !important;
    color:        #3C2646 !important;
}
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h1 { font-size: 18px !important; }
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h2 { font-size: 16px !important; }
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble h3 { font-size: 15px !important; }
body.kio-pulse-chat-page .kio-msg--agent .kio-msg__bubble hr {
    border:     none !important;
    border-top: 1px solid var(--k-gray-200) !important;
    margin:     10px 0 !important;
}

/* ── Typing indicator ─────────────────────────────────────── */
.kio-typing {
    display:   flex;
    gap:       10px;
    max-width: var(--max-w);
    margin:    0 auto;
    width:     100%;
    animation: kio-in .18s ease;
}

.kio-typing__avatar {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    background:    var(--k-gradient);
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     13px;
    font-weight:   500;
    color:         var(--k-white);
}

.kio-typing__dots {
    background:    var(--k-gray-100);
    border-radius: var(--radius-bubble);
    border-bottom-left-radius: 4px;
    padding:       14px 18px;
    display:       flex;
    gap:           5px;
    align-items:   center;
}

.kio-typing__dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--k-gray-400);
    animation:     kio-bounce 1.3s ease-in-out infinite;
}
.kio-typing__dot:nth-child(2) { animation-delay: .15s; }
.kio-typing__dot:nth-child(3) { animation-delay: .30s; }

@keyframes kio-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-7px); }
}

/* ── Input bar — sticky to bottom of viewport ─────────────── */
/* position: sticky keeps it visible without knowing header height */
.kio-input-bar {
    position:       sticky;
    bottom:         0;
    flex-shrink:    0;
    padding:        12px 24px 0;
    padding-bottom: 30vh;
    background:     var(--k-white);
    z-index:        9;   /* below theme nav (typically 10–100) */
    transition:     padding-bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.kio-input-bar.is-active {
    padding-bottom: 10vh;
}

.kio-input-bar__inner {
    max-width:   var(--max-w);
    margin:      0 auto;
    display:     flex;
    gap:         10px;
    align-items: center;
    background:  var(--k-gray-100);
    border:      1.5px solid var(--k-gray-200);
    border-radius: var(--radius-input);
    padding:     6px 6px 6px 20px;
    transition:  border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.kio-input-bar__inner:focus-within {
    border-color: var(--k-red);
    box-shadow:   0 0 0 3px rgba(255, 0, 50, 0.08);
    background:   var(--k-white);
}

.kio-input {
    flex:        1;
    border:      none !important;
    outline:     none !important;
    box-shadow:  none !important;
    background:  transparent !important;
    font-family: var(--font) !important;
    font-size:   15px !important;
    font-weight: 300 !important;
    color:       var(--k-black) !important;
    line-height: 1.5;
    padding:     0 !important;
}

.kio-input::placeholder { color: var(--k-gray-400) !important; }
.kio-input:disabled     { opacity: .5; cursor: not-allowed; }

/* Send button */
.kio-send-btn {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    border:        none !important;
    background:    var(--k-red) !important;
    color:         var(--k-white) !important;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--transition), transform var(--transition), opacity var(--transition);
    box-shadow:    none !important;
}

.kio-send-btn:hover:not(:disabled)  { background: var(--k-red-hover) !important; }
.kio-send-btn:active:not(:disabled) { transform: scale(.92); }
.kio-send-btn:disabled              { opacity: .35; cursor: not-allowed; }

/* ── Scrollbar ────────────────────────────────────────────── */
.kio-messages::-webkit-scrollbar       { width: 5px; }
.kio-messages::-webkit-scrollbar-track { background: transparent; }
.kio-messages::-webkit-scrollbar-thumb { background: var(--k-gray-200); border-radius: 3px; }
.kio-messages::-webkit-scrollbar-thumb:hover { background: var(--k-gray-400); }

/* ── Suggested questions ──────────────────────────────────── */
.kio-suggestions {
    display:        none;
    flex-direction: column;
    gap:            10px;
    max-width:      var(--max-w);
    margin:         14px auto 0;
    width:          100%;
    box-sizing:     border-box;
}

.kio-suggestions--visible { display: flex; }
.kio-suggestions--hidden  { display: none; }

.kio-suggestions__label {
    font-family: var(--font);
    font-size:   13px;
    font-weight: 400;
    color:       #62566B;
    margin:      0;
    padding:     0;
    line-height: 1.4;
}

.kio-suggestions__chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.kio-suggestion {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    transparent;
    border:        1.5px solid rgba(98, 86, 107, 0.25);
    border-radius: 20px;
    padding:       6px 14px 6px 10px;
    font-family:   var(--font);
    font-size:     13px;
    font-weight:   400;
    color:         rgba(98, 86, 107, 0.8);
    cursor:        pointer;
    transition:    border-color var(--transition), color var(--transition), background var(--transition);
    line-height:   1.4;
    text-align:    left;
}

.kio-suggestion:hover {
    border-color: var(--k-red);
    color:        var(--k-red);
    background:   rgba(255, 0, 50, 0.03);
}

.kio-suggestion__star {
    flex-shrink: 0;
    color:       var(--k-red);
    opacity:     0.7;
    transition:  opacity var(--transition);
}

.kio-suggestion:hover .kio-suggestion__star { opacity: 1; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .kio-hero           { padding: 28px 16px 16px; }
    .kio-hero__title    { font-size: 32px !important; }
    .kio-messages       { padding: 12px 12px 16px; }
    .kio-input-bar      { padding: 8px 12px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .kio-input-bar.is-active { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .kio-topbar         { padding: 12px 14px 0; }
    .kio-msg            { max-width: 92%; }
    .kio-msg__bubble    { font-size: 14px !important; }
}