:root{--bg: #0d0a07;--bg2: #131008;--panel: #1a1410;--panel2: #211a12;--border: #3a2e1e;--border2: #4a3a25;--gold: #c9a84c;--gold2: #e8c97a;--gold-dim: #7a6330;--red: #8b2020;--red2: #c43a3a;--text: #d4c5a9;--text-dim: #8a7a60;--text-bright: #ede0c4;--accent: #4a7c9e;--glow: rgba(201,168,76,.15)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:IM Fell English,serif;height:100vh;overflow:hidden;display:flex;flex-direction:column}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:1000;opacity:.6}header{background:linear-gradient(180deg,#0a0705 0%,var(--bg) 100%);border-bottom:1px solid var(--border2);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative}header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),var(--gold),var(--gold-dim),transparent)}.logo{font-family:Cinzel Decorative,cursive;font-size:1.1rem;color:var(--gold);text-shadow:0 0 20px rgba(201,168,76,.4);letter-spacing:2px}.logo span{color:var(--red2)}.header-right{display:flex;align-items:center;gap:12px}.api-input{background:var(--panel);border:1px solid var(--border2);color:var(--text);font-family:Cinzel,serif;font-size:.7rem;padding:5px 10px;border-radius:3px;letter-spacing:1px}.api-input::placeholder{color:var(--text-dim)}.api-input:focus{outline:none;border-color:var(--gold-dim)}select.api-input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a7a60'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}select.api-input option{background:#1a1410;color:#d4c5a9}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);transition:all .3s}.status-dot.active{background:#4a9a4a;box-shadow:0 0 6px #4a9a4a;animation:pulse-dot 2s infinite}.status-dot.thinking{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse-dot .6s infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.main{display:grid;grid-template-columns:1fr minmax(320px,30%);flex:1;min-height:0;overflow:hidden;gap:0}.output-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0;border-right:1px solid var(--border);position:relative}.output-content{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-dim);text-align:center;gap:12px}.empty-state .rune{font-size:3rem;opacity:.3;filter:sepia(1)}.empty-state p{font-style:italic;font-size:.95rem;max-width:300px;line-height:1.6}.thinking-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--text-dim);font-style:italic;font-size:.85rem;animation:fadeSlideIn .3s ease}.dots span{display:inline-block;width:5px;height:5px;background:var(--gold-dim);border-radius:50%;animation:dotBounce 1.2s infinite;margin:0 1px}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}.input-panel{display:flex;flex-direction:column;background:var(--bg2);overflow:hidden;min-height:0}.input-section{flex:1;display:flex;flex-direction:column;padding:16px;gap:10px;overflow:hidden}.section-label{font-family:Cinzel,serif;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:8px}.section-label:after{content:"";flex:1;height:1px;background:var(--border)}.btn{font-family:Cinzel,serif;font-size:.65rem;letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border2);background:var(--panel);color:var(--text);cursor:pointer;border-radius:3px;transition:all .2s;flex-shrink:0}.btn:hover{border-color:var(--gold-dim);color:var(--gold)}.btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.btn.primary{background:var(--red);border-color:var(--red2);color:#fff}.btn.primary:hover{background:var(--red2)}.btn.primary:disabled{background:var(--panel);border-color:var(--border);color:var(--text-dim)}.btn.active-mic{background:#8b2020;border-color:#e04040;color:#fff;animation:pulse-red 1s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 4px #c8282866}50%{box-shadow:0 0 12px #c82828cc}}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick-btn{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);font-family:IM Fell English,serif;font-size:.75rem;padding:6px 8px;border-radius:3px;cursor:pointer;transition:all .2s;text-align:left;line-height:1.3}.quick-btn:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--panel2)}.history-panel{border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0}.history-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.history-item{font-size:.75rem;color:var(--text-dim);padding:3px 6px;border-radius:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s}.history-item:hover{background:var(--panel);color:var(--text)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.orn{text-align:center;color:var(--gold-dim);font-size:.7rem;letter-spacing:4px;margin:4px 0;opacity:.6}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.key-missing{border-color:var(--gold)!important;animation:pulse-key 1.2s infinite}@keyframes pulse-key{0%,to{box-shadow:0 0 #c9a84c00;border-color:var(--border2)}50%{box-shadow:0 0 10px #c9a84c99;border-color:var(--gold)}}.key-banner{background:#c9a84c1a;border-bottom:1px solid var(--gold);color:var(--text-bright);font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.5px;padding:8px 20px;text-align:center;flex-shrink:0}.key-banner strong{color:var(--gold2)}
