/* #region zone:desk.style.suggestions — ชิปเว้นช่องและหัวข้อไม่ถูกบีบ */

.chat-context {
  flex-shrink: 0;
  height: auto;
  min-height: 28px;
}
.chat-context-text {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The chat column's chip row lives only here: one row that scrolls sideways (wheel, arrows, swipe, Tab).
   desk-chip-scroll.js adds .can-scroll-start/.can-scroll-end, shows the arrows and titles only truncated chips. */
.chat-suggestions-wrap {
  position: relative;
  flex-shrink: 0;
  min-width: 0;
}
.chat-col .chat-suggestions {
  --fade-start: 0px;
  --fade-end: 0px;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  scroll-padding-inline: var(--sp-4);
  scrollbar-width: none;
}
.chat-col .chat-suggestions.can-scroll-start {
  --fade-start: 24px;
}
.chat-col .chat-suggestions.can-scroll-end {
  --fade-end: 24px;
}
.chat-col .chat-suggestions:is(.can-scroll-start, .can-scroll-end) {
  mask-image: linear-gradient(to right, transparent, black var(--fade-start), black calc(100% - var(--fade-end)), transparent);
}
.chat-col .chat-suggestions::-webkit-scrollbar {
  display: none;
}
.chat-col .chat-suggestions button {
  flex: 0 0 auto;
  max-width: min(260px, 75vw);
  min-width: 0;
  min-height: var(--tap-min, 44px);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--u-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mouse: small chips, wheel/arrows to reach the rest. Touch and the phone layout keep the 44px tap target and swipe. */
.chip-arrow {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  :root .chat-col .chat-suggestions {
    scroll-padding-inline: 36px;
  }
  :root .chat-col .chat-suggestions button {
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
  }
  :root:not([data-phone-layout]) .chat-suggestions-wrap .chip-arrow.icon-btn:not([hidden]) {
    display: inline-flex;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    color: var(--text);
  }
  :root:not([data-phone-layout]) .chat-suggestions-wrap .chip-arrow.icon-btn:hover {
    background: var(--panel2);
  }
  :root:not([data-phone-layout]) .chat-suggestions-wrap .chip-arrow svg {
    width: 14px;
    height: 14px;
  }
  .chat-suggestions-wrap .chip-arrow[data-chip-arrow='-1'] {
    left: var(--sp-1);
  }
  .chat-suggestions-wrap .chip-arrow[data-chip-arrow='1'] {
    right: var(--sp-1);
  }
  .chat-suggestions-wrap:has(.is-typing) .chip-arrow {
    visibility: hidden;
  }
}
@media (pointer: coarse) {
  .chat-col .chat-suggestions {
    scroll-snap-type: x proximity;
  }
  .chat-col .chat-suggestions button {
    scroll-snap-align: start;
  }
}
/* Keep the reserved row, but remove its controls from focus and accessibility while drafting. */
.chat-col .chat-suggestions.is-typing {
  visibility: hidden;
}
/* #endregion */

/* #region zone:desk.style.chat-empty — สถานะแชทว่างมีคำถามแนะนำ */
/* Before the first message the chips move up into the empty state; the bar above the input hides. */
.chat-hello p {
  margin: 0 0 var(--sp-3);
}
.chat-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chat-empty-chips button {
  max-width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--u-text-xs);
  padding: var(--sp-1) var(--sp-3);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.chat-empty-chips button:hover {
  background: var(--hover);
  color: var(--text);
}
.chat-empty-chips .chat-help-chip {
  border-color: var(--acc-ring);
  color: var(--accent-text);
}
.chat-messages:has(.chat-msg) .chat-hello {
  display: none;
}
.chat-col:not(:has(.chat-msg)) .chat-suggestions {
  display: none;
}
/* #endregion */

/* #region zone:desk.style.chat-compact — แชทบนมือถือแป้นพิมพ์เปิด/จอแนวนอน: ย่อแถบ ให้ข้อความอ่านได้ */
/* On short keyboard/landscape screens, keep replies and the input above the bottom tabs.
   Suggested questions and settings yield their space; normal portrait phones retain one scrolling row. */
:root[data-chat-kb] #app-shell[data-mobile-tab='chat'] .chat-col,
:root[data-chat-kb][data-board] #app-shell[data-mobile-tab='chat'] .chat-col {
  min-height: 0;
}
:root[data-chat-kb] .chat-col .chat-suggestions,
:root[data-chat-kb][data-board] .chat-col .chat-suggestions {
  display: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
}
:root[data-chat-kb] .chat-col .chat-suggestions::-webkit-scrollbar {
  display: none;
}
:root[data-chat-kb] .chat-col .chat-suggestions button {
  flex-shrink: 0;
  max-width: none;
  white-space: nowrap;
}
:root[data-chat-kb] .chat-col .chat-card-sub,
:root[data-chat-kb] .chat-col .quota-line {
  display: none;
}
:root[data-chat-kb] .chat-col .chat-card-head {
  padding-block: var(--sp-2);
}
:root[data-chat-kb] .chat-col .chat-form {
  padding-block: var(--sp-2);
  gap: var(--sp-2);
}
:root[data-chat-kb] .chat-col .chat-messages {
  min-height: 120px;
}
/* #endregion */

/* #region zone:desk.style.chat-targets — จุดแตะแชทบนจอสัมผัส ≥44px ห่างกัน ≥8px */
.stat-label[role='button'],
.regime-odds-text[role='button'] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
@media (pointer: coarse) {
  #chat-input {
    min-height: 44px;
  }
  .symbol-stat[role='button'],
  .stat-label[role='button'],
  .regime-odds-text[role='button'],
  .regime-odds[role='button'],
  .reply-badge[role='button'] {
    min-height: 44px;
    align-content: center;
    cursor: pointer;
  }
  .chat-link {
    display: inline-block;
    align-content: center;
    min-height: 44px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .chat-col .chat-action-chip,
  .board-btn.sm {
    min-height: 44px;
  }
  .formula-info {
    gap: var(--sp-2);
  }
  .formula-row + .formula-row {
    margin-top: var(--sp-2);
  }
  .chat-support-chips {
    gap: var(--sp-2);
  }
  .chat-support-chips button,
  .chat-suggestions .chat-help-chip,
  .chat-empty-chips button {
    min-height: var(--tap-min, 44px);
  }
  .model-switch.model-picker {
    gap: var(--sp-2);
  }

  .effort-btn {
    min-height: var(--tap-min, 44px);
  }
  .chat-news-title {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min, 44px);
  }
  .search-opt {
    height: auto;
    min-height: var(--tap-min, 44px);
  }
  .chat-attach-remove {
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
  }
  .macro-market-btn {
    min-height: var(--tap-min, 44px);
  }
  .formula-honesty {
    min-height: var(--tap-min, 44px);
  }
}
/* #endregion */

/* #region zone:desk.style.chat-phone — แชทมือถือคงพื้นที่ข้อความ */
@media (max-width: 820px) {
  .chat-col .chat-messages {
    min-height: 0;
  }
}
/* #endregion */