@import "https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Geologica:wght,CRSV@100..900,0&display=swap";@import "https://fonts.googleapis.com/css2?&family=Nunito:wght@400;700&display=swap";*{font-family:Nunito,cursive}h1,h2,h3{font-family:Geologica}:root{--bg:#fff;--bg-sidebar:#fff;--bg-chat:#fff;--bg-input-area:#fff;--bg-volume:#fff;--bg-bot-settings:#fff;--border:#2c2c2e;--text:#000;--text-muted:#636366;--input-bg:#dfdfdf;--input-border:#3a3a3c;--input-placeholder:#636366;--btn-disabled-bg:#3a3a3c;--model-btn-bg:#fff;--model-btn-text:#000;--model-btn-border:#3a3a3c;--status-color:green;--accent:#464646;--secondary-accent:#8c8c8c;--purple:#5134b7;--purple-anim:#a73ad9;--a-tag:#2563aa}@media (prefers-color-scheme:dark){:root{--bg:#1c1c1e;--bg-sidebar:#1c1c1e;--bg-chat:#1c1c1e;--bg-input-area:#1c1c1e;--bg-volume:#1c1c1e;--bg-bot-settings:#1c1c1e;--border:#48484a;--text:#fff;--text-muted:#aeaeb2;--input-bg:#2c2c2e;--input-border:#636366;--input-placeholder:#8e8e93;--btn-disabled-bg:#48484a;--model-btn-bg:#2c2c2e;--model-btn-text:#fff;--model-btn-border:#636366;--status-color:#30d158;--accent:#2d2d2d;--secondary-accent:#5c5c5c;--purple:#5134b7;--purple-anim:#da8fff;--a-tag:#33cfeb}}a{color:var(--a-tag)}.container{background:var(--bg);min-height:100vh;color:var(--text);display:flex}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);width:150px;min-height:100vh;max-height:100%;color:var(--model-btn-text);z-index:5;padding:20px;transition:transform .6s;position:fixed;overflow-y:auto;transform:translate(0)}.sidebar.collapsed{background:var(--bg-sidebar);border-right:1px solid var(--border);width:150px;min-height:100vh;max-height:100%;color:var(--model-btn-text);z-index:5;padding:20px;overflow-y:auto;transform:translate(-200px)}.collapse-btn{z-index:6;background:0 0;border:none;animation:.2s forwards shrink;position:fixed;top:10px;left:10px}.collapse-btn:hover{animation:.2s forwards grow}html{background:var(--bg)}.chat-container{flex-direction:column;flex:1;justify-content:flex-end;width:100%;max-width:none;display:flex}.chat{background:var(--bg-chat);flex-direction:column;gap:6px;height:70vh;padding:12px;display:flex;overflow-y:auto}.info-page{text-align:center;flex-direction:column;padding-inline:35vw}.info-page p{margin-block:3px}.settings-input{flex:unset;border-radius:12px;width:180px;padding:4px 10px;font-size:12px}.settings-btn{background:var(--accent);color:#fff;border-radius:12px;width:auto;height:auto;padding:4px 10px;font-size:11px}.bot-settings{background:var(--bg-bot-settings);gap:8px;padding:0 12px 8px;display:flex}.status{color:var(--status-color);margin:8px 12px;font-size:14px;font-weight:700}.bubble-row{width:100%;display:flex}.bubble-row.user{justify-content:flex-end}.bubble-row.TariqGPT{justify-content:flex-start}.bubble{word-break:break-word;border-radius:18px;max-width:65%;padding:10px 14px;font-size:15px;line-height:1.4}.user .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px;max-width:45%;margin-left:auto}.TariqGPT .bubble{background:var(--purple);color:#fff;border-bottom-left-radius:4px;max-width:45%}.volume-control{background:var(--bg-volume);box-sizing:border-box;align-items:center;gap:8px;width:20%;height:auto;padding:0;padding-inline:10px;position:relative}#vol-slider{appearance:none;box-sizing:border-box;flex:1;align-self:center;width:100%;margin-inline:5px;padding:5px 8px}#vol-slider::-webkit-slider-thumb{appearance:none;background:var(--secondary-accent);cursor:pointer;border-radius:50%;width:16px;height:16px;margin-top:-6px}#vol-slider::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;height:4px}#vol-num{color:var(--text);width:120px;margin-inline:5px;font-family:monospace;font-size:12px;font-weight:500;display:block;overflow:visible}.input{background:var(--bg-input-area);border-top:1px solid var(--border);border-radius:24px;align-items:center;gap:8px;padding:8px 12px;display:flex}input{background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:20px;outline:none;flex:1;padding:8px 14px;font-size:15px}input::placeholder{color:var(--input-placeholder)}button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer;border:2px solid;border-radius:25px;justify-content:center;align-items:center;width:auto;height:24px;font-size:12px;display:flex}button:hover{background:var(--secondary-accent)}.action-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;width:auto;height:12px;padding:10px;font-size:12px}.action-txt{color:var(--text-muted);background:0 0;border:none;width:auto;height:8px;padding:5px;font-size:8px}.action-txt.TariqGPT{color:var(--text-muted);background:0 0;border:none;width:auto;height:12px;padding:10px;font-size:12px}.action-txt.user{color:var(--text-muted);background:0 0;border:none;width:auto;height:12px;margin-left:auto;padding:10px;font-size:12px}.action-btn.TariqGPT{color:var(--text-muted);cursor:pointer;background:0 0;border:none;width:auto;height:12px;padding:10px;font-size:12px;animation:.3 backwards gray-to-purple-color}.action-btn.user{color:var(--text-muted);cursor:pointer;background:0 0;border:none;width:auto;height:12px;margin-left:auto;padding:10px;font-size:12px;animation:.3 backwards gray-to-purple-color}.action-btn:hover{animation:2s infinite gray-to-purple-color,.2s forwards stretch}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes stretch{0%{transform:scale(1)}to{transform:scale(1.2,.8)}}@keyframes unstretch{0%{transform:scale(1.2,.8)}to{transform:scale(1)}}button:disabled{background:var(--btn-disabled-bg)}@keyframes white-to-purple{0%{background-color:var(--model-btn-bg)}50%{background-color:var(--purple-anim)}to{background-color:var(--model-btn-bg)}}@keyframes gray-to-purple-color{0%{color:var(--text-muted)}50%{color:var(--purple-anim)}to{color:var(--text-muted)}}@keyframes grow{0%{transform:scale(1)}to{transform:scale(1.15)}}@keyframes shrink{0%{transform:scale(1.15)}to{transform:scale(1)}}.model-btn{background:var(--model-btn-bg);width:100%;height:auto;color:var(--model-btn-text);border:1px solid var(--model-btn-border);cursor:pointer;border-radius:12px;margin-bottom:8px;padding:8px 12px;font-size:14px;animation:.5s forwards shrink;display:block}.model-btn:hover{cursor:pointer;animation:2s infinite white-to-purple,.2s forwards grow}.info{color:red;padding-bottom:25px;font-size:10px;display:inline}.info a{font-size:10px}.fun-fact{color:var(--status-color)}html,body{margin:0;padding:0;overflow-y:auto!important}