/* ==========================================================================
   Custom chat UI (kpcontact-chat block, direct n8n API)
   Prefix: kpc-chat. KP design tokens, mobile-first. Depends on shared.css.
   Added to add_editor_style() so the block placeholder previews.
   ========================================================================== */

.kpc-chat-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px 32px;
}

.kpc-chat {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-grey-warm);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Editor placeholder (Gutenberg) */
.kpc-chat--placeholder {
    padding: 32px;
    text-align: center;
    color: var(--color-grey-mid);
    font-family: var(--font-body);
    font-size: 15px;
    border-style: dashed;
}

.kpc-chat__header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 16px 20px;
}
.kpc-chat__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
    color: var(--color-white);
}
.kpc-chat__subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    margin: 4px 0 0;
    opacity: 0.95;
}

/* Scrollable message list */
.kpc-chat__messages {
    flex: 1;
    /* Willem #12: start compact so the "Typ je vraag" input sits comfortably
       above the fold; the box still grows with the conversation (flex:1 up to
       max-height:50vh, then scrolls). Was 220px mobile / 280px desktop. */
    min-height: 110px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-bg);
}

.kpc-chat__msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.kpc-chat__msg--bot {
    align-self: flex-start;
    background: var(--color-grey-light);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.kpc-chat__msg--user {
    align-self: flex-end;
    background: var(--color-primary);
    color: var(--color-white);
    border-bottom-right-radius: 4px;
}

/* Rendered Markdown inside bot bubbles (tight spacing, no stray margins) */
.kpc-chat__msg--bot p { margin: 0 0 8px; }
.kpc-chat__msg--bot p:last-child { margin-bottom: 0; }
.kpc-chat__msg--bot strong { font-weight: 700; }
.kpc-chat__msg--bot ul {
    margin: 4px 0;
    padding-left: 20px;
}
.kpc-chat__msg--bot li { margin: 2px 0; }
.kpc-chat__msg--bot a { color: var(--color-primary); text-decoration: underline; }

/* Typing indicator (three bouncing dots) */
.kpc-chat__typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.kpc-chat__typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-grey-mid);
    display: inline-block;
    animation: kpc-chat-bounce 1.2s infinite ease-in-out;
}
.kpc-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.kpc-chat__typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes kpc-chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Follow-up suggestion buttons */
.kpc-chat__followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
}
.kpc-chat__followups:empty { display: none; }
.kpc-chat__followup {
    background: var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1.2;
    border: none;
    border-radius: var(--radius-btn);
    padding: 8px 16px;
    min-height: 40px;
    cursor: pointer;
    transition: transform 0.15s;
}
.kpc-chat__followup:hover { transform: scale(1.04); }

/* Input row — 48px touch targets, no horizontal scroll */
.kpc-chat__form {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    align-items: center;
}
.kpc-chat__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 16px;             /* 16px avoids iOS focus-zoom */
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-grey-warm);
    border-radius: var(--radius-btn);
    box-sizing: border-box;
}
.kpc-chat__input:disabled { opacity: 0.6; }
.kpc-chat__send {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.15s;
}
.kpc-chat__send:hover:not(:disabled) { transform: scale(1.06); }
.kpc-chat__send:disabled { opacity: 0.6; cursor: default; }

/* Desktop: a touch roomier */
@media (min-width: 768px) {
    .kpc-chat-wrap { padding: 0 60px 40px; }
    .kpc-chat__messages { min-height: 120px; } /* Willem #12: compact start, grows when chatting */
    .kpc-chat__msg { max-width: 75%; font-size: 16px; }
}