/* --- Zoom-like Dark Theme & Eye Comfort Palette --- */
:root {
    --bg-color: #1a1e26;       /* Deep grayish blue - base background */
    --main-bg: #11141a;        /* Darker gray - main chat area */
    --sidebar-bg: #1a1e26;     /* Same as base - sidebar */
    --toolbar-bg: #161a20;     /* Slightly different gray - bottom toolbar */
    --panel-border: #2c3440;   /* Muted gray-blue - borders */
    
    --text-primary: #e0e6ed;   /* Off-white - primary text */
    --text-secondary: #9aa5b1; /* Muted gray - labels, secondary text */
    
    --accent-green: #2ecc71;   /* Calm green - start/success */
    --accent-red: #e74c3c;     /* Calm red - stop/danger */
    --accent-blue: #3498db;    /* Professional blue - fetch/upload */
    --agent-color: #00ffcc;    /* Tealy cyan - agent logs/accents */
    --code-color: #dcdcaa;     /* Classic VS Code style color */
}

/* --- General reset --- */
* { 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; /* To prevent the main scroll of the body*/
}

/* --- Main App Container (Flexbox) --- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full screen*/
}

/* --- Main Chat/Code Area --- */
.main-content {
    flex: 1; /* It takes up the rest of the available space*/
    background-color: var(--main-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    border-bottom: 1px solid var(--panel-border);
}

/* --- AI Avatar & Pulse Effect --- */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-content: 1; /* So that it appears above the pulse */
}

.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);
}

/* Ripple effect (attractive and soothing to the eye)*/
.avatar-pulse {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: rgba(0, 255, 204, 0.2);
    animation: none; /* It will be activated with JavaScript when the AI ​​speaks*/
}

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

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

/* Add a class in JS to activate ripple*/
.speaking .avatar-pulse {
    animation: pulse 1.5s infinite ease-out;
}

.speaking #aiStatusText {
    color: var(--agent-color);
    font-weight: bold;
}

/* --- Code Viewer Panel --- */
.code-viewer-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none; /* It will be displayed in JS */
    background-color: rgba(17, 20, 26, 0.95);
    z-index: 2; /* Above the Avatar */
    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', 'Courier New', monospace;
    color: var(--code-color);
    font-size: 14px;
    white-space: pre-wrap;
    display: block;
    height: 100%;
    overflow-y: auto;
}

/* --- Sidebar Panel --- */
.sidebar-panel {
    display: flex;
    flex-direction: column;
    width: 300px; /* Fixed width*/
    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; /* It will be shown in JS or on call*/
    margin-bottom: 71px; /* Because you don't cover the toolbar */
}

.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; /* It will be shown in JS at the end*/
}

.scorecard-panel h2 { color: var(--text-primary); margin-top: 0;}
#scorecardContent { color: var(--text-primary); font-family: monospace; }

/* --- Bottom Toolbar (Flexbox) --- */
.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: 15px;
    align-items: center;
}

.toolbar-center { display: none; } /* It will appear when the call starts*/

/* --- Buttons --- */
button { 
    padding: 10px 20px; 
    font-size: 14px; 
    font-weight: bold; 
    cursor: pointer; 
    border: none; 
    border-radius: 6px; 
    transition: background-color 0.2s, transform 0.1s; 
}

button:hover { transform: scale(1.02); }
button:active { transform: scale(0.98); }
button:disabled { background-color: #555 !important; color: #888 !important; cursor: not-allowed; }

.btn-start { background-color: var(--accent-green); color: white; }
.btn-start:hover { background-color: #27ae60; }

.btn-stop { background-color: var(--accent-red); color: white; }
.btn-stop:hover { background-color: #c0392b; }

.btn-github { background-color: #6e5494; color: white; }
.btn-upload { background-color: var(--accent-blue); color: white; }

/* --- Inputs & Divider --- */
.upload-controls { display: flex; gap: 10px; align-items: center; }
input[type="text"] { 
    padding: 10px; width: 250px; 
    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; }
.divider { color: var(--text-secondary); font-size: 12px; font-weight: bold;}

/* --- Mobile Responsiveness (تظبيط مقاسات التليفون) --- */
@media screen and (max-width: 768px) {
    /* 1. تعديل الشريط السفلي ليكون عمودي (عشان الزراير متتضغطش) */
    .bottom-toolbar {
        height: auto;
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .toolbar-left, .toolbar-center {
        width: 100%;
        flex-direction: column; /* الزراير تكون فوق بعض */
        gap: 10px;
    }

    .upload-controls {
        flex-direction: column;
        width: 100%;
    }

    input[type="text"] {
        width: 100%; /* حقل جيت هاب ياخد عرض الشاشة */
    }

    button {
        width: 100%; /* الزراير تكون عريضة لسهولة الضغط بالصابع */
        padding: 15px; /* تكبير الزرار شوية للموبايل */
        font-size: 16px;
    }

    /* 2. تعديل اللوحة الجانبية (Logs & Scorecard) */
    .sidebar-panel {
        position: relative; /* إلغاء التثبيت على اليمين */
        width: 100%; /* تاخد عرض الشاشة بالكامل */
        height: 250px; /* طول مناسب للموبايل */
        border-left: none;
        border-top: 1px solid var(--panel-border);
        margin-bottom: 0;
    }

    /* 3. تصغير حجم الـ Avatar شوية عشان يوفر مساحة */
    .ai-avatar {
        font-size: 60px;
        padding: 15px;
    }

    .avatar-pulse {
        width: 110px;
        height: 110px;
    }
}