/* Workbench page rules move here as they are retired from legacy-pages.css. */ .wb-prompt-cases { position: relative; z-index: 1; width: min(100%, 1600px); margin-top: 8px; } .wb-prompt-cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-flow: dense; grid-auto-rows: 10px; gap: 8px; } .wb-prompt-case-card { position: relative; display: block; min-width: 0; min-height: 0; grid-row: span 14; overflow: hidden; border: 0; border-radius: 8px; background: var(--bg-inset); color: var(--fg-body); padding: 0; cursor: zoom-in; text-align: left; isolation: isolate; } .wb-prompt-case-card--ratio-wide { grid-column: span 1; grid-row: span 13; } .wb-prompt-case-card--ratio-tall { grid-column: span 1; grid-row: span 30; } .wb-prompt-case-card--ratio-square { grid-column: span 1; grid-row: span 18; } .wb-prompt-case-card--ratio-portrait { grid-column: span 1; grid-row: span 24; } .wb-prompt-case-card img { display: block; width: 100%; height: 100%; object-fit: cover; background: #07111b; transform: scale(1.001); transition: filter 180ms ease, transform 180ms ease; } .wb-prompt-case-card:hover img, .wb-prompt-case-card:focus-visible img { filter: brightness(0.72); transform: scale(1.035); } .wb-prompt-case-card > div { position: absolute; z-index: 1; } .wb-prompt-case-card > div { inset: auto 0 0; display: grid; gap: 4px; padding: 36px 12px 12px; background: rgba(0, 0, 0, 0.82); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease; } .wb-prompt-case-card:hover > div, .wb-prompt-case-card:focus-visible > div { opacity: 1; transform: translateY(0); } .wb-prompt-case-card strong { color: #fff; font-size: 13px; font-weight: 800; line-height: 1.3; } .wb-prompt-case-card em { color: rgba(255, 255, 255, 0.72); font-size: 12px; font-style: normal; font-weight: 650; } .web-shell .ai-workbench-page.is-launch .wb-home { gap: 20px; } .web-shell .ai-workbench-page.is-launch .wb-prompt-cases .wb-showcase__header { margin-bottom: 10px; } .wb-prompt-case-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 28px; background: rgba(2, 6, 12, 0.42); } .wb-prompt-case-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(2, 6, 12, 0.58); backdrop-filter: none; cursor: zoom-out; } .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: min(720px, calc(100svh - 56px)); position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, 0.95fr) minmax(300px, 1fr); width: min(880px, calc(100vw - 56px)); max-height: var(--prompt-case-modal-max-height); overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: #070b10; color: #e5edf7; box-shadow: none; } .wb-prompt-case-modal__media { display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 16px; background: #05080d; } .wb-prompt-case-modal__media img { display: block; width: 100%; max-height: min(560px, calc(100svh - 108px)); border-radius: 12px; object-fit: contain; box-shadow: none; } .wb-prompt-case-modal__sidebar { position: relative; display: grid; align-content: start; min-height: 0; max-height: var(--prompt-case-modal-max-height); gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 34px 26px 26px; scrollbar-gutter: stable; border-left: 1px solid rgba(148, 163, 184, 0.16); background: #0c1118; } .wb-prompt-case-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; background: rgba(15, 23, 42, 0.72); color: #e5edf7; cursor: pointer; } .wb-prompt-case-modal__close:hover { background: rgba(30, 41, 59, 0.95); color: #ffffff; } .wb-prompt-case-author { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; } .wb-prompt-case-author > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #00ff88; color: #061014; font-size: 13px; font-weight: 900; } .wb-prompt-case-author strong, .wb-prompt-case-meta h2 { color: #f8fafc; } .wb-prompt-case-author strong { display: block; overflow: hidden; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .wb-prompt-case-author em, .wb-prompt-case-meta span { color: #94a3b8; font-size: 12px; font-style: normal; font-weight: 700; } .wb-prompt-case-meta { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .wb-prompt-case-meta h2 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.25; } .wb-prompt-case-meta p { margin: 0; color: #cbd5e1; font-size: 13px; font-weight: 650; line-height: 1.65; } .wb-prompt-case-prompt { display: grid; gap: 10px; } .wb-prompt-case-prompt span { color: #94a3b8; font-size: 14px; font-weight: 850; } .wb-prompt-case-prompt p { margin: 0; color: #e2e8f0; font-size: 14px; font-weight: 700; line-height: 1.75; white-space: pre-wrap; } .wb-prompt-case-actions { position: sticky; bottom: -1px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 -2px -2px; padding: 10px 2px 2px; background: #0c1118; } .wb-prompt-case-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; background: #16202c; color: #e5edf7; font-size: 14px; font-weight: 850; cursor: pointer; } .wb-prompt-case-actions button:hover { background: #1f2c3a; color: #ffffff; } .wb-prompt-case-actions button:first-child { background: #00ff88; border-color: #00ff88; color: #061014; } .wb-prompt-case-actions button:first-child:hover { background: #42ffa6; color: #061014; } @media (max-width: 980px) { .wb-prompt-cases__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 8px; gap: 8px; } .wb-prompt-case-card { grid-row: span 13; } .wb-prompt-case-card--ratio-wide { grid-column: span 1; grid-row: span 7; } .wb-prompt-case-card--ratio-tall { grid-column: span 1; grid-row: span 19; } .wb-prompt-case-card--ratio-square { grid-column: span 1; grid-row: span 11; } .wb-prompt-case-card--ratio-portrait { grid-column: span 1; grid-row: span 14; } .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: calc(100svh - 28px); width: min(640px, calc(100vw - 28px)); max-height: var(--prompt-case-modal-max-height); grid-template-columns: 1fr; overflow-y: auto; } .wb-prompt-case-modal__media { min-height: 0; overflow: visible; padding: 18px; } .wb-prompt-case-modal__sidebar { max-height: none; overflow: visible; border-left: 0; border-top: 1px solid rgba(148, 163, 184, 0.16); padding: 24px 22px 24px; } .wb-prompt-case-modal__close { right: 14px; top: 14px; } } @media (max-width: 560px) { .wb-prompt-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8px; gap: 8px; } .wb-prompt-case-card { grid-row: span 12; } .wb-prompt-case-card--ratio-wide { grid-column: span 1; grid-row: span 7; } .wb-prompt-case-card--ratio-tall { grid-column: span 1; grid-row: span 18; } .wb-prompt-case-card--ratio-square { grid-column: span 1; grid-row: span 11; } .wb-prompt-case-card--ratio-portrait { grid-column: span 1; grid-row: span 13; } .wb-prompt-case-card > div { padding: 34px 10px 10px; } .wb-prompt-case-card strong { font-size: 12px; } .wb-prompt-case-card em { font-size: 11px; } .wb-prompt-case-modal__media { padding: 16px; } .wb-prompt-case-modal__sidebar { padding: 22px 16px 22px; } .wb-prompt-case-actions { grid-template-columns: 1fr; } } @media (max-width: 720px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal { align-items: center; padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 12px 12px; background: radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb), 0.12), transparent 42%), rgba(0, 0, 0, 0.78); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px); display: grid; grid-template-rows: minmax(0, 60%) minmax(220px, 40%); width: min(100%, 520px); height: var(--prompt-case-modal-max-height); max-height: var(--prompt-case-modal-max-height); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), rgba(5, 8, 10, 0.96); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media { min-height: 0; align-content: center; padding: 14px 14px 8px; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.11), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 54%), rgba(4, 8, 13, 0.98); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media img { width: 100%; height: 100%; max-height: none; border-radius: 12px; object-fit: contain; background: rgba(0, 0, 0, 0.18); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 62%) minmax(220px, 38%); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media { padding: 14px 14px 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media img { max-width: 100%; max-height: 100%; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; max-height: none; gap: 10px; overflow: hidden; margin-top: -14px; padding: 18px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-left: 0; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), rgba(12, 17, 19, 0.99); box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28); scrollbar-width: thin; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar { margin-top: -14px; padding: 18px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-left: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close { top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; border-color: rgba(255, 255, 255, 0.18); background: rgba(8, 10, 11, 0.72); color: rgba(243, 245, 242, 0.78); backdrop-filter: blur(14px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span { width: 32px; height: 32px; font-size: 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta { gap: 6px; min-height: 0; padding-bottom: 9px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 { font-size: 17px; line-height: 1.28; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p { font-size: 13px; line-height: 1.52; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt { gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); overflow: auto; min-height: 0; max-height: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt { max-height: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-prompt { max-height: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-top: 6px; align-self: end; margin-top: 0; background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button { min-height: 40px; padding: 0 10px; border-radius: 12px; font-size: 12px; white-space: nowrap; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal { padding-right: 8px; padding-left: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58%) minmax(230px, 42%); border-radius: 20px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 60%) minmax(230px, 40%); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media { padding: 12px 12px 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar { padding: 16px 14px 14px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar { padding: 16px 14px 14px; gap: 9px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-author, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-author { grid-template-columns: 1fr; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-author > span, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-author > span { display: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-meta h2, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-meta h2 { font-size: 15px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions { grid-template-columns: 1fr; } } /* Workbench SaaS polish. Scoped to the workbench view to avoid cross-page drift. */ .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page { --wb-panel: rgba(21, 23, 25, 0.94); --wb-panel-strong: rgba(24, 27, 29, 0.98); --wb-panel-soft: rgba(255, 255, 255, 0.04); --wb-line: rgba(255, 255, 255, 0.09); --wb-line-strong: rgba(255, 255, 255, 0.16); --wb-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); --wb-shadow-tight: 0 10px 28px rgba(0, 0, 0, 0.22); --wb-radius-panel: 22px; --wb-radius-card: 16px; background: radial-gradient(circle at 50% -18%, rgba(var(--accent-rgb), 0.08), transparent 34%), var(--dg-page, var(--bg-base)); color: var(--fg-body); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch { overflow: hidden; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-main { overflow-y: auto; scrollbar-gutter: stable; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home { align-items: center; min-height: 100%; padding: 46px 34px 60px; gap: 22px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__hero { gap: 10px; padding-top: 4px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title { color: var(--fg-body); font-size: 36px; font-weight: 720; letter-spacing: 0; line-height: 1.16; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__composer { width: min(100%, 920px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content { overflow: visible; gap: 12px; padding: 16px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-panel); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)), var(--wb-panel); box-shadow: var(--wb-shadow); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__content { padding: 18px; border-radius: 26px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content:focus-within { border-color: rgba(var(--accent-rgb), 0.34); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1), var(--wb-shadow); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer--drag-active .wb-composer__content, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__composer.wb-composer--drag-active .wb-composer__content { border-color: rgba(var(--accent-rgb), 0.5); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.075), rgba(255, 255, 255, 0.02)), var(--wb-panel); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__input-row { gap: 14px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs { width: 72px; min-width: 72px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload { width: 70px; height: 70px; border-color: rgba(var(--accent-rgb), 0.22); border-radius: 16px; background: rgba(var(--accent-rgb), 0.06); color: var(--accent); transform: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.48); background: rgba(var(--accent-rgb), 0.1); transform: translateY(-1px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-icon { font-size: 20px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-label, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-count { font-size: 11px; font-weight: 650; letter-spacing: 0; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__highlight { min-height: 58px; max-height: 170px; padding: 14px 64px 12px 0; color: var(--fg-body); font-size: 15px; font-weight: 440; line-height: 1.62; letter-spacing: 0; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__textarea, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__highlight { min-height: 72px; font-size: 16px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea::placeholder { color: rgba(174, 184, 177, 0.78); font-weight: 420; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar { min-height: 44px; padding: 10px 2px 0; border-top: 1px solid var(--wb-line); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left { gap: 7px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-right { position: static; z-index: auto; display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; margin-left: auto; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger { height: 34px; min-width: 34px; border-color: rgba(255, 255, 255, 0.1); border-radius: 11px; background: rgba(255, 255, 255, 0.04); color: rgba(243, 245, 242, 0.86); font-size: 12px; font-weight: 580; letter-spacing: 0; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger:hover:not(:disabled), .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--fg-body); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip.is-open .wb-inline-chip__trigger, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip.is-open .ai-workbench-select-chip__trigger, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button.is-open { border-color: rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary { position: static; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(var(--accent-rgb), 0.52); border-radius: 14px; background: var(--accent); color: var(--dg-button-text, #061014); box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.18); transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.22); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary:disabled { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.07); color: var(--fg-dim); box-shadow: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__dropdown, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__menu, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__menu, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-mention-panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-stack { border-color: rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(18, 21, 23, 0.98); box-shadow: var(--wb-shadow-tight); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__option, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__option, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__item, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-mention-item { border-radius: 10px; font-weight: 560; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__option:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__option.is-active, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__option:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__option.is-active, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__item:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__item.is-active, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-mention-item:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-mention-item.is-active { background: rgba(var(--accent-rgb), 0.1); color: var(--fg-body); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__suggestions { gap: 8px; max-width: 920px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip { height: 34px; padding: 0 14px; border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.035); color: rgba(243, 245, 242, 0.86); font-size: 12px; font-weight: 560; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip:hover { border-color: rgba(var(--accent-rgb), 0.36); background: rgba(var(--accent-rgb), 0.08); color: var(--fg-body); transform: translateY(-1px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases { width: min(100%, 1480px); margin-top: 4px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases .wb-showcase__header { margin-bottom: 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-showcase__header h2 { color: rgba(243, 245, 242, 0.74); font-size: 13px; font-weight: 650; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card { border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 14px; background: #0b0f10; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card:focus-visible { border-color: rgba(var(--accent-rgb), 0.28); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26); transform: translateY(-2px); outline: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card > div { padding: 42px 14px 14px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58) 28%, rgba(0, 0, 0, 0.88)); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card strong { font-size: 13px; font-weight: 720; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card em { color: rgba(255, 255, 255, 0.68); font-size: 12px; font-weight: 520; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell { background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-messages-surface { padding: 26px 32px 244px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 32%), transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-message-list { width: min(100%, 980px); gap: 18px; padding: 0 24px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-row { gap: 11px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-avatar { flex-basis: 30px; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.055); color: rgba(243, 245, 242, 0.72); font-size: 11px; font-weight: 720; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-avatar--user { border-color: rgba(var(--accent-rgb), 0.22); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-stack { gap: 6px; max-width: min(78%, 760px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-row.is-user .ai-chat-message-stack { max-width: min(72%, 680px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-author { gap: 8px; color: rgba(174, 184, 177, 0.66); font-size: 11px; font-weight: 520; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble { border-color: rgba(255, 255, 255, 0.1); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), rgba(18, 21, 23, 0.92); color: rgba(243, 245, 242, 0.92); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); font-size: 13px; font-weight: 440; line-height: 1.72; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble--assistant { padding: 14px 16px; border-color: rgba(255, 255, 255, 0.1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble--user { border-color: rgba(var(--accent-rgb), 0.24); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.07)), rgba(16, 32, 24, 0.9); color: rgba(243, 245, 242, 0.95); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble:has(.ai-generation-pending-card), .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble:has(.ai-chat-image-result-card) { width: min(560px, 100%); box-shadow: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-list > .conversation-sidebar__empty { width: min(100%, 440px); margin: 110px auto 0; padding: 28px 22px; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 18px; background: rgba(255, 255, 255, 0.035); color: rgba(174, 184, 177, 0.82); box-shadow: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-progress, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-task-billing-note { color: rgba(174, 184, 177, 0.78); font-size: 12px; font-weight: 560; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-attachment-thumb { border-radius: 10px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-attachment-thumb__label { position: absolute; left: 6px; bottom: 6px; inset: auto 6px 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.58); color: rgba(255, 255, 255, 0.82); font-size: 10px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-card, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), var(--wb-panel-strong); box-shadow: var(--wb-shadow-tight); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-card.is-video { border-color: rgba(var(--accent-rgb), 0.2); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-frame { border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #070a0b; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-frame--video { position: relative; border-bottom-color: rgba(var(--accent-rgb), 0.18); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-frame--video::before { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(0, 0, 0, 0.54); color: rgba(255, 255, 255, 0.88); content: "VIDEO"; font-size: 10px; font-weight: 760; line-height: 1.2; letter-spacing: 0.04em; pointer-events: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-preview-button, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-video-poster { background: #070a0b; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-video-poster__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(0, 0, 0, 0.46); color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34); font-size: 24px; transform: translate(-50%, -50%); transition: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-video-poster:hover .ai-chat-video-poster__play { color: #fff; transform: translate(-50%, -50%); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-video-poster__duration { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.82); font-weight: 650; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta { padding: 14px 14px 10px; gap: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta__top strong { color: var(--fg-body); font-size: 13px; font-weight: 760; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta__top span { color: rgba(174, 184, 177, 0.72); font-size: 11px; font-weight: 560; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta__prompt { color: rgba(230, 238, 233, 0.78); font-size: 12px; font-weight: 430; line-height: 1.62; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-chip { border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 999px; background: rgba(var(--accent-rgb), 0.08); color: rgba(203, 255, 226, 0.92); font-size: 11px; font-weight: 620; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, 0.075); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__primary, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow button, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__retry, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__switch, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__release { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.045); color: rgba(243, 245, 242, 0.86); box-shadow: none; font-size: 12px; font-weight: 620; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__primary:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow button:hover:not(:disabled), .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__retry:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__switch:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-failed-actions__release:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--fg-body); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__icon { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.045); color: rgba(243, 245, 242, 0.76); box-shadow: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__icon:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow { gap: 7px; padding: 0 12px 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow span { color: rgba(174, 184, 177, 0.72); font-size: 11px; font-weight: 520; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__stage { border: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 44%), #080d0b; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__meta { border-top: 1px solid rgba(255, 255, 255, 0.075); background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__meta strong { color: var(--fg-body); font-weight: 760; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__meta span { color: rgba(174, 184, 177, 0.76); font-weight: 430; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__chips span { border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 999px; background: rgba(var(--accent-rgb), 0.08); color: rgba(203, 255, 226, 0.88); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__stop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 90, 95, 0.34); border-radius: 10px; background: rgba(255, 90, 95, 0.1); color: #ffb4b6; font-size: 12px; font-weight: 620; white-space: nowrap; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-generation-pending-card__stop:hover { border-color: rgba(255, 90, 95, 0.48); background: rgba(255, 90, 95, 0.16); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar { width: 268px; border-left: 1px solid rgba(255, 255, 255, 0.085); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%), rgba(13, 15, 16, 0.96); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.16); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed { width: 52px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__header { min-height: 58px; padding: 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.085); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__header-actions { gap: 7px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__toggle, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__icon-button { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: rgba(243, 245, 242, 0.74); box-shadow: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__toggle:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__icon-button:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); transform: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__new { min-height: 34px; padding: 0 12px; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: 10px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); box-shadow: none; font-size: 12px; font-weight: 650; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__new:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.18); transform: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__list { padding: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__empty { margin: 10px 2px; padding: 28px 12px; border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.025); color: rgba(174, 184, 177, 0.76); font-weight: 520; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item { position: relative; gap: 6px; margin-bottom: 4px; padding: 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item.is-active { border-color: rgba(var(--accent-rgb), 0.28); background: rgba(var(--accent-rgb), 0.1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item.is-active::before { position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 999px; background: var(--accent); content: ""; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-main { gap: 4px; padding: 8px 6px 8px 10px; border-radius: 9px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-main:hover { background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-title { color: rgba(243, 245, 242, 0.88); font-size: 12px; font-weight: 640; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-time { color: rgba(174, 184, 177, 0.56); font-size: 11px; font-weight: 480; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__rename-input { border: 1px solid rgba(var(--accent-rgb), 0.42); border-radius: 9px; background: rgba(0, 0, 0, 0.24); color: var(--fg-body); font-weight: 540; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-actions { gap: 4px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-actions button { width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: rgba(243, 245, 242, 0.58); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-actions button:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions { position: fixed; left: 0; top: 0; z-index: 45; display: block; width: 1px; height: 1px; overflow: visible; background: transparent; pointer-events: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button { position: fixed; left: 50%; z-index: 45; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0.1); border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), rgba(21, 23, 25, 0.88); color: rgba(243, 245, 242, 0.62); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transform: translateX(-50%) scale(0.96); transition: opacity var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { top: 76px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { bottom: 188px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions.is-showing-top .wb-chat-scroll-actions__button--top, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions.is-showing-bottom .wb-chat-scroll-actions__button--bottom { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button:hover { border-color: rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); transform: translateX(-50%) translateY(-1px) scale(1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .workbench-delete-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-media-preview__panel { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: var(--wb-panel-strong); box-shadow: var(--wb-shadow); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .workbench-delete-modal__backdrop, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__backdrop { background: rgba(0, 0, 0, 0.62); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar { background: #101416; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button { font-weight: 680; } @media (min-width: 981px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal { padding: 32px 44px; background: radial-gradient(circle at 44% 48%, rgba(var(--accent-rgb), 0.12), transparent 34%), rgba(0, 0, 0, 0.72); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: calc(100svh - 64px); grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); gap: 24px; width: min(1480px, calc(100vw - 88px)); min-height: var(--prompt-case-modal-max-height); border: 0; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(4, 7, 9, 0.62); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); width: min(1360px, calc(100vw - 88px)); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media { min-height: 0; padding: 28px 0 28px 28px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 58%), transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media { padding: 28px 0 28px 28px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media img { width: auto; max-width: 100%; max-height: calc(var(--prompt-case-modal-max-height) - 56px); border-radius: 22px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media img { max-height: calc(var(--prompt-case-modal-max-height) - 56px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-self: center; max-height: calc(var(--prompt-case-modal-max-height) - 56px); gap: 18px; overflow: hidden; padding: 48px 30px 26px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)), rgba(12, 18, 21, 0.72); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(22px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 { font-size: 26px; line-height: 1.22; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p { font-size: 14px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt { min-height: 0; overflow: auto; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(0, 0, 0, 0.16); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions { align-self: end; background: transparent; } } @media (max-width: 720px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal { align-items: center; padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 10px 12px; background: radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.12), transparent 42%), rgba(0, 0, 0, 0.78); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: min(560px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(188px, 0.92fr); grid-template-rows: 1fr; width: min(calc(100vw - 20px), 660px); height: var(--prompt-case-modal-max-height); max-height: var(--prompt-case-modal-max-height); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.32); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)), rgba(5, 8, 10, 0.97); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel { grid-template-columns: minmax(0, 0.96fr) minmax(190px, 1.04fr); grid-template-rows: 1fr; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media { display: grid; place-items: center; min-height: 0; padding: 14px; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.11), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(4, 8, 13, 0.98); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; background: rgba(0, 0, 0, 0.18); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-self: stretch; min-height: 0; max-height: none; gap: 9px; overflow: hidden; margin-top: 0; padding: 16px 14px 14px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)), rgba(12, 17, 19, 0.99); box-shadow: -14px 0 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close { top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; border-color: rgba(255, 255, 255, 0.18); border-radius: 11px; background: rgba(8, 10, 11, 0.72); color: rgba(243, 245, 242, 0.82); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34); backdrop-filter: blur(14px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span { width: 28px; height: 28px; font-size: 11px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author strong { font-size: 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author em { font-size: 11px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta { min-height: 0; gap: 5px; padding-bottom: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 { font-size: 15px; line-height: 1.28; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p { display: -webkit-box; overflow: hidden; color: rgba(226, 232, 240, 0.82); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-prompt { min-height: 0; max-height: none; gap: 6px; overflow: auto; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: rgba(255, 255, 255, 0.035); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt span { font-size: 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p { font-size: 12px; line-height: 1.48; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-self: end; margin: 0; padding: 5px 0 0; background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button { min-height: 36px; padding: 0 7px; border-radius: 11px; font-size: 11px; white-space: nowrap; } } @media (max-width: 420px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal { padding-right: 8px; padding-left: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel { --prompt-case-modal-max-height: min(520px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px)); grid-template-columns: minmax(0, 0.9fr) minmax(172px, 1.1fr); grid-template-rows: 1fr; border-radius: 20px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel { grid-template-columns: minmax(0, 0.82fr) minmax(174px, 1.18fr); grid-template-rows: 1fr; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media { padding: 10px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar { gap: 8px; padding: 14px 10px 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button { min-height: 34px; padding: 0 5px; font-size: 10px; } } @media (max-width: 980px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home { padding: 34px 18px 44px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title { font-size: 30px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-messages-surface { padding: calc(var(--dg-mobile-nav-space, 70px) + 22px) 16px 244px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-message-list { padding: 0 52px 0 4px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-stack, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-row.is-user .ai-chat-message-stack { max-width: min(86%, 700px); } } @media (max-width: 900px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home { padding-top: calc(56px + var(--dg-mobile-nav-space, 70px) + 18px); } } @media (max-width: 720px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .profile-popover { top: calc(56px + var(--dg-mobile-nav-space, 70px) + env(safe-area-inset-top, 0px)); z-index: 120; max-height: calc(100svh - 56px - var(--dg-mobile-nav-space, 70px) - 24px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home { padding: calc(56px + var(--dg-mobile-nav-space, 70px) + 16px) 14px 34px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title { font-size: 26px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content { padding: 14px; border-radius: 20px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__input-row { gap: 10px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs { width: 58px; min-width: 58px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload { width: 56px; height: 56px; border-radius: 13px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-label { display: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar { padding-right: 2px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left { max-width: calc(100% - 52px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger { max-width: 142px; padding: 0 9px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary { width: 40px; height: 40px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer { padding: 0 10px 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-message-list { padding: 0 44px 0 0; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar { box-shadow: -14px 0 30px rgba(0, 0, 0, 0.24); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { top: 70px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { bottom: 176px; } } @media (max-width: 560px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title { font-size: 24px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__suggestions { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 2px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip { flex: 0 0 auto; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-messages-surface { padding: calc(var(--dg-mobile-nav-space, 70px) + 16px) 10px 190px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-message-list { gap: 14px; padding-right: 42px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-avatar { display: none; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-stack, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-row.is-user .ai-chat-message-stack { max-width: 100%; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-message-bubble { border-radius: 14px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed { width: 46px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button { width: 38px; height: 38px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { top: 68px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { bottom: 142px; } } /* Browser feedback fixes. */ .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs { width: 78px; min-width: 78px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload { width: 76px; height: 76px; border-color: rgba(var(--accent-rgb), 0.42); border-radius: 14px; background: rgba(var(--accent-rgb), 0.04); color: var(--accent); transform: rotate(-7deg); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.58); background: rgba(var(--accent-rgb), 0.07); transform: rotate(-4deg) translateY(-2px); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-icon { font-size: 21px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-label { display: inline; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed { position: fixed !important; inset: 50svh 12px auto auto !important; z-index: 80 !important; display: grid !important; place-items: center !important; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-50%); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__header, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__header { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__toggle, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__toggle { width: 44px; height: 44px; border-color: rgba(255, 255, 255, 0.12); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), rgba(18, 21, 23, 0.92); color: rgba(243, 245, 242, 0.78); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__toggle:hover, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed .conversation-sidebar__toggle:hover { border-color: rgba(var(--accent-rgb), 0.36); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } @media (max-width: 720px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed { inset: calc(56px + var(--dg-mobile-nav-space, 70px) + (100svh - 56px - var(--dg-mobile-nav-space, 70px)) / 2) 8px auto auto !important; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar:not(.is-collapsed), .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar:not(.is-collapsed), .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar:not(.is-collapsed) { position: fixed !important; top: calc(56px + var(--dg-mobile-nav-height, 58px) + 8px + env(safe-area-inset-top, 0px)) !important; right: 0 !important; bottom: auto !important; z-index: 70 !important; width: min(260px, 72vw) !important; min-width: 0 !important; height: calc(100svh - 56px - var(--dg-mobile-nav-height, 58px) - 8px - env(safe-area-inset-top, 0px)) !important; border-left: 1px solid rgba(255, 255, 255, 0.1); } } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack { display: grid; grid-template-columns: repeat(auto-fit, 58px); align-items: start; justify-content: start; gap: 10px; min-width: 0; width: min(224px, calc(100vw - 40px)); max-width: calc(100vw - 40px); padding: 12px; overflow: visible; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-add-more { width: 58px; height: 58px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card { position: relative; display: block; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-preview, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom { position: absolute; left: calc(100% + 10px); top: 50%; z-index: 3; width: 132px; height: 92px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 10, 11, 0.94); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.98); transform-origin: left center; transition: opacity var(--transition-fast), transform var(--transition-fast); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card:hover .wb-composer__ref-zoom, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom { opacity: 1; transform: translateY(-50%) scale(1); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-preview { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.22); } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-preview img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-preview video, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom img, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom video { display: block; width: 100%; height: 100%; object-fit: cover; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-remove { top: -6px; right: -6px; z-index: 2; width: 18px; height: 18px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-add-more { border-radius: 12px; font-size: 18px; } @media (max-width: 560px) { .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack { left: -2px; width: min(206px, calc(100vw - 24px)); grid-template-columns: repeat(auto-fit, 54px); gap: 9px; padding: 10px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card, .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-add-more { width: 54px; height: 54px; } .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom { display: none; } }