/* ===== 全局 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0a1628; --bg2:#0e1f38; --panel:#12294a; --panel2:#0f2039;
  --line:#1e3a5f; --line2:#2a4a78;
  --cyan:#22d3ee; --blue:#3b82f6; --green:#34d399; --orange:#f59e0b;
  --red:#ef4444; --purple:#a78bfa; --text:#e2ecf7; --muted:#8aa3bf;
  --radius:10px;
}
html,body { height:100%; }
body {
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; overflow:hidden;
}
.hidden { display:none !important; }
a { color:var(--cyan); text-decoration:none; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#2a4a78; border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

/* ===== 登录 ===== */
.login-page { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100; }
.login-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 20% 20%, #123b66 0%, #0a1628 55%, #060d1a 100%); }
.login-bg::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(34,211,238,.04) 0 1px, transparent 1px 3px); }
/* 登录页皮肤：星空 / 网格 / 极光 / 水墨 */
#loginPage[data-skin="starry"] .login-bg { background:radial-gradient(ellipse at 20% 20%, #0e2a5a 0%, #0a1628 55%, #050a14 100%); }
#loginPage[data-skin="starry"] .login-bg::after { background:radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 0 1px, transparent 1px), radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.4) 0 1px, transparent 1px), radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.3) 0 1px, transparent 1px); background-size:120px 120px; }
#loginPage[data-skin="grid"] .login-bg { background:radial-gradient(ellipse at 80% 10%, #103a5e 0%, #0a1628 60%, #060d1a 100%); }
#loginPage[data-skin="grid"] .login-bg::after { background:linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px); background-size:44px 44px; }
#loginPage[data-skin="aurora"] .login-bg { background:linear-gradient(135deg, #0b1e3f 0%, #123b66 40%, #0a2e4d 70%, #0a1628 100%); }
#loginPage[data-skin="aurora"] .login-bg::after { background:linear-gradient(120deg, transparent 20%, rgba(52,211,153,.14) 38%, rgba(34,211,238,.16) 50%, rgba(167,139,250,.14) 62%, transparent 80%); background-size:220% 220%; animation:auroraShift 14s ease-in-out infinite alternate; }
@keyframes auroraShift { 0%{background-position:0% 0%} 100%{background-position:100% 100%} }
#loginPage[data-skin="misty"] .login-bg { background:linear-gradient(160deg, #12304f 0%, #1a4066 45%, #0e2a45 100%); }
#loginPage[data-skin="misty"] .login-bg::after { background:radial-gradient(ellipse at 30% 80%, rgba(226,236,247,.08) 0 40%, transparent 70%), radial-gradient(ellipse at 75% 20%, rgba(34,211,238,.08) 0 30%, transparent 60%); }

.login-card { position:relative; width:440px; background:rgba(15,32,57,.85); border:1px solid var(--line2); border-radius:16px; padding:34px 36px; box-shadow:0 20px 60px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
.login-logo { display:flex; gap:14px; align-items:center; margin-bottom:26px; }
.logo-mark { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,#22d3ee,#3b82f6); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#04121f; box-shadow:0 6px 18px rgba(34,211,238,.35); }
.login-logo h1 { font-size:19px; letter-spacing:1px; }
.login-logo p { color:var(--muted); font-size:12px; margin-top:4px; }
.login-form input { width:100%; height:42px; background:#0d1c33; border:1px solid var(--line); border-radius:8px; color:var(--text); padding:0 14px; font-size:14px; margin-bottom:12px; outline:none; }
.login-form input:focus { border-color:var(--cyan); }
.login-role { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.role-chip { padding:5px 11px; border:1px solid var(--line2); border-radius:20px; font-size:12px; color:var(--muted); cursor:pointer; transition:.15s; }
.role-chip:hover { border-color:var(--cyan); color:var(--cyan); }
.role-chip.active { background:rgba(34,211,238,.14); border-color:var(--cyan); color:var(--cyan); }
.btn-primary { background:linear-gradient(135deg,#0ea5e9,#3b82f6); border:none; color:#fff; height:42px; border-radius:8px; font-size:15px; cursor:pointer; font-weight:600; letter-spacing:2px; transition:.15s; }
.btn-primary:hover { filter:brightness(1.12); }
.btn-block { width:100%; }
.login-tip { color:var(--muted); font-size:12px; margin-top:14px; text-align:center; }

/* ===== 主框架 ===== */
#app { display:flex; height:100vh; }
.sidebar { width:224px; background:linear-gradient(180deg,#0d1e37,#0a1628); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition:margin-left .2s; }
.sidebar.collapsed { margin-left:-224px; }
.side-logo { display:flex; align-items:center; gap:10px; padding:16px 16px; border-bottom:1px solid var(--line); }
.side-logo .logo-mark { width:36px; height:36px; font-size:20px; border-radius:9px; }
.side-logo .name { font-size:15px; font-weight:600; }
.side-logo .sub { font-size:11px; color:var(--muted); }
.side-nav { flex:1; overflow-y:auto; padding:10px 8px 20px; }
.nav-group { margin-top:6px; }
.nav-group-title { font-size:11px; color:var(--muted); padding:8px 10px 4px; letter-spacing:2px; }
.nav-item { display:flex; align-items:center; gap:9px; padding:9px 12px; margin:2px 0; border-radius:8px; cursor:pointer; color:#c3d4e8; font-size:13.5px; transition:.12s; }
.nav-item:hover { background:rgba(34,211,238,.08); color:var(--cyan); }
.nav-item.active { background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(59,130,246,.08)); color:var(--cyan); border-left:3px solid var(--cyan); }
.nav-item .ico { width:20px; text-align:center; font-size:15px; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:52px; background:rgba(13,30,55,.9); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 18px; flex-shrink:0; }
.topbar-title { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; letter-spacing:1px; }
.menu-toggle { cursor:pointer; font-size:18px; color:var(--muted); }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-time { color:var(--muted); font-size:13px; }
.role-badge { background:rgba(34,211,238,.14); color:var(--cyan); border:1px solid rgba(34,211,238,.4); padding:3px 10px; border-radius:20px; font-size:12px; }
.user-chip { color:var(--muted); font-size:13px; }
.btn-ghost { background:transparent; border:1px solid var(--line2); color:var(--muted); padding:5px 12px; border-radius:7px; cursor:pointer; font-size:13px; }
.btn-ghost:hover { color:var(--cyan); border-color:var(--cyan); }
.view { flex:1; overflow-y:auto; padding:16px; }

/* ===== 通用组件 ===== */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.panel-title { font-size:14px; font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.panel-title::before { content:""; width:4px; height:14px; background:var(--cyan); border-radius:2px; }
.grid { display:grid; gap:14px; }
.g-2 { grid-template-columns:repeat(2,1fr); } .g-3 { grid-template-columns:repeat(3,1fr); } .g-4 { grid-template-columns:repeat(4,1fr); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:14px; }
.kpi { background:linear-gradient(180deg,rgba(34,211,238,.06),transparent); border:1px solid var(--line); border-radius:10px; padding:12px 14px; position:relative; overflow:hidden; }
.kpi .k-label { font-size:12px; color:var(--muted); }
.kpi .k-value { font-size:24px; font-weight:700; margin-top:4px; font-family:"Consolas","Microsoft YaHei"; }
.kpi .k-unit { font-size:12px; color:var(--muted); font-weight:400; }
.kpi .k-trend { font-size:11px; margin-top:3px; }
.up { color:var(--red); } .down { color:var(--green); }
.chart-box { width:100%; height:260px; }
.chart-box-sm { height:200px; }
.chart-box-lg { height:320px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:#16304f; color:#9fc3e8; font-weight:600; text-align:left; padding:9px 10px; white-space:nowrap; border-bottom:1px solid var(--line2); }
td { padding:8px 10px; border-bottom:1px solid rgba(30,58,95,.6); color:#d5e3f2; }
tr:hover td { background:rgba(34,211,238,.05); }
.tag { display:inline-block; padding:2px 9px; border-radius:12px; font-size:12px; }
.tag-green { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.4); }
.tag-red { background:rgba(239,68,68,.15); color:var(--red); border:1px solid rgba(239,68,68,.4); }
.tag-orange { background:rgba(245,158,11,.15); color:var(--orange); border:1px solid rgba(245,158,11,.4); }
.tag-blue { background:rgba(59,130,246,.15); color:var(--blue); border:1px solid rgba(59,130,246,.4); }
.tag-purple { background:rgba(167,139,250,.15); color:var(--purple); border:1px solid rgba(167,139,250,.4); }
.tag-gray { background:rgba(138,163,191,.15); color:var(--muted); border:1px solid rgba(138,163,191,.4); }
.btn { padding:6px 14px; border-radius:7px; border:1px solid var(--line2); background:#16304f; color:var(--text); cursor:pointer; font-size:13px; transition:.12s; }
.btn:hover { border-color:var(--cyan); color:var(--cyan); }
.btn-sm { padding:3px 10px; font-size:12px; }
.btn-cyan { background:rgba(34,211,238,.15); border-color:rgba(34,211,238,.5); color:var(--cyan); }
.toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
input[type=text], input[type=number], input[type=date], select, textarea {
  background:#0d1c33; border:1px solid var(--line); border-radius:7px; color:var(--text); padding:7px 10px; font-size:13px; outline:none; }
input:focus, select:focus { border-color:var(--cyan); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tab { padding:8px 16px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; font-size:13.5px; }
.tab:hover { color:var(--cyan); }
.tab.active { color:var(--cyan); border-bottom-color:var(--cyan); font-weight:600; }
.muted { color:var(--muted); }
.mt { margin-top:14px; }
.mb { margin-bottom:14px; }
.flex { display:flex; } .between { justify-content:space-between; } .align-center { align-items:center; } .gap8 { gap:8px; } .gap12 { gap:12px; }
.section-title { font-size:15px; font-weight:600; margin:18px 0 10px; padding-left:10px; border-left:4px solid var(--cyan); }
.stat-line { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed rgba(30,58,95,.7); font-size:13px; }
.stat-line .v { color:var(--cyan); font-weight:600; }

/* ===== 弹窗 ===== */
.modal-mask { position:fixed; inset:0; background:rgba(4,10,20,.7); z-index:200; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.modal-box { width:min(680px,92vw); max-height:86vh; overflow:auto; background:var(--bg2); border:1px solid var(--line2); border-radius:12px; padding:20px 22px; }
.modal-box .m-title { font-size:16px; font-weight:600; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.modal-box .m-close { cursor:pointer; color:var(--muted); font-size:18px; }
.modal-box .m-close:hover { color:var(--red); }
.m-form .f-row { margin-bottom:12px; }
.m-form label { display:block; margin-bottom:5px; color:var(--muted); font-size:13px; }
.m-form input, .m-form select, .m-form textarea { width:100%; }

/* ===== Toast ===== */
.toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(16,35,60,.95); border:1px solid var(--cyan); color:var(--cyan); padding:10px 22px; border-radius:8px; z-index:300; box-shadow:0 8px 30px rgba(0,0,0,.4); }

/* ===== 地图 ===== */
.map-box { width:100%; height:100%; min-height:420px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0d1c33; position:relative; }
.map-box .leaflet-container { background:#0d1c33; }
/* Esri 深色底图整体压暗，与平台深蓝界面融合 */
.tile-dim { filter: brightness(.58) saturate(.7) contrast(1.08); }
.tile-dim-ref { filter: brightness(.85); }
.leaflet-control-attribution { background:rgba(10,22,40,.72) !important; color:var(--muted) !important; font-size:10px !important; }
.leaflet-control-attribution a { color:var(--cyan) !important; }
.leaflet-control-zoom a { background:#16304f !important; color:var(--cyan) !important; border-color:var(--line2) !important; }
.leaflet-popup-content-wrapper { background:#0f2039 !important; color:var(--text) !important; border:1px solid var(--line2); border-radius:8px !important; }
.leaflet-popup-tip { background:#0f2039 !important; border:1px solid var(--line2); }
.leaflet-popup-content { margin:10px 12px; }

/* ===== 手机模拟 ===== */
.phone { width:360px; height:700px; margin:0 auto; background:#0a1526; border:10px solid #1b2c47; border-radius:34px; position:relative; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.55); }
.phone-notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:110px; height:16px; background:#0a1526; border:2px solid #2a3f5f; border-radius:12px; z-index:5; }
.phone-body { height:100%; overflow-y:auto; padding:34px 14px 20px; }
.phone-tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(13,30,55,.97); border-top:1px solid var(--line); display:flex; z-index:5; }
.phone-tabbar .ptab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--muted); cursor:pointer; }
.phone-tabbar .ptab.active { color:var(--cyan); }
.phone-tabbar .ptab .pi { font-size:17px; }
.phone-page { animation:fadein .25s; }
@keyframes fadein { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ===== 大屏 ===== */
.screen { display:grid; grid-template-columns:340px 1fr 340px; gap:12px; height:calc(100vh - 100px); }
.screen .left, .screen .right { display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.screen .center { position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:radial-gradient(ellipse at center,#10294d 0%,#0a1628 70%); }
.screen .sc-panel { background:rgba(14,30,54,.82); border:1px solid var(--line); border-radius:10px; padding:12px 14px; backdrop-filter:blur(4px); }
.screen .sc-title { font-size:13px; font-weight:600; color:#9fd8f2; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.screen .sc-title::before { content:""; width:3px; height:12px; background:var(--cyan); }
.floating-alert { position:absolute; top:16px; right:16px; z-index:10; }
.alert-card { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.55); border-radius:8px; padding:8px 14px; margin-bottom:8px; font-size:12.5px; color:#ffc4c4; animation:blink 1.6s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.marker-label { color:#fff; font-size:11px; text-shadow:0 0 6px rgba(0,0,0,.9); white-space:nowrap; }
.flow-dot { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:flow 3s linear infinite; }
@keyframes flow { 0%{transform:translate(0,0); opacity:0;} 10%{opacity:1;} 100%{transform:translate(180px,60px); opacity:0;} }

/* ===== 三维演示容器 ===== */
.three3d { width:100%; height:420px; border-radius:10px; border:1px solid var(--line); background:radial-gradient(ellipse at 30% 30%,#123a63 0%,#0a1628 65%); position:relative; overflow:hidden; }
.three3d canvas { display:block; }

/* 响应式 */
@media (max-width:1200px){ .kpi-row{grid-template-columns:repeat(3,1fr);} .screen{grid-template-columns:1fr;} .screen .left,.screen .right{display:grid;grid-template-columns:1fr 1fr;} }
@media (max-width:900px){ .sidebar{position:fixed; z-index:50; height:100vh;} .g-3,.g-4{grid-template-columns:1fr 1fr;} }
/* ===== 主题设置 ===== */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }
.theme-card { border:1px solid var(--line2); border-radius:10px; padding:12px; cursor:pointer; transition:.15s; background:var(--panel2); }
.theme-card:hover { border-color:var(--cyan); }
.theme-card.active { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan); }
.theme-swatches { display:flex; gap:4px; margin-bottom:8px; }
.theme-swatches i { width:16px; height:16px; border-radius:4px; display:inline-block; }
.theme-name { font-size:13px; font-weight:600; }
.theme-desc { font-size:11px; color:var(--muted); margin-top:2px; }
.theme-divider { height:1px; background:var(--line); margin:14px 0; }
.cus-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cus-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.cus-field input[type=color] { width:100%; height:34px; border:1px solid var(--line2); border-radius:6px; background:transparent; padding:2px; cursor:pointer; }
/* 数据编辑面板 */
.dl-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed rgba(30,58,95,.6); }
.dl-row label { font-size:13px; color:var(--muted); }
.dl-row input { width:130px; text-align:right; }
.dl-section { margin-bottom:14px; }
/* 孪生模块 */
.tw-main { display:grid; grid-template-columns:1fr 360px; gap:14px; height:calc(100vh - 130px); min-height:560px; }
.tw-right { overflow-y:auto; padding-right:4px; }
.tw-scene { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:radial-gradient(ellipse at 30% 30%,#10294d 0%,var(--bg) 70%); }
.tw-scene canvas { display:block; width:100%; height:100%; }
.tw-panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.fullscreen-btn { position:absolute; right:12px; top:12px; z-index:8; background:rgba(10,22,40,.72); border:1px solid var(--line2); color:var(--muted); }
.fullscreen-btn:hover { color:var(--cyan); }
.tw-panel .tp-title { font-size:13px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.tw-panel .tp-title::before { content:""; width:3px; height:12px; background:var(--cyan); border-radius:2px; }
.tw-legend { position:absolute; left:12px; top:12px; z-index:5; background:rgba(10,22,40,.72); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:11.5px; color:var(--muted); }
.tw-legend b { color:var(--text); }
.tw-toggle { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tw-toggle .btn.active { border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.12); }
.tw-slider { width:100%; accent-color:var(--cyan); }
.tw-datastream { position:relative; height:150px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel2); padding:10px; font-family:Consolas,monospace; font-size:12px; }
.tw-datastream .ds-item { display:flex; justify-content:space-between; padding:3px 0; color:var(--muted); border-bottom:1px dashed rgba(30,58,95,.5); animation:fadein .4s; }
.tw-datastream .ds-item b { color:var(--cyan); font-weight:600; }
.tw-flags { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.tw-flag { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; text-align:center; }
.tw-flag .fv { font-size:18px; font-weight:700; color:var(--cyan); }
.tw-flag .fl { font-size:11px; color:var(--muted); margin-top:2px; }
@media (max-width:1100px){ .tw-main{grid-template-columns:1fr;} }


.tw-speed-sel { background:var(--panel2); border:1px solid var(--line2); color:var(--text); border-radius:6px; padding:4px 8px; font-size:12px; outline:none; flex:1; }
.tw-speed-sel:focus { border-color:var(--cyan); }

.tw-timeline { margin-top:8px; padding:8px 10px; border:1px dashed var(--line2); border-radius:8px; background:rgba(10,22,40,.35); }
.tw-phase-bar { display:flex; gap:4px; flex-wrap:wrap; margin:6px 0; }
.tw-phase-bar .ph { font-size:11px; padding:3px 8px; border:1px solid var(--line2); border-radius:12px; color:var(--muted); cursor:pointer; transition:all .2s; user-select:none; }
.tw-phase-bar .ph:hover { border-color:var(--cyan); color:var(--cyan); }
.tw-phase-bar .ph.active { border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.14); font-weight:600; }
.tw-progress { height:6px; border-radius:3px; background:rgba(30,58,95,.6); overflow:hidden; }
.tw-progress-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--green)); border-radius:3px; transition:width .3s linear; }

.tour-bar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9999; display:flex; align-items:center; gap:14px; background:rgba(8,18,32,.92); border:1px solid var(--cyan); border-radius:10px; padding:10px 18px; box-shadow:0 8px 30px rgba(0,0,0,.5); backdrop-filter:blur(6px); }
.tour-title { color:var(--cyan); font-weight:600; font-size:13px; }
.tour-info { color:var(--muted); font-size:12px; }

.login-skins { display:flex; align-items:center; gap:6px; margin:10px 0 12px; flex-wrap:wrap; }
.skin-chip { font-size:11px; padding:3px 10px; border:1px solid var(--line2); border-radius:12px; color:var(--muted); cursor:pointer; transition:all .2s; user-select:none; }
.skin-chip:hover { border-color:var(--cyan); color:var(--cyan); }
.skin-chip.active { border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.12); }

.guide-chat { height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel2); padding:10px; display:flex; flex-direction:column; gap:8px; }
.guide-msg { max-width:82%; padding:8px 12px; border-radius:10px; font-size:12.5px; line-height:1.7; }
.guide-msg.ai { align-self:flex-start; background:var(--panel); border:1px solid var(--line2); color:var(--text); }
.guide-msg.user { align-self:flex-end; background:rgba(34,211,238,.14); border:1px solid var(--cyan); color:var(--cyan); }
.guide-go { display:inline-block; margin-top:6px; color:var(--cyan); cursor:pointer; font-weight:600; border-bottom:1px dashed var(--cyan); }
.guide-chips { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.guide-chip { font-size:11px; padding:3px 10px; border:1px solid var(--line2); border-radius:12px; color:var(--muted); cursor:pointer; transition:all .2s; }
.guide-chip:hover { border-color:var(--cyan); color:var(--cyan); }