/* AI Chat Hub — Flight Deck command interface */
:root {
  --fd-black: #08090b;
  --fd-panel: #101214;
  --fd-panel-2: #151719;
  --fd-panel-3: #1a1c1e;
  --fd-line: #303236;
  --fd-line-strong: #4a4b4d;
  --fd-red: #c83b38;
  --fd-red-bright: #ed584b;
  --fd-red-dark: #7f2024;
  --fd-gold: #d7b264;
  --fd-gold-bright: #f0d18b;
  --fd-silver: #c8c5bd;
  --fd-silver-dim: #8c8d8a;
  --fd-green: #75c79b;
  --fd-amber: #e6ad4e;
  --color-background: var(--fd-black);
  --color-surface: #0d0f11;
  --color-surface-raised: var(--fd-panel);
  --color-surface-hover: var(--fd-panel-2);
  --color-border: rgb(200 197 189 / .16);
  --color-border-strong: rgb(200 197 189 / .3);
  --color-foreground: #f3f1ec;
  --color-muted-foreground: var(--fd-silver-dim);
  --color-primary: var(--fd-red);
  --color-primary-hover: var(--fd-red-bright);
  --color-accent: var(--fd-gold);
  --color-ring: rgb(237 88 75 / .72);
  --app-sidebar-width: 84px;
  --app-topbar-height: 64px;
  --button-primary-bg: linear-gradient(135deg, var(--fd-red), #982426);
  --card-bg: rgb(16 18 20 / .92);
  --card-radius: 14px;
}

body {
  background:
    linear-gradient(rgb(255 255 255 / .012) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .012) 1px, transparent 1px),
    radial-gradient(900px 540px at 72% -16%, rgb(183 42 41 / .11), transparent 68%),
    var(--fd-black);
  background-size: 30px 30px, 30px 30px, auto, auto;
}
body::before { opacity: .1; }
button { border-radius: 9px; background: #141618; border-color: var(--fd-line); box-shadow: none; }
button.primary, .send-btn { background: var(--button-primary-bg) !important; border-color: #df554a !important; box-shadow: 0 10px 24px rgb(142 30 31 / .24) !important; }
button.primary:hover:not(:disabled), .send-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--fd-red-bright), var(--fd-red-dark)) !important; }
button.soft { color: var(--fd-gold-bright); background: rgb(215 178 100 / .08); border-color: rgb(215 178 100 / .3); }

/* Compact command rail */
.sidebar { width: var(--app-sidebar-width); padding: 16px 10px 12px; align-items: center; background: rgb(11 12 14 / .96); }
.brand { width: 48px; height: 48px; min-height: 48px; padding: 0; margin: 4px 0 24px; font-size: 0; }
.brand::before { inset: 0; width: 48px; height: 48px; left: 0; border-radius: 14px; background: linear-gradient(145deg, #d33a32, #821c24); border: 1px solid #f09b5b; box-shadow: 0 12px 26px rgb(145 31 31 / .32); }
.brand::after { content: "AI"; left: 15px; top: 15px; font-size: 13px; color: white; }
.nav { width: 100%; gap: 9px; align-items: center; }
.nav-item { width: 52px; min-height: 52px; padding: 0; justify-content: center; border-radius: 13px; }
.nav-item > span:last-child { position: fixed; left: 76px; z-index: 110; padding: 7px 10px; border: 1px solid var(--fd-line); border-radius: 8px; background: #151719; color: var(--fd-silver); font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: .15s ease; }
.nav-item:hover > span:last-child { opacity: 1; transform: translateX(0); }
.nav-item.active { background: #3a1719; border-color: #6f292b; }
.nav-item.active::before { left: -11px; width: 3px; height: 24px; background: var(--fd-red-bright); box-shadow: 0 0 12px rgb(237 88 75 / .65); }
.nav-item .ic { color: var(--fd-silver); }
.nav-item.active .ic { color: white; }
.sidebar-foot { width: 100%; padding: 12px 0 0; align-items: center; }
.sidebar-foot .user-card { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; border-color: #e2bd70; background: #b98b3e; color: #17120d; overflow: hidden; }
.sidebar-foot .user-name { font-size: 0; }
.sidebar-foot .user-name::after { content: "TT"; font-size: 11px; font-weight: 800; }
.sidebar-foot .user-meta { display: none; }
.sidebar-foot > button { width: 46px; padding: 0; font-size: 0; }
.sidebar-foot > button::before { content: "退出"; font-size: 10px; color: var(--fd-silver-dim); }

/* Command header */
.topbar { padding: 0 22px; border-bottom-color: var(--fd-line); background: rgb(8 9 11 / .82); }
.topbar-title { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.topbar-title::before { content: "MISSION / "; color: var(--fd-gold); font-size: 10px; letter-spacing: .14em; }
.topbar-actions > button { border-radius: 9px; }
.quota-text { background: #121416; border-color: var(--fd-line); color: var(--fd-silver); }

/* Chat mission bay */
.chat-layout { display: grid; grid-template-columns: 230px minmax(420px, 1fr) 310px; }
.chat-history-panel { width: 230px; background: #0d0f11; border-right-color: var(--fd-line); }
.config-panel { width: 310px; background: #0d0f11; border-left-color: var(--fd-line); }
.history-inner { padding: 16px 10px; }
.ch-head { min-height: 38px; }
.ch-title::before { content: "TASK LOG / "; display: block; margin-bottom: 3px; color: var(--fd-gold); font-size: 9px; letter-spacing: .12em; }
.ch-new-btn { color: var(--fd-gold-bright); border-color: rgb(215 178 100 / .28); background: rgb(215 178 100 / .05); }
.ch-item { border-radius: 10px; }
.ch-item.active { background: #351a1c; border-color: #6d3130; box-shadow: inset 2px 0 var(--fd-red-bright); }
.chat-main { min-width: 0; background: rgb(10 11 13 / .42); }
.messages { padding: 24px clamp(18px, 3.2vw, 48px) 12px; }
.msg-bubble { border-radius: 4px 13px 13px 13px; border-color: #343638; background: #17191b; }
.msg.user .msg-bubble { border-radius: 13px 4px 13px 13px; background: #341b1d; border-color: #713a38; }
.msg-avatar { border-radius: 8px; background: #282a2c; border-color: #535456; }
.msg.user .msg-avatar { background: #b98b3e; border-color: #e0bb6f; color: #17120d; }
.welcome-badge { color: var(--fd-gold); border-color: rgb(215 178 100 / .35); background: rgb(215 178 100 / .06); }
.welcome-title { background: linear-gradient(120deg, #fff, #d8d2c5 58%, #e2ba66); -webkit-background-clip: text; }
.composer-shell { padding-left: clamp(16px, 3vw, 42px); padding-right: clamp(16px, 3vw, 42px); }
.composer { max-width: 920px; border-radius: 14px; border-color: #45474a; background: #181a1c; }
.composer:focus-within { border-color: #8b403d; box-shadow: 0 18px 44px rgb(0 0 0 / .34), 0 0 0 2px rgb(200 59 56 / .1); }
.composer-btn.active { color: var(--fd-gold-bright); background: rgb(215 178 100 / .09); border-color: rgb(215 178 100 / .25); }
.send-btn {
  position: relative;
  width: 64px !important;
  min-width: 64px !important;
  padding-inline: 15px !important;
  border-radius: 9px !important;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0;
}
.send-btn::before {
  display: none !important;
  content: none !important;
}
.send-btn:disabled::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: transparent !important;
  mask: none !important;
  border: 2px solid rgb(215 178 100 / .22);
  border-top-color: var(--fd-gold);
  border-right-color: var(--fd-red-bright);
  border-radius: 50%;
  animation: fdRadarSpin .8s linear infinite;
}
.cp-pane { padding: 16px 14px; }
.cp-title::before { content: "SYSTEM CONFIG / "; display: block; color: var(--fd-gold); font-size: 9px; letter-spacing: .12em; margin-bottom: 3px; }
.attach-cell, .agent-item, .skill-item { border-radius: 10px !important; background: #121416 !important; }

/* HUD waiting states */
.hud-waiting .msg-avatar { position: relative; color: transparent; }
.hud-waiting .msg-avatar::before, .ag-spinner, .send-btn:disabled::before, .fashion-generate-btn:disabled::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgb(215 178 100 / .22);
  border-top-color: var(--fd-gold);
  border-right-color: var(--fd-red-bright);
  border-radius: 50%;
  animation: fdRadarSpin .8s linear infinite;
}
.hud-waiting .msg-bubble { position: relative; overflow: hidden; padding-left: 42px; color: var(--fd-silver); border-color: #62433a; background: linear-gradient(90deg, #191719, #211a17, #191719); background-size: 220% 100%; animation: fdSweep 2.2s ease-in-out infinite; }
.hud-waiting .msg-bubble::before { content: ""; position: absolute; left: 15px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border: 1px solid var(--fd-red-bright); border-radius: 50%; box-shadow: 0 0 0 4px rgb(200 59 56 / .1), 0 0 12px rgb(200 59 56 / .28); animation: fdPulse 1.2s ease-in-out infinite; }
.send-btn:disabled, .fashion-generate-btn:disabled { color: transparent !important; opacity: 1; display: inline-flex; justify-content: center; align-items: center; }
.ag-spinner { margin-left: auto; }
.expert-running-badge, .expert-badge.running { color: var(--fd-gold-bright); border-color: rgb(215 178 100 / .4); background: rgb(215 178 100 / .08); }
@keyframes fdRadarSpin { to { transform: rotate(360deg); } }
@keyframes fdPulse { 50% { opacity: .45; transform: translateY(-50%) scale(.72); } }
@keyframes fdSweep { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Fashion operations deck */
.fashion-main { grid-template-columns: 152px minmax(360px, 440px) minmax(420px, 1fr); gap: 0; }
.fashion-side { background: #0d0f11; border-right-color: var(--fd-line); padding: 14px 9px; }
.fashion-menu-item { border-radius: 9px; }
.fashion-menu-item.active { background: #351a1c; border-color: #6d3130; color: #fff; box-shadow: inset 2px 0 var(--fd-red-bright); }
.fashion-config { padding: 16px; border-right-color: var(--fd-line); }
.fashion-preview-pane { padding: 16px; }
.fashion-panel, .fashion-reference-box, .fashion-result-box { border-radius: 12px !important; border-color: #353638 !important; background: #111315 !important; }
.fashion-chip, .fashion-tag { border-radius: 8px; background: #151719; border-color: #393b3d; }
.fashion-chip.active, .fashion-tag.active { background: #3a1b1d; border-color: #8a3b38; color: #fff; }
.fashion-model-preset-btn.active { background: rgb(215 178 100 / .1); border-color: rgb(215 178 100 / .42); color: var(--fd-gold-bright); }

/* Admin & login */
.admin-main .panel { border-radius: 12px !important; border-color: #343638 !important; background: #111315 !important; }
.admin-main .section h2::before { content: "SYS / "; color: var(--fd-gold); font-size: 10px; letter-spacing: .12em; }
.admin-main thead { background: #191b1d !important; }
.admin-main tbody tr:hover { background: rgb(200 59 56 / .055) !important; }
body:has(> .card) { background: radial-gradient(760px 560px at 18% 48%, rgb(183 42 41 / .14), transparent 66%), radial-gradient(560px 360px at 82% -10%, rgb(215 178 100 / .07), transparent 70%), var(--fd-black) !important; }
body:has(> .card)::before { content: "AI CHAT HUB / FLIGHT DECK"; color: var(--fd-gold); }
body:has(> .card)::after { content: "进入任务指挥舱\A\A对话、视觉生成与智能体协作，\A按照任务流程快速完成。"; }
body > .card { border-radius: 16px !important; border-color: #4a4b4d !important; background: rgb(16 18 20 / .94) !important; }
body > .card h1 { background: linear-gradient(120deg, white, #d9d3c6 62%, #deb65e) !important; -webkit-background-clip: text !important; }
body > .card .tab.active { background: #3a1b1d; box-shadow: 0 0 0 1px #713a38 inset; }

/* Edge protection and adaptive compression */
@media (max-width: 1380px) {
  .chat-layout { grid-template-columns: 210px minmax(380px, 1fr) 280px; }
  .chat-history-panel { width: 210px; }
  .config-panel { width: 280px; }
  .fashion-main { grid-template-columns: 138px minmax(330px, 1fr); }
}
@media (max-width: 1100px) {
  :root { --app-sidebar-width: 72px; }
  .sidebar { width: 72px; }
  .chat-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .chat-history-panel { width: 200px; }
  .config-panel { display: none; }
  .messages { padding-inline: 18px; }
  .composer-shell { padding-inline: 16px; }
}
@media (max-width: 800px) {
  :root { --app-sidebar-width: 0px; }
  .sidebar { width: 100%; }
  .sidebar .nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; width: 100%; gap: 4px; }
  .nav-item > span:last-child { position: static; opacity: 1; transform: none; padding: 0; border: 0; background: none; }
  .chat-layout { display: block; }
  .chat-history-panel { display: none; }
  .main { min-width: 0; }
  .topbar-actions { max-width: 68%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-end; }
  .topbar-actions > * { flex: 0 0 auto; }
  .composer-bar { gap: 6px; }
  .composer-bar-left { min-width: 0; overflow-x: auto; }
  .composer-bar-right { flex: 0 0 auto; }
  .fashion-main { grid-template-columns: minmax(0, 1fr); }
  .fashion-side { overflow-x: auto; }
}
@media (max-width: 480px) {
  .topbar { padding-inline: 12px; }
  .topbar-title { font-size: 12px; }
  .topbar-title::before { display: none; }
  .messages { padding-inline: 10px; }
  .msg { max-width: 96%; }
  .composer-shell { padding: 8px 8px 12px; }
  .composer { border-radius: 12px; }
  .composer-btn { min-width: 32px; }
  .send-btn { width: 56px !important; min-width: 56px !important; padding-inline: 10px !important; }
  .fashion-config, .fashion-preview-pane { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-waiting .msg-bubble, .hud-waiting .msg-bubble::before, .hud-waiting .msg-avatar::before, .ag-spinner, .send-btn:disabled::before, .fashion-generate-btn:disabled::before { animation: none !important; }
}

/* Complete module convergence: overlays, skills, agents, expert mode, gallery and feedback */
.popover, .modal-card, .ag-modal {
  border: 1px solid var(--fd-line-strong) !important;
  border-radius: 13px !important;
  background: rgb(17 19 21 / .98) !important;
  box-shadow: 0 28px 70px rgb(0 0 0 / .56), inset 0 1px rgb(255 255 255 / .025) !important;
}
.modal-mask { background: rgb(0 0 0 / .72); backdrop-filter: blur(7px); }
.modal-card h3, .ag-header h2, .skill-modal-title { letter-spacing: .02em; }
.modal-card h3::before, .ag-header h2::before { content: "SYSTEM / "; color: var(--fd-gold); font-size: 9px; letter-spacing: .14em; }
.popover-item { min-height: 42px; border-radius: 9px; border-color: transparent; }
.popover-item:hover:not(:disabled) { color: #fff; background: #351a1c; border-color: #693130; }
.popover-item .ic { color: var(--fd-gold); }
.popover-slider { border-top-color: var(--fd-line); }

.skill-item, .agent-item {
  position: relative;
  padding: 12px;
  border: 1px solid #343638 !important;
  border-radius: 10px !important;
  background: #121416 !important;
}
.skill-item::before, .agent-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: #4c4e50; }
.skill-item:hover::before, .agent-item:hover::before { background: var(--fd-red-bright); box-shadow: 0 0 10px rgb(237 88 75 / .5); }
.skill-item:hover, .agent-item:hover { border-color: #65403c !important; box-shadow: 0 10px 24px rgb(0 0 0 / .22) !important; }
.skill-actions button, .agent-actions button { min-height: 32px; border-radius: 8px; }

.ag-modal { width: min(920px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 32px)); }
.ag-header, .ag-footer { border-color: var(--fd-line); background: #111315; }
.ag-step { border-color: #343638; background: #0f1113; }
.ag-step-active { background: #351a1c; box-shadow: inset 2px 0 var(--fd-red-bright); }
.ag-step-done { color: var(--fd-gold-bright); }
.ag-output-box { border-color: #383a3c; border-radius: 10px; background: #090b0c; }
.ag-output-content { color: #d4d1ca; }
.ag-status-text, .ag-dots { color: var(--fd-gold); }
.ag-done-card { border-color: #514936 !important; background: linear-gradient(145deg, #171817, #201b13) !important; }

.expert-bubble { border-color: #5d4237 !important; background: linear-gradient(180deg, rgb(57 31 29 / .56), rgb(18 20 22 / .92)); }
.expert-step, .expert-final { border-color: #383a3c; border-radius: 9px; background: #121416; }
.expert-step summary { min-height: 30px; display: flex; align-items: center; }
.expert-final { border-left: 2px solid var(--fd-gold); }
.expert-final-btn { border-radius: 8px; }
.expert-final-btn:hover { color: var(--fd-gold-bright); border-color: var(--fd-gold); background: rgb(215 178 100 / .07); }
.expert-cancel-btn { color: #ff786d; border-color: rgb(237 88 75 / .45); }

.account-center-layout { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
.account-center-actions-card, .account-meta { border-color: #36383a; background: #101214; border-radius: 10px; }
.account-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fashion-reference-box { position: relative; overflow: hidden; }
.fashion-reference-head, .fashion-dress-ref-head, .fashion-result-head { min-height: 40px; gap: 10px; }
.fashion-reference-head::before { content: "INPUT / "; color: var(--fd-gold); font-size: 9px; letter-spacing: .12em; }
.fashion-result-box::before { content: "OUTPUT DECK"; display: block; margin-bottom: 10px; color: var(--fd-gold); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.fashion-ref-grid, .attach-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.fashion-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fashion-gallery-item { border-color: #333638; border-radius: 10px; background: #101214; overflow: hidden; }
.fashion-gallery-item:hover { border-color: #71413b !important; transform: translateY(-2px); }
.fashion-gallery-item.active { border-color: var(--fd-red-bright) !important; box-shadow: 0 0 0 1px rgb(237 88 75 / .3) inset !important; }
.fashion-gallery-meta { color: var(--fd-silver-dim); }
.fashion-notice { border-left: 2px solid var(--fd-gold); border-radius: 8px; background: rgb(215 178 100 / .055); }
.fashion-drop-overlay, .drop-overlay { background: rgb(72 22 23 / .9); border-color: var(--fd-red-bright); color: #fff; }

.empty, .fashion-gallery-empty { position: relative; border-color: #343638; background: #0e1012; }
.empty::before, .fashion-gallery-empty::before { content: "NO ACTIVE MISSION"; color: var(--fd-gold); font-size: 9px; letter-spacing: .14em; margin-bottom: 8px; }

.toast {
  right: 20px;
  bottom: 20px;
  border: 1px solid #45474a;
  border-left: 3px solid var(--fd-gold);
  border-radius: 10px;
  background: #151719;
  color: #e4e1da;
  box-shadow: 0 18px 44px rgb(0 0 0 / .46);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.toast.error { border-color: #75403d; border-left-color: var(--fd-red-bright); color: #ff9a90; }
.toast.success { border-color: #41604e; border-left-color: var(--fd-green); color: #9ce0b9; }

.error { color: #ff8177; }
.success { color: #89d4aa; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .48; cursor: not-allowed; }
.send-btn:disabled, .fashion-generate-btn:disabled { opacity: 1; }

/* Prevent module deformation at every edge */
.view, .chat-layout, .chat-main, .messages-wrap, .messages, .fashion-workbench, .fashion-main, .fashion-config, .fashion-preview-pane, .admin-main { min-width: 0; min-height: 0; }
.topbar-title, .ch-title, .cp-title, .panelhead h3, .fashion-reference-head strong, .fashion-result-head strong { overflow-wrap: anywhere; }
img, video, canvas { max-width: 100%; }
table { max-width: 100%; }
.modal-card, .popover, .ag-modal { max-width: calc(100vw - 24px); }

@media (max-width: 980px) {
  .account-center-layout, .account-form-grid { grid-template-columns: minmax(0, 1fr); }
  .fashion-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
}
@media (max-width: 800px) {
  .sidebar { height: calc(68px + env(safe-area-inset-bottom)); }
  .main { height: calc(100dvh - 68px - env(safe-area-inset-bottom)); }
  .view.active, .chat-layout, .chat-main { height: 100%; }
  .chat-main { display: flex; flex-direction: column; }
  .messages { padding-bottom: 10px; }
  .composer-shell { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .composer-hint { flex-wrap: wrap; row-gap: 4px; }
  .toast {
    top: 74px;
    left: 10px;
    right: 10px;
    bottom: auto;
    max-width: none;
    padding: 10px 12px;
    line-height: 1.35;
    transform: translateY(-8px);
  }
  .ag-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .ag-body { overflow-y: auto; }
  .fashion-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .topbar-actions .ghost, .topbar-actions button { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
  .composer-bar { flex-wrap: nowrap; row-gap: 0; }
  .composer-bar-left { gap: 2px; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .composer-bar-left::-webkit-scrollbar { display: none; }
  .composer-bar-right { flex: 0 0 auto; margin-left: 4px; }
  .composer-btn { padding-inline: 8px; font-size: 11px; }
  .model-picker-btn { width: 34px; min-width: 34px; max-width: 34px; padding-inline: 0; justify-content: center; }
  .model-picker-btn span:first-child { display: none; }
  .fashion-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .row { flex-direction: column; }
  .modal-card { padding: 16px !important; }
}