/* #region zone:desk.style.chat-actions — การ์ดสิ่งที่แชททำให้ ชิปเส้นจาก AI บนกราฟ หน้าต่างเทียบหุ้น และตัวอย่างคำสั่ง */
/* Spec docs/superpowers/specs/2026-10-11-desk-chat-actions.md. Tokens only (--ai is the AI-layer hue); every box wraps,
   so nothing here needs a breakpoint. Status is a word plus an icon, never colour alone. Controls keep >= 8px apart. */

/* #region zone:desk.style.chat-actions.card — การ์ดใต้คำตอบ */
/* DUI-35: a tidy list. Head = title + (phone "ดูกราฟ", undo only while it can undo); one row per action: icon, sentence,
   then a status chip and at most one compact secondary action. A narrow card (the 340px chat column) moves that
   chip + action under the sentence, aligned to its text edge. Rows share one height and padding. */
.action-card {
  container: action-card / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--panel2);
  white-space: normal;
  font-size: var(--fs-md);
}
.action-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 32px;
}
.action-card-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
}
.action-card-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}
.action-undone {
  font-size: var(--fs-sm);
  color: var(--muted);
}
html:root .action-card .action-view-chart.u-btn {
  display: none;
}
html:root .action-card :is(.action-undo, .action-view-chart, .action-retry).u-btn {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
/* the undo is a quiet text link: it is shown only when it can act */
.action-undo {
  border-color: transparent;
  background: transparent;
  color: var(--accent-text);
}
html:root .action-card .action-undo[hidden] {
  display: none;
}
.action-undo:not(:disabled):hover,
.action-view-chart:hover,
.action-retry:hover {
  background: var(--hover);
}
.action-undo:disabled {
  opacity: 0.6;
  cursor: default;
}
.action-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.action-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-areas: 'icon text side';
  gap: var(--sp-1) var(--sp-2);
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.action-row:first-child {
  border-top: 0;
}
.action-icon {
  grid-area: icon;
  display: inline-flex;
  color: var(--muted);
}
.action-text {
  grid-area: text;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}
.action-side {
  grid-area: side;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.action-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.action-row.is-done .action-state {
  color: var(--accent-text);
}
.action-row.is-failed .action-state {
  color: var(--down);
}
.action-row.is-running .action-state svg {
  animation: stActionSpin 0.9s linear infinite;
}
.action-detail {
  grid-column: 2 / -1;
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}
@container action-card (max-width: 359px) {
  .action-row {
    grid-template-areas:
      'icon text text'
      '. side side';
  }
  .action-side {
    justify-content: flex-start;
  }
}
@media (max-width: 899px) {
  html:root .action-card .action-view-chart.u-btn {
    display: inline-flex;
    align-items: center;
  }
}
@media (pointer: coarse) {
  html:root .action-card :is(.action-undo, .action-view-chart, .action-retry).u-btn {
    height: var(--tap-min);
    min-height: var(--tap-min);
  }
}
@keyframes stActionSpin {
  to {
    transform: rotate(360deg);
  }
}
/* #endregion */

/* #region zone:desk.style.chat-actions.chip — ชิป "เส้นจาก AI (n) · ซ่อน · ล้าง" บนกราฟ */
.ai-lines-chip {
  position: absolute;
  bottom: 34px;
  left: var(--sp-2);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 4px 3px var(--sp-3);
  border: 1px solid var(--ai-line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chart-bg) 92%, transparent);
  color: var(--ai);
  font-size: var(--fs-xs);
  font-weight: 600;
  max-width: calc(100% - var(--sp-4));
  white-space: normal;
}
.ai-lines-label {
  line-height: 1.25;
}
.ai-lines-chip[hidden] {
  display: none;
}

.ai-lines-chip.is-hidden-lines .ai-lines-label {
  text-decoration: line-through;
}
.ai-lines-btn {
  min-height: 22px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--ai-line);
  border-radius: var(--r-pill);
  background: var(--ai-soft);
  color: var(--ai);
  font: inherit;
}
.ai-lines-btn:hover {
  background: var(--ai-line);
}
@media (pointer: coarse) {
  .ai-lines-btn {
    min-width: 44px;
    min-height: 44px;
  }
}
/* #endregion */

/* #region zone:desk.style.chat-actions.compare — หน้าต่างเทียบหุ้น */
/* DUI-34: four colour-blind-safe lines (Okabe-Ito based), one dialog padding, a concentric range switch, a legend
   whose values line up, and no text laid over the plot. */
.compare-dialog {
  --compare-1: #0072b2;
  --compare-2: #d55e00;
  --compare-3: #009e73;
  --compare-4: #cc79a7;
  width: min(640px, calc(100vw - 32px));
  padding: var(--sp-6);
}
:root[data-theme='dark'] .compare-dialog {
  --compare-1: #56b4e9;
  --compare-2: #e69f00;
  --compare-3: #2ecfa0;
  --compare-4: #f0a3cb;
}
.compare-ranges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-1);
  max-width: 100%;
}
.compare-ranges .seg-btn {
  justify-content: center;
  min-width: 0;
  padding-inline: var(--sp-2);
}
.compare-chart {
  position: relative;
  height: clamp(200px, 36vh, 320px);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--chart-bg);
}
.compare-chart canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.compare-status {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.compare-status[hidden] {
  display: none;
}
.compare-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.compare-legend li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
}
.compare-legend li.is-missing {
  color: var(--faint);
}
.compare-legend li.is-missing .compare-swatch {
  background: var(--line);
}
.compare-legend li.is-missing .compare-value {
  font-size: var(--fs-sm);
}
.compare-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--compare-1);
}
.compare-swatch[data-line='1'] {
  background: var(--compare-2);
}
.compare-swatch[data-line='2'] {
  background: var(--compare-3);
}
.compare-swatch[data-line='3'] {
  background: var(--compare-4);
}
.compare-name {
  font-weight: 700;
}
.compare-value {
  text-align: right;
}
.compare-value.up {
  color: var(--up);
}
.compare-value.down {
  color: var(--down);
}
.compare-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* #endregion */

/* #region zone:desk.style.chat-actions.examples — ตัวอย่างคำสั่งในแชทที่ยังว่าง */
.chat-action-examples {
  margin-top: var(--sp-3);
}
.chat-hello .chat-action-examples-title {
  margin: 0 0 var(--sp-2);
  font-weight: 600;
}
.chat-action-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chat-action-chip {
  max-width: 100%;
  min-height: 30px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--ai-line);
  border-radius: var(--r-pill);
  background: var(--ai-soft);
  color: var(--ai);
  font-size: var(--u-text-xs);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chat-action-chip:hover {
  background: var(--ai-line);
}
/* #endregion */

@media (prefers-reduced-motion: reduce) {
  .action-row.is-running .action-state svg {
    animation: none;
  }
}
/* #endregion */

/* #region zone:desk.actions.scenarios — แผงแท่งจำลองตามสีและขนาดจอ */
@media (max-width: 600px) {
  #app-shell[data-mobile-tab='chart'] .main-col:has(.has-ai-projections) {
    height: auto;
  }
  #app-shell[data-mobile-tab='chart'] .chart-host.has-ai-projections {
    flex: 0 0 auto;
    min-height: 460px;
  }
}
.ai-point-legend {
  margin: var(--sp-2) var(--sp-4);
  padding-left: var(--sp-5);
  columns: 2;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.ai-point-legend[hidden] {
  display: none;
}
.ai-point-legend li {
  break-inside: avoid;
  padding: var(--sp-1);
}
.ai-scenarios-panel {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 64px;
  bottom: 78px;
  width: fit-content;
  max-width: calc(100% - 74px);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm, 4px);
  background: var(--chart-bg);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ai-scenarios-panel[hidden] {
  display: none;
}
.ai-scenarios-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ai-scenario-toggle {
  border: 1px solid var(--line);
  border-radius: 4px;
}
.ai-scenario-toggle[aria-pressed='false'] {
  opacity: 0.45;
  text-decoration: line-through;
}
.ai-scenario-toggle[data-tone='bull'] {
  color: var(--up-text);
}
.ai-scenario-toggle[data-tone='base'] {
  color: var(--accent-text);
}
.ai-scenario-toggle[data-tone='bear'] {
  color: var(--down-text);
}
.ai-scenario-toggle[data-tone='alt'] {
  color: var(--ai);
}
/* #endregion */