chatbot.js
14 hours ago
i18n.js
1 day ago
index.js
14 hours ago
vendor.js
1 day ago
workspace.css
1 day ago
workspace.js
14 hours ago
workspace.css
1007 lines
| 1 | /* ============ AI Engine — Workspace ============ |
| 2 | Design reference: labs/workspace-mock.html (approved 2026-07-24). |
| 3 | Theme + accent are set as CSS variables on #mwai-workspace by the app. */ |
| 4 | |
| 5 | #mwai-workspace[data-theme="dark"] { |
| 6 | --bg: #17181c; --bg-deep: #121317; --bg-rail: #0e0f13; --bg-raise: #1e2026; --bg-hover: #23252c; |
| 7 | --ink: #e9e9ec; --ink-soft: #9b9da6; --ink-faint: #62646d; --hairline: #2a2c33; |
| 8 | --accent: hsl(217 85% 62%); --accent-ink: #ffffff; --accent-soft: hsl(217 85% 62% / 0.14); |
| 9 | --user-bubble: #232733; --code-bg: #101116; |
| 10 | --shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55); |
| 11 | --composer-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.5); |
| 12 | } |
| 13 | #mwai-workspace[data-theme="light"] { |
| 14 | --bg: #faf9f6; --bg-deep: #f2f0ec; --bg-rail: #edeae4; --bg-raise: #ffffff; --bg-hover: #eceae4; |
| 15 | --ink: #1d1e22; --ink-soft: #6d6e75; --ink-faint: #a4a5ab; --hairline: #e3e1da; |
| 16 | --accent: hsl(217 80% 42%); --accent-ink: #ffffff; --accent-soft: hsl(217 80% 42% / 0.10); |
| 17 | --user-bubble: #eef0f4; --code-bg: #16171b; |
| 18 | --shadow: 0 18px 50px -18px rgba(60, 50, 20, 0.25); |
| 19 | --composer-shadow: 0 10px 34px -10px rgba(60, 50, 20, 0.18); |
| 20 | } |
| 21 | |
| 22 | #mwai-workspace { |
| 23 | position: fixed; inset: 0; z-index: 99999; |
| 24 | font-family: "-apple-system-body", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; |
| 25 | background: var(--bg); color: var(--ink); |
| 26 | font-size: 14.5px; letter-spacing: 0.1px; |
| 27 | transition: background 0.35s ease, color 0.35s ease; |
| 28 | } |
| 29 | #mwai-workspace * { margin: 0; padding: 0; box-sizing: border-box; } |
| 30 | #mwai-workspace::after { |
| 31 | content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; z-index: 5; |
| 32 | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.028'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| 33 | } |
| 34 | |
| 35 | #mwai-workspace .mwai-ws { display: flex; height: 100%; } |
| 36 | |
| 37 | /* ================= Rail ================= */ |
| 38 | #mwai-workspace .mwai-ws-rail { |
| 39 | width: 64px; min-width: 64px; height: 100%; |
| 40 | background: var(--bg-rail); border-right: 1px solid var(--hairline); |
| 41 | display: flex; flex-direction: column; align-items: center; |
| 42 | padding: 15px 0 12px; gap: 5px; |
| 43 | transition: background 0.35s ease; |
| 44 | } |
| 45 | #mwai-workspace .mwai-ws-rail-logo { margin-bottom: 4px; } |
| 46 | #mwai-workspace .mwai-ws-rail-logo img { width: 30px; height: auto; display: block; } |
| 47 | #mwai-workspace .mwai-ws-rail-new { |
| 48 | width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer; |
| 49 | background: var(--accent); color: var(--accent-ink); |
| 50 | display: grid; place-items: center; margin: 6px 0 10px; |
| 51 | transition: transform 0.15s ease, filter 0.2s ease; |
| 52 | } |
| 53 | #mwai-workspace .mwai-ws-rail-new:hover { filter: brightness(1.08); transform: translateY(-1px); } |
| 54 | #mwai-workspace .mwai-ws-rail-new svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; } |
| 55 | #mwai-workspace .mwai-ws-rail-item { |
| 56 | width: 54px; padding: 8px 0 6px; border-radius: 10px; border: none; cursor: pointer; |
| 57 | background: transparent; color: var(--ink-soft); text-decoration: none; |
| 58 | display: flex; flex-direction: column; align-items: center; gap: 4px; |
| 59 | transition: background 0.15s ease, color 0.15s ease; |
| 60 | } |
| 61 | #mwai-workspace .mwai-ws-rail-item:hover { background: var(--bg-hover); color: var(--ink); } |
| 62 | #mwai-workspace .mwai-ws-rail-item.on { background: var(--accent-soft); color: var(--accent); } |
| 63 | #mwai-workspace .mwai-ws-rail-item svg { |
| 64 | width: 19px; height: 19px; stroke: currentColor; fill: none; |
| 65 | stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; |
| 66 | } |
| 67 | #mwai-workspace .mwai-ws-rail-ico { position: relative; display: grid; place-items: center; } |
| 68 | #mwai-workspace .mwai-ws-rail-label { font-size: 10px; font-weight: 500; letter-spacing: 0.2px; } |
| 69 | #mwai-workspace .mwai-ws-rail-soon { |
| 70 | position: absolute; top: -7px; right: -20px; |
| 71 | font-family: "Spline Sans Mono", monospace; font-size: 7px; |
| 72 | letter-spacing: 0.6px; text-transform: uppercase; |
| 73 | background: var(--bg-hover); color: var(--ink-faint); |
| 74 | border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 4px; |
| 75 | } |
| 76 | #mwai-workspace .mwai-ws-rail-item.on .mwai-ws-rail-soon { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } |
| 77 | #mwai-workspace .mwai-ws-rail-flex { flex: 1; } |
| 78 | |
| 79 | /* ================= Sidebar (panel) ================= */ |
| 80 | #mwai-workspace .mwai-ws-sidebar { |
| 81 | width: 272px; min-width: 0; height: 100%; overflow: hidden; |
| 82 | background: var(--bg-deep); border-right: 1px solid var(--hairline); |
| 83 | transition: background 0.35s ease, width 0.25s ease, border-color 0.25s ease; |
| 84 | } |
| 85 | #mwai-workspace .mwai-ws-sidebar.collapsed { width: 0; border-right-color: transparent; } |
| 86 | #mwai-workspace .mwai-ws-sidebar-inner { |
| 87 | width: 272px; min-width: 272px; height: 100%; |
| 88 | display: flex; flex-direction: column; |
| 89 | } |
| 90 | #mwai-workspace .mwai-ws-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; } |
| 91 | #mwai-workspace .mwai-ws-brand-text { display: flex; flex-direction: column; gap: 1px; } |
| 92 | #mwai-workspace .mwai-ws-brand-name { |
| 93 | font-family: "Spline Sans Mono", monospace; |
| 94 | font-weight: 600; font-size: 15px; letter-spacing: 0.2px; line-height: 1.1; |
| 95 | } |
| 96 | #mwai-workspace .mwai-ws-brand-sub { |
| 97 | font-size: 8.5px; color: var(--ink-faint); |
| 98 | letter-spacing: 2.3px; text-transform: uppercase; line-height: 12px; |
| 99 | } |
| 100 | #mwai-workspace .mwai-ws-back { |
| 101 | margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: none; |
| 102 | background: transparent; color: var(--ink-faint); cursor: pointer; |
| 103 | display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease; |
| 104 | text-decoration: none; |
| 105 | } |
| 106 | #mwai-workspace .mwai-ws-back:hover { background: var(--bg-hover); color: var(--ink); } |
| 107 | #mwai-workspace .mwai-ws-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; } |
| 108 | |
| 109 | #mwai-workspace .mwai-ws-new-chat { |
| 110 | margin: 4px 16px 10px; display: flex; align-items: center; justify-content: center; |
| 111 | padding: 10px 14px; border-radius: 10px; |
| 112 | background: var(--accent); color: var(--accent-ink); |
| 113 | font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; |
| 114 | border: none; transition: transform 0.15s ease, filter 0.2s ease; |
| 115 | } |
| 116 | #mwai-workspace .mwai-ws-new-chat:hover { filter: brightness(1.06); transform: translateY(-1px); } |
| 117 | |
| 118 | #mwai-workspace .mwai-ws-search { margin: 0 16px 14px; position: relative; } |
| 119 | #mwai-workspace .mwai-ws-search input { |
| 120 | width: 100%; padding: 8px 12px 8px 30px; |
| 121 | background: var(--bg); border: 1px solid var(--hairline); border-radius: 9px; |
| 122 | color: var(--ink); font-family: inherit; font-size: 13px; outline: none; |
| 123 | transition: border-color 0.2s ease; |
| 124 | } |
| 125 | #mwai-workspace .mwai-ws-search input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); box-shadow: none; } |
| 126 | #mwai-workspace .mwai-ws-search input::placeholder { color: var(--ink-faint); } |
| 127 | #mwai-workspace .mwai-ws-search svg { |
| 128 | position: absolute; left: 10px; top: 9px; width: 13px; height: 13px; |
| 129 | stroke: var(--ink-faint); fill: none; stroke-width: 2; |
| 130 | } |
| 131 | |
| 132 | #mwai-workspace .mwai-ws-convs { flex: 1; overflow-y: auto; padding: 0 10px 10px; } |
| 133 | #mwai-workspace .mwai-ws-convs::-webkit-scrollbar { width: 8px; } |
| 134 | #mwai-workspace .mwai-ws-convs::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; } |
| 135 | |
| 136 | #mwai-workspace .mwai-ws-group-label { |
| 137 | font-family: "Spline Sans Mono", monospace; |
| 138 | font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; |
| 139 | color: var(--ink-faint); padding: 16px 10px 7px; |
| 140 | } |
| 141 | #mwai-workspace .mwai-ws-conv { |
| 142 | position: relative; |
| 143 | display: flex; flex-direction: column; gap: 3px; |
| 144 | padding: 9px 10px; border-radius: 9px; cursor: pointer; |
| 145 | margin-bottom: 3px; |
| 146 | transition: background 0.15s ease; |
| 147 | } |
| 148 | |
| 149 | /* ---- Drag & drop conversations ---- */ |
| 150 | #mwai-workspace .mwai-ws-conv[draggable="true"] { cursor: grab; } |
| 151 | /* Text selection must not compete with starting a drag. */ |
| 152 | #mwai-workspace .mwai-ws-conv { user-select: none; -webkit-user-select: none; } |
| 153 | #mwai-workspace .mwai-ws-conv-edit { user-select: text; -webkit-user-select: text; } |
| 154 | #mwai-workspace .mwai-ws-conv.dragging { opacity: 0.4; } |
| 155 | #mwai-workspace .mwai-ws-convs.is-dragging .mwai-ws-cgroup, |
| 156 | #mwai-workspace .mwai-ws-convs.is-dragging .mwai-ws-folder-group { |
| 157 | border-radius: 10px; transition: box-shadow 0.15s ease, background 0.15s ease; |
| 158 | } |
| 159 | #mwai-workspace .mwai-ws-cgroup.drop-target, |
| 160 | #mwai-workspace .mwai-ws-folder-group.drop-target { |
| 161 | background: var(--accent-soft); |
| 162 | box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); |
| 163 | } |
| 164 | #mwai-workspace .mwai-ws-dnddrop { |
| 165 | display: flex; align-items: center; justify-content: center; gap: 8px; |
| 166 | margin: 4px 0; padding: 12px; border-radius: 10px; |
| 167 | border: 1.5px dashed var(--hairline); color: var(--ink-faint); |
| 168 | font-size: 12px; text-align: center; transition: all 0.15s ease; |
| 169 | } |
| 170 | #mwai-workspace .mwai-ws-dnddrop.over { |
| 171 | border-color: var(--accent); color: var(--accent); background: var(--accent-soft); |
| 172 | } |
| 173 | #mwai-workspace .mwai-ws-dnddrop svg { |
| 174 | width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; |
| 175 | stroke-linecap: round; stroke-linejoin: round; |
| 176 | } |
| 177 | |
| 178 | /* ---- Conversation folders ---- */ |
| 179 | #mwai-workspace .mwai-ws-folders-label { |
| 180 | display: flex; align-items: center; justify-content: space-between; |
| 181 | } |
| 182 | #mwai-workspace .mwai-ws-folder-add { |
| 183 | border: none; background: transparent; color: var(--ink-faint); cursor: pointer; |
| 184 | width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; |
| 185 | transition: all 0.12s ease; margin: -2px -4px -2px 0; |
| 186 | } |
| 187 | #mwai-workspace .mwai-ws-folder-add:hover { background: var(--bg-hover); color: var(--accent); } |
| 188 | #mwai-workspace .mwai-ws-folder-add svg { |
| 189 | width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; |
| 190 | stroke-linecap: round; stroke-linejoin: round; |
| 191 | } |
| 192 | #mwai-workspace .mwai-ws-folder-create { padding: 0 4px 4px; } |
| 193 | #mwai-workspace .mwai-ws-folder-create input { |
| 194 | width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; |
| 195 | border: 1px solid var(--accent); background: transparent; color: var(--ink); |
| 196 | font-family: inherit; font-size: 13px; outline: none; |
| 197 | } |
| 198 | #mwai-workspace .mwai-ws-folders-empty { |
| 199 | font-size: 11.5px; color: var(--ink-faint); padding: 0 10px 6px; line-height: 1.45; font-style: italic; |
| 200 | } |
| 201 | #mwai-workspace .mwai-ws-folder-group { margin-bottom: 4px; } |
| 202 | #mwai-workspace .mwai-ws-folder-head { |
| 203 | display: flex; align-items: center; gap: 7px; |
| 204 | padding: 8px 10px; border-radius: 9px; cursor: pointer; |
| 205 | transition: background 0.15s ease; user-select: none; |
| 206 | } |
| 207 | #mwai-workspace .mwai-ws-folder-head:hover { background: var(--bg-hover); } |
| 208 | #mwai-workspace .mwai-ws-folder-chev { display: grid; place-items: center; color: var(--ink-faint); } |
| 209 | #mwai-workspace .mwai-ws-folder-chev svg { |
| 210 | width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; |
| 211 | stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease; |
| 212 | } |
| 213 | #mwai-workspace .mwai-ws-folder-chev.open svg { transform: rotate(90deg); } |
| 214 | #mwai-workspace .mwai-ws-folder-ico { display: grid; place-items: center; color: var(--accent); } |
| 215 | #mwai-workspace .mwai-ws-folder-ico svg { |
| 216 | width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; |
| 217 | stroke-linecap: round; stroke-linejoin: round; |
| 218 | } |
| 219 | #mwai-workspace .mwai-ws-folder-name { |
| 220 | font-size: 13px; font-weight: 600; color: var(--ink); |
| 221 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; |
| 222 | } |
| 223 | #mwai-workspace .mwai-ws-folder-count { |
| 224 | font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--ink-faint); |
| 225 | background: color-mix(in srgb, var(--ink) 7%, transparent); |
| 226 | padding: 1px 7px; border-radius: 8px; |
| 227 | } |
| 228 | #mwai-workspace .mwai-ws-folder-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s ease; } |
| 229 | #mwai-workspace .mwai-ws-folder-head:hover .mwai-ws-folder-actions { opacity: 1; } |
| 230 | #mwai-workspace .mwai-ws-folder-actions button { |
| 231 | width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer; |
| 232 | background: transparent; color: var(--ink-soft); display: grid; place-items: center; |
| 233 | transition: all 0.12s ease; |
| 234 | } |
| 235 | #mwai-workspace .mwai-ws-folder-actions button:hover { background: var(--bg-raise); color: var(--ink); } |
| 236 | #mwai-workspace .mwai-ws-folder-actions button.armed { color: #c96f6f; } |
| 237 | #mwai-workspace .mwai-ws-folder-actions button svg { |
| 238 | width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; |
| 239 | stroke-linecap: round; stroke-linejoin: round; |
| 240 | } |
| 241 | #mwai-workspace .mwai-ws-folder-group .mwai-ws-conv { margin-left: 14px; } |
| 242 | #mwai-workspace .mwai-ws-folder-empty { |
| 243 | font-size: 11.5px; color: var(--ink-faint); padding: 2px 10px 8px 24px; font-style: italic; |
| 244 | } |
| 245 | #mwai-workspace .mwai-ws-folder-menu { |
| 246 | position: absolute; right: 8px; top: calc(100% - 6px); z-index: 70; |
| 247 | width: 210px; padding: 6px; |
| 248 | background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 10px; |
| 249 | box-shadow: var(--shadow); cursor: default; |
| 250 | } |
| 251 | #mwai-workspace .mwai-ws-folder-menu-item { |
| 252 | display: flex; align-items: center; gap: 8px; width: 100%; |
| 253 | border: none; background: transparent; color: var(--ink); cursor: pointer; |
| 254 | font-family: inherit; font-size: 12.5px; text-align: left; |
| 255 | padding: 7px 9px; border-radius: 7px; transition: background 0.12s ease; |
| 256 | } |
| 257 | #mwai-workspace .mwai-ws-folder-menu-item:hover { background: var(--bg-hover); } |
| 258 | #mwai-workspace .mwai-ws-folder-menu-item.on { color: var(--accent); font-weight: 600; } |
| 259 | #mwai-workspace .mwai-ws-folder-menu-item svg { |
| 260 | width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; |
| 261 | stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; |
| 262 | } |
| 263 | #mwai-workspace .mwai-ws-folder-menu-item span { |
| 264 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; |
| 265 | } |
| 266 | #mwai-workspace .mwai-ws-folder-check { margin-left: auto; } |
| 267 | #mwai-workspace .mwai-ws-folder-new { padding: 4px 3px 2px; border-top: 1px solid var(--hairline); margin-top: 4px; } |
| 268 | #mwai-workspace .mwai-ws-folder-new input { |
| 269 | width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 7px; |
| 270 | border: 1px solid var(--hairline); background: transparent; color: var(--ink); |
| 271 | font-family: inherit; font-size: 12.5px; outline: none; |
| 272 | } |
| 273 | #mwai-workspace .mwai-ws-folder-new input:focus { border-color: var(--accent); } |
| 274 | #mwai-workspace .mwai-ws-conv:hover { background: var(--bg-hover); } |
| 275 | #mwai-workspace .mwai-ws-conv.active { background: var(--bg-raise); box-shadow: inset 2px 0 0 var(--accent); } |
| 276 | #mwai-workspace .mwai-ws-conv-title { |
| 277 | font-size: 13.5px; font-weight: 500; |
| 278 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| 279 | } |
| 280 | #mwai-workspace .mwai-ws-conv-edit { |
| 281 | font-family: inherit; font-size: 13px; color: var(--ink); |
| 282 | background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--hairline)); |
| 283 | border-radius: 6px; padding: 3px 7px; outline: none; width: 100%; |
| 284 | } |
| 285 | #mwai-workspace .mwai-ws-conv-meta { |
| 286 | display: flex; align-items: center; gap: 7px; |
| 287 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint); |
| 288 | } |
| 289 | #mwai-workspace .mwai-ws-conv-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; } |
| 290 | #mwai-workspace .mwai-ws-conv:hover .mwai-ws-conv-actions { opacity: 1; } |
| 291 | #mwai-workspace .mwai-ws-conv-actions button { |
| 292 | width: 20px; height: 20px; border: none; background: transparent; cursor: pointer; |
| 293 | color: var(--ink-faint); display: grid; place-items: center; border-radius: 5px; |
| 294 | } |
| 295 | #mwai-workspace .mwai-ws-conv-actions button:hover { background: var(--bg); color: var(--ink); } |
| 296 | #mwai-workspace .mwai-ws-conv-actions button.armed { color: #e5484d; } |
| 297 | #mwai-workspace .mwai-ws-conv-actions button.pinned { color: var(--accent); opacity: 1; } |
| 298 | #mwai-workspace .mwai-ws-conv.active .mwai-ws-conv-actions button.pinned, |
| 299 | #mwai-workspace .mwai-ws-conv:not(:hover) .mwai-ws-conv-actions button.pinned { opacity: 1; } |
| 300 | #mwai-workspace .mwai-ws-conv-actions svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; } |
| 301 | #mwai-workspace .mwai-ws-empty-list { |
| 302 | padding: 24px 12px; color: var(--ink-faint); font-size: 13px; text-align: center; |
| 303 | } |
| 304 | |
| 305 | #mwai-workspace .mwai-ws-me { |
| 306 | border-top: 1px solid var(--hairline); |
| 307 | padding: 14px 16px; display: flex; align-items: center; gap: 11px; |
| 308 | } |
| 309 | #mwai-workspace .mwai-ws-me-id { flex: 1; min-width: 0; } |
| 310 | #mwai-workspace .mwai-ws-me-id .mwai-ws-me-name, |
| 311 | #mwai-workspace .mwai-ws-me-id .mwai-ws-me-role { |
| 312 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| 313 | } |
| 314 | #mwai-workspace .mwai-ws-theme-swap { |
| 315 | flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; |
| 316 | border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft); |
| 317 | display: grid; place-items: center; cursor: pointer; transition: all 0.15s ease; |
| 318 | } |
| 319 | #mwai-workspace .mwai-ws-theme-swap:hover { background: var(--bg-hover); color: var(--ink); } |
| 320 | #mwai-workspace .mwai-ws-theme-swap svg { |
| 321 | width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; |
| 322 | stroke-linecap: round; stroke-linejoin: round; |
| 323 | } |
| 324 | #mwai-workspace .mwai-ws-avatar { |
| 325 | width: 30px; height: 30px; border-radius: 50%; |
| 326 | background: linear-gradient(135deg, #5d78e0, #9a5de0); |
| 327 | display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; |
| 328 | } |
| 329 | #mwai-workspace .mwai-ws-me-name { font-size: 13px; font-weight: 500; } |
| 330 | #mwai-workspace .mwai-ws-me-role { font-size: 11px; color: var(--ink-faint); text-transform: capitalize; } |
| 331 | |
| 332 | /* ================= Prompts panel ================= */ |
| 333 | #mwai-workspace .mwai-ws-prompt-preview { |
| 334 | min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| 335 | } |
| 336 | #mwai-workspace .mwai-ws-prompt-editor { |
| 337 | margin: 0 16px 12px; padding: 10px; |
| 338 | background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px; |
| 339 | display: flex; flex-direction: column; gap: 8px; |
| 340 | } |
| 341 | #mwai-workspace .mwai-ws-prompt-editor input, |
| 342 | #mwai-workspace .mwai-ws-prompt-editor textarea { |
| 343 | width: 100%; background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px; |
| 344 | color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 10px; |
| 345 | outline: none; resize: vertical; box-shadow: none; line-height: 1.5; |
| 346 | transition: border-color 0.2s ease; |
| 347 | } |
| 348 | #mwai-workspace .mwai-ws-prompt-editor input:focus, |
| 349 | #mwai-workspace .mwai-ws-prompt-editor textarea:focus { |
| 350 | border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); box-shadow: none; |
| 351 | } |
| 352 | #mwai-workspace .mwai-ws-prompt-editor .mwai-ws-edit-actions { margin-top: 0; } |
| 353 | |
| 354 | /* ================= Settings panel ================= */ |
| 355 | #mwai-workspace .mwai-ws-settings { flex: 1; overflow-y: auto; padding: 0 16px 16px; } |
| 356 | #mwai-workspace .mwai-ws-settings .mwai-ws-group-label { padding: 14px 0 8px; } |
| 357 | #mwai-workspace .mwai-ws-theme-seg { |
| 358 | display: flex; gap: 3px; padding: 3px; |
| 359 | background: var(--bg); border: 1px solid var(--hairline); border-radius: 10px; |
| 360 | } |
| 361 | #mwai-workspace .mwai-ws-theme-seg button { |
| 362 | flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; |
| 363 | padding: 7px 0; border: none; border-radius: 8px; cursor: pointer; |
| 364 | background: transparent; color: var(--ink-soft); |
| 365 | font-family: inherit; font-size: 12.5px; font-weight: 500; |
| 366 | transition: background 0.15s ease, color 0.15s ease; |
| 367 | } |
| 368 | #mwai-workspace .mwai-ws-theme-seg button.on { |
| 369 | background: var(--bg-raise); color: var(--ink); |
| 370 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); |
| 371 | } |
| 372 | #mwai-workspace .mwai-ws-theme-seg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; } |
| 373 | #mwai-workspace .mwai-ws-accent-row { display: flex; align-items: center; gap: 9px; padding: 4px 2px; } |
| 374 | #mwai-workspace .mwai-ws-swatch { |
| 375 | width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer; padding: 0; |
| 376 | outline: 2px solid transparent; outline-offset: 2px; |
| 377 | transition: transform 0.15s ease, outline-color 0.2s ease; |
| 378 | } |
| 379 | #mwai-workspace .mwai-ws-swatch:hover { transform: scale(1.15); } |
| 380 | #mwai-workspace .mwai-ws-swatch.on { outline-color: var(--ink-soft); } |
| 381 | #mwai-workspace .mwai-ws-accent-name { font-size: 12px; color: var(--ink-soft); margin-left: 3px; } |
| 382 | |
| 383 | /* ================= Coming soon (Agents) ================= */ |
| 384 | #mwai-workspace .mwai-ws-coming { |
| 385 | flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; |
| 386 | gap: 9px; padding: 0 26px 40px; text-align: center; |
| 387 | } |
| 388 | #mwai-workspace .mwai-ws-coming img { width: 54px; height: auto; opacity: 0.85; } |
| 389 | #mwai-workspace .mwai-ws-coming-title { font-weight: 600; font-size: 15px; } |
| 390 | #mwai-workspace .mwai-ws-coming-sub { |
| 391 | font-family: "Newsreader", serif; font-style: italic; font-weight: 300; |
| 392 | font-size: 14px; color: var(--ink-faint); line-height: 1.5; |
| 393 | } |
| 394 | #mwai-workspace .mwai-ws-coming-pill { |
| 395 | font-family: "Spline Sans Mono", monospace; font-size: 9px; |
| 396 | letter-spacing: 1.5px; text-transform: uppercase; |
| 397 | background: var(--accent-soft); color: var(--accent); |
| 398 | padding: 4px 12px; border-radius: 20px; margin-top: 5px; |
| 399 | } |
| 400 | |
| 401 | /* ================= Main ================= */ |
| 402 | #mwai-workspace .mwai-ws-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } |
| 403 | |
| 404 | #mwai-workspace .mwai-ws-topbar { |
| 405 | display: flex; align-items: center; gap: 14px; |
| 406 | padding: 14px 26px; border-bottom: 1px solid var(--hairline); |
| 407 | } |
| 408 | #mwai-workspace .mwai-ws-conv-name { |
| 409 | font-weight: 600; font-size: 14.5px; |
| 410 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; |
| 411 | } |
| 412 | #mwai-workspace .mwai-ws-conv-cost { |
| 413 | font-family: "Spline Sans Mono", monospace; font-size: 11px; |
| 414 | color: var(--accent); background: var(--accent-soft); |
| 415 | padding: 3px 9px; border-radius: 20px; |
| 416 | } |
| 417 | #mwai-workspace .mwai-ws-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } |
| 418 | |
| 419 | #mwai-workspace .mwai-ws-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } |
| 420 | #mwai-workspace .mwai-ws-model { position: relative; } |
| 421 | #mwai-workspace .mwai-ws-model-pill { |
| 422 | display: flex; align-items: center; gap: 9px; |
| 423 | background: var(--bg-raise); border: 1px solid var(--hairline); color: var(--ink); |
| 424 | padding: 7px 13px; border-radius: 22px; cursor: pointer; |
| 425 | font-family: inherit; font-size: 13px; font-weight: 500; |
| 426 | transition: border-color 0.2s ease, transform 0.15s ease; |
| 427 | } |
| 428 | #mwai-workspace .mwai-ws-model-pill:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); transform: translateY(-1px); } |
| 429 | #mwai-workspace .mwai-ws-chev { color: var(--ink-faint); font-size: 18px; line-height: 0; } |
| 430 | #mwai-workspace .mwai-ws-model-menu { |
| 431 | position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; |
| 432 | width: 280px; max-height: 430px; overflow-y: auto; |
| 433 | background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px; |
| 434 | box-shadow: var(--shadow); padding: 8px; |
| 435 | } |
| 436 | #mwai-workspace .mwai-ws-model-menu::-webkit-scrollbar { width: 8px; } |
| 437 | #mwai-workspace .mwai-ws-model-menu::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; } |
| 438 | #mwai-workspace .mwai-ws-model-env { |
| 439 | display: flex; align-items: center; gap: 7px; width: 100%; |
| 440 | font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 1px; |
| 441 | text-transform: uppercase; color: var(--ink-faint); padding: 9px 8px; |
| 442 | background: transparent; border: none; cursor: pointer; border-radius: 7px; |
| 443 | } |
| 444 | #mwai-workspace .mwai-ws-model-env:hover { background: var(--bg-hover); color: var(--ink-soft); } |
| 445 | #mwai-workspace .mwai-ws-model-env .mwai-ws-env-chev { |
| 446 | margin-left: auto; font-size: 18px; line-height: 0; transition: transform 0.15s ease; |
| 447 | } |
| 448 | #mwai-workspace .mwai-ws-model-env.open .mwai-ws-env-chev { transform: rotate(180deg); } |
| 449 | #mwai-workspace .mwai-ws-model-item { |
| 450 | display: block; width: 100%; text-align: left; |
| 451 | border: none; background: transparent; color: var(--ink); cursor: pointer; |
| 452 | font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; |
| 453 | transition: background 0.12s ease; |
| 454 | } |
| 455 | #mwai-workspace .mwai-ws-model-item:hover { background: var(--bg-hover); } |
| 456 | #mwai-workspace .mwai-ws-model-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } |
| 457 | |
| 458 | /* ================= Messages ================= */ |
| 459 | #mwai-workspace .mwai-ws-scroll { flex: 1; overflow-y: auto; } |
| 460 | #mwai-workspace .mwai-ws-scroll::-webkit-scrollbar { width: 10px; } |
| 461 | #mwai-workspace .mwai-ws-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 5px; } |
| 462 | #mwai-workspace .mwai-ws-thread { max-width: 780px; margin: 0 auto; padding: 46px 28px 30px; } |
| 463 | |
| 464 | #mwai-workspace .mwai-ws-hero { |
| 465 | height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; |
| 466 | gap: 10px; padding-bottom: 8vh; |
| 467 | } |
| 468 | #mwai-workspace .mwai-ws-hero-title { font-size: 26px; font-weight: 600; letter-spacing: -0.3px; } |
| 469 | #mwai-workspace .mwai-ws-hero-sub { |
| 470 | font-family: "Newsreader", serif; font-style: italic; font-weight: 300; |
| 471 | font-size: 16px; color: var(--ink-faint); |
| 472 | } |
| 473 | |
| 474 | #mwai-workspace .mwai-ws-msg { margin-bottom: 38px; animation: mwai-ws-rise 0.4s ease both; } |
| 475 | @keyframes mwai-ws-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } |
| 476 | |
| 477 | #mwai-workspace .mwai-ws-msg.user { display: flex; justify-content: flex-end; } |
| 478 | #mwai-workspace .mwai-ws-bubble { |
| 479 | background: var(--user-bubble); border-radius: 16px 16px 4px 16px; |
| 480 | /* 100%, not a nested percentage: the wrap already caps at 82%, and a |
| 481 | percentage here resolves against the wrap's shrink-to-fit width, which |
| 482 | squeezed SHORT messages onto two lines. */ |
| 483 | padding: 13px 18px; max-width: 100%; line-height: 1.55; |
| 484 | } |
| 485 | #mwai-workspace .mwai-ws-user-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 82%; } |
| 486 | #mwai-workspace .mwai-ws-user-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } |
| 487 | #mwai-workspace .mwai-ws-user-imgs img { |
| 488 | max-width: 150px; max-height: 150px; border-radius: 10px; display: block; |
| 489 | border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); |
| 490 | } |
| 491 | #mwai-workspace .mwai-ws-user-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s ease; } |
| 492 | #mwai-workspace .mwai-ws-msg.user:hover .mwai-ws-user-actions { opacity: 1; } |
| 493 | #mwai-workspace .mwai-ws-user-actions button { |
| 494 | width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer; |
| 495 | background: transparent; color: var(--ink-soft); display: grid; place-items: center; |
| 496 | } |
| 497 | #mwai-workspace .mwai-ws-user-actions button:hover { background: var(--bg-hover); color: var(--ink); } |
| 498 | #mwai-workspace .mwai-ws-user-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; } |
| 499 | |
| 500 | #mwai-workspace .mwai-ws-edit { |
| 501 | width: 100%; background: var(--bg-raise); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--hairline)); |
| 502 | border-radius: 16px 16px 4px 16px; padding: 12px 14px 10px; |
| 503 | } |
| 504 | #mwai-workspace .mwai-ws-edit textarea { |
| 505 | width: 100%; border: none; outline: none; resize: none; box-shadow: none; |
| 506 | background: transparent; color: var(--ink); |
| 507 | font-family: inherit; font-size: 14.5px; line-height: 1.55; min-height: 24px; |
| 508 | } |
| 509 | #mwai-workspace .mwai-ws-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } |
| 510 | #mwai-workspace .mwai-ws-edit-cancel, #mwai-workspace .mwai-ws-edit-save { |
| 511 | border: none; border-radius: 8px; padding: 6px 13px; cursor: pointer; |
| 512 | font-family: inherit; font-size: 12.5px; font-weight: 600; |
| 513 | } |
| 514 | #mwai-workspace .mwai-ws-edit-cancel { background: transparent; color: var(--ink-soft); } |
| 515 | #mwai-workspace .mwai-ws-edit-cancel:hover { background: var(--bg-hover); color: var(--ink); } |
| 516 | #mwai-workspace .mwai-ws-edit-save { background: var(--accent); color: var(--accent-ink); } |
| 517 | #mwai-workspace .mwai-ws-edit-save:hover { filter: brightness(1.07); } |
| 518 | |
| 519 | #mwai-workspace .mwai-ws-msg.is-error .mwai-ws-error { |
| 520 | color: #e5484d; background: color-mix(in srgb, #e5484d 8%, transparent); |
| 521 | border: 1px solid color-mix(in srgb, #e5484d 25%, transparent); |
| 522 | border-radius: 12px; padding: 12px 16px; font-size: 13.5px; |
| 523 | } |
| 524 | |
| 525 | #mwai-workspace .mwai-ws-ai-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; } |
| 526 | #mwai-workspace .mwai-ws-ai-name { font-weight: 600; font-size: 13px; } |
| 527 | #mwai-workspace .mwai-ws-ai-model { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint); } |
| 528 | #mwai-workspace .mwai-ws-ai-stopped { |
| 529 | font-family: "Spline Sans Mono", monospace; font-size: 9px; |
| 530 | letter-spacing: 0.8px; text-transform: uppercase; |
| 531 | color: var(--ink-faint); border: 1px solid var(--hairline); |
| 532 | border-radius: 20px; padding: 1px 8px; |
| 533 | } |
| 534 | #mwai-workspace .mwai-ws-body { line-height: 1.68; color: color-mix(in srgb, var(--ink) 94%, transparent); } |
| 535 | /* WP admin styles p at 13px globally, which made paragraphs smaller than list |
| 536 | items (14.5px inherited). Everything inherits the surface size instead. */ |
| 537 | #mwai-workspace p { font-size: inherit; line-height: inherit; } |
| 538 | #mwai-workspace .mwai-ws-body p + p { margin-top: 12px; } |
| 539 | #mwai-workspace .mwai-ws-body pre { |
| 540 | margin: 14px 0; border-radius: 12px; background: var(--code-bg); |
| 541 | padding: 14px 16px; overflow-x: auto; |
| 542 | font-family: "Spline Sans Mono", monospace; font-size: 12.5px; line-height: 1.6; color: #dcdde3; |
| 543 | } |
| 544 | #mwai-workspace .mwai-ws-body code { |
| 545 | font-family: "Spline Sans Mono", monospace; font-size: 0.92em; |
| 546 | background: color-mix(in srgb, var(--ink) 8%, transparent); |
| 547 | border-radius: 5px; padding: 1px 5px; |
| 548 | } |
| 549 | #mwai-workspace .mwai-ws-body pre code { background: transparent; padding: 0; } |
| 550 | #mwai-workspace .mwai-ws-body pre code.hljs { background: transparent; padding: 0; } |
| 551 | #mwai-workspace .mwai-ws-body ul, #mwai-workspace .mwai-ws-body ol { padding-left: 22px; margin: 10px 0; } |
| 552 | #mwai-workspace .mwai-ws-body a { color: var(--accent); } |
| 553 | /* Generated/markdown images: the shared renderer caps them inline at 220px |
| 554 | (chatbot-sized); the Workspace canvas has room for more. */ |
| 555 | #mwai-workspace .mwai-ws-body .mwai-image { |
| 556 | max-width: 100%; max-height: 480px !important; |
| 557 | border-radius: 12px; display: block; margin: 10px 0; |
| 558 | box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.4); |
| 559 | } |
| 560 | |
| 561 | /* ---- Markdown typography (headings, lists, tables, quotes) ---- */ |
| 562 | #mwai-workspace .mwai-ws-body h1, #mwai-workspace .mwai-ws-body h2, |
| 563 | #mwai-workspace .mwai-ws-body h3, #mwai-workspace .mwai-ws-body h4, |
| 564 | #mwai-workspace .mwai-ws-body h5, #mwai-workspace .mwai-ws-body h6 { |
| 565 | color: var(--ink); line-height: 1.3; font-weight: 650; |
| 566 | margin: 24px 0 10px; letter-spacing: -0.2px; |
| 567 | } |
| 568 | #mwai-workspace .mwai-ws-body h1 { font-size: 21px; } |
| 569 | #mwai-workspace .mwai-ws-body h2 { font-size: 18px; } |
| 570 | #mwai-workspace .mwai-ws-body h3 { font-size: 16px; } |
| 571 | #mwai-workspace .mwai-ws-body h4, #mwai-workspace .mwai-ws-body h5, #mwai-workspace .mwai-ws-body h6 { font-size: 14.5px; } |
| 572 | #mwai-workspace .mwai-ws-body > div > *:first-child { margin-top: 0; } |
| 573 | |
| 574 | #mwai-workspace .mwai-ws-body ul { list-style: disc; } |
| 575 | #mwai-workspace .mwai-ws-body ol { list-style: decimal; } |
| 576 | #mwai-workspace .mwai-ws-body ul, #mwai-workspace .mwai-ws-body ol { padding-left: 24px; margin: 12px 0; } |
| 577 | #mwai-workspace .mwai-ws-body li { margin: 5px 0; } |
| 578 | #mwai-workspace .mwai-ws-body li::marker { color: var(--ink-faint); } |
| 579 | #mwai-workspace .mwai-ws-body li > ul, #mwai-workspace .mwai-ws-body li > ol { margin: 5px 0; } |
| 580 | |
| 581 | #mwai-workspace .mwai-ws-body table { |
| 582 | border-collapse: separate; border-spacing: 0; margin: 16px 0; max-width: 100%; |
| 583 | font-size: 13.5px; border: 1px solid var(--hairline); border-radius: 10px; |
| 584 | overflow: hidden; |
| 585 | } |
| 586 | #mwai-workspace .mwai-ws-body th, #mwai-workspace .mwai-ws-body td { |
| 587 | padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--hairline); |
| 588 | } |
| 589 | #mwai-workspace .mwai-ws-body th { |
| 590 | font-weight: 600; font-size: 12.5px; color: var(--ink-soft); |
| 591 | background: var(--bg-deep); letter-spacing: 0.2px; |
| 592 | } |
| 593 | #mwai-workspace .mwai-ws-body tr:last-child td { border-bottom: none; } |
| 594 | #mwai-workspace .mwai-ws-body tbody tr:hover td { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); } |
| 595 | |
| 596 | #mwai-workspace .mwai-ws-body blockquote { |
| 597 | border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--hairline)); |
| 598 | margin: 14px 0; padding: 4px 16px; color: var(--ink-soft); |
| 599 | } |
| 600 | #mwai-workspace .mwai-ws-body hr { |
| 601 | border: none; border-top: 1px solid var(--hairline); margin: 20px 0; |
| 602 | } |
| 603 | #mwai-workspace .mwai-ws-body strong { font-weight: 650; color: var(--ink); } |
| 604 | |
| 605 | /* The shared code-copy button (from ChatbotContent) restyled for this surface. |
| 606 | Workspace code blocks are dark in BOTH themes, so the button must not inherit |
| 607 | the light theme's dark ink (it was unreadable there). */ |
| 608 | #mwai-workspace .mwai-ws-body .mwai-code-copy { |
| 609 | font-family: "Spline Sans Mono", monospace; |
| 610 | /* !important: the shared button ships inline styles (color: inherit), which |
| 611 | turn near-black in the light theme on our always-dark blocks. */ |
| 612 | color: #c9cbd3 !important; background: rgba(255, 255, 255, 0.12) !important; |
| 613 | opacity: 1 !important; |
| 614 | } |
| 615 | #mwai-workspace .mwai-ws-body .mwai-code-copy:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.2) !important; } |
| 616 | |
| 617 | /* ---- Live activity trail (tool/function/MCP calls while generating) ---- */ |
| 618 | #mwai-workspace .mwai-ws-trail { |
| 619 | display: flex; flex-direction: column; gap: 7px; margin: 2px 0 12px; |
| 620 | } |
| 621 | #mwai-workspace .mwai-ws-trail-item { |
| 622 | display: flex; align-items: center; gap: 9px; |
| 623 | font-family: "Spline Sans Mono", monospace; font-size: 11px; |
| 624 | color: var(--ink-faint); |
| 625 | animation: mwai-ws-trail-in 0.3s ease both; |
| 626 | } |
| 627 | #mwai-workspace .mwai-ws-trail-item:nth-last-child(2) { opacity: 0.75; } |
| 628 | #mwai-workspace .mwai-ws-trail-item:nth-last-child(3) { opacity: 0.5; } |
| 629 | #mwai-workspace .mwai-ws-trail-item:last-child { color: var(--ink-soft); } |
| 630 | #mwai-workspace .mwai-ws-trail-ico { display: grid; place-items: center; } |
| 631 | #mwai-workspace .mwai-ws-trail-ico svg { |
| 632 | width: 12px; height: 12px; stroke: currentColor; fill: none; |
| 633 | stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; |
| 634 | } |
| 635 | #mwai-workspace .mwai-ws-trail-item:last-child .mwai-ws-trail-ico { |
| 636 | color: var(--accent); animation: mwai-ws-trail-pulse 1.3s ease-in-out infinite; |
| 637 | } |
| 638 | #mwai-workspace .mwai-ws-trail-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| 639 | @keyframes mwai-ws-trail-in { from { opacity: 0; transform: translateY(5px); } to { transform: none; } } |
| 640 | @keyframes mwai-ws-trail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } |
| 641 | |
| 642 | #mwai-workspace .mwai-ws-thinking { display: inline-flex; gap: 5px; padding: 4px 0; } |
| 643 | #mwai-workspace .mwai-ws-thinking span { |
| 644 | width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); |
| 645 | animation: mwai-ws-bounce 1.2s ease-in-out infinite; |
| 646 | } |
| 647 | #mwai-workspace .mwai-ws-thinking span:nth-child(2) { animation-delay: 0.15s; } |
| 648 | #mwai-workspace .mwai-ws-thinking span:nth-child(3) { animation-delay: 0.3s; } |
| 649 | @keyframes mwai-ws-bounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } |
| 650 | |
| 651 | #mwai-workspace .mwai-ws-msg-actions { display: flex; gap: 2px; margin-top: 10px; opacity: 0; transition: opacity 0.2s ease; } |
| 652 | #mwai-workspace .mwai-ws-msg.ai:hover .mwai-ws-msg-actions { opacity: 1; } |
| 653 | #mwai-workspace .mwai-ws-msg-actions button { |
| 654 | width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer; |
| 655 | background: transparent; color: var(--ink-soft); display: grid; place-items: center; |
| 656 | } |
| 657 | #mwai-workspace .mwai-ws-msg-actions button:hover { background: var(--bg-hover); color: var(--ink); } |
| 658 | #mwai-workspace .mwai-ws-msg-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; } |
| 659 | |
| 660 | /* ---- Per-message "more" menu (time + branch) ---- */ |
| 661 | #mwai-workspace .mwai-ws-msg-more { position: relative; display: inline-block; } |
| 662 | #mwai-workspace .mwai-ws-msg-menu { |
| 663 | position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60; |
| 664 | min-width: 200px; padding: 6px; |
| 665 | background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 11px; |
| 666 | box-shadow: var(--shadow); |
| 667 | } |
| 668 | #mwai-workspace .mwai-ws-msg-menu-time { |
| 669 | font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 0.8px; |
| 670 | text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px 7px; |
| 671 | border-bottom: 1px solid var(--hairline); margin-bottom: 5px; |
| 672 | } |
| 673 | #mwai-workspace .mwai-ws-msg-menu button { |
| 674 | display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; |
| 675 | border: none; background: transparent; color: var(--ink); cursor: pointer; |
| 676 | font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; |
| 677 | transition: background 0.12s ease; |
| 678 | } |
| 679 | #mwai-workspace .mwai-ws-msg-menu button:hover { background: var(--bg-hover); } |
| 680 | #mwai-workspace .mwai-ws-msg-menu button svg { |
| 681 | width: 14px; height: 14px; stroke: currentColor; fill: none; |
| 682 | stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; |
| 683 | } |
| 684 | |
| 685 | /* ---- Time chips between messages ---- */ |
| 686 | #mwai-workspace .mwai-ws-timechip { |
| 687 | text-align: center; margin: 4px 0 22px; |
| 688 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; |
| 689 | letter-spacing: 0.8px; color: var(--ink-faint); |
| 690 | } |
| 691 | |
| 692 | /* ================= Composer ================= */ |
| 693 | #mwai-workspace .mwai-ws-composer-wrap { padding: 6px 28px 22px; position: relative; } |
| 694 | #mwai-workspace .mwai-ws-composer { |
| 695 | max-width: 780px; margin: 0 auto; position: relative; |
| 696 | background: var(--bg-raise); border: 1px solid var(--hairline); |
| 697 | border-radius: 16px; box-shadow: var(--composer-shadow); |
| 698 | transition: border-color 0.2s ease; |
| 699 | } |
| 700 | #mwai-workspace .mwai-ws-composer.dragover { border-color: var(--accent); } |
| 701 | #mwai-workspace .mwai-ws-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); } |
| 702 | #mwai-workspace .mwai-ws-composer textarea { |
| 703 | width: 100%; border: none; outline: none; resize: none; box-shadow: none; |
| 704 | background: transparent; color: var(--ink); |
| 705 | font-family: inherit; font-size: 14.5px; line-height: 1.5; |
| 706 | padding: 16px 18px 6px; height: 58px; |
| 707 | } |
| 708 | #mwai-workspace .mwai-ws-composer textarea:focus { outline: none; box-shadow: none; } |
| 709 | #mwai-workspace .mwai-ws-composer textarea::placeholder { color: var(--ink-faint); } |
| 710 | #mwai-workspace .mwai-ws-composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 10px; } |
| 711 | #mwai-workspace .mwai-ws-send { |
| 712 | margin-left: auto; |
| 713 | background: var(--accent); color: var(--accent-ink); |
| 714 | border: none; border-radius: 10px; padding: 8px 16px; |
| 715 | font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; |
| 716 | transition: filter 0.2s ease, transform 0.15s ease, opacity 0.2s ease; |
| 717 | } |
| 718 | #mwai-workspace .mwai-ws-send:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); } |
| 719 | #mwai-workspace .mwai-ws-send:disabled { opacity: 0.45; cursor: default; } |
| 720 | #mwai-workspace .mwai-ws-stop { |
| 721 | margin-left: auto; display: flex; align-items: center; gap: 7px; |
| 722 | background: transparent; color: var(--ink); |
| 723 | border: 1px solid var(--hairline); border-radius: 10px; padding: 7px 14px; |
| 724 | font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; |
| 725 | transition: border-color 0.2s ease, background 0.15s ease; |
| 726 | } |
| 727 | #mwai-workspace .mwai-ws-stop:hover { border-color: #e5484d; color: #e5484d; } |
| 728 | #mwai-workspace .mwai-ws-stop svg { |
| 729 | width: 13px; height: 13px; stroke: currentColor; fill: currentColor; stroke-width: 1.5; |
| 730 | } |
| 731 | #mwai-workspace .mwai-ws-composer-hint { |
| 732 | max-width: 780px; margin: 9px auto 0; text-align: center; |
| 733 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint); |
| 734 | } |
| 735 | |
| 736 | /* ---- Composer icon toolbar ---- */ |
| 737 | #mwai-workspace .mwai-ws-icon-btn { |
| 738 | position: relative; width: 32px; height: 32px; border-radius: 9px; border: none; |
| 739 | background: transparent; color: var(--ink-soft); cursor: pointer; |
| 740 | display: grid; place-items: center; |
| 741 | transition: background 0.15s ease, color 0.15s ease; |
| 742 | } |
| 743 | #mwai-workspace .mwai-ws-icon-btn:hover { background: var(--bg-hover); color: var(--ink); } |
| 744 | #mwai-workspace .mwai-ws-icon-btn.on { color: var(--accent); background: var(--accent-soft); } |
| 745 | #mwai-workspace .mwai-ws-icon-btn svg { |
| 746 | width: 16px; height: 16px; stroke: currentColor; fill: none; |
| 747 | stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; |
| 748 | } |
| 749 | #mwai-workspace .mwai-ws-icon-badge { |
| 750 | position: absolute; top: -3px; right: -3px; |
| 751 | min-width: 14px; height: 14px; padding: 0 3px; border-radius: 8px; |
| 752 | background: var(--accent); color: var(--accent-ink); |
| 753 | font-family: "Spline Sans Mono", monospace; font-size: 8.5px; line-height: 14px; |
| 754 | } |
| 755 | |
| 756 | /* ---- Model parameters (topbar tune menu) ---- */ |
| 757 | #mwai-workspace .mwai-ws-tune { position: relative; } |
| 758 | #mwai-workspace .mwai-ws-tune .mwai-ws-pop.mwai-ws-tune-pop { |
| 759 | bottom: auto; left: auto; right: 0; top: calc(100% + 10px); width: 260px; |
| 760 | } |
| 761 | #mwai-workspace .mwai-ws-tune-dot { |
| 762 | position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; |
| 763 | border-radius: 50%; background: var(--accent); |
| 764 | } |
| 765 | #mwai-workspace .mwai-ws-tune-row { padding: 8px 10px 4px; } |
| 766 | #mwai-workspace .mwai-ws-tune-label { |
| 767 | display: flex; align-items: center; justify-content: space-between; |
| 768 | font-size: 12.5px; color: var(--ink); margin-bottom: 8px; |
| 769 | } |
| 770 | #mwai-workspace .mwai-ws-tune-value { |
| 771 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint); |
| 772 | font-variant-numeric: tabular-nums; |
| 773 | } |
| 774 | #mwai-workspace .mwai-ws-tune-row input[type="range"] { |
| 775 | width: 100%; margin: 0 0 6px; accent-color: var(--accent); cursor: pointer; |
| 776 | } |
| 777 | #mwai-workspace .mwai-ws-tune-row input[type="range"]:disabled { opacity: 0.4; cursor: default; } |
| 778 | #mwai-workspace .mwai-ws-tune-seg { display: flex; gap: 4px; margin-bottom: 6px; } |
| 779 | #mwai-workspace .mwai-ws-tune-seg button { |
| 780 | flex: 1; border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft); |
| 781 | font-family: inherit; font-size: 11px; padding: 5px 0; border-radius: 7px; cursor: pointer; |
| 782 | transition: all 0.12s ease; |
| 783 | } |
| 784 | #mwai-workspace .mwai-ws-tune-seg button:hover { background: var(--bg-hover); } |
| 785 | #mwai-workspace .mwai-ws-tune-seg button.on { |
| 786 | background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); |
| 787 | color: var(--accent); font-weight: 600; |
| 788 | } |
| 789 | #mwai-workspace .mwai-ws-tune-pop .mwai-ws-pop-hint a { color: var(--accent); cursor: pointer; } |
| 790 | |
| 791 | /* ---- Composer popovers ---- */ |
| 792 | #mwai-workspace .mwai-ws-pop { |
| 793 | position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60; |
| 794 | width: 300px; max-height: 380px; overflow-y: auto; |
| 795 | background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px; |
| 796 | box-shadow: var(--shadow); padding: 8px; |
| 797 | } |
| 798 | #mwai-workspace .mwai-ws-pop::-webkit-scrollbar { width: 8px; } |
| 799 | #mwai-workspace .mwai-ws-pop::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; } |
| 800 | #mwai-workspace .mwai-ws-pop-title { |
| 801 | font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 1.4px; |
| 802 | text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px 8px; |
| 803 | } |
| 804 | #mwai-workspace .mwai-ws-pop-item { |
| 805 | position: relative; display: block; width: 100%; text-align: left; |
| 806 | border: none; background: transparent; color: var(--ink); cursor: pointer; |
| 807 | font-family: inherit; font-size: 13px; padding: 8px 30px 8px 10px; border-radius: 7px; |
| 808 | transition: background 0.12s ease; |
| 809 | } |
| 810 | #mwai-workspace .mwai-ws-pop-item:hover { background: var(--bg-hover); } |
| 811 | #mwai-workspace .mwai-ws-pop-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } |
| 812 | #mwai-workspace .mwai-ws-pop-sub { |
| 813 | display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); |
| 814 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; |
| 815 | } |
| 816 | #mwai-workspace .mwai-ws-pop-item.on .mwai-ws-pop-sub { color: color-mix(in srgb, var(--accent) 65%, var(--ink-faint)); } |
| 817 | #mwai-workspace .mwai-ws-pop-check { |
| 818 | position: absolute; right: 10px; top: 50%; transform: translateY(-50%); |
| 819 | display: grid; place-items: center; |
| 820 | } |
| 821 | #mwai-workspace .mwai-ws-pop-check svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; } |
| 822 | #mwai-workspace .mwai-ws-pop-hint { |
| 823 | font-size: 11px; color: var(--ink-faint); padding: 8px 8px 4px; line-height: 1.45; |
| 824 | } |
| 825 | #mwai-workspace .mwai-ws-pop-section { |
| 826 | font-family: "Spline Sans Mono", monospace; font-size: 9.5px; letter-spacing: 1.2px; |
| 827 | text-transform: uppercase; color: var(--ink-faint); padding: 10px 8px 4px; |
| 828 | border-top: 1px solid var(--hairline); margin-top: 6px; |
| 829 | } |
| 830 | #mwai-workspace .mwai-ws-pop-item:disabled { |
| 831 | opacity: 0.45; cursor: default; |
| 832 | } |
| 833 | #mwai-workspace .mwai-ws-pop-item:disabled:hover { background: transparent; } |
| 834 | #mwai-workspace .mwai-ws-pop-empty { |
| 835 | font-size: 12.5px; color: var(--ink-soft); padding: 6px 8px 8px; line-height: 1.5; |
| 836 | } |
| 837 | #mwai-workspace .mwai-ws-pop-empty a { color: var(--accent); } |
| 838 | |
| 839 | /* ---- The + menu (features with pins) ---- */ |
| 840 | #mwai-workspace .mwai-ws-feature-row.is-locked .mwai-ws-feature-label { color: var(--ink-soft); } |
| 841 | #mwai-workspace .mwai-ws-feature-row.is-locked .mwai-ws-feature-ico { opacity: 0.6; } |
| 842 | #mwai-workspace .mwai-ws-pro-chip { |
| 843 | margin-left: auto; |
| 844 | font-family: "Spline Sans Mono", monospace; font-size: 9px; letter-spacing: 1.1px; |
| 845 | text-transform: uppercase; color: var(--accent); padding: 2px 7px; border-radius: 6px; |
| 846 | background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); |
| 847 | } |
| 848 | #mwai-workspace .mwai-ws-feature-row { display: flex; align-items: center; gap: 10px; padding-right: 8px; } |
| 849 | #mwai-workspace .mwai-ws-feature-ico { display: grid; place-items: center; color: var(--ink-soft); } |
| 850 | #mwai-workspace .mwai-ws-feature-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } |
| 851 | #mwai-workspace .mwai-ws-feature-label { font-weight: 500; } |
| 852 | /* The pin lives at the far right of the row, always; the status (if any) |
| 853 | sits right before it. */ |
| 854 | #mwai-workspace .mwai-ws-feature-status { |
| 855 | margin-left: auto; |
| 856 | font-family: "Spline Sans Mono", monospace; |
| 857 | font-size: 10px; color: var(--accent); |
| 858 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; |
| 859 | } |
| 860 | #mwai-workspace .mwai-ws-pin-btn { |
| 861 | width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer; |
| 862 | background: transparent; color: var(--ink-faint); display: grid; place-items: center; |
| 863 | flex-shrink: 0; margin-left: auto; |
| 864 | transition: background 0.15s ease, color 0.15s ease; |
| 865 | } |
| 866 | #mwai-workspace .mwai-ws-feature-status + .mwai-ws-pin-btn { margin-left: 8px; } |
| 867 | #mwai-workspace .mwai-ws-pin-btn:hover { background: var(--bg); color: var(--ink); } |
| 868 | #mwai-workspace .mwai-ws-pin-btn.on { color: var(--accent); } |
| 869 | #mwai-workspace .mwai-ws-pin-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } |
| 870 | #mwai-workspace .mwai-ws-pin-btn.on svg { fill: var(--accent-soft); } |
| 871 | |
| 872 | /* ---- File chips ---- */ |
| 873 | #mwai-workspace .mwai-ws-filechips { |
| 874 | display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px 0; |
| 875 | } |
| 876 | #mwai-workspace .mwai-ws-filechip { |
| 877 | display: flex; align-items: center; gap: 7px; max-width: 210px; |
| 878 | background: var(--bg); border: 1px solid var(--hairline); border-radius: 9px; |
| 879 | padding: 5px 7px; font-size: 12px; |
| 880 | transition: border-color 0.2s ease, opacity 0.2s ease; |
| 881 | } |
| 882 | #mwai-workspace .mwai-ws-filechip.uploading { opacity: 0.75; } |
| 883 | #mwai-workspace .mwai-ws-filechip img { |
| 884 | width: 26px; height: 26px; object-fit: cover; border-radius: 6px; display: block; |
| 885 | } |
| 886 | #mwai-workspace .mwai-ws-filechip-ico { display: grid; place-items: center; color: var(--ink-soft); } |
| 887 | #mwai-workspace .mwai-ws-filechip-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; } |
| 888 | #mwai-workspace .mwai-ws-filechip-name { |
| 889 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; |
| 890 | } |
| 891 | #mwai-workspace .mwai-ws-filechip-prog { |
| 892 | font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--accent); |
| 893 | } |
| 894 | #mwai-workspace .mwai-ws-filechip-x { |
| 895 | width: 18px; height: 18px; border: none; border-radius: 5px; cursor: pointer; |
| 896 | background: transparent; color: var(--ink-faint); |
| 897 | font-size: 15px; line-height: 1; display: grid; place-items: center; flex-shrink: 0; |
| 898 | } |
| 899 | #mwai-workspace .mwai-ws-filechip-x:hover { background: var(--bg-hover); color: #e5484d; } |
| 900 | |
| 901 | /* ---- Lightbox ---- */ |
| 902 | #mwai-workspace .mwai-ws-lightbox { |
| 903 | position: fixed; inset: 0; z-index: 100000; |
| 904 | background: rgba(9, 10, 13, 0.88); |
| 905 | backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); |
| 906 | display: grid; place-items: center; cursor: zoom-out; |
| 907 | animation: mwai-ws-lb-fade 0.18s ease both; |
| 908 | } |
| 909 | #mwai-workspace .mwai-ws-lightbox img { |
| 910 | max-width: 92vw; max-height: 86vh; border-radius: 14px; cursor: default; |
| 911 | box-shadow: 0 40px 110px -20px rgba(0, 0, 0, 0.75); |
| 912 | animation: mwai-ws-lb-in 0.22s ease both; |
| 913 | } |
| 914 | #mwai-workspace .mwai-ws-lightbox-bar { |
| 915 | position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); |
| 916 | display: flex; align-items: center; gap: 6px; padding: 6px 8px; |
| 917 | background: rgba(23, 24, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); |
| 918 | border-radius: 12px; cursor: default; |
| 919 | box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6); |
| 920 | } |
| 921 | #mwai-workspace .mwai-ws-lightbox-bar a, |
| 922 | #mwai-workspace .mwai-ws-lightbox-bar button { |
| 923 | border: none; background: transparent; cursor: pointer; |
| 924 | color: #c9cbd3; text-decoration: none; |
| 925 | font-family: "Spline Sans Mono", monospace; font-size: 11.5px; |
| 926 | padding: 6px 11px; border-radius: 8px; |
| 927 | transition: background 0.15s ease, color 0.15s ease; |
| 928 | } |
| 929 | #mwai-workspace .mwai-ws-lightbox-bar a:hover, |
| 930 | #mwai-workspace .mwai-ws-lightbox-bar button:hover { |
| 931 | background: rgba(255, 255, 255, 0.1); color: #ffffff; |
| 932 | } |
| 933 | #mwai-workspace .mwai-ws-lightbox-chip { |
| 934 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; letter-spacing: 0.3px; |
| 935 | color: #9aa0ad; padding: 5px 10px; border-radius: 8px; |
| 936 | background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); |
| 937 | white-space: nowrap; font-variant-numeric: tabular-nums; |
| 938 | } |
| 939 | #mwai-workspace .mwai-ws-lightbox-chip.is-soon { color: #eab676; border-color: rgba(234, 182, 118, 0.35); } |
| 940 | #mwai-workspace .mwai-ws-lightbox-chip.is-library { color: #86c99b; border-color: rgba(134, 201, 155, 0.3); } |
| 941 | #mwai-workspace .mwai-ws-lightbox-bar .mwai-ws-lightbox-persist { |
| 942 | color: var(--accent, #7aa5f8); |
| 943 | } |
| 944 | #mwai-workspace .mwai-ws-lightbox-bar .mwai-ws-lightbox-persist:disabled { |
| 945 | opacity: 0.6; cursor: default; |
| 946 | } |
| 947 | @keyframes mwai-ws-lb-fade { from { opacity: 0; } } |
| 948 | @keyframes mwai-ws-lb-in { from { opacity: 0; transform: scale(0.96); } } |
| 949 | |
| 950 | /* ---- Tool approval card ---- */ |
| 951 | #mwai-workspace .mwai-ws-approval { |
| 952 | max-width: 560px; margin: 6px 0 4px; padding: 14px 16px; |
| 953 | background: var(--bg-raise); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); |
| 954 | border-left: 3px solid var(--accent); border-radius: 12px; |
| 955 | animation: mwai-ws-rise 0.3s ease both; |
| 956 | } |
| 957 | #mwai-workspace .mwai-ws-approval-head { |
| 958 | display: flex; align-items: center; gap: 8px; |
| 959 | font-family: "Spline Sans Mono", monospace; font-size: 10.5px; letter-spacing: 1.2px; |
| 960 | text-transform: uppercase; color: var(--accent); margin-bottom: 8px; |
| 961 | } |
| 962 | #mwai-workspace .mwai-ws-approval-ico { display: grid; place-items: center; } |
| 963 | #mwai-workspace .mwai-ws-approval-ico svg { width: 14px; height: 14px; } |
| 964 | #mwai-workspace .mwai-ws-approval-body { font-size: 13.5px; color: var(--ink); line-height: 1.5; } |
| 965 | #mwai-workspace .mwai-ws-approval-args { |
| 966 | margin: 10px 0 0; padding: 10px 12px; max-height: 180px; overflow: auto; |
| 967 | background: color-mix(in srgb, var(--ink) 5%, transparent); |
| 968 | border: 1px solid var(--hairline); border-radius: 8px; |
| 969 | font-family: "Spline Sans Mono", monospace; font-size: 11px; line-height: 1.55; |
| 970 | color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; |
| 971 | } |
| 972 | #mwai-workspace .mwai-ws-approval-actions { |
| 973 | display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; |
| 974 | } |
| 975 | #mwai-workspace .mwai-ws-approval-actions button { |
| 976 | border: 1px solid var(--hairline); background: transparent; color: var(--ink); |
| 977 | font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; |
| 978 | padding: 7px 14px; border-radius: 9px; transition: all 0.15s ease; |
| 979 | } |
| 980 | #mwai-workspace .mwai-ws-approval-actions button:disabled { opacity: 0.5; cursor: default; } |
| 981 | #mwai-workspace .mwai-ws-approval-deny:hover { border-color: #c96f6f; color: #c96f6f; } |
| 982 | #mwai-workspace .mwai-ws-approval-once { |
| 983 | border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); |
| 984 | } |
| 985 | #mwai-workspace .mwai-ws-approval-once:hover { background: var(--accent-soft); } |
| 986 | #mwai-workspace .mwai-ws-approval-always { |
| 987 | background: var(--accent); border-color: var(--accent); color: var(--accent-ink); |
| 988 | } |
| 989 | #mwai-workspace .mwai-ws-approval-always:hover { filter: brightness(1.08); } |
| 990 | |
| 991 | /* ---- Drop overlay + notices ---- */ |
| 992 | #mwai-workspace .mwai-ws-dropzone { |
| 993 | position: absolute; inset: 0; z-index: 70; border-radius: 16px; |
| 994 | border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-raise)); |
| 995 | display: grid; place-items: center; pointer-events: none; |
| 996 | font-size: 13.5px; font-weight: 600; color: var(--accent); |
| 997 | } |
| 998 | #mwai-workspace .mwai-ws-notices { max-width: 780px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 5px; } |
| 999 | #mwai-workspace .mwai-ws-notice { |
| 1000 | font-size: 12px; line-height: 1.45; padding: 7px 12px; border-radius: 9px; |
| 1001 | background: var(--accent-soft); color: var(--accent); |
| 1002 | } |
| 1003 | #mwai-workspace .mwai-ws-notice.warn { |
| 1004 | background: color-mix(in srgb, #d9a54f 12%, transparent); |
| 1005 | color: color-mix(in srgb, #d9a54f 80%, var(--ink)); |
| 1006 | } |
| 1007 |