/* FlowAI v3 - Complete Stylesheet */
*{box-sizing:border-box;margin:0;padding:0}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.4)}

/* Animations */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes typing{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(99,102,241,.4)}100%{box-shadow:0 0 0 10px rgba(99,102,241,0)}}
@keyframes appear{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes progressBar{from{width:0}to{width:100%}}
@keyframes glow{0%,100%{box-shadow:0 0 12px rgba(99,102,241,.15)}50%{box-shadow:0 0 24px rgba(99,102,241,.3)}}

.msg-appear{animation:slideUp .25s ease-out}
.slide-in{animation:slideIn .2s ease-out}
.fade-in{animation:fadeIn .3s ease-out}
.modal-appear{animation:appear .2s ease-out}
.spin{animation:spin 1s linear infinite}

.typing-dot{animation:typing 1.2s infinite;width:5px;height:5px;border-radius:50%;background:#6366f1}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}

/* Gradient text */
.gradient-text{background:linear-gradient(135deg,#818cf8,#6366f1,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Resize */
.resize-handle{cursor:col-resize;transition:all .15s;position:relative}
.resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:24px;border-radius:2px;background:rgba(99,102,241,.2);transition:all .15s}
.resize-handle:hover::after,.resize-handle.active::after{background:#6366f1;height:40px;width:3px}

/* File items */
.file-item{transition:all .12s ease;border-left:2px solid transparent;border-radius:0 6px 6px 0;margin:0 4px}
.file-item:hover{background:rgba(99,102,241,.06)}
.file-item.active{background:rgba(99,102,241,.1);border-left-color:#6366f1}

/* Editor tabs */
.editor-tab{transition:all .1s;border-bottom:2px solid transparent;position:relative}
.editor-tab.active{background:rgba(17,24,39,.8);color:#e2e8f0;border-bottom-color:#6366f1}
.editor-tab:not(.active):hover{background:rgba(30,41,59,.4)}

/* Main tabs */
.main-tab{transition:all .12s;border-bottom:2px solid transparent;position:relative}
.main-tab.active{color:#e2e8f0;border-bottom-color:#6366f1}
.main-tab:not(.active):hover{color:#94a3b8}

/* Status dot */
.status-dot{width:7px;height:7px;border-radius:50%;transition:all .2s}
.status-dot.online{background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.5)}
.status-dot.offline{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.3)}
.status-dot.busy{background:#f59e0b;animation:pulse-ring 1.5s infinite}

/* Tooltips */
.ttip{position:relative}
.ttip::after{content:attr(data-tip);visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1e293b;color:#e2e8f0;padding:4px 10px;border-radius:6px;font-size:10px;white-space:nowrap;border:1px solid rgba(99,102,241,.15);z-index:999;transition:all .12s;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.ttip:hover::after{visibility:visible;opacity:1}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.modal-box{background:#0f1729;border:1px solid rgba(99,102,241,.1);border-radius:16px;box-shadow:0 25px 60px -12px rgba(0,0,0,.6);max-height:85vh;overflow-y:auto;width:100%}

/* ===== MARKDOWN ===== */
.md-body{color:#cbd5e1;line-height:1.7;font-size:13px;overflow-wrap:break-word}
.md-body p{margin:.5em 0}
.md-body code{background:rgba(99,102,241,.08);padding:2px 7px;border-radius:5px;font-size:.82em;color:#a5b4fc;font-family:'JetBrains Mono',monospace;border:1px solid rgba(99,102,241,.08)}
.md-body pre{background:#080d1a;border-radius:12px;padding:0;margin:12px 0;overflow:hidden;border:1px solid rgba(99,102,241,.08);position:relative}
.md-body pre .code-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(99,102,241,.05);border-bottom:1px solid rgba(99,102,241,.06);font-size:11px;color:#64748b;font-family:'JetBrains Mono',monospace}
.md-body pre .code-header .lang-badge{display:flex;align-items:center;gap:6px}
.md-body pre .code-header .lang-dot{width:6px;height:6px;border-radius:50%;background:#6366f1}
.md-body pre code{background:none;padding:14px 16px;display:block;color:#e2e8f0;font-size:12.5px;line-height:1.65;border:none;overflow-x:auto}
.md-body pre .copy-btn{padding:4px 10px;border-radius:6px;background:rgba(99,102,241,.1);color:#818cf8;font-size:10px;cursor:pointer;border:1px solid rgba(99,102,241,.15);transition:all .15s;font-family:'Inter',sans-serif}
.md-body pre .copy-btn:hover{background:rgba(99,102,241,.2);color:#a5b4fc}
.md-body ul,.md-body ol{padding-left:1.5em;margin:.5em 0}
.md-body li{margin:.3em 0}
.md-body li::marker{color:#6366f1}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{color:#f1f5f9;margin:.8em 0 .3em;font-weight:600}
.md-body h1{font-size:1.25em;border-bottom:1px solid rgba(99,102,241,.1);padding-bottom:.3em}
.md-body h2{font-size:1.1em}
.md-body h3{font-size:.95em}
.md-body strong{color:#f1f5f9}
.md-body em{color:#94a3b8}
.md-body a{color:#818cf8;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(99,102,241,.3)}
.md-body a:hover{color:#a5b4fc;text-decoration-color:#818cf8}
.md-body blockquote{border-left:3px solid #6366f1;padding:10px 14px;color:#94a3b8;margin:.6em 0;background:rgba(99,102,241,.03);border-radius:0 8px 8px 0}
.md-body table{border-collapse:collapse;width:100%;margin:.6em 0;border-radius:8px;overflow:hidden}
.md-body th,.md-body td{border:1px solid rgba(99,102,241,.08);padding:8px 12px;font-size:12px}
.md-body th{background:rgba(99,102,241,.06);color:#e2e8f0;font-weight:600;text-align:left}
.md-body td{color:#cbd5e1}
.md-body tr:hover td{background:rgba(99,102,241,.02)}
.md-body hr{border:none;border-top:1px solid rgba(99,102,241,.08);margin:1.2em 0}
.md-body img{max-width:100%;border-radius:8px;margin:.5em 0}

/* Chat styles */
.user-msg{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(99,102,241,.05));border:1px solid rgba(99,102,241,.12);border-radius:18px 18px 4px 18px;backdrop-filter:blur(4px)}
.system-pill{font-size:11px;padding:5px 14px;border-radius:100px;border:1px solid;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.system-pill.success{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15);color:#34d399}
.system-pill.warning{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.15);color:#fbbf24}
.system-pill.info{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.15);color:#818cf8}
.system-pill.error{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.15);color:#f87171}

/* Streaming cursor */
.stream-cursor::after{content:'';display:inline-block;width:2px;height:15px;background:#6366f1;margin-left:3px;vertical-align:text-bottom;animation:cursor-blink .8s infinite}

/* Tech badges */
.tech-badge{font-size:9px;padding:2px 7px;border-radius:5px;background:rgba(99,102,241,.08);color:#818cf8;border:1px solid rgba(99,102,241,.1);font-weight:500;white-space:nowrap;letter-spacing:.2px}

/* Gallery card */
.gallery-card{background:rgba(15,23,41,.8);border:1px solid rgba(99,102,241,.08);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s}
.gallery-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3)}

/* Template card */
.template-card{background:rgba(15,23,41,.6);border:1px solid rgba(99,102,241,.06);border-radius:12px;padding:14px;cursor:pointer;transition:all .2s}
.template-card:hover{border-color:rgba(99,102,241,.25);background:rgba(15,23,41,.9);transform:translateY(-1px)}

/* Code Editor Theme */
.code-area{background:#060810;font-family:'JetBrains Mono','Fira Code',monospace;font-size:13px;line-height:1.7;tab-size:2;color:#e2e8f0;caret-color:#6366f1}
.code-area:focus{outline:none}
.code-area::selection{background:rgba(99,102,241,.2)}
.line-nums{background:#060810;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;color:rgba(100,116,139,.4);user-select:none;text-align:right;padding-right:12px}
.line-nums .active-line{color:#818cf8;font-weight:500}

/* Preview frame styles */
.preview-device{transition:all .3s ease;position:relative}
.preview-device.mobile{max-width:375px;margin:12px auto;border-radius:24px;border:3px solid #1e293b;box-shadow:0 0 40px rgba(0,0,0,.3)}
.preview-device.tablet{max-width:768px;margin:12px auto;border-radius:16px;border:2px solid #1e293b;box-shadow:0 0 40px rgba(0,0,0,.3)}
.preview-device.desktop{max-width:100%;margin:0;border:none;border-radius:0}

/* File tree folder */
.folder-toggle{cursor:pointer;transition:transform .15s}
.folder-toggle.open{transform:rotate(90deg)}

/* Token bar */
.token-bar{background:linear-gradient(90deg,rgba(99,102,241,.06),rgba(168,85,247,.06))}

/* Action btn */
.action-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:rgba(15,23,41,.6);border:1px solid rgba(99,102,241,.06);cursor:pointer;transition:all .15s;width:100%;text-align:left}
.action-btn:hover{border-color:rgba(99,102,241,.2);background:rgba(15,23,41,.9);transform:translateX(2px)}
.action-btn .icon-box{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Tool card */
.tool-card{background:rgba(15,23,41,.5);border:1px solid rgba(99,102,241,.06);border-radius:10px;padding:12px;transition:all .15s}
.tool-card:hover{border-color:rgba(99,102,241,.2);background:rgba(15,23,41,.8)}
.tool-card.active{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.05)}

/* Progress indicator for generation */
.gen-progress{height:2px;background:rgba(99,102,241,.1);border-radius:2px;overflow:hidden;position:relative}
.gen-progress::after{content:'';position:absolute;left:0;top:0;height:100%;width:30%;background:linear-gradient(90deg,#6366f1,#a78bfa);border-radius:2px;animation:shimmer 1.5s infinite linear}

/* Chat input enhancement */
.chat-input-area{background:rgba(8,12,26,.6);border:1px solid rgba(99,102,241,.08);border-radius:14px;transition:all .2s}
.chat-input-area:focus-within{border-color:rgba(99,102,241,.25);box-shadow:0 0 0 3px rgba(99,102,241,.06)}

/* Version timeline */
.version-item{position:relative;padding-left:24px}
.version-item::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:rgba(99,102,241,.1)}
.version-item::after{content:'';position:absolute;left:5px;top:14px;width:7px;height:7px;border-radius:50%;background:#6366f1;border:2px solid #0f1729}
.version-item:last-child::before{display:none}

/* Notification badge */
.notif-badge{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid #0a0e1a}

/* Kbd style */
kbd{display:inline-flex;align-items:center;padding:2px 6px;background:rgba(15,23,41,.8);border:1px solid rgba(99,102,241,.08);border-radius:4px;font-size:10px;font-family:'JetBrains Mono',monospace;color:#94a3b8;line-height:1.4}

/* Selection highlight */
::selection{background:rgba(99,102,241,.2)}

/* Focus ring */
.focus-ring:focus{outline:none;box-shadow:0 0 0 2px rgba(99,102,241,.2)}