/* ── CI Booking AI Chat Widget ─────────────────────────────── */
.cibai-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 860px;
    margin: 0 auto;
}
.cibai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #0a2744 0%, #0e3a6b 100%);
    gap: 12px;
}
.cibai-header__left { display: flex; align-items: center; gap: 12px; }
.cibai-avatar {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.cibai-header__title { font-size: 14px; font-weight: 700; color: #fff; }
.cibai-header__sub   { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 1px; }
.cibai-header__right { flex-shrink: 0; }
.cibai-balance {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: #fbbf24;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.3);
    border-radius: 20px;
    padding: 4px 10px;
}
.cibai-badge {
    font-size: 11px; font-weight: 600;
    background: rgba(16,185,129,.2);
    color: #10b981;
    border: 1px solid rgba(16,185,129,.3);
    border-radius: 20px;
    padding: 4px 10px;
}
.cibai-badge--warn {
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    border-color: rgba(245,158,11,.3);
    text-decoration: none;
}
/* Messages */
.cibai-messages {
    min-height: 200px;
    max-height: 380px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
}
.cibai-msg { display: flex; gap: 10px; }
.cibai-msg--user { flex-direction: row-reverse; }
.cibai-msg__bubble {
    max-width: 78%;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
}
.cibai-msg--ai   .cibai-msg__bubble { background: #fff; border: 1px solid #e5e7eb; color: #0f172a; border-radius: 4px 12px 12px 12px; }
.cibai-msg--user .cibai-msg__bubble { background: #0a2744; color: #fff; border-radius: 12px 4px 12px 12px; }
.cibai-msg--typing .cibai-msg__bubble { color: #94a3b8; font-style: italic; }
/* Gate */
.cibai-gate {
    padding: 0 18px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}
.cibai-gate__inner {
    background: linear-gradient(135deg, #0a2744, #0e3a6b);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 14px 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.cibai-gate__text { flex: 1; font-size: 14px; line-height: 1.5; }
.cibai-gate__text strong { display: block; font-size: 15px; margin-bottom: 3px; }
.cibai-gate__btn {
    background: #10b981;
    color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    border: none; cursor: pointer;
    transition: background .15s;
}
.cibai-gate__btn:hover { background: #059669; color: #fff; }
.cibai-gate__btn--outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    color: rgba(255,255,255,.85);
}
.cibai-gate__btn--outline:hover { background: rgba(255,255,255,.1); }
/* Token packs */
.cibai-packs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; width: 100%; }
.cibai-pack {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px; color: #fff; cursor: pointer;
    transition: background .15s;
    flex: 1; text-align: center; min-width: 130px;
}
.cibai-pack:hover { background: rgba(255,255,255,.2); }
/* Input */
.cibai-input-wrap {
    border-top: 1px solid #e5e7eb;
    padding: 14px 18px 12px;
    background: #fff;
}
.cibai-input-row { display: flex; gap: 8px; }
.cibai-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
.cibai-input:focus { border-color: #0a2744; }
.cibai-input:disabled { background: #f8fafc; color: #94a3b8; }
.cibai-send {
    width: 42px; height: 42px;
    background: #0a2744;
    color: #fff;
    border: none; border-radius: 10px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.cibai-send:hover { background: #0e3a6b; }
.cibai-send:disabled { background: #cbd5e1; cursor: not-allowed; }
.cibai-footer-note { font-size: 12px; color: #9ca3af; margin-top: 7px; }
.cibai-footer-note a, .cibai-topup-link { color: #0a2744; font-weight: 600; text-decoration: none; }
.cibai-topup-link { color: #7c3aed; }
/* Section wrapper on homepage */
.cibai-section {
    padding: 48px 0 16px;
    background: #f8fafc;
}
.cibai-section .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.cibai-section__heading {
    text-align: center;
    margin-bottom: 20px;
}
.cibai-section__heading h2 {
    font-size: 26px; font-weight: 800;
    color: #0a2744;
    margin-bottom: 6px;
}
.cibai-section__heading p { font-size: 15px; color: #6b7280; }
@media(max-width:600px){
    .cibai-messages { max-height: 280px; }
    .cibai-gate__inner { flex-direction: column; align-items: flex-start; }
    .cibai-pack { min-width: 100%; }
}