@import"https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&display=swap";:root{--color-background: #121212;--color-surface: #1E1E1E;--color-primary: #81D4FA;--color-primary-dark: #4FC3F7;--color-on-background: #E0E0E0;--color-on-surface: #FFFFFF;--color-on-surface-secondary: #BDBDBD;--color-border: #333333;--color-destructive: #c42b1c;--color-user-message: #2a2a3e;--color-agent-message: #2a2a2a;--font-heading: "Poppins", sans-serif;--font-body: "Inter", sans-serif;--border-radius: 12px;--spacing-unit: 8px;--transition-speed: .3s}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-on-background);line-height:1.6;font-size:16px;padding:calc(var(--spacing-unit) * 4)}main{max-width:1400px;margin:0 auto}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 4px #81d4fa33;border-radius:4px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}header{text-align:center;margin-bottom:calc(var(--spacing-unit) * 4)}header h1{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;color:var(--color-on-surface);letter-spacing:-1px;margin-bottom:var(--spacing-unit)}header p{font-size:1.1rem;color:var(--color-on-surface-secondary);max-width:600px;margin:0 auto}h2{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-on-surface);margin-bottom:calc(var(--spacing-unit) * 2)}#main-nav{display:flex;justify-content:center;gap:var(--spacing-unit);margin-bottom:calc(var(--spacing-unit) * 4);border-bottom:1px solid var(--color-border)}.main-nav-btn{background:transparent;border:none;color:var(--color-on-surface-secondary);padding:var(--spacing-unit) calc(var(--spacing-unit) * 3);font-size:1.1rem;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px}.main-nav-btn:hover{color:var(--color-on-surface)}.main-nav-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.main-panel{display:none}.main-panel.active{display:block;animation:fade-in .4s ease}#generator-panel.active{display:block}#chat-panel.active{display:flex;flex-direction:column}.container{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing-unit) * 4);align-items:start}.output-column{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 4)}.controls,.output,.sidebar-manager{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 4);transition:box-shadow var(--transition-speed) ease;display:flex;flex-direction:column}.sidebar-manager{padding:0}.controls:hover,.output:hover,.sidebar-manager:hover{box-shadow:0 8px 30px #0003}.form-group,.fieldset{margin-bottom:calc(var(--spacing-unit) * 3)}label,legend{display:block;font-weight:500;color:var(--color-on-surface-secondary);margin-bottom:var(--spacing-unit)}input[type=text],textarea,select{width:100%;background-color:var(--color-background);color:var(--color-on-background);border:1px solid var(--color-border);border-radius:calc(var(--border-radius) / 1.5);padding:calc(var(--spacing-unit) * 1.5);font-family:var(--font-body);font-size:1rem;transition:all var(--transition-speed) ease}textarea:focus,select:focus,input[type=text]:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #81d4fa33}fieldset{border:none;padding:0}legend{padding:0}.checkbox-group{display:flex;align-items:center;margin-bottom:var(--spacing-unit)}.checkbox-group input[type=checkbox]{width:auto;margin-right:var(--spacing-unit);accent-color:var(--color-primary);height:1.2em;width:1.2em}.checkbox-group label{margin-bottom:0;font-weight:400;cursor:pointer}.switch-container{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing-unit) * 2);background-color:var(--color-background);padding:var(--spacing-unit);border-radius:calc(var(--border-radius) / 1.5);border:1px solid var(--color-border)}.switch-label{color:var(--color-on-surface-secondary);font-size:.9rem;transition:color var(--transition-speed) ease;cursor:default}.switch-label.active{color:var(--color-on-surface);font-weight:500}.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch input:focus-visible+.slider{box-shadow:0 0 0 4px #81d4fa33}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#555;transition:var(--transition-speed) ease;border-radius:28px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:var(--transition-speed) ease;border-radius:50%}input:checked+.slider{background-color:var(--color-primary)}input:focus+.slider{box-shadow:0 0 1px var(--color-primary)}input:checked+.slider:before{transform:translate(22px)}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-unit);font-family:var(--font-body);font-weight:500;font-size:1rem;padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) / 1.5);border:none;cursor:pointer;transition:all var(--transition-speed) ease;-webkit-user-select:none;user-select:none}button svg{transition:transform var(--transition-speed) ease}#generate-button{background-color:var(--color-primary);color:#000;width:100%;font-weight:700}#generate-button:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 15px #81d4fa33}#generate-button[aria-busy=true] svg{animation:spin 1s linear infinite}#generate-button:disabled{background-color:#555;color:#888;cursor:not-allowed;transform:none;box-shadow:none}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--spacing-unit) * 2)}#copy-button{background-color:transparent;color:var(--color-on-surface-secondary);border:1px solid var(--color-border)}#copy-button:hover{background-color:var(--color-border);color:var(--color-on-surface)}#copy-button .icon-copied{display:none;color:var(--color-primary)}#copy-button.copied .icon-copy{display:none}#copy-button.copied .icon-copied{display:inline-block;animation:pop-in .3s ease-out}#copy-button.copied{color:var(--color-primary);border-color:var(--color-primary)}@keyframes pop-in{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}#copy-button span.copy-text{width:45px;text-align:left}#output-container{position:relative;background-color:var(--color-background);border-radius:calc(var(--border-radius) / 1.5);min-height:400px;padding:calc(var(--spacing-unit) * 2);border:1px solid var(--color-border);display:flex;flex-grow:1}pre{width:100%;height:100%;white-space:pre-wrap;word-wrap:break-word;font-family:Courier New,Courier,monospace;font-size:.95rem}#output-text,#qa-summary-text{width:100%;height:100%;color:var(--color-on-background)}#output-text:empty:before{content:"Your generated prompt will appear here...";color:var(--color-on-surface-secondary);font-style:italic;font-family:var(--font-body);display:flex;align-items:center;justify-content:center;height:100%;text-align:center}#output-text.fade-in,#qa-summary-section.fade-in{animation:fade-in .5s ease-in-out}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#qa-summary-section{background-color:#252525;border:1px solid var(--color-border);border-top:4px solid var(--color-primary);padding:calc(var(--spacing-unit) * 3)}#qa-summary-section .output-header{margin-bottom:var(--spacing-unit)}#qa-summary-heading{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 1.5);font-size:1.2rem;color:var(--color-on-surface)}#qa-summary-heading svg{color:var(--color-primary);flex-shrink:0}#qa-summary-section .output-container{min-height:auto;background:transparent;border:none;padding:0}#qa-summary-section #qa-summary-text{color:var(--color-on-surface-secondary)}.hidden{display:none}#loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tab-nav{display:flex;border-bottom:1px solid var(--color-border);padding:0 calc(var(--spacing-unit) * 2)}.tab-btn{flex:1;padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);background-color:transparent;border:none;color:var(--color-on-surface-secondary);cursor:pointer;transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease,border-bottom-color var(--transition-speed) ease;border-bottom:3px solid transparent;border-radius:0;font-size:1rem;font-weight:500}.tab-btn:hover{color:var(--color-on-surface)}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab-content{padding:calc(var(--spacing-unit) * 3)}.sidebar-manager .tab-panel{display:none}.sidebar-manager .tab-panel.active{display:flex;flex-direction:column;animation:fade-in .3s ease-in-out}.history-header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:calc(var(--spacing-unit) * 2)}#clear-history-button{background-color:transparent;color:var(--color-on-surface-secondary);border:1px solid var(--color-border);padding:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);font-size:.9rem}#clear-history-button:hover{background-color:var(--color-destructive);color:var(--color-on-surface);border-color:var(--color-destructive)}#history-list{list-style:none;max-height:250px;overflow-y:auto;padding-right:var(--spacing-unit)}#history-list::-webkit-scrollbar{width:6px}#history-list::-webkit-scrollbar-track{background:var(--color-background);border-radius:10px}#history-list::-webkit-scrollbar-thumb{background:#555;border-radius:10px}#history-list::-webkit-scrollbar-thumb:hover{background:#777}.history-item{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-unit);background-color:var(--color-background);padding:calc(var(--spacing-unit) * 1.5);border-radius:calc(var(--border-radius) / 2);margin-bottom:var(--spacing-unit);cursor:pointer;transition:background-color var(--transition-speed) ease,border-left-color var(--transition-speed) ease;font-size:.9rem;border-left:3px solid transparent}.history-item-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.history-item:hover{background-color:var(--color-border)}.history-item.active{background-color:var(--color-border);border-left:3px solid var(--color-primary);color:var(--color-on-surface)}.add-to-project-btn{background:transparent;border:none;color:var(--color-on-surface-secondary);cursor:pointer;padding:var(--spacing-unit);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-to-project-btn:hover{background-color:var(--color-border);color:var(--color-primary)}#new-project-form{display:flex;gap:var(--spacing-unit);margin-bottom:calc(var(--spacing-unit) * 3)}#new-project-form input{flex-grow:1}#create-project-button{flex-shrink:0;background-color:transparent;border:1px solid var(--color-border);color:var(--color-on-surface-secondary);padding:var(--spacing-unit);aspect-ratio:1/1;height:auto}#create-project-button:hover{background-color:var(--color-border);color:var(--color-primary)}.project-display{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--spacing-unit) * 3);border-top:1px solid var(--color-border);padding-top:calc(var(--spacing-unit) * 2);min-height:200px}.project-display h3{font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--color-on-surface-secondary);margin-bottom:var(--spacing-unit);padding-bottom:var(--spacing-unit);border-bottom:1px solid var(--color-border);transition:color .3s,transform .3s}.project-list-container{border-right:1px solid var(--color-border);padding-right:calc(var(--spacing-unit) * 3)}#project-list,#selected-project-prompts{list-style:none;max-height:250px;overflow-y:auto;padding-right:var(--spacing-unit)}#project-list::-webkit-scrollbar,#selected-project-prompts::-webkit-scrollbar{width:6px}#project-list::-webkit-scrollbar-track,#selected-project-prompts::-webkit-scrollbar-track{background:transparent}#project-list::-webkit-scrollbar-thumb,#selected-project-prompts::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.project-item,.saved-prompt-item{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-unit);padding:var(--spacing-unit);border-radius:calc(var(--border-radius) / 2);margin-bottom:var(--spacing-unit);cursor:pointer;font-size:.9rem;background-color:var(--color-background);transition:background-color var(--transition-speed) ease}.project-item .project-name{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-item:hover{background-color:var(--color-border)}.project-item.active{background-color:var(--color-primary);color:#000;font-weight:500}.project-item.active .delete-btn{color:#000}.project-item.active .delete-btn:hover{color:var(--color-destructive);background-color:#0000001a}.saved-prompt-item{cursor:default;font-family:Courier New,Courier,monospace;font-size:.85rem;line-height:1.4;align-items:flex-start}.saved-prompt-item .prompt-text{white-space:pre-wrap;word-break:break-all;flex-grow:1}.delete-btn{flex-shrink:0;background:transparent;border:none;color:var(--color-on-surface-secondary);cursor:pointer;padding:calc(var(--spacing-unit) / 2);border-radius:50%;display:flex}.delete-btn:hover{color:var(--color-destructive);background-color:#c42b1c33}.empty-state{color:var(--color-on-surface-secondary);font-style:italic;font-family:var(--font-body);font-size:.9rem;padding:calc(var(--spacing-unit) * 2);text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center}@media (max-width: 900px){.container{grid-template-columns:1fr}body{padding:calc(var(--spacing-unit) * 2)}header h1{font-size:2rem}.project-display{grid-template-columns:1fr}.project-list-container{border-right:none;border-bottom:1px solid var(--color-border);padding-right:0;padding-bottom:calc(var(--spacing-unit) * 3)}}.projects.flash{animation:flash-animation .7s ease-out}@keyframes flash-animation{0%{box-shadow:0 0 #81d4fa80}to{box-shadow:0 0 0 10px #81d4fa00}}.saved-prompt-item.newly-added{animation:highlight-new 1.5s ease-out}@keyframes highlight-new{0%{background-color:#81d4fa33}to{background-color:var(--color-background)}}#chat-panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);height:80vh;max-height:1000px;display:flex;flex-direction:column}.chat-container{flex-grow:1;overflow-y:auto;padding:calc(var(--spacing-unit) * 3);display:flex;flex-direction:column}#chat-messages{list-style:none;display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3);width:100%}.message-item{display:flex;max-width:80%;animation:fade-in .3s ease-out}.message-bubble{padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);border-radius:var(--border-radius);line-height:1.5}.message-bubble p{margin:0}.message-bubble p:not(:last-child){margin-bottom:var(--spacing-unit)}.message-bubble ul,.message-bubble ol{padding-left:calc(var(--spacing-unit) * 3)}.user-message{align-self:flex-end}.user-message .message-bubble{background-color:var(--color-primary);color:#111;border-bottom-right-radius:4px}.agent-message{align-self:flex-start}.agent-message .message-bubble{background-color:var(--color-agent-message);border:1px solid var(--color-border);border-bottom-left-radius:4px}.agent-message pre{background-color:#0000004d;padding:var(--spacing-unit);border-radius:8px;border:1px solid var(--color-border);font-size:.9rem}#typing-indicator{display:flex;gap:5px;align-items:center;padding:10px 20px;background-color:var(--color-agent-message);border:1px solid var(--color-border);border-radius:var(--border-radius);align-self:flex-start;margin-top:calc(var(--spacing-unit) * 2);border-bottom-left-radius:4px}#typing-indicator .dot{width:8px;height:8px;background-color:var(--color-on-surface-secondary);border-radius:50%;animation:typing-animation 1.4s infinite ease-in-out both}#typing-indicator .dot:nth-child(1){animation-delay:-.32s}#typing-indicator .dot:nth-child(2){animation-delay:-.16s}@keyframes typing-animation{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}#chat-form{display:flex;gap:calc(var(--spacing-unit) * 2);padding:calc(var(--spacing-unit) * 2);border-top:1px solid var(--color-border)}#chat-input{flex-grow:1;resize:none;font-size:1rem}#send-message-btn{flex-shrink:0;background-color:var(--color-primary);color:#000;padding:var(--spacing-unit);aspect-ratio:1/1;height:auto}#send-message-btn:hover{background-color:var(--color-primary-dark)}#send-message-btn:disabled{background-color:#555;cursor:not-allowed}
