:root{
  --bg: #0a0e1a;
  --bg-2: #0d1424;
  --panel: #111a2e;
  --panel-2: #0e1626;
  --border: rgba(140,165,255,0.14);
  --border-soft: rgba(140,165,255,0.08);
  --text: #e6eaf5;
  --text-dim: #93a0bf;
  --text-mute: #5c6788;
  --blue: #4c8dff;
  --cyan: #34d9e8;
  --green: #34d399;
  --amber: #fbbf5a;
  --red: #f87171;
  --glow: 0 0 0 1px rgba(76,141,255,0.25), 0 8px 28px rgba(20,40,90,0.35);
  --radius: 12px;
  font-size: 15px;
}

*{box-sizing:border-box; margin:0; padding:0}

body{
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-grid{
  position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(76,141,255,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(52,217,232,0.10), transparent 60%),
    linear-gradient(var(--bg-2), var(--bg));
}
.bg-grid::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(140,165,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,165,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, black, transparent 75%);
}

/* ---- Top bar ---- */
.topbar{
  height: 64px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(10,14,26,0.7);
  backdrop-filter: blur(10px);
  position: sticky; top:0; z-index: 20;
}
.topbar-left{display:flex; align-items:center; gap:12px}
.logo-mark{
  width:36px; height:36px; border-radius:9px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#04101f;
  box-shadow: 0 0 22px rgba(76,141,255,0.45);
  flex:none;
}
.logo-title{font-size:15px; font-weight:600; letter-spacing:.02em}
.logo-sub{font-size:11px; color:var(--text-mute); letter-spacing:.05em}

.topbar-right{display:flex; align-items:center; gap:18px}
.status-pill{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--text-dim);
  padding:6px 12px; border:1px solid var(--border); border-radius:999px;
  background: rgba(76,141,255,0.06);
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background: var(--green); flex:none;
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.45; transform:scale(.8)}
}
.task-counter{
  display:flex; align-items:baseline; gap:8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(76,141,255,0.10), rgba(52,217,232,0.06));
}
.task-counter-label{font-size:12px; color:var(--text-dim)}
.task-counter-num{
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:18px; font-weight:700; color:var(--cyan);
  min-width: 2ch; text-align:right;
  transition: transform .25s ease;
}
.task-counter-num.bump{ animation: bump .4s ease; }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.28); color:#fff} 100%{transform:scale(1)} }

/* ---- Shell layout ---- */
.shell{ display:flex; min-height: calc(100vh - 64px) }

.sidenav{
  width: 220px; flex: none;
  border-right: 1px solid var(--border-soft);
  padding: 18px 12px;
  display:flex; flex-direction:column; gap:4px;
  background: rgba(255,255,255,0.012);
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding: 11px 13px; border-radius: 9px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 13.5px; font-weight:500;
  text-align:left; width:100%;
  transition: background .15s, color .15s;
}
.nav-item:hover{ background: rgba(140,165,255,0.06); color: var(--text) }
.nav-item.active{
  background: linear-gradient(90deg, rgba(76,141,255,0.16), rgba(76,141,255,0.02));
  color: #fff;
  box-shadow: inset 2px 0 0 var(--blue);
}
.nav-icon{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round }
.nav-item.active .nav-icon{ fill: rgba(76,141,255,0.25); stroke: var(--cyan) }

.nav-footer{
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:8px;
}
.nav-footer-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-mute) }
.nav-footer-row b{ color: var(--text-dim); font-weight:600; font-family: ui-monospace,monospace; font-size:11px }

.content{ flex:1; padding: 28px 32px 60px; min-width:0 }
.module{ display:none; animation: fadein .35s ease }
.module.active{ display:block }
@keyframes fadein{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.module-head{ margin-bottom: 22px }
.module-head h1{ font-size: 21px; font-weight:700; letter-spacing:.01em; margin-bottom:5px }
.module-head p{ font-size:12.5px; color: var(--text-mute) }
.module-head p b{ color: var(--cyan); font-family: ui-monospace,monospace }

/* ================= 模块一: 文件仓 ================= */
.search-wrap{
  position: relative; margin-bottom: 12px;
  max-width: 520px;
}
.search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke: var(--text-mute); stroke-width:2;
}
#fileSearch{
  width:100%; padding: 11px 14px 11px 40px;
  background: var(--panel); border:1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 13.5px; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
#fileSearch::placeholder{ color: var(--text-mute) }
#fileSearch:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76,141,255,0.15) }
.search-hint{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:11px; color: var(--text-mute);
}

.rag-banner{
  max-width:520px; margin-bottom:16px; padding:9px 13px;
  border-radius:9px; border:1px solid rgba(52,217,232,0.35);
  background: rgba(52,217,232,0.07);
  font-size:12px; color: var(--cyan);
  display:flex; align-items:center; gap:8px;
  animation: fadein .25s ease;
}
.rag-banner::before{
  content:"◆"; font-size:9px; animation: pulse 1.4s ease-in-out infinite;
}

.files-layout{
  display:grid; grid-template-columns: 190px 1fr 320px; gap: 16px;
  align-items:start;
}

.folder-pane{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px; display:flex; flex-direction:column; gap:2px;
}
.folder-item{
  display:flex; align-items:center; gap:9px;
  padding: 9px 10px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--text-dim);
  transition: background .15s, color .15s;
}
.folder-item:hover{ background: rgba(140,165,255,0.06) }
.folder-item.active{ background: rgba(76,141,255,0.14); color:#fff }
.folder-icon{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6 }
.folder-count{ margin-left:auto; font-size:11px; color:var(--text-mute); font-family:ui-monospace,monospace }
.folder-item.active .folder-count{ color: var(--cyan) }

.file-list-pane{
  display:flex; flex-direction:column; gap:8px;
  min-height: 320px;
}
.file-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius:10px;
  padding: 13px 15px; cursor:pointer;
  transition: border-color .15s, transform .15s, background .15s;
  display:flex; flex-direction:column; gap:5px;
}
.file-card:hover{ border-color: var(--border); transform: translateY(-1px) }
.file-card.selected{ border-color: var(--blue); background: rgba(76,141,255,0.08) }
.file-card-top{ display:flex; align-items:center; gap:9px }
.file-type-badge{
  font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:4px;
  color:#04101f; flex:none; letter-spacing:.02em;
}
.file-name{ font-size:13.5px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file-name mark{ background: rgba(52,217,232,0.28); color:#fff; border-radius:3px; padding:0 1px }
.file-meta{ font-size:11px; color: var(--text-mute); display:flex; gap:10px }
.file-score{ font-size:10.5px; color: var(--cyan); font-family:ui-monospace,monospace }
.file-empty{ color: var(--text-mute); font-size:13px; padding: 40px 0; text-align:center }

.preview-pane{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; min-height: 320px;
}
.preview-empty{ color: var(--text-mute); font-size:12.5px; text-align:center; margin-top:120px }
.preview-title{ font-size:14px; font-weight:600; margin-bottom:10px; word-break:break-word }
.preview-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-mute); padding:5px 0; border-bottom:1px dashed var(--border-soft) }
.preview-row b{ color: var(--text-dim); font-weight:500 }
.preview-summary-head{
  margin-top:14px; display:flex; align-items:center; gap:6px;
  font-size:11.5px; color: var(--cyan); font-weight:600;
}
.preview-summary{ font-size:12.5px; line-height:1.7; color: var(--text-dim); margin-top:8px }

/* ================= 模块二: 客户沟通助手 ================= */
.chat-layout{
  display:grid; grid-template-columns: 220px 1fr 300px; gap:16px;
  height: calc(100vh - 230px); min-height:460px;
}
.client-pane{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
}
#clientPane{ display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto }
.client-pane-head{
  display:flex; align-items:center; gap:6px; padding:4px 6px 10px;
  font-size:11px; color: var(--text-mute); border-bottom:1px solid var(--border-soft); margin-bottom:6px;
}
.wechat-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:5px; background:#07C160; flex:none;
}
.wechat-mark svg{ width:10px; height:10px; fill:#fff }
.client-card{
  display:flex; align-items:center; gap:10px;
  padding:11px; border-radius:10px; cursor:pointer; position:relative;
  transition: background .15s;
}
.client-card:hover{ background: rgba(140,165,255,0.06) }
.client-card.active{ background: rgba(76,141,255,0.14) }
.client-avatar{
  width:38px; height:38px; border-radius:9px; flex:none;   /* 微信头像是圆角方形,不是圆形 */
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#04101f;
}
.client-info{ min-width:0 }
.client-name{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.client-industry{ font-size:11px; color: var(--text-mute) }
.unread-dot{
  position:absolute; top:9px; right:9px; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background:#FA5151; color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.chat-pane{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  display:flex; flex-direction:column; overflow:hidden;
}
.chat-header{
  padding: 12px 16px; border-bottom:1px solid var(--border-soft);
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:9px;
}
.chat-back{ width:16px; height:16px; stroke:var(--text-mute); fill:none; stroke-width:2; stroke-linecap:round; flex:none }
.chat-header-title{ flex:1; display:flex; align-items:center; gap:8px }
.chat-header .chan-tag{
  font-size:10.5px; font-weight:500; color:var(--text-mute); background:rgba(140,165,255,0.08);
  padding:2px 8px; border-radius:999px; border:1px solid var(--border-soft);
}
.chat-more{ width:18px; height:4px; flex:none; display:flex; gap:2.5px; align-items:center; justify-content:center }
.chat-more span{ width:3.5px; height:3.5px; border-radius:50%; background:var(--text-mute) }
.chat-thread{ flex:1; overflow-y:auto; padding: 18px; display:flex; flex-direction:column; gap:12px }
.msg{ max-width: 78%; display:flex; flex-direction:column; gap:4px }
.msg.in{ align-self:flex-start }
.msg.out{ align-self:flex-end; align-items:flex-end }
.msg-bubble{
  padding: 9px 12px; border-radius: 6px; font-size:12.5px; line-height:1.6; position:relative;
}
/* 微信经典配色:对方灰白气泡、自己发的绿色气泡(暗色主题下用微信品牌绿 #07C160 系) */
.msg.in .msg-bubble{ background: #2b2f33; color:#eceff1; border-bottom-left-radius:2px }
.msg.out .msg-bubble{ background: #07C160; color:#06280f; border-bottom-right-radius:2px; font-weight:500 }
.msg-time{ font-size:10px; color: var(--text-mute); padding: 0 3px }

.draft-pane{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px; display:flex; flex-direction:column;
}
.draft-head{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color: var(--cyan); margin-bottom:12px;
}
.draft-icon{ width:14px; height:14px; fill: rgba(52,217,232,0.3); stroke: var(--cyan); stroke-width:1.4; stroke-linejoin:round }
.draft-body{
  flex:1; font-size:12.5px; line-height:1.75; color: var(--text-dim);
  background: var(--panel-2); border:1px solid var(--border-soft); border-radius:10px;
  padding: 13px; white-space:pre-wrap; min-height:200px;
}
.draft-body .typing{ display:inline-flex; gap:4px; align-items:center }
.draft-body .typing span{
  width:5px; height:5px; border-radius:50%; background: var(--cyan);
  animation: typingBounce 1s infinite ease-in-out;
}
.draft-body .typing span:nth-child(2){ animation-delay:.15s }
.draft-body .typing span:nth-child(3){ animation-delay:.3s }
@keyframes typingBounce{ 0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1} }

.draft-body-wrap{ position:relative; flex:1; display:flex; }
.draft-body-wrap .draft-body{ flex:1 }
.draft-body .stream-cursor{
  display:inline-block; width:2px; height:1em; background: var(--cyan);
  vertical-align:text-bottom; margin-left:1px;
  animation: cursorBlink .8s step-end infinite;
}
@keyframes cursorBlink{ 50%{ opacity:0 } }
.polish-fab{
  position:absolute; right:10px; bottom:10px;
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; border:1px solid rgba(52,217,232,0.4);
  background: rgba(10,14,26,0.85); backdrop-filter: blur(6px);
  color: var(--cyan); font-size:11.5px; font-weight:600; cursor:pointer;
  box-shadow: 0 4px 18px rgba(52,217,232,0.18);
  transition: transform .15s, box-shadow .15s;
}
.polish-fab:hover{ transform: translateY(-1px); box-shadow: 0 6px 22px rgba(52,217,232,0.3) }
.polish-fab:disabled{ opacity:.5; cursor:default; transform:none }
.polish-icon{ width:12px; height:12px; fill: rgba(52,217,232,0.35); stroke: var(--cyan); stroke-width:1.4; stroke-linejoin:round }
.polish-fab.spinning .polish-icon{ animation: spin 1s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }

.draft-actions{ display:flex; gap:8px; margin-top:12px }
.btn-ghost, .btn-primary{
  flex:1; padding:9px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--text-dim);
  transition: all .15s;
}
.btn-ghost:hover{ background: rgba(140,165,255,0.08); color:var(--text) }
.btn-primary{
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#04101f; border:none;
}
.btn-primary:hover{ filter: brightness(1.08) }

/* ================= 模块三: 项目看板 ================= */
.board-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:18px;
}
.board-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 20px;
}
.board-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px }
.board-title{ font-size:14.5px; font-weight:600; margin-bottom:4px }
.board-client{ font-size:11.5px; color:var(--text-mute) }
.status-badge{ font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap }
.status-badge.stage-collect{ background:rgba(251,191,90,0.14); color:var(--amber); border:1px solid rgba(251,191,90,0.35) }
.status-badge.stage-review{ background:rgba(76,141,255,0.14); color:var(--blue); border:1px solid rgba(76,141,255,0.4) }
.status-badge.stage-ready{ background:rgba(52,211,153,0.14); color:var(--green); border:1px solid rgba(52,211,153,0.4) }

.progress-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px }
.progress-label{ font-size:11.5px; color:var(--text-mute) }
.progress-pct{ font-size:15px; font-weight:700; font-family:ui-monospace,monospace; color:var(--text) }
.progress-track{ height:7px; border-radius:99px; background: rgba(255,255,255,0.06); overflow:hidden }
.progress-fill{ height:100%; border-radius:99px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 1s cubic-bezier(.2,.8,.2,1) }

.board-meta{ margin-top:16px; display:flex; flex-direction:column; gap:7px }
.board-meta-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-mute) }
.board-meta-row b{ color:var(--text-dim); font-weight:500 }
.board-agent{
  margin-top:14px; display:flex; align-items:center; gap:7px;
  font-size:11px; color: var(--text-mute); padding-top:12px; border-top:1px dashed var(--border-soft);
}
.agent-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); flex:none; animation:pulse 1.8s ease-in-out infinite }

/* ================= 模块四: 内容分发中心 ================= */

.distribute-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:start;
}

.platform-panel{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; display:flex; flex-direction:column; gap:14px;
}
.platform-panel[data-active="1"]{ border-color: rgba(76,141,255,0.4); box-shadow: var(--glow) }

.platform-panel-head{ display:flex; align-items:center; gap:11px }
.platform-icon{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.platform-icon svg{ width:18px; height:18px }
.platform-icon.tg{ background: linear-gradient(135deg,#2AABEE,#229ED9) }
.platform-icon.x{ background: linear-gradient(135deg,#3a3a3a,#0a0a0a); border:1px solid var(--border) }
.platform-icon.tiktok{ background: linear-gradient(135deg,#25F4EE,#FE2C55) }
.platform-name{ font-size:14px; font-weight:700 }
.platform-sub{ font-size:10.5px; color: var(--text-mute) }
.channel-select{
  margin-left:auto; max-width:128px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:7px;
  color: var(--text-dim); font-size:10.5px; padding:5px 7px; outline:none;
}

.pipeline-steps{ display:flex; flex-direction:column; gap:0 }
.pipeline-step{
  display:flex; gap:10px; padding: 8px 0;
  border-left: 1.5px solid var(--border-soft); margin-left:8px; padding-left:16px;
  position:relative; opacity:.4; transition: opacity .25s;
}
.pipeline-step:last-child{ border-left-color: transparent }
.pipeline-step.active, .pipeline-step.done{ opacity:1 }
.step-dot{
  position:absolute; left:-6.5px; top:9px; width:11px; height:11px; border-radius:50%;
  background: var(--panel-2); border:1.5px solid var(--text-mute); flex:none;
}
.pipeline-step.active .step-dot{
  border-color: var(--cyan); background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(52,217,232,0.18);
  animation: pulse 1s ease-in-out infinite;
}
.pipeline-step.done .step-dot{ border-color: var(--green); background: var(--green) }
.pipeline-step.done .step-dot::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:8px; color:#04101f; font-weight:900;
}
.step-body{ flex:1; min-width:0 }
.step-label{ font-size:12px; font-weight:600; color: var(--text-dim) }
.pipeline-step.active .step-label, .pipeline-step.done .step-label{ color: var(--text) }
.step-detail{ font-size:11px; color: var(--text-mute); margin-top:2px; line-height:1.5 }
.pipeline-step.done .step-detail{ color: var(--text-dim) }

.content-preview{
  background: var(--panel-2); border:1px solid var(--border-soft); border-radius:9px;
  padding:12px; font-size:11.5px; line-height:1.65; color: var(--text-dim);
  white-space:pre-wrap; max-height:220px; overflow-y:auto;
}
.compliance-list{ display:flex; flex-direction:column; gap:5px }
.compliance-item{ display:flex; align-items:center; gap:7px; font-size:11px; color: var(--text-dim) }
.compliance-item svg{ width:12px; height:12px; flex:none; stroke: var(--green); fill:none; stroke-width:2.4 }

.metrics-box{
  display:grid; grid-template-columns: repeat(3,1fr); gap:8px;
  background: var(--panel-2); border:1px solid var(--border-soft); border-radius:9px; padding:11px;
}
.metric-cell{ text-align:center }
.metric-num{ font-size:15px; font-weight:700; font-family: ui-monospace,monospace; color: var(--cyan) }
.metric-label{ font-size:10px; color: var(--text-mute); margin-top:2px }

.platform-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto }
.publish-result{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:9px 11px; border-radius:8px; background: rgba(52,211,153,0.1); color: var(--green);
  border:1px solid rgba(52,211,153,0.35);
}
.publish-result a{ color: var(--cyan); text-decoration:underline; margin-left:auto; font-size:11px; font-weight:500 }

/* ---- 弹窗(X / TikTok 复制) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background: rgba(4,6,14,0.72); backdrop-filter: blur(3px);
  animation: fadein .18s ease;
}
.modal-overlay[hidden]{ display:none }
.modal-box{
  width: 440px; max-width: calc(100vw - 40px); max-height: 82vh; overflow-y:auto;
  background: var(--panel); border:1px solid var(--border); border-radius: 14px;
  padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.modal-title{ font-size:15px; font-weight:700; flex:1 }
.modal-close{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--border-soft);
  background:transparent; color: var(--text-mute); cursor:pointer; font-size:14px;
}
.modal-close:hover{ color: var(--text); background: rgba(140,165,255,0.08) }
.modal-loading{ display:flex; flex-direction:column; align-items:center; gap:14px; padding: 30px 0 }
.modal-spinner{
  width:38px; height:38px; border-radius:50%;
  border: 3px solid var(--border); border-top-color: var(--cyan);
  animation: spin .8s linear infinite;
}
.modal-loading-text{ font-size:12.5px; color: var(--text-dim) }
.copy-btn{
  width:100%; padding:10px; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#04101f; border:none;
  margin-top:12px; transition: filter .15s;
}
.copy-btn:hover{ filter:brightness(1.08) }
.copy-btn.copied{ background: var(--green) }

@media (max-width: 980px){
  .files-layout{ grid-template-columns: 1fr }
  .chat-layout{ grid-template-columns: 1fr; height:auto }
  .distribute-grid{ grid-template-columns: 1fr }
  .sidenav{ width:72px }
  .sidenav span{ display:none }
  .nav-footer{ display:none }
}