/* =====================================================
   VIBE UPGRADE — chat_vibe.css
   Drop-in enhancement. Link AFTER your main styles.
   <link href="chat_vibe.css" rel="stylesheet">
   ===================================================== */

/* ── Glassmorphism header ── */
.app-header {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
}

.dark-mode .app-header {
    background: rgba(15,23,42,0.78);
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ── Softer return button ── */
#returnButton {
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 18px;
    color: var(--text-light);
}

#returnButton:hover {
    color: var(--primary);
    background: transparent;
    transform: none;
}

/* ── Richer dark mode chat background ── */
.dark-mode .chat-container {
    background: linear-gradient(170deg, #0f172a 0%, #1a1032 50%, #0f172a 100%);
}

/* ── Better message entrance ── */
.message {
    animation: msgSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes msgSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Refined bubbles ── */
.user-message .message-bubble {
    background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%);
    box-shadow: 0 2px 12px rgba(79,70,229,0.25);
}

.ai-message .message-bubble {
    border: 1px solid rgba(0,0,0,0.04);
}

.dark-mode .ai-message .message-bubble {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Premium input area ── */
.chat-controls {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.dark-mode .chat-controls {
    background: rgba(15,23,42,0.88);
    border-top-color: rgba(255,255,255,0.06);
}

.input-wrapper {
    border-radius: 24px;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: var(--background);
    transition: all 0.25s ease;
}

.input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1), 0 2px 8px rgba(79,70,229,0.08);
}

.dark-mode .input-wrapper {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
}

.dark-mode .input-wrapper:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}

#textInput {
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.45;
}

/* ── Send & mic buttons ── */
.control-button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(79,70,229,0.2);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.control-button:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(79,70,229,0.3);
}

.control-button:active {
    transform: scale(0.94);
}

/* ── Typing indicator ── */
.typing-indicator {
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 18px;
    padding: 14px 18px;
    gap: 5px;
}

.dark-mode .typing-indicator {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
}

.typing-dot {
    width: 7px;
    height: 7px;
    background: var(--primary-light);
    opacity: 0.6;
}

/* ── Streak badge — polished but same position ── */
.streak-container {
    border-radius: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(79,70,229,0.25);
}

/* ── Character avatar ring ── */
.character-avatar {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(135deg, #4F46E5, #a78bfa);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ── Profile dropdown polish ── */
.profile-dropdown {
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
}

.dark-mode .profile-dropdown {
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* ── Character modal ── */
.character-modal-content {
    border-radius: 20px;
}

.character-card {
    border-radius: 14px;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.character-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.dark-mode .character-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ── Toast notifications ── */
.notification-toast {
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    font-size: 14px;
}

/* ── Quick prompt label ── */
.quick-prompts::before {
    content: 'Try asking...';
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    opacity: 0.5;
    margin-bottom: 2px;
    padding-left: 2px;
}

/* ── Weather card polish ── */
.weather-card {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ── Service cards ── */
.service-card {
    border-radius: 14px;
    border-left-width: 3px;
    transition: all 0.2s ease;
}

.service-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.dark-mode .service-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ── Scrollbar styling ── */
.chat-container::-webkit-scrollbar {
    width: 4px;
}

.chat-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
}

.dark-mode .chat-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

/* ── Action buttons (Listen, Copy) ── */
.action-button {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.15s ease;
}

/* ── Subtle hover lift on message rows ── */
.message:hover .message-bubble {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.dark-mode .message:hover .message-bubble {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}