/* ─────────────────────────────────────────────────────────────
   MaiGPT Shell — shared CSS for all MaiGPT scenario pages
   Fills the 1280×800 stage canvas. Referenced via:
     <link rel="stylesheet" href="../../assets/maigpt-shell.css">
   ───────────────────────────────────────────────────────────── */

/* ── Shell ───────────────────────────────────────────────────── */
.mgc-shell {
  position: absolute; inset: 0;
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', sans-serif;
  font-size: 14px;
  background: #fff;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.mgc-sidebar {
  width: 320px; flex-shrink: 0;
  border-right: 1px solid #f1f5f9;
  background: #fff;
  display: flex; flex-direction: column;
}
.mgc-sidebar-header {
  display: flex; align-items: center;
  gap: 8px; padding: 8px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.mgc-sidebar-title { font-size: 18px; font-weight: 500; color: #0f172a; flex: 1; }
.mgc-new-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px;
  background: #1677ff; color: #fff;
  border: none; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.mgc-conv-list { padding: 6px 8px; flex: 1; overflow-y: auto; }
.mgc-conv-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: #374151; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgc-conv-item:hover { background: #f5f5f5; }
.mgc-conv-item.is-active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
.mgc-conv-item iconify-icon { font-size: 15px; flex-shrink: 0; color: #9ca3af; }
.mgc-conv-item.is-active iconify-icon { color: #1677ff; }

/* ── Main ────────────────────────────────────────────────────── */
.mgc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* ── Topbar ──────────────────────────────────────────────────── */
.mgc-topbar {
  display: flex; align-items: center;
  gap: 8px; padding: 8px 12px;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  height: 52px; flex-shrink: 0;
  background: #fff;
}
.mgc-topbar-left  { display: flex; gap: 8px; flex: 1; min-width: 0; align-items: center; justify-content: flex-end; }
.mgc-topbar-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Ant Design Select — model picker */
.mgc-model-select {
  display: inline-flex; align-items: center; gap: 7px;
  width: 220px; height: 32px; flex-shrink: 0;
  padding: 0 11px;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  font-size: 13px; color: rgba(0,0,0,.88);
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
  user-select: none;
}
.mgc-model-select:hover { border-color: #4096ff; }
.mgc-model-select.open {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5,145,255,.2);
}
.mgc-model-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mgc-model-provider { font-size: 11px; color: #8c8c8c; flex-shrink: 0; }
.mgc-model-caret { color: #bfbfbf; flex-shrink: 0; font-size: 13px; }

/* Ant Design Button */
.mgc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  font-size: 13px; color: rgba(0,0,0,.88);
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
}
.mgc-btn:hover { color: #1677ff; border-color: #1677ff; }
.mgc-btn iconify-icon { font-size: 14px; }
.mgc-btn.is-primary { color: #1677ff; border-color: #1677ff; }
.mgc-collapse {
  height: 32px; display: flex; align-items: center;
  border-left: 1px solid #f0f0f0; padding-left: 10px;
  cursor: pointer; color: #6b7280; font-size: 18px;
}

/* Status toasts */
.mgc-switch-toast {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #047857; background: #ecfdf5;
  padding: 3px 10px; border-radius: 20px; font-weight: 500;
}

/* ── Chat area ───────────────────────────────────────────────── */
.mgc-chat-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.mgc-chat-messages {
  flex: 1; display: flex; flex-direction: column;
  padding: 20px 28px; gap: 0;
  overflow-y: auto; width: 100%;
}
.mgc-welcome {
  font-size: 26px; font-weight: 400;
  color: #4b5563; line-height: 1.625;
  margin-bottom: 32px; text-align: center;
}

/* ── InputBar ────────────────────────────────────────────────── */
.mgc-inputbar {
  width: calc(100% - 56px);
  margin: 0 28px 36px;
  border: 1px solid #e5e7eb; border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  flex-shrink: 0;
}
.mgc-inputbar-inner { padding: 14px 16px; display: flex; flex-direction: column; }
.mgc-textarea {
  width: 100%; border: none; outline: none; resize: none;
  background: transparent; font-family: inherit;
  font-size: 14px; color: #374151; line-height: 1.5;
  min-height: 22px;
}
.mgc-textarea::placeholder { color: #9ca3af; }
.mgc-input-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}
.mgc-input-left { display: flex; align-items: center; gap: 6px; }
.mgc-plus-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; cursor: pointer;
}
.mgc-plus-btn iconify-icon { font-size: 18px; }
.mgc-send-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1677ff; border: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}
.mgc-send-btn.disabled { background: #e5e7eb; cursor: not-allowed; }
.mgc-send-btn iconify-icon { font-size: 14px; }

/* Selected skill / tool / deep-research chip (PlusMenuBar SelectedChip) */
.mgc-selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 9999px;
  border: 1px solid rgba(22,119,255,.25);
  background: rgba(22,119,255,.08);
  font-size: 13px; font-weight: 500; color: #1677ff;
  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.mgc-selected-chip iconify-icon { font-size: 14px; flex-shrink: 0; }
.mgc-selected-chip .mgc-chip-close { font-size: 12px; flex-shrink: 0; opacity: .7; }

/* Attachment / tool chips in inputbar */
.mgc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 13px;
  font-size: 12px; color: #0369a1;
}
.mgc-chip iconify-icon { font-size: 13px; }

/* ── Model dropdown ──────────────────────────────────────────── */
.mgc-model-dropdown {
  position: absolute;
  width: 280px; z-index: 100;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12);
  display: none;
}
.mgc-model-dropdown.open { display: block; }
.mgc-dd-group {
  font-size: 11px; font-weight: 600; color: #9ca3af;
  padding: 7px 10px 3px; text-transform: uppercase; letter-spacing: .05em;
}
.mgc-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.mgc-dd-item:hover { background: #f5f5f5; }
.mgc-dd-item.selected { background: #e6f4ff; }
.mgc-dd-item.active { background: #f0fdf4; }
.mgc-dd-name { flex: 1; font-size: 13px; font-weight: 500; color: #0f172a; }
.mgc-dd-badge { font-size: 11px; color: #8c8c8c; background: #f5f5f5; padding: 1px 6px; border-radius: 4px; }
.mgc-dd-check { font-size: 13px; color: #1677ff; }

/* ── Right panel split layout (KB / Canvas) ─────────────────── */
.mgc-panel-row { display: flex; flex: 1; min-height: 0; }
.mgc-chat-col   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mgc-resize-bar { width: 4px; background: #f5f5f5; cursor: col-resize; flex-shrink: 0; }
.mgc-side-panel {
  width: 380px; flex-shrink: 0;
  border-left: 1px solid #f1f5f9;
  display: flex; flex-direction: column;
  background: #fff; overflow: hidden;
}
.mgc-side-panel-hd {
  display: flex; align-items: center;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff; flex-shrink: 0;
  gap: 2px; height: 44px;
}
.mgc-side-panel-title {
  flex: 1; font-size: 12px; color: #374151; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgc-side-panel-icon-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; cursor: pointer; font-size: 16px; flex-shrink: 0;
}
.mgc-side-panel-icon-btn.active { background: #f3f4f6; color: #111827; }
.mgc-side-panel-body {
  flex: 1; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; background: #f9fafb;
}

/* ── Plus menu overlay ───────────────────────────────────────── */
.pmm-overlay {
  position: absolute;
  bottom: 76px; left: 44px;
  display: flex; align-items: flex-end;
  gap: 6px; z-index: 200;
}
.pmm-menu {
  width: 240px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  padding: 4px;
}
.pmm-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; color: #374151; cursor: pointer;
}
.pmm-item.active { background: #f3f4f6; color: #111827; }
.pmm-item-left { display: flex; align-items: center; gap: 8px; }
.pmm-item-icon { font-size: 16px; color: #6b7280; flex-shrink: 0; }
.pmm-item.active .pmm-item-icon { color: #374151; }
.pmm-item-arrow { font-size: 14px; color: #9ca3af; }
.pmm-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }
.pmm-toggle {
  width: 28px; height: 16px;
  background: #e5e7eb; border-radius: 8px;
  position: relative; flex-shrink: 0;
}
.pmm-toggle.on { background: #1677ff; }
.pmm-toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
}
.pmm-toggle.on::after { left: 14px; }
.pmm-plus-active { background: #f3f4f6 !important; }

/* Submenu */
.pmm-submenu {
  width: 320px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  display: flex; flex-direction: column; overflow: hidden;
}
.pmm-sub-hd {
  padding: 8px 12px 2px;
  font-size: 11px; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; justify-content: space-between;
}
.pmm-sub-items { padding: 2px 4px; flex: 1; overflow: hidden; }
.pmm-sub-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.pmm-sub-item.selected { background: #eff6ff; }
.pmm-sub-check {
  width: 16px; height: 16px; margin-top: 1px;
  border: 1.5px solid #d9d9d9; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #fff;
}
.pmm-sub-check.checked { background: #1677ff; border-color: #1677ff; }
.pmm-sub-info { flex: 1; min-width: 0; }
.pmm-sub-name { font-size: 13px; font-weight: 500; color: #111827; }
.pmm-sub-item.selected .pmm-sub-name { color: #1d4ed8; }
.pmm-sub-desc { font-size: 11px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmm-sub-item.selected .pmm-sub-desc { color: #60a5fa; }
.pmm-sub-footer { border-top: 1px solid #f1f5f9; padding: 4px; flex-shrink: 0; }
.pmm-sub-action {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: #374151; cursor: pointer;
}
.pmm-sub-action:hover { background: #f9fafb; }

/* Connector submenu items */
.pmm-conn-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  margin: 0 4px;
}
.pmm-conn-item:hover { background: #f9fafb; }
.pmm-conn-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pmm-conn-logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: #f9fafb; border: 1px solid #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
.pmm-conn-name { font-size: 13px; font-weight: 500; color: #1f2937; }

/* ── KB / Canvas split-row layout ───────────────────────────── */
.mgc-kb-row { display: flex; flex: 1; min-height: 0; }
.mgc-kb-chat-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mgc-kb-resize-bar { width: 4px; background: #f5f5f5; cursor: col-resize; flex-shrink: 0; }

/* ── Canvas Panel ────────────────────────────────────────────── */
.mgc-canvas-col {
  width: 400px; flex-shrink: 0;
  border-left: 1px solid #e4e4e7;
  background: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mgc-canvas-hd {
  display: flex; align-items: center;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff; flex-shrink: 0;
  gap: 2px; height: 44px;
}
.mgc-canvas-title {
  flex: 1; font-size: 12px; color: #374151; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgc-canvas-icon-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; cursor: pointer; font-size: 16px; flex-shrink: 0;
}
.mgc-canvas-icon-btn.active { background: #f3f4f6; color: #111827; }
.mgc-canvas-body {
  flex: 1; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; background: #f9fafb;
}
.mgc-canvas-code-body {
  flex: 1; overflow: auto;
  padding: 16px 20px;
  background: #1e293b;
  font-family: 'SF Mono','Consolas','Menlo',monospace;
  font-size: 12px; line-height: 1.85; color: #cbd5e1;
  white-space: pre;
}
.mgc-canvas-code-body .ck { color: #c084fc; }
.mgc-canvas-code-body .cn { color: #60a5fa; }
.mgc-canvas-code-body .ca { color: #7dd3fc; }
.mgc-canvas-code-body .cs { color: #86efac; }
.mgc-canvas-code-body .cq { color: #fde68a; }
.mgc-canvas-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #6d28d9; background: #ede9fe;
  padding: 3px 8px; border-radius: 4px; margin-top: 8px;
}

/* ── Artifact link (canvas chat bubble) ─────────────────────── */
.mgc-artifact-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; cursor: pointer; margin-top: 6px;
}
.mgc-artifact-link-icon { font-size: 15px; flex-shrink: 0; }
.mgc-artifact-link-name {
  flex: 1; font-size: 12px; font-weight: 500; color: #374151;
  font-family: 'SF Mono', Consolas, 'Menlo', monospace;
}
.mgc-artifact-link-arrow { font-size: 13px; color: #9ca3af; }

/* ── Invoice batch: file drag demo ─────────────────────────── */
.inv-drag-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.inv-drag-files-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.inv-drag-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 76px;
  padding: 12px 8px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
  opacity: 0;
}
.inv-drag-file-name {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
.inv-drag-files-wrap { position: relative; }
.inv-drag-cursor {
  position: absolute;
  top: -20px; right: -16px;
  opacity: 0;
  pointer-events: none;
}
.inv-drag-ghost-stack {
  position: relative;
}
.inv-drag-ghost {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid #dbeafe;
  border-radius: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
}
.inv-drag-ghost-back2 {
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  z-index: 0;
  opacity: .55;
}
.inv-drag-ghost-back1 {
  position: absolute;
  inset: 0;
  transform: translate(4px, 4px);
  z-index: 1;
  opacity: .75;
}
.inv-drag-ghost-front {
  position: relative;
  z-index: 2;
}
.inv-drag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #1677ff;
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

@keyframes inv-drag-in {
  0%   { opacity: 0; transform: translateY(-36px) rotate(-6deg) scale(.8); }
  65%  { opacity: 1; transform: translateY(3px) rotate(1deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes inv-cursor-move {
  0%   { opacity: 0; transform: translate(90px, -55px); }
  18%  { opacity: 1; transform: translate(65px, -38px); }
  75%  { opacity: 1; transform: translate(0, 0); }
  90%  { opacity: .6; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-4px, 6px); }
}

.panel.is-active .inv-drag-file:nth-child(1) { animation: inv-drag-in .5s cubic-bezier(.34,1.56,.64,1) 1.25s both; }
.panel.is-active .inv-drag-file:nth-child(2) { animation: inv-drag-in .5s cubic-bezier(.34,1.56,.64,1) 1.55s both; }
.panel.is-active .inv-drag-file:nth-child(3) { animation: inv-drag-in .5s cubic-bezier(.34,1.56,.64,1) 1.85s both; }
.panel.is-active .inv-drag-file:nth-child(4) { animation: inv-drag-in .5s cubic-bezier(.34,1.56,.64,1) 2.15s both; }
.panel.is-active .inv-drag-file:nth-child(5) { animation: inv-drag-in .5s cubic-bezier(.34,1.56,.64,1) 2.45s both; }
.panel.is-active .inv-drag-cursor { animation: inv-cursor-move 1.1s ease .1s both; }

/* ── File-QA combined Panel 1: phase wrappers ────────────────── */
.fqa-upload-wrap,
.fqa-parse-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fqa-upload-wrap { opacity: 0; }
.fqa-parse-wrap { opacity: 0; }

@keyframes fqa-upload-out {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
.panel.is-active .fqa-upload-wrap {
  animation: fqa-upload-out 0.5s ease 3.6s both;
}

@keyframes fqa-parse-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.panel.is-active .fqa-parse-wrap {
  animation: fqa-parse-in 0.6s ease 3.9s both;
}

/* ── File-QA Panel 1: single-file drag-in cursor ─────────────── */
.fqa-drag-cursor {
  position: absolute;
  top: 48%;
  left: 52%;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

@keyframes fqa-cursor-drag {
  0%   { opacity: 0; transform: translate(200px, -130px); }
  12%  { opacity: 1; transform: translate(130px, -85px); }
  72%  { opacity: 1; transform: translate(0, 0); }
  88%  { opacity: .5; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

.panel.is-active .fqa-drag-cursor {
  animation: fqa-cursor-drag 3s ease 0.6s both;
}