@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:8px 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-avatar { display:grid; place-items:center; width:26px; height:26px; flex:none; margin-right:8px; overflow:hidden; border-radius:50%; color:#fff; background:var(--accent); font-size:11px; } .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 { display:grid; place-items:center; width:15px; height:15px; } .clear-symbol svg { display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .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); max-height:calc(100dvh - 44px); overflow-y:auto; 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:flex; align-items:center; gap:11px; width:100%; border:1px solid #e1e5e8; border-radius:7px; padding:11px 14px; text-align:left; background:#fff; } .picker-bot:hover { border-color:#9bd7bd; background:#f4fbf7; } .picker-bot-avatar-info { position:relative; flex:none; outline:none; cursor:help; } .picker-bot-avatar { display:grid; place-items:center; width:36px; height:36px; overflow:hidden; border-radius:50%; color:#fff; background:var(--accent); font-size:14px; } .picker-bot-details { min-width:0; } .picker-bot strong,.picker-bot span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .picker-bot strong { color:#3e4752; font-size:13px; font-weight:600; } .picker-bot span { margin-top:3px; color:#8c959f; font-size:11px; }
.model-default-button { display:grid; grid-template-columns:15px minmax(0, 1fr); align-items:center; width:100%; gap:7px; margin:0 0 10px; border:1px solid #e1e5e8; border-radius:6px; padding:9px 10px; color:#66717d; background:#fbfcfd; text-align:left; font-size:11px; } .model-default-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .model-default-button span { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .model-default-button small { grid-column:2; color:#9ba3ad; font-size:10px; } .model-default-button:hover,.model-default-button.active { border-color:#c9eadb; color:#187d59; background:#eff9f4; } .model-editor-hint { margin:0; color:#929ba5; font-size:11px; line-height:1.6; }
.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; } .settings-menu .menu-icon svg { display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.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; }
.chat-contact { display:flex; align-items:center; min-width:0; gap:10px; }
.chat-contact-avatar { display:grid; place-items:center; width:33px; height:33px; flex:none; border-radius:10px; color:#fff; background:var(--accent); font-size:17px; }
.chat-contact-avatar-info { position:relative; flex:none; outline:none; } .chat-contact-avatar-info.has-persona { cursor:help; }
.chat-contact strong,.chat-contact span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-contact strong { color:#36404b; font-size:13px; font-weight:600; }
#chatSignature { max-width:260px; margin-top:3px; color:#929ba5; font-size:10px; }
.persona-tooltip { position:absolute; z-index:3; top:calc(100% + 9px); left:0; width:max-content; max-width:min(360px, calc(100vw - 48px)); padding:8px 10px; visibility:hidden; opacity:0; transform:translateY(-3px); border-radius:6px; color:#fff; background:#27323d; box-shadow:0 8px 22px rgba(25,31,38,.18); font-size:11px; line-height:1.55; white-space:normal; pointer-events:none; transition:.16s ease; } .chat-contact-avatar-info.has-persona:hover .persona-tooltip,.chat-contact-avatar-info.has-persona:focus-visible .persona-tooltip,.picker-bot-avatar-info:hover .persona-tooltip,.picker-bot:focus-visible .persona-tooltip { visibility:visible; opacity:1; transform:translateY(0); }
.duo-remaining { margin-left:18px; border:1px solid #d9ccef; border-radius:6px; padding:6px 9px; color:#735ca8; background:#faf8ff; font-size:11px; font-weight:600; white-space:nowrap; }
.confirm-dialog { width:min(100%, 410px); border:1px solid #e3e7eb; border-radius:8px; padding:25px; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); }
.confirm-message { margin:-8px 0 0; color:#737d88; font-size:13px; line-height:1.7; }
.confirm-actions { justify-content:flex-end; gap:8px; }
.continue-duo { margin-left:18px; border:1px solid #bfead8; border-radius:6px; padding:6px 10px; color:var(--accent-dark); background:#effbf6; font-size:11px; font-weight:600; }
.continue-duo-dialog { width:min(100%, 420px); border:1px solid #e3e7eb; border-radius:8px; padding:25px; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); }
.continue-duo-form .bot-name-input { margin-bottom:0; }
.avatar img,.message-avatar img,.profile-avatar-preview img,.bot-avatar-preview img,.history-avatar img,.chat-contact-avatar img,.picker-bot-avatar img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.profile-dialog { width:min(100%, 460px); border:1px solid #e3e7eb; border-radius:8px; padding:25px; background:#fff; box-shadow:0 22px 65px rgba(22,29,37,.18); }
.profile-avatar-row { display:flex; align-items:center; gap:15px; margin:-4px 0 24px; }
.profile-avatar-preview { display:grid; place-items:center; width:68px; height:68px; flex:none; overflow:hidden; border-radius:50%; color:#fff; background:#27323d; font-size:24px; }
.upload-avatar-button { display:inline-flex; align-items:center; min-height:32px; cursor:pointer; }
.profile-avatar-row .text-button { margin-left:5px; padding:0 7px; }
.profile-avatar-hint { margin:7px 0 0; color:#929ba5; font-size:10px; line-height:1.5; }
.bot-avatar-row { display:flex; align-items:center; gap:13px; margin:-3px 0 18px; }
.bot-avatar-preview { display:grid; place-items:center; width:50px; height:50px; flex:none; overflow:hidden; border-radius:50%; color:#fff; background:var(--accent); font-size:17px; }
.bot-avatar-row .text-button { margin-left:5px; padding:0 7px; }
.history-duo-label { margin-top:20px; }
.add-bot { padding:0; }
.add-bot svg { display:block; width:15px; height:15px; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; fill:none; }
.message { max-width:860px; }
.composer-wrap { padding-inline:clamp(20px, 6vw, 104px); }
.composer { max-width:860px; }
.duo-notice { max-width:860px; }
.bubble.markdown { white-space:normal; }
.duo-body.markdown { display:block; white-space:normal; }
.bubble.markdown p,.duo-body.markdown p { margin:0 0 10px; }
.bubble.markdown p:last-child,.duo-body.markdown p:last-child { margin-bottom:0; }
.bubble.markdown h1,.bubble.markdown h2,.bubble.markdown h3,.bubble.markdown h4,.bubble.markdown h5,.bubble.markdown h6 { margin:0 0 10px; font-size:1em; line-height:1.5; letter-spacing:0; }
.bubble.markdown ul,.bubble.markdown ol,.duo-body.markdown ul,.duo-body.markdown ol { margin:0 0 10px; padding-left:20px; }
.bubble.markdown li,.duo-body.markdown li { margin:3px 0; }
.bubble.markdown blockquote,.duo-body.markdown blockquote { margin:0 0 10px; border-left:3px solid #b8c1c8; padding-left:10px; color:#68737d; }
.bubble.markdown pre,.duo-body.markdown pre { max-width:100%; margin:10px 0; overflow-x:auto; border:1px solid #dfe5e8; border-radius:6px; padding:10px; background:#eef2f4; }
.bubble.markdown code,.duo-body.markdown code { border-radius:4px; padding:2px 4px; color:#8b3e56; background:#e9edef; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.bubble.markdown pre code,.duo-body.markdown pre code { display:block; padding:0; color:#35404a; background:transparent; white-space:pre; }
.bubble.markdown pre .syntax-comment,.duo-body.markdown pre .syntax-comment { color:#7c8992; }
.bubble.markdown pre .syntax-string,.duo-body.markdown pre .syntax-string { color:#9a4f36; }
.bubble.markdown pre .syntax-number,.duo-body.markdown pre .syntax-number { color:#16705d; }
.bubble.markdown pre .syntax-keyword,.duo-body.markdown pre .syntax-keyword { color:#7651a5; font-weight:600; }
.bubble.markdown pre .syntax-type,.duo-body.markdown pre .syntax-type { color:#256b9b; }
.bubble.markdown pre .syntax-function,.duo-body.markdown pre .syntax-function { color:#8a5a17; }
.bubble.markdown a,.duo-body.markdown a { color:#087c58; text-decoration:underline; }
.duo-settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-top:18px; }
.duo-setting { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; border:1px solid #e1e5e8; border-radius:6px; padding:8px 10px; color:#4c5661; background:#fcfdfd; font-size:12px; font-weight:600; }
.duo-setting > div { display:flex; align-items:center; gap:5px; }
.duo-setting input { width:68px; border:1px solid #dce1e6; border-radius:5px; padding:6px 7px; color:#36404b; background:#fff; font-size:12px; outline:0; }
.duo-setting input:focus { border-color:#67caa7; box-shadow:0 0 0 3px rgba(22,166,115,.1); }
.duo-setting small { color:#8b949e; font-size:11px; font-weight:400; }
.render-markdown-toggle { margin-top:18px; }
@media (max-width:700px){ .app-shell{min-height:100dvh}.sidebar{display:none}.chat-header{height:62px;padding:0 18px}.mobile-settings{display:flex}.chat-contact{gap:7px;min-width:0}.chat-contact-avatar{width:28px;height:28px;border-radius:9px;font-size:14px}.chat-contact strong{max-width:105px;font-size:12px}#chatSignature{max-width:105px;font-size:9px}.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){ .continue-duo { margin-left:auto; padding:5px 7px; font-size:10px; } .continue-duo + .stop-duo + .mobile-settings { margin-left:9px; } }
@media (max-width:420px){ .connection { display:none; } }
@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; } }