/* 喵特工样式表 */
:root {
  --bg: #0f0f1a; --card: #1a1a2e; --border: #2a2a4a;
  --primary: #6c5ce7; --primary-dim: #4a3db8;
  --accent: #00cec9; --text: #e0e0f0; --text-dim: #8888aa;
  --success: #00b894; --danger: #e17055; --warn: #fdcb6e;
  --radius: 12px; --radius-sm: 8px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; }
button { cursor:pointer; font-family:inherit; }
input,textarea { font-family:inherit; }
/* Header */
.header { background:linear-gradient(135deg,var(--card),var(--primary-dim));
  border-bottom:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; gap:12px; }
.header h1 { font-size:18px; font-weight:700; }
.header .badge { background:var(--primary); padding:2px 10px; border-radius:20px; font-size:11px; color:#fff; }
.header .back-btn { background:none; border:none; color:var(--text-dim); font-size:20px; padding:4px 8px; }
.header .back-btn:hover { color:var(--text); }
.header .status { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-dim); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; }
.status-dot.error { background:var(--danger); }
/* Project List */
.projects-view { max-width:900px; margin:0 auto; padding:30px 20px; }
.projects-view h2 { font-size:22px; margin-bottom:8px; }
.projects-view .sub { color:var(--text-dim); font-size:14px; margin-bottom:24px; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.project-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; cursor:pointer; transition:all .2s; position:relative; }
.project-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 20px rgba(108,92,231,.15); }
.project-card .name { font-size:16px; font-weight:600; margin-bottom:4px; }
.project-card .date { font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.project-card .req { font-size:13px; color:var(--text-dim); line-height:1.5; overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.project-card .stats { display:flex; gap:16px; margin-top:10px; font-size:12px; }
.project-card .stats span { color:var(--text-dim); display:flex; align-items:center; gap:4px; }
.project-card .delete-btn { position:absolute; top:12px; right:12px; background:none; border:none;
  color:var(--text-dim); font-size:16px; padding:4px 6px; opacity:0; }
.project-card:hover .delete-btn { opacity:.6; }
.project-card .delete-btn:hover { opacity:1; color:var(--danger); }
.add-card { background:transparent; border:2px dashed var(--border); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:160px; cursor:pointer; transition:all .2s; color:var(--text-dim); }
.add-card:hover { border-color:var(--primary); color:var(--primary); }
.add-card .icon { font-size:36px; margin-bottom:8px; }
/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal-box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  width:480px; max-width:90vw; max-height:80vh; overflow-y:auto; padding:24px; }
.modal-box h3 { font-size:18px; margin-bottom:16px; }
.modal-box label { display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.modal-box input,.modal-box textarea { width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px; color:var(--text); font-size:14px; outline:none; margin-bottom:16px; }
.modal-box input:focus,.modal-box textarea:focus { border-color:var(--primary); }
.modal-box textarea { min-height:80px; resize:vertical; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.modal-actions button { padding:8px 20px; border-radius:var(--radius-sm); font-size:14px; border:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-cancel { background:transparent; color:var(--text-dim); border:1px solid var(--border) !important; }
/* Workspace Layout (2-column: chat | canvas+info) */
.workspace { display:grid; grid-template-columns:360px 1fr; gap:0; height:calc(100vh - 55px); overflow:hidden; }
@media (max-width:900px) {
  .workspace { display:block; height:calc(100vh - 50px - 48px); overflow:hidden; }
  .workspace .panel-chat { height:100%; display:flex; flex-direction:column; overflow:hidden; }
  .workspace .panel-canvas { display:none; }
  .workspace .panel-chat .mode-selector { display:none !important; }
  .workspace.mobile-tab-flow .panel-chat { display:none; }
  .workspace.mobile-tab-flow .panel-canvas { display:block; }
  .workspace.mobile-tab-detail .panel-chat { display:none; }
  .workspace.mobile-tab-detail .panel-canvas { display:block; }
  .workspace.mobile-tab-req .panel-chat { display:none; }
  .workspace.mobile-tab-req .panel-canvas { display:block; }
  /* 三个独立容器：需求/草图用原生滚动，流程图全自定义交互 */
  .workspace.mobile-tab-req #reqContainer { -webkit-overflow-scrolling: touch; overflow-y: auto; }
  .workspace.mobile-tab-detail #detailContainer,
  .workspace.mobile-tab-flow #flowContainer { overflow:hidden; }
}
@media (max-width:900px) {
  html, body { height:100%; overflow:hidden; }
  body { display:flex; flex-direction:column; }
  .header { flex-shrink:0; }
  
  .mobile-nav .tab { flex:1; text-align:center; padding:8px 4px; font-size:10px; color:var(--text-dim); cursor:pointer; border:none; background:transparent; border-top:2px solid transparent; transition:all .15s; }
  .mobile-nav .tab.active { color:var(--accent); border-top-color:var(--accent); background:rgba(0,206,201,.05); }
  .mobile-nav .tab .tab-icon { display:block; font-size:16px; margin-bottom:2px; }
}
.panel-title { padding:8px 12px; font-size:11px; font-weight:600; color:var(--text-dim);
  border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; flex-shrink:0; }
/* Canvas Panel */
.panel-canvas { flex:1; border-right:none; }
/* Info Sidebar */
.info-sidebar { width:220px; border-left:1px solid var(--border); background:var(--bg); display:none; flex-direction:column; overflow:hidden; flex-shrink:0; }
.info-sidebar.show { display:flex; }
.info-header { padding:6px 10px; font-size:10px; font-weight:600; color:var(--text-dim); border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.info-content [data-sec] { padding:3px 4px; border-radius:3px; transition:background .15s; }
.info-content [data-sec]:hover { background:rgba(108,92,231,.12); }
.info-content [data-var] { padding:2px 4px; border-radius:3px; transition:background .15s; }
.info-content [data-var]:hover { background:rgba(0,206,201,.1); }
.info-content .sec { padding:4px 6px; margin-bottom:4px; border-left:2px solid var(--accent); background:rgba(0,206,201,.04); border-radius:0 4px 4px 0; }
.info-content .sec strong { color:var(--text); }
.info-content { flex:1; overflow-y:auto; padding:8px 10px; font-family:monospace; font-size:10px; line-height:1.5; white-space:pre-wrap; color:var(--text); user-select:text; display:block; }
.info-content .ann { padding:4px 6px; margin-bottom:4px; border-left:2px solid var(--primary-dim); background:rgba(108,92,231,.05); border-radius:0 4px 4px 0; font-size:10px; }
.info-content .sec { padding:4px 6px; margin-bottom:4px; border-left:2px solid var(--accent); background:rgba(0,206,201,.04); border-radius:0 4px 4px 0; font-size:10px; }
/* Chat */
.panel-chat { min-width:0; }
.chat-area { flex:1; padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.msg { max-width:95%; padding:6px 10px; border-radius:8px; font-size:12px; line-height:1.5; }
.msg.user { background:var(--primary); align-self:flex-end; border-bottom-right-radius:3px; }
.msg.agent { background:#252542; align-self:flex-start; border-bottom-left-radius:3px; white-space:pre-wrap; font-size:11px; font-family:monospace; }
.msg.placeholder { color:var(--text-dim); font-style:italic; align-self:center; font-size:12px; }
.input-bar { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--border); flex-shrink:0; align-items:flex-end; }
/* mode-tag removed — 仅保留讨论模式 */
.input-bar textarea { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; color:var(--text); font-size:12px; outline:none; resize:none; min-height:54px; max-height:180px; line-height:1.5; overflow-y:auto; font-family:inherit; }
.input-bar textarea:focus { border-color:var(--primary); }
.input-bar textarea::placeholder { color:var(--text-dim); }
.input-bar button { background:var(--primary); border:none; border-radius:var(--radius-sm); padding:8px 14px; color:#fff; font-size:12px; }
.input-bar button:disabled { background:var(--border); cursor:not-allowed; }
.loading { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12px; padding:6px 0; }
.spinner { width:12px; height:12px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
/* Wireframe Panel */
.panel-wireframe { overflow:auto; background:var(--bg); flex:1; }
/* Toolbar */
.wf-toolbar { display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--card); flex-wrap:wrap; flex-shrink:0; align-items:center; }
.wf-toolbar .sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.wf-toolbar button { background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 10px; color:var(--text-dim); font-size:11px; white-space:nowrap; }
.wf-toolbar button:hover { border-color:var(--primary); color:var(--text); }
.wf-toolbar button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.wf-toolbar .mode-btn.active { background:var(--accent); border-color:var(--accent); color:#000; }
.wf-toolbar .dev-btn.active { background:var(--primary-dim); border-color:var(--primary); color:#fff; }
.wf-toolbar .state-btn.active { background:var(--primary-dim); border-color:var(--primary); }
/* Flow View */
.flow-wrap { position:relative; margin:0; overflow:visible; }
.flow-svg { position:absolute; top:0; left:0; pointer-events:none; z-index:10; overflow:visible; }
.flow-svg line { stroke:var(--primary-dim); stroke-width:2; }
.flow-svg .arrow { fill:var(--primary-dim); }
.flow-svg .arrow-label { fill:var(--accent); font-size:10px; text-anchor:middle; }
.flow-node { position:absolute; z-index:3; cursor:pointer; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; width:230px; box-shadow:0 2px 12px rgba(0,0,0,.3); transition:all .2s; }
.flow-node:hover { border-color:var(--primary); box-shadow:0 4px 20px rgba(108,92,231,.2); }
.flow-node-header { background:linear-gradient(135deg,var(--primary-dim),#2a1f5e); padding:5px 10px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px; }
.flow-node-header .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.flow-node-preview { padding:6px 10px; font-size:9px; color:var(--text-dim); line-height:1.5; min-height:40px; display:flex; flex-direction:column; gap:2px; }
.flow-node-preview .pv-sec { padding:2px 6px; background:rgba(255,255,255,.03); border-radius:3px; }
.flow-node-preview .pv-el { padding:1px 4px; font-size:9px; }
/* Detail View */
.detail-wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:flex-start; padding:16px; }
.device-frame { border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.4); display:flex; flex-direction:column; transition:all .3s; background:var(--bg); }
.dev-phone { width:375px; height:812px; border:2px solid var(--border); border-radius:24px; padding:6px; background:var(--border); }
.dev-phone-inner { border-radius:18px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; height:100%; }
.dev-web { width:1024px; height:768px; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; }
.dev-modal { width:460px; min-height:200px; border:1px solid var(--warn); border-radius:12px; background:var(--card); box-shadow:0 8px 32px rgba(0,0,0,.5); }
.dev-modal .modal-bar { background:var(--warn); color:#000; padding:6px 12px; font-size:11px; font-weight:600; border-radius:11px 11px 0 0; }
/* 版本管理页面 */
.versions-view { max-width:900px; margin:0 auto; padding:20px; }
.versions-view .v-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.versions-view .v-header h2 { font-size:20px; font-weight:700; }
.versions-view .v-header .v-badge { background:var(--primary-dim); padding:2px 10px; border-radius:20px; font-size:11px; color:var(--accent); }
.versions-view .v-header .v-actions { margin-left:auto; display:flex; gap:8px; }
.versions-view .v-header .v-actions button { padding:6px 14px; border-radius:var(--radius-sm); font-size:12px; border:none; cursor:pointer; }
.versions-view .v-header .v-actions .v-btn-primary { background:var(--primary); color:#fff; }
.versions-view .v-header .v-actions .v-btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.v-tree { position:relative; padding-left:24px; }
.v-tree::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border); }
.v-node { position:relative; margin-bottom:12px; }
.v-node::before { content:''; position:absolute; left:-18px; top:14px; width:12px; height:2px; background:var(--border); }
.v-node .v-dot { position:absolute; left:-23px; top:10px; width:12px; height:12px; border-radius:50%; background:var(--primary); border:2px solid var(--bg); z-index:2; }
.v-node .v-dot.latest { background:var(--accent); box-shadow:0 0 0 3px rgba(0,206,201,.3); }
.v-node .v-dot.major { background:var(--warn); }
.v-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:all .15s; }
.v-card:hover { border-color:var(--primary); }
.v-card .v-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.v-card .v-num { font-size:15px; font-weight:700; color:var(--accent); }
.v-card .v-num.major { color:var(--warn); }
.v-card .v-date { font-size:11px; color:var(--text-dim); }
.v-card .v-tag { font-size:9px; padding:1px 6px; border-radius:8px; background:rgba(0,206,201,.1); color:var(--accent); }
.v-card .v-desc { font-size:12px; color:var(--text-dim); line-height:1.5; }
.v-card .v-reason { font-size:11px; color:var(--text-dim); margin-top:4px; padding:4px 8px; background:rgba(108,92,231,.06); border-radius:4px; }
.v-card .v-actions { display:flex; gap:6px; margin-top:8px; }
.v-card .v-actions button { font-size:10px; padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; }
.v-card .v-actions button:hover { border-color:var(--primary); color:var(--text); }
.v-card .v-actions .v-act-primary { background:var(--primary); border-color:var(--primary); color:#fff; }

.dev-phone .frame-statusbar { height:28px; background:#1a1a2e; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:9px; color:var(--text-dim); font-weight:600; flex-shrink:0; }
.dev-phone .frame-notch { height:20px; background:#22223a; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--text-dim); font-weight:500; flex-shrink:0; border-top:1px solid rgba(255,255,255,.04); }
.dev-web .frame-notch { display:none; }
.frame-header { padding:8px 12px; background:#22223a; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; text-align:center; flex-shrink:0; }
.dev-web .frame-header { display:flex; align-items:center; gap:6px; font-size:12px; padding:6px 12px; justify-content:flex-start; }
.dev-web .frame-header .bd { display:flex; gap:4px; }
.dev-web .frame-header .bd span { width:8px; height:8px; border-radius:50%; }
.dev-web .frame-header .bd span:nth-child(1) { background:var(--danger); }
.dev-web .frame-header .bd span:nth-child(2) { background:var(--warn); }
.dev-web .frame-header .bd span:nth-child(3) { background:var(--success); }
.dev-web .frame-header .pt { color:var(--text-dim); font-size:11px; }
.frame-content { flex:1; display:flex; flex-direction:column; background:var(--bg); }
/* Section Styling */
.wf-section { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
.wf-section.type-navigation { background:linear-gradient(180deg,#1e1e32,#1a1a2e); padding:10px 12px; }
.wf-section.type-header { background:linear-gradient(180deg,#1e1e32,#1a1a2e); }
.wf-section.type-footer { background:#1a1a2e; border-bottom:none; margin-top:auto; }
.wf-section.type-form { background:rgba(108,92,231,.04); }
.wf-section.type-menu { background:#1e1e32; }
.wf-section.type-floating { background:transparent; border-bottom:none; padding:4px 12px; display:flex; justify-content:flex-end; }
.wf-section.type-sidebar { background:#1a1a2e; border-right:1px solid rgba(255,255,255,.06); border-bottom:none; }
.wf-section.type-panel { background:transparent; border-bottom:none; padding:2px 6px; }
.wf-sidebar-layout { display:flex; flex:1; flex-direction:row; }
.wf-sidebar-layout .wf-section.type-sidebar { width:110px; flex-shrink:0; }
/* Overlay Layer */
.wf-overlay-layer { position:absolute; inset:0; z-index:50; pointer-events:none; overflow:hidden; border-radius:inherit; }
.wf-overlay-layer .ov { position:absolute; pointer-events:auto; background:var(--card); border:1px solid var(--border); box-shadow:-2px 0 12px rgba(0,0,0,.4); transition:transform .3s; }
.wf-overlay-layer .ov.ov-drawer_left { left:0; top:0; bottom:0; width:140px; border-right:1px solid var(--border); transform:translateX(-100%); }
.wf-overlay-layer .ov.ov-drawer_left.open { transform:translateX(0); }
.wf-overlay-layer .ov.ov-drawer_right { right:0; top:0; bottom:0; width:140px; border-left:1px solid var(--border); transform:translateX(100%); }
.wf-overlay-layer .ov.ov-drawer_right.open { transform:translateX(0); }
.wf-overlay-layer .ov.ov-bottom_sheet { left:0; right:0; bottom:0; border-radius:12px 12px 0 0; border-bottom:none; transform:translateY(100%); }
.wf-overlay-layer .ov.ov-bottom_sheet.open { transform:translateY(0); }
.wf-overlay-layer .ov.ov-popup { left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); border-radius:12px; opacity:0; transition:all .3s; min-width:160px; }
.wf-overlay-layer .ov.ov-popup.open { transform:translate(-50%,-50%) scale(1); opacity:1; }
.wf-overlay-layer .ov .ov-title { padding:8px 10px; font-size:10px; font-weight:600; border-bottom:1px solid var(--border); background:#1e1e32; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.wf-overlay-layer .ov .ov-body { padding:6px 10px; display:flex; flex-direction:column; gap:4px; }
.overlay-tag { display:inline-flex; align-items:center; gap:4px; font-size:9px; padding:2px 6px; border-radius:4px; background:rgba(108,92,231,.15); color:var(--primary); margin-left:6px; cursor:pointer; }
.overlay-tag:hover { background:rgba(108,92,231,.3); }
.wf-sidebar-layout .wf-section.type-content { flex:1; }
.wf-sidebar-layout .wf-section.type-panel { flex:1; }
.wf-section.type-content { background:transparent; }
.wf-section.type-container { padding:4px 8px; }
.wf-section .sl { font-size:7px; color:var(--primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; font-weight:700; opacity:.6; }
.wf-section .sb { display:flex; flex-direction:column; gap:6px; }
.wf-section.type-navigation .sb, .wf-section.type-navbar .sb, .wf-section.type-header .sb, .wf-section.type-menu .sb { flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; }
.wf-empty { padding:12px 0; text-align:center; color:var(--text-dim); font-size:10px; font-style:italic; }
/* Element Styling */
.wf-el { border-radius:4px; font-size:10px; }
.wf-el.text { color:var(--text); padding:1px 0; line-height:1.4; }
.wf-el.text.h1 { font-size:15px; font-weight:700; padding:3px 0; }
.wf-el.text.h2 { font-size:13px; font-weight:600; padding:2px 0; }
.wf-el.text.h3 { font-size:11px; font-weight:600; padding:1px 0; }
.wf-el.button { background:var(--primary); color:#fff; padding:5px 12px; text-align:center; border-radius:6px; font-size:10px; display:inline-block; font-weight:500; }
.wf-el.button.s { background:transparent; border:1px solid var(--primary); color:var(--primary); }
.wf-el.search_bar { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:5px 8px; color:var(--text-dim); font-size:10px; display:flex; align-items:center; gap:4px; }
.wf-el.input { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:5px 8px; color:var(--text-dim); font-size:10px; display:flex; align-items:center; gap:4px; }
.wf-el.grid { display:grid; gap:8px; padding:2px 0; }
.wf-el.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; min-height:50px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:11px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.wf-el.menu_item { padding:7px 8px; color:var(--text); border-bottom:1px solid var(--border); font-size:12px; display:flex; align-items:center; gap:6px; }
.wf-el.menu_item:last-child { border-bottom:none; }
.wf-el.image { background:linear-gradient(135deg,#252542,#1a1a2e); border-radius:8px; height:60px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:10px; }
.wf-el.link { color:var(--accent); padding:4px 0; font-size:12px; cursor:pointer; }
.wf-el.list-item { padding:3px 0; font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
.wf-el.menu-bar-row { display:flex; flex-direction:row; align-items:center; gap:6px; flex-wrap:wrap; }
.wf-el.menu-bar-row .wf-el.menu_item { padding:2px 8px; border:none; color:var(--text-dim); font-size:11px; cursor:pointer; border-radius:4px; }
.wf-el.menu-bar-row .wf-el.menu_item:hover { background:rgba(255,255,255,.05); color:var(--text); }
.wf-el.skeleton { padding:4px 0; display:flex; flex-direction:column; gap:6px; }
.wf-el.skeleton .sk-line { height:10px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04)); border-radius:4px; background-size:200% 100%; animation:skShimmer 1.5s infinite; }
.wf-el.skeleton .sk-short { width:60%; }
@keyframes skShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.project-card,.flow-node,.device-frame { animation:fadeIn .3s ease; }
.frame-content { flex:1; display:flex; flex-direction:column; }
.frame-footer { padding:6px 12px; background:#22223a; border-top:1px solid var(--border); display:flex; justify-content:space-around; flex-shrink:0; }
.dev-web .frame-footer { display:none; }
.state-overlay { position:absolute; top:0; left:0; right:0; padding:3px 8px; font-size:9px; text-align:center; z-index:10; border-radius:inherit; }
/* State Panel */
.panel-state { border-right:none; min-width:0; }
/* (state panel styles removed - merged into info-sidebar) */
.state-content .empty { color:var(--text-dim); font-style:italic; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.project-card,.flow-node,.device-frame { animation:fadeIn .3s ease; }
/* Selective text selection: 只在需要复制的区域开启，滚动容器不开启 */
.chat-area .msg.agent { 
  user-select: text; 
  -webkit-user-select: text;
}
.flow-svg { pointer-events: none !important; }
/* ─── Bottom Tab Navigation ─── */
.tab-bar {
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px 5px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-top: 2px solid transparent;
  font-family: inherit;
}
.tab-btn .icon { font-size: 16px; line-height: 1.2; }
.tab-btn.active {
  color: var(--primary);
  border-top-color: var(--primary);
  background: rgba(108,92,231,0.1);
}
.tab-panel { display: none; flex-direction: column; overflow: hidden; min-height: 0; }
.tab-panel.active { display: flex; flex: 1; overflow: hidden; }

/* Data Cards (用于需求/交互/草稿 tab) */
.data-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.data-card .dc-title {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.data-card .dc-meta {
  font-size: 11px; color: var(--text-dim);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.data-card .dc-body {
  font-size: 12px; color: var(--text-dim);
  margin-top: 6px; line-height: 1.5;
}
.data-card .dc-tag {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(108,92,231,0.15);
  color: var(--primary);
  display: inline-block;
}
.data-card .dc-accept {
  font-size: 11px; color: var(--text-dim);
  padding-left: 12px; margin-top: 4px;
  border-left: 2px solid var(--accent);
}
.data-card .dc-section {
  font-size: 11px; color: var(--accent);
  margin-top: 4px;
  font-family: monospace;
}
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-dim); font-size: 13px;
}
.empty-state .icon { font-size: 36px; margin-bottom: 8px; }
.sec-header {
  font-size: 14px; font-weight: 700;
  color: var(--accent);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}

/* ════════════════════════════════════
   流程图 Flowchart
   ════════════════════════════════════ */
.fc-toolbar { display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--card); flex-wrap:wrap; flex-shrink:0; align-items:center; }
.fc-toolbar button { background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px 10px; color:var(--text-dim); font-size:11px; white-space:nowrap; cursor:pointer; font-family:inherit; }
.fc-toolbar button:hover { border-color:var(--primary); color:var(--text); }
.fc-canvas { flex:1; overflow:hidden; background:var(--bg); position:relative; min-height:0; cursor:grab; }
.fc-canvas:active { cursor:grabbing; }
.fc-zoom-group { display:flex; gap:2px; align-items:center; }
.fc-zoom-group button { min-width:28px; text-align:center; font-weight:700; font-size:13px; padding:2px 6px; }
.fc-zoom-group #fcZoomLabel { min-width:48px; font-size:10px; font-weight:400; }
.fc-mode-group { display:flex; gap:2px; margin-left:6px; padding-left:6px; border-left:1px solid var(--border); align-items:center; }
.fc-mode-btn { font-size:14px !important; padding:2px 6px !important; line-height:1; }
.fc-mode-btn.active { background:var(--primary) !important; border-color:var(--primary) !important; }

/* ═══ 草图可视化样式 ═══ */
.draft-toolbar { display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--card); flex-shrink:0; align-items:center; }

/* ═══ 草图布局 ═══ */
.draft-layout { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.draft-menu { display:flex; overflow-x:auto; overflow-y:hidden; flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--border); gap:0; }
.draft-menu::-webkit-scrollbar { height:2px; }
.draft-menu::-webkit-scrollbar-thumb { background:var(--border); border-radius:1px; }
.draft-menu-item { flex:1; text-align:center; padding:6px 4px; font-size:10px; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all .15s; color:var(--text-dim); min-width:0; }
.draft-menu-item:hover { color:var(--text); background:var(--surface-2); }
.draft-menu-item.active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(0,206,201,.05); }
.draft-preview { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; align-items:center; }
.draft-zoom-bar { display:flex; gap:4px; margin-bottom:4px; align-items:center; }
.draft-zoom-bar button { background:transparent; border:1px solid var(--border); border-radius:4px; padding:2px 8px; color:var(--text-dim); font-size:11px; cursor:pointer; }
.draft-zoom-bar button:hover { border-color:var(--primary); color:var(--text); }
.draft-empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-dim); font-size:13px; }
.draft-main { display:flex; flex:1; overflow:hidden; }
.draft-info-panel { width:220px; display:flex; flex-direction:column; border-left:1px solid var(--border); background:var(--card); flex-shrink:0; overflow:hidden; }
.draft-info-header { padding:6px 10px; font-size:10px; font-weight:600; color:var(--accent); border-bottom:1px solid var(--border); flex-shrink:0; }
.draft-info-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; }
.draft-info-overlay.open { display:block; }
.draft-info-drawer { position:fixed; top:0; right:0; bottom:0; width:260px; background:var(--card); z-index:101; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.4); }
.draft-info-drawer.open { transform:translateX(0); }
.draft-info-drawer-hd { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:12px; font-weight:600; color:var(--accent); flex-shrink:0; }
@media (max-width:900px) { .draft-info-panel { display:none; } }

/* 设备预览框 - 按比例缩放 */
.draft-device-wrap { display:flex; flex-direction:column; align-items:center; width:100%; flex-shrink:0; }
.draft-device-header { text-align:center; font-size:10px; color:var(--text-dim); padding:4px 0; }
.draft-device-frame { background:var(--card); border:2px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.draft-device-frame .draft-page-hd { padding:6px 10px; font-size:11px; font-weight:600; background:linear-gradient(135deg,var(--primary-dim),#2a1f5e); display:flex; align-items:center; gap:4px; }
.draft-device-frame .draft-page-hd.modal { background:linear-gradient(135deg,var(--warn),#8a6d00); color:#000; }
.draft-device-frame .draft-page-bd { padding:6px 8px; }
.draft-sec { margin-bottom:4px; }
.draft-sec-hd { font-size:8px; padding:1px 6px; color:var(--text-dim); background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); }
.draft-sec-bd { padding:3px 4px; display:flex; flex-wrap:wrap; gap:3px; }

/* 尺寸设置抽屉 */
.draft-settings-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; }
.draft-settings-overlay.open { display:block; }
.draft-settings { position:fixed; top:0; right:0; bottom:0; width:260px; background:var(--card); z-index:101; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.4); }
.draft-settings.open { transform:translateX(0); }
.draft-settings-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--accent); flex-shrink:0; }
.draft-settings-body { flex:1; overflow-y:auto; padding:8px 12px; }
.draft-size-card { padding:8px 10px; margin-bottom:6px; border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .15s; }
.draft-size-card:hover { border-color:var(--primary); }
.draft-size-card.active { border-color:var(--accent); background:rgba(0,206,201,.05); }
.draft-size-card .sz-name { font-size:11px; font-weight:600; }
.draft-size-card .sz-desc { font-size:9px; color:var(--text-dim); margin-top:2px; }

@media (max-width:900px) {
  .draft-menu-item { font-size:9px; padding:4px 2px; }
  .draft-device-mobile { max-width:100%; }
  .draft-preview { padding:8px; }
}
/* 手机预览框 */
.draft-phone { max-width:320px; margin:0 auto; border:2px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.draft-phone .draft-frame { border:none; border-radius:0; margin:0; }
.draft-phone .draft-frame-header { border-radius:0; padding:10px 12px; font-size:12px; }
.draft-phone .draft-frame-body { padding:10px; }
.draft-phone .draft-el.el-button { font-size:11px; padding:6px 14px; }
.draft-phone .draft-el { font-size:11px; padding:4px 8px; }
.flow-wrap { position:relative; margin:0; overflow:visible; will-change:transform; }
.flow-svg { position:absolute; top:0; left:0; pointer-events:none; z-index:10; overflow:visible; }
.flow-node { position:absolute; z-index:3; cursor:pointer; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; width:210px; box-shadow:0 2px 12px rgba(0,0,0,.3); transition:all .2s; }
.flow-node:hover { border-color:var(--primary); box-shadow:0 4px 20px rgba(108,92,231,.2); }
.flow-node-header { background:linear-gradient(135deg,var(--primary-dim),#2a1f5e); padding:4px 8px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:grab; user-select:none; }
.flow-node-header:active { cursor:grabbing; }
.flow-node-header .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.flow-node-header .fn-badge { margin-left:auto; background:var(--primary); padding:1px 6px; border-radius:8px; font-size:9px; color:#fff; }
.flow-node-preview { padding:4px 8px; font-size:9px; color:var(--text-dim); line-height:1.4; min-height:30px; display:flex; flex-direction:column; gap:2px; }
.flow-node-preview .pv-sec { padding:2px 6px; background:rgba(255,255,255,.03); border-radius:3px; }
.flow-node-preview .pv-el { padding:1px 4px; font-size:9px; }

/* Modal node styling */
.flow-modal { border-color:var(--warn) !important; min-height:50px !important; }
.flow-modal:hover { border-color:var(--warn) !important; box-shadow:0 4px 20px rgba(253,203,110,.2) !important; }
.flow-modal .fn-title { font-size:10px; }
.flow-modal .fn-badge { font-size:8px; padding:0 5px; }

/* State sub-tabs (in flowchart panel) */
.fc-state-tabs { display:flex; border-top:1px solid var(--border); flex-shrink:0; background:var(--card); }
.fc-state-tab { flex:1; padding:6px 4px; text-align:center; font-size:10px; color:var(--text-dim); cursor:pointer; border-top:2px solid transparent; transition:all .2s; }
.fc-state-tab.active { color:var(--accent); border-top-color:var(--accent); background:rgba(0,206,201,0.05); }
.fc-state-content, .fc-tp-content { padding:8px 10px; overflow-y:auto; font-family:monospace; font-size:10px; line-height:1.4; white-space:pre-wrap; background:var(--surface); }

/* ═══ Tab 面板切换 ═══ */
/* 交互面板容器 - 仅 active 时显示 */
#panelFlowchart.active { flex-direction:column; flex:1; min-height:0; }

/* ═══ 交互面板：桌面双栏（左边画布 + 右侧跳转面板）═══ */
.fc-layout { display:flex; flex:1; overflow:hidden; }
.fc-canvas-wrap { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.fc-transitions-panel { width:260px; display:flex; flex-direction:column; border-left:1px solid var(--border); background:var(--card); flex-shrink:0; overflow:hidden; }
.fc-tp-header { padding:8px 12px; font-size:11px; font-weight:600; color:var(--accent); border-bottom:1px solid var(--border); flex-shrink:0; }
.fc-tp-content { flex:1; overflow-y:auto; }

/* ═══ 手机端跳转抽屉 ═══ */
.fc-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; }
.fc-drawer-overlay.open { display:block; }
.fc-drawer { position:fixed; top:0; right:0; bottom:0; width:75%; max-width:320px; background:var(--card); z-index:101; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.4); }
.fc-drawer.open { transform:translateX(0); }
.fc-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--accent); flex-shrink:0; }
.fc-drawer-close { background:none; border:none; color:var(--text-dim); font-size:16px; cursor:pointer; padding:4px 8px; border-radius:4px; }
.fc-drawer-close:hover { background:var(--surface); color:var(--text); }
.fc-drawer-content { flex:1; overflow-y:auto; padding:8px 12px; font-family:monospace; font-size:11px; line-height:1.5; white-space:pre-wrap; }

/* 跳转面板切换按钮 */
.fc-toggle-active { background:var(--accent) !important; border-color:var(--accent) !important; color:#000 !important; }

/* 手机端：隐藏右侧面板，抽屉触发 */
@media (max-width:900px) {
  .fc-transitions-panel { display:none; }
  .fc-transitions-panel.fc-tp-mobile-show { display:flex; width:100%; border-left:none; }
  #fcToggleTransitions.fc-toggle-active { background:var(--accent) !important; border-color:var(--accent) !important; color:#000 !important; }
}

/* FC state sub-tabs — 已废弃，保留样式兼容 */
.fc-state-tabs { display:flex; border-top:1px solid var(--border); flex-shrink:0; background:var(--card); }
.fc-state-tab { flex:1; padding:6px 4px; text-align:center; font-size:10px; color:var(--text-dim); cursor:pointer; border-top:2px solid transparent; transition:all .2s; }
.fc-state-tab.active { color:var(--accent); border-top-color:var(--accent); background:rgba(0,206,201,0.05); }
.fc-toggle-drawer-phone { background:var(--accent) !important; border-color:var(--accent) !important; color:#000 !important; font-size:10px !important; margin-left:4px; }
.draft-partition-btn { background:var(--accent); border:none; border-radius:6px; padding:3px 10px; color:#000; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }

/* ═══ 分区树状列表 ═══ */

/* ═══ 分区树（div 版）═══ */

/* ═══ 树状视图 ═══ */
.tr-hd { font-weight:600; font-size:12px; padding:4px 0; }
.draft-info-content { flex:1; overflow-y:auto; padding:4px 6px; font-size:11px; line-height:1.6; }
.draft-info-drawer-bd { flex:1; overflow-y:auto; padding:4px 8px; font-size:12px; line-height:1.8; }

/* ═══ 分区树优化 ═══ */
.pt-section { margin:4px 0; }
.pt-hd { font-size:10px; font-weight:600; color:var(--text); padding:3px 6px; border-radius:4px; background:rgba(255,255,255,.03); }
.pt-hd .pt-labels { font-weight:400; color:var(--text-dim); font-size:9px; }
.pt-states { padding:2px 0 2px 12px; display:flex; flex-wrap:wrap; gap:4px; }
.pt-state { display:inline-block; padding:2px 10px; border-radius:8px; font-size:10px; cursor:pointer; background:var(--surface-2); color:var(--text-dim); border:1px solid transparent; transition:all .15s; }
.pt-state:hover { border-color:var(--accent); color:var(--text); }
.pt-state.active { background:var(--accent); color:#000; font-weight:600; border-color:var(--accent); }
.pt-children { padding-left:12px; border-left:1px solid rgba(255,255,255,.06); margin:2px 0; }