/* =====================================================================
 * editor.css — 编辑模式布局：工具栏 / 缩略图 / 画布 / 属性面板
 * ===================================================================== */

.app-editor { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---------- 顶部工具栏 ---------- */
.toolbar {
  height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 12px;
  background: var(--ui-bar);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 6px; }
.brand .logo { color: var(--ui-primary); font-size: 20px; font-weight: 800; }
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.brand .sub { font-size: 12px; color: var(--ui-muted); }
.tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tools .sep { width: 1px; height: 22px; background: var(--ui-border); margin: 0 4px; }
.theme-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-muted); }
.theme-select select { width: auto; height: 30px; padding: 0 8px; }

/* ---------- 编辑区三栏 ---------- */
.editor-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 178px 1fr 304px;
}

/* ---------- 左：缩略图 ---------- */
.thumb-bar { border-right: 1px solid var(--ui-border); background: var(--ui-panel); overflow: hidden; display: flex; flex-direction: column; }
.thumb-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.thumb-item { position: relative; cursor: pointer; }
.thumb-num {
  position: absolute; top: -6px; left: -6px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ui-text); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.thumb-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff;
  box-shadow: var(--shadow-sm); transition: outline-color .12s, transform .1s;
  outline: 2px solid transparent; outline-offset: 1px;
}
.thumb-item:hover .thumb-preview { transform: translateY(-1px); }
.thumb-item.active .thumb-preview { outline-color: var(--ui-primary); }
.thumb-del {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 18px; height: 18px; border-radius: 4px; border: none;
  background: rgba(15,23,42,.6); color: #fff; font-size: 11px;
  opacity: 0; transition: opacity .12s; line-height: 1;
}
.thumb-item:hover .thumb-del { opacity: 1; }
.thumb-del:hover { background: var(--ui-danger); }
.thumb-add {
  border: 1.5px dashed var(--ui-border); border-radius: var(--radius-sm);
  height: 40px; background: transparent; color: var(--ui-muted);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.thumb-add:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
/* 缩略图内的迷你元素，统一缩小字号 */
.thumb-preview .el { pointer-events: none; }

/* ---------- 中：画布 ---------- */
.canvas-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; min-width: 0; overflow: hidden; position: relative;
}
.canvas-frame {
  position: relative;
  width: min(100%, calc((100vh - 54px - 56px) * 16 / 9));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
  background: #fff;
}
.canvas {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  transform-origin: top left;
}
.canvas-status { margin-top: 10px; font-size: 12px; color: var(--ui-muted); }

/* ---------- 画布元素 ---------- */
.el { position: absolute; overflow: hidden; }
.el[data-type="title"], .el[data-type="text"], .el[data-type="list"],
.el[data-type="stat"], .el[data-type="quote"] {
  display: flex;
  align-items: flex-start;
}
.el[data-type="stat"] { align-items: center; justify-content: center; }
.el[data-type="quote"] { align-items: center; justify-content: center; }
.el[data-type="title"], .el[data-type="quote"] { font-weight: 700; }
.el[data-type="quote"] { font-style: italic; }
.el-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.el-list { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .3em; justify-content: center; }
.el-list .li { position: relative; padding-left: 1.1em; }
.el-list .li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .35em; height: .35em; border-radius: 50%; background: currentColor;
}
.el-stat { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.el-stat .num { font-weight: 800; line-height: 1; }
.el-stat .label { margin-top: .35em; text-align: center; }
.el-shape { width: 100%; height: 100%; }
.el-image { width: 100%; height: 100%; object-fit: cover; }
.el-chart { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .5em; }
.el-chart .bar-row { display: flex; align-items: center; gap: .6em; font-size: 14px; }
.el-chart .bar-label { width: 26%; flex-shrink: 0; }
.el-chart .bar-track { flex: 1; height: .7em; background: rgba(100,116,139,.18); border-radius: 99px; overflow: hidden; }
.el-chart .bar-fill { height: 100%; border-radius: 99px; }
.el-chart .bar-val { width: 3em; text-align: right; flex-shrink: 0; }

/* ===== 图表 SVG 通用 ===== */
.el-chart svg { width: 100%; height: 100%; }
.el-chart .chart-text { fill: currentColor; font-family: inherit; }
.el-chart.chart-pie { position: relative; display: flex; align-items: center; }
.el-chart .pie-legend {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .3em; font-size: 13px;
}
.el-chart .pie-legend-item { display: flex; align-items: center; gap: .4em; }
.el-chart .pie-legend-dot { width: .8em; height: .8em; border-radius: 2px; flex-shrink: 0; }

/* ===== 表格 ===== */
.el-table {
  width: 100%; height: 100%; border-collapse: collapse;
  font-size: inherit; table-layout: fixed;
}
.el-table th, .el-table td {
  padding: .55em .7em; text-align: left;
  border-bottom: 1px solid rgba(100,116,139,.25);
  overflow: hidden; word-break: break-word;
}
.el-table th {
  font-weight: 700; color: var(--ui-primary, #4f46e5);
  border-bottom: 2px solid rgba(100,116,139,.35);
  background: rgba(100,116,139,.06);
  white-space: nowrap;
}
.el-table tbody tr:nth-child(even) { background: rgba(100,116,139,.04); }

/* ===== 代码 ===== */
.el-code {
  width: 100%; height: 100%; margin: 0;
  padding: 1em 1.2em; box-sizing: border-box;
  background: rgba(15,23,42,.04);
  border-radius: 8px; border: 1px solid rgba(100,116,139,.2);
  overflow: auto; font-family: 'Consolas','Monaco','Courier New',monospace;
  font-size: inherit; line-height: 1.6; color: inherit;
  white-space: pre; position: relative;
}
.el-code code { font-family: inherit; }
.el-code .code-lang {
  position: absolute; top: .4em; right: .8em;
  opacity: .45; font-size: 11px; font-family: inherit;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ===== 公式 ===== */
.el-formula {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cambria Math','STIX','Latin Modern Math',serif;
  font-size: inherit; line-height: 1.5;
}
.el-formula sup, .el-formula sub { font-size: .65em; }
.el-formula .frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .2em;
}
.el-formula .frac .num { border-bottom: 1.5px solid currentColor; padding: 0 .3em; }
.el-formula .frac .den { padding: 0 .3em; }
.el-formula .sqrt { position: relative; padding-left: .3em; display: inline-flex; align-items: flex-end; }
.el-formula .sqrt .rad { font-size: .6em; vertical-align: super; margin-right: .1em; }
.el-formula .sqrt .overline { border-top: 1.5px solid currentColor; padding: 0 .2em; }

/* 选中态与手柄 */
.el.selected { outline: 2px solid var(--ui-primary); outline-offset: 0; }
.el.dragging { opacity: .85; }
.handle {
  position: absolute; width: 10px; height: 10px;
  background: #fff; border: 1.5px solid var(--ui-primary);
  border-radius: 2px; z-index: 50;
}
.handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.handle.tm { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.handle.bm { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.handle.lm { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.handle.rm { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }

/* 元素文字可直接双击编辑 */
.el [contenteditable="true"] { outline: none; cursor: text; }
.el [contenteditable="true"]:focus { background: rgba(79,70,229,.06); border-radius: 2px; }

/* ---------- 右：侧栏 Tabs ---------- */
.side-panel { border-left: 1px solid var(--ui-border); background: var(--ui-panel); display: flex; flex-direction: column; min-height: 0; }
.panel-tabs { display: flex; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
.panel-tab {
  flex: 1; padding: 11px; border: none; background: transparent;
  font-size: 13px; color: var(--ui-muted); border-bottom: 2px solid transparent;
}
.panel-tab:hover { color: var(--ui-text); background: var(--ui-hover); }
.panel-tab.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); font-weight: 600; }
.panel-pane { flex: 1; overflow-y: auto; padding: 16px; }
.panel-pane.active { display: block; }
/* AI 面板需要纵向擞布局，且不滚动整块（输入框常驻底部） */
.ai-pane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ai-pane .chat-messages { flex: 1; overflow-y: auto; padding: 0 16px; }

/* ---------- 属性面板 ---------- */
.prop-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
.prop-section:last-child { border-bottom: none; margin-bottom: 0; }
.prop-title { font-size: 12px; color: var(--ui-muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.prop-hint { font-size: 12.5px; color: var(--ui-muted); text-align: center; line-height: 1.8; margin-bottom: 16px; }
.prop-row { margin-bottom: 14px; }
.prop-row > label { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 6px; font-weight: 500; }
.color-row { display: flex; gap: 6px; }
.color-row select { flex: 1; }
.color-row input[type="color"] { width: 38px; height: 32px; padding: 2px; flex-shrink: 0; }

.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-grid button {
  height: 48px; border: 1px solid var(--ui-border); background: #fff;
  border-radius: var(--radius-sm); font-size: 12px; color: var(--ui-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.add-grid button:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
.add-grid button .ic { font-size: 18px; }

.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bg-grid button { height: 36px; border: 1px solid var(--ui-border); background: #fff; border-radius: var(--radius-sm); font-size: 12px; }
.bg-grid button.active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-soft); }

/* 分段按钮组 */
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; height: 32px; border: 1px solid var(--ui-border); background: #fff;
  border-radius: var(--radius-sm); color: var(--ui-text); font-size: 13px;
}
.seg button:hover { background: var(--ui-hover); }
.seg button.active { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
.seg button.danger { color: var(--ui-danger); }
.seg button.danger:hover { background: #fff1f2; }

/* ---------- 卡片元素 ---------- */
.el[data-type="card"] {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12), 0 3px 8px rgba(15, 23, 42, .06);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.el-card-bar { height: 6px; width: 100%; flex-shrink: 0; }
.el-card { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; box-sizing: border-box; }
.card-icon { font-size: 1.6em; line-height: 1; margin-bottom: .1em; }
.card-title {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.15;
  color: var(--ui-text, #1e293b);
  display: flex; align-items: center; gap: .4em;
}
.card-body {
  font-size: 1em;
  line-height: 1.5;
  color: var(--ui-muted, #64748b);
  white-space: pre-wrap;
  flex: 1;
}
/* 兼容旧 class 名 */
.el-card-title { font-weight: 700; font-size: 1.5em; line-height: 1.15; display: flex; align-items: center; gap: .45em; }
.el-card-text { font-size: 1em; line-height: 1.5; opacity: .88; white-space: pre-wrap; }
.el-card-body { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; }

/* 渐变形状由 renderElement 内联 backgroundImage；此处仅兜底圆角 */
.el-shape.gradient { border-radius: var(--shape-radius, 0); }

/* 装饰圆/光晕（shape 配合） */
.el[data-deco="glow"] { filter: blur(2px); opacity: .9; }

/* ---------- 文库弹窗 ---------- */
.lib-modal { width: 580px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.lib-save-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.lib-save-bar input { flex: 1; }
.lib-list { flex: 1; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--radius-sm); background: #fff; min-height: 140px; }
.lib-list:empty::before {
  content: '文库为空 —— 在上方命名并存入你的第一份演示';
  display: block; padding: 32px; text-align: center; color: var(--ui-muted); font-size: 13px;
}
.lib-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
.lib-item:last-child { border-bottom: none; }
.lib-item.active { background: var(--ui-primary-soft); }
.lib-thumb { width: 72px; height: 41px; border: 1px solid var(--ui-border); border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; background: #fff; }
.lib-info { flex: 1; min-width: 0; }
.lib-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-meta { font-size: 12px; color: var(--ui-muted); margin-top: 2px; }
.lib-ops { display: flex; gap: 6px; flex-shrink: 0; }
.lib-ops .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.lib-ops .btn.del { background: transparent; color: var(--ui-danger); border-color: var(--ui-border); }
.lib-ops .btn.del:hover { background: #fff1f2; }
.modal-actions .muted { margin-right: auto; font-size: 12px; }

/* 空页占位引导 */
.canvas-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ui-muted); pointer-events: none; }
.canvas-placeholder .ph-icon { font-size: 48px; font-weight: 200; color: var(--ui-border); }
.canvas-placeholder .ph-sub { font-size: 14px; opacity: .8; }

/* 长内容溢出兆底 */
.el-text, .el-card-title, .el-card-text { overflow: hidden; }
.el-stat .num { overflow-wrap: anywhere; }
.el-chart .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 富文本提示 ---------- */
.rich-hint { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.rich-syntax {
  font-size: 11px; color: var(--ui-muted); line-height: 1.7;
  background: var(--ui-hover, #f1f5f9); padding: 5px 8px; border-radius: 4px;
  white-space: pre-wrap; word-break: break-all;
}
.rich-actions { display: flex; gap: 6px; }
.rich-btn {
  height: 22px; padding: 0 8px; font-size: 11px;
  border: 1px solid var(--ui-border, #e2e8f0); background: #fff;
  color: var(--ui-text, #1e293b); border-radius: 4px; cursor: pointer;
}
.rich-btn:hover { border-color: var(--ui-primary, #4f46e5); color: var(--ui-primary, #4f46e5); }
.rich-btn.danger { color: var(--ui-danger, #e11d48); border-color: transparent; }
.rich-btn.danger:hover { color: var(--ui-danger, #e11d48); background: #fff1f2; }

/* ---------- 富文本渲染样式 ---------- */
.el-text-rich strong, .el-list strong, .el-card strong { font-weight: 700; }
.el-text-rich em, .el-list em, .el-card em { font-style: italic; }
.el-text-rich del, .el-list del, .el-card del { text-decoration: line-through; opacity: .7; }
.el-text-rich u, .el-list u, .el-card u { text-decoration: underline; text-underline-offset: 2px; }
.el-text-rich mark, .el-list mark, .el-card mark { background: rgba(245,158,11,.25); padding: 0 .15em; border-radius: 2px; }
.el-text-rich code, .el-list code, .el-card code {
  font-family: 'Consolas','Monaco','Courier New',monospace;
  background: rgba(100,116,139,.12); padding: .1em .3em; border-radius: 3px;
  font-size: .85em;
}
.el-text-rich sup, .el-list sup, .el-card sup { font-size: .65em; vertical-align: super; }
.el-text-rich sub, .el-list sub, .el-card sub { font-size: .65em; vertical-align: sub; }
.el-text-rich a, .el-list a, .el-card a { text-decoration: underline; text-underline-offset: 2px; }

/* 触屏设备（无 hover）缩略图删除按钮常驻 */
@media (hover: none) { .thumb-del { opacity: 1 !important; } }