Files
yingqing/core/frontend/src/omni-session-page.css
T

1674 lines
30 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* 全能创作 · 对话页(omni-session-page)
* 逐行转写自设计稿 "影擎 - 欢迎回来" 的 <style>(原始行 1452115410 + 响应式 1574215780)。
* 与 omni-create-page.css 同一套写法:沿用 --klein / --black / --text token 与设计稿的裸色值,
* 不在这里重写 design-restraint.css 的共享类。
*/
.omni-session-page {
min-height: calc(100vh - var(--topbar-height));
background: transparent;
font-size: 14px;
}
/* 进会话后顶栏换成对话信息,滚下去也还在 */
.omni-session-topbar-slot {
flex: 1 1 auto;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
}
.omni-session-topbar-slot .omni-session-header {
width: min(980px, 100%);
min-height: 0;
margin: 0 auto;
padding: 0;
border-bottom: 0;
}
.omni-session-page > .omni-session-header {
width: min(980px, calc(100% - 42px));
margin: 0 auto 8px;
}
.omni-session-shell {
width: min(980px, calc(100% - 42px));
min-height: calc(100vh - var(--topbar-height));
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 20px 0 18px;
}
.omni-session-header {
min-height: 62px;
display: grid;
grid-template-columns: 126px minmax(0, 1fr) 40px;
align-items: center;
gap: 12px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(34, 42, 54, .08);
}
.omni-session-header > div {
min-width: 0;
text-align: center;
}
.omni-session-header h1 {
overflow: hidden;
margin: 0;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-session-back {
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 10px;
color: #414750;
background: #fff;
font-size: 12px;
cursor: pointer;
}
.omni-session-back svg {
width: 15px;
height: 15px;
}
.omni-session-meta {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 5px;
}
.omni-session-meta span {
color: #7d838c;
font-size: 11px;
}
.omni-session-meta span:not(:last-child)::after {
content: "·";
margin-left: 5px;
color: #b4b8be;
}
.omni-session-feed {
flex: 1 1 auto;
padding: 30px 0 18px;
background: transparent;
}
.omni-chat-row {
display: flex;
gap: 10px;
margin-bottom: 24px;
animation: omniMessageIn 220ms ease both;
}
/* 设计稿写的是 .omni-chat-row.user;design-restraint.css 里有个裸 .user 全局类
(侧栏用户胶囊:999 圆角 + #f3f4f7 灰底 + space-between),会把整套样式传染进来。
这里改用 .is-user 避开 —— 本文件相对设计稿唯一的类名改动。 */
.omni-chat-row.is-user {
justify-content: flex-end;
}
.omni-chat-avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 10px;
color: #fff;
background: var(--klein);
box-shadow: 0 8px 18px rgba(0, 47, 167, .15);
}
.omni-chat-avatar svg {
width: 16px;
height: 16px;
}
.omni-chat-bubble {
max-width: min(670px, 82%);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 15px;
border: 1px solid rgba(34, 42, 54, .08);
border-radius: 14px;
color: #323945;
background: #f7f8fa;
font-size: 13px;
line-height: 1.7;
}
.omni-chat-text {
margin: 0;
white-space: pre-wrap;
}
.omni-chat-row.is-user .omni-chat-bubble {
align-items: flex-end;
border-color: var(--black);
border-bottom-right-radius: 4px;
color: #fff;
background: var(--black);
}
.omni-result-card,
.omni-process-card {
width: min(760px, calc(100% - 44px));
margin: 0 0 24px 44px;
border: 1px solid rgba(34, 42, 54, .09);
border-radius: 15px;
background: #fff;
box-shadow: 0 10px 26px rgba(20, 27, 38, .06);
animation: omniMessageIn 220ms ease both;
}
.omni-strategy-card,
.omni-video-plan-card,
.omni-prompt-file-card,
.omni-elicit-card {
width: min(760px, calc(100% - 44px));
margin: 0 0 24px 44px;
border: 1px solid rgba(34, 42, 54, .09);
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 30px rgba(20, 27, 38, .065);
animation: omniMessageIn 220ms ease both;
}
.omni-elicit-slot {
width: min(760px, calc(100% - 44px));
margin: 0 0 24px 44px;
}
.omni-elicit-slot .omni-elicit-card {
width: 100%;
margin: 0;
}
.omni-strategy-card {
overflow: hidden;
border-top: 3px solid var(--klein);
}
.omni-strategy-head,
.omni-video-plan-head,
.omni-elicit-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px 13px;
border-bottom: 1px solid rgba(34, 42, 54, .07);
}
.omni-strategy-head strong,
.omni-video-plan-head strong {
font-size: 14px;
}
.omni-strategy-head span,
.omni-video-plan-head span {
padding: 5px 8px;
border-radius: 999px;
color: var(--klein);
background: #edf5ff;
font-size: 11px;
font-weight: 700;
}
.omni-strategy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 14px 16px 16px;
}
.omni-strategy-grid div {
min-width: 0;
padding: 12px;
border-radius: 11px;
background: #f6f8fb;
}
.omni-strategy-grid span,
.omni-strategy-grid strong {
display: block;
}
.omni-strategy-grid span {
color: #858b94;
font-size: 11px;
}
.omni-strategy-grid strong {
margin-top: 6px;
color: #272d37;
font-size: 12px;
line-height: 1.55;
}
.omni-strategy-direction {
display: flex;
align-items: center;
gap: 8px;
margin: 0 16px 16px;
padding: 10px 12px;
border: 1px solid rgba(0, 47, 167, .10);
border-radius: 10px;
color: #39404b;
background: #f5f9ff;
font-size: 12px;
}
.omni-strategy-direction b {
color: var(--klein);
}
.omni-video-plan-card {
overflow: hidden;
border-top: 3px solid var(--black);
}
.omni-video-plan-head span {
color: #fff;
background: var(--black);
}
.omni-plan-section {
padding: 15px 17px;
border-bottom: 1px solid rgba(34, 42, 54, .07);
}
.omni-plan-section:last-child {
border-bottom: 0;
}
.omni-plan-section > strong {
display: block;
margin-bottom: 10px;
font-size: 12px;
}
.omni-plan-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.omni-plan-points span {
padding: 10px;
border-radius: 9px;
color: #525965;
background: #f6f8fa;
font-size: 12px;
line-height: 1.5;
}
.omni-plan-points b {
display: block;
margin-bottom: 4px;
color: #252b35;
font-size: 11px;
}
.omni-plan-points i,
.omni-plan-summary i {
font-style: normal;
}
.omni-plan-timeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.omni-plan-timeline span {
position: relative;
min-height: 78px;
padding: 11px 10px;
border: 1px solid rgba(34, 42, 54, .08);
border-radius: 10px;
color: #5b626d;
background: #fff;
font-size: 11px;
line-height: 1.5;
}
.omni-plan-timeline b {
display: block;
margin-bottom: 5px;
color: var(--klein);
font-size: 12px;
}
.omni-plan-matrix {
width: 100%;
border-collapse: separate;
border-spacing: 5px;
table-layout: fixed;
}
.omni-plan-matrix th,
.omni-plan-matrix td {
height: 28px;
border-radius: 7px;
color: #6d747e;
background: #f6f8fa;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.omni-plan-matrix th:first-child,
.omni-plan-matrix td:first-child {
width: 106px;
padding-left: 8px;
color: #323944;
text-align: left;
}
.omni-plan-matrix td.hit {
color: #fff;
background: var(--klein);
}
.omni-plan-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 17px;
color: #444b56;
background: #f6f8fb;
font-size: 12px;
line-height: 1.5;
}
.omni-plan-summary b {
color: var(--klein);
}
.omni-prompt-file-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-top: 3px solid var(--klein);
}
.omni-prompt-file-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--klein);
background: #edf5ff;
}
.omni-prompt-file-icon svg {
width: 19px;
height: 19px;
}
.omni-prompt-file-copy strong,
.omni-prompt-file-copy small {
display: block;
}
.omni-prompt-file-copy strong {
font-size: 13px;
}
.omni-prompt-file-copy small {
margin-top: 4px;
color: #858b94;
font-size: 11px;
}
.omni-prompt-file-card button {
height: 34px;
padding: 0 12px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 9px;
color: #333944;
background: #fff;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.omni-session-choice {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 0 12px 44px;
}
.omni-session-choice:empty {
display: none;
}
.omni-session-choice button {
height: 34px;
padding: 0 13px;
border: 1px solid rgba(0, 47, 167, .20);
border-radius: 9px;
color: var(--klein);
background: #fff;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.omni-session-choice button:hover,
.omni-session-choice button.primary {
color: #fff;
background: var(--klein);
}
.omni-session-composer {
position: sticky;
bottom: 0;
z-index: 3;
padding: 13px;
border: 1px solid rgba(34, 42, 54, .11);
border-radius: 16px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 15px 34px rgba(20, 27, 38, .10);
backdrop-filter: blur(14px);
}
#omniSessionPrompt {
width: 100%;
min-height: 52px;
max-height: 130px;
padding: 3px 3px 8px;
resize: vertical;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font-size: 13px;
line-height: 1.6;
}
.omni-session-composer-tools {
justify-content: space-between;
gap: 12px;
}
.omni-session-composer-options {
flex-wrap: wrap;
}
.omni-session-upload-wrap {
position: relative;
}
.omni-session-parameter {
width: 104px;
flex: 0 0 auto;
}
.omni-session-parameter-model {
width: 146px;
}
.omni-session-parameter-preset {
width: 156px;
}
.omni-session-preset-control {
position: relative;
width: 156px;
flex: 0 0 auto;
}
.omni-session-preset-control:has(.omni-session-preset-panel:not([hidden])) {
z-index: 210;
}
.omni-session-preset-trigger {
width: 100%;
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 10px;
border: 1px solid rgba(34, 42, 54, .11);
border-radius: 10px;
color: #373d46;
background: #f8f9fa;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.omni-session-preset-trigger:hover,
.omni-session-preset-trigger[aria-expanded="true"] {
border-color: rgba(0, 47, 167, .36);
color: var(--klein);
background: #fff;
}
.omni-session-preset-trigger span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-session-preset-trigger svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
}
.omni-session-preset-panel {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
width: min(760px, calc(100vw - var(--sidebar-width) - 56px));
overflow: hidden;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 17px;
background: #fff;
box-shadow: 0 24px 60px rgba(20, 27, 38, .18);
transform: translateX(-52%);
}
.omni-session-preset-panel[hidden] {
display: none;
}
.omni-session-preset-search {
display: flex;
align-items: center;
gap: 9px;
padding: 13px 16px;
border-bottom: 1px solid rgba(34, 42, 54, .08);
}
.omni-session-preset-search svg {
width: 16px;
height: 16px;
color: #7e858f;
}
.omni-session-preset-search input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
color: #272d36;
background: transparent;
font-size: 13px;
}
.omni-session-preset-search span {
color: #7d838c;
font-size: 12px;
}
.omni-session-preset-body {
height: 350px;
display: grid;
grid-template-columns: 142px 238px minmax(0, 1fr);
}
.omni-session-preset-categories,
.omni-session-preset-list {
min-height: 0;
overflow-y: auto;
padding: 12px;
scrollbar-width: thin;
}
.omni-session-preset-categories {
border-right: 1px solid rgba(34, 42, 54, .08);
background: #fbfbfc;
}
.omni-session-preset-categories button,
.omni-session-preset-list button {
width: 100%;
border-radius: 9px;
color: #606773;
background: transparent;
text-align: left;
cursor: pointer;
}
.omni-session-preset-categories button {
min-height: 36px;
padding: 0 10px;
font-size: 12px;
}
.omni-session-preset-categories button.active {
color: #fff;
background: var(--black);
font-weight: 650;
}
.omni-session-preset-list {
border-right: 1px solid rgba(34, 42, 54, .08);
}
.omni-session-preset-list button {
min-height: 58px;
display: grid;
align-content: center;
gap: 4px;
padding: 9px 11px;
}
.omni-session-preset-list button:hover,
.omni-session-preset-list button.active {
color: #1f2530;
background: #f2f4f7;
}
.omni-session-preset-list button.active {
box-shadow: inset 3px 0 0 var(--klein);
}
.omni-session-preset-list strong {
font-size: 13px;
}
.omni-session-preset-list small {
overflow: hidden;
color: #949aa3;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-session-preset-preview {
min-width: 0;
display: flex;
flex-direction: column;
padding: 13px;
background: #fafbfc;
}
.omni-session-preset-preview img {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
border-radius: 12px;
object-fit: cover;
background: #e9edf3;
}
.omni-session-preset-preview h3 {
margin: 12px 0 5px;
font-size: 15px;
}
.omni-session-preset-preview p {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: #737a85;
font-size: 12px;
line-height: 1.55;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.omni-session-preset-preview small {
margin-top: 8px;
color: #8d939c;
font-size: 11px;
}
.omni-session-preset-preview button {
height: 34px;
margin-top: auto;
border-radius: 9px;
color: #fff;
background: var(--klein);
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.omni-session-parameter .custom-select-trigger {
height: 34px;
padding: 0 9px;
font-size: 12px;
}
.omni-session-parameter .custom-select-menu {
top: auto;
bottom: calc(100% + 8px);
min-width: 132px;
max-height: 300px;
overflow-y: auto;
transform: translateY(5px);
}
.omni-session-parameter .custom-select-shell.open .custom-select-menu {
transform: translateY(0);
}
.omni-session-mention-wrap {
position: relative;
}
.omni-session-mention-menu {
position: absolute;
bottom: calc(100% + 10px);
left: 0;
z-index: 20;
width: 340px;
height: 236px;
display: flex;
padding: 6px;
overflow: hidden;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 12px;
background: #fff;
box-shadow: 0 16px 36px rgba(20, 27, 38, .15);
}
.omni-session-mention-menu[hidden] {
display: none;
}
.omni-at-cats {
width: 88px;
flex: 0 0 88px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px 4px 2px 2px;
border-right: 1px solid rgba(34, 42, 54, .08);
}
.omni-at-cats button {
width: 100%;
height: 32px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #5b616a;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.omni-at-cats button svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: #8b919a;
}
.omni-at-cats button:hover,
.omni-at-cats button.is-on {
background: #f3f4f6;
color: #1f2430;
}
.omni-at-cats button.is-on svg {
color: var(--klein);
}
.omni-at-list {
flex: 1;
min-width: 0;
height: 100%;
overflow-y: auto;
padding: 2px 2px 2px 6px;
}
.omni-at-list > strong {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #8b919a;
font-size: 13px;
font-weight: 500;
text-align: center;
}
.omni-at-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
color: #8b919a;
font-size: 13px;
}
.omni-at-loading .omni-send-spinner {
border-color: rgba(0, 47, 167, .18);
border-top-color: var(--klein);
}
.omni-at-list button {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border: 0;
border-radius: 8px;
color: #303641;
background: transparent;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.omni-at-list button:hover {
color: var(--klein);
background: #edf5ff;
}
.omni-at-list button svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: var(--klein);
}
.omni-at-list button span {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.omni-at-list button small {
color: #8b919a;
font-size: 12px;
}
.omni-session-send {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
background: var(--klein);
cursor: pointer;
}
.omni-session-send svg {
width: 16px;
height: 16px;
}
.omni-process-card {
padding: 0;
}
.omni-process-frame {
height: 310px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 45%, #eef1f5 100%);
background-size: 220% 100%;
animation: omniShimmer 1.2s ease infinite;
}
.omni-process-frame strong {
color: #5c6570;
font-size: 14px;
font-weight: 500;
}
.omni-process-ring {
width: 28px;
height: 28px;
flex: 0 0 auto;
border: 3px solid rgba(0, 47, 167, .16);
border-top-color: var(--klein);
border-radius: 50%;
animation: omniSpin .8s linear infinite;
}
@keyframes omniSpin {
to { transform: rotate(360deg); }
}
.omni-result-card {
overflow: hidden;
}
.omni-result-media {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 10px;
}
.omni-result-media.is-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.omni-result-tile {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--r-md, 12px);
background: #edf0f4;
box-shadow: 0 8px 20px rgba(20, 27, 38, .08);
}
.omni-result-preview {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.omni-result-tile img {
width: 100%;
height: 310px;
display: block;
object-fit: cover;
background: #edf0f4;
}
.omni-result-media.is-grid .omni-result-tile img {
height: 220px;
}
.omni-result-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(180deg, transparent, rgba(16, 16, 18, .28));
pointer-events: none;
}
.omni-result-play svg {
width: 28px;
height: 28px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.omni-result-dl {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 8px;
color: #fff;
background: rgba(16, 16, 18, .72);
opacity: 0;
pointer-events: none;
transition: opacity .16s ease;
}
.omni-result-tile:hover .omni-result-dl,
.omni-result-dl:focus-visible {
opacity: 1;
pointer-events: auto;
}
.omni-result-dl svg {
width: 14px;
height: 14px;
}
@media (hover: none) {
.omni-result-dl {
opacity: 1;
pointer-events: auto;
}
}
.omni-result-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 15px;
}
.omni-result-info strong,
.omni-result-info small {
display: block;
}
.omni-result-info strong {
font-size: 13px;
}
.omni-result-info small {
margin-top: 3px;
color: #858b94;
font-size: 11px;
}
.omni-result-info button {
height: 33px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
border-radius: 9px;
color: #fff;
background: var(--black);
font-size: 12px;
cursor: pointer;
}
.omni-result-info button svg {
width: 13px;
height: 13px;
}
/* 对话页专用的输入区工具条:与首页 .omni-start-tools 同规则(设计稿原始 1370813716)。
.omni-icon-tool / .omni-parameter 等共享类留在 omni-create-page.css,这里不重复定义。 */
.omni-session-composer-tools,
.omni-session-composer-tools > div {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
/* 响应式(设计稿原始 1574115764) */
@media (max-width: 720px) {
.omni-session-shell {
width: calc(100% - 24px);
}
.omni-session-header {
grid-template-columns: 96px minmax(0, 1fr) 36px;
}
.omni-strategy-card,
.omni-video-plan-card,
.omni-prompt-file-card,
.omni-result-card,
.omni-process-card,
.omni-elicit-slot {
width: 100%;
margin-left: 0;
}
.omni-strategy-grid,
.omni-plan-points,
.omni-plan-timeline {
grid-template-columns: 1fr;
}
.omni-plan-summary {
align-items: flex-start;
flex-direction: column;
}
.omni-prompt-file-card {
grid-template-columns: 42px minmax(0, 1fr);
}
.omni-prompt-file-card button {
grid-column: 1 / -1;
}
}
/* ── 追问卡(.omni-elicit-card)· 设计稿没有这张卡,后端 ask_user 工具的落点。
外壳复用上面的 .omni-strategy-card 组;这里只补内部控件,不新造色值。
控件四型:single 单选 / multi 多选 / text 填空 / asset 选素材(缩略图网格)。 */
.omni-elicit-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 14px 18px 16px;
}
.omni-elicit-field > label {
display: block;
margin-bottom: 9px;
color: var(--black);
font-size: 13px;
font-weight: 600;
}
.omni-elicit-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.omni-elicit-options button {
padding: 7px 13px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 8px;
background: #fff;
color: #575d66;
font-size: 13px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.omni-elicit-options button:hover {
border-color: rgba(34, 42, 54, .20);
color: var(--black);
}
.omni-elicit-options button.active {
border-color: var(--klein);
color: var(--klein);
background: #edf5ff;
}
.omni-elicit-field input[type="text"] {
width: 100%;
padding: 9px 12px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 8px;
background: #fff;
color: var(--black);
font-size: 13px;
font-family: inherit;
}
.omni-elicit-field input[type="text"]:focus {
border-color: var(--klein);
outline: none;
}
.omni-elicit-assets {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 8px;
}
.omni-elicit-assets button {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 8px;
background: #fff;
cursor: pointer;
text-align: left;
}
.omni-elicit-assets button.active {
border-color: var(--klein);
background: #edf5ff;
}
.omni-elicit-assets img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 6px;
object-fit: cover;
background: #f6f8fb;
}
.omni-elicit-assets span {
overflow: hidden;
color: #575d66;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-elicit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 18px 16px;
}
.omni-elicit-actions button {
padding: 8px 16px;
border: 0;
border-radius: 8px;
background: var(--klein);
color: #fff;
font-size: 13px;
cursor: pointer;
}
.omni-elicit-actions button:disabled {
background: rgba(34, 42, 54, .18);
cursor: not-allowed;
}
/* 已提交的追问卡变成只读回顾,不能再改 —— 重复提交后端会 409 */
.omni-elicit-card.is-submitted .omni-elicit-options button,
.omni-elicit-card.is-submitted .omni-elicit-assets button {
cursor: default;
pointer-events: none;
}
/* ── 确认闸门(.omni-confirm-card)· 设计稿里是方案卡下面那条操作行,这里独立成卡。
积分数字挂在按钮里 —— 用户按下去之前就该知道要花多少。 */
.omni-confirm-card {
width: min(760px, 100%);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 0 0 24px 44px;
padding: 14px 16px;
border: 1px solid rgba(34, 42, 54, .10);
border-radius: 14px;
background: #fff;
}
.omni-confirm-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.omni-confirm-copy strong {
color: #22262e;
font-size: 13px;
font-weight: 600;
}
.omni-confirm-copy span,
.omni-confirm-foot > span {
color: #6f747c;
font-size: 12px;
}
.omni-confirm-params {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.omni-confirm-params .omni-duration-control {
position: relative;
z-index: 20;
}
.omni-confirm-hint {
margin: 0;
padding: 8px 10px;
border-radius: 8px;
background: #fff7ed;
color: #9a3412;
font-size: 12px;
line-height: 1.45;
}
.omni-confirm-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.omni-confirm-card button {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 0;
border-radius: 8px;
background: var(--klein);
color: #fff;
font-size: 13px;
cursor: pointer;
}
.omni-confirm-card button:disabled {
background: rgba(34, 42, 54, .18);
cursor: not-allowed;
}
.omni-confirm-card button i {
color: rgba(255, 255, 255, .72);
font-size: 12px;
font-style: normal;
}
@media (max-width: 720px) {
.omni-confirm-card {
align-items: flex-start;
flex-direction: column;
margin-left: 0;
}
}
/* 流式中的临时气泡:不参与入场动画。逐字重渲染 + 220ms 动画 = 一直在闪。 */
.omni-chat-row.is-live {
animation: none;
}
.omni-mention-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.omni-mention-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 220px;
padding: 3px 8px 3px 4px;
border-radius: 999px;
font-size: 12px;
line-height: 1.2;
}
.omni-mention-chip i {
flex: 0 0 auto;
padding: 2px 6px;
border-radius: 999px;
font-style: normal;
font-size: 11px;
font-weight: 700;
}
.omni-mention-chip b {
overflow: hidden;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-mention-chip button {
width: 16px;
height: 16px;
display: grid;
place-items: center;
margin-left: 2px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.omni-mention-chip button svg {
width: 11px;
height: 11px;
}
.omni-mention-chips.is-user .omni-mention-chip {
color: #fff;
background: rgba(255, 255, 255, .14);
}
.omni-mention-chips.is-user .omni-mention-chip i {
color: var(--klein);
background: #edf5ff;
}
.omni-mention-chips.is-composer {
margin: 0 2px 8px;
}
.omni-mention-chips.is-composer .omni-mention-chip {
color: #2b3240;
background: #edf5ff;
border: 1px solid rgba(0, 47, 167, .12);
}
.omni-mention-chips.is-composer .omni-mention-chip i {
color: #fff;
background: var(--klein);
}
.omni-mention-chips.is-composer .omni-mention-chip button {
color: #66707d;
}
.omni-send-pending {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, .72);
font-size: 12px;
}
.omni-send-spinner,
.omni-typing i {
width: 10px;
height: 10px;
border-radius: 50%;
}
.omni-send-spinner {
border: 1.5px solid rgba(255, 255, 255, .28);
border-top-color: #fff;
animation: omniSpin .7s linear infinite;
}
.omni-chat-bubble.is-thinking {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
color: #5c6570;
}
.omni-typing {
display: inline-flex;
align-items: center;
gap: 4px;
}
.omni-typing i {
width: 6px;
height: 6px;
background: var(--klein);
opacity: .35;
animation: omniTyping 1.1s ease-in-out infinite;
}
.omni-typing i:nth-child(2) { animation-delay: .15s; }
.omni-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes omniTyping {
0%, 80%, 100% { opacity: .28; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-2px); }
}
.omni-process-skeleton,
.omni-think-skeleton {
height: 168px;
border-radius: var(--r-md, 12px);
background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 45%, #eef1f5 100%);
background-size: 220% 100%;
animation: omniShimmer 1.2s ease infinite;
}
.omni-think-skeleton {
display: none;
}
@keyframes omniShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.omni-session-send:disabled {
opacity: .55;
cursor: not-allowed;
}
.omni-session-mention-menu img {
width: 28px;
height: 28px;
border-radius: 7px;
object-fit: cover;
background: #eef1f5;
}
.omni-prompt-drawer-bg {
position: fixed;
inset: 0;
z-index: 80;
border: 0;
background: rgba(16, 18, 24, .28);
cursor: pointer;
}
.omni-prompt-drawer {
position: fixed;
top: 12px;
right: 12px;
bottom: 12px;
z-index: 81;
width: min(420px, calc(100vw - 24px));
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(34, 42, 54, .08);
border-radius: 18px;
background: #f4f6f9;
box-shadow: -8px 12px 40px rgba(20, 27, 38, .16);
}
.omni-prompt-drawer header {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 32px;
align-items: center;
gap: 10px;
padding: 14px 14px 12px;
border-bottom: 1px solid rgba(34, 42, 54, .08);
background: #fff;
}
.omni-prompt-drawer-file {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
color: var(--klein);
background: #edf5ff;
}
.omni-prompt-drawer-file svg {
width: 16px;
height: 16px;
}
.omni-prompt-drawer header div {
min-width: 0;
}
.omni-prompt-drawer header strong,
.omni-prompt-drawer header small {
display: block;
}
.omni-prompt-drawer header strong {
overflow: hidden;
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.omni-prompt-drawer header small {
margin-top: 2px;
color: #8b919a;
font-size: 12px;
}
.omni-prompt-drawer header button {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #5c6570;
cursor: pointer;
}
.omni-prompt-drawer header button:hover {
background: #f3f4f6;
}
.omni-prompt-drawer header button svg {
width: 16px;
height: 16px;
}
.omni-prompt-doc {
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
}
.omni-prompt-block {
padding: 14px 15px;
border: 1px solid rgba(34, 42, 54, .06);
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 16px rgba(20, 27, 38, .04);
}
.omni-prompt-block h3 {
margin: 0 0 8px;
color: var(--klein);
font-size: 13px;
font-weight: 650;
}
.omni-prompt-block p {
margin: 0;
color: #2b3240;
font-size: 14px;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
}