/* =========================================
   AI BUILDER LAYOUT 
   ========================================= */
.builder-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 15px 90px 15px; /* Padded for bottom nav */
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: calc(100vh - 70px);
}

/* Desktop Grid Override */
@media (min-width: 1024px) {
    .builder-main { 
        display: grid;
        grid-template-columns: 350px 1fr; 
        padding: 20px 20px 100px 20px;
    }
}

.builder-panel {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(8, 21, 66, 0.05);
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f6;
    overflow: hidden;
}

/* Mobile: Split the available height evenly */
@media (max-width: 1023px) {
    .chat-panel { flex: 0 0 40%; min-height: 250px; }
    .workspace-panel { flex: 1; min-height: 400px; }
}

/* --- FULLSCREEN MODE --- */
.workspace-panel.fullscreen-active {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
    border-radius: 0;
    border: none;
    margin: 0;
}

/* API Status Indicator */
.api-status { font-size: 0.8rem; color: #64748b; background: #f1f5f9; padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.pulse-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* Chat Section */
.chat-log { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; background: #f8fafc; }
.chat-msg { display: flex; flex-direction: column; max-width: 90%; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.ai { align-self: flex-start; align-items: flex-start; }
.chat-sender { font-size: 0.75rem; font-weight: bold; color: var(--primary, #7366ff); margin-bottom: 4px; }
.user .chat-sender { color: #64748b; }
.chat-bubble { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; }
.user .chat-bubble { background: var(--primary, #7366ff); color: white; border-top-right-radius: 2px; }
.ai .chat-bubble { background: white; color: #334155; border: 1px solid #e2e8f0; border-top-left-radius: 2px; }

/* Inputs */
.chat-input-area { padding: 12px; background: white; border-top: 1px solid #eef2f6; }
.cuba-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; font-family: inherit; font-size: 0.9rem; resize: none; margin-bottom: 8px; outline: none; }
.cuba-input:focus { border-color: var(--primary, #7366ff); }
.full-width-btn { width: 100%; text-align: center; justify-content: center; display: flex; padding: 10px; border: none; border-radius: 8px; background: var(--primary); color: white; font-weight: bold; cursor: pointer;}

/* Workspace Area */
.workspace-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eef2f6; background: white; flex-wrap: wrap; gap: 10px;}
.tab-group { display: flex; gap: 5px; background: #f1f5f9; padding: 4px; border-radius: 8px; }
.workspace-tab { background: transparent; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; color: #64748b; cursor: pointer; }
.workspace-tab.active { background: var(--primary, #7366ff); color: white; }
.cuba-btn-secondary { background: #f1f5f9; color: #475569; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: background 0.2s;}
.cuba-btn-secondary:hover { background: #e2e8f0; }

.workspace-canvas { flex-grow: 1; position: relative; background: #f8fafc; overflow: hidden; }

.canvas-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.state-icon { font-size: 3rem; margin-bottom: 10px; animation: bounce 2s infinite; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(115, 102, 255, 0.2); border-top-color: var(--primary, #7366ff); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }

.sandbox-iframe { width: 100%; height: 100%; border: none; background: white; }
.code-editor { width: 100%; height: 100%; background: #1e293b; color: #34d399; font-family: monospace; font-size: 0.9rem; padding: 15px; border: none; resize: none; outline: none; }
.hidden-element { display: none !important; }

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }