@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root { --ink:#20252d; --muted:#8c939f; --line:#e9ebef; --bg:#f7f8fa; --accent:#16a673; --accent-dark:#10845a; --bubble:#edf8f3; }
* { box-sizing:border-box; } body { margin:0; overflow:hidden; color:var(--ink); background:var(--bg); font-family:'DM Sans','Noto Sans SC',sans-serif; } body.dialog-open { overflow:hidden; } button,textarea { font:inherit; } button { cursor:pointer; }
.app-shell { display:flex; height:100vh; height:100dvh; max-width:1440px; margin:auto; overflow:hidden; background:#fff; box-shadow:0 0 60px rgba(30,40,50,.04); }
.sidebar { width:286px; flex:none; display:flex; flex-direction:column; padding:34px 18px 20px; background:#fbfcfd; border-right:1px solid var(--line); }
.brand,.sidebar-foot,.mobile-brand { display:flex; align-items:center; gap:11px; } .brand-mark,.welcome-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; color:#fff; background:var(--accent); font-size:19px; } .brand strong { display:block; font-size:16px; letter-spacing:.1px; } .brand span,.sidebar-foot span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.new-chat { margin:42px 0 30px; border:1px solid #bfead8; border-radius:9px; padding:11px 14px; color:var(--accent-dark); background:#effbf6; text-align:left; font-size:13px; font-weight:600; } .new-chat span { margin-right:9px; font-size:18px; vertical-align:-1px; }
.side-nav-item { display:flex; align-items:center; gap:9px; width:100%; margin:-17px 0 29px; border:0; border-radius:8px; padding:10px 12px; color:#626c77; background:transparent; text-align:left; font-size:12px; font-weight:600; } .side-nav-item:hover { color:var(--accent-dark); background:#f1f7f4; } .side-nav-item span { color:#7f8994; font-size:16px; }
.history-label { margin:0 11px 10px; color:#adb2bb; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .history-item { display:flex; align-items:center; width:100%; border:0; border-radius:8px; padding:11px 10px; color:#5c6470; background:transparent; text-align:left; font-size:12px; } .history-item.active { color:var(--ink); background:#f0f3f4; font-weight:500; } .history-dot { width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--accent); } .history-duo-dot { display:grid; place-items:center; width:17px; height:17px; margin-right:7px; border-radius:5px; color:#fff; background:#806ab9; font-size:10px; } .history-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .more { margin-left:auto; color:#adb2bb; letter-spacing:2px; } .history-empty { padding:11px 10px; color:#adb2bb; font-size:11px; }
.sidebar-foot { margin-top:auto; padding:17px 9px 0; border-top:1px solid var(--line); } .avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#fff; background:#27323d; font-size:12px; } .sidebar-foot strong { display:block; font-size:12px; }
.chat-panel { display:flex; min-width:0; min-height:0; flex:1; flex-direction:column; background:#fff; } .chat-header { display:flex; align-items:center; height:74px; flex:none; padding:0 42px; border-bottom:1px solid var(--line); } .connection { margin-left:auto; color:#8d96a1; font-size:11px; } .connection i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#22b77d; } .icon-button { margin-left:22px; border:0; color:#9ba2ad; background:none; font-size:20px; } .clear-button { display:flex; align-items:center; gap:5px; margin-left:22px; border:1px solid #e3e6ea; border-radius:6px; padding:6px 9px; color:#7f8994; background:#fff; font-size:11px; } .clear-button:hover { border-color:#e2bdbd; color:#b55c5c; background:#fffafa; } .clear-symbol { font-size:16px; line-height:1; } .mobile-clear-label { display:none; } .stop-duo { margin-left:18px; border:1px solid #efc4c4; border-radius:6px; padding:6px 10px; color:#b25353; background:#fffafa; font-size:11px; font-weight:600; }
.mobile-brand,.mobile-settings { display:none; } .messages { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:54px clamp(20px, 8vw, 130px) 40px; } .welcome { max-width:600px; margin:8vh auto 0; text-align:center; } .welcome-icon { width:46px; height:46px; margin:0 auto 22px; border-radius:15px; font-size:25px; } h1 { margin:0 0 12px; font-size:29px; letter-spacing:-.02em; } .welcome p { max-width:460px; margin:0 auto; color:#8e96a1; font-size:13px; line-height:1.8; } .suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:29px; } .suggestions button { border:1px solid var(--line); border-radius:20px; padding:9px 13px; color:#66707c; background:#fff; font-size:12px; } .suggestions span { margin-left:7px; color:var(--accent); }
.message { display:flex; gap:11px; max-width:720px; margin:0 auto 24px; } .message.user { flex-direction:row-reverse; } .message-avatar { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; color:#fff; background:var(--accent); font-size:12px; } .message.user .message-avatar { background:#27323d; } .bubble { max-width:74%; padding:12px 15px; border-radius:4px 14px 14px 14px; color:#3e4752; background:#f2f4f6; font-size:13px; line-height:1.7; white-space:pre-wrap; } .message.user .bubble { border-radius:14px 4px 14px 14px; color:#fff; background:var(--accent); }
.composer-wrap { flex:none; padding:0 clamp(20px, 8vw, 130px) 26px; } .composer { max-width:720px; margin:auto; border:1px solid #dfe4e8; border-radius:12px; padding:10px 11px 8px 15px; background:#fff; box-shadow:0 5px 20px rgba(35,45,55,.04); } textarea { display:block; width:100%; min-height:26px; max-height:130px; resize:none; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; line-height:1.6; } textarea::placeholder { color:#a6adb7; } .composer-actions { display:flex; align-items:center; justify-content:space-between; margin-top:6px; } .hint { color:#b0b6be; font-size:10px; } .send-button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; color:#fff; background:var(--accent); font-size:18px; line-height:1; } .send-button:disabled { opacity:.45; cursor:not-allowed; } .disclaimer { margin-top:9px; color:#b8bdc5; text-align:center; font-size:10px; }
.typing { display:flex; align-items:center; gap:4px; height:20px; } .typing span { width:5px; height:5px; border-radius:50%; background:#aab3bd; animation:bounce 1.2s infinite ease-in-out; } .typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s} @keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.dialog-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:22px; background:rgba(22,29,37,.3); } .dialog-backdrop[hidden] { display:none; } .settings-dialog { width:min(100%, 590px); border:1px solid #e3e7eb; border-radius:8px; padding:25px; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); } .dialog-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; } .dialog-kicker { display:block; margin-bottom:5px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.06em; } .dialog-header h2 { margin:0; font-size:20px; font-weight:600; } .close-button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:5px; color:#87909b; background:transparent; font-size:25px; line-height:1; } .close-button:hover { background:#f1f3f5; color:#4e5864; } .prompt-label { display:block; margin-bottom:9px; color:#4c5661; font-size:12px; font-weight:600; } .prompt-editor { min-height:215px; padding:12px; border:1px solid #dce1e6; border-radius:6px; background:#fcfdfd; font-size:13px; line-height:1.7; } .prompt-editor:focus { border-color:#67caa7; box-shadow:0 0 0 3px rgba(22,166,115,.1); } .prompt-meta { display:flex; justify-content:space-between; margin-top:8px; color:#99a1aa; font-size:10px; } .dialog-actions { display:flex; align-items:center; justify-content:space-between; margin-top:26px; } .dialog-actions > div { display:flex; gap:8px; } .text-button,.secondary-button,.primary-button { min-height:34px; border-radius:6px; padding:0 12px; font-size:12px; font-weight:600; } .text-button { border:0; color:#79838e; background:transparent; } .secondary-button { border:1px solid #dce1e5; color:#5d6772; background:#fff; } .primary-button { border:1px solid var(--accent); color:#fff; background:var(--accent); } .primary-button:hover { background:var(--accent-dark); } .toast { position:fixed; z-index:20; bottom:25px; left:50%; transform:translate(-50%, 16px); visibility:hidden; opacity:0; border-radius:6px; padding:10px 14px; color:#fff; background:#27323d; box-shadow:0 8px 24px rgba(25,31,38,.16); font-size:12px; transition:.18s ease; } .toast.show { visibility:visible; opacity:1; transform:translate(-50%, 0); }
.bot-dialog { width:min(100%, 840px); max-height:min(760px, calc(100dvh - 44px)); border:1px solid #e3e7eb; border-radius:8px; padding:25px; overflow:hidden; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); } .bot-layout { display:grid; grid-template-columns:220px minmax(0, 1fr); min-height:430px; border-top:1px solid var(--line); } .bot-list-pane { min-width:0; padding:18px 15px 18px 0; border-right:1px solid var(--line); } .pane-title { display:flex; align-items:center; justify-content:space-between; margin:0 5px 11px; color:#8b949f; font-size:11px; font-weight:700; letter-spacing:.06em; } .add-bot { display:grid; place-items:center; width:25px; height:25px; border:1px solid #bfead8; border-radius:5px; color:var(--accent-dark); background:#effbf6; font-size:18px; line-height:1; } .bot-list { display:grid; gap:5px; max-height:400px; overflow:auto; } .bot-list-item { display:grid; gap:3px; width:100%; border:1px solid transparent; border-radius:6px; padding:10px; text-align:left; background:transparent; } .bot-list-item:hover { background:#f6f8f8; } .bot-list-item.selected { border-color:#c9eadb; background:#eff9f4; } .bot-list-item strong { overflow:hidden; color:#3f4853; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .bot-list-item span { overflow:hidden; color:#9ba3ad; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .bot-editor { min-width:0; max-height:520px; padding:18px 0 2px 23px; overflow-y:auto; } .bot-name-input,.personality-select,.notes-editor { width:100%; border:1px solid #dce1e6; border-radius:6px; padding:9px 11px; color:#36404b; background:#fff; font-size:13px; outline:0; } .personality-select { margin-bottom:18px; } .bot-name-input { margin-bottom:18px; } .bot-name-input:focus,.personality-select:focus,.notes-editor:focus { border-color:#67caa7; box-shadow:0 0 0 3px rgba(22,166,115,.1); } .generated-prompt { min-height:130px; margin-bottom:18px; color:#65707b; background:#f7faf8; resize:none; } .notes-editor { min-height:76px; resize:vertical; line-height:1.6; } .bot-editor .dialog-actions { margin-top:18px; } .danger-button { min-height:34px; border:1px solid #efd0d0; border-radius:6px; padding:0 12px; color:#b25b5b; background:#fffafa; font-size:12px; font-weight:600; } .danger-button:disabled { visibility:hidden; } .picker-dialog { width:min(100%, 520px); border:1px solid #e3e7eb; border-radius:8px; padding:25px; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); } .bot-picker-list { display:grid; gap:9px; } .picker-bot { display:grid; gap:4px; width:100%; border:1px solid #e1e5e8; border-radius:7px; padding:14px 15px; text-align:left; background:#fff; } .picker-bot:hover { border-color:#9bd7bd; background:#f4fbf7; } .picker-bot strong { color:#3e4752; font-size:13px; font-weight:600; } .picker-bot span { color:#8c959f; font-size:11px; }
.preset-toggle { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:#4c5661; font-size:12px; cursor:pointer; } .preset-toggle input { position:absolute; opacity:0; } .preset-toggle span { position:relative; width:32px; height:18px; border-radius:10px; background:#c7cdd4; transition:.18s ease; } .preset-toggle span::after { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff; content:''; transition:.18s ease; } .preset-toggle input:checked + span { background:var(--accent); } .preset-toggle input:checked + span::after { transform:translateX(14px); } .preset-toggle input:focus-visible + span { box-shadow:0 0 0 3px rgba(22,166,115,.18); } #presetFields[hidden] { display:none; }
.settings-menu { position:fixed; z-index:9; width:154px; border:1px solid #e1e5e8; border-radius:7px; padding:5px; background:#fff; box-shadow:0 10px 30px rgba(30,40,50,.14); } .settings-menu[hidden] { display:none; } .settings-menu button { display:flex; align-items:center; width:100%; gap:8px; border:0; border-radius:5px; padding:9px; color:#4e5864; background:transparent; text-align:left; font-size:12px; } .settings-menu button:hover { color:#187d59; background:#f0f9f4; } .settings-menu button span { display:grid; place-items:center; width:15px; color:#62af8e; font-size:14px; }
.duo-form .personality-select { margin-bottom:17px; } .duo-form .notes-editor { min-height:94px; } .duo-hint { margin:9px 0 0; color:#929ba5; font-size:11px; line-height:1.6; } .duo-hint.error { color:#b25353; } .duo-notice { max-width:720px; margin:0 auto 22px; color:#84909b; text-align:center; font-size:11px; } .duo-message { align-items:flex-start; } .duo-message .message-avatar { background:#755db5; } .duo-content { max-width:74%; } .duo-message .bubble { max-width:100%; } .duo-speaker { display:block; margin:0 0 5px 2px; color:#79828e; font-size:10px; font-weight:700; } .duo-right { flex-direction:row-reverse; } .duo-right .message-avatar { background:#c46d50; } .duo-right .bubble { border-radius:14px 4px 14px 14px; background:#fff4ee; } .duo-right .duo-speaker { margin-right:2px; color:#a7654e; text-align:right; } .duo-typing { display:flex; align-items:center; gap:6px; height:20px; color:#939ca6; font-size:11px; } .duo-typing .typing { height:auto; }
.duo-picker-button { display:flex; align-items:center; width:100%; gap:10px; margin-bottom:12px; border:1px solid #cfe5da; border-radius:7px; padding:12px 14px; color:#3d6654; background:#f1faf5; text-align:left; } .duo-picker-button > span { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; color:#fff; background:#806ab9; font-size:15px; } .duo-picker-button strong,.duo-picker-button small { display:block; } .duo-picker-button strong { font-size:12px; } .duo-picker-button small { margin-top:3px; color:#84958c; font-size:10px; }
.global-prompt-description { margin:-10px 0 22px; color:#8b949e; font-size:12px; line-height:1.6; }
@media (max-width:700px){ .app-shell{min-height:100dvh}.sidebar{display:none}.chat-header{height:62px;padding:0 18px}.mobile-brand,.mobile-settings{display:flex}.mobile-brand .brand-mark{width:29px;height:29px;border-radius:9px;font-size:15px}.mobile-brand strong{font-size:14px}.connection{font-size:10px}.icon-button{margin-left:15px}.clear-button{margin-left:12px;padding:5px 7px}.desktop-clear-label{display:none}.mobile-clear-label{display:inline}.messages{padding:30px 18px 24px}.welcome{margin-top:9vh}.welcome-icon{width:42px;height:42px;font-size:22px}h1{font-size:25px}.welcome p{font-size:12px}.suggestions{gap:7px}.suggestions button{font-size:11px;padding:8px 11px}.composer-wrap{padding:0 14px 18px}.hint{font-size:9px}.bubble{max-width:84%;font-size:12px}.message{gap:8px;margin-bottom:19px} }
@media (max-width:700px){ .stop-duo { margin-left:auto; padding:5px 7px; font-size:10px; } .stop-duo + .mobile-settings { margin-left:9px; } }
@media (max-width:700px){ .settings-dialog { padding:20px 17px; } .prompt-editor { min-height:185px; } .prompt-meta { gap:12px; } .dialog-actions { align-items:flex-end; } .dialog-actions > div { flex-direction:column-reverse; } }
@media (max-width:700px){ .bot-dialog,.picker-dialog { max-height:calc(100dvh - 28px); padding:20px 17px; } .bot-dialog .dialog-header,.picker-dialog .dialog-header { margin-bottom:17px; } .bot-layout { grid-template-columns:1fr; min-height:0; } .bot-list-pane { padding:0 0 14px; border-right:0; border-bottom:1px solid var(--line); } .bot-list { display:flex; max-height:none; overflow-x:auto; } .bot-list-item { min-width:134px; } .bot-editor { max-height:calc(100dvh - 300px); padding:16px 0 0; } .generated-prompt { min-height:110px; } .bot-editor .dialog-actions { flex-direction:row; } .bot-editor .dialog-actions > div { flex-direction:row; } }