/* NoraX operate surfaces: shared input, command tray and hub interaction layer. */

body .input-zone {
  position:relative;
  padding-top:10px;
  background:linear-gradient(180deg,transparent,var(--bg-chat) 24%);
}
body .input-zone .input-card {
  width:min(1180px,100%); margin-inline:auto;
  border-radius:16px; border-color:var(--border-card);
  background:color-mix(in srgb,var(--bg-card) 90%,transparent);
  box-shadow:0 18px 44px -34px rgba(0,0,0,.75);
  backdrop-filter:blur(14px) saturate(125%); -webkit-backdrop-filter:blur(14px) saturate(125%);
  transition:border-color .2s ease,box-shadow .25s ease,background .2s ease;
}
body .input-zone .input-card:focus-within {
  border-color:color-mix(in srgb,var(--brand) 70%,var(--border-card));
  box-shadow:0 20px 50px -34px rgba(0,0,0,.8),0 0 0 3px var(--brand-soft);
}
body .input-zone .input-card .text-zone { padding-top:16px; }
body .input-zone .input-card .ctrls { gap:6px; }
body .input-zone .btn-ghost,body .input-zone .btn-primary { min-height:32px;border-radius:9px;padding-inline:12px; }
/* index 输入框有 overlay 高亮层显示文字，故 textarea 选区文字透明（避免两行文字重叠） */
body.chat-surface .input-zone textarea::selection,
body.chat-surface .input-card textarea::selection {
  background:var(--brand-soft);
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* 其余页面（video/ps 等，无 overlay）：选区用品牌色背景 + 正常文字，避免选中后文字看不见 */
body:not(.chat-surface) .input-zone textarea::selection,
body:not(.chat-surface) .input-card textarea::selection,
body:not(.chat-surface) input::selection,
body:not(.chat-surface) textarea::selection {
  background:var(--brand);
  color:#fff;
  -webkit-text-fill-color:#fff;
}
body #filePills { width:min(1180px,100%); margin-inline:auto; }
:root.light body .input-zone .input-card { background:rgba(250,243,230,.88); box-shadow:0 20px 48px -38px rgba(69,48,28,.48); }

/* Hub：保留原卡片结构，只统一图标、底部标签与模型标识。 */
body.hub-surface .content {
  background:
    radial-gradient(circle at 88% 8%,var(--brand-soft),transparent 25%),
    var(--bg-chat);
}
body.hub-surface .section-header { min-height:72px; margin-bottom:20px; }
body.hub-surface .section-header h2 { font-size:clamp(22px,2.5vw,30px); letter-spacing:-.025em; }
body.hub-surface .grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
body.hub-surface .card {
  position:relative; min-height:178px; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; padding:24px; border-radius:16px;
  background:color-mix(in srgb,var(--bg-card) 94%,transparent);
  transition:border-color .2s ease,background .2s ease,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease;
}
body.hub-surface .card:hover {
  background:color-mix(in srgb,var(--bg-card) 88%,var(--brand-soft));
  transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.38);
  border-color:var(--brand);
}
body.hub-surface .card-header,body.hub-surface .card p,body.hub-surface .card-foot { position:relative;z-index:2; }
body.hub-surface .card-header { min-height:44px; }
body.hub-surface .card p { min-height:38px; margin-bottom:12px; }
body.hub-surface .card-foot { margin-top:auto; min-height:24px; padding-right:46px; }
body.hub-surface .card-icon {
  width:44px;height:44px;flex:0 0 44px;border:0;border-radius:0;background:transparent;
  transform-origin:center;
  transition:transform .18s cubic-bezier(.16,1,.3,1),color .18s ease,filter .18s ease;
}
body.hub-surface .card-icon svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round; }
/* 所有 hub 卡片（分类/智能体/工作流/模型）：悬浮时统一给图标抬升反馈，不旋转、不跟随鼠标方向。 */
@media (hover:hover) and (pointer:fine) {
  body.hub-surface .card:hover .card-icon {
    color:var(--brand-hover);
    filter:brightness(1.08);
    transform:translateY(-1px) scale(1.05);
  }
}
body.hub-surface .card-modelmark {
  position:absolute;right:-22px;bottom:-24px;width:88px;height:88px;border:1px solid var(--brand-soft);
  border-radius:50%;color:var(--brand);z-index:1;pointer-events:none;
}
body.hub-surface .provider-icon {
  position:absolute;left:33px;top:31px;width:var(--provider-logo-size,26px);height:var(--provider-logo-size,26px);background:currentColor;
  transform:translate(-50%,-50%);
  -webkit-mask:var(--provider-icon) center/contain no-repeat;mask:var(--provider-icon) center/contain no-repeat;
}
body.hub-surface .provider-icon--openai { --provider-icon:url('/ai-icons/openai.png');--provider-logo-size:52px; }
body.hub-surface .provider-icon--claude { --provider-icon:url('/ai-icons/claude.svg');--provider-logo-size:28px; }
body.hub-surface .provider-icon--deepseek { --provider-icon:url('/ai-icons/deepseek.svg');--provider-logo-size:28px; }
body.hub-surface .provider-icon--gemini { --provider-icon:url('/ai-icons/googlegemini.svg');--provider-logo-size:26px; }
body.hub-surface .provider-icon--grok { --provider-icon:url('/ai-icons/grok.png');--provider-logo-size:28px; }
body.hub-surface .provider-icon--zhipu { --provider-icon:url('/ai-icons/zdotai.svg');--provider-logo-size:27px; }
body.hub-surface .nav-item.active { border-left-width:1px; }
:root.light body.hub-surface .content { background:radial-gradient(circle at 86% 12%,rgba(185,138,47,.08),transparent 24%),radial-gradient(circle at 12% 82%,rgba(170,43,58,.05),transparent 28%),var(--bg-chat); }
:root.light body.hub-surface .card { background:rgba(250,243,230,.8); box-shadow:0 20px 46px -40px rgba(61,45,26,.55); }
:root.light body.hub-surface .card:hover { background:#fff8ec; }

@media(max-width:768px){
  body .input-zone .input-card { border-radius:14px; }
  body.hub-surface .content { padding:24px 16px; }
  body.hub-surface .grid { grid-template-columns:1fr; }
  body.hub-surface .card { min-height:154px; }
  body.hub-surface .card-icon { transition:color .18s ease,filter .18s ease; }
  body.hub-surface .card--category:hover .card-icon { transform:none; }
}

@media(prefers-reduced-motion:reduce){
  .upload-spinner,body.hub-surface .card-icon{animation:none!important;transform:none!important;transition:none!important}
}

/* 对话正文与输入区使用同一阅读轴；正文仍按角色左右对齐，不把段落文字强制居中。 */
html.chat-expanded { --chat-content-max:100%; }
body #fabWrap { pointer-events:none; }
body #fabWrap .fab-fab, body #fabWrap.open .fab-panel { pointer-events:auto; }
body #fabWrap:not(.open) .fab-panel { visibility:hidden; pointer-events:none; }
body #fabWrap .fab-width-toggle { width:auto; min-width:48px; padding-inline:8px; color:var(--t2); cursor:pointer; }
body #templatesBar { flex-wrap:wrap; overflow:visible; min-width:0; box-sizing:border-box; }
body #templateButtons, body #templatesBar .template-buttons { display:flex; flex-wrap:wrap; flex:1; min-width:0; max-width:100%; gap:8px; }
body #templatesBar .tpl-pill { max-width:100%; white-space:normal; overflow-wrap:anywhere; box-sizing:border-box; }
body.chat-surface .messages,
body.workflow-chat-surface .messages {
  width:100%;
  max-width:none;
  margin-inline:0;
  scrollbar-gutter:stable;
  padding-inline:max(28px,calc((100% - var(--chat-content-max,880px)) / 2 + 28px));
}
body.chat-surface .input-zone,
body.workflow-chat-surface .input-zone,
body.chat-surface .templates-bar,
body.workflow-chat-surface .templates-bar {
  width:100%;
  max-width:var(--chat-content-max,880px);
  margin-inline:auto;
}

/* 对话排版：正文保持自然字重，用户气泡与 AI 回复使用同一清晰字体体系（原生 system-ui，贴近 GPT Web）。 */
body.chat-surface .msg-body,
body.workflow-chat-surface .msg-body,
body.media-studio-surface .msg-body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.75;
}
body.chat-surface .msg.ai .msg-body,
body.workflow-chat-surface .msg.ai .msg-body,
body.media-studio-surface .msg.ai .msg-body { color:color-mix(in srgb,var(--t1) 94%,var(--t2)); }
body.chat-surface .msg.user .msg-body,
body.workflow-chat-surface .msg.user .msg-body,
body.media-studio-surface .msg.user .msg-body { font-weight:400; line-height:1.65; }
.msg-foot .message-time { color:var(--t4); font-variant-numeric:tabular-nums; cursor:default; }

/* AI 正文不使用气泡；操作栏与正文首字符严格对齐。用户消息保留品牌气泡。 */
body.chat-surface .msg.ai,
body.workflow-chat-surface .msg.ai,
body.media-studio-surface .msg.ai { width:100%;max-width:100%;align-self:stretch; }
body.chat-surface .msg.ai .msg-body,
body.workflow-chat-surface .msg.ai .msg-body,
body.media-studio-surface .msg.ai .msg-body { padding:0;border:0;border-radius:0;background:transparent;box-shadow:none; }
body.chat-surface .msg.ai .msg-foot,
body.workflow-chat-surface .msg.ai .msg-foot,
body.media-studio-surface .msg.ai .msg-foot { justify-content:flex-start;padding:5px 0 0;margin-top:0; }
.msg-foot .copy-btn,.msg-foot .ask-nora-btn,.msg-foot .download-btn { cursor:pointer;color:var(--t4);transition:color .16s ease; }
.msg-foot .copy-btn:hover,.msg-foot .ask-nora-btn:hover,.msg-foot .download-btn:hover { color:var(--brand); }
.log-dot.error { background:var(--danger); }
.input-zone.is-dragging { outline:1px dashed var(--brand);outline-offset:-6px;background:var(--brand-soft)!important;border-radius:14px; }
/* 工作流页 fab 与 index 一致：作为 chat-area 平级元素，走 base.css 的 fixed 定位 */
body.workflow-chat-surface .templates-bar { display:flex;align-items:center;gap:8px;padding:10px 28px 0;overflow-x:auto; }
body.workflow-chat-surface .template-buttons { display:inline-flex;gap:8px; }

@media(max-width:768px){
  body.chat-surface .messages,
  body.workflow-chat-surface .messages { padding-inline:12px; }
  body.chat-surface .input-zone,
  body.workflow-chat-surface .input-zone,
  body.chat-surface .templates-bar,
  body.workflow-chat-surface .templates-bar { max-width:none; }
}