/**
 * ════════════════════════════════════════════════════════════════
 * MAHA CREATOR CSS v3.0
 * ════════════════════════════════════════════════════════════════
 */

/* ── Overlay ─────────────────────────────────────────────────── */

.mc-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: flex; align-items: stretch; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.mc-overlay.mc-active { opacity: 1; }

/* ── Container ───────────────────────────────────────────────── */

.mc-container {
    display: flex; width: 100%; height: 100%; max-width: 1680px; overflow: hidden;
    transform: translateY(24px);
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.mc-overlay.mc-active .mc-container { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════
   PANNEAU GAUCHE — CHAT
   ════════════════════════════════════════════════════════════════ */

.mc-chat-pane {
    width: 42%; min-width: 360px; max-width: 600px;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg,#0d0d18 0%,#0a0a14 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    position: relative; overflow: hidden;
}
.mc-chat-pane::before {
    content:''; position:absolute; top:-80px; left:-80px;
    width:300px; height:300px;
    background:radial-gradient(circle,rgba(99,102,241,0.10) 0%,transparent 70%);
    pointer-events:none;
}

/* ── Chat header ─────────────────────────────────────────────── */

.mc-chat-header {
    display:flex; align-items:center; gap:12px; padding:18px 20px;
    background:rgba(255,255,255,0.03);
    border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0;
}
.mc-maha-avatar {
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
    display:flex; align-items:center; justify-content:center; font-size:20px;
    flex-shrink:0; box-shadow:0 0 20px rgba(99,102,241,0.4);
    animation:mc-avatar-pulse 3s ease-in-out infinite;
}
@keyframes mc-avatar-pulse {
    0%,100%{box-shadow:0 0 20px rgba(99,102,241,0.4);}
    50%{box-shadow:0 0 32px rgba(139,92,246,0.65);}
}
.mc-maha-info { flex:1; min-width:0; }
.mc-maha-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:.3px; }
.mc-maha-status {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; color:#666; margin-top:1px;
    background:none !important; border:none !important;
    padding:0 !important; line-height:1;
}
.mc-status-dot {
    display:inline-block !important;
    width:6px !important; height:6px !important;
    min-width:6px !important; min-height:6px !important;
    max-width:6px !important; max-height:6px !important;
    border-radius:50% !important;
    background:#22c55e !important;
    padding:0 !important; margin:0 !important;
    box-shadow:0 0 5px rgba(34,197,94,0.5);
    animation:mc-blink 3s ease-in-out infinite;
    flex-shrink:0; line-height:0; font-size:0;
}
@keyframes mc-blink { 0%,100%{opacity:1} 50%{opacity:.5} }

.mc-header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mc-url-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 10px;
    background:rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.32); border-radius:20px;
    font-size:11px; color:#a5b4fc; text-decoration:none;
    white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis;
    transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-url-pill:hover { background:rgba(99,102,241,0.24); color:#c4b5fd; }
.mc-close-btn {
    width:32px; height:32px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);
    color:#888; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:14px; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; flex-shrink:0;
}
.mc-close-btn:hover { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.4); color:#ef4444; }
.mc-save-header-btn {
    width:32px; height:32px; border-radius:50%;
    border:1px solid rgba(99,102,241,0.3); background:rgba(99,102,241,0.12);
    color:#a5b4fc; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:15px; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; flex-shrink:0;
}
.mc-save-header-btn:hover { background:rgba(99,102,241,0.25); border-color:rgba(99,102,241,0.5); color:#c4b5fd; transform:scale(1.08); }

/* ── Messages ────────────────────────────────────────────────── */

.mc-messages {
    flex:1; overflow-y:auto; padding:20px 16px;
    display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth;
}
.mc-messages::-webkit-scrollbar { width:4px; }
.mc-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }

.mc-msg { display:flex; align-items:flex-start; gap:10px; animation:mc-msg-in .3s ease forwards; }
@keyframes mc-msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.mc-msg-user { flex-direction:row-reverse; }

.mc-msg-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0; margin-top:2px;
}
.mc-user-avatar { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); }

.mc-msg-bubble {
    max-width:calc(100% - 52px); padding:12px 16px; border-radius:16px;
    font-size:14px; line-height:1.6;
}
.mc-msg-assistant .mc-msg-bubble {
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
    border-top-left-radius:4px; color:#e8e8f0;
}
.mc-msg-assistant .mc-msg-bubble p { margin:0 0 10px; }
.mc-msg-assistant .mc-msg-bubble p:last-child { margin-bottom:0; }
.mc-msg-assistant .mc-msg-bubble strong { color:#a5b4fc; }
.mc-msg-assistant .mc-msg-bubble em { color:#94a3b8; font-style:italic; }
.mc-msg-assistant .mc-msg-bubble code {
    background:rgba(99,102,241,0.2); padding:1px 6px; border-radius:4px;
    font-size:12px; color:#c4b5fd; font-family:monospace;
}
.mc-msg-user .mc-msg-bubble {
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    border:none; border-top-right-radius:4px; color:#fff;
}

/* Typing indicator */
.mc-typing-bubble {
    display:flex; align-items:center; gap:5px;
    padding:14px 18px !important; min-width:60px;
}
.mc-typing-bubble span {
    width:7px; height:7px; border-radius:50%; background:rgba(165,180,252,0.6);
    animation:mc-dot 1.4s ease-in-out infinite;
}
.mc-typing-bubble span:nth-child(2){animation-delay:.2s}
.mc-typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes mc-dot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* ── Quick actions ───────────────────────────────────────────── */

.mc-quick-actions {
    display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 0 42px;
    animation:mc-msg-in .3s ease forwards;
}
.mc-qa-btn {
    padding:9px 18px; border-radius:20px; font-size:13px; font-weight:600;
    cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; border:none; text-decoration:none;
    display:inline-flex; align-items:center; gap:5px;
}
.mc-qa-primary {
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
    box-shadow:0 4px 15px rgba(99,102,241,0.4);
}
.mc-qa-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,0.5); }
.mc-qa-primary:disabled { opacity:.6; cursor:not-allowed; }
.mc-qa-secondary {
    background:rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.32); color:#a5b4fc;
}
.mc-qa-secondary:hover { background:rgba(99,102,241,0.24); }
.mc-qa-ghost { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#888; }
.mc-qa-ghost:hover { background:rgba(255,255,255,0.1); color:#ccc; }

/* ── Input area ──────────────────────────────────────────────── */

.mc-input-area {
    padding:16px; border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.3); flex-shrink:0;
}
.mc-input-row { display:flex; gap:10px; align-items:flex-end; }
.mc-input {
    flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:14px; padding:12px 16px; color:#fff; font-size:14px; line-height:1.5;
    resize:none; font-family:inherit; transition:border-color .2s,background .2s;
    min-height:46px; max-height:120px;
}
.mc-input:focus { outline:none; border-color:rgba(99,102,241,0.5); background:rgba(255,255,255,0.08); }
.mc-input::placeholder { color:rgba(255,255,255,0.3); }
.mc-input:disabled { opacity:.5; cursor:not-allowed; }
.mc-send-btn {
    width:46px; height:46px; border-radius:50%; border:none;
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; box-shadow:0 4px 15px rgba(99,102,241,0.4);
}
.mc-send-btn:hover:not(:disabled) { transform:scale(1.08); box-shadow:0 6px 20px rgba(99,102,241,0.5); }
.mc-send-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.mc-send-icon { font-size:20px; font-weight:bold; line-height:1; }
.mc-loading-dots { display:flex; gap:3px; align-items:center; }
.mc-loading-dots span {
    width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.8);
    animation:mc-dot 1.2s ease-in-out infinite;
}
.mc-loading-dots span:nth-child(2){animation-delay:.15s}
.mc-loading-dots span:nth-child(3){animation-delay:.3s}

.mc-input-hints { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.mc-hint {
    padding:5px 12px; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08); border-radius:20px;
    font-size:12px; color:#888; cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; white-space:nowrap;
}
.mc-hint:hover { background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.3); color:#a5b4fc; }
.mc-hint-skip {
    padding:5px 10px; font-size:11px; color:#555; cursor:pointer;
    border:1px solid rgba(255,255,255,0.06); border-radius:20px;
    transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-hint-skip:hover { color:#888; border-color:rgba(255,255,255,0.12); }

/* Section label hint */
.mc-section-label-hint {
    font-size:12px; color:#a5b4fc; padding:4px 12px;
    background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.25);
    border-radius:20px;
}

/* ── Link picker ─────────────────────────────────────────────── */

.mc-link-options {
    display:flex; flex-direction:column; gap:6px; margin:10px 0;
}
.mc-lo-btn {
    padding:9px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04); color:#bbb;
    cursor:pointer; font-size:13px; text-align:left; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-lo-btn:hover { background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.3); color:#a5b4fc; }
.mc-lo-btn.active { background:rgba(99,102,241,0.18); border-color:rgba(99,102,241,0.5); color:#c4b5fd; }
.mc-link-input-area { margin-top:10px; }
.mc-li-input-row { display:flex; gap:8px; }
.mc-li-loading,.mc-li-empty { font-size:12px; color:#666; padding:8px 0; line-height:1.6; }

/* ── Academy picker ──────────────────────────────────────────── */

.mc-academy-picker { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mc-academy-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-radius:10px; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-academy-item:hover { background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.3); }
.mc-academy-thumb {
    width:36px; height:36px; border-radius:8px;
    background:rgba(99,102,241,0.18); display:flex; align-items:center;
    justify-content:center; font-size:18px; flex-shrink:0;
}
.mc-academy-info { flex:1; min-width:0; }
.mc-academy-name { font-size:13px; font-weight:600; color:#ddd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-academy-price { font-size:11px; color:#888; margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   PANNEAU DROIT — PREVIEW
   ════════════════════════════════════════════════════════════════ */

.mc-preview-pane {
    flex:1; display:flex; flex-direction:column; background:#111118; overflow:hidden; min-width:0; min-height:0;
}

/* ── Preview header ──────────────────────────────────────────── */

.mc-preview-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.3); flex-shrink:0; gap:12px;
}
.mc-preview-tabs {
    display:flex; gap:4px; background:rgba(0,0,0,0.3); padding:3px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
}
.mc-preview-tab {
    padding:6px 14px; border-radius:7px; border:none; background:transparent;
    color:#666; font-size:13px; font-weight:500; cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-preview-tab.active { background:rgba(99,102,241,0.2); color:#a5b4fc; }
.mc-preview-tab:hover:not(.active) { color:#aaa; background:rgba(255,255,255,0.04); }

.mc-preview-actions { display:flex; align-items:center; gap:10px; }
.mc-preview-open {
    padding:6px 12px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.28);
    border-radius:8px; color:#34d399; font-size:12px; font-weight:600;
    text-decoration:none; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; white-space:nowrap;
}
.mc-preview-open:hover { background:rgba(16,185,129,0.2); }

.mc-preview-device-toggle {
    display:flex; gap:4px; background:rgba(0,0,0,0.3); padding:3px;
    border-radius:8px; border:1px solid rgba(255,255,255,0.06);
}
.mc-device-btn {
    width:30px; height:30px; border-radius:6px; border:none; background:transparent;
    cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
    transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; color:#555;
}
.mc-device-btn.active { background:rgba(99,102,241,0.2); color:#a5b4fc; }
.mc-device-btn:hover:not(.active) { background:rgba(255,255,255,0.05); color:#888; }

/* Section progress dots */
.mc-section-progress { display:flex; gap:6px; align-items:center; }
.mc-sp-dot {
    width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.15);
    cursor:pointer; transition: transform .3s ease-out, background .3s ease-out, border-color .3s ease-out, color .3s ease-out, opacity .3s ease-out;
    title:attr(title);
}
.mc-sp-dot.active { background:#6366f1; box-shadow:0 0 8px rgba(99,102,241,0.6); animation:mc-blink 1.5s ease-in-out infinite; }
.mc-sp-dot.done  { background:#10b981; box-shadow:0 0 6px rgba(16,185,129,0.5); }

/* ── Viewport & frame ────────────────────────────────────────── */

.mc-preview-viewport {
    flex:1; overflow:hidden; position:relative; transition: transform .3s ease-out, background .3s ease-out, border-color .3s ease-out, color .3s ease-out, opacity .3s ease-out; min-height:0;
}
.mc-preview-viewport::-webkit-scrollbar { width:6px; }
.mc-preview-viewport::-webkit-scrollbar-track { background:#0a0a0a; }
.mc-preview-viewport::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }

.mc-preview-viewport.mc-mobile {
    display:flex; align-items:flex-start; justify-content:center; padding:20px; background:#0a0a10;
}
.mc-preview-viewport.mc-mobile .mc-preview-frame {
    width:390px; max-width:100%; border-radius:30px;
    border:2px solid rgba(255,255,255,0.1); overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.6); flex-shrink:0;
}

.mc-preview-empty {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px;
    color:#444; padding:40px; text-align:center; pointer-events:none;
}
.mc-preview-empty-icon { font-size:48px; opacity:.4; animation:mc-float 3s ease-in-out infinite; }
@keyframes mc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.mc-preview-empty p { font-size:15px; color:#555; max-width:280px; line-height:1.6; margin:0; }

.mc-preview-frame { width:100%; height:100%; min-height:100%; border:none; border-radius:12px; transition:opacity .3s; }

/* ════════════════════════════════════════════════════════════════
   ANIMATION "GENERATING" (Blueprint)
   ════════════════════════════════════════════════════════════════ */

.mc-gen-anim {
    min-height:500px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#080810 0%,#0d0b1e 100%);
    position:relative; overflow:hidden;
}

/* Animated grid */
.mc-gen-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(99,102,241,0.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(99,102,241,0.07) 1px,transparent 1px);
    background-size:50px 50px;
    animation:mc-grid-drift 4s ease-in-out infinite;
}
@keyframes mc-grid-drift {
    0%,100%{opacity:.6;transform:translateY(0)} 50%{opacity:1;transform:translateY(-8px)}
}

/* Scanning line */
.mc-gen-scan {
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(99,102,241,0.6),transparent);
    animation:mc-scan 2.5s ease-in-out infinite;
    top:0;
}
@keyframes mc-scan { 0%{top:0;opacity:.8} 100%{top:100%;opacity:.2} }

/* Floating particles */
.mc-gen-particles { position:absolute; inset:0; pointer-events:none; }
.mc-gen-particle {
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:rgba(99,102,241,0.5);
    animation:mc-particle-rise linear infinite;
}
@keyframes mc-particle-rise {
    0%  {transform:translateY(0)   scale(1);   opacity:.8}
    100%{transform:translateY(-120px) scale(.2); opacity:0}
}

/* Main content */
.mc-gen-content { position:relative; z-index:1; text-align:center; padding:40px; }

.mc-gen-logo {
    font-size:52px; margin-bottom:20px; display:inline-block;
    animation:mc-gen-breathe 2.5s ease-in-out infinite;
}
@keyframes mc-gen-breathe {
    0%,100%{transform:scale(1)   rotate(0deg); filter:drop-shadow(0 0 8px rgba(99,102,241,.4))}
    50%{   transform:scale(1.12) rotate(5deg); filter:drop-shadow(0 0 20px rgba(139,92,246,.8))}
}

.mc-gen-title { font-size:18px; font-weight:700; color:#fff; margin-bottom:10px; }

.mc-gen-step {
    font-size:13px; color:#a5b4fc; margin-bottom:24px; min-height:20px;
    animation:mc-step-fade .4s ease;
}
@keyframes mc-step-fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.mc-gen-progress-wrap { display:flex; align-items:center; gap:10px; margin-bottom:24px; justify-content:center; }
.mc-gen-progress { width:200px; height:3px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; }
.mc-gen-bar { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899); border-radius:4px; width:0%; transition:width .5s ease; }
.mc-gen-pct { font-size:11px; color:#666; font-variant-numeric:tabular-nums; width:28px; text-align:right; }

.mc-gen-sections { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.mc-gen-section-item {
    padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    color:#444; transition: transform .5s ease-out, background .5s ease-out, border-color .5s ease-out, color .5s ease-out, opacity .5s ease-out;
}
.mc-gen-section-item.active {
    background:rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.45);
    color:#a5b4fc; box-shadow:0 0 12px rgba(99,102,241,0.25);
    animation:mc-section-pop .4s ease;
}
@keyframes mc-section-pop { 0%{transform:scale(.9)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* ════════════════════════════════════════════════════════════════
   BUILDING INDICATOR (overlay)
   ════════════════════════════════════════════════════════════════ */

.mc-building-indicator {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:10px;
    background:rgba(0,0,0,0.85); backdrop-filter:blur(8px);
    border:1px solid rgba(99,102,241,0.35); border-radius:50px;
    padding:10px 20px; font-size:13px; color:#a5b4fc; white-space:nowrap;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
    animation:mc-msg-in .25s ease forwards;
    z-index:10;
}
.mc-bi-pulse {
    width:10px; height:10px; border-radius:50%;
    background:#6366f1; flex-shrink:0;
    animation:mc-bi-anim 1s ease-in-out infinite;
}
@keyframes mc-bi-anim { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.5);opacity:.4} }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ── Action bar (persistent bottom bar in preview pane) ──────────── */

.mc-action-bar {
    display:flex; align-items:center; gap:8px; padding:10px 16px;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,0.08); flex-shrink:0;
}
.mc-ab-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04); color:#ccc; font-size:12px; font-weight:600;
    cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; text-decoration:none; white-space:nowrap;
    font-family:inherit;
}
.mc-ab-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
.mc-ab-publish {
    background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(16,185,129,0.1));
    border-color:rgba(16,185,129,0.3); color:#34d399;
}
.mc-ab-publish:hover { background:rgba(16,185,129,0.25); color:#4ade80; }
.mc-ab-view {
    background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.25); color:#a5b4fc;
}
.mc-ab-view:hover { background:rgba(99,102,241,0.2); color:#c4b5fd; }
.mc-ab-link { color:#fbbf24; border-color:rgba(251,191,36,0.2); }
.mc-ab-link:hover { background:rgba(251,191,36,0.1); }
.mc-ab-save {
    background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(59,130,246,0.1));
    border-color:rgba(59,130,246,0.3); color:#60a5fa;
}
.mc-ab-save:hover { background:rgba(59,130,246,0.25); color:#93c5fd; }
.mc-ab-url { color:#f472b6; border-color:rgba(244,114,182,0.2); }
.mc-ab-url:hover { background:rgba(244,114,182,0.1); }

@media (max-width:900px) {
    .mc-container { flex-direction:column; }
    .mc-chat-pane { width:100%; max-width:100%; height:50%; border-right:none; border-bottom:1px solid rgba(255,255,255,0.06); }
    .mc-preview-pane { height:50%; }
    .mc-action-bar { flex-wrap:wrap; padding:8px 10px; gap:6px; }
    .mc-ab-btn { padding:6px 10px; font-size:11px; }
}
@media (max-width:600px) {
    .mc-chat-pane { height:58%; }
    .mc-preview-pane { height:42%; }
    .mc-url-pill { display:none; }
    .mc-preview-tabs { display:none; }
    .mc-ab-btn span.mc-ab-label { display:none; }
}

/* ── Vision Chat — Capture + Image preview ──────────────────── */

.mc-capture-btn {
    flex-shrink:0; width:36px; height:36px; border:none; border-radius:10px;
    background:rgba(139,92,246,0.15); color:#a78bfa; font-size:16px;
    cursor:pointer; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; display:flex;
    align-items:center; justify-content:center;
}
.mc-capture-btn:hover { background:rgba(139,92,246,0.3); transform:scale(1.08); }
.mc-capture-btn:disabled { opacity:.5; cursor:wait; }

.mc-vision-thumb {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; margin:0 0 4px;
    background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.25);
    border-radius:10px; animation:mc-fadeIn .2s ease;
}
.mc-vt-img {
    width:48px; height:36px; object-fit:cover; border-radius:6px;
    border:1px solid rgba(139,92,246,0.3);
}
.mc-vt-label {
    flex:1; font-size:11px; color:#a78bfa; font-weight:600;
}
.mc-vt-remove {
    width:22px; height:22px; border:none; border-radius:50%;
    background:rgba(239,68,68,0.15); color:#f87171; font-size:14px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.mc-vt-remove:hover { background:rgba(239,68,68,0.3); }

.mc-input-area.mc-drag-over {
    outline:2px dashed #a78bfa; outline-offset:-2px;
    background:rgba(139,92,246,0.08);
}

.mc-msg-img {
    max-width:100%; max-height:140px; border-radius:8px;
    border:1px solid rgba(255,255,255,0.1); display:block;
}

.mc-hint-vision {
    background:rgba(139,92,246,0.15) !important;
    border-color:rgba(139,92,246,0.3) !important;
    color:#c4b5fd !important;
}
.mc-hint-vision:hover {
    background:rgba(139,92,246,0.3) !important;
}

@keyframes mc-fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* ── Payment Config Panel ───────────────────────────── */
.mc-payment-overlay {
    position:fixed; inset:0; z-index:2100000;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    animation:mc-fadeIn .2s ease;
}
.mc-payment-panel {
    background:#1a1a2e; border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; width:440px; max-width:95vw; max-height:85vh;
    overflow-y:auto; color:#e0e0e0;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.mc-payment-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.mc-payment-header h3 { margin:0; font-size:16px; font-weight:600; color:#fff; }
.mc-payment-close {
    background:none; border:none; color:#888; font-size:22px; cursor:pointer;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.mc-payment-close:hover { background:rgba(255,255,255,0.1); color:#fff; }
.mc-payment-body { padding:20px; }

.mc-pay-section {
    margin-bottom:20px; padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.mc-pay-section:last-of-type { border-bottom:none; margin-bottom:12px; }
.mc-pay-section-title {
    font-size:13px; font-weight:600; color:#a78bfa; text-transform:uppercase;
    letter-spacing:0.5px; margin-bottom:10px;
}

.mc-pay-status {
    display:flex; align-items:center; gap:8px;
    font-size:13px; padding:8px 12px; border-radius:8px; margin-bottom:10px;
}
.mc-pay-ok { background:rgba(34,197,94,0.1); color:#22c55e; }
.mc-pay-pending { background:rgba(251,191,36,0.1); color:#fbbf24; }
.mc-pay-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mc-pay-dot-ok { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.5); }
.mc-pay-dot-pending { background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,0.5); }

.mc-pay-desc { font-size:12px; color:#999; line-height:1.5; margin:0 0 12px; }

.mc-pay-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600;
    cursor:pointer; border:none; transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.mc-pay-btn:disabled { opacity:0.5; cursor:not-allowed; }
.mc-pay-btn-primary { background:#6366f1; color:#fff; }
.mc-pay-btn-primary:hover:not(:disabled) { background:#818cf8; }
.mc-pay-btn-secondary { background:rgba(255,255,255,0.08); color:#ccc; }
.mc-pay-btn-secondary:hover { background:rgba(255,255,255,0.12); color:#fff; }
.mc-pay-btn-full { width:100%; margin-top:4px; }

.mc-pay-price-row { display:flex; gap:8px; margin-bottom:6px; }
.mc-pay-input {
    flex:1; padding:10px 14px; border-radius:10px; font-size:15px; font-weight:600;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    color:#fff; outline:none; transition:border-color .2s;
}
.mc-pay-input:focus { border-color:#6366f1; }
.mc-pay-input::placeholder { color:#666; }
.mc-pay-select {
    width:80px; padding:10px 8px; border-radius:10px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    color:#fff; outline:none; cursor:pointer;
}
.mc-pay-hint { font-size:11px; color:#777; margin:4px 0 0; }

.mc-pay-summary {
    background:rgba(255,255,255,0.04); border-radius:10px; padding:12px 16px;
}
.mc-pay-summary-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; font-size:13px;
}
.mc-pay-summary-row + .mc-pay-summary-row { border-top:1px solid rgba(255,255,255,0.04); }
.mc-pay-summary-row span:first-child { color:#888; }
.mc-pay-summary-row span:last-child { color:#fff; font-weight:500; }

.mc-ab-payment {
    background:rgba(99,102,241,0.15) !important; color:#a78bfa !important;
}

/* Chat progress indicator during tunnel generation */
.mc-gen-chat-bubble{background:rgba(99,102,241,.08)!important;border:1px solid rgba(99,102,241,.2)!important;border-radius:16px!important;padding:16px!important;min-width:260px;}
.mc-gen-chat-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.mc-gen-chat-spinner{width:18px;height:18px;border:2px solid rgba(99,102,241,.3);border-top-color:#6366f1;border-radius:50%;animation:mc-spin .8s linear infinite;}
@keyframes mc-spin{to{transform:rotate(360deg)}}
.mc-gen-chat-title{font-weight:700;font-size:14px;color:#a5b4fc;}
.mc-gen-chat-phase{font-size:13px;color:#e0e0ff;margin-bottom:10px;min-height:18px;}
.mc-gen-chat-bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;margin-bottom:8px;}
.mc-gen-chat-bar{height:100%;background:linear-gradient(90deg,#6366f1,#a78bfa);border-radius:6px;width:0%;transition:width .8s ease;}
.mc-gen-chat-info{display:flex;justify-content:space-between;font-size:11px;color:rgba(165,180,252,.6);margin-bottom:6px;}
.mc-gen-chat-msg{font-size:12px;color:rgba(165,180,252,.5);font-style:italic;min-height:16px;}

/* Delivery type selector */
.mc-pay-delivery-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.mc-pay-dtype{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;}
.mc-pay-dtype:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.05);}
.mc-pay-dtype-active,.mc-pay-dtype-active:hover{border-color:#6366f1;background:rgba(99,102,241,.12);}
.mc-pay-dtype input[type=radio]{display:none;}
.mc-pay-dtype-icon{font-size:20px;line-height:1;}
.mc-pay-dtype-label{font-size:12px;line-height:1.3;color:#e0e0ff;}
.mc-pay-dtype-label small{color:rgba(165,180,252,.5);font-size:10px;}
.mc-pay-dconfig{margin-top:10px;padding:10px;background:rgba(255,255,255,.03);border-radius:8px;}
.mc-pay-dconfig label{display:block;font-size:12px;color:#a5b4fc;margin-bottom:4px;}
.mc-pay-select-full,.mc-pay-input-full{width:100%;box-sizing:border-box;}
.mc-pay-dconfig textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#e0e0ff;padding:8px;font-size:13px;resize:vertical;font-family:inherit;}

/* Golden Ball orb spinner for generation preview */
.mc-gen-orb-wrap{position:relative;width:90px;height:90px;margin:0 auto 20px;}
.mc-gen-orb{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;animation:mcOrbPulse 2.4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(212,168,26,.4));}
@keyframes mcOrbPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.07);opacity:1}}
.mc-gen-ring{position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(212,168,26,.35);animation:mcRingSpin 3s linear infinite;}
.mc-gen-ring::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#f5c842;box-shadow:0 0 8px rgba(245,200,66,.6);}
@keyframes mcRingSpin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.mc-gen-ring2{position:absolute;inset:-28px;border-radius:50%;border:1px solid rgba(212,168,26,.15);animation:mcRingSpin 8s linear infinite reverse;}

/* ── CCB Cookie Banner — disable pointer events when MahaCreator is active ── */
body:has(.mc-overlay) [class*=ccb],
body:has(.mc-overlay) [id*=ccb] {
    pointer-events: none !important;
}

/* ── PA Cookie Banner — disable pointer events when MahaCreator is active ── */
body:has(.mc-overlay) #pa-cookie-banner,
body:has(.mc-overlay) [id*="cookie-banner"],
body:has(.mc-overlay) [class*="cookie-banner"] {
    pointer-events: none !important;
}