:root{
  --void:#0c0a18;
  --void-2:#161029;
  --void-3:#1f1740;
  --paper:#ece6f7;
  --muted:#9a90b4;
  --line:#2e2552;
  --amber:#cda23a;
  --amber-soft:#f0d27a;
  --amber-dim:rgba(205,162,58,.12);
  --cinnabar:#d05a8e;
  --jade:#7fb59a;
  --blue:#7fa6d8;
  --violet:#b49bff;
  --violet-deep:#3a2a6b;
  --cyan:#5fe3e0;
  --cyan-deep:#1b6b78;
  --ash:#cdc7dc;
  --font-vn:'Noto Serif','Times New Roman',serif;
  --font-display:'Noto Serif Display','Noto Serif','Times New Roman',serif;
  --font-han:'Noto Serif TC','Noto Serif CJK TC','Noto Serif SC','Songti TC','PMingLiU',serif;
  --font-stars-major:'Lora', var(--font-display);
  --font-stars-minor:'Be Vietnam Pro', sans-serif;
  --font-chat:'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  min-height:100vh;
  background:
    linear-gradient(90deg, rgba(150,200,255,.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(150,200,255,.02) 1px, transparent 1px),
    linear-gradient(155deg, #0a0a1f 0%, #07091a 56%, #050610 100%);
  background-size:44px 44px, 44px 44px, auto;
  background-attachment:fixed;
  color:var(--paper);
  font-family:var(--font-vn);
  line-height:1.56;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
/* ── Galaxy nebula (animated) ── */
.galaxy-fx{
  position:fixed;
  top:-30%;left:-30%;
  width:160%;height:160%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 24%, rgba(146,92,238,.55) 0%, rgba(96,58,176,.18) 45%, transparent 70%),
    radial-gradient(34% 28% at 78% 18%, rgba(46,196,214,.45) 0%, rgba(30,120,150,.12) 46%, transparent 68%),
    radial-gradient(40% 32% at 84% 82%, rgba(150,74,224,.48) 0%, transparent 66%),
    radial-gradient(34% 30% at 14% 80%, rgba(40,176,200,.40) 0%, transparent 64%),
    radial-gradient(26% 24% at 52% 52%, rgba(120,80,210,.24) 0%, transparent 66%);
  will-change:transform,filter;
  animation:galaxyDrift 18s ease-in-out infinite alternate, galaxyHue 10s linear infinite;
}
@keyframes galaxyDrift{
  0%{transform:translate3d(-6%,-4%,0) scale(1.06) rotate(0deg)}
  50%{transform:translate3d(6%,4%,0) scale(1.22) rotate(6deg)}
  100%{transform:translate3d(-4%,6%,0) scale(1.12) rotate(-4deg)}
}
@keyframes galaxyHue{
  0%{filter:hue-rotate(0deg)}
  50%{filter:hue-rotate(70deg)}
  100%{filter:hue-rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  .galaxy-fx{animation:none}
}
body::after{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--violet) 22%, var(--cyan) 50%, var(--violet) 78%, transparent 100%);
  opacity:.8;
  pointer-events:none;
  z-index:100;
}
a{color:inherit}
.wrap{
  width:min(2048px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:0 clamp(8px,1.2vw,24px);
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
}
.han{font-family:var(--font-han)}

/* ── Topbar ── */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:8px 0;
  flex-shrink:0;
  color:var(--muted);
  font-size:.82rem;
  border-bottom:1px solid rgba(57,65,59,.45);
}
.topbar a{
  text-decoration:none;
  color:var(--amber-soft);
  letter-spacing:.03em;
  transition:color .18s;
}
.topbar a:hover{color:var(--paper)}

/* ── Header: hidden — topbar is sufficient ── */
header{display:none}
.seal{display:none}
.eyebrow{display:none}
h1{display:none}

/* ── Shell ── */
.shell{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:6px;
  align-items:center;
  margin-top:8px;
}
.shell > aside{
  grid-column:1;
  align-self:center;
  overflow:visible;
}
.shell > section{
  grid-column:2;
  align-self:stretch;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ── Panels ── */
.panel{
  background:linear-gradient(180deg, rgba(36,27,62,.96), rgba(20,15,38,.95));
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 20px 52px -26px rgba(0,0,0,.78), 0 0 0 1px rgba(180,155,255,.06);
}
/* Chart panel: stretches to fill section column */
.shell > section > .panel{
  height: calc(100vh - 80px);
  min-height: 920px;
  display:flex;
  flex-direction:column;
}
.shell > section > .panel > .panel-body{
  flex: 1 1 0;
  min-height: 0;
  display:block;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  flex-shrink:0;
  border-bottom:1px solid rgba(39,49,48,.9);
}
.panel-head h2,
.panel-head h3{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:600;
  color:var(--paper);
  letter-spacing:.02em;
}
.panel-body{padding:10px}
.shell > aside .panel-body{padding:14px 14px 16px}

/* ── Form ── */
.form-grid{display:grid;grid-template-columns:1fr;gap:8px}
.field{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.field.full{grid-column:1/-1}
label{
  color:var(--muted);
  font-size:.62rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.field label{
  overflow:visible;
  text-overflow:clip;
}
select,
input[type="text"],
input[type="time"],
input[type="number"]{
  width:100%;
  min-height:30px;
  border:1px solid rgba(57,65,59,.8);
  border-radius:5px;
  background:rgba(12,16,16,.7);
  color:var(--paper);
  font-family:var(--font-vn);
  font-size:.8rem;
  padding:4px 8px;
  transition:border-color .18s, box-shadow .18s;
}
select:focus,
input:focus{
  outline:none;
  border-color:rgba(98,172,130,.55);
  box-shadow:0 0 0 2px rgba(98,172,130,.1);
}

/* ── Toggles ── */
.chart-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* Bố cục gọn dùng KHI chụp ảnh (html2canvas): sao tốt/xấu xếp sát nhau bằng flex
   thay vì grid 1fr/1fr (tránh 2 cột cách xa nhau & lỗi render grid của html2canvas). */
.chart-grid.capture-compact .stars-layer{
  display:flex;
  align-items:flex-start;
  gap:0 7px;
}
.chart-grid.capture-compact .stars-good,
.chart-grid.capture-compact .stars-bad{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.chart-grid.capture-compact .stars-bad{padding-left:7px}
.chart-grid.capture-compact .star{max-width:none}
/* Ô ôm sát nội dung khi chụp -> bớt khoảng trống, lá số gọn & cao vừa phải */
.chart-grid.capture-compact{gap:3px;grid-template-rows:repeat(4,minmax(0,auto))}
.chart-grid.capture-compact .palace-cell{min-height:0}
.chart-grid.capture-compact .palace-header{padding:2px 6px 1px}
.chart-grid.capture-compact .stars{padding:1px 5px 3px;flex:0 0 auto}
.chart-grid.capture-compact .palace-meta{margin-top:2px}

/* Ảnh lá số hiển thị thay lưới live trên mobile (chạm để phóng to) */
.chart-image-mobile{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  cursor:zoom-in;
}
.chart-image-mobile[hidden]{display:none}
.chart-image-hint{
  display:none;
  margin-top:7px;
  text-align:center;
  color:var(--amber-soft);
  font-size:.72rem;
  letter-spacing:.02em;
  opacity:.8;
}
/* Chỉ hiện gợi ý phóng to trên mobile */
@media(max-width:700px){.chart-image-hint{display:block}}

/* ── Trình xem lá số dạng ảnh (phóng to / kéo) ── */
.image-viewer{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  background:rgba(8,6,16,.97);
  backdrop-filter:blur(2px);
}
.image-viewer[hidden]{display:none}
.iv-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.iv-hint{color:var(--muted);font-size:.72rem;letter-spacing:.02em}
.iv-scroll{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pinch-zoom;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px;
}
.iv-scroll img{
  display:block;
  max-width:none;
  height:auto;
  border-radius:6px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8);
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(12,10,24,.55);
  color:var(--amber-soft);
  font-family:var(--font-vn);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:border-color .18s, background .18s, color .18s, opacity .18s;
}
.btn-ghost:hover{
  border-color:var(--amber);
  background:var(--amber-dim);
  color:var(--amber-soft);
}
.btn-ghost:disabled{
  opacity:.7;
  cursor:default;
  color:var(--jade);
  border-color:var(--jade);
}
.school-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:14px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(12,10,24,.5);
}
.school-tab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:6px;
  color:var(--muted);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:color .18s, background .18s;
}
.school-tab input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.school-tab:hover{color:var(--paper)}
.school-tab:has(input:checked){
  color:var(--void);
  background:linear-gradient(180deg, var(--amber-soft), var(--amber));
  box-shadow:0 1px 8px rgba(205,162,58,.25);
}
.toggles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:12px;
}
.toggle{
  display:flex;
  gap:6px;
  align-items:center;
  min-height:28px;
  padding:4px 8px;
  border:1px solid rgba(39,49,48,.9);
  border-radius:5px;
  background:rgba(12,16,16,.5);
  color:var(--paper);
  font-size:.72rem;
  letter-spacing:.03em;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .18s, background .18s;
}
.toggle:hover{
  border-color:rgba(57,65,59,1);
  background:rgba(25,31,30,.7);
}
.toggle input{accent-color:var(--jade);transform:scale(.88)}

/* ── Chart ── */
.chart-scroll{
  height: 100%;
  padding:6px;
  display:flex;
  flex-direction:column;
}
.chart-grid{
  flex:1 0 auto;
  min-height:100%;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, minmax(230px, auto));
  gap:4px;
  align-content:stretch;
}

/* ── Palace Cell ── */
.palace-cell{
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(46,37,82,.9);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(30,23,54,.97), rgba(16,12,30,.97));
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.palace-cell::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(180,155,255,.28) 30%, rgba(95,227,224,.28) 70%, transparent 100%);
  pointer-events:none;
  border-radius:7px 7px 0 0;
}
.zodiac-bg{
  position:absolute;
  right:10px;
  bottom:18px;
  z-index:0;
  pointer-events:none;
  width:clamp(5.3rem, 6.8vw, 9rem);
  height:clamp(4.2rem, 5.7vw, 7.4rem);
  object-fit:contain;
  object-position:center;
  opacity:.22;
  filter:drop-shadow(0 0 20px rgba(95,227,224,.08));
  mix-blend-mode:screen;
  transform:rotate(-8deg);
}
.palace-cell:hover{
  border-color:rgba(140,112,210,.6);
  box-shadow:0 0 0 1px rgba(180,155,255,.1), 0 8px 24px -12px rgba(0,0,0,.6);
}
.palace-cell.is-menh{
  border-color:rgba(140,112,210,.6);
  box-shadow:0 0 0 1px rgba(180,155,255,.16), inset 0 0 44px rgba(120,80,210,.07);
}
.palace-cell.is-menh::before{
  background:linear-gradient(90deg, transparent 0%, var(--violet) 28%, var(--cyan) 50%, var(--violet) 72%, transparent 100%);
  height:2px;
}
.palace-cell.is-than{
  box-shadow:inset 0 0 0 1px rgba(98,172,130,.55);
}
.palace-cell.is-major-fortune{
  border-color:rgba(98,172,130,.52);
}
.palace-cell.is-annual-palace{
  box-shadow:inset 0 0 0 1px rgba(136,188,214,.38);
}
.palace-cell.is-menh.is-annual-palace,
.palace-cell.is-menh.is-major-fortune{
  box-shadow:0 0 0 1px rgba(196,154,53,.12), inset 0 0 0 1px rgba(136,188,214,.24), inset 0 0 40px rgba(196,154,53,.04);
}

/* ── Palace Header ── */
.palace-header{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:3px 6px 2px;
  flex-shrink:0;
  border-bottom:1px solid rgba(39,49,48,.75);
}
.palace-namerow{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  min-width:0;
}
.palace-han{
  font-family:var(--font-han);
  font-size:.74rem;
  color:rgba(196,154,53,.5);
  line-height:1;
}
.palace-vname{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.86rem;
  color:var(--paper);
  letter-spacing:.01em;
  white-space:nowrap;
}
.palace-inforow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:2px;
}
.branch-tag{
  color:var(--amber-soft);
  font-size:.7rem;
  line-height:1;
}
.branch-tag b{
  font-family:var(--font-han);
  font-size:.72rem;
  margin-right:1px;
}
.stem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:17px;
  border-radius:999px;
  background:rgba(111,163,192,.08);
  border:1px solid rgba(111,163,192,.25);
  color:var(--blue);
  font-size:.62rem;
  flex-shrink:0;
}
.mark{
  display:inline-flex;
  align-items:center;
  min-height:14px;
  border-radius:999px;
  border:1px solid currentColor;
  padding:0 4px;
  font-size:.54rem;
  color:var(--jade);
  font-weight:700;
}

/* ── Phi corner ── */
.phi-corner{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:0 6px;
  padding:0 7px 1px;
  flex-shrink:0;
  border:0;
  background:transparent;
  min-height:11px;
  opacity:.78;
}
.phi-chip{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-width:0;
  font-size:.43rem;
  color:rgba(203,183,242,.58);
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
}
.phi-kind{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:0;
  height:auto;
  border:0;
  border-radius:0;
  font-weight:700;
  font-size:.44rem;
  line-height:1;
}
.phi-kind.loc{color:var(--amber-soft)}
.phi-kind.quyen{color:#e89082}
.phi-kind.khoa{color:#9fd5b8}
.phi-kind.ky{color:#c8b4ef}
.phi-star{display:none}
.phi-target{
  flex:0 0 auto;
  color:rgba(141,151,143,.58);
  font-size:.42rem;
}

.palace-major-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:2px;
  margin-left:auto;
  min-width:0;
}
.major-star{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:3px;
  min-height:16px;
  padding:1px 4px;
  border-radius:5px;
  border:1px solid rgba(196,154,53,.2);
  background:rgba(196,154,53,.05);
  cursor:default;
  transition:border-color .18s, background .18s;
}
.major-star:hover{
  border-color:rgba(196,154,53,.4);
  background:rgba(196,154,53,.1);
}
.major-name-row{
  display:flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
  font-family:var(--font-stars-major);
  font-weight:600;
  font-size:.66rem;
  color:var(--amber-soft);
  line-height:1.15;
}
.star-bright{
  display:block;
  text-align:center;
  font-size:.43rem;
  letter-spacing:0;
  color:var(--muted);
  line-height:1;
  padding-left:3px;
  border-left:1px solid rgba(141,151,143,.22);
}

/* Brightness color coding */
.major-star.b-mieu{
  border-color:rgba(196,154,53,.6);
  background:rgba(196,154,53,.1);
}
.major-star.b-mieu .star-bright{color:var(--amber-soft);font-weight:600}
.major-star.b-vuong{
  border-color:rgba(234,203,101,.38);
  background:rgba(234,203,101,.07);
}
.major-star.b-vuong .star-bright{color:#eacb65}
.major-star.b-dac{
  border-color:rgba(98,172,130,.35);
  background:rgba(98,172,130,.07);
}
.major-star.b-dac .star-bright{color:var(--jade)}
.major-star.b-binh{
  border-color:rgba(141,151,143,.22);
  background:rgba(141,151,143,.035);
}
.major-star.b-binh .star-bright{color:rgba(141,151,143,.72)}
.major-star.b-ham{
  border-color:rgba(200,70,58,.32);
  background:rgba(200,70,58,.05);
}
.major-star.b-ham .star-bright{color:var(--cinnabar)}
.major-star.element-kim{
  border-color:rgba(218,222,218,.3);
  background:rgba(218,222,218,.045);
}
.major-star.element-kim .major-name-row{color:#dfe2dc}
.major-star.element-moc{
  border-color:rgba(105,190,116,.3);
  background:rgba(105,190,116,.05);
}
.major-star.element-moc .major-name-row{color:#77d184}
.major-star.element-thuy{
  border-color:rgba(76,142,204,.32);
  background:rgba(37,88,140,.09);
}
.major-star.element-thuy .major-name-row{color:#73b6f2}
.major-star.element-hoa{
  border-color:rgba(224,84,88,.34);
  background:rgba(224,84,88,.065);
}
.major-star.element-hoa .major-name-row{color:#ef6d71}
.major-star.element-tho{
  border-color:rgba(206,166,72,.34);
  background:rgba(147,105,42,.08);
}
.major-star.element-tho .major-name-row{color:#d6ac4f}
.major-star.star-that-sat .major-name-row{
  color:#e4e2db;
  text-shadow:0 0 8px rgba(217,122,112,.18);
}
.major-star.star-that-sat .star-bright{border-left-color:rgba(217,122,112,.28)}
.major-star.star-tham-lang{
  border-color:rgba(84,178,139,.34);
  background:linear-gradient(90deg, rgba(105,190,116,.055), rgba(57,123,181,.065));
}
.major-star.star-tham-lang .major-name-row{color:#78d39a}
.major-star.star-tham-lang .star-bright{border-left-color:rgba(82,154,212,.28)}

.void-diep{
  color:rgba(141,151,143,.45);
  font-style:italic;
  font-size:.6rem;
  align-self:center;
}

/* ── Minor Stars ── */
.stars{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:1px 5px;
  flex:1 0 auto;
  min-height:0;
  overflow:visible;
}
.palace-cell.is-packed .stars{padding-left:4px;padding-right:4px}
.palace-cell.is-overpacked .stars,
.palace-cell.is-ultra-packed .stars{padding:1px 4px 2px}
.stars-layer{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px 8px;
  align-content:start;
  min-width:0;
}
.stars-layer:not(.has-good),
.stars-layer:not(.has-bad){
  grid-template-columns:minmax(0,1fr);
}
.stars-annual-row{
  margin-top:4px;
  padding-top:3px;
  border-top:1px dashed rgba(136,188,214,.32);
}
/* Vạch ngăn natal / sao lưu trong mỗi cột (tốt hoặc xấu) */
.stars-luu-sep{
  display:block;
  height:0;
  margin:2px 1px 1px;
  border-top:1px dashed rgba(95,227,224,.28);
}
.stars-good,
.stars-bad{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px 6px;
  align-content:start;
  min-width:0;
}
.stars-good{
  padding-right:1px;
}
.stars-bad{
  padding-left:7px;
  border-left:1px solid rgba(217,122,112,.22);
}
.stars-layer:not(.has-good) .stars-bad{
  padding-left:0;
  border-left:0;
}
.stars-annual-row .stars-bad{
  border-left-color:rgba(136,188,214,.18);
}
.palace-cell.is-packed .stars-layer{
  gap:1px 7px;
}
.palace-cell.is-overpacked .stars-layer,
.palace-cell.is-ultra-packed .stars-layer{
  gap:1px 7px;
}
.palace-cell.is-packed .stars-good.is-split-packed,
.palace-cell.is-packed .stars-bad.is-split-packed,
.palace-cell.is-packed .stars-good.is-split-dense,
.palace-cell.is-packed .stars-bad.is-split-dense,
.palace-cell.is-overpacked .stars-good.is-split-packed,
.palace-cell.is-overpacked .stars-bad.is-split-packed,
.palace-cell.is-overpacked .stars-good.is-split-dense,
.palace-cell.is-overpacked .stars-bad.is-split-dense,
.palace-cell.is-ultra-packed .stars-good.is-split-packed,
.palace-cell.is-ultra-packed .stars-bad.is-split-packed,
.palace-cell.is-ultra-packed .stars-good.is-split-dense,
.palace-cell.is-ultra-packed .stars-bad.is-split-dense{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px 5px;
}
.star{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-width:0;
  max-width:100%;
  padding:0 2px;
  font-size:.48rem;
  line-height:1.1;
  color:var(--ash);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stars-layer .star{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.stars-annual-row .star{
  opacity:.92;
}
.stars .star{font-size:.46rem;line-height:1.15;font-family:var(--font-stars-minor)}
.palace-cell.is-packed .stars .star{font-size:.39rem;line-height:1.15;font-family:var(--font-stars-minor)}
.palace-cell.is-overpacked .stars .star{font-size:.36rem;line-height:1.1;font-family:var(--font-stars-minor)}
.palace-cell.is-ultra-packed .stars .star{font-size:.34rem;line-height:1.1;font-family:var(--font-stars-minor)}
.palace-cell.is-packed .minor-bright,
.palace-cell.is-packed .star .src{font-size:.32rem}
.palace-cell.is-overpacked .minor-bright,
.palace-cell.is-ultra-packed .minor-bright{font-size:.3rem}
.palace-cell.is-overpacked .star .src,
.palace-cell.is-ultra-packed .star .src{font-size:.3rem}
@media(max-width:1280px){
  .stars-layer,
  .palace-cell.is-overpacked .stars-layer,
  .palace-cell.is-ultra-packed .stars-layer{
    grid-template-columns:minmax(0,1fr);
  }
  .stars-bad{
    padding-left:0;
    padding-top:2px;
    border-left:0;
    border-top:1px solid rgba(217,122,112,.18);
  }
  .stars-annual-row .stars-bad{
    border-top-color:rgba(136,188,214,.18);
  }
  .stars-layer:not(.has-good) .stars-bad{
    padding-top:0;
    border-top:0;
  }
}
.star.soft{color:#9fd5b8}
.star.wealth{color:#f0d878}
.star.move{color:#a9d0e6}
.star.helper{color:#86c8a4}
.star.romance{color:#edafd0}
.star.cycle{color:#9ea49c}
.star.tough{color:#d97a70}
.star.harm{color:#d97a70}
.star.void{color:#b09de0}
.star.hua-star{
  font-weight:700;
}
.star.hua-loc{color:var(--amber-soft)}
.star.hua-quyen{color:#e89082}
.star.hua-khoa{color:#9fd5b8}
.star.hua-ky{color:#c8b4ef}
.star.annual{font-style:italic}
.star.element-kim{color:#d4d5cb}
.star.element-moc{color:#9fd5b8}
.star.element-thuy{color:#a9d0e6}
.star.element-hoa{color:#d97a70}
.star.element-tho{color:#e8c85a}
.star .src{
  color:rgba(136,188,214,.9);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.01em;
}
/* .bright used only in minor star chips (not major-star which uses .star-bright) */
.bright{
  color:rgba(141,151,143,.65);
  font-size:.52rem;
  line-height:1;
}
.minor-bright{
  font-size:.48rem;
  font-weight:700;
  line-height:1;
}
.minor-bright.is-dac{color:var(--jade)}
.minor-bright.is-ham{color:var(--cinnabar)}

/* ── Palace Meta (footer row) ── */
.palace-meta{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px;
  flex-shrink:0;
  padding:1px 6px 3px;
}
.stage{
  display:inline-flex;
  align-items:center;
  min-height:15px;
  border-radius:999px;
  border:1px solid rgba(196,154,53,.25);
  background:rgba(196,154,53,.04);
  color:rgba(234,203,101,.7);
  padding:0 5px;
  font-size:.56rem;
  white-space:nowrap;
}
.stage.element-kim{color:#d4d5cb;border-color:rgba(212,213,203,.25);background:rgba(212,213,203,.04)}
.stage.element-moc{color:#9fd5b8;border-color:rgba(159,213,184,.25);background:rgba(159,213,184,.04)}
.stage.element-thuy{color:#a9d0e6;border-color:rgba(169,208,230,.25);background:rgba(169,208,230,.04)}
.stage.element-hoa{color:#d97a70;border-color:rgba(217,122,112,.25);background:rgba(217,122,112,.04)}
.stage.element-tho{color:#e8c85a;border-color:rgba(232,200,90,.25);background:rgba(232,200,90,.04)}
.fortune-chip,
.flow-chip,
.month-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:15px;
  border-radius:999px;
  border:1px solid rgba(39,49,48,.82);
  background:rgba(12,16,16,.38);
  padding:0 5px;
  font-size:.5rem;
  line-height:1;
  white-space:nowrap;
}
.fortune-chip{
  color:rgba(141,151,143,.74);
}
.fortune-chip.is-active{
  color:#9fd5b8;
  border-color:rgba(79,199,132,.52);
  background:rgba(79,199,132,.08);
  font-weight:700;
}
.flow-chip{
  color:#88bcd6;
  border-color:rgba(136,188,214,.45);
  font-weight:700;
}
.annual-flow{
  color:#9fd5b8;
  border-color:rgba(127,181,154,.48);
  background:rgba(127,181,154,.08);
}
.tai-tue-flow{
  color:var(--amber-soft);
  border-color:rgba(205,162,58,.46);
  background:rgba(205,162,58,.08);
}
.month-chip{
  min-width:21px;
  color:rgba(237,226,203,.68);
}
.month-chip.is-start{
  color:var(--amber-soft);
  border-color:rgba(196,154,53,.42);
  background:rgba(196,154,53,.07);
  font-weight:700;
}

/* ── Hóa ── */
.hua{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:14px;
  border-radius:999px;
  color:#0c1010;
  font-size:.5rem;
  font-weight:800;
  padding:0 3px;
  line-height:1;
}
.hua.Lộc{background:var(--amber-soft)}
.hua.Quyền{background:var(--cinnabar);color:#fff}
.hua.Khoa{background:var(--jade);color:#061008}
.hua.Kỵ{background:#8a6ec4;color:#fff}
.hua.loc{background:var(--amber-soft)}
.hua.quyen{background:var(--cinnabar);color:#fff}
.hua.khoa{background:var(--jade);color:#061008}
.hua.ky{background:#8a6ec4;color:#fff}

/* ── Center panel ── */
.center-panel{
  grid-column:2/4;
  grid-row:2/4;
  position:relative;
  border:1px solid rgba(140,112,210,.28);
  border-radius:7px;
  background:
    radial-gradient(72% 82% at 18% 12%, rgba(180,155,255,.14), transparent 55%),
    radial-gradient(76% 92% at 86% 72%, rgba(95,227,224,.10), transparent 58%),
    linear-gradient(145deg, rgba(12,16,16,.98), rgba(18,14,34,.98) 52%, rgba(10,14,18,.99));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  padding:10px 14px;
  gap:6px;
  box-shadow:inset 0 0 54px rgba(180,155,255,.055), inset 0 0 0 1px rgba(95,227,224,.035);
}
.center-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(240,210,122,.12), transparent),
    repeating-linear-gradient(0deg, rgba(237,226,203,.035) 0 1px, transparent 1px 42px);
  opacity:.28;
}
.center-panel::after{
  content:"紫微";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-52%);
  pointer-events:none;
  font-family:var(--font-han);
  font-size:7rem;
  font-weight:700;
  line-height:1;
  color:rgba(180,155,255,.035);
  letter-spacing:.12em;
}
.center-panel > *{
  position:relative;
  z-index:1;
}
.ci-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}
.ci-seal{
  font-family:var(--font-han);
  font-size:1.8rem;
  color:rgba(180,155,255,.32);
  letter-spacing:0;
  line-height:1;
}
.ci-title{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.ci-title strong{
  font-family:var(--font-display);
  font-size:.96rem;
  line-height:1;
  color:var(--amber-soft);
}
.ci-title span,
.ci-subline{
  color:rgba(141,151,143,.72);
  font-size:.55rem;
  white-space:nowrap;
}
.ci-subline{
  text-align:center;
  padding-bottom:4px;
  border-bottom:1px solid rgba(95,227,224,.12);
}
.ci-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
.ci-card{
  min-width:0;
  border:1px solid rgba(140,112,210,.18);
  border-radius:5px;
  background:
    linear-gradient(135deg, rgba(180,155,255,.085), rgba(95,227,224,.028) 48%, rgba(12,16,16,.32)),
    rgba(12,16,16,.36);
  padding:4px 7px;
  box-shadow:inset 0 1px 0 rgba(237,226,203,.025);
}
.ci-card b{
  display:block;
  color:rgba(178,168,202,.76);
  font-size:.48rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.1;
}
.ci-card span{
  display:block;
  color:var(--amber-soft);
  font-family:var(--font-display);
  font-size:.73rem;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ci-card small{
  display:block;
  color:rgba(157,173,166,.62);
  font-size:.47rem;
  line-height:1.08;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ci-hua-block{
  border-top:1px solid rgba(95,227,224,.11);
  padding-top:5px;
}
.ci-month-block{
  border-top:1px solid rgba(95,227,224,.11);
  padding-top:5px;
}
.ci-section-title{
  color:rgba(178,168,202,.7);
  font-size:.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:3px;
  text-align:center;
}
.ci-hua-list{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  width:100%;
}
.ci-month-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2px 4px;
  width:100%;
}
.ci-hua-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:4px;
  min-height:15px;
  font-size:.54rem;
  color:rgba(237,226,203,.82);
  white-space:nowrap;
}
.ci-hua-item span:nth-child(2){
  overflow:hidden;
  text-overflow:ellipsis;
}
.ci-hua-item small{
  color:rgba(141,151,143,.64);
  font-size:.48rem;
}
.ci-month-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:3px;
  min-height:15px;
  border:1px solid rgba(140,112,210,.12);
  border-radius:5px;
  background:rgba(12,16,16,.20);
  padding:0 4px;
  font-size:.49rem;
  color:rgba(237,226,203,.78);
  white-space:nowrap;
  min-width:0;
}
.ci-month-item b{
  color:var(--amber-soft);
  font-size:.48rem;
  line-height:1;
}
.ci-month-item span{
  overflow:hidden;
  text-overflow:ellipsis;
}
.ci-month-item small{
  color:rgba(141,151,143,.62);
  font-size:.44rem;
}

/* ── Pill ── */
.pill{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  border-radius:999px;
  border:1px solid currentColor;
  padding:1px 8px;
  font-size:.66rem;
  white-space:nowrap;
}
.pill.khoa{color:#9fd5b8}
.empty{color:var(--muted);font-style:italic;font-size:.8rem}

/* ── Footer ── */
footer{
  color:rgba(141,151,143,.45);
  text-align:center;
  padding:4px 0;
  flex-shrink:0;
  font-size:.72rem;
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
footer .han{
  font-size:1rem;
  color:rgba(196,154,53,.25);
}

/* ── Tam hợp hover ── */
.tam-hop-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:8;
  overflow:visible;
}
.tam-hop-lines line{
  stroke:rgba(196,154,53,.5);
  stroke-width:1.5;
  stroke-dasharray:7 5;
  stroke-linecap:round;
  animation:tamHopMarch 1.8s linear infinite;
}
.tam-hop-lines .th-dot{
  fill:rgba(196,154,53,.85);
  filter:drop-shadow(0 0 4px rgba(196,154,53,.55));
}
@keyframes tamHopMarch{
  to{stroke-dashoffset:-24}
}
.palace-cell.th-active{
  border-color:rgba(196,154,53,.72) !important;
  box-shadow:0 0 0 1px rgba(196,154,53,.2), inset 0 0 28px rgba(196,154,53,.07) !important;
  z-index:2;
}
.palace-cell.th-dim{
  opacity:.32;
}
.palace-cell{transition:border-color .15s, box-shadow .15s, opacity .15s;}

/* ── Responsive ── */
@media(max-width:1300px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
}
/* ── Mobile / tablet: natural document flow, chart scale vừa bề ngang ── */
@media(max-width:1060px){
  body{height:auto;overflow:auto}
  .wrap{height:auto;min-height:0;overflow:visible;display:block}
  /* Neutralise the desktop fill-viewport flex bases so panels size to content */
  .shell{
    grid-template-columns:1fr;
    align-items:start;
    height:auto;
    min-height:0;
    overflow:visible;
    gap:12px;
  }
  .shell > aside,.shell > section{grid-column:1;align-self:stretch}
  /* Chart panel grows to fit the whole chart - no internal clipping/collapse */
  .shell > section > .panel{height:auto;min-height:0;overflow:visible}
  .shell > section > .panel > .panel-body{overflow:visible;min-height:0;display:block}
  .chart-scroll{height:auto;min-height:0;padding:8px;display:block}
  .chart-grid{min-height:0;display:grid}
  
  .form-grid,.toggles{grid-template-columns:1fr}
}
@media(max-width:700px){
  .wrap{padding:0 8px}
  .topbar{align-items:flex-start;flex-direction:column;gap:6px}
  .panel-head{flex-wrap:wrap}
  .chart-actions{width:100%}
  .btn-ghost{flex:1 1 0;justify-content:center;font-size:.64rem;padding:6px 4px}
  .field{grid-template-columns:84px minmax(0,1fr)}
  /* Lá số dùng "frame-mode" (khung dọc 864×1296 scale vừa màn hình) — xem khối .frame-mode bên dưới. */
}

/* ── Tablet/mobile: dựng lá số vào khung dọc 864×1296 rồi transform:scale cho vừa màn hình ──
   (class .frame-mode được JS gắn vào #chartGrid khi <=1060px; transform & chiều cao do JS đặt) */
.chart-grid.frame-mode{
  position:absolute;
  top:0;
  left:0;
  width:864px;
  height:1296px;
  min-width:0;
  display:block;
  gap:0;
  padding:0;
  transform-origin:top left;
  background:url("../../khung-la-so.svg") 0 0 / 864px 1296px no-repeat;
}
.chart-grid.frame-mode .tam-hop-lines{display:none}
/* Bỏ filter/blend/xoay của watermark con giáp khi ở frame-mode (transform-scale làm
   các layer hợp thành này bị mờ/răng cưa, lộ rõ ở góc ô). */
.chart-grid.frame-mode .zodiac-bg{filter:none;mix-blend-mode:normal;transform:none;opacity:.14}
.chart-grid.frame-mode .palace-cell{
  position:absolute;
  width:212px;
  height:320px;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:hidden;
}
.chart-grid.frame-mode [data-branch="Tỵ"]  {left:8px;   top:8px}
.chart-grid.frame-mode [data-branch="Ngọ"] {left:220px; top:8px}
.chart-grid.frame-mode [data-branch="Mùi"] {left:432px; top:8px}
.chart-grid.frame-mode [data-branch="Thân"]{left:644px; top:8px}
.chart-grid.frame-mode [data-branch="Thìn"]{left:8px;   top:328px}
.chart-grid.frame-mode [data-branch="Dậu"] {left:644px; top:328px}
.chart-grid.frame-mode [data-branch="Mão"] {left:8px;   top:648px}
.chart-grid.frame-mode [data-branch="Tuất"]{left:644px; top:648px}
.chart-grid.frame-mode [data-branch="Dần"] {left:8px;   top:968px}
.chart-grid.frame-mode [data-branch="Sửu"] {left:220px; top:968px}
.chart-grid.frame-mode [data-branch="Tý"]  {left:432px; top:968px}
.chart-grid.frame-mode [data-branch="Hợi"] {left:644px; top:968px}
.chart-grid.frame-mode .center-panel{
  position:absolute;
  left:220px;
  top:328px;
  width:424px;
  height:640px;
  margin:0;
  border:0;
  border-radius:0;
}
/* Ô frame-mode rộng 212px -> ép lại 2 cột TỐT-trái / XẤU-phải
   (ghi đè rule @media max-width:1280px vốn gộp về 1 cột cho màn hẹp). */
.chart-grid.frame-mode .stars-layer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.chart-grid.frame-mode .stars-layer:not(.has-good),
.chart-grid.frame-mode .stars-layer:not(.has-bad){grid-template-columns:minmax(0,1fr)}
.chart-grid.frame-mode .stars-bad{
  padding-left:6px;
  padding-top:0;
  border-left:1px solid rgba(217,122,112,.28);
  border-top:0;
}
.chart-grid.frame-mode .stars-annual-row .stars-bad{border-left-color:rgba(136,188,214,.22);border-top:0}
.chart-grid.frame-mode .stars-layer:not(.has-good) .stars-bad{padding-left:0;border-left:0}
/* Giữ nguyên cỡ chữ desktop trong frame-mode (cells ~265px đã được canh chuẩn);
   muốn đọc to thì pinch-zoom. Phóng font sẽ làm tràn/đè sao ở cung dày. */

/* ── Chế độ chụp ảnh Mobile (Background AI) ── */
.chart-grid.capture-compact {
  background-image: url('../../assets/bg-mobile.png');
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8) inset;
}

.chart-grid.capture-compact .palace-cell {
  background: rgba(0, 0, 0, 0.4); /* Làm tối nền cung để chữ dễ đọc trên nền vũ trụ */
  backdrop-filter: blur(2px);
  border-color: rgba(255, 255, 255, 0.08);
}

.chart-grid.capture-compact .zodiac-bg {
  opacity: 0.15; /* Giảm mờ hình con giáp ẩn */
}

.chart-grid.capture-compact .center-panel {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Chat luận giải AI (Gemini) - Inline Layout ── */
.chat-section{
  width:100%;max-width:none;margin:24px 0 60px;padding:0;
}
.ai-chat{
  position:relative;z-index:10;font-family:var(--font-chat);
  color:var(--paper);font-size:.92rem;line-height:1.55;letter-spacing:0;
}
.ai-chat-panel{
  display:flex;flex-direction:column;width:100%;min-height:500px;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg, #18122c, #0e0a1c);
  box-shadow:0 10px 40px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(180,155,255,.04);
}
.ai-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 18px;border-bottom:1px solid var(--line);font-size:.88rem;flex-shrink:0;
  background:rgba(255,255,255,0.02);
}
.ai-chat-head strong{font-family:var(--font-chat);font-weight:600;font-size:.98rem;color:var(--amber-soft);line-height:1.25}
.ai-chat-head-actions{display:flex;gap:8px}
.ai-icon-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:rgba(12,10,24,.5);
  color:var(--muted);font-size:.9rem;cursor:pointer;transition:color .15s,border-color .15s;
}
.ai-icon-btn:hover{color:var(--amber-soft);border-color:var(--amber)}
.ai-chat-settings{
  padding:16px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;
  background:rgba(12,10,24,.6);flex-shrink:0;
}
.ai-chat-settings[hidden]{display:none}
.ai-chat-settings label{display:flex;flex-direction:column;gap:6px;font-size:.7rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.ai-chat-settings input{
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:rgba(8,6,16,.8);color:var(--paper);font-size:.88rem;font-family:var(--font-chat);
}
.ai-chat-settings input:focus{outline:none;border-color:var(--amber)}
.ai-settings-row{display:flex;align-items:center;gap:16px;font-size:.8rem}
.ai-settings-row a{color:var(--blue);text-decoration:none}
.ai-mini-btn{
  padding:8px 16px;border-radius:8px;border:1px solid var(--amber);
  background:var(--amber-dim);color:var(--amber-soft);font-size:.8rem;font-weight:600;cursor:pointer;
}
.ai-note{font-size:.7rem;color:var(--muted);line-height:1.5;margin:0}

/* Chat Messages Area */
.ai-chat-msgs{
  flex:1 1 0;min-height:280px;max-height:600px;overflow-y:auto;
  display:flex;flex-direction:column;scrollbar-width:thin;
}
.ai-msg{
  display:flex;gap:14px;padding:18px 20px;
  font-size:.92rem;font-weight:400;line-height:1.58;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.ai-msg-user{background:rgba(255,255,255,0.02)}
.ai-msg-ai{background:transparent}

/* Avatar Icons */
.ai-msg-avatar{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;background:rgba(255,255,255,0.08);
}
.ai-msg-user .ai-msg-avatar{background:var(--amber-dim);border:1px solid rgba(196,154,53,.3)}
.ai-msg-ai .ai-msg-avatar{background:rgba(180,155,255,.1);border:1px solid rgba(180,155,255,.2)}

/* Message Content */
.ai-msg-content{flex:1;min-width:0;color:var(--ash)}
.ai-msg-user .ai-msg-content{color:var(--paper)}
.ai-msg-content p{margin:0 0 .55em}
.ai-msg-content p:last-child{margin-bottom:0}
.ai-msg-content ul{margin:.45em 0;padding-left:1.25em}
.ai-msg-content li{margin:.25em 0}
.ai-msg-content strong{color:var(--amber-soft);font-weight:700}
.ai-msg-content code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px;font-size:.9em;font-family:monospace}

.ai-msg.is-thinking .ai-msg-content{opacity:.7;font-style:italic}
.ai-msg.is-warn{background:rgba(217,122,112,.05);border-bottom-color:rgba(217,122,112,.1)}
.ai-msg.is-warn .ai-msg-content{color:#e6a8a0}

/* Chat Input */
.ai-chat-input{
  display:flex;gap:12px;padding:16px 18px;flex-shrink:0;align-items:flex-end;
  background:rgba(12,10,24,.4);
}
.ai-chat-input textarea{
  flex:1;resize:none;max-height:150px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(8,6,16,.8);color:var(--paper);
  font-size:.9rem;font-family:var(--font-chat);line-height:1.45;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.2);
}
.ai-chat-input textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.ai-send-btn{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;border:1px solid var(--amber);
  background:var(--amber-dim);color:var(--amber-soft);font-size:1.1rem;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;
}
.ai-send-btn:hover:not(:disabled){background:rgba(196,154,53,.25);transform:scale(1.02)}
.ai-send-btn:disabled{opacity:.4;cursor:default;transform:none}

@media(max-width:700px){
  .chat-section{padding:0;margin:20px 0}
  .ai-chat{font-size:.9rem;line-height:1.52}
  .ai-chat-panel{border-radius:0;border-left:none;border-right:none;min-height:560px}
  .ai-chat-head{padding:11px 14px}
  .ai-chat-head strong{font-size:.94rem}
  .ai-msg{padding:14px 12px;gap:10px;font-size:.9rem;line-height:1.54}
  .ai-msg-avatar{width:26px;height:26px;font-size:.92rem}
  .ai-chat-input{padding:10px;gap:10px}
  .ai-chat-input textarea{padding:10px 12px;font-size:1rem;line-height:1.4; /* prevent iOS zoom */}
  .ai-send-btn{width:42px;height:42px;font-size:1.05rem}
}

/* ── Floating Scroll Button ── */
.fab-chat-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:90;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(36,27,62,.9), rgba(20,15,38,.9));
  color:var(--amber-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(180,155,255,.1);
  transition:all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-chat-btn:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:var(--amber);
  background:linear-gradient(135deg, rgba(46,37,82,.95), rgba(26,20,48,.95));
  box-shadow:0 12px 28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(205,162,58,.2);
}
.fab-chat-btn:active{
  transform:translateY(0) scale(0.95);
}
.fab-icon{
  transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-chat-btn.is-up .fab-icon{
  transform:rotate(180deg);
}
@media(max-width:700px){
  .fab-chat-btn{
    right:10px;
    bottom:10px;
    width:42px;
    height:42px;
  }
}