/* Casa Anabella IA — Public Styles — Responsive */
:root {
    --caia-bg: #1a1612;
    --caia-surface: #241f1a;
    --caia-card: #2e2721;
    --caia-border: #3d342c;
    --caia-gold: #c9a96e;
    --caia-gold-light: #e0c992;
    --caia-text: #e8ddd0;
    --caia-text-muted: #9a8d7f;
    --caia-ai-bg: #2a2420;
    --caia-user-bg: #3a2f26;
    --caia-radius: 16px;
    --caia-font: 'Georgia', 'Times New Roman', serif;
    --caia-red: #e85d5d;
}

/* ============================================================
   EXPERIENCE CONTAINER — responsive
   ============================================================ */
.caia-experience {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--caia-bg);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--caia-font);
    color: var(--caia-text);
    position: relative;
}

/* Tablet */
@media (min-width: 768px) {
    .caia-experience {
        max-width: 720px;
        min-height: 80vh;
        margin: 30px auto;
        border-radius: 20px;
        box-shadow: 0 16px 50px rgba(0,0,0,0.4);
        overflow: hidden;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .caia-experience {
        max-width: 860px;
        min-height: 82vh;
        margin: 40px auto;
        border-radius: 24px;
    }
    .caia-messages { padding: 24px 40px; }
    .caia-message { font-size: 1em; max-width: 75%; }
    .caia-input-area { padding: 16px 40px; }
    .caia-ritual-intro { padding: 60px 80px; }
    .caia-ritual-intro p { font-size: 1.1em; max-width: 520px; }
}

/* Large desktop */
@media (min-width: 1400px) {
    .caia-experience {
        max-width: 940px;
    }
}

/* Header */
.caia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--caia-border);
    flex-shrink: 0;
}
.caia-brand { font-size: 1.05em; color: var(--caia-gold); letter-spacing: 1px; }
.caia-header-right { display: flex; align-items: center; gap: 10px; }
.caia-counter { font-size: 0.82em; color: var(--caia-text-muted); }
.caia-remaining { color: var(--caia-gold); font-weight: bold; }

/* Voice toggle */
.caia-voice-toggle {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--caia-card); border: 1px solid var(--caia-border);
    color: var(--caia-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.caia-voice-toggle.active {
    background: var(--caia-gold); color: var(--caia-bg); border-color: var(--caia-gold);
}

/* Progress */
.caia-progress-bar { height: 3px; background: var(--caia-border); flex-shrink: 0; }
.caia-progress-fill { height: 100%; background: linear-gradient(90deg, var(--caia-gold), var(--caia-gold-light)); transition: width 0.5s ease; }

/* Ritual intro */
.caia-ritual-intro {
    text-align: center; padding: 50px 24px; animation: caiaFadeIn 1s ease;
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.caia-ritual-icon { font-size: 42px; margin-bottom: 16px; }
.caia-ritual-intro p {
    font-size: 1em; line-height: 1.8; color: var(--caia-text);
    margin-bottom: 28px; max-width: 400px;
}

/* ============================================================
   CHAT
   ============================================================ */
.caia-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.caia-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.caia-message {
    max-width: 82%; padding: 13px 16px;
    border-radius: var(--caia-radius); line-height: 1.6;
    font-size: 0.93em; animation: caiaSlideUp 0.3s ease;
    word-wrap: break-word; overflow-wrap: break-word;
}
.caia-message p { margin: 0; }
.caia-ai {
    background: var(--caia-ai-bg); border: 1px solid var(--caia-border);
    align-self: flex-start; border-bottom-left-radius: 4px;
}
.caia-user {
    background: var(--caia-user-bg); align-self: flex-end;
    border-bottom-right-radius: 4px; color: var(--caia-gold-light);
}

/* Input area */
.caia-input-area {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--caia-border);
    background: var(--caia-surface); align-items: flex-end;
    flex-shrink: 0;
}

#caiaInput {
    flex: 1; background: var(--caia-card);
    border: 1px solid var(--caia-border); border-radius: 12px;
    padding: 11px 14px; color: var(--caia-text);
    font-family: var(--caia-font); font-size: 0.93em;
    resize: none; outline: none; transition: border-color 0.3s;
    min-height: 42px; max-height: 100px;
}
#caiaInput:focus { border-color: var(--caia-gold); }
#caiaInput::placeholder { color: var(--caia-text-muted); }

.caia-send-btn, .caia-mic-btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.caia-send-btn {
    background: var(--caia-gold); color: var(--caia-bg);
}
.caia-send-btn:hover { transform: scale(1.08); }
.caia-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.caia-mic-btn {
    background: var(--caia-card); border: 1px solid var(--caia-border); color: var(--caia-text-muted);
}
.caia-mic-btn:hover { border-color: var(--caia-gold); color: var(--caia-gold); }
.caia-mic-btn.recording {
    background: var(--caia-red); border-color: var(--caia-red);
    color: #fff; animation: caiaPulse 1.5s infinite;
}
.caia-mic-btn.disabled { opacity: 0.3; cursor: not-allowed; }

/* Typing */
.caia-typing {
    display: flex; gap: 6px; padding: 13px 16px; margin: 0 16px 8px;
    background: var(--caia-ai-bg); border: 1px solid var(--caia-border);
    border-radius: var(--caia-radius); border-bottom-left-radius: 4px;
    width: fit-content; align-self: flex-start;
}
.caia-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--caia-gold); animation: caiaTypingDot 1.4s infinite;
}
.caia-typing span:nth-child(2) { animation-delay: 0.2s; }
.caia-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Listening */
.caia-listening {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; color: var(--caia-red); font-size: 0.82em; flex-shrink: 0;
}
.caia-listening-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--caia-red); animation: caiaPulse 1.5s infinite;
}

/* Speaking */
.caia-speaking {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; color: var(--caia-gold); font-size: 0.82em; flex-shrink: 0;
}
.caia-speaking-bars { display: flex; align-items: center; gap: 3px; height: 20px; }
.caia-speaking-bars span {
    width: 3px; background: var(--caia-gold); border-radius: 2px;
    animation: caiaSpeakBar 1.2s ease-in-out infinite;
}
.caia-speaking-bars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.caia-speaking-bars span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.caia-speaking-bars span:nth-child(3) { height: 18px; animation-delay: 0.3s; }
.caia-speaking-bars span:nth-child(4) { height: 12px; animation-delay: 0.45s; }
.caia-speaking-bars span:nth-child(5) { height: 6px; animation-delay: 0.6s; }

.caia-stop-btn {
    background: transparent; border: 1px solid var(--caia-gold);
    color: var(--caia-gold); padding: 4px 12px; border-radius: 12px;
    font-size: 0.78em; cursor: pointer; font-family: var(--caia-font); margin-left: auto;
}
.caia-stop-btn:hover { background: var(--caia-gold); color: var(--caia-bg); }

/* Buttons */
.caia-btn {
    display: inline-block; background: var(--caia-gold); color: var(--caia-bg);
    padding: 12px 32px; border-radius: 30px; border: none;
    font-family: var(--caia-font); font-size: 1em; cursor: pointer;
    text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.caia-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(201,169,110,0.3); color: var(--caia-bg); }

/* Experience end */
.caia-experience-end { text-align: center; padding: 60px 24px; max-width: 400px; margin: 0 auto; font-family: var(--caia-font); color: var(--caia-text); }
.caia-end-icon { font-size: 42px; margin-bottom: 16px; }
.caia-experience-end h2 { color: var(--caia-gold); margin-bottom: 14px; }

/* Sessions list */
.caia-sessions-list { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 20px auto; font-family: var(--caia-font); padding: 0 16px; }
.caia-session-card { background: var(--caia-surface); border: 1px solid var(--caia-border); border-radius: var(--caia-radius); padding: 18px; color: var(--caia-text); }
.caia-session-card h3 { color: var(--caia-gold); margin: 0 0 8px; }
.caia-session-status { font-size: 0.82em; margin-bottom: 8px; }
.caia-status-green { color: #4caf50; }
.caia-status-red { color: #f44336; }
.caia-status-yellow { color: #ff9800; }
.caia-status-gray { color: #999; }

.caia-error, .caia-empty, .caia-login-required { text-align: center; padding: 60px 20px; font-family: var(--caia-font); color: var(--caia-text); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes caiaFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes caiaSlideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes caiaTypingDot { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }
@keyframes caiaPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.1)} }
@keyframes caiaSpeakBar { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1.5)} }

/* ============================================================
   MOBILE FINE-TUNING
   ============================================================ */
@media (max-width: 480px) {
    .caia-experience { border-radius: 0; }
    .caia-messages { padding: 12px; }
    .caia-message { max-width: 88%; font-size: 0.9em; padding: 12px 14px; }
    .caia-input-area { padding: 10px 12px; }
    .caia-ritual-intro { padding: 36px 20px; }
    .caia-ritual-intro p { font-size: 0.93em; }
    .caia-header { padding: 12px 16px; }
}

/* Fix Elementor/theme wrapper interference */
.caia-experience * { box-sizing: border-box; }
.caia-experience img { max-width: 100%; height: auto; }