/* Canonical CSS owner: sentiment. Historical layers consolidated 2026-08-02. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
  #sentimentCycleView {
    --sentiment-history-max-height: min(480px, calc(100dvh - 210px));
  }
}

.sentiment-gauge:hover {
  transform: scale(1.035);
}

.sentiment-gauge::before {
  content: "";

  position: absolute;

  inset: 6px;

  border-radius: 50%;

  background: var(--surface);
}

.sentiment-gauge span.metric-changed {
  animation: metric-update 560ms var(--ease-out);
}

.sentiment-gauge.sentiment-pulse {
  animation: sentiment-pulse var(--motion-slow) var(--ease-out) both;
}

@keyframes sentiment-pulse {
  0%,
  100% {
    box-shadow: rgba(201, 63, 69, 0) 0px 0px 0px 0px;

    transform: scale(1);
  }

  48% {
    box-shadow: rgba(201, 63, 69, 0.13) 0px 0px 0px 5px;

    transform: scale(1.045);
  }
}

.sentiment-gauge::after {
  content: "";

  position: absolute;

  inset: -4px;

  border-radius: 50%;

  background: conic-gradient(transparent 0deg, transparent 64%, rgba(201, 63, 69, 0.18) 69%, rgba(201, 63, 69, 0.82) 76%, rgba(201, 63, 69, 0.12) 83%, transparent 89%, transparent 100%);

  mask: radial-gradient(circle, transparent 66%, rgb(0, 0, 0) 68%);

  pointer-events: none;

  animation: 3.8s linear 0s infinite normal none running sentiment-idle;
}

@keyframes sentiment-idle {
  0% {
    opacity: 0.55;

    transform: rotate(0deg) scale(0.98);
  }

  50% {
    opacity: 1;

    transform: rotate(180deg) scale(1.06);
  }

  100% {
    opacity: 0.55;

    transform: rotate(360deg) scale(0.98);
  }
}

.market-breadth-panel.breadth-enter {
  animation: breadth-panel-enter 420ms var(--ease-out) both;
}

@keyframes breadth-panel-enter {
  0% {
    opacity: 0.42;

    transform: translateY(5px);
  }

  100% {
    opacity: 1;

    transform: translateY(0px);
  }
}

.breadth-up {
  background: var(--market-up);
}

.breadth-flat {
  background: rgb(170, 179, 188);
}

.breadth-down {
  background: var(--market-down);
}

.sentiment-chart-shell canvas {
  width: 100%;

  height: 100%;

  display: block;
}

.sentiment-component-item:last-child {
  padding-bottom: 0px;

  border-bottom: 0px;
}

.sentiment-component-item strong {
  font-size: 12px;
}

.sentiment-component-item span {
  color: var(--text-secondary);

  font-size: 10px;
}

.sentiment-component-item b {
  font-size: 13px;

  text-align: right;
}

.sentiment-component-track i {
  height: 100%;

  display: block;

  background: var(--action);

  transition: width var(--motion-deliberate) var(--ease-out);
}

.sentiment-component-item:nth-child(2) .sentiment-component-track i {
  background: var(--market-up);
}

.sentiment-component-item:nth-child(3) .sentiment-component-track i {
  background: var(--market-down);
}

.sentiment-component-item:nth-child(4) .sentiment-component-track i {
  background: var(--warning-color);
}

.sentiment-component-item:nth-child(5) .sentiment-component-track i {
  background: rgb(93, 108, 120);
}

.sentiment-detail-toolbar h2 {
  font-size: 15px;
}

.sentiment-history-table {
  min-width: 980px;

  table-layout: fixed;

  font-size: 13px;

  font-variant-numeric: tabular-nums;
}

.sentiment-history-table .sentiment-col-date {
  width: 94px;
}

.sentiment-history-table .sentiment-col-score {
  width: 56px;
}

.sentiment-history-table .sentiment-col-direction,
.sentiment-history-table .sentiment-col-phase {
  width: 62px;
}

.sentiment-history-table .sentiment-col-count {
  width: 54px;
}

.sentiment-history-table .sentiment-col-height {
  width: 58px;
}

.sentiment-history-table .sentiment-col-feedback {
  width: 66px;
}

.sentiment-history-table .sentiment-col-rate {
  width: 72px;
}

.sentiment-history-table .number {
  text-align: center;
}

.sentiment-history-table thead th {
  border-bottom-color: rgb(216, 224, 230);

  height: 36px;

  font-size: var(--fs-caption);

  font-weight: 600;
}

.sentiment-history-table .sentiment-history-groups th {
  height: 29px;

  top: 0px;

  z-index: 5;

  border-right-color: rgb(216, 224, 230);

  color: rgb(82, 97, 109);

  font-weight: 700;
}

.sentiment-history-table .sentiment-history-groups .group-state {
  background: rgb(237, 243, 248);
}

.sentiment-history-table .sentiment-history-groups .group-ladder {
  background: var(--warning-soft);
}

.sentiment-history-table .sentiment-history-groups .group-risk {
  background: var(--market-up-soft);
}

.sentiment-history-table .sentiment-history-groups .group-feedback {
  background: rgb(237, 245, 242);
}

.sentiment-history-table .sentiment-history-columns th {
  height: 34px;

  top: 29px;

  z-index: 5;

  background: var(--table-header);

  color: rgb(57, 74, 86);

  font-size: 12px;
}

.sentiment-history-table tbody td:first-child {
  position: sticky;

  z-index: 3;

  background: var(--surface);

  left: 0px;

  text-align: left;
}

.sentiment-history-table tbody td:nth-child(2) {
  position: sticky;

  z-index: 3;

  background: var(--surface);

  left: 94px;

  box-shadow: 1px 0 0 var(--border);
}

.sentiment-history-table .sentiment-history-columns th:first-child {
  position: sticky;

  left: 0px;

  text-align: left;

  z-index: 7;

  background: var(--table-header);
}

.sentiment-history-table .sentiment-history-columns th:nth-child(2) {
  position: sticky;

  left: 94px;

  box-shadow: 1px 0 0 var(--border);

  z-index: 7;

  background: var(--table-header);
}

.sentiment-history-table tbody tr:hover td {
  background: var(--table-hover);
}

.sentiment-score-cell {
  font-weight: 750;
}

.sentiment-score-cell.score-strong {
  color: var(--market-up);
}

.sentiment-score-cell.score-weak {
  color: var(--market-down);
}

.sentiment-score-cell.score-neutral {
  color: var(--warning-color);
}

.sentiment-direction,
.sentiment-phase-badge {
  display: inline-flex;

  align-items: center;

  min-width: 42px;

  min-height: 21px;

  justify-content: center;

  padding: 0px 5px;

  border-radius: 4px;

  background: var(--surface-muted);

  font-size: 11.5px;

  font-weight: 650;
}

.sentiment-phase-badge.phase-ice {
  background: rgb(234, 242, 251);

  color: rgb(36, 91, 145);
}

.sentiment-phase-badge.phase-repair {
  background: var(--accent-soft);

  color: var(--accent);
}

.sentiment-phase-badge.phase-fermentation {
  background: var(--up-soft);

  color: var(--up);
}

.sentiment-phase-badge.phase-climax {
  background: rgb(252, 236, 238);

  color: rgb(169, 47, 53);
}

.sentiment-phase-badge.phase-divergence {
  background: rgb(255, 243, 223);

  color: rgb(152, 96, 15);
}

.sentiment-phase-badge.phase-retreat {
  background: rgb(238, 240, 242);

  color: rgb(82, 91, 101);
}

.sentiment-direction.trend-hot {
  color: var(--market-up);
}

.sentiment-direction.trend-cool {
  color: var(--market-down);
}

.sentiment-direction.trend-flat {
  color: var(--text-secondary);
}

@media (max-width: 1023px) {
  .sentiment-cycle-summary {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .sentiment-cycle-analysis {
    grid-template-columns: minmax(0px, 1.35fr) minmax(280px, 0.85fr);
  }
}

@media (max-width: 767px) {
  body[data-active-view="sentimentCycleView"] .overview-strip {
    display: none;
  }

  .sentiment-cycle-toolbar {
    flex-direction: column;
  }

  .sentiment-cycle-toolbar .toolbar-controls {
    width: 100%;
  }

  .sentiment-cycle-toolbar .sentiment-range-selector {
    flex: 1 1 0%;
  }

  .sentiment-components-panel {
    padding: 12px;
  }

  .sentiment-detail-toolbar {
    min-height: 58px;

    padding: 10px 12px;
  }

  .sentiment-history-frame {
    min-height: 0px;

    max-height: min(480px, -210px + 100vh);
  }
}

@media (max-width: 860px) {
  .sentiment-block {
    grid-column: 1 / -1;

    border-right: 0px;
  }
}

.sentiment-block {
  min-width: 0px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px 15px;

  border-right-color: var(--border);
}

.sentiment-gauge {
  --score: 0;

  display: grid;

  place-items: center;

  flex: 0 0 52px;

  border-radius: 50%;

  background: conic-gradient(var(--coral) calc(var(--score) * 1%), var(--border) 0);

  position: relative;

  transition: --score 650ms var(--ease-out), transform var(--motion-medium) var(--ease-out);

  width: 52px;

  height: 52px;
}

.sentiment-gauge span {
  font-variant-numeric: tabular-nums;

  position: relative;

  font-weight: 750;

  font-size: 17px;
}

.sentiment-text {
  display: block;

  margin-top: 3px;

  white-space: nowrap;

  font-size: 16px;

  font-weight: 760;
}

.sentiment-history-table td,
.sentiment-history-table th {
  height: 40px;

  padding: 0px 7px;

  text-align: center;
}

.sentiment-history-groups th {
  background: rgb(238, 243, 246);
}

@media (max-width: 767px) {
  .sentiment-block {
    min-height: 0px;

    padding: 8px 10px;

    border-right: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    grid-area: 1 / 1 / 3;

    align-items: flex-start;

    justify-content: center;

    flex-direction: column;

    gap: 8px;
  }

  .sentiment-gauge {
    width: 44px;

    height: 44px;

    flex-basis: 44px;
  }

  .sentiment-gauge::before {
    inset: 5px;
  }

  .sentiment-gauge span {
    font-size: 15px;
  }

  .sentiment-text {
    margin-top: 2px;

    font-size: 14px;
  }

  .sentiment-cycle-summary {
    grid-template-columns: 1fr 1fr;
  }

  .sentiment-cycle-analysis {
    grid-template-columns: 1fr;
  }

  .sentiment-trend-panel {
    padding: 12px;

    border-right: 0px;

    border-bottom: 1px solid var(--border);
  }

  .sentiment-chart-shell {
    height: 260px;
  }
}

@media (max-width: 1280px) {
  .overview-strip .sentiment-block {
    padding: 0px 8px;
  }
}

@media (max-width: 900px) {
  .overview-strip[data-overview-expanded="true"] .sentiment-block {
    grid-column: 1 / 4;

    min-height: 56px;
  }
}

@media (max-width: 767px) {
  .overview-strip .sentiment-block {
    grid-area: 1 / 1 / 3;

    min-height: 54px;
  }
}

.sentiment-trend-panel .workspace-heading > div span {
  display: block;

  margin-top: 2px;

  color: var(--text-tertiary);

  font-size: 10.5px;
}

.sentiment-chart-legend {
  min-height: 34px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 0px 14px;

  border-bottom: 1px solid rgb(237, 240, 244);

  color: var(--text-secondary);

  font-size: 10.5px;
}

.sentiment-chart-legend span {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}

.sentiment-chart-legend span::before {
  content: "";

  width: 12px;

  height: 3px;

  border-radius: 2px;

  background: var(--primary);
}

.sentiment-chart-legend .retreat-point::before {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--danger);
}

.sentiment-chart-legend .repair-point::before {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: rgb(230, 154, 22);
}

.sentiment-chart-legend .temperature-average::before {
  height: 1px;

  background: rgb(201, 209, 220);
}

.sentiment-components-panel > .workspace-heading,
.sentiment-cycle-summary > .workspace-heading {
  border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
  .sentiment-cycle-analysis,
  .sentiment-analysis-rail {
    grid-template-columns: 1fr;
  }
}

.sentiment-analysis-rail {
  display: grid;

  gap: 12px;
}

.sentiment-component-list {
  display: grid;

  gap: 9px;

  padding: 4px 14px 7px;
}

.sentiment-component-item {
  min-width: 0px;

  border-bottom-color: var(--border);

  min-height: 0px;

  padding: 4px 0px;
}

.sentiment-component-item > div:first-child {
  display: grid;

  align-items: baseline;

  gap: 8px;

  grid-template-columns: minmax(76px, 1fr) auto 34px;
}

.sentiment-component-item small {
  color: var(--text-secondary);

  display: block;

  overflow: hidden;

  margin-top: 1px;

  font-size: 9px;

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.sentiment-component-track {
  height: 5px;

  overflow: hidden;

  background: rgb(230, 235, 239);

  margin-top: 4px;
}

.sentiment-detail-toolbar {
  min-height: 46px;

  padding-top: 7px;

  padding-bottom: 7px;

  margin-top: 0px;
}

.sentiment-cycle-analysis {
  display: grid;

  border-bottom-color: var(--border);

  grid-template-columns: minmax(0px, 1fr) 340px;

  gap: 12px;

  margin-bottom: 12px;

  align-items: stretch;
}

.sentiment-trend-panel {
  min-width: 0px;

  padding: 16px;

  margin: 0px;

  border: 1px solid var(--border);

  border-radius: var(--card-radius);

  background: var(--surface);

  box-shadow: var(--card-shadow);

  overflow: hidden;

  min-height: 0px;
}

.sentiment-chart-shell {
  min-width: 0px;

  padding: 14px 18px 10px;

  height: 296px;
}

.sentiment-components-panel {
  min-width: 0px;

  padding: 16px;

  margin: 0px;

  border: 1px solid var(--border);

  border-radius: var(--card-radius);

  background: var(--surface);

  box-shadow: var(--card-shadow);

  overflow: hidden;

  min-height: 0px;
}

.sentiment-cycle-summary {
  margin: 0px;

  border: 1px solid var(--border);

  border-radius: var(--card-radius);

  background: var(--surface);

  box-shadow: var(--card-shadow);

  overflow: hidden;

  display: block;

  min-height: 0px;
}

:where(#sentimentCycleView) .sentiment-history-frame {
  border: 0px;

  min-height: 0px;
}

.sentiment-history-table tbody td {
  height: 35px;

  padding-top: 5px;

  padding-bottom: 5px;
}

.overview-strip .sentiment-block {
  background: transparent;

  min-width: 0px;

  min-height: 0px;

  display: flex;

  flex: 0 0 auto;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 2px;

  padding: 0 16px;

  border: 0px;
}

.overview-strip .sentiment-block > div:last-child {
  display: flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;
}

.overview-strip .sentiment-gauge {
  width: 20px;

  height: 20px;

  flex: 0 0 20px;

  border-width: 2px;

  font-size: 8.5px;
}

.overview-strip .sentiment-text {
  color: var(--accent);

  font-size: var(--fs-caption);

  font-weight: 500;

  white-space: nowrap;
}

.overview-strip[data-overview-expanded="true"] .sentiment-gauge {
  width: 46px;

  height: 46px;

  flex-basis: 46px;

  font-size: 13px;
}

.redesigned-sentiment-view {
  overflow: visible;

  border: 0px;

  border-radius: 0px;

  background: transparent;

  box-shadow: none;
}

.redesigned-page-head #sentimentExportButton {
  min-height: 28px;

  height: 28px;

  padding: 0px 11px;

  font-size: 12px;
}

.redesigned-card-head .sentiment-auto-tag,
.redesigned-card-head .sentiment-current-tag {
  margin-left: auto;

  padding: 2px 7px;

  border-radius: 5px;

  background: var(--surface-muted);

  color: var(--r2-sub);

  font-size: 11px;
}

.redesigned-sentiment-view .sentiment-components-panel,
.redesigned-sentiment-view .sentiment-cycle-summary,
.redesigned-sentiment-view .sentiment-trend-panel {
  margin: 0px;

  padding: 0px;

  border: 1px solid var(--r2-line);
}

.redesigned-sentiment-view .sentiment-chart-legend {
  min-height: 34px;

  display: flex;

  gap: 16px;

  align-items: center;

  padding: 8px 14px;

  border-bottom: 1px solid var(--r2-line-soft);

  color: var(--r2-sub);

  font-size: 11px;
}

.sentiment-chart-tooltip {
  position: absolute;

  z-index: 5;

  pointer-events: none;

  padding: 5px 9px;

  border-radius: 6px;

  background: var(--r2-ink);

  color: var(--text-inverse);

  font-size: 11px;

  white-space: nowrap;
}

.sentiment-chart-tooltip b {
  font-weight: 700;
}

.sentiment-phase-block {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 14px 16px 10px;
}

.sentiment-current-phase-badge {
  min-width: 92px;

  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  padding: 10px 16px;

  border: 1px solid var(--accent);

  border-radius: var(--card-radius);

  background: var(--accent-soft);

  text-align: center;
}

.sentiment-current-phase-badge strong {
  display: block;

  color: var(--accent);

  font-size: 19px;

  font-weight: 700;

  line-height: 1.35;
}

.sentiment-current-phase-badge span {
  display: block;

  margin-top: 0;

  color: var(--text-3);

  font-size: var(--fs-aux);

  white-space: nowrap;
}

.sentiment-phase-info {
  min-width: 0px;

  flex: 1 1 0%;
}

.sentiment-phase-info p {
  color: var(--text-2);

  font-size: var(--fs-label);

  line-height: 1.6;
}

.sentiment-phase-info p b {
  color: var(--text-1);

  font-weight: 600;
}

.sentiment-phase-info p .down {
  color: var(--r2-down);
}

.sentiment-phase-info p .up {
  color: var(--r2-up);
}

.sentiment-phase-advice {
  margin-top: 8px;

  padding: 8px 10px;

  border-radius: var(--radius-md);

  background: var(--surface-muted);

  color: var(--text-2);

  font-size: var(--fs-caption);

  line-height: 1.55;
}

.sentiment-feedback-strip {
  display: grid;

  grid-template-columns: 1fr 1fr;

  border-top: 1px solid var(--border);
}

.sentiment-feedback-strip > span {
  min-width: 0px;

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: 2px 6px;

  padding: 9px 14px;

  color: var(--text-3);

  font-size: var(--fs-caption);
}

.sentiment-feedback-strip > span + span {
  border-left: 1px solid var(--border);
}

.sentiment-feedback-strip strong {
  color: var(--text-1);

  font-size: inherit;

  font-weight: 600;

  text-align: left;
}

.sentiment-feedback-strip small {
  overflow: hidden;

  color: var(--text-3);

  font-size: var(--fs-aux);

  text-overflow: ellipsis;

  white-space: nowrap;
}

.redesigned-sentiment-view .sentiment-component-list {
  padding: 8px 16px 14px;
}

.redesigned-sentiment-view .sentiment-component-item {
  padding: 6px 0px 4px;

  border: 0px;
}

.redesigned-sentiment-view .sentiment-component-item > div:first-child {
  display: grid;

  grid-template-columns: 88px minmax(0px, 1fr) 68px;

  align-items: center;

  gap: 10px;

  min-height: 20px;
}

.redesigned-sentiment-view .sentiment-component-item strong {
  color: var(--r2-sub);

  font-size: 12px;

  font-weight: 400;
}

.redesigned-sentiment-view .sentiment-component-item span {
  display: none;
}

.redesigned-sentiment-view .sentiment-component-item b {
  grid-area: 1 / 3;

  color: var(--r2-ink);

  font-size: 12px;

  font-weight: 700;

  text-align: right;
}

.redesigned-sentiment-view .sentiment-component-item b em {
  color: var(--r2-faint);

  font-size: 10px;

  font-style: normal;

  font-weight: 400;
}

.redesigned-sentiment-view .sentiment-component-track {
  grid-area: 1 / 2;

  height: 9px;

  margin: 0px;

  overflow: hidden;

  border-radius: 5px;

  background: var(--surface-muted);
}

.redesigned-sentiment-view .sentiment-component-item:nth-child(n) .sentiment-component-track i,
.redesigned-sentiment-view .sentiment-component-track i {
  display: block;

  height: 100%;

  border-radius: 5px;

  background: linear-gradient(90deg, #93b4f5, var(--r2-blue));
}

.redesigned-sentiment-view .sentiment-component-item small {
  display: block;

  margin: 0px 0px 0px 98px;

  color: var(--r2-faint);

  font-size: 10.5px;

  line-height: 1.45;
}

.redesigned-sentiment-view .sentiment-detail-toolbar {
  min-height: 44px;

  margin: 0px;

  padding: 9px 14px;

  border-bottom: 0px;

  border-radius: var(--r2-radius) var(--r2-radius) 0 0;

  background: var(--surface);
}

.redesigned-sentiment-view .sentiment-detail-toolbar h2 {
  font-size: 14px;

  font-weight: 700;
}

.redesigned-sentiment-view .sentiment-history-frame {
  max-height: none;

  overflow: auto;

  border: 1px solid var(--r2-line);

  border-radius: 0 0 var(--r2-radius) var(--r2-radius);

  background: var(--surface);

  box-shadow: var(--r2-shadow);
}

.redesigned-sentiment-view .sentiment-history-table {
  font-size: 12.5px;
}

.redesigned-sentiment-view .sentiment-history-table td,
.redesigned-sentiment-view .sentiment-history-table th {
  height: 40px;

  padding: 0 10px;

  border-bottom: 1px solid var(--r2-line-soft);
}

.redesigned-sentiment-view .sentiment-history-table thead th {
  height: 36px;

  background: var(--table-header);

  color: var(--text-2);

  font-size: var(--fs-caption);

  font-weight: 600;
}

.redesigned-sentiment-view .sentiment-history-groups th {
  background: var(--table-header);
}

@media (max-width: 1180px) {
  .redesigned-emotion-grid {
    grid-template-columns: minmax(0px, 1fr) 320px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .redesigned-emotion-grid {
    grid-template-columns: 1fr;
  }

  .sentiment-analysis-rail {
    display: grid !important;

    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
  .redesigned-emotion-grid {
    grid-template-columns: 1fr;
  }

  .redesigned-sentiment-view .sentiment-chart-shell {
    height: 270px;

    padding-inline: 8px;
  }

  .redesigned-sentiment-view .sentiment-chart-shell canvas {
    height: 250px;
  }

  .sentiment-phase-block {
    flex-direction: column;
  }

  .sentiment-analysis-rail {
    display: flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .redesigned-sentiment-view * {
    scroll-behavior: auto;
  }
}

.overview-strip:not([data-overview-expanded="true"]) .sentiment-gauge {
  display: none;
}

.overview-strip .sentiment-block .metric-label {
  display: block;

  margin: 0px;

  padding: 0px;

  font-size: 11px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0px;
}

.overview-strip .sentiment-block .sentiment-text {
  display: inline-flex;

  margin: 0px;

  padding: 0 6px;

  font-size: var(--fs-caption);

  font-weight: 500;

  line-height: 18px;

  letter-spacing: 0px;

  align-self: auto;
}

.redesigned-emotion-grid {
  display: grid;

  gap: 12px;

  margin-bottom: 12px;

  border: 0px;

  grid-template-columns: minmax(0px, 1fr) 340px;

  align-items: start;
}

.redesigned-sentiment-view .sentiment-analysis-main,
.redesigned-sentiment-view .sentiment-analysis-rail {
  min-width: 0px;

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.redesigned-sentiment-view .sentiment-chart-shell {
  position: relative;

  padding-bottom: 6px;

  height: 350px;

  padding-top: 12px;
}

.redesigned-sentiment-view .sentiment-chart-shell canvas {
  height: 332px;
}

@media (max-width: 960px) {
  .redesigned-emotion-grid {
    grid-template-columns: minmax(0px, 1fr);
  }
}

.rate-list .row .bar i.zero {
  background: rgb(209, 213, 219);
}

.emo-grid {
  display: grid;

  grid-template-columns: minmax(0px, 1fr) 340px;

  gap: 12px;

  align-items: start;

  margin-bottom: 12px;
}

.overview-strip[data-overview-expanded="true"] .sentiment-block {
  min-height: 0;

  justify-content: center;

  gap: 2px;

  padding: 0 16px;

  flex-direction: column;

  align-items: flex-start;

  border-right: 0;

  background: transparent;
}

#sentimentCycleView .sentiment-history-table tbody td.number {
  text-align: right;

  font-variant-numeric: tabular-nums;
}

#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(3),
#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(4),
#sentimentCycleView .sentiment-history-table tbody td:nth-child(3),
#sentimentCycleView .sentiment-history-table tbody td:nth-child(4) {
  text-align: center;
}

@media (min-width: 768px) {
  #sentimentCycleView.active-view {
    min-height: 0px;

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    overflow: hidden;
  }

  #sentimentCycleView > :is(.sentiment-cycle-toolbar, #sentimentHistoryNotice, .sentiment-cycle-analysis, .sentiment-detail-toolbar) {
    flex: 0 0 auto;
  }

  #sentimentCycleView .sentiment-history-frame {
    min-height: var(--sentiment-history-min-height);

    max-height: none;

    flex: 1 1 auto;
  }
}

@media (min-width: 768px) and (max-height: 1100px) {
  #sentimentCycleView .sentiment-phase-block {
    gap: 12px;

    padding: 10px 12px;
  }

  #sentimentCycleView .sentiment-current-phase-badge {
    padding: 8px 12px;
  }

  #sentimentCycleView .sentiment-phase-advice {
    margin-top: 4px;

    padding: 4px 8px;

    line-height: 1.4;
  }

  #sentimentCycleView .sentiment-feedback-strip > span {
    padding: 4px 10px;
  }

  #sentimentCycleView .sentiment-component-list {
    padding: 4px 16px 8px;
  }

  #sentimentCycleView .sentiment-component-item {
    padding: 4px 0px;
  }

  #sentimentCycleView .sentiment-component-item small {
    display: none;
  }
}

@media (min-width: 768px) {
  :root #sentimentCycleView.active-view {
    height: auto;

    min-height: 0px;

    display: block;

    overflow: visible;
  }

  :root #sentimentCycleView .sentiment-history-frame {
    max-height: none;

    overflow: visible;
  }
}

:root[data-theme="dark"] :is(.overview-strip[data-overview-expanded="true"], .overview-strip[data-overview-expanded="true"] .metric, .overview-strip[data-overview-expanded="true"] .sentiment-block) {
  border-color: var(--line-soft);

  background: var(--surface);
}

:root[data-theme="dark"] :is(.sentiment-cycle-toolbar, .tbl-tools) {
  border-color: var(--line-soft);

  background: var(--surface);
}

:root[data-theme="dark"] :is(.auction-phase-notice) {
  border-color: var(--warning-line-strong);

  background: var(--warning-soft);

  color: var(--warning-color);
}

:root[data-theme="dark"] #sentimentCycleView :is(.sentiment-current-tag, .sentiment-auto-tag, .sentiment-detail-toolbar, .section-toolbar) {
  border-color: var(--border);

  background: var(--surface-muted);

  color: var(--text-secondary);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-component-track {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-ice,
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-repair {
  background: var(--action-soft);

  color: var(--action);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-fermentation {
  background: var(--market-up-soft);

  color: var(--market-up);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-climax {
  background: var(--market-up-soft);

  color: var(--market-up);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-divergence {
  background: var(--warning-soft);

  color: var(--warning-color);
}

:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-retreat {
  background: var(--surface-subtle);

  color: var(--text-secondary);
}

#sentimentCycleView .sentiment-history-frame {
  max-height: var(--sentiment-history-max-height);

  overflow: auto;

  margin-bottom: var(--card-gap);

  padding-bottom: var(--card-gap);
}

@media (min-width: 768px) {
  .redesigned-sentiment-view .sentiment-chart-shell {
    padding-right: 16px;

    padding-left: 16px;
  }
}

@media (min-width: 1024px) {
  .sentiment-cycle-summary {
    grid-template-columns: minmax(270px, 1.25fr) repeat(3, minmax(160px, 1fr));
  }
}

/* Mobile information order: trend, current phase, composition, then history. */
@media (max-width: 767px) {
  #sentimentCycleView .sentiment-cycle-toolbar {
    gap: var(--space-8);
    padding: 0;
  }

  #sentimentCycleView .sentiment-cycle-analysis,
  #sentimentCycleView .redesigned-emotion-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  #sentimentCycleView .sentiment-analysis-main {
    order: 1;
  }

  #sentimentCycleView .sentiment-analysis-rail {
    order: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }

  #sentimentCycleView .sentiment-trend-panel,
  #sentimentCycleView .sentiment-components-panel {
    padding: 0;
  }

  #sentimentCycleView .sentiment-chart-legend {
    gap: var(--space-12);
    padding: 0 var(--space-12);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  #sentimentCycleView .sentiment-chart-shell,
  #sentimentCycleView .sentiment-chart-shell canvas {
    height: var(--mobile-chart-height);
  }

  #sentimentCycleView .sentiment-phase-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-12);
  }

  #sentimentCycleView .sentiment-current-phase-badge {
    min-width: var(--mobile-phase-badge-width);
  }

  #sentimentCycleView .sentiment-detail-toolbar {
    min-height: var(--mobile-touch-size);
    padding: var(--space-8) 0;
  }

  #sentimentCycleView .sentiment-history-frame {
    min-height: var(--mobile-table-min-height);
    max-height: none;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: visible;
  }
}

@media (max-width: 359px) {
  #sentimentCycleView .sentiment-phase-block {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #sentimentCycleView .redesigned-emotion-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #sentimentCycleView .sentiment-analysis-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}