/* =========================================================================
   Richy's Town — dark fantasy command center
   ========================================================================= */

:root {
  --bg:        #05060a;
  --bg-2:      #0a0d16;
  --panel-bg:  rgba(12, 15, 24, 0.92);
  --ink:       #e7ecf5;
  --ink-dim:   #8b93a7;
  --ink-faint: #5a6175;
  --line:      rgba(120, 140, 190, 0.18);

  /* accent hues (guild colors map to these) */
  --gold:    #f2c14e;
  --cyan:    #49e6d6;
  --violet:  #9b7bff;
  --ember:   #ff7a59;
  --emerald: #57e08a;
  --veto:    #ff4d6d;   /* agent risk-veto link */
  --link:    #f472b6;   /* agent data/knowledge link */

  /* status colors */
  --st-working: #4ade80;
  --st-idle:    #fbbf24;
  --st-dormant: #6b7280;

  --radius: 14px;
  --font: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Consolas", "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 800px at 50% -10%, #0d1322 0%, var(--bg) 55%) fixed;
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
}

/* ---- ambient background ---- */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(120,140,190,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,190,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 700px at 50% 25%, #000 40%, transparent 100%);
}
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 300px at 50% 8%, rgba(242,193,78,0.10), transparent 70%),
    radial-gradient(700px 500px at 18% 80%, rgba(155,123,255,0.08), transparent 70%),
    radial-gradient(700px 500px at 82% 70%, rgba(73,230,214,0.07), transparent 70%);
}

/* ---- HUD ---- */
.hud {
  position: fixed; top: 22px; left: 26px; z-index: 5;
  pointer-events: none;
}
.hud-title {
  margin: 0; font-size: 26px; letter-spacing: 2px; font-weight: 700;
  font-family: var(--mono);
  background: linear-gradient(90deg, var(--gold), #fff6db 60%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(242,193,78,0.25);
}
.hud-sub {
  margin: 4px 0 0; font-size: 12px; letter-spacing: 1px;
  color: var(--ink-dim); font-family: var(--mono);
}
.legend {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; gap: 14px; font-size: 11px; color: var(--ink-dim);
  font-family: var(--mono);
}
.legend li { display: flex; align-items: center; gap: 6px; }

/* ---- status dot ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.working { background: var(--st-working); box-shadow: 0 0 8px var(--st-working); animation: pulse 1.6s infinite; }
.dot.idle    { background: var(--st-idle);    box-shadow: 0 0 8px var(--st-idle); }
.dot.dormant { background: var(--st-dormant); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- stage / graph ---- */
.stage {
  position: absolute; inset: 0; z-index: 1;
  overflow: auto;
  overflow-anchor: none;          /* stop the SVG overlay resize from auto-scrolling */
  padding: 96px 40px 60px 272px;  /* left padding clears the sidebar */
}
.wires {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: visible;
}
.graph {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 54px; min-width: max-content; margin: 0 auto;
}

/* ---- node card (boss / aris / agent) ---- */
.node {
  position: relative;
  width: 230px;
  background: linear-gradient(160deg, rgba(22,27,40,0.96), rgba(10,13,22,0.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  --accent: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 18px -6px var(--accent);
}
.node:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 26px -4px var(--accent), 0 8px 24px -12px #000;
}
.node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 34px -4px var(--accent);
}
.node-top { display: flex; align-items: center; gap: 9px; }
.node-name { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.node-role { margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
.node-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.node-status { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-transform: uppercase;
}
.node-icon {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* crown nodes (boss / aris) a touch larger + centered */
.node.lead { width: 250px; }
.node.boss { --accent: var(--gold); }
.node.aris { --accent: #c9b6ff; }

/* ---- guild row ---- */
.guilds-row {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 46px;
  margin-top: 40px;               /* band for cross-guild collaboration arcs */
}

/* collaboration edge labels (SVG text) */
.wire-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3px;
  fill: #ffcdb8;
  paint-order: stroke; stroke: #05060a; stroke-width: 3.5px; stroke-linejoin: round;
}
.wire-label.veto { fill: #ff97aa; }
.wire-label.link { fill: #f9b8dd; }

/* focus mode: clicking an agent dims every edge except the ones touching it */
.wires .edge { transition: opacity .2s ease; }
.wires.focused .edge:not(.active) { opacity: 0.08; }

/* the agent on the other end of a highlighted link */
.node.linked {
  border-color: var(--link);
  box-shadow: 0 0 0 1px var(--link), 0 0 26px -4px var(--link);
}
.guild { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.guild-head {
  width: 250px; cursor: pointer;
  background: linear-gradient(160deg, rgba(26,31,46,0.97), rgba(12,15,24,0.97));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius);
  padding: 12px 14px;
  --accent: var(--cyan);
  box-shadow: 0 0 22px -8px var(--accent);
  transition: box-shadow .2s ease, transform .15s ease;
}
.guild-head:hover { transform: translateY(-2px); box-shadow: 0 0 30px -6px var(--accent); }
.guild-head-top { display: flex; align-items: center; gap: 10px; }
.guild-name { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .5px; color: var(--accent); }
.guild-type { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.guild-chevron { margin-left: auto; color: var(--accent); transition: transform .25s ease; font-size: 12px; }
.guild.collapsed .guild-chevron { transform: rotate(-90deg); }
.guild-count { font-size: 10px; color: var(--ink-faint); font-family: var(--mono); margin-top: 6px; letter-spacing: .5px; }

.unit-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  color: var(--ink-dim); text-transform: uppercase;
  border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px;
}
.lead-label { color: var(--accent); border-top-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* guild lead node — a touch more prominent than members */
.node.guild-lead {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 24px -6px var(--accent);
}
.node.guild-lead .node-name::after {
  content: "★"; margin-left: 6px; font-size: 11px; color: var(--accent);
}

.guild-agents {
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  max-height: 4000px; opacity: 1;
}
.guild.collapsed .guild-agents { max-height: 0; opacity: 0; }

/* ---- detail panel ---- */
.panel {
  position: fixed; top: 0; right: 0; z-index: 20;
  width: 380px; max-width: 92vw; height: 100%;
  background: var(--panel-bg);
  border-left: 1px solid var(--line);
  backdrop-filter: blur(12px);
  box-shadow: -20px 0 60px -20px #000;
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  padding: 26px 24px;
  overflow-y: auto;
}
.panel.open { transform: translateX(0); }
.panel-close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px;
  transition: all .15s ease;
}
.panel-close:hover { color: var(--ink); border-color: var(--ink-dim); }
.panel-backdrop {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(2,3,6,0.45); opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.panel-backdrop.open { opacity: 1; pointer-events: auto; }

.p-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent, var(--cyan)); }
.p-name { font-family: var(--mono); font-size: 28px; font-weight: 700; margin: 6px 0 2px; letter-spacing: .5px; }
.p-role { color: var(--ink-dim); font-size: 14px; }
.p-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.p-chip {
  font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--ink-dim); background: rgba(255,255,255,0.02);
  display: flex; align-items: center; gap: 6px;
}
.p-section-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 8px; }
.p-job { font-size: 14px; line-height: 1.7; color: var(--ink); }
.p-divider { height: 1px; background: var(--line); margin: 22px 0; }

/* ---- character card (Boss / Aris) ---- */
.panel.panel-card { width: 540px; }
.pc-top { display: grid; grid-template-columns: 188px 1fr; gap: 18px; align-items: start; }
.pc-portrait-wrap {
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  border-radius: 16px; padding: 8px; min-height: 150px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pc-portrait { width: 100%; height: auto; display: block; border-radius: 11px; }
.pc-portrait.pc-fallback { width: auto; max-height: 200px; image-rendering: pixelated; }
.pc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--accent, var(--cyan)); }
.pc-name { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.05; margin: 5px 0 3px; letter-spacing: .5px; }
.pc-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.pc-divider { height: 1px; background: var(--line); margin: 14px 0; }
.pc-field { font-size: 14px; color: var(--ink); margin: 7px 0; }
.pc-field span { color: var(--ink-dim); font-weight: 600; }
.pc-section { margin-top: 20px; }
.pc-h { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-bottom: 9px; color: var(--ink); }
.pc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; padding: 6px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ink);
}
.pc-skills { display: flex; flex-direction: column; gap: 8px; }
.pc-skill {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px;
}
/* chat embedded in Aris's card */
.pc-chat { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
.pc-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim);
  padding: 10px 13px; border-bottom: 1px solid var(--line);
}
.pc-chat .chat-log { flex: none; height: 260px; padding: 16px 14px; }
.pc-chat .chat-suggest { padding: 0 14px 10px; }
.pc-chat .chat-form { padding: 12px 14px; }
.pc-chat-open {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: #05060a;
  background: linear-gradient(120deg, #c9b6ff, #e6dbff); border: 0; border-radius: 10px;
  padding: 14px; cursor: pointer; transition: filter .15s ease;
}
.pc-chat-open:hover { filter: brightness(1.06); }

/* ---- Aris chat window (separate, mobile-friendly) ---- */
/* ---- Aris window — chibi ซ้าย + chat พร้อมพิมพ์ขวา (2026-07-04) ---- */
.aris-window {
  position: fixed; z-index: 40; top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.97); opacity: 0; pointer-events: none;
  width: min(1100px, 94vw); height: min(920px, 92vh);
  transition: opacity .25s ease, transform .25s ease;
}
.aris-window.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.aw-box {
  position: relative; width: 100%; height: 100%;
  background: rgba(10, 13, 20, 0.62); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 80px -20px #000;
  backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15);
  display: grid; grid-template-columns: 280px 1fr; overflow: hidden;
}
.aw-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all .15s ease;
}
.aw-close:hover { color: var(--ink); border-color: var(--ink-dim); }
.aw-left {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 28px 22px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201,182,255,0.05), transparent 55%);
}
.aw-chibi {
  width: 190px; height: auto; max-height: 300px; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(201,182,255,.18));
  animation: awFloat 3.4s ease-in-out infinite;
}
@keyframes awFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* กรอบข้อมูลใต้รูป — มุมทอง + เส้น accent ม่วง Aris */
.aw-frame {
  position: relative; width: 100%; text-align: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,0.03); padding: 16px 14px 15px;
}
.aw-frame::before {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: linear-gradient(90deg, transparent, #c9b6ff, transparent);
}
.aw-frame::after {
  content: ""; position: absolute; inset: 4px; border-radius: 9px;
  border: 1px solid rgba(230,196,109,0.18); pointer-events: none;
}
.aw-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; color: #c9b6ff; margin-bottom: 4px; }
.aw-name { font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.aw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  background: rgba(255,255,255,0.03);
}
.aw-log {
  width: 100%; font-family: var(--mono); font-size: 11.5px; letter-spacing: .5px;
  color: var(--ink-dim); background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; transition: all .15s ease;
}
.aw-log:hover { color: var(--gold); border-color: var(--gold); }
.aw-right { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.aw-right .pc-chat { border: 0; border-radius: 0; background: transparent; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.aw-right .pc-chat-head { display: none; }
.aw-right .chat-log { flex: 1; height: auto; }
.aris-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(2,3,6,0.38); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.aris-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---- Gold Fang P/L snapshot modal ---- */
.pnl-modal {
  position: fixed; z-index: 40; top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.97); opacity: 0; pointer-events: none;
  width: min(1240px, 94vw); max-height: 90vh;
  transition: opacity .25s ease, transform .25s ease;
}
.pnl-modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.pnl-box {
  /* กระจกโปร่งเบาๆ — เห็นห้องเหมืองด้านหลังผ่าน blur (Boss ขอ 2026-07-03) */
  position: relative; background: rgba(10, 13, 20, 0.62); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 22px; box-shadow: 0 30px 80px -20px #000;
  backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15);
  /* สูงคงที่ทุก tab — เนื้อหาเลื่อนข้างใน (Boss ขอไม่ให้ขนาดเด้งตาม tab) */
  height: min(800px, 88vh); overflow-y: auto;
}
.pnl-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all .15s ease;
}
.pnl-close:hover { color: var(--ink); border-color: var(--ink-dim); }
.pnl-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; }
.pnl-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 4px 0 6px; }
.pnl-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-bottom: 18px; }
.pnl-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pnl-section:last-of-type { border-bottom: 0; margin-bottom: 12px; }
/* tab bar แยกหมวดในหน้าต่าง P/L */
.pnl-tabs {
  display: flex; gap: 6px; margin: 14px 0 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.pnl-tab {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .6px;
  background: rgba(255,255,255,0.03); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: all .15s ease;
}
.pnl-tab:hover { color: var(--ink); border-color: var(--ink-dim); }
.pnl-tab.active {
  color: var(--gold); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.pnl-tab .pnl-count { margin-left: 4px; }
.pnl-pane { display: none; }
.pnl-pane.active { display: block; }
/* P/L calendar (Daily/Weekly/Monthly) */
.pnl-cal-switch { display: flex; gap: 6px; margin-bottom: 14px; }
.pnl-calview { display: none; }
.pnl-calview.active { display: block; }
.pnl-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-family: var(--mono);
}
.pnl-cal-dow { font-size: 9.5px; color: var(--ink-faint); text-align: center; text-transform: uppercase; padding: 2px 0; }
.pnl-cal-cell {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; min-height: 52px;
  display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,0.02);
}
.pnl-cal-cell.out { opacity: .28; }
.pnl-cal-cell.win  { background: rgba(111,227,160,0.13); border-color: rgba(111,227,160,0.4); }
.pnl-cal-cell.loss { background: rgba(255,143,143,0.12); border-color: rgba(255,143,143,0.4); }
.pnl-cal-day { font-size: 10px; color: var(--ink-faint); }
.pnl-cal-pl { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.pnl-cal-cell.win  .pnl-cal-pl { color: #6fe3a0; }
.pnl-cal-cell.loss .pnl-cal-pl { color: #ff8f8f; }
.pnl-cal-trades { font-size: 9px; color: var(--ink-faint); }
.pnl-section-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; font-weight: 700;
  color: var(--cyan); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.pnl-count { color: var(--ink-faint); font-weight: 400; }
.pnl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pnl-grid-6 { grid-template-columns: repeat(6, 1fr); }
.pnl-stat {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.pnl-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px; color: var(--ink-faint); text-transform: uppercase; }
.pnl-v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); }
.pnl-v.up { color: #6fe3a0; }
.pnl-v.down { color: #ff8f8f; }
.pnl-subline { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.pnl-subline b { color: var(--ink-dim); }
.pnl-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-bottom: 10px;
}
.pnl-note {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-faint);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.pnl-table-wrap { overflow-x: auto; }
.pnl-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.pnl-table th {
  text-align: left; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pnl-table td {
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--ink-dim);
  white-space: nowrap;
}
.pnl-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.pnl-empty {
  text-align: center; font-style: italic; color: var(--ink-faint); padding: 16px 10px; white-space: normal;
}
.pnl-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(2,3,6,0.32); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.pnl-backdrop.open { opacity: 1; pointer-events: auto; }
/* "LIVE" badge replacing "(mock data)" once a real Gold Fang snapshot has been pushed */
.pnl-live-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .8px; font-weight: 700;
  color: var(--st-working); border: 1px solid color-mix(in srgb, var(--st-working) 50%, transparent);
  background: color-mix(in srgb, var(--st-working) 14%, transparent);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
/* team conversation modal body — reuses .chat-log/.msg bubble styling from the Aris chat window */
#teamChatBody { max-height: 56vh; padding: 4px 0 0; }
.msg.team { align-self: flex-start; }
.msg.team .msg-ava { color: var(--gold); background: rgba(242,193,78,0.12); border: 1px solid rgba(242,193,78,0.3); }
.msg.team .msg-bubble { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-top-left-radius: 3px; }

/* ---- relationships legend (bottom-left) ---- */
.rel-legend {
  position: fixed; left: 22px; bottom: 20px; z-index: 6;
  width: 250px; max-height: 64vh; overflow-y: auto; padding: 12px 14px;
  background: rgba(10, 13, 22, 0.82);
  border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: blur(8px);
  font-family: var(--mono); color: var(--ink-dim);
}
.rel-legend h4 {
  margin: 0 0 8px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-faint);
}
.rel-legend ul { list-style: none; margin: 0; padding: 0; }
.rel-legend .keys li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; margin-bottom: 5px; }
.rel-legend .keys .k { width: 22px; height: 0; flex: none; border-top-width: 2px; border-top-style: solid; }
.rel-legend .keys .cmd    { border-color: var(--gold); }
.rel-legend .keys .orch   { border-top-style: dashed; border-color: var(--violet); }
.rel-legend .keys .collab { border-top-style: dashed; border-color: var(--ember); }
.rel-legend .keys .veto   { border-top-style: dotted; border-color: var(--veto); }
.rel-legend .keys .link   { border-top-style: dotted; border-color: var(--link); }
.rel-legend .rels { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 9px; }
.rel-legend .rels li { font-size: 10.5px; line-height: 1.5; margin-bottom: 7px; color: var(--ink-dim); }
.rel-legend .rels b { color: #ffcdb8; font-weight: 600; }

/* ---- view nav (left sidebar) ---- */
.sidebar {
  position: fixed; top: 78px; left: 22px; bottom: 22px; z-index: 7;
  width: 208px; display: flex; flex-direction: column; gap: 4px;
  padding: 10px; overflow-y: auto;
  background: rgba(12, 15, 24, 0.8); border: 1px solid var(--line);
  border-radius: 14px; backdrop-filter: blur(8px);
}
.side-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .3px;
  color: var(--ink-dim); background: transparent; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; transition: all .15s ease;
}
.side-item:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.side-item.active {
  color: #05060a; background: linear-gradient(120deg, var(--gold), #ffe6a3);
  box-shadow: 0 0 18px -4px var(--gold);
}
.side-group {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line); margin-left: 4px; padding-left: 4px;
}
.side-sub { padding-left: 26px; font-size: 11.5px; }
.side-spacer { flex: 1; }

/* ---- views ---- */
.view { display: none; }
body[data-view="graph"] #stage         { display: block; }
body[data-view="chat"]  #chatView      { display: flex; }
body[data-view="town"]   #townView     { display: flex; }
body[data-view="castle"] #castleView   { display: flex; }
body[data-view="mine"]   #mineView     { display: flex; }
body[data-view="library"] #libraryView { display: flex; }
body[data-view="workshop"] #workshopView { display: flex; }
body[data-view="treasury"] #treasuryRoomView { display: flex; }
body[data-view="treasury-console"] #treasuryView { display: flex; }

/* ---- Town / Castle / Mine / Library / Workshop / Treasury-room image dashboard ---- */
.town, .castle, .mine, .library, .workshop, .treasury-room {
  position: absolute; inset: 0; z-index: 1;
  align-items: center; justify-content: center;
  padding: 92px 24px 28px 272px;  /* left padding clears the sidebar */
  overflow: auto;
}
.map-wrap {
  /* ขยายเต็มความสูงจอ แต่ไม่เกินขนาด native ของ art (ห้อง 4:3 = 1448×1086) */
  position: relative; width: 100%;
  max-width: min(1448px, calc((100vh - 130px) * 1.333));
  margin: auto;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 60px -20px #000, inset 0 0 0 1px rgba(255,255,255,0.03);
  background: #1c3a1e; /* graceful fallback before art loads */
}
/* town map เป็น 16:9 (1672×941) กว้างกว่าห้อง */
.town .map-wrap { max-width: min(1672px, calc((100vh - 130px) * 1.777)); }
.map-img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
/* clickable building / character overlays — positioned in % so they scale with the image */
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  background: transparent; border: 2px solid transparent; border-radius: 12px;
  cursor: pointer; padding: 0; z-index: 2;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hotspot:hover, .hotspot:focus-visible {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  box-shadow: 0 0 26px -6px var(--gold);
  outline: none;
}
.hotspot-label {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; white-space: nowrap;
  color: #05060a; background: linear-gradient(120deg, var(--gold), #ffe6a3);
  padding: 3px 9px; border-radius: 7px; opacity: 0; pointer-events: none;
  transition: opacity .15s ease; box-shadow: 0 4px 14px -4px #000;
}
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; }
/* visible character sprite sitting inside its hotspot (throne / desk) */
.hotspot .sprite {
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
  transition: transform .15s ease;
  pointer-events: none;
}
.hotspot:hover .sprite, .hotspot:focus-visible .sprite { transform: translateY(-4px) scale(1.04); }
/* castle hotspot on the town map — a standalone castle cut-out overlaid
   seamlessly on top of the map (tuned to castle-icon.png crop) */
.castle-spot { left: 48.8%; top: 15.8%; width: 13.6%; height: 21.4%;
  border: 0; border-radius: 0; }
.castle-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px;
  transform-origin: center bottom;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
.castle-spot:hover .castle-icon, .castle-spot:focus-visible .castle-icon {
  transform: scale(1.07);
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 3px var(--gold))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.castle-spot:hover, .castle-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* building overlays on the town map — same hover treatment as the castle */
.bld-spot { border: 0; border-radius: 0; }
.bld-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px;
  transform-origin: center bottom;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), filter .2s ease;
}
.bld-spot:hover .bld-icon, .bld-spot:focus-visible .bld-icon {
  transform: scale(1.07);
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 3px var(--gold))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.bld-spot:hover, .bld-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* per-building position on the town map (tuned to old-dashboard layout) */
.treasury-spot { left: 32.1%; top: 32%;   width: 10.5%; height: 20.7%; }
.library-spot  { left: 62.5%; top: 31.9%; width: 12.3%; height: 19.7%; }
.workshop-spot { left: 16.5%; top: 57.4%; width: 15%;  height: 21.4%; }
.mine-spot     { left: 69%; top: 16%; width: 14%;  height: 16.5%; }
/* gold pile inside the mine room — clickable hotspot that opens the P/L snapshot */
.gold-pile-spot { left: 22.1%; top: 69%; width: 22%; height: 20.3%; border: 0; border-radius: 0; }
.pile-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), filter .2s ease;
}
.gold-pile-spot:hover .pile-icon, .gold-pile-spot:focus-visible .pile-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 8px var(--gold))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.gold-pile-spot:hover, .gold-pile-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* reading stand inside the Grand Library room — clickable hotspot, opens the guild panel */
.library-stand-spot { left: 31.1%; top: 62.6%; width: 8.2%; height: 14.2%; border: 0; border-radius: 0; }
.stand-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), filter .2s ease;
}
.library-stand-spot:hover .stand-icon, .library-stand-spot:focus-visible .stand-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 8px var(--cyan))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.library-stand-spot:hover, .library-stand-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* whiteboard inside the Builder Guild workshop — clickable hotspot, opens the guild panel */
.workshop-board-spot { left: 49.9%; top: 18.9%; width: 16.9%; height: 17%; border: 0; border-radius: 0; }
.board-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), filter .2s ease;
}
.workshop-board-spot:hover .board-icon, .workshop-board-spot:focus-visible .board-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 4px var(--violet)) drop-shadow(0 0 8px var(--violet))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.workshop-board-spot:hover, .workshop-board-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* vault door inside the Treasury Guild room — clickable hotspot, opens Model Allocation console */
.vault-spot { left: 49.7%; top: 16.4%; width: 14.85%; height: 23%; border: 0; border-radius: 0; }
.vault-icon {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), filter .2s ease;
}
.vault-spot:hover .vault-icon, .vault-spot:focus-visible .vault-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 8px var(--gold))
          drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.vault-spot:hover, .vault-spot:focus-visible {
  z-index: 4; background: transparent; box-shadow: none; border-color: transparent;
}
/* walking NPC characters in the throne room — true walk-cycle sheet
   (384x384, 4 cols = frames, 4 rows = down/left/right/up). Square box = square cell. */
.boss-spot { top: 36%; width: 17.25%; height: 23%; left: 49%; animation: walkBoss 13s ease-in-out infinite; }
.aris-spot { top: 59%; width: 16.5%;  height: 22%; left: 29%; animation: walkAris 16s ease-in-out infinite; }
@keyframes walkBoss { 0%, 100% { left: 44%; } 50% { left: 54%; } }
@keyframes walkAris { 0%, 100% { left: 24%; } 50% { left: 34%; } }
/* Aurum walks the right side of the Gold Fang mine room, clear of the gold-pile-spot (left:22.1%/top:69%) */
/* top = เท้า (ยึดจากล่างด้วย transform -100% ด้านล่าง) */
/* positions per Boss's labelled target boxes; uniform scale (ref Ravyn 15.5%×20.5%);
   top = feet line at each box bottom (feet sit on the floor, no float) */
.liora-spot   { top: 43%; width: 15.5%; height: 20.5%; left: 34%; animation: walkLiora   18s ease-in-out infinite; }
@keyframes walkLiora   { 0%, 100% { left: 29%; } 50% { left: 39%; } }
.oryn-spot    { top: 43%; width: 15.5%; height: 20.5%; left: 58%; animation: walkOryn    17s ease-in-out infinite; }
@keyframes walkOryn    { 0%, 100% { left: 53%; } 50% { left: 63%; } }
.ravyn-spot   { top: 82%; width: 15.5%; height: 20.5%; left: 38%; animation: walkRavyn   16s ease-in-out infinite; }
@keyframes walkRavyn   { 0%, 100% { left: 33%; } 50% { left: 43%; } }
.aurum-spot   { top: 75%; width: 15.5%; height: 20.5%; left: 61%; animation: walkAurum   14s ease-in-out infinite; }
@keyframes walkAurum   { 0%, 100% { left: 56%; } 50% { left: 66%; } }
.stratos-spot { top: 66%; width: 15.5%; height: 20.5%; left: 78%; animation: walkStratos 15s ease-in-out infinite; }
@keyframes walkStratos { 0%, 100% { left: 73%; } 50% { left: 83%; } }
/* anchor mine walkers at their feet (bottom of sprite = top coordinate) */
.mine .aurum-spot, .mine .ravyn-spot, .mine .stratos-spot, .mine .oryn-spot, .mine .liora-spot {
  transform: translate(-50%, -100%);
}
/* small live-activity dot on the sprite itself — reuses .dot.working/idle/dormant (styles.css:84-89),
   toggled by JS from the real Gold Fang push data (app.js fetchGoldFangStatus) */
.walker-live-dot { position: absolute; top: 4%; right: 10%; z-index: 2; pointer-events: none; }
.walker {
  width: 100%; height: 100%; display: block; pointer-events: none;
  background-size: 400% 400%; background-repeat: no-repeat;
  background-position: 0% 66.667%;                 /* frame 0, right-facing row */
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.boss-spot .walker { background-image: url("assets/boss-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 13s steps(1, end) infinite; }
.aris-spot .walker { background-image: url("assets/aris-walk.png");
  animation: walkFrames 1s steps(1, end) infinite, faceWalk 16s steps(1, end) infinite; }
/* GF sheets normalized by tools/fix-walk.mjs to the Boss layout
   (row1 = left-facing, row2 = right-facing) → same faceWalk row-switch as Boss/Aris,
   duration matches each character's travel animation. */
.aurum-spot  .walker { background-image: url("assets/aurum-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 14s steps(1, end) infinite; }
.ravyn-spot  .walker { background-image: url("assets/ravyn-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 16s steps(1, end) infinite; }
.stratos-spot .walker { background-image: url("assets/stratos-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 15s steps(1, end) infinite; }
.oryn-spot   .walker { background-image: url("assets/oryn-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 17s steps(1, end) infinite; }
.liora-spot  .walker { background-image: url("assets/liora-walk.png");
  animation: walkFrames .9s steps(1, end) infinite, faceWalk 18s steps(1, end) infinite; }
/* cycle the 4 walk frames (legs move) */
@keyframes walkFrames {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 33.333%; }
  50% { background-position-x: 66.667%; }
  75% { background-position-x: 100%; }
}
/* face the way you walk: right-row (row 2) → left-row (row 1) */
@keyframes faceWalk {
  0%  { background-position-y: 66.667%; }
  50% { background-position-y: 33.333%; }
}
/* hover/focus: pause walking + glow around the silhouette (no rectangle box) */
.boss-spot:hover, .aris-spot:hover, .aurum-spot:hover, .ravyn-spot:hover, .stratos-spot:hover, .oryn-spot:hover, .liora-spot:hover,
.boss-spot:focus-visible, .aris-spot:focus-visible, .aurum-spot:focus-visible, .ravyn-spot:focus-visible, .stratos-spot:focus-visible, .oryn-spot:focus-visible, .liora-spot:focus-visible {
  animation-play-state: paused; background: transparent; box-shadow: none; border-color: transparent;
}
.boss-spot:hover .walker, .aris-spot:hover .walker, .aurum-spot:hover .walker, .ravyn-spot:hover .walker, .stratos-spot:hover .walker, .oryn-spot:hover .walker, .liora-spot:hover .walker,
.boss-spot:focus-visible .walker, .aris-spot:focus-visible .walker, .aurum-spot:focus-visible .walker, .ravyn-spot:focus-visible .walker, .stratos-spot:focus-visible .walker, .oryn-spot:focus-visible .walker, .liora-spot:focus-visible .walker {
  animation-play-state: paused;
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 3px var(--gold)) drop-shadow(0 3px 5px rgba(0,0,0,.55));
}
.castle-back {
  position: absolute; top: 86px; left: 272px; z-index: 3;  /* clears the sidebar */
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px;
  color: var(--ink); background: rgba(12,15,24,0.82); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; backdrop-filter: blur(8px);
  transition: all .15s ease;
}
.castle-back:hover { color: #05060a; background: linear-gradient(120deg, var(--gold), #ffe6a3); }
/* character portrait in the detail panel */
.p-portrait {
  width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated;
  border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent, var(--cyan)) 12%, #0b0e16);
  margin-bottom: 12px;
}

/* provider code prefix on the model badge */
.badge .prov {
  font-size: 8px; margin-right: 4px; padding: 1px 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink); letter-spacing: .3px; vertical-align: middle;
}

/* ---- Aris chat console ---- */
.chat {
  position: absolute; inset: 0; z-index: 1;
  align-items: center; justify-content: center;
  padding: 92px 24px 28px;
}
.chat-panel {
  width: 100%; max-width: 760px; height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18,22,34,0.92), rgba(8,10,18,0.95));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 60px -20px #000, 0 0 30px -10px rgba(201,182,255,0.25);
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: rgba(201,182,255,0.05);
}
.chat-avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  font-size: 18px; border-radius: 10px; color: #c9b6ff;
  background: rgba(201,182,255,0.12); border: 1px solid rgba(201,182,255,0.35);
  box-shadow: 0 0 16px -4px #c9b6ff;
}
.chat-name { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.chat-role { font-size: 11px; color: var(--ink-dim); display: flex; align-items: center; gap: 6px; }
.chat-clear {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; transition: all .15s ease;
}
.chat-clear:hover { color: var(--ink); border-color: var(--ink-dim); }

.chat-log {
  flex: 1; overflow-y: auto; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.msg { display: flex; gap: 10px; max-width: 86%; }
.msg-ava {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  font-size: 13px; border-radius: 8px;
}
.msg-bubble {
  padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.msg b { color: #ffe6a3; font-weight: 600; }
.msg.aris { align-self: flex-start; }
.msg.aris .msg-ava { color: #c9b6ff; background: rgba(201,182,255,0.12); border: 1px solid rgba(201,182,255,0.3); }
.msg.aris .msg-bubble { background: rgba(201,182,255,0.08); border: 1px solid rgba(201,182,255,0.18); border-top-left-radius: 3px; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .msg-ava { color: var(--gold); background: rgba(242,193,78,0.12); border: 1px solid rgba(242,193,78,0.3); }
.msg.me .msg-bubble { background: rgba(242,193,78,0.10); border: 1px solid rgba(242,193,78,0.2); border-top-right-radius: 3px; }
.msg.typing .msg-bubble { color: var(--ink-dim); font-style: italic; }
/* ปุ่มปิดงาน (เก็บเข้า log + เคลียร์จอ) ใต้ข้อความที่ส่งเข้า bot สำเร็จ */
.chat-closejob {
  display: block; margin-top: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: #05060a;
  background: linear-gradient(120deg, #6fe3a0, #3ecf8e); border: 0; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; transition: filter .15s ease;
}
.chat-closejob:hover { filter: brightness(1.08); }
.chat-closejob:disabled { opacity: .6; cursor: default; }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 10px; }
.chip {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(255,255,255,0.06); }

/* แถบรูปที่วางรอส่ง (เหนือช่องพิมพ์) */
.chat-img-strip { display: none; gap: 8px; padding: 10px 18px 0; flex-wrap: wrap; }
.chat-img-thumb {
  position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(0,0,0,0.3);
}
.chat-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-img-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 6px; border: 0; cursor: pointer; font-size: 11px; line-height: 1;
  color: #fff; background: rgba(0,0,0,0.65);
}
.chat-img-x:hover { background: rgba(220,60,60,0.85); }
/* รูปใน bubble ข้อความ */
.msg-img {
  display: block; max-width: 240px; max-height: 180px; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 6px; object-fit: contain; background: #000;
}
.chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.chat-input {
  flex: 1; font-family: var(--font); font-size: 14px; color: var(--ink);
  background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color .15s ease;
  /* textarea วางข้อความยาว/หลายบรรทัดได้ — โตตามเนื้อหา cap 160px แล้วเลื่อนภายใน */
  resize: none; overflow-y: auto; max-height: 160px; line-height: 1.5;
}
.chat-input:focus { border-color: rgba(201,182,255,0.5); }
.chat-input::placeholder { color: var(--ink-faint); }
.chat-send {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: #05060a;
  background: linear-gradient(120deg, #c9b6ff, #a78bfa); border: 0; border-radius: 10px;
  padding: 0 20px; height: 45px; flex: none; cursor: pointer; transition: filter .15s ease;
}
.chat-send:hover { filter: brightness(1.1); }

/* export modal (เปิดจากคำสั่งแชท Aris "export data.js") */
.export-modal {
  position: fixed; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(2,3,6,0.6); backdrop-filter: blur(4px);
}
.export-modal.open { display: flex; }
.export-box {
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 0;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px -20px #000;
}
.export-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-weight: 700; letter-spacing: .5px;
}
.export-close { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.export-close:hover { color: var(--ink); }
.export-text {
  width: 100%; height: 320px; resize: none; border: 0; outline: none;
  background: #05060a; color: var(--ink); font-family: var(--mono); font-size: 12px; line-height: 1.6;
  padding: 16px 18px;
}
.export-actions { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.export-copy {
  font-family: var(--mono); font-size: 12px; font-weight: 600; cursor: pointer; color: #05060a;
  background: linear-gradient(120deg, var(--gold), #ffe6a3); border: 0; border-radius: 8px; padding: 8px 16px;
}
.export-reset {
  font-family: var(--mono); font-size: 11px; cursor: pointer; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
.export-reset:hover { color: var(--st-dormant); border-color: var(--ink-dim); }
.export-hint { font-size: 11px; color: var(--ink-dim); }

/* shared panel title/subtitle (ใช้โดยหัวแท็บ Treasury Guild) */
.prop-title { font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.prop-subtitle { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }

/* ---- Treasury Guild · Model Allocation view ---- */
.treasury-view {
  position: absolute; inset: 0; z-index: 1;
  align-items: center; justify-content: center;
  padding: 132px 24px 28px 272px;  /* left padding clears the sidebar, top clears the back button */
}
.tre-panel {
  width: 100%; max-width: 980px; height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18,22,34,0.92), rgba(8,10,18,0.95));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 60px -20px #000; overflow: hidden;
}
.tre-head { padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(242,193,78,0.05); }
.tre-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.tre-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tre-stat {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; background: rgba(255,255,255,0.02);
}
.tre-stat b { color: var(--ink); font-size: 14px; }
.tre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tre-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: rgba(255,255,255,0.02); border-left: 3px solid var(--st-idle);
}
.tre-card.tier-high { border-left-color: var(--st-dormant); }
.tre-card.tier-mid  { border-left-color: var(--st-idle); }
.tre-card.tier-low  { border-left-color: var(--st-working); }
.tre-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tre-model { font-weight: 700; font-size: 15px; }
.tre-prov { font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(155,123,255,0.18); color: var(--ink); }
.tre-tier { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }
.tre-count { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); }
.tre-agents { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.tre-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--ink); border: 1px solid var(--line); }
.tre-pc { font-size: 12px; line-height: 1.5; margin-top: 4px; color: var(--ink); }
.tre-pc .lbl { font-family: var(--mono); font-size: 10px; margin-right: 6px; }
.tre-pc.pro .lbl { color: var(--st-working); }
.tre-pc.con .lbl { color: var(--gold); }
.tre-empty { color: var(--ink-dim); font-size: 13px; text-align: center; padding: 40px 0; }
/* freshness badge */
.tre-fresh-row { margin: 2px 0 8px; }
.tre-fresh { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); }
.tre-fresh.is-fresh { color: var(--st-working); border-color: color-mix(in srgb, var(--st-working) 45%, transparent); }
.tre-fresh.is-stale { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.tre-fresh.is-none  { color: var(--ink-faint); }
/* Right-Sizing review */
.tre-review { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.tre-review-head { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }
.tre-rrow {
  display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.9fr; gap: 10px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.02); border-left: 3px solid var(--st-working);
}
.tre-rrow.flag-up   { border-left-color: var(--st-dormant); }
.tre-rrow.flag-down { border-left-color: var(--gold); }
.tre-rrow.flag-ok   { border-left-color: var(--st-working); opacity: .8; }
.tre-rname b { font-size: 13px; }
.tre-rrole { color: var(--ink-dim); font-size: 11px; }
.tre-rmodel { font-size: 12px; }
.tre-rusage { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
.tre-rhint { font-size: 11.5px; color: var(--ink); }
.tre-rrow.flag-up .tre-rhint   { color: color-mix(in srgb, var(--st-dormant) 70%, var(--ink)); }
.tre-rrow.flag-down .tre-rhint { color: color-mix(in srgb, var(--gold) 78%, var(--ink)); }
@media (max-width: 720px) { .tre-rrow { grid-template-columns: 1fr; gap: 3px; } }

/* =========================================================================
   RESPONSIVE — tablet + mobile (touch-friendly, safe-area aware, PWA)
   ========================================================================= */

/* ---- tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .guilds-row { gap: 28px; }
  .rel-legend { max-height: 44vh; width: 220px; }
  .panel { width: 420px; }
}

/* ---- phone / small tablet (≤768px) ---- */
@media (max-width: 768px) {
  /* allow the document to scroll on touch instead of locking it */
  html, body { overflow: auto; -webkit-text-size-adjust: 100%; }

  /* HUD becomes a full-width top app-bar so scrolling cards stay readable */
  .hud {
    top: 0; left: 0; right: 0;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: rgba(8, 10, 18, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    z-index: 8;
  }
  .hud-title { font-size: 18px; letter-spacing: 1px; }
  .hud-sub   { font-size: 11px; margin: 0; }
  .legend    { display: none; }           /* freed up for small screens */

  /* connector wires become vertical clutter in a single column → hide them */
  .wires { display: none; }
  /* the relationship legend overlaps the canvas on small screens */
  .rel-legend { display: none; }

  /* sidebar becomes a bottom navigation bar */
  .sidebar {
    top: auto; left: 0; right: 0; bottom: 0; height: auto;
    width: 100%; flex-direction: row; justify-content: space-around; gap: 2px;
    border-radius: 0; border: 0; border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(8, 10, 18, 0.95);
    overflow-x: auto; overflow-y: visible;
  }
  .side-group { display: contents; }       /* flatten the group into the row */
  .side-item {
    flex: 1; flex-direction: column; justify-content: center; text-align: center; gap: 2px;
    min-height: 44px; font-size: 16px;
    padding: 6px 2px; white-space: nowrap;
  }
  .side-item span { display: none; }       /* icon-only on the bottom bar */
  .side-sub { padding-left: 2px; font-size: 16px; }
  .side-spacer { display: none; }

  /* graph canvas: tighter padding, room above (top bar) + below (nav) */
  .stage { padding: calc(60px + env(safe-area-inset-top)) 16px calc(80px + env(safe-area-inset-bottom)); }
  .guilds-row { flex-direction: column; align-items: center; gap: 36px; margin-top: 18px; }

  /* node / guild cards fit a phone width */
  .node, .node.lead { width: min(86vw, 300px); }
  .guild-head { width: min(86vw, 300px); }

  /* detail panel = full-screen drawer */
  .panel, .panel.panel-card {
    width: 100%; max-width: 100%;
    padding: calc(20px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  }
  .p-name { font-size: 24px; }
  /* character card: stack portrait over info */
  .pc-top { grid-template-columns: 1fr; }
  .pc-portrait-wrap { max-width: 240px; margin: 0 auto; }
  /* Aris window = full screen on mobile — chibi ย่อไว้บน แชทเต็มล่าง */
  .aris-window {
    top: 0; left: 0; transform: translateY(100%);
    width: 100%; height: 100%; border-radius: 0;
  }
  .aris-window.open { transform: translateY(0); }
  .aw-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 0; }
  .aw-left {
    flex-direction: row; justify-content: flex-start; gap: 14px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .aw-chibi { width: 62px; max-height: none; animation: none; }
  .aw-frame { text-align: left; padding: 10px 12px; }
  .aw-name { font-size: 18px; margin-bottom: 6px; }
  .aw-chips { justify-content: flex-start; }
  .aw-right .chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* chat: full width, input lifted above bottom nav */
  .chat-panel {
    max-width: 100%;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .chat-head { padding-left: 14px; padding-right: 14px; }
  .msg { max-width: 92%; }
  .chat-input { font-size: 16px; }       /* ≥16px stops iOS auto-zoom on focus */

  /* treasury: single column, lifted above bottom nav, top clears the back button */
  .treasury-view { padding: calc(96px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom)); }
  .tre-panel {
    max-width: 100%;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .tre-grid { grid-template-columns: 1fr; }

  /* town / castle / mine / library / workshop / treasury-room: fit between top bar and bottom nav */
  .town, .castle, .mine, .library, .workshop, .treasury-room {
    padding: calc(56px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom));
    align-items: flex-start;
  }
  .castle-back { top: calc(62px + env(safe-area-inset-top)); left: 12px; }

  /* P/L snapshot modal: near full-width on phones, fewer grid columns so stats don't crowd */
  .pnl-modal { width: 94vw; max-height: 80vh; }
  .pnl-box { padding: 20px 14px 16px; max-height: 80vh; }
  .pnl-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .pnl-h { font-size: 8.5px; }
  .pnl-v { font-size: 14px; }
}

/* ---- very small phones (≤420px) ---- */
@media (max-width: 420px) {
  .hud-title { font-size: 16px; }
  .tab { font-size: 11px; padding: 8px 4px; }
}