:root {
    --bg-color: #1a1e26;       
    --main-bg: #11141a;        
    --sidebar-bg: #1a1e26;     
    --toolbar-bg: #161a20;     
    --panel-border: #2c3440;   
    --text-primary: #e0e6ed;   
    --text-secondary: #9aa5b1; 
    --accent-green: #2ecc71;   
    --accent-red: #e74c3c;     
    --accent-blue: #3498db;    
    --agent-color: #00ffcc;    
    --code-color: #dcdcaa;     
}

* { box-sizing: border-box; }
body { 
    margin: 0; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-primary); 
    overflow: hidden; 
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.main-content {
    flex: 1; 
    background-color: var(--main-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    border-bottom: 1px solid var(--panel-border);
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1; 
}

.ai-avatar {
    font-size: 80px;
    background: transparent;
    border-radius: 50%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--agent-color);
    transition: transform 0.3s;
}

/* Avatar Nodding Animation */
.ai-avatar.speaking-animation {
    animation: nod 0.6s infinite alternate ease-in-out;
}

@keyframes nod {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-8px) scale(1.02); }
}

.avatar-pulse {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: rgba(0, 255, 204, 0.2);
    animation: none; 
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.2; }
    50% { opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

.speaking .avatar-pulse {
    animation: pulse 1.5s infinite ease-out;
}

/* Waveform Animation */
.waveform {
    display: flex;
    gap: 5px;
    height: 35px;
    align-items: flex-end;
    margin-top: 15px;
    opacity: 0; 
    transition: opacity 0.3s;
}
.waveform.active { opacity: 1; }
.bar {
    width: 6px;
    background: var(--agent-color);
    border-radius: 3px;
    animation: wave 1s infinite ease-in-out;
}
.bar:nth-child(1) { animation-delay: 0.0s; }
.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.2s; }
.bar:nth-child(5) { animation-delay: 0.0s; }

@keyframes wave {
    0%, 100% { height: 8px; }
    50% { height: 35px; }
}

#aiStatusText {
    margin-top: 15px;
    color: var(--text-secondary);
    font-size: 16px;
}
.speaking #aiStatusText {
    color: var(--agent-color);
    font-weight: bold;
}

.code-viewer-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none; 
    background-color: rgba(17, 20, 26, 0.95);
    z-index: 2; 
    padding: 20px;
    overflow: hidden;
}

.code-viewer-panel pre { background: transparent; padding: 0; border: none; margin: 0; height: 100%; }
.code-viewer-panel code { font-family: 'Consolas', monospace; color: var(--code-color); font-size: 14px; white-space: pre-wrap; display: block; height: 100%; overflow-y: auto; }

.sidebar-panel {
    display: flex;
    flex-direction: column;
    width: 300px; 
    position: absolute;
    right: 0; top: 0; bottom: 0;
    background-color: var(--sidebar-bg);
    border-left: 1px solid var(--panel-border);
    padding: 15px;
    overflow-y: auto;
    display: none; 
    margin-bottom: 71px; 
}

.terminal-logs { flex: 1; background: #111; padding: 15px; border-radius: 8px; text-align: left; height: 50%; overflow-y: auto; font-family: monospace; color: var(--agent-color); font-size: 13px; margin-bottom: 15px; }
.scorecard-panel { flex: 1; background: rgba(0, 140, 186, 0.1); padding: 20px; border-radius: 8px; border: 2px solid var(--accent-blue); text-align: left; display: none; }
.scorecard-panel h2 { color: var(--text-primary); margin-top: 0;}
#scorecardContent { color: var(--text-primary); font-family: monospace; }

.bottom-toolbar {
    height: 70px;
    background-color: var(--toolbar-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-top: 1px solid var(--panel-border);
}

.toolbar-left, .toolbar-center { display: flex; gap: 10px; align-items: center; }
.toolbar-center { display: none; } 

.persona-dropdown {
    padding: 8px 12px;
    border-radius: 6px;
    background: #2c2f33;
    color: white;
    border: 1px solid #7289da;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

button { padding: 10px 15px; font-size: 14px; font-weight: bold; cursor: pointer; border: none; border-radius: 6px; transition: all 0.2s; }
button:hover { transform: scale(1.02); }
button:active { transform: scale(0.98); }
button:disabled { background-color: #444 !important; color: #888 !important; border-color: #444 !important; cursor: not-allowed; }

.btn-start { background-color: var(--accent-green); color: white; }
.btn-stop { background-color: var(--accent-red); color: white; }
.btn-secondary { background-color: #2f3136; color: white; border: 1px solid #7289da; }
.btn-github { background-color: #6e5494; color: white; }
.btn-upload { background-color: var(--accent-blue); color: white; }

.upload-controls { display: flex; gap: 10px; align-items: center; }
input[type="text"] { padding: 10px; width: 200px; border-radius: 4px; border: 1px solid var(--panel-border); background: #111; color: var(--text-primary); }
input[type="file"] { color: var(--text-secondary); font-size: 13px; max-width: 200px; }
.divider { color: var(--text-secondary); font-size: 12px; font-weight: bold;}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
    body {
        overflow-y: auto; 
        overflow-x: hidden;
    }
    
    .app-container {
        height: auto;
        min-height: 100vh;
    }

    .main-content {
        flex: none; 
        height: 50vh; 
        min-height: 350px;
    }
    
    .code-viewer-panel {
        z-index: 10;
    }

    .bottom-toolbar { 
        height: auto; 
        flex-direction: column; 
        padding: 15px; 
        gap: 15px; 
    }
    
    .persona-container { margin-right: 0 !important; width: 100%; }
    .persona-dropdown { width: 100%; padding: 12px; font-size: 16px; }

    /* Adjusting the button network*/
    .toolbar-left {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    #stopBtn {
        grid-column: span 2;
    }
    
    .toolbar-center { width: 100%; }
    
    .upload-controls { 
        flex-direction: column; 
        width: 100%; 
        gap: 10px; 
    }
    
    input[type="text"] { width: 100%; }
    
    button { 
        width: 100%; 
        padding: 12px; 
        font-size: 15px; 
    }

    .sidebar-panel { 
        position: relative; 
        width: 100%; 
        height: 250px; 
        border-left: none; 
        border-top: 1px solid var(--panel-border); 
        margin-bottom: 0; 
    }
    
    .ai-avatar { font-size: 60px; padding: 15px; }
    .avatar-pulse { width: 110px; height: 110px; }
}


  /* History Modal Styles
   ========================================= */
.modal {
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--sidebar-bg); 
    margin: 5% auto; 
    padding: 25px; 
    border: 1px solid var(--accent-blue); 
    width: 90%; 
    max-width: 800px; 
    border-radius: 12px; 
    max-height: 85vh; 
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.close-btn {
    color: var(--text-secondary); 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
    cursor: pointer;
    transition: 0.2s;
}

.close-btn:hover { color: var(--accent-red); }

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}

/*   History Items (Collapsible / Accordion)
   ========================================= */
.history-item {
    background: #111; 
    margin-bottom: 15px; 
    border-radius: 8px; 
    border-left: 4px solid var(--agent-color); 
    padding: 5px 15px;
    transition: background 0.3s;
}

.history-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    list-style: none; 
    outline: none;
}
/* Hide the default arrow in Webkit browsers (such as Chrome and Safari) */
.history-summary::-webkit-details-marker { display: none; }

.history-summary:hover {
    opacity: 0.8;
}


.toggle-icon {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

/* When the menu opens, the arrow rotates 180 degrees*/
.history-item[open] .toggle-icon {
    transform: rotate(180deg);
}

.history-date { color: var(--text-secondary); font-size: 13px; }
.history-persona { color: var(--accent-blue); font-weight: bold; font-size: 15px; }

/* The full text of the evaluation (it appears only when you open the list)*/
.history-text {
    white-space: pre-wrap; 
    font-family: monospace; 
    font-size: 13px; 
    color: #ddd; 
    background: rgba(255,255,255,0.03); 
    padding: 15px; 
    border-radius: 5px; 
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px dashed #333; /* A check dividing line between the title and the details*/
}

/*   Custom Job Description Panel
   ========================================= */
.job-desc-panel {
    background-color: var(--toolbar-bg);
    border-top: 1px solid var(--panel-border);
    padding: 15px 25px;
    display: none; /* It will appear in JavaScript when the function is selected*/
    flex-shrink: 0;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.jd-header {
    color: var(--agent-color);
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#jobDescInput {
    width: 100%;
    height: 80px;
    padding: 12px;
    border-radius: 8px;
    background: #111;
    color: var(--text-primary);
    border: 1px solid var(--accent-blue);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#jobDescInput:focus {
    border-color: var(--agent-color);
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.2);
}