/* Custom styles - NOT overwritten by Tailwind build */

/* ─────────────────────────────────────────────────────────────
 * Webchat V2 theme tokens.
 *
 * The widget palette lives on :root as CSS custom properties so
 * branding can be re-skinned per tenant by setting a smaller set
 * (--t-primary, --t-accent, ...) at runtime — no rebuild needed.
 *
 * BrandingService still emits inline style="background-color: ..."
 * on legacy elements; V2 components consume var(--t-*) directly.
 * ───────────────────────────────────────────────────────────── */
:root {
    --t-primary: #0a4d4d;          /* Infracom teal */
    --t-primary-600: #0c5c5c;
    --t-primary-700: #083f3f;
    --t-primary-50: #e8f1f1;
    --t-primary-100: #d4e6e6;
    --t-accent: #ee7625;           /* Infracom orange */
    --t-accent-soft: #fdecdc;
    --t-bg: #ffffff;
    --t-bg-soft: #fafaf8;
    --t-surface: #ffffff;
    --t-border: #ebe9e4;
    --t-border-strong: #d9d6cf;
    --t-text: #1a1a17;
    --t-text-muted: #6a6862;
    --t-text-subtle: #98958d;
    --t-bubble-agent: #f2efe9;
    --t-bubble-agent-text: #1a1a17;
    --t-bubble-user: var(--t-primary);
    --t-bubble-user-text: #ffffff;
    --t-success: #2f9e6e;
    --t-danger: #dc2626;
    --t-radius-sm: 8px;
    --t-radius: 14px;
    --t-radius-lg: 20px;
    --t-shadow-sm: 0 1px 2px rgba(10,30,40,0.04), 0 1px 1px rgba(10,30,40,0.03);
    --t-shadow: 0 2px 8px rgba(10,30,40,0.06), 0 4px 24px rgba(10,30,40,0.05);
    --t-shadow-lg: 0 10px 40px rgba(10,30,40,0.12), 0 4px 12px rgba(10,30,40,0.06);
    --t-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --t-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

html, body {
    font-family: var(--t-font);
    color: var(--t-text);
}

/* V2 header avatar — circular, gradient bg, white initials. */
.v2-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--t-primary-600), var(--t-primary-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    flex: 0 0 auto;
    overflow: hidden;
}

.v2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Square-rounded variant used pre-chat / waiting (no agent yet). */
.v2-avatar-square {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--t-primary-50);
    color: var(--t-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Online status dot — anchored bottom-right of the avatar wrapper. */
.v2-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--t-success);
    box-shadow: 0 0 0 2px var(--t-bg);
}

/* Header icon button — 30×30, ghost, hover lights up bg-soft. */
.v2-header-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--t-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.v2-header-btn:hover {
    background: var(--t-bg-soft);
    color: var(--t-text);
}

.v2-header-btn:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
}

/* ─── Day divider ─────────────────────────────────────────── */
.v2-day-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 4px;
    color: var(--t-text-subtle);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
}

.v2-day-divider::before,
.v2-day-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--t-border);
}

/* ─── System message (centered subtle text in stream) ─────── */
.v2-system-msg {
    text-align: center;
    color: var(--t-text-muted);
    font-size: 12px;
    margin: 12px 0 8px;
    padding: 0 16px;
}

/* ─── Bubbles ──────────────────────────────────────────────
 * Agent and user share padding / font / max-width. Corners
 * change per role and per "tail" (last in same-sender group).
 */
.v2-bubble {
    padding: 9px 13px;
    max-width: 78%;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.v2-bubble-agent {
    background: var(--t-bubble-agent);
    color: var(--t-bubble-agent-text);
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0 1px 1px rgba(10, 30, 40, 0.03);
}

.v2-bubble-agent.v2-bubble--tail {
    border-radius: 18px 18px 18px 4px;
}

.v2-bubble-user {
    background: var(--t-bubble-user);
    color: var(--t-bubble-user-text);
    border-radius: 18px 18px 18px 18px;
}

.v2-bubble-user.v2-bubble--tail {
    border-radius: 18px 18px 4px 18px;
}

.v2-bubble-row {
    display: flex;
    flex-direction: column;
    padding: 0 14px;
}

.v2-bubble-row--first {
    margin-top: 10px;
}

.v2-bubble-row--cont {
    margin-top: 2px;
}

.v2-bubble-row--user {
    align-items: flex-end;
}

.v2-bubble-row--agent {
    align-items: flex-start;
}

.v2-bubble-meta {
    font-size: 11px;
    color: var(--t-text-subtle);
    margin-top: 3px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.v2-bubble-meta--read {
    color: var(--t-primary);
}

/* ─── Typing indicator (inside an agent bubble) ───────────── */
.v2-typing-row {
    display: flex;
    padding: 0 14px;
    margin-top: 10px;
}

.v2-typing-bubble {
    background: var(--t-bubble-agent);
    padding: 11px 14px;
    border-radius: 18px 18px 18px 4px;
    display: flex;
    gap: 4px;
}

.v2-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-text-muted);
    opacity: 0.6;
    animation: v2TypingDot 1.2s infinite ease-in-out;
}

.v2-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.v2-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes v2TypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Composer ───────────────────────────────────────────── */
.v2-composer-frame {
    border-top: 1px solid var(--t-border);
    background: var(--t-bg);
    padding: 10px 12px;
    flex: 0 0 auto;
}

.v2-composer-soft {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--t-bg-soft);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: 8px 8px 8px 12px;
    transition: border-color .15s, box-shadow .15s;
}

.v2-composer-soft:focus-within {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-primary-50);
}

.v2-composer-textarea {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    font: inherit;
    font-size: 14px;
    color: var(--t-text);
    /* Tight single-line geometry: no padding, line-height = min-height so
     * rows="1" yields one visual row exactly. field-sizing: content on the
     * element grows it; without that support the textarea stays one row
     * and Shift+Enter content scrolls internally up to max-height. */
    padding: 0;
    margin: 0;
    line-height: 22px;
    min-height: 22px;
    max-height: 7.5rem;
    overflow-y: auto;
    display: block;
    box-sizing: content-box;
}

.v2-composer-textarea::placeholder {
    color: var(--t-text-subtle);
}

.v2-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--t-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s;
}

.v2-icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--t-text);
}

.v2-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--t-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex: 0 0 auto;
}

.v2-send-btn--active {
    background: var(--t-primary);
    color: #fff;
}

.v2-send-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ─── Emoji picker panel ─────────────────────────────────── */
.v2-emoji-panel {
    margin-top: 8px;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--t-shadow-sm);
}

.v2-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.v2-emoji-btn {
    font-size: 20px;
    padding: 4px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: background-color .12s;
}

.v2-emoji-btn:hover {
    background: var(--t-bg-soft);
}

/* ─── Waiting screen ─────────────────────────────────────── */
.v2-waiting-ripple-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin-bottom: 18px;
}

.v2-waiting-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--t-primary);
    opacity: 0;
    animation: v2Ripple 2s infinite ease-out;
}

.v2-waiting-ripple:nth-child(2) { animation-delay: 0.6s; }
.v2-waiting-ripple:nth-child(3) { animation-delay: 1.2s; }

@keyframes v2Ripple {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

.v2-waiting-disc {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--t-primary), var(--t-primary-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-queue-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--t-primary-50);
    color: var(--t-primary);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.v2-queue-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-primary);
}

/* ─── Forms (pre-chat + input fields) ────────────────────── */
.v2-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--t-bg);
    border: 1px solid var(--t-border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--t-font);
    color: var(--t-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.v2-input:focus {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-primary-50);
}

.v2-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-text);
    margin-bottom: 6px;
}

.v2-required {
    color: var(--t-accent);
    margin-left: 2px;
}

.v2-hint {
    font-size: 11.5px;
    color: var(--t-text-subtle);
    margin-top: 5px;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.v2-btn {
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    font-family: var(--t-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .15s, transform .05s;
}

.v2-btn--full { width: 100%; }
.v2-btn:active { transform: translateY(1px); }
.v2-btn:disabled { cursor: not-allowed; opacity: 0.6; }

.v2-btn--primary {
    background: var(--t-primary);
    color: #fff;
}

.v2-btn--primary:hover {
    background: var(--t-primary-600);
}

.v2-btn--secondary {
    background: var(--t-bg);
    color: var(--t-text);
    border: 1px solid var(--t-border-strong);
}

.v2-btn--secondary:hover {
    background: var(--t-bg-soft);
}

.v2-btn--ghost {
    background: transparent;
    color: var(--t-primary);
}

.v2-btn--ghost:hover {
    background: var(--t-primary-50);
}

/* ─── Powered-by stripe ─────────────────────────────────── */
.v2-powered-by {
    flex: 0 0 auto;
    text-align: center;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--t-text-subtle);
    border-top: 1px solid var(--t-border);
    background: var(--t-bg-soft);
}

.v2-powered-by strong {
    color: var(--t-text-muted);
    font-weight: 600;
}

/* ─── Modal / dialog ──────────────────────────────────────── */
.v2-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 30, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.v2-modal-card {
    width: 100%;
    max-width: 100%;
    background: var(--t-bg);
    border-radius: 16px;
    box-shadow: var(--t-shadow-lg);
    padding: 22px;
    animation: v2ModalIn .25s cubic-bezier(.2, .7, .3, 1);
}

@keyframes v2ModalIn {
    from { transform: scale(0.96) translateY(8px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.v2-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--t-text);
}

.v2-modal-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--t-text-muted);
    line-height: 1.5;
}

/* ─── Stars (rating) ──────────────────────────────────────── */
.v2-stars {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.v2-star {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--t-border-strong);
    display: inline-flex;
    transition: color .12s;
}

.v2-star--filled {
    color: var(--t-accent);
}

.v2-star:hover {
    transform: scale(1.05);
}

/* ─── Debug grid panel ────────────────────────────────────── */
.v2-debug-panel {
    background: var(--t-bg-soft);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    padding: 4px;
    font-family: var(--t-font-mono);
    font-size: 11.5px;
}

.v2-debug-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px dashed var(--t-border);
}

.v2-debug-row:last-child { border-bottom: none; }

.v2-debug-row__label {
    color: var(--t-text-muted);
}

.v2-debug-row__value {
    color: var(--t-text);
    word-break: break-all;
}

/* ─── Pre-chat hero icon ─────────────────────────────────── */
.v2-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 0 auto 14px;
    background: var(--t-primary-50);
    color: var(--t-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainLogo {
    max-width: 300px;
    width: 100%;
}


.inputMessage {
    border: 0;
    background: transparent;
    font-size: 15px;
    width: 100%;
    outline: none;
}

.inputMessage:focus {
    outline: none;
    box-shadow: none;
}

/* Typing indicator animation */
.dot-typing {
    position: relative;
    left: -9999px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
    color: #999;
    box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    animation: dot-typing 1.5s infinite linear;
    margin: 8px 0 8px 15px;
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    }
    16.667% {
        box-shadow: 9984px -10px 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    }
    33.333% {
        box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    }
    50% {
        box-shadow: 9984px 0 0 0 #999, 9999px -10px 0 0 #999, 10014px 0 0 0 #999;
    }
    66.667% {
        box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    }
    83.333% {
        box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px -10px 0 0 #999;
    }
    100% {
        box-shadow: 9984px 0 0 0 #999, 9999px 0 0 0 #999, 10014px 0 0 0 #999;
    }
}

/* Responsive */
@media (max-height: 36rem) {
    .mainLogo {
        max-width: 10rem;
    }
    .welcomeText {
        display: none;
    }
}

@media (max-width: 34rem) {
    .introText {
        font-size: 10px;
    }
}