/* Super_T Board (feature.desk_board) — centre column, Luna, and every width (responsive + phone tabs).
   Tokens and shared controls: desk-board.css. Every rule is scoped to :root[data-board]. */
/* #region zone:desk.board.style.center — หัวหุ้น เส้นเทรนด์ แถบเครื่องมือ กราฟ และการ์ดสรุป */
:root[data-board] .chart-card,
:root[data-board] .info-strip {
  border-radius: var(--r-card);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
:root[data-board] .symbol-header {
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 0;
  align-items: center;
}
/* Symmetric head (2026-10-12): every row-1 item shares one centre line; the price, change chip and realtime chip sit on
   it too, the two chips are the same height, and the right buttons are one height. The 20px side padding equals the
   trend bar's side margin below, so logo and ⋯ line up with the bar's outer edges. */
:root[data-board] .sym-price-wrap {
  align-items: center;
}
:root[data-board] .sym-change {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-block: 0;
}
:root[data-board] .board-stock-actions .board-btn,
:root[data-board] .board-stock-actions .icon-btn {
  height: 36px;
}
:root[data-board] .board-stock-actions .icon-btn {
  width: 36px;
}
@media (min-width: 900px) {
  :root[data-board] .sym-note .status-pill {
    height: 28px;
    padding-block: 0;
  }
}
:root[data-board] .sym-ticker {
  font-size: var(--u-text-title);
}
:root[data-board] .sym-price {
  font-size: var(--u-text-display);
}
:root[data-board] .sym-note {
  margin-left: 0;
}
:root[data-board] .board-stock-actions {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* Compact head (owner 2026-10-15): on a wide card the follow / alert / ⋯ buttons sit on the price row instead of
   taking a row of their own, so the chart starts higher. */
@container (min-width: 900px) {
  :root[data-board] .symbol-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  :root[data-board] .board-stock-actions {
    grid-column: auto;
  }
}
:root[data-board] .board-btn svg {
  width: 16px;
  height: 16px;
}
:root[data-board] .board-trend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 var(--sp-5) var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  background: var(--panel2);
  font-size: var(--u-text-sm);
}
/* The stats strip above ends in its own line; keep the trend box off it so the two borders never touch. */
/* `~` not `+`: the hidden #index-notice sits between them in the markup, so `+` never matched and the box touched the line. */
:root[data-board] .symbol-stats:not([hidden]) ~ .board-trend {
  margin-top: var(--sp-3);
}
/* One left edge down the card: stat cells, the trend box and the toolbar share the header's 20px side inset. */
:root[data-board] .symbol-stat {
  padding-inline: var(--sp-5) var(--sp-3);
}
:root[data-board] .board-trend-why {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--text);
  line-height: 1.55;
}
:root[data-board] .board-trend-why span {
  color: var(--muted);
}
:root[data-board] .board-trend-src {
  color: var(--faint);
  font-size: var(--u-text-xs);
  white-space: nowrap;
}
/* Mouse: the trend box is one compact row; a long summary ends in an ellipsis (full text in its tooltip). */
@media (hover: hover) and (pointer: fine) {
  :root[data-board] .board-trend {
    flex-wrap: nowrap;
    padding-block: 6px;
  }
  :root[data-board] .board-trend-why {
    flex: 1 1 0;
    overflow: hidden;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root[data-board] .board-trend .desk-help-btn {
    margin-left: 0;
  }
}
:root[data-board] .chart-toolbar {
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--line);
}
:root[data-board] .chart-legend {
  font-variant-numeric: tabular-nums;
}
:root[data-board] .strip-tab.active {
  color: var(--text);
}
:root[data-board] .strip-tab[data-strip-tab='luna'] {
  display: none;
}
:root[data-board] .board-votes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  line-height: 1.5;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--u-text-sm);
}
:root[data-board] .board-votes-grid > .stamp {
  align-self: start;
  margin-top: 1px;
}
:root[data-board] .board-votes-grid .rule {
  color: var(--muted);
}
:root[data-board] .board-votes-grid .rule b {
  color: var(--text);
  font-weight: 600;
}
:root[data-board] .board-votes h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* #endregion */
/* #region zone:desk.board.style.stock-compact — หัวหุ้นและปุ่มแบบกะทัดรัด */
:root[data-board] .symbol-header {
  grid-template-columns: auto minmax(0, max-content) auto 1fr;
}
:root[data-board] .sym-price-wrap {
  justify-self: start;
}
:root[data-board] .board-stock-actions {
  grid-column: auto;
}
:root[data-board] .board-stock-actions .is-pinned svg {
  fill: currentColor;
}
@media (max-width: 899px) {
  :root[data-board] .symbol-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  :root[data-board] .sym-price-wrap {
    grid-column: 2;
    justify-self: start;
  }
  :root[data-board] .board-stock-actions {
    grid-column: 1 / -1;
  }
}
/* #endregion */

/* #region zone:desk.board.style.center-fill — การ์ดแท็บใต้กราฟสูงพอดีเนื้อหา ไม่เหลือที่ว่างด้านล่าง */
/* Owner 2026-10-20 "ขยายการ์ดตรงกลางหน่อย": a long left column made the page taller than the centre column and left
   dead space under the tabbed card. From 900px the card is one screen tall (--side-h, like the chat column) and sticks
   under the header while the page scrolls on (the centre column stretches to the grid row so it has room to stick), so
   the space under it is never empty; its panel scrolls inside (the 44vh cap is lifted here only). The chart card is
   untouched; phones (<900) keep the page-scrolling summary. */
@media (min-width: 900px) {
  :root[data-board] .main-col {
    align-self: stretch;
  }
  /* Every tab sizes the card to its content (up to one screen, then the panel scrolls), so no tab leaves a blank slab
     under its last row; width stays fluid from the grid. */
  :root[data-board] .main-col > .info-strip {
    position: sticky;
    top: var(--side-top);
    flex: none;
    height: auto;
    min-height: 0;
    max-height: var(--side-h);
  }
  :root[data-board] .main-col > .info-strip > .strip-panel {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
  }
  /* แผนเทรด used to grow with the page (desk-trade-plan.css); inside the one-screen card it scrolls like the rest. */
  :root[data-board] .info-strip > #strip-panel-plan {
    overflow-y: auto;
  }
}
/* #endregion */

/* #region zone:desk.board.style.luna — คอลัมน์ Luna และแผ่นข้าง 900–1279px */
:root[data-board] .chat-card {
  border-radius: var(--r-card);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
:root[data-board] .chat-resize-handle {
  display: none;
}
:root[data-board] .chat-msg.user {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--panel);
  border-radius: 12px 12px 4px 12px;
}
:root[data-board][data-theme='dark'] .chat-msg.user {
  background: var(--acc-soft);
  border-color: var(--acc-ring);
  color: var(--text);
}
:root[data-board] .chat-msg.bot {
  border-radius: 4px 12px 12px 12px;
}
:root[data-board] .chat-msg {
  font-size: var(--u-text-label);
}
:root[data-board] .board-luna-scrim {
  display: none;
}
/* #endregion */

/* #region zone:desk.board.style.responsive — ทุกความกว้าง: 3 ช่อง → 2 ช่อง + แผ่น Luna → แท็บมือถือ */
@media (max-width: 1439px) {
  :root[data-board] .app-shell {
    --wl-w: 300px;
    --chat-w: 340px;
  }
}
@media (min-width: 900px) and (max-width: 1279px) {
  :root[data-board] .app-shell {
    --wl-w: 300px;
  }
  :root[data-board] .app-grid {
    grid-template-columns: var(--wl-w) minmax(0, 1fr);
  }
  :root[data-board] .board-luna-btn {
    display: inline-flex;
  }
  :root[data-board] .chat-col {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    width: min(400px, 92vw);
    height: auto;
    max-height: none;
    padding: var(--sp-3);
    transform: translateX(105%);
    visibility: hidden;
    transition:
      transform 0.3s var(--ease-out),
      visibility 0s linear 0.3s;
  }
  :root[data-board] .app-shell.luna-open .chat-col {
    transform: none;
    visibility: visible;
    transition: transform 0.3s var(--ease-out);
  }
  :root[data-board] .chat-col .chat-card-sub {
    display: none;
  }
  :root[data-board] .chat-col .chat-card {
    height: 100%;
    box-shadow: var(--pop-shadow);
  }
  :root[data-board] .board-luna-close {
    display: inline-flex !important;
  }
  :root[data-board] .app-shell.luna-open .board-luna-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    border: 0;
    padding: 0;
    background: var(--scrim);
    animation: stFade var(--dur-slow) var(--ease-out);
  }
  :root[data-board] .regime-note {
    display: none;
  }
}
@media (min-width: 1280px), (max-width: 899px) {
  :root[data-board] .board-luna-close {
    display: none !important;
  }
}
@keyframes stFade {
  from {
    opacity: 0;
  }
}
@media (max-width: 1099px) and (min-width: 900px) {
  :root[data-board] .app-shell {
    --wl-w: 280px;
  }
  :root[data-board] .regime-fact:nth-child(n + 3) {
    display: none;
  }
}
@media (max-width: 899px) {
  :root[data-board] .app-shell {
    --head-h: 56px;
  }
  :root[data-board] .app-shell:has(> #regime-strip:not([hidden])) {
    --board-band-h: 40px;
  }
  :root[data-board] .app-header {
    height: 56px;
    padding: 0 var(--sp-4);
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  :root[data-board] .brand-sub {
    display: none;
  }
  :root[data-board] .app-shell > .regime-strip {
    padding: 0 var(--sp-4);
    gap: var(--sp-3);
  }
  :root[data-board] .regime-head span,
  :root[data-board] .regime-facts,
  :root[data-board] .regime-note {
    display: none;
  }
  :root[data-board] #app-shell[data-mobile-tab='chart'] .regime-strip {
    display: flex;
  }
  :root[data-board] .app-grid {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }
  /* ติดตาม / สแกน: the left column, one card at a time; the page scrolls, not the card. */
  :root[data-board] #app-shell[data-mobile-tab='pins'] .watchlist-panel,
  :root[data-board] #app-shell[data-mobile-tab='scan'] .watchlist-panel {
    display: flex;
    position: static;
    height: auto;
    max-height: none;
  }
  :root[data-board] #app-shell[data-mobile-tab='pins'] .scan-card,
  :root[data-board] #app-shell[data-mobile-tab='scan'] .pins-card {
    display: none;
  }
  :root[data-board] .pins-card {
    max-height: none;
  }
  :root[data-board] .scan-card {
    flex: none;
    min-height: 0;
  }
  :root[data-board] .pins-list,
  :root[data-board] .scan-card .watchlist-rows {
    overflow: visible;
  }
  :root[data-board] .group-head {
    position: static;
  }
  /* กราฟ: the stock head, chart and the summary card below it (the old สรุป tab folds in here). */
  :root[data-board] #app-shell[data-mobile-tab='chart'] .main-col,
  :root[data-board] #app-shell[data-mobile-tab='summary'] .main-col {
    display: flex;
    height: auto;
    min-height: 0;
  }
  :root[data-board] #app-shell[data-mobile-tab='chart'] .app-grid,
  :root[data-board] #app-shell[data-mobile-tab='summary'] .app-grid {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }
  :root[data-board] #app-shell[data-mobile-tab='chart'] .info-strip,
  :root[data-board] #app-shell[data-mobile-tab='summary'] .chart-card {
    display: flex;
  }
  :root[data-board] #app-shell[data-mobile-tab='chart'] .chart-card {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--card-shadow);
  }
  :root[data-board] #app-shell[data-mobile-tab='chart'] .chart-host {
    height: 360px;
    min-height: 300px;
    flex: none;
  }
  :root[data-board] .symbol-header {
    padding: var(--sp-3) var(--sp-4);
  }
  :root[data-board] .board-stock-actions {
    width: 100%;
    margin-left: 0;
  }
  :root[data-board] .board-stock-actions .board-btn {
    flex: 1;
  }
  :root[data-board] .board-trend {
    margin: 0 var(--sp-4) var(--sp-3);
  }
  :root[data-board] .symbol-stat {
    padding-inline: var(--sp-4) var(--sp-3);
  }
  :root[data-board] .chart-toolbar {
    padding-inline: var(--sp-4);
  }
  :root[data-board] .board-trend-src {
    white-space: normal;
  }
  :root[data-board] #app-shell[data-mobile-tab='chat'] .chat-col {
    height: calc(
      100dvh - 56px - var(--board-band-h) - var(--news-h, 0px) - 64px - 28px -
        env(safe-area-inset-bottom, 0px)
    );
  }
  /* Bottom tabs: ติดตาม · สแกน · กราฟ · Luna, icon over label, the changed-stamp badge on ติดตาม. */
  :root[data-board] .bottom-tabbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 6px var(--sp-3) calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: 1px solid var(--line);
  }
  :root[data-board] .app-shell {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  :root[data-board] .tabbar-btn[data-mobile-tab='list'],
  :root[data-board] .tabbar-btn[data-mobile-tab='summary'] {
    display: none;
  }
  :root[data-board] .tabbar-btn {
    position: relative;
    height: 52px;
    flex-direction: column;
    gap: 2px;
    border-radius: 10px;
    color: var(--muted);
    font-size: var(--u-text-xs);
    font-weight: 500;
  }
  :root[data-board] .tabbar-btn svg {
    width: 20px;
    height: 20px;
  }
  :root[data-board] .board-tab-icon {
    display: block;
  }
  :root[data-board] .tab-old {
    display: none;
  }
  :root[data-board] .tab-board {
    display: inline;
  }
  :root[data-board] .tabbar-btn:not(.active):hover {
    color: var(--text);
    background: var(--hover);
  }
  :root[data-board] .tabbar-btn.active {
    color: var(--accent-text);
    background: var(--acc-soft);
    box-shadow: none;
    font-weight: 650;
  }
  :root[data-board] .tab-badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 var(--sp-1);
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--tag-down-bg);
    color: var(--tag-down-fg);
    font-family: var(--font-mono);
    font-size: var(--u-text-compact);
    font-weight: 700;
  }
}
@media (max-width: 599px) {
  :root[data-board] .regime-head {
    display: none;
  }
  :root[data-board] .brand-name {
    font-size: 16px;
  }
  :root[data-board] .board-btn .lbl {
    font-size: var(--u-text-compact);
  }
}
/* #endregion */

/* #region zone:desk.board.style.fit — แถบตลาดแบบย่อ และข้อมูลสูตรแบบสั้นในการ์ดสแกน */
/* The band keeps the two facts the approved mock shows (distance to the 200-day line, breadth); the slope and
   volatility facts stay on the LINE "สภาพตลาด" card. */
:root[data-board] .app-shell > .regime-strip .regime-fact:nth-child(2),
:root[data-board] .app-shell > .regime-strip .regime-fact:nth-child(3) {
  display: none;
}
/* The scan card keeps the honesty label, the gate notice and the tested numbers; the formula's description and exit
   rule repeat what every row's chips and tooltip already say, so they fold away to keep the rows in view. */
:root[data-board] .scan-card .formula-line {
  display: none;
}
:root[data-board] .scan-card .formula-info {
  margin-top: var(--sp-2);
}
/* #endregion */

/* #region zone:desk.board.style.toolbar-wrap — แถบเครื่องมือขึ้นบรรทัดใหม่แทนการดันหน้าออกด้านข้าง */
:root[data-board] .chart-toolbar {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
  column-gap: var(--sp-2);
}
@media (max-width: 599px) {
  :root[data-board] .sym-price-wrap {
    flex-wrap: nowrap;
    row-gap: var(--sp-1);
    min-width: 0;
  }
  :root[data-board] .sym-id {
    max-width: 100%;
  }
  :root[data-board] .symbol-header {
    gap: var(--sp-2) var(--sp-3);
  }
}
/* #endregion */
/* #region zone:desk.board.style.phone-head — หัวหุ้นบนมือถือ: ชื่อซ้าย ราคาขวา สถานะและปุ่มบรรทัดถัดไป */
@media (max-width: 899px) {
  :root[data-board] .app-header .beta-label {
    display: none;
  }
}
/* The phone header is a grid (desk.css): logo | ticker over name | price over the status pill; the Board adds its
   follow / alert / ⋯ row underneath, full width. */
@media (max-width: 899px) {
  :root[data-board] .symbol-header {
    grid-template-areas: none;
    row-gap: var(--sp-2);
  }
  :root[data-board] .board-stock-actions {
    grid-column: 1 / -1;
  }
  :root[data-board] .sym-price-wrap {
    gap: var(--sp-2);
  }
}
/* #endregion */
/* #region zone:desk.board.style.range — แถบช่วงวันที่ + ซูม/ล็อก/TradingView ทางขวา (≥900px) */
:root[data-board] .range-strip {
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
}
:root[data-board] .range-strip .tb-tools {
  margin-left: auto;
  flex: none;
}
/* The band's honesty note is long; on narrower desktops it stays on the scan card (same label) instead. */
@media (max-width: 1699px) {
  :root[data-board] .app-shell > .regime-strip .regime-note {
    display: none;
  }
}
/* #endregion */

/* #region zone:desk.board.style.finish — งานเก็บรายละเอียดหลังรีวิว: โลโก้แบน ชิปแชทขึ้นบรรทัด ปุ่มส่ง และแถวสแกนแบบสั้น */
/* Company badges: flat on the Board (no glass rim, gloss or lift) — the passbook world is printed, not glossy. */
:root[data-board] .wl-logo,
:root[data-board] .logo-disc {
  box-shadow: none;
  transform: none;
}
:root[data-board] .wl-logo::before,
:root[data-board] .wl-logo::after,
:root[data-board] .logo-disc::before,
:root[data-board] .logo-disc::after {
  display: none;
}
/* Text on an accent fill always uses --on-accent (dark text on the light green in dark mode). */
:root[data-board] .btn-primary,
:root[data-board] .btn-send {
  color: var(--on-accent);
}
:root[data-board] .desk-dialog-field .input[aria-invalid='true']:focus {
  border-color: var(--down);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 30%, transparent);
}
/* The scan card reads like the mock: ticker, stamp, name, price, % and pin; the entry / stop / exit chips stay in each
   row's tooltip and on the stock head's plan card, and the honesty label is shown once (above the rows). */
@media (min-width: 900px) {
  :root[data-board] .scan-card .formula-chips {
    display: none;
  }
}
:root[data-board] .scan-card:has(.formula-row) .panel-foot {
  display: none;
}
/* #endregion */