/* Loaded after each realm stylesheet so the immersive direction wins the cascade. */
:root {
  --realm-void: #050b16;
  --realm-ink: #f4f0e8;
  --realm-muted: #aebac8;
  --realm-line: rgba(191, 214, 233, .2);
}

html, body { background: var(--realm-void) !important; }
body { color: var(--realm-ink) !important; background: radial-gradient(ellipse at 50% -10%, #193351 0%, var(--realm-void) 54%) !important; }
.topbar { border-bottom-color: rgba(182, 209, 231, .16) !important; }
.brand strong, .panel-heading h1 { color: var(--realm-ink) !important; }
.brand small, .connection, .quota-heading span, .quota-heading p { color: var(--realm-muted) !important; }
.quota-strip { border-color: var(--realm-line) !important; border-radius: 14px !important; background: rgba(9, 22, 38, .62) !important; box-shadow: 0 18px 60px rgba(0, 0, 0, .24) !important; }
.domain-tabs { border-bottom-color: var(--realm-line) !important; background: transparent !important; }
.domain-tab { color: #7f8d9f !important; }
.domain-tab.is-active { color: #fff !important; background: rgba(28, 51, 76, .52) !important; }
.domain-tab.is-active::after { box-shadow: 0 0 18px currentColor !important; }
.workspace { border-color: var(--realm-line) !important; border-radius: 24px !important; background: rgba(5, 13, 25, .78) !important; box-shadow: 0 28px 100px rgba(0, 0, 0, .4) !important; }
.history-panel { border-right-color: var(--realm-line) !important; background: rgba(4, 13, 25, .72) !important; }
.history-panel select, .subject-row select, .history-panel input { color: #f4f0e8 !important; border-color: rgba(191, 214, 233, .28) !important; background: rgba(7, 19, 34, .88) !important; }
.history-panel select option, .subject-row select option { color: #f4f0e8 !important; background: #0b1b2e !important; }
.history-panel select::placeholder, .subject-row select::placeholder { color: #8d9bad !important; }
.history-panel .button-primary { color: #fff !important; border-color: transparent !important; background: linear-gradient(145deg, #4fbf9c, #267361) !important; }
.history-panel .button-quiet { color: #aebac8 !important; }
.work-panel { background: #06101e !important; }

.domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { min-height: 760px; color: var(--realm-ink) !important; isolation: isolate; overflow: hidden; }
.domain-panel[data-domain="cureqi"] { background-image: linear-gradient(90deg, rgba(5, 11, 22, .22), rgba(5, 11, 22, .32) 44%, rgba(5, 11, 22, .66)), url('/static/agent_lab/cureqi-realm.png') !important; background-position: center !important; background-size: cover !important; }
.domain-panel[data-domain="bazi"] { background-image: linear-gradient(90deg, rgba(5, 11, 22, .2), rgba(5, 11, 22, .34) 44%, rgba(5, 11, 22, .72)), url('/static/agent_lab/bazi-realm.png') !important; background-position: center !important; background-size: cover !important; }
.domain-panel[data-domain="constitution"] { background-image: linear-gradient(90deg, rgba(5, 11, 22, .2), rgba(5, 11, 22, .28) 44%, rgba(5, 11, 22, .7)), url('/static/agent_lab/constitution-realm.png') !important; background-position: center !important; background-size: cover !important; }
.panel-lede, .bazi-workspace-context { color: #c4d0dc !important; }
.eyebrow { color: #d8b39c !important; }
.domain-panel .operation-progress { color: var(--realm-muted) !important; }
.domain-panel .operation-progress-label, .domain-panel .operation-progress-step.is-active, .domain-panel .operation-progress-step.is-complete { color: var(--realm-ink) !important; }
.domain-panel .operation-progress-track { background: rgba(191, 214, 233, .2) !important; }
.domain-panel .operation-progress-meter, .domain-panel .operation-progress-indicator, .domain-panel .operation-progress-step.is-complete::before { border-color: #63c8a7 !important; background: #63c8a7 !important; }
.domain-panel .operation-progress-step.is-active::before { border-color: #63c8a7 !important; box-shadow: inset 0 0 0 2px #071326 !important; background: #63c8a7 !important; }
.domain-panel .operation-progress[data-state="failed"] .operation-progress-label, .domain-panel .operation-progress-step.is-failed { color: #ff9b9b !important; }
.domain-panel .operation-progress[data-state="failed"] .operation-progress-indicator, .domain-panel .operation-progress-step.is-failed::before { border-color: #ff9b9b !important; background: #ff9b9b !important; }

/* 八字专属布局在 bazi_workspace.css 中有一套浅色皮肤；这里统一改成夜景玻璃层。 */
.lab[data-bazi-workspace="true"] { width: min(1500px, calc(100% - 44px)) !important; color: var(--realm-ink) !important; background: transparent !important; }
.lab[data-bazi-workspace="true"] .topbar { min-height: 76px !important; }
.lab[data-bazi-workspace="true"] .domain-tabs { min-height: 52px !important; margin-top: 18px !important; border-radius: 0 !important; background: transparent !important; }
.lab[data-bazi-workspace="true"] .domain-tab { min-height: 52px !important; padding: 13px 24px !important; border-radius: 11px 11px 0 0 !important; }
.lab[data-bazi-workspace="true"] .workspace { grid-template-columns: 280px minmax(0, 1fr) !important; min-height: calc(100vh - 252px) !important; margin-top: 14px !important; border-color: var(--realm-line) !important; background: rgba(5, 13, 25, .78) !important; }
.lab[data-bazi-workspace="true"] .history-panel { position: relative !important; width: auto !important; transform: none !important; padding: 18px 14px !important; background: rgba(4, 13, 25, .72) !important; }
.lab[data-bazi-workspace="true"] #panel-bazi { min-height: 760px !important; padding: 0 !important; color: var(--realm-ink) !important; background-color: #071326 !important; background-image: linear-gradient(90deg, rgba(5, 11, 22, .2), rgba(5, 11, 22, .34) 44%, rgba(5, 11, 22, .72)), url('/static/agent_lab/bazi-realm.png') !important; background-position: center !important; background-size: cover !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-header { min-height: 132px !important; border-bottom-color: var(--realm-line) !important; padding: 24px 34px !important; background: rgba(5, 11, 22, .68) !important; backdrop-filter: blur(12px) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-title h1 { color: #fff !important; font-size: clamp(30px, 4vw, 52px) !important; letter-spacing: .08em !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .55) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-context { color: #c4d0dc !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-tools label, .lab[data-bazi-workspace="true"] .bazi-workspace-tools span { color: #c4d0dc !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-tools select, .lab[data-bazi-workspace="true"] .bazi-workspace-tools .button { color: #f4f0e8 !important; border-color: var(--realm-line) !important; background: rgba(7, 19, 34, .78) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-nav { border-right-color: var(--realm-line) !important; background: rgba(4, 13, 25, .65) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item { color: #aebac8 !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item[aria-current="page"] { color: #fff !important; border-color: rgba(113, 132, 255, .6) !important; background: rgba(59, 78, 158, .42) !important; box-shadow: 0 0 26px rgba(88, 108, 255, .2) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-nav-note { color: #8d9bad !important; border-top-color: var(--realm-line) !important; }
.lab[data-bazi-workspace="true"] .bazi-workspace-main, .lab[data-bazi-workspace="true"] .bazi-screen, .lab[data-bazi-workspace="true"] .bazi-workflow-screen, .lab[data-bazi-workspace="true"] .bazi-chat-screen { background: transparent !important; }
.lab[data-bazi-workspace="true"] .bazi-screen-heading { background: rgba(5, 11, 22, .38) !important; border-bottom-color: var(--realm-line) !important; }
.lab[data-bazi-workspace="true"] .bazi-screen-heading h2 { color: #fff !important; text-shadow: 0 4px 20px rgba(0, 0, 0, .55) !important; }
.lab[data-bazi-workspace="true"] .bazi-confirmed-summary, .lab[data-bazi-workspace="true"] .bazi-chat-context, .lab[data-bazi-workspace="true"] .bazi-chat-body, .lab[data-bazi-workspace="true"] .profile-module-card { border-color: rgba(144, 159, 255, .3) !important; background: rgba(9, 20, 47, .72) !important; color: #f4f0e8 !important; }
.lab[data-bazi-workspace="true"] .profile-summary { border-color: rgba(144, 159, 255, .3) !important; border-radius: 14px !important; background: rgba(9, 20, 47, .72) !important; color: #f4f0e8 !important; }
.lab[data-bazi-workspace="true"] .profile-summary strong, .lab[data-bazi-workspace="true"] .profile-summary p, .lab[data-bazi-workspace="true"] .bazi-trust-note { color: #c4d0dc !important; }
.lab[data-bazi-workspace="true"] .bazi-primary-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lab[data-bazi-workspace="true"] .bazi-primary-actions .button { min-width: 132px; }
.lab[data-bazi-workspace="true"] .bazi-screen-status:empty { display: none; }
.lab[data-bazi-workspace="true"] .bazi-screen-heading p, .lab[data-bazi-workspace="true"] .bazi-screen-heading h2 { color: #fff !important; }
.lab[data-bazi-workspace="true"] .bazi-screen-status, .lab[data-bazi-workspace="true"] .bazi-trust-note, .lab[data-bazi-workspace="true"] .bazi-chat-context { color: #b4c1d0 !important; }
.lab[data-bazi-workspace="true"] .button-primary, .lab[data-bazi-workspace="true"] .send-button { color: #fff !important; border-color: transparent !important; background: linear-gradient(145deg, #7088ff, #3d50c6) !important; box-shadow: 0 0 24px rgba(88, 108, 255, .42) !important; }
.lab[data-bazi-workspace="true"] .button-outline, .lab[data-bazi-workspace="true"] .button-quiet { color: #dbe4ef !important; border-color: var(--realm-line) !important; background: rgba(7, 19, 34, .72) !important; }
.lab[data-bazi-workspace="true"] input, .lab[data-bazi-workspace="true"] select, .lab[data-bazi-workspace="true"] textarea { color: #fff !important; border-color: rgba(144, 159, 255, .3) !important; background: rgba(7, 19, 34, .78) !important; }

.toast { top: auto !important; right: 24px !important; bottom: 24px !important; left: auto !important; width: min(360px, calc(100% - 48px)) !important; border-left-color: #ff7654 !important; border-radius: 12px !important; background: rgba(12, 20, 34, .94) !important; box-shadow: 0 16px 50px rgba(0, 0, 0, .42) !important; transform: translateY(10px) !important; }
.toast.is-visible { transform: translateY(0) !important; }

/* 紫微会话记录固定在命盘工具区，不再藏在隐藏的提问面板里。 */
.ziwei-conversation-history { margin: 10px 0 14px; border: 1px solid rgba(189, 154, 99, .28); border-radius: 12px; padding: 10px 12px 8px; background: rgba(27, 24, 43, .78); }
.ziwei-conversation-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ziwei-conversation-history-heading div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.ziwei-conversation-history-heading strong { color: #f4dfb4; font-size: 13px; }
.ziwei-conversation-history-heading span, .ziwei-conversation-history-status { color: #aaa3bf; font-size: 11px; }
.ziwei-conversation-history .ziwei-saved-tabs { min-height: 38px; padding: 3px 0 1px; }
.ziwei-conversation-history .ziwei-saved-tabs:empty::before { display: block; padding: 8px 2px; content: "完成排盘后，解读会话会显示在这里"; color: #807894; font-size: 11px; }
.ziwei-conversation-history .ziwei-saved-tab { min-height: 36px; padding: 7px 11px; border-color: #49405e; background: #211e32; color: #c6bdd8; }
.ziwei-conversation-history .ziwei-saved-tab[aria-pressed="true"] { border-color: #bc9a63; color: #f4dfb4; background: linear-gradient(120deg, #554069, #352d49); }

/* 紫微桌面端也使用左侧会话栏，和其他三个智能体保持同一阅读路径。 */
#panel-ziwei { position: relative; }
@media (min-width: 761px) {
  #panel-ziwei .ziwei-conversation-history { position: absolute; z-index: 2; top: 165px; bottom: 20px; left: 20px; width: 250px; margin: 0; overflow-y: auto; }
  #panel-ziwei .ziwei-conversation-history-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  #panel-ziwei .ziwei-conversation-history-heading div { align-items: flex-start; flex-direction: column; gap: 3px; }
  #panel-ziwei .ziwei-conversation-history .ziwei-saved-tabs { display: grid; align-content: start; gap: 6px; overflow: visible; }
  #panel-ziwei .ziwei-conversation-history .ziwei-saved-tab { width: 100%; max-width: none; text-align: left; }
  #panel-ziwei .ziwei-controls, #panel-ziwei #ziwei-status, #panel-ziwei .ziwei-workspace-body { margin-left: 290px; }
}

@media (max-width: 760px) {
  .ziwei-conversation-history-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  #panel-ziwei .ziwei-conversation-history { position: static; }
}

@media (max-width: 600px) {
  .lab[data-bazi-workspace="true"] { width: 100% !important; }
  .lab[data-bazi-workspace="true"] .domain-tabs { margin-top: 7px !important; }
  .lab[data-bazi-workspace="true"] .domain-tab { min-height: 46px !important; padding: 10px 5px !important; }
  .lab[data-bazi-workspace="true"] .workspace { grid-template-columns: 1fr !important; min-height: calc(100dvh - 314px) !important; margin-top: 8px !important; border-radius: 0 !important; }
  .lab[data-bazi-workspace="true"] #sidebar-toggle { display: inline-grid !important; }
  .lab[data-bazi-workspace="true"] .history-panel { position: fixed !important; width: min(320px, calc(100% - 48px)) !important; transform: translateX(-105%) !important; }
  .lab[data-bazi-workspace="true"].is-sidebar-open .history-panel { transform: translateX(0) !important; }
  .lab[data-bazi-workspace="true"] #panel-bazi { min-height: 720px !important; }
  .lab[data-bazi-workspace="true"] .bazi-workspace-header { min-height: 146px !important; padding: 18px 14px !important; }
  .lab[data-bazi-workspace="true"] .bazi-workspace-title h1 { font-size: 32px !important; }
  .toast { right: 14px !important; bottom: 14px !important; width: calc(100% - 28px) !important; }
}

/* 紫微复用工作台统一的全局历史栏；命盘区域保持自己的完整宽度。 */
.lab[data-ziwei-workspace="true"] .workspace {
  min-width: 0 !important;
}
.lab[data-ziwei-workspace="true"] #history-panel {
  display: block !important;
  min-width: 0 !important;
  background: rgba(4, 13, 25, .72) !important;
}
.lab[data-ziwei-workspace="true"] #panel-ziwei .ziwei-conversation-history {
  display: none !important;
}
.lab[data-ziwei-workspace="true"] #panel-ziwei,
.lab[data-ziwei-workspace="true"] #panel-ziwei .ziwei-workspace-body,
.lab[data-ziwei-workspace="true"] #panel-ziwei .ziwei-controls,
.lab[data-ziwei-workspace="true"] #panel-ziwei #ziwei-status {
  min-width: 0 !important;
  margin-left: 0 !important;
}
@media (min-width: 921px) {
  .lab[data-ziwei-workspace="true"] .workspace {
    grid-template-columns: 280px minmax(0, 1fr) !important;
    min-height: calc(100vh - 252px) !important;
    margin-top: 14px !important;
  }
  .lab[data-ziwei-workspace="true"] #history-panel {
    position: relative !important;
    width: auto !important;
    transform: none !important;
    border-right: 1px solid var(--realm-line) !important;
  }
}
@media (max-width: 920px) {
  .lab[data-ziwei-workspace="true"] #sidebar-toggle { display: inline-grid !important; }
  .lab[data-ziwei-workspace="true"] .workspace {
    grid-template-columns: 1fr !important;
  }
  .lab[data-ziwei-workspace="true"] #history-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(320px, calc(100% - 48px)) !important;
    transform: translateX(-105%) !important;
    z-index: 12 !important;
  }
  .lab[data-ziwei-workspace="true"].is-sidebar-open #history-panel {
    transform: translateX(0) !important;
  }
}

/* Keep the nested Bazi light-skin components readable under the immersive theme. */
.lab[data-bazi-workspace="true"] {
  --bazi-canvas: #071326;
  --bazi-paper: rgba(9, 20, 47, .82);
  --bazi-soft: rgba(18, 32, 72, .86);
  --bazi-soft-strong: rgba(31, 48, 98, .9);
  --bazi-ink: #f4f0e8;
  --bazi-muted: #b4c1d0;
  --bazi-line: rgba(144, 159, 255, .3);
  --bazi-line-strong: rgba(166, 180, 255, .52);
  --bazi-accent: #7088ff;
  --bazi-accent-dark: #dbe4ef;
  --bazi-warm: #e7c48f;
  --bazi-warm-soft: rgba(84, 58, 31, .72);
  --bazi-danger: #ff9b9b;
}

.lab[data-bazi-workspace="true"] .bazi-workspace-nav,
.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item:hover,
.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item[aria-current="page"],
.lab[data-bazi-workspace="true"] .bazi-explore-empty,
.lab[data-bazi-workspace="true"] .bazi-chat-empty,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .workflow,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-hypothesis-item,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .birth-grid .check-field,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .option-list label,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-module-grid span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-verdicts span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-cost-summary,
.lab[data-bazi-workspace="true"] .bazi-chat-screen .conversation {
  color: var(--bazi-ink) !important;
  background: var(--bazi-paper) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workspace-nav {
  background: rgba(4, 13, 25, .65) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item:hover {
  background: rgba(28, 51, 76, .62) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workspace-nav-item[aria-current="page"],
.lab[data-bazi-workspace="true"][data-bazi-view="workflow"] .bazi-workspace-nav-item[data-bazi-view="explore"] {
  color: #fff !important;
  background: rgba(59, 78, 158, .42) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workflow-screen .workflow > summary,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-hypothesis-heading,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-module-grid span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-verdicts span,
.lab[data-bazi-workspace="true"] .bazi-chat-screen .message-body,
.lab[data-bazi-workspace="true"] .bazi-chat-screen .message-body > p:not(.message-meta) {
  color: var(--bazi-ink) !important;
}

.lab[data-bazi-workspace="true"] .bazi-chat-screen .message-meta,
.lab[data-bazi-workspace="true"] .bazi-chat-screen .bazi-chat-empty p,
.lab[data-bazi-workspace="true"] .bazi-explore-empty p {
  color: var(--bazi-muted) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-hypothesis-item,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-module-grid span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-verdicts span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .birth-grid .check-field {
  border-color: var(--bazi-line-strong) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-module-grid input:checked + span,
.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-verdicts input:checked + span {
  color: #fff !important;
  background: var(--bazi-accent) !important;
}

.lab[data-bazi-workspace="true"] .bazi-workflow-screen .bazi-cost-summary {
  background: var(--bazi-soft) !important;
}

/* This shared confirmation card is intentionally warm, so its heading must use ink text. */
.domain-panel .action-card {
  color: #1e2722 !important;
}

.domain-panel .action-card strong {
  color: #1e2722 !important;
}

/* Constitution image input: keep the upload path visible on desktop and mobile. */
#panel-constitution .profile-chat .composer {
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

#panel-constitution .profile-chat .composer > textarea {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#panel-constitution .profile-chat .composer > .send-button {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
}

#panel-constitution .constitution-image-controls {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 2px 2px 0;
  color: #b8c9d6;
  font-size: 11px;
}

#panel-constitution .constitution-image-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#panel-constitution .image-attach-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(131, 255, 226, .48);
  border-radius: 8px;
  padding: 5px 11px;
  color: #d8fff5;
  background: rgba(24, 105, 103, .5);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

#panel-constitution .image-attach-button:hover,
#panel-constitution .image-attach-button:focus-within {
  border-color: #83ffe2;
  background: rgba(35, 139, 131, .7);
}

#panel-constitution .image-attach-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(216, 255, 245, .64);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}

#panel-constitution .image-attach-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

#panel-constitution .constitution-image-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#panel-constitution .image-mode-button {
  min-height: 34px;
  border: 1px solid rgba(190, 216, 235, .24);
  border-radius: 7px;
  padding: 5px 10px;
  color: #b8c9d6;
  background: rgba(3, 18, 29, .58);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

#panel-constitution .image-mode-button:hover,
#panel-constitution .image-mode-button:focus-visible {
  border-color: rgba(131, 255, 226, .7);
  color: #e4fff8;
}

#panel-constitution .image-mode-button.is-active {
  border-color: rgba(131, 255, 226, .86);
  color: #05221f;
  background: #83ffe2;
}

#panel-constitution .constitution-image-hint {
  margin: 0;
  color: #8fa6b5;
  font-size: 10px;
  line-height: 1.5;
}

#panel-constitution .constitution-image-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(131, 255, 226, .28);
  border-radius: 8px;
  padding: 7px;
  background: rgba(3, 26, 35, .7);
}

#panel-constitution .constitution-image-preview[hidden] {
  display: none;
}

#panel-constitution .constitution-image-preview img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
}

#panel-constitution .constitution-image-details {
  display: grid;
  min-width: 0;
  gap: 3px;
  flex: 1;
}

#panel-constitution .constitution-image-details strong {
  overflow: hidden;
  color: #e4fff8;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-constitution .constitution-image-details span {
  color: #8fa6b5;
  font-size: 10px;
}

#panel-constitution .constitution-image-remove {
  min-height: 30px;
  border: 1px solid rgba(255, 190, 176, .35);
  border-radius: 7px;
  padding: 4px 8px;
  color: #ffc1b0;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
}

#panel-constitution .constitution-image-remove:hover,
#panel-constitution .constitution-image-remove:focus-visible {
  border-color: #ff9b86;
  color: #fff0eb;
  background: rgba(133, 48, 43, .45);
}

#panel-constitution .constitution-image-mode-value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .domain-panel[data-domain="cureqi"],
  .domain-panel[data-domain="bazi"],
  .domain-panel[data-domain="constitution"] {
    overflow-x: clip;
    overflow-y: visible;
  }

  .domain-panel[data-domain="cureqi"]::after,
  .domain-panel[data-domain="bazi"]::after,
  .domain-panel[data-domain="constitution"]::after {
    display: none;
  }

  .lab[data-bazi-workspace="true"] .bazi-workspace-nav {
    background: rgba(4, 13, 25, .96) !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .32) !important;
  }

  .lab[data-bazi-workspace="true"] ~ .toast {
    bottom: calc(70px + env(safe-area-inset-bottom) + 14px) !important;
  }

  #panel-constitution .profile-chat .composer {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  #panel-constitution .profile-chat .composer > .send-button {
    width: 42px;
  }

  #panel-constitution .constitution-image-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-constitution .image-attach-button {
    justify-content: center;
    width: 100%;
  }

  #panel-constitution .constitution-image-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #panel-constitution .image-mode-button {
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #panel-constitution .constitution-image-preview {
    align-items: flex-start;
  }
}