| Server IP : 121.121.20.254 / Your IP : 216.73.216.202 Web Server : Microsoft-IIS/10.0 System : Windows NT WEB-SERVER 10.0 build 20348 (Windows Server 2022) AMD64 User : IUSR ( 0) PHP Version : 8.3.28 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/inetpub/wwwroot/AIWEBSTATION/wp-content/plugins/ai-engine-pro/app/ |
Upload File : |
/* ============ AI Engine — Workspace ============
Design reference: labs/workspace-mock.html (approved 2026-07-24).
Theme + accent are set as CSS variables on #mwai-workspace by the app. */
#mwai-workspace[data-theme="dark"] {
--bg: #17181c; --bg-deep: #121317; --bg-rail: #0e0f13; --bg-raise: #1e2026; --bg-hover: #23252c;
--ink: #e9e9ec; --ink-soft: #9b9da6; --ink-faint: #62646d; --hairline: #2a2c33;
--accent: hsl(217 85% 62%); --accent-ink: #ffffff; --accent-soft: hsl(217 85% 62% / 0.14);
--user-bubble: #232733; --code-bg: #101116;
--shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55);
--composer-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.5);
}
#mwai-workspace[data-theme="light"] {
--bg: #faf9f6; --bg-deep: #f2f0ec; --bg-rail: #edeae4; --bg-raise: #ffffff; --bg-hover: #eceae4;
--ink: #1d1e22; --ink-soft: #6d6e75; --ink-faint: #a4a5ab; --hairline: #e3e1da;
--accent: hsl(217 80% 42%); --accent-ink: #ffffff; --accent-soft: hsl(217 80% 42% / 0.10);
--user-bubble: #eef0f4; --code-bg: #16171b;
--shadow: 0 18px 50px -18px rgba(60, 50, 20, 0.25);
--composer-shadow: 0 10px 34px -10px rgba(60, 50, 20, 0.18);
}
#mwai-workspace {
position: fixed; inset: 0; z-index: 99999;
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";
background: var(--bg); color: var(--ink);
font-size: 14.5px; letter-spacing: 0.1px;
transition: background 0.35s ease, color 0.35s ease;
}
#mwai-workspace * { margin: 0; padding: 0; box-sizing: border-box; }
#mwai-workspace::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; z-index: 5;
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");
}
#mwai-workspace .mwai-ws { display: flex; height: 100%; }
/* ================= Rail ================= */
#mwai-workspace .mwai-ws-rail {
width: 64px; min-width: 64px; height: 100%;
background: var(--bg-rail); border-right: 1px solid var(--hairline);
display: flex; flex-direction: column; align-items: center;
padding: 15px 0 12px; gap: 5px;
transition: background 0.35s ease;
}
#mwai-workspace .mwai-ws-rail-logo { margin-bottom: 4px; }
#mwai-workspace .mwai-ws-rail-logo img { width: 30px; height: auto; display: block; }
#mwai-workspace .mwai-ws-rail-new {
width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer;
background: var(--accent); color: var(--accent-ink);
display: grid; place-items: center; margin: 6px 0 10px;
transition: transform 0.15s ease, filter 0.2s ease;
}
#mwai-workspace .mwai-ws-rail-new:hover { filter: brightness(1.08); transform: translateY(-1px); }
#mwai-workspace .mwai-ws-rail-new svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
#mwai-workspace .mwai-ws-rail-item {
width: 54px; padding: 8px 0 6px; border-radius: 10px; border: none; cursor: pointer;
background: transparent; color: var(--ink-soft); text-decoration: none;
display: flex; flex-direction: column; align-items: center; gap: 4px;
transition: background 0.15s ease, color 0.15s ease;
}
#mwai-workspace .mwai-ws-rail-item:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-rail-item.on { background: var(--accent-soft); color: var(--accent); }
#mwai-workspace .mwai-ws-rail-item svg {
width: 19px; height: 19px; stroke: currentColor; fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-rail-ico { position: relative; display: grid; place-items: center; }
#mwai-workspace .mwai-ws-rail-label { font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }
#mwai-workspace .mwai-ws-rail-soon {
position: absolute; top: -7px; right: -20px;
font-family: "Spline Sans Mono", monospace; font-size: 7px;
letter-spacing: 0.6px; text-transform: uppercase;
background: var(--bg-hover); color: var(--ink-faint);
border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 4px;
}
#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); }
#mwai-workspace .mwai-ws-rail-flex { flex: 1; }
/* ================= Sidebar (panel) ================= */
#mwai-workspace .mwai-ws-sidebar {
width: 272px; min-width: 0; height: 100%; overflow: hidden;
background: var(--bg-deep); border-right: 1px solid var(--hairline);
transition: background 0.35s ease, width 0.25s ease, border-color 0.25s ease;
}
#mwai-workspace .mwai-ws-sidebar.collapsed { width: 0; border-right-color: transparent; }
#mwai-workspace .mwai-ws-sidebar-inner {
width: 272px; min-width: 272px; height: 100%;
display: flex; flex-direction: column;
}
#mwai-workspace .mwai-ws-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
#mwai-workspace .mwai-ws-brand-text { display: flex; flex-direction: column; gap: 1px; }
#mwai-workspace .mwai-ws-brand-name {
font-family: "Spline Sans Mono", monospace;
font-weight: 600; font-size: 15px; letter-spacing: 0.2px; line-height: 1.1;
}
#mwai-workspace .mwai-ws-brand-sub {
font-size: 8.5px; color: var(--ink-faint);
letter-spacing: 2.3px; text-transform: uppercase; line-height: 12px;
}
#mwai-workspace .mwai-ws-back {
margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: none;
background: transparent; color: var(--ink-faint); cursor: pointer;
display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease;
text-decoration: none;
}
#mwai-workspace .mwai-ws-back:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
#mwai-workspace .mwai-ws-new-chat {
margin: 4px 16px 10px; display: flex; align-items: center; justify-content: center;
padding: 10px 14px; border-radius: 10px;
background: var(--accent); color: var(--accent-ink);
font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
border: none; transition: transform 0.15s ease, filter 0.2s ease;
}
#mwai-workspace .mwai-ws-new-chat:hover { filter: brightness(1.06); transform: translateY(-1px); }
#mwai-workspace .mwai-ws-search { margin: 0 16px 14px; position: relative; }
#mwai-workspace .mwai-ws-search input {
width: 100%; padding: 8px 12px 8px 30px;
background: var(--bg); border: 1px solid var(--hairline); border-radius: 9px;
color: var(--ink); font-family: inherit; font-size: 13px; outline: none;
transition: border-color 0.2s ease;
}
#mwai-workspace .mwai-ws-search input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); box-shadow: none; }
#mwai-workspace .mwai-ws-search input::placeholder { color: var(--ink-faint); }
#mwai-workspace .mwai-ws-search svg {
position: absolute; left: 10px; top: 9px; width: 13px; height: 13px;
stroke: var(--ink-faint); fill: none; stroke-width: 2;
}
#mwai-workspace .mwai-ws-convs { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
#mwai-workspace .mwai-ws-convs::-webkit-scrollbar { width: 8px; }
#mwai-workspace .mwai-ws-convs::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
#mwai-workspace .mwai-ws-group-label {
font-family: "Spline Sans Mono", monospace;
font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
color: var(--ink-faint); padding: 16px 10px 7px;
}
#mwai-workspace .mwai-ws-conv {
position: relative;
display: flex; flex-direction: column; gap: 3px;
padding: 9px 10px; border-radius: 9px; cursor: pointer;
margin-bottom: 3px;
transition: background 0.15s ease;
}
/* ---- Drag & drop conversations ---- */
#mwai-workspace .mwai-ws-conv[draggable="true"] { cursor: grab; }
/* Text selection must not compete with starting a drag. */
#mwai-workspace .mwai-ws-conv { user-select: none; -webkit-user-select: none; }
#mwai-workspace .mwai-ws-conv-edit { user-select: text; -webkit-user-select: text; }
#mwai-workspace .mwai-ws-conv.dragging { opacity: 0.4; }
#mwai-workspace .mwai-ws-convs.is-dragging .mwai-ws-cgroup,
#mwai-workspace .mwai-ws-convs.is-dragging .mwai-ws-folder-group {
border-radius: 10px; transition: box-shadow 0.15s ease, background 0.15s ease;
}
#mwai-workspace .mwai-ws-cgroup.drop-target,
#mwai-workspace .mwai-ws-folder-group.drop-target {
background: var(--accent-soft);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
#mwai-workspace .mwai-ws-dnddrop {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 4px 0; padding: 12px; border-radius: 10px;
border: 1.5px dashed var(--hairline); color: var(--ink-faint);
font-size: 12px; text-align: center; transition: all 0.15s ease;
}
#mwai-workspace .mwai-ws-dnddrop.over {
border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
#mwai-workspace .mwai-ws-dnddrop svg {
width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* ---- Conversation folders ---- */
#mwai-workspace .mwai-ws-folders-label {
display: flex; align-items: center; justify-content: space-between;
}
#mwai-workspace .mwai-ws-folder-add {
border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
transition: all 0.12s ease; margin: -2px -4px -2px 0;
}
#mwai-workspace .mwai-ws-folder-add:hover { background: var(--bg-hover); color: var(--accent); }
#mwai-workspace .mwai-ws-folder-add svg {
width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-folder-create { padding: 0 4px 4px; }
#mwai-workspace .mwai-ws-folder-create input {
width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
border: 1px solid var(--accent); background: transparent; color: var(--ink);
font-family: inherit; font-size: 13px; outline: none;
}
#mwai-workspace .mwai-ws-folders-empty {
font-size: 11.5px; color: var(--ink-faint); padding: 0 10px 6px; line-height: 1.45; font-style: italic;
}
#mwai-workspace .mwai-ws-folder-group { margin-bottom: 4px; }
#mwai-workspace .mwai-ws-folder-head {
display: flex; align-items: center; gap: 7px;
padding: 8px 10px; border-radius: 9px; cursor: pointer;
transition: background 0.15s ease; user-select: none;
}
#mwai-workspace .mwai-ws-folder-head:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-folder-chev { display: grid; place-items: center; color: var(--ink-faint); }
#mwai-workspace .mwai-ws-folder-chev svg {
width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease;
}
#mwai-workspace .mwai-ws-folder-chev.open svg { transform: rotate(90deg); }
#mwai-workspace .mwai-ws-folder-ico { display: grid; place-items: center; color: var(--accent); }
#mwai-workspace .mwai-ws-folder-ico svg {
width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-folder-name {
font-size: 13px; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
#mwai-workspace .mwai-ws-folder-count {
font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--ink-faint);
background: color-mix(in srgb, var(--ink) 7%, transparent);
padding: 1px 7px; border-radius: 8px;
}
#mwai-workspace .mwai-ws-folder-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s ease; }
#mwai-workspace .mwai-ws-folder-head:hover .mwai-ws-folder-actions { opacity: 1; }
#mwai-workspace .mwai-ws-folder-actions button {
width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer;
background: transparent; color: var(--ink-soft); display: grid; place-items: center;
transition: all 0.12s ease;
}
#mwai-workspace .mwai-ws-folder-actions button:hover { background: var(--bg-raise); color: var(--ink); }
#mwai-workspace .mwai-ws-folder-actions button.armed { color: #c96f6f; }
#mwai-workspace .mwai-ws-folder-actions button svg {
width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-folder-group .mwai-ws-conv { margin-left: 14px; }
#mwai-workspace .mwai-ws-folder-empty {
font-size: 11.5px; color: var(--ink-faint); padding: 2px 10px 8px 24px; font-style: italic;
}
#mwai-workspace .mwai-ws-folder-menu {
position: absolute; right: 8px; top: calc(100% - 6px); z-index: 70;
width: 210px; padding: 6px;
background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 10px;
box-shadow: var(--shadow); cursor: default;
}
#mwai-workspace .mwai-ws-folder-menu-item {
display: flex; align-items: center; gap: 8px; width: 100%;
border: none; background: transparent; color: var(--ink); cursor: pointer;
font-family: inherit; font-size: 12.5px; text-align: left;
padding: 7px 9px; border-radius: 7px; transition: background 0.12s ease;
}
#mwai-workspace .mwai-ws-folder-menu-item:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-folder-menu-item.on { color: var(--accent); font-weight: 600; }
#mwai-workspace .mwai-ws-folder-menu-item svg {
width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
#mwai-workspace .mwai-ws-folder-menu-item span {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
#mwai-workspace .mwai-ws-folder-check { margin-left: auto; }
#mwai-workspace .mwai-ws-folder-new { padding: 4px 3px 2px; border-top: 1px solid var(--hairline); margin-top: 4px; }
#mwai-workspace .mwai-ws-folder-new input {
width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 7px;
border: 1px solid var(--hairline); background: transparent; color: var(--ink);
font-family: inherit; font-size: 12.5px; outline: none;
}
#mwai-workspace .mwai-ws-folder-new input:focus { border-color: var(--accent); }
#mwai-workspace .mwai-ws-conv:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-conv.active { background: var(--bg-raise); box-shadow: inset 2px 0 0 var(--accent); }
#mwai-workspace .mwai-ws-conv-title {
font-size: 13.5px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mwai-workspace .mwai-ws-conv-edit {
font-family: inherit; font-size: 13px; color: var(--ink);
background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--hairline));
border-radius: 6px; padding: 3px 7px; outline: none; width: 100%;
}
#mwai-workspace .mwai-ws-conv-meta {
display: flex; align-items: center; gap: 7px;
font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint);
}
#mwai-workspace .mwai-ws-conv-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
#mwai-workspace .mwai-ws-conv:hover .mwai-ws-conv-actions { opacity: 1; }
#mwai-workspace .mwai-ws-conv-actions button {
width: 20px; height: 20px; border: none; background: transparent; cursor: pointer;
color: var(--ink-faint); display: grid; place-items: center; border-radius: 5px;
}
#mwai-workspace .mwai-ws-conv-actions button:hover { background: var(--bg); color: var(--ink); }
#mwai-workspace .mwai-ws-conv-actions button.armed { color: #e5484d; }
#mwai-workspace .mwai-ws-conv-actions button.pinned { color: var(--accent); opacity: 1; }
#mwai-workspace .mwai-ws-conv.active .mwai-ws-conv-actions button.pinned,
#mwai-workspace .mwai-ws-conv:not(:hover) .mwai-ws-conv-actions button.pinned { opacity: 1; }
#mwai-workspace .mwai-ws-conv-actions svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
#mwai-workspace .mwai-ws-empty-list {
padding: 24px 12px; color: var(--ink-faint); font-size: 13px; text-align: center;
}
#mwai-workspace .mwai-ws-me {
border-top: 1px solid var(--hairline);
padding: 14px 16px; display: flex; align-items: center; gap: 11px;
}
#mwai-workspace .mwai-ws-me-id { flex: 1; min-width: 0; }
#mwai-workspace .mwai-ws-me-id .mwai-ws-me-name,
#mwai-workspace .mwai-ws-me-id .mwai-ws-me-role {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mwai-workspace .mwai-ws-theme-swap {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft);
display: grid; place-items: center; cursor: pointer; transition: all 0.15s ease;
}
#mwai-workspace .mwai-ws-theme-swap:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-theme-swap svg {
width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, #5d78e0, #9a5de0);
display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff;
}
#mwai-workspace .mwai-ws-me-name { font-size: 13px; font-weight: 500; }
#mwai-workspace .mwai-ws-me-role { font-size: 11px; color: var(--ink-faint); text-transform: capitalize; }
/* ================= Prompts panel ================= */
#mwai-workspace .mwai-ws-prompt-preview {
min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mwai-workspace .mwai-ws-prompt-editor {
margin: 0 16px 12px; padding: 10px;
background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px;
display: flex; flex-direction: column; gap: 8px;
}
#mwai-workspace .mwai-ws-prompt-editor input,
#mwai-workspace .mwai-ws-prompt-editor textarea {
width: 100%; background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px;
color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 10px;
outline: none; resize: vertical; box-shadow: none; line-height: 1.5;
transition: border-color 0.2s ease;
}
#mwai-workspace .mwai-ws-prompt-editor input:focus,
#mwai-workspace .mwai-ws-prompt-editor textarea:focus {
border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); box-shadow: none;
}
#mwai-workspace .mwai-ws-prompt-editor .mwai-ws-edit-actions { margin-top: 0; }
/* ================= Settings panel ================= */
#mwai-workspace .mwai-ws-settings { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
#mwai-workspace .mwai-ws-settings .mwai-ws-group-label { padding: 14px 0 8px; }
#mwai-workspace .mwai-ws-theme-seg {
display: flex; gap: 3px; padding: 3px;
background: var(--bg); border: 1px solid var(--hairline); border-radius: 10px;
}
#mwai-workspace .mwai-ws-theme-seg button {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 7px 0; border: none; border-radius: 8px; cursor: pointer;
background: transparent; color: var(--ink-soft);
font-family: inherit; font-size: 12.5px; font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
}
#mwai-workspace .mwai-ws-theme-seg button.on {
background: var(--bg-raise); color: var(--ink);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
#mwai-workspace .mwai-ws-theme-seg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
#mwai-workspace .mwai-ws-accent-row { display: flex; align-items: center; gap: 9px; padding: 4px 2px; }
#mwai-workspace .mwai-ws-swatch {
width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
outline: 2px solid transparent; outline-offset: 2px;
transition: transform 0.15s ease, outline-color 0.2s ease;
}
#mwai-workspace .mwai-ws-swatch:hover { transform: scale(1.15); }
#mwai-workspace .mwai-ws-swatch.on { outline-color: var(--ink-soft); }
#mwai-workspace .mwai-ws-accent-name { font-size: 12px; color: var(--ink-soft); margin-left: 3px; }
/* ================= Coming soon (Agents) ================= */
#mwai-workspace .mwai-ws-coming {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 9px; padding: 0 26px 40px; text-align: center;
}
#mwai-workspace .mwai-ws-coming img { width: 54px; height: auto; opacity: 0.85; }
#mwai-workspace .mwai-ws-coming-title { font-weight: 600; font-size: 15px; }
#mwai-workspace .mwai-ws-coming-sub {
font-family: "Newsreader", serif; font-style: italic; font-weight: 300;
font-size: 14px; color: var(--ink-faint); line-height: 1.5;
}
#mwai-workspace .mwai-ws-coming-pill {
font-family: "Spline Sans Mono", monospace; font-size: 9px;
letter-spacing: 1.5px; text-transform: uppercase;
background: var(--accent-soft); color: var(--accent);
padding: 4px 12px; border-radius: 20px; margin-top: 5px;
}
/* ================= Main ================= */
#mwai-workspace .mwai-ws-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#mwai-workspace .mwai-ws-topbar {
display: flex; align-items: center; gap: 14px;
padding: 14px 26px; border-bottom: 1px solid var(--hairline);
}
#mwai-workspace .mwai-ws-conv-name {
font-weight: 600; font-size: 14.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
#mwai-workspace .mwai-ws-conv-cost {
font-family: "Spline Sans Mono", monospace; font-size: 11px;
color: var(--accent); background: var(--accent-soft);
padding: 3px 9px; border-radius: 20px;
}
#mwai-workspace .mwai-ws-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#mwai-workspace .mwai-ws-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
#mwai-workspace .mwai-ws-model { position: relative; }
#mwai-workspace .mwai-ws-model-pill {
display: flex; align-items: center; gap: 9px;
background: var(--bg-raise); border: 1px solid var(--hairline); color: var(--ink);
padding: 7px 13px; border-radius: 22px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 500;
transition: border-color 0.2s ease, transform 0.15s ease;
}
#mwai-workspace .mwai-ws-model-pill:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); transform: translateY(-1px); }
#mwai-workspace .mwai-ws-chev { color: var(--ink-faint); font-size: 18px; line-height: 0; }
#mwai-workspace .mwai-ws-model-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
width: 280px; max-height: 430px; overflow-y: auto;
background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px;
box-shadow: var(--shadow); padding: 8px;
}
#mwai-workspace .mwai-ws-model-menu::-webkit-scrollbar { width: 8px; }
#mwai-workspace .mwai-ws-model-menu::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
#mwai-workspace .mwai-ws-model-env {
display: flex; align-items: center; gap: 7px; width: 100%;
font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink-faint); padding: 9px 8px;
background: transparent; border: none; cursor: pointer; border-radius: 7px;
}
#mwai-workspace .mwai-ws-model-env:hover { background: var(--bg-hover); color: var(--ink-soft); }
#mwai-workspace .mwai-ws-model-env .mwai-ws-env-chev {
margin-left: auto; font-size: 18px; line-height: 0; transition: transform 0.15s ease;
}
#mwai-workspace .mwai-ws-model-env.open .mwai-ws-env-chev { transform: rotate(180deg); }
#mwai-workspace .mwai-ws-model-item {
display: block; width: 100%; text-align: left;
border: none; background: transparent; color: var(--ink); cursor: pointer;
font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px;
transition: background 0.12s ease;
}
#mwai-workspace .mwai-ws-model-item:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-model-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* ================= Messages ================= */
#mwai-workspace .mwai-ws-scroll { flex: 1; overflow-y: auto; }
#mwai-workspace .mwai-ws-scroll::-webkit-scrollbar { width: 10px; }
#mwai-workspace .mwai-ws-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 5px; }
#mwai-workspace .mwai-ws-thread { max-width: 780px; margin: 0 auto; padding: 46px 28px 30px; }
#mwai-workspace .mwai-ws-hero {
height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding-bottom: 8vh;
}
#mwai-workspace .mwai-ws-hero-title { font-size: 26px; font-weight: 600; letter-spacing: -0.3px; }
#mwai-workspace .mwai-ws-hero-sub {
font-family: "Newsreader", serif; font-style: italic; font-weight: 300;
font-size: 16px; color: var(--ink-faint);
}
#mwai-workspace .mwai-ws-msg { margin-bottom: 38px; animation: mwai-ws-rise 0.4s ease both; }
@keyframes mwai-ws-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#mwai-workspace .mwai-ws-msg.user { display: flex; justify-content: flex-end; }
#mwai-workspace .mwai-ws-bubble {
background: var(--user-bubble); border-radius: 16px 16px 4px 16px;
/* 100%, not a nested percentage: the wrap already caps at 82%, and a
percentage here resolves against the wrap's shrink-to-fit width, which
squeezed SHORT messages onto two lines. */
padding: 13px 18px; max-width: 100%; line-height: 1.55;
}
#mwai-workspace .mwai-ws-user-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 82%; }
#mwai-workspace .mwai-ws-user-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#mwai-workspace .mwai-ws-user-imgs img {
max-width: 150px; max-height: 150px; border-radius: 10px; display: block;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
#mwai-workspace .mwai-ws-user-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s ease; }
#mwai-workspace .mwai-ws-msg.user:hover .mwai-ws-user-actions { opacity: 1; }
#mwai-workspace .mwai-ws-user-actions button {
width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
background: transparent; color: var(--ink-soft); display: grid; place-items: center;
}
#mwai-workspace .mwai-ws-user-actions button:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-user-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
#mwai-workspace .mwai-ws-edit {
width: 100%; background: var(--bg-raise); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--hairline));
border-radius: 16px 16px 4px 16px; padding: 12px 14px 10px;
}
#mwai-workspace .mwai-ws-edit textarea {
width: 100%; border: none; outline: none; resize: none; box-shadow: none;
background: transparent; color: var(--ink);
font-family: inherit; font-size: 14.5px; line-height: 1.55; min-height: 24px;
}
#mwai-workspace .mwai-ws-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#mwai-workspace .mwai-ws-edit-cancel, #mwai-workspace .mwai-ws-edit-save {
border: none; border-radius: 8px; padding: 6px 13px; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 600;
}
#mwai-workspace .mwai-ws-edit-cancel { background: transparent; color: var(--ink-soft); }
#mwai-workspace .mwai-ws-edit-cancel:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-edit-save { background: var(--accent); color: var(--accent-ink); }
#mwai-workspace .mwai-ws-edit-save:hover { filter: brightness(1.07); }
#mwai-workspace .mwai-ws-msg.is-error .mwai-ws-error {
color: #e5484d; background: color-mix(in srgb, #e5484d 8%, transparent);
border: 1px solid color-mix(in srgb, #e5484d 25%, transparent);
border-radius: 12px; padding: 12px 16px; font-size: 13.5px;
}
#mwai-workspace .mwai-ws-ai-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
#mwai-workspace .mwai-ws-ai-name { font-weight: 600; font-size: 13px; }
#mwai-workspace .mwai-ws-ai-model { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint); }
#mwai-workspace .mwai-ws-ai-stopped {
font-family: "Spline Sans Mono", monospace; font-size: 9px;
letter-spacing: 0.8px; text-transform: uppercase;
color: var(--ink-faint); border: 1px solid var(--hairline);
border-radius: 20px; padding: 1px 8px;
}
#mwai-workspace .mwai-ws-body { line-height: 1.68; color: color-mix(in srgb, var(--ink) 94%, transparent); }
/* WP admin styles p at 13px globally, which made paragraphs smaller than list
items (14.5px inherited). Everything inherits the surface size instead. */
#mwai-workspace p { font-size: inherit; line-height: inherit; }
#mwai-workspace .mwai-ws-body p + p { margin-top: 12px; }
#mwai-workspace .mwai-ws-body pre {
margin: 14px 0; border-radius: 12px; background: var(--code-bg);
padding: 14px 16px; overflow-x: auto;
font-family: "Spline Sans Mono", monospace; font-size: 12.5px; line-height: 1.6; color: #dcdde3;
}
#mwai-workspace .mwai-ws-body code {
font-family: "Spline Sans Mono", monospace; font-size: 0.92em;
background: color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 5px; padding: 1px 5px;
}
#mwai-workspace .mwai-ws-body pre code { background: transparent; padding: 0; }
#mwai-workspace .mwai-ws-body pre code.hljs { background: transparent; padding: 0; }
#mwai-workspace .mwai-ws-body ul, #mwai-workspace .mwai-ws-body ol { padding-left: 22px; margin: 10px 0; }
#mwai-workspace .mwai-ws-body a { color: var(--accent); }
/* Generated/markdown images: the shared renderer caps them inline at 220px
(chatbot-sized); the Workspace canvas has room for more. */
#mwai-workspace .mwai-ws-body .mwai-image {
max-width: 100%; max-height: 480px !important;
border-radius: 12px; display: block; margin: 10px 0;
box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.4);
}
/* ---- Markdown typography (headings, lists, tables, quotes) ---- */
#mwai-workspace .mwai-ws-body h1, #mwai-workspace .mwai-ws-body h2,
#mwai-workspace .mwai-ws-body h3, #mwai-workspace .mwai-ws-body h4,
#mwai-workspace .mwai-ws-body h5, #mwai-workspace .mwai-ws-body h6 {
color: var(--ink); line-height: 1.3; font-weight: 650;
margin: 24px 0 10px; letter-spacing: -0.2px;
}
#mwai-workspace .mwai-ws-body h1 { font-size: 21px; }
#mwai-workspace .mwai-ws-body h2 { font-size: 18px; }
#mwai-workspace .mwai-ws-body h3 { font-size: 16px; }
#mwai-workspace .mwai-ws-body h4, #mwai-workspace .mwai-ws-body h5, #mwai-workspace .mwai-ws-body h6 { font-size: 14.5px; }
#mwai-workspace .mwai-ws-body > div > *:first-child { margin-top: 0; }
#mwai-workspace .mwai-ws-body ul { list-style: disc; }
#mwai-workspace .mwai-ws-body ol { list-style: decimal; }
#mwai-workspace .mwai-ws-body ul, #mwai-workspace .mwai-ws-body ol { padding-left: 24px; margin: 12px 0; }
#mwai-workspace .mwai-ws-body li { margin: 5px 0; }
#mwai-workspace .mwai-ws-body li::marker { color: var(--ink-faint); }
#mwai-workspace .mwai-ws-body li > ul, #mwai-workspace .mwai-ws-body li > ol { margin: 5px 0; }
#mwai-workspace .mwai-ws-body table {
border-collapse: separate; border-spacing: 0; margin: 16px 0; max-width: 100%;
font-size: 13.5px; border: 1px solid var(--hairline); border-radius: 10px;
overflow: hidden;
}
#mwai-workspace .mwai-ws-body th, #mwai-workspace .mwai-ws-body td {
padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--hairline);
}
#mwai-workspace .mwai-ws-body th {
font-weight: 600; font-size: 12.5px; color: var(--ink-soft);
background: var(--bg-deep); letter-spacing: 0.2px;
}
#mwai-workspace .mwai-ws-body tr:last-child td { border-bottom: none; }
#mwai-workspace .mwai-ws-body tbody tr:hover td { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
#mwai-workspace .mwai-ws-body blockquote {
border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--hairline));
margin: 14px 0; padding: 4px 16px; color: var(--ink-soft);
}
#mwai-workspace .mwai-ws-body hr {
border: none; border-top: 1px solid var(--hairline); margin: 20px 0;
}
#mwai-workspace .mwai-ws-body strong { font-weight: 650; color: var(--ink); }
/* The shared code-copy button (from ChatbotContent) restyled for this surface.
Workspace code blocks are dark in BOTH themes, so the button must not inherit
the light theme's dark ink (it was unreadable there). */
#mwai-workspace .mwai-ws-body .mwai-code-copy {
font-family: "Spline Sans Mono", monospace;
/* !important: the shared button ships inline styles (color: inherit), which
turn near-black in the light theme on our always-dark blocks. */
color: #c9cbd3 !important; background: rgba(255, 255, 255, 0.12) !important;
opacity: 1 !important;
}
#mwai-workspace .mwai-ws-body .mwai-code-copy:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.2) !important; }
/* ---- Live activity trail (tool/function/MCP calls while generating) ---- */
#mwai-workspace .mwai-ws-trail {
display: flex; flex-direction: column; gap: 7px; margin: 2px 0 12px;
}
#mwai-workspace .mwai-ws-trail-item {
display: flex; align-items: center; gap: 9px;
font-family: "Spline Sans Mono", monospace; font-size: 11px;
color: var(--ink-faint);
animation: mwai-ws-trail-in 0.3s ease both;
}
#mwai-workspace .mwai-ws-trail-item:nth-last-child(2) { opacity: 0.75; }
#mwai-workspace .mwai-ws-trail-item:nth-last-child(3) { opacity: 0.5; }
#mwai-workspace .mwai-ws-trail-item:last-child { color: var(--ink-soft); }
#mwai-workspace .mwai-ws-trail-ico { display: grid; place-items: center; }
#mwai-workspace .mwai-ws-trail-ico svg {
width: 12px; height: 12px; stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-trail-item:last-child .mwai-ws-trail-ico {
color: var(--accent); animation: mwai-ws-trail-pulse 1.3s ease-in-out infinite;
}
#mwai-workspace .mwai-ws-trail-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mwai-ws-trail-in { from { opacity: 0; transform: translateY(5px); } to { transform: none; } }
@keyframes mwai-ws-trail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
#mwai-workspace .mwai-ws-thinking { display: inline-flex; gap: 5px; padding: 4px 0; }
#mwai-workspace .mwai-ws-thinking span {
width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
animation: mwai-ws-bounce 1.2s ease-in-out infinite;
}
#mwai-workspace .mwai-ws-thinking span:nth-child(2) { animation-delay: 0.15s; }
#mwai-workspace .mwai-ws-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mwai-ws-bounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
#mwai-workspace .mwai-ws-msg-actions { display: flex; gap: 2px; margin-top: 10px; opacity: 0; transition: opacity 0.2s ease; }
#mwai-workspace .mwai-ws-msg.ai:hover .mwai-ws-msg-actions { opacity: 1; }
#mwai-workspace .mwai-ws-msg-actions button {
width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
background: transparent; color: var(--ink-soft); display: grid; place-items: center;
}
#mwai-workspace .mwai-ws-msg-actions button:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-msg-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
/* ---- Per-message "more" menu (time + branch) ---- */
#mwai-workspace .mwai-ws-msg-more { position: relative; display: inline-block; }
#mwai-workspace .mwai-ws-msg-menu {
position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
min-width: 200px; padding: 6px;
background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 11px;
box-shadow: var(--shadow);
}
#mwai-workspace .mwai-ws-msg-menu-time {
font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 0.8px;
text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px 7px;
border-bottom: 1px solid var(--hairline); margin-bottom: 5px;
}
#mwai-workspace .mwai-ws-msg-menu button {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
border: none; background: transparent; color: var(--ink); cursor: pointer;
font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px;
transition: background 0.12s ease;
}
#mwai-workspace .mwai-ws-msg-menu button:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-msg-menu button svg {
width: 14px; height: 14px; stroke: currentColor; fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* ---- Time chips between messages ---- */
#mwai-workspace .mwai-ws-timechip {
text-align: center; margin: 4px 0 22px;
font-family: "Spline Sans Mono", monospace; font-size: 10.5px;
letter-spacing: 0.8px; color: var(--ink-faint);
}
/* ================= Composer ================= */
#mwai-workspace .mwai-ws-composer-wrap { padding: 6px 28px 22px; position: relative; }
#mwai-workspace .mwai-ws-composer {
max-width: 780px; margin: 0 auto; position: relative;
background: var(--bg-raise); border: 1px solid var(--hairline);
border-radius: 16px; box-shadow: var(--composer-shadow);
transition: border-color 0.2s ease;
}
#mwai-workspace .mwai-ws-composer.dragover { border-color: var(--accent); }
#mwai-workspace .mwai-ws-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); }
#mwai-workspace .mwai-ws-composer textarea {
width: 100%; border: none; outline: none; resize: none; box-shadow: none;
background: transparent; color: var(--ink);
font-family: inherit; font-size: 14.5px; line-height: 1.5;
padding: 16px 18px 6px; height: 58px;
}
#mwai-workspace .mwai-ws-composer textarea:focus { outline: none; box-shadow: none; }
#mwai-workspace .mwai-ws-composer textarea::placeholder { color: var(--ink-faint); }
#mwai-workspace .mwai-ws-composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 10px; }
#mwai-workspace .mwai-ws-send {
margin-left: auto;
background: var(--accent); color: var(--accent-ink);
border: none; border-radius: 10px; padding: 8px 16px;
font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
transition: filter 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
#mwai-workspace .mwai-ws-send:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
#mwai-workspace .mwai-ws-send:disabled { opacity: 0.45; cursor: default; }
#mwai-workspace .mwai-ws-stop {
margin-left: auto; display: flex; align-items: center; gap: 7px;
background: transparent; color: var(--ink);
border: 1px solid var(--hairline); border-radius: 10px; padding: 7px 14px;
font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
transition: border-color 0.2s ease, background 0.15s ease;
}
#mwai-workspace .mwai-ws-stop:hover { border-color: #e5484d; color: #e5484d; }
#mwai-workspace .mwai-ws-stop svg {
width: 13px; height: 13px; stroke: currentColor; fill: currentColor; stroke-width: 1.5;
}
#mwai-workspace .mwai-ws-composer-hint {
max-width: 780px; margin: 9px auto 0; text-align: center;
font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint);
}
/* ---- Composer icon toolbar ---- */
#mwai-workspace .mwai-ws-icon-btn {
position: relative; width: 32px; height: 32px; border-radius: 9px; border: none;
background: transparent; color: var(--ink-soft); cursor: pointer;
display: grid; place-items: center;
transition: background 0.15s ease, color 0.15s ease;
}
#mwai-workspace .mwai-ws-icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
#mwai-workspace .mwai-ws-icon-btn.on { color: var(--accent); background: var(--accent-soft); }
#mwai-workspace .mwai-ws-icon-btn svg {
width: 16px; height: 16px; stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#mwai-workspace .mwai-ws-icon-badge {
position: absolute; top: -3px; right: -3px;
min-width: 14px; height: 14px; padding: 0 3px; border-radius: 8px;
background: var(--accent); color: var(--accent-ink);
font-family: "Spline Sans Mono", monospace; font-size: 8.5px; line-height: 14px;
}
/* ---- Model parameters (topbar tune menu) ---- */
#mwai-workspace .mwai-ws-tune { position: relative; }
#mwai-workspace .mwai-ws-tune .mwai-ws-pop.mwai-ws-tune-pop {
bottom: auto; left: auto; right: 0; top: calc(100% + 10px); width: 260px;
}
#mwai-workspace .mwai-ws-tune-dot {
position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
border-radius: 50%; background: var(--accent);
}
#mwai-workspace .mwai-ws-tune-row { padding: 8px 10px 4px; }
#mwai-workspace .mwai-ws-tune-label {
display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px; color: var(--ink); margin-bottom: 8px;
}
#mwai-workspace .mwai-ws-tune-value {
font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
#mwai-workspace .mwai-ws-tune-row input[type="range"] {
width: 100%; margin: 0 0 6px; accent-color: var(--accent); cursor: pointer;
}
#mwai-workspace .mwai-ws-tune-row input[type="range"]:disabled { opacity: 0.4; cursor: default; }
#mwai-workspace .mwai-ws-tune-seg { display: flex; gap: 4px; margin-bottom: 6px; }
#mwai-workspace .mwai-ws-tune-seg button {
flex: 1; border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft);
font-family: inherit; font-size: 11px; padding: 5px 0; border-radius: 7px; cursor: pointer;
transition: all 0.12s ease;
}
#mwai-workspace .mwai-ws-tune-seg button:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-tune-seg button.on {
background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--accent); font-weight: 600;
}
#mwai-workspace .mwai-ws-tune-pop .mwai-ws-pop-hint a { color: var(--accent); cursor: pointer; }
/* ---- Composer popovers ---- */
#mwai-workspace .mwai-ws-pop {
position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60;
width: 300px; max-height: 380px; overflow-y: auto;
background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 12px;
box-shadow: var(--shadow); padding: 8px;
}
#mwai-workspace .mwai-ws-pop::-webkit-scrollbar { width: 8px; }
#mwai-workspace .mwai-ws-pop::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
#mwai-workspace .mwai-ws-pop-title {
font-family: "Spline Sans Mono", monospace; font-size: 10px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px 8px;
}
#mwai-workspace .mwai-ws-pop-item {
position: relative; display: block; width: 100%; text-align: left;
border: none; background: transparent; color: var(--ink); cursor: pointer;
font-family: inherit; font-size: 13px; padding: 8px 30px 8px 10px; border-radius: 7px;
transition: background 0.12s ease;
}
#mwai-workspace .mwai-ws-pop-item:hover { background: var(--bg-hover); }
#mwai-workspace .mwai-ws-pop-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#mwai-workspace .mwai-ws-pop-sub {
display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
#mwai-workspace .mwai-ws-pop-item.on .mwai-ws-pop-sub { color: color-mix(in srgb, var(--accent) 65%, var(--ink-faint)); }
#mwai-workspace .mwai-ws-pop-check {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
display: grid; place-items: center;
}
#mwai-workspace .mwai-ws-pop-check svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
#mwai-workspace .mwai-ws-pop-hint {
font-size: 11px; color: var(--ink-faint); padding: 8px 8px 4px; line-height: 1.45;
}
#mwai-workspace .mwai-ws-pop-section {
font-family: "Spline Sans Mono", monospace; font-size: 9.5px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--ink-faint); padding: 10px 8px 4px;
border-top: 1px solid var(--hairline); margin-top: 6px;
}
#mwai-workspace .mwai-ws-pop-item:disabled {
opacity: 0.45; cursor: default;
}
#mwai-workspace .mwai-ws-pop-item:disabled:hover { background: transparent; }
#mwai-workspace .mwai-ws-pop-empty {
font-size: 12.5px; color: var(--ink-soft); padding: 6px 8px 8px; line-height: 1.5;
}
#mwai-workspace .mwai-ws-pop-empty a { color: var(--accent); }
/* ---- The + menu (features with pins) ---- */
#mwai-workspace .mwai-ws-feature-row.is-locked .mwai-ws-feature-label { color: var(--ink-soft); }
#mwai-workspace .mwai-ws-feature-row.is-locked .mwai-ws-feature-ico { opacity: 0.6; }
#mwai-workspace .mwai-ws-pro-chip {
margin-left: auto;
font-family: "Spline Sans Mono", monospace; font-size: 9px; letter-spacing: 1.1px;
text-transform: uppercase; color: var(--accent); padding: 2px 7px; border-radius: 6px;
background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
#mwai-workspace .mwai-ws-feature-row { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
#mwai-workspace .mwai-ws-feature-ico { display: grid; place-items: center; color: var(--ink-soft); }
#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; }
#mwai-workspace .mwai-ws-feature-label { font-weight: 500; }
/* The pin lives at the far right of the row, always; the status (if any)
sits right before it. */
#mwai-workspace .mwai-ws-feature-status {
margin-left: auto;
font-family: "Spline Sans Mono", monospace;
font-size: 10px; color: var(--accent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}
#mwai-workspace .mwai-ws-pin-btn {
width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer;
background: transparent; color: var(--ink-faint); display: grid; place-items: center;
flex-shrink: 0; margin-left: auto;
transition: background 0.15s ease, color 0.15s ease;
}
#mwai-workspace .mwai-ws-feature-status + .mwai-ws-pin-btn { margin-left: 8px; }
#mwai-workspace .mwai-ws-pin-btn:hover { background: var(--bg); color: var(--ink); }
#mwai-workspace .mwai-ws-pin-btn.on { color: var(--accent); }
#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; }
#mwai-workspace .mwai-ws-pin-btn.on svg { fill: var(--accent-soft); }
/* ---- File chips ---- */
#mwai-workspace .mwai-ws-filechips {
display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px 0;
}
#mwai-workspace .mwai-ws-filechip {
display: flex; align-items: center; gap: 7px; max-width: 210px;
background: var(--bg); border: 1px solid var(--hairline); border-radius: 9px;
padding: 5px 7px; font-size: 12px;
transition: border-color 0.2s ease, opacity 0.2s ease;
}
#mwai-workspace .mwai-ws-filechip.uploading { opacity: 0.75; }
#mwai-workspace .mwai-ws-filechip img {
width: 26px; height: 26px; object-fit: cover; border-radius: 6px; display: block;
}
#mwai-workspace .mwai-ws-filechip-ico { display: grid; place-items: center; color: var(--ink-soft); }
#mwai-workspace .mwai-ws-filechip-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
#mwai-workspace .mwai-ws-filechip-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#mwai-workspace .mwai-ws-filechip-prog {
font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--accent);
}
#mwai-workspace .mwai-ws-filechip-x {
width: 18px; height: 18px; border: none; border-radius: 5px; cursor: pointer;
background: transparent; color: var(--ink-faint);
font-size: 15px; line-height: 1; display: grid; place-items: center; flex-shrink: 0;
}
#mwai-workspace .mwai-ws-filechip-x:hover { background: var(--bg-hover); color: #e5484d; }
/* ---- Lightbox ---- */
#mwai-workspace .mwai-ws-lightbox {
position: fixed; inset: 0; z-index: 100000;
background: rgba(9, 10, 13, 0.88);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
display: grid; place-items: center; cursor: zoom-out;
animation: mwai-ws-lb-fade 0.18s ease both;
}
#mwai-workspace .mwai-ws-lightbox img {
max-width: 92vw; max-height: 86vh; border-radius: 14px; cursor: default;
box-shadow: 0 40px 110px -20px rgba(0, 0, 0, 0.75);
animation: mwai-ws-lb-in 0.22s ease both;
}
#mwai-workspace .mwai-ws-lightbox-bar {
position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 6px; padding: 6px 8px;
background: rgba(23, 24, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; cursor: default;
box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6);
}
#mwai-workspace .mwai-ws-lightbox-bar a,
#mwai-workspace .mwai-ws-lightbox-bar button {
border: none; background: transparent; cursor: pointer;
color: #c9cbd3; text-decoration: none;
font-family: "Spline Sans Mono", monospace; font-size: 11.5px;
padding: 6px 11px; border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
#mwai-workspace .mwai-ws-lightbox-bar a:hover,
#mwai-workspace .mwai-ws-lightbox-bar button:hover {
background: rgba(255, 255, 255, 0.1); color: #ffffff;
}
#mwai-workspace .mwai-ws-lightbox-chip {
font-family: "Spline Sans Mono", monospace; font-size: 10.5px; letter-spacing: 0.3px;
color: #9aa0ad; padding: 5px 10px; border-radius: 8px;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
#mwai-workspace .mwai-ws-lightbox-chip.is-soon { color: #eab676; border-color: rgba(234, 182, 118, 0.35); }
#mwai-workspace .mwai-ws-lightbox-chip.is-library { color: #86c99b; border-color: rgba(134, 201, 155, 0.3); }
#mwai-workspace .mwai-ws-lightbox-bar .mwai-ws-lightbox-persist {
color: var(--accent, #7aa5f8);
}
#mwai-workspace .mwai-ws-lightbox-bar .mwai-ws-lightbox-persist:disabled {
opacity: 0.6; cursor: default;
}
@keyframes mwai-ws-lb-fade { from { opacity: 0; } }
@keyframes mwai-ws-lb-in { from { opacity: 0; transform: scale(0.96); } }
/* ---- Tool approval card ---- */
#mwai-workspace .mwai-ws-approval {
max-width: 560px; margin: 6px 0 4px; padding: 14px 16px;
background: var(--bg-raise); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-left: 3px solid var(--accent); border-radius: 12px;
animation: mwai-ws-rise 0.3s ease both;
}
#mwai-workspace .mwai-ws-approval-head {
display: flex; align-items: center; gap: 8px;
font-family: "Spline Sans Mono", monospace; font-size: 10.5px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
#mwai-workspace .mwai-ws-approval-ico { display: grid; place-items: center; }
#mwai-workspace .mwai-ws-approval-ico svg { width: 14px; height: 14px; }
#mwai-workspace .mwai-ws-approval-body { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
#mwai-workspace .mwai-ws-approval-args {
margin: 10px 0 0; padding: 10px 12px; max-height: 180px; overflow: auto;
background: color-mix(in srgb, var(--ink) 5%, transparent);
border: 1px solid var(--hairline); border-radius: 8px;
font-family: "Spline Sans Mono", monospace; font-size: 11px; line-height: 1.55;
color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
}
#mwai-workspace .mwai-ws-approval-actions {
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
#mwai-workspace .mwai-ws-approval-actions button {
border: 1px solid var(--hairline); background: transparent; color: var(--ink);
font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
padding: 7px 14px; border-radius: 9px; transition: all 0.15s ease;
}
#mwai-workspace .mwai-ws-approval-actions button:disabled { opacity: 0.5; cursor: default; }
#mwai-workspace .mwai-ws-approval-deny:hover { border-color: #c96f6f; color: #c96f6f; }
#mwai-workspace .mwai-ws-approval-once {
border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
#mwai-workspace .mwai-ws-approval-once:hover { background: var(--accent-soft); }
#mwai-workspace .mwai-ws-approval-always {
background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
#mwai-workspace .mwai-ws-approval-always:hover { filter: brightness(1.08); }
/* ---- Drop overlay + notices ---- */
#mwai-workspace .mwai-ws-dropzone {
position: absolute; inset: 0; z-index: 70; border-radius: 16px;
border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-raise));
display: grid; place-items: center; pointer-events: none;
font-size: 13.5px; font-weight: 600; color: var(--accent);
}
#mwai-workspace .mwai-ws-notices { max-width: 780px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 5px; }
#mwai-workspace .mwai-ws-notice {
font-size: 12px; line-height: 1.45; padding: 7px 12px; border-radius: 9px;
background: var(--accent-soft); color: var(--accent);
}
#mwai-workspace .mwai-ws-notice.warn {
background: color-mix(in srgb, #d9a54f 12%, transparent);
color: color-mix(in srgb, #d9a54f 80%, var(--ink));
}