/* C2C AI Brain - Public Styles (Full Grid Layout Version) */
/* UPDATED: Applied styles to both Device Config and Agent Config */

/* --- 1. GLOBAL ELEMENTS --- */
.c2c-page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #2271b1;
}
.c2c-breadcrumb { margin-bottom: 15px; font-size: 14px; opacity: 0.8; color: inherit; }
.c2c-breadcrumb a { color: #2271b1; text-decoration: none; }

/* --- 2. STATUS BADGES --- */
.c2c-status { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: bold; }
.c2c-status-online { background: #46b450; color: #fff; }
.c2c-status-offline { background: #dcdcde; color: #50575e; }
.c2c-status-suspended { background: #dc3232; color: #fff; }
.c2c-status-connected { background: #00a32a; color: #fff; }
.c2c-status-error { background: #d63638; color: #fff; }
.c2c-status-disabled { background: #dcdcde; color: #50575e; }

/* --- 3. CONFIGURATION FORMS (GLASS STYLE) --- */
/* Áp dụng cho cả Device Config và Agent Form */
#c2c-config-form, 
#c2c-agent-form {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(128, 128, 128, 0.5) !important; /* Viền bao ngoài cùng */
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    padding: 30px; margin: 20px 0; color: inherit;
}

.c2c-config-section {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; margin-bottom: 40px !important;
}

.c2c-config-section h3 {
    margin-top: 0; font-size: 1.2em; text-transform: uppercase;
    letter-spacing: 0.5px; opacity: 0.9; color: inherit !important;
    border-bottom: 2px solid #2271b1 !important;
    padding-bottom: 10px; margin-bottom: 20px; display: inline-block;
}

/* --- 4. TABLE GRID FIX (KẺ LƯỚI CHO TỪNG Ô) --- */

/* Reset bảng cho cả 2 form */
#c2c-config-form .form-table,
#c2c-agent-form .form-table {
    width: 100%;
    border-collapse: collapse !important;
    border: 1px solid rgba(150, 150, 150, 0.5) !important;
    margin-top: 0;
}

/* Kẻ viền cho TẤT CẢ các ô */
#c2c-config-form .form-table th,
#c2c-config-form .form-table td,
#c2c-agent-form .form-table th,
#c2c-agent-form .form-table td {
    border: 1px solid rgba(150, 150, 150, 0.5) !important; 
    padding: 20px 15px; 
    vertical-align: top;
    color: inherit !important;
}

/* Cột Tiêu đề (Bên trái) */
#c2c-config-form .form-table th,
#c2c-agent-form .form-table th {
    width: 250px;
    font-weight: 600;
    background: rgba(128, 128, 128, 0.1) !important; 
}

/* Cột Nhập liệu (Bên phải) */
#c2c-config-form .form-table td,
#c2c-agent-form .form-table td {
    background: transparent !important;
}

/* --- 5. INPUT FIELDS (SAFE MODE) --- */
/* Áp dụng style input cho cả 2 form */
#c2c-config-form input[type="text"],
#c2c-config-form input[type="url"],
#c2c-config-form input[type="number"],
#c2c-config-form textarea,
#c2c-config-form select,
#c2c-agent-form input[type="text"],
#c2c-agent-form input[type="url"],
#c2c-agent-form input[type="number"],
#c2c-agent-form textarea,
#c2c-agent-form select {
    background-color: #ffffff !important; color: #333333 !important;
    border: 1px solid #cccccc !important; border-radius: 4px;
    padding: 10px; width: 100%; max-width: 100%;
    box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

#c2c-config-form input:focus, #c2c-config-form select:focus, #c2c-config-form textarea:focus,
#c2c-agent-form input:focus, #c2c-agent-form select:focus, #c2c-agent-form textarea:focus {
    border-color: #2271b1 !important; outline: none; box-shadow: 0 0 0 1px #2271b1;
}

#c2c-config-form .description,
#c2c-agent-form .description {
    margin-top: 10px; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; font-size: 0.9em; opacity: 0.8;
}

.c2c-slider { width: 100%; max-width: 300px; height: 6px; background: #ddd; border-radius: 5px; margin-top: 10px; }
.c2c-slider-value { font-weight: bold; margin-left: 10px; color: inherit; }

/* --- 6. MODALS --- */
.c2c-modal {
    display: none; position: fixed; z-index: 999999;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.c2c-modal-content {
    background-color: #ffffff !important; color: #333333 !important;
    margin: 5% auto; padding: 30px; border: none;
    width: 90%; max-width: 500px; border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.c2c-modal-content h3, .c2c-modal-content p, .c2c-modal-content label { color: #333 !important; }
.c2c-modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.c2c-modal-close:hover { color: #000; }
.c2c-api-key-display {
    background: #f5f5f5 !important; border: 1px solid #ddd !important;
    padding: 15px; border-radius: 4px; display: flex; gap: 10px; align-items: center;
}
.c2c-api-key-display code {
    background: transparent !important; color: #d63638 !important;
    font-size: 14px; flex: 1; word-break: break-all;
}

/* --- 7. CHAT INTERFACE --- */
.c2c-chat-layout { display: flex; gap: 20px; margin-top: 20px; }
.c2c-chat-sidebar, .c2c-chat-main {
    background: #ffffff !important; color: #333333 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 8px; padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.c2c-chat-sidebar { width: 300px; } .c2c-chat-main { flex: 1; min-height: 400px; }
.c2c-chat-sidebar h3 { color: #333 !important; margin-top: 0; }
.c2c-session-list li a {
    display: block; padding: 12px; background: #f8f9fa !important; color: #333 !important;
    border: 1px solid #eee !important; border-radius: 6px; text-decoration: none; transition: all 0.2s;
}
.c2c-session-list li a:hover, .c2c-session-list li.active a { background: #e5f5fa !important; border-color: #2271b1 !important; }
.c2c-message.user { background: #e3f2fd !important; color: #0d47a1 !important; margin-left: 20px; border: 1px solid #bbdefb; }
.c2c-message.ai { background: #f5f5f5 !important; color: #333 !important; margin-right: 20px; border: 1px solid #e0e0e0; }
.c2c-message-header, .c2c-message-content { color: inherit !important; }

/* --- 8. RESPONSIVE & WP OVERRIDE --- */
@media (max-width: 768px) { .c2c-chat-layout { flex-direction: column; } .c2c-chat-sidebar { width: 100%; margin-bottom: 20px; } .c2c-modal-content { width: 95%; margin: 15% auto; } }
.wp-list-table.c2c-table th, .wp-list-table.c2c-table td { padding: 12px; }

/* === [NEW] AGENT MODE STYLES (Kept from device-config) === */
.c2c-mode-selector select#config_mode {
    font-size: 1.1em !important;
    font-weight: bold !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
}

.c2c-agent-preview {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    border: 2px solid #2271b1 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.c2c-agent-preview h4 {
    margin-top: 0 !important;
    color: #0d47a1 !important;
    font-size: 1.1em !important;
}

.c2c-agent-preview table {
    background: rgba(255,255,255,0.8) !important;
    border-radius: 4px !important;
}

/* Empty state for agents */
.c2c-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px dashed #ccc;
}
.c2c-empty-state p { font-size: 1.1em; color: #666; }