:root {
    --primary: #f97316;
    --bg-dark: #1c1917;
    --surface: rgba(255, 255, 255, 0.08);
    --neon-cyan: #06b6d4;
    --neon-pink: #ec4899;
    --neon-purple: #a855f7;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #292524 0%, #0c0a09 100%);
    color: #fafaf9;
    margin: 0;
    
    /* FIX 1: Use Dynamic Viewport Height */
    height: 100vh; 
    height: 100dvh; 
    
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    overscroll-behavior: none;
}

/* --- MAIN LAYOUT --- */
.main-layout {
    display: flex; flex-direction: column;
    width: 100%; 
    max-width: 500px;
    height: 100%;
    
    /* FIX 2: Add Safe Area Padding for iPhone */
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); 
    
    box-sizing: border-box; 
    gap: 15px;
    margin: 0 auto;
}

header { text-align: center; flex-shrink: 0; }
h1 { margin: 0; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.5px; }
.subtitle { color: #a8a29e; font-size: 0.85rem; margin-top: 4px; }

/* TABS */
.tabs { 
    display: flex; background: var(--surface); padding: 5px; border-radius: 16px; 
    flex-shrink: 0; 
}
.tab { 
    flex: 1; padding: 12px; text-align: center; cursor: pointer; 
    border-radius: 12px; font-size: 0.9rem; color: #a8a29e; transition: 0.3s; 
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.tab.active { background: rgba(255,255,255,0.1); color: var(--primary); font-weight: 600; }

.view { display: none; flex-direction: column; flex: 1; overflow: hidden; position: relative; }
.view.active { display: flex; }

/* CHAT AREA */
.chat-container {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 10px;
    display: flex; flex-direction: column; gap: 12px;
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}
.message { max-width: 85%; padding: 14px 18px; border-radius: 20px; font-size: 1rem; line-height: 1.5; }
.agent-msg { align-self: flex-start; background: rgba(255,255,255,0.1); border-bottom-left-radius: 4px; }
.user-msg { align-self: flex-end; background: rgba(249, 115, 22, 0.2); border: 1px solid rgba(249,115,22,0.3); border-bottom-right-radius: 4px; }
.system-msg { align-self: center; font-size: 0.75rem; color: #57534e; margin: 5px 0; }

/* VISUALIZER */
.vis-wrapper { 
    display: flex; justify-content: center; align-items: center; 
    min-height: 130px; flex-shrink: 0; 
}
.orb {
    width: 75px; height: 75px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #facc15);
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.3);
    transition: 0.3s;
}
.vis-wrapper.speaking .orb { transform: scale(1.25); box-shadow: 0 0 70px rgba(249, 115, 22, 0.6); }

/* --- CONTROLS (FIXED FOR SAFARI) --- */
.controls-wrapper { 
    margin-top: auto; 
    display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; 
    
    /* FIX 3: Force extra padding at bottom so buttons lift up */
    padding-bottom: 20px; 
}
#status-msg { text-align: center; font-size: 0.8rem; color: #666; }

.btn {
    width: 100%; padding: 18px; border-radius: 18px; border: none;
    cursor: pointer; font-size: 1rem; font-weight: 600;
    transition: 0.2s; background: var(--surface); color: white; border: 1px solid rgba(255,255,255,0.1);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-voice-trigger { margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-primary { background: linear-gradient(90deg, var(--primary), #ea580c); border: none; }
.btn-danger { background: #ef4444; }
.btn-record { background: #d97706; border: none; }
.btn:active { transform: scale(0.97); }

/* CLONE VIEW */
.clone-box { 
    background: rgba(255,255,255,0.03); padding: 25px; border-radius: 20px; flex: 1; 
    display: flex; flex-direction: column; overflow-y: auto;
    /* Fix for scrolling behind bottom bar */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.clone-title { margin-top: 0; text-align: center; color: var(--primary); }
.input-label { font-size: 0.85rem; color: #aaa; margin-top: 15px; display: block; margin-bottom: 8px;}
.divider { text-align: center; margin: 20px 0; opacity: 0.5; font-size: 0.8rem; }
.status-text { text-align: center; font-size: 0.8rem; margin-top: 10px; color: #aaa; }

input[type=text] { 
    width: 100%; background: rgba(0,0,0,0.3); border: 1px solid #444; color: white; 
    padding: 16px; border-radius: 14px; box-sizing: border-box; font-size: 16px; 
}
.file-input { width: 100%; font-size: 0.95rem; padding: 10px 0; }

/* MODAL */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px);
    display: none; justify-content: center; align-items: center; z-index: 1000;
    opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.open { display: flex; opacity: 1; }
.modal-box {
    background: #1c1917; border: 1px solid rgba(255,255,255,0.1);
    padding: 30px; border-radius: 32px; width: 90%; max-width: 400px;
    text-align: center; transform: scale(0.95); transition: transform 0.3s ease;
    max-height: 85vh; display: flex; flex-direction: column;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-title { margin: 0 0 20px 0; color: white; flex-shrink: 0; font-size: 1.2rem; }

.avatar-grid { 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 10px 0; 
    overflow-y: auto; padding: 10px; 
}

/* AVATAR ITEMS */
.voice-option {
    width: 85px; height: 85px; border-radius: 24px;
    background: #292524; border: 2px solid #444;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.voice-option .emoji { font-size: 28px; filter: grayscale(1); transition: 0.3s; margin-bottom: 5px; }
.voice-option .label { 
    font-size: 10px; color: #a8a29e; font-weight: 600; 
    max-width: 75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize;
}

.voice-option.selected { transform: translateY(-3px); border-color: white !important; }
.voice-option.selected .emoji { filter: grayscale(0); transform: scale(1.15); }
.voice-option.selected .label { color: white; }

.voice-option.cyan { border-color: var(--neon-cyan); }
.voice-option.pink { border-color: var(--neon-pink); }
.voice-option.purple { border-color: var(--neon-purple); }

.voice-option.cyan.selected { background: rgba(6,182,212,0.2); box-shadow: 0 4px 20px rgba(6,182,212,0.4); }
.voice-option.pink.selected { background: rgba(236,72,153,0.2); box-shadow: 0 4px 20px rgba(236,72,153,0.4); }
.voice-option.purple.selected { background: rgba(168,85,247,0.2); box-shadow: 0 4px 20px rgba(168,85,247,0.4); }

/* TABLET & DESKTOP ADJUSTMENTS */
@media (min-width: 600px) and (max-width: 1024px) {
    .main-layout { max-width: 650px; padding: 40px; gap: 25px; }
    h1 { font-size: 1.8rem; }
    .orb { width: 90px; height: 90px; }
    .vis-wrapper { min-height: 180px; }
    .message { font-size: 1.1rem; padding: 16px 22px; }
    .btn { font-size: 1.1rem; padding: 20px; }
    .avatar-grid { gap: 25px; }
    .voice-option { width: 100px; height: 100px; }
    .voice-option .emoji { font-size: 36px; }
    .voice-option .label { font-size: 12px; max-width: 85px; }
}

@media (max-width: 380px) {
    .main-layout { padding: 15px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
    h1 { font-size: 1.2rem; }
    .orb { width: 60px; height: 60px; }
    .vis-wrapper { min-height: 100px; }
    .avatar-grid { gap: 10px; }
    .voice-option { width: 70px; height: 70px; }
}