/* Meldix Thoughts v2 — native site/theme styling */
.thoughts-feature { position: relative; }
.thoughts-feature .feature-heading { margin-bottom: 10px; }

.thoughts-panel {
  --thought-duration: 30s;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(82px, auto) 28px;
  column-gap: 14px;
  min-height: 122px;
  padding: 12px 2px 0;
  border-top: 1px solid var(--ui-line, var(--line, rgba(255,255,255,.07)));
  border-bottom: 1px solid var(--ui-line, var(--line, rgba(255,255,255,.07)));
  background: linear-gradient(90deg, var(--ui-hover, rgba(255,255,255,.025)), transparent 62%);
  overflow: hidden;
}

.thoughts-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ui-accent, rgb(var(--accent-rgb,255,95,198))) 38%, transparent 88%);
  opacity: .78;
  pointer-events: none;
}

.thoughts-index {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  user-select: none;
}

.thoughts-index-current {
  color: var(--ui-accent, var(--pink, #fff));
  font: 900 10px/1 var(--mono, monospace);
  letter-spacing: .12em;
  text-shadow: 0 0 16px var(--ui-glow, transparent);
}

.thoughts-index-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent, #fff) 65%, transparent), transparent);
}

.thoughts-quote {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  margin: 0;
  padding: 10px 44px 10px 0;
  color: var(--ui-text, var(--theme-text, #fff));
  transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1), filter .72s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform, filter;
}

.thoughts-quote.is-changing {
  opacity: 0;
  transform: translateY(5px);
  filter: blur(3px);
}

.thoughts-quote-glyph {
  position: absolute;
  right: 10px;
  top: 12px;
  color: color-mix(in srgb, var(--ui-accent, #fff) 48%, var(--ui-muted, #888));
  font: 700 28px/1 Georgia, "Times New Roman", serif;
  opacity: .76;
  user-select: none;
  pointer-events: none;
}

.thoughts-text {
  max-width: 760px;
  color: var(--ui-text, #fff);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.62;
  letter-spacing: .006em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.thoughts-footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 42px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--ui-line, #222) 72%, transparent);
  color: var(--ui-soft, rgba(255,255,255,.45));
  font: 800 8px/1 var(--mono, monospace);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.thoughts-counter { text-align: center; white-space: nowrap; }
.thoughts-interval { text-align: right; padding-right: 4px; white-space: nowrap; }

.thoughts-progress {
  position: relative;
  height: 1px;
  overflow: visible;
  background: var(--ui-line-strong, rgba(255,255,255,.1));
}

.thoughts-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--ui-accent, var(--pink, #fff));
  box-shadow: 0 0 9px var(--ui-glow, transparent);
}

.thoughts-progress > span.is-running {
  animation: thoughtsProgress var(--thought-duration) linear forwards;
}

@keyframes thoughtsProgress { from { width: 0; } to { width: 100%; } }

body.theme-minimal .thoughts-panel::before { opacity: .45; }
body.theme-minimal .thoughts-index-current { text-shadow: none; }
body.theme-glass .thoughts-panel { background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 70%); }
body.theme-cyber .thoughts-panel::before { box-shadow: 0 0 14px var(--ui-glow, transparent); }

@media (max-width: 720px) {
  .thoughts-panel { grid-template-columns: 38px minmax(0,1fr); column-gap: 10px; min-height: 116px; }
  .thoughts-quote { min-height: 78px; padding-right: 32px; }
  .thoughts-quote-glyph { right: 5px; font-size: 23px; }
  .thoughts-text { font-size: 13px; line-height: 1.58; }
  .thoughts-footer { grid-template-columns: 48px minmax(0,1fr) 36px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .thoughts-quote { transition: opacity .18s ease !important; transform: none !important; filter: none !important; }
  .thoughts-progress > span.is-running { animation: none !important; width: 100% !important; }
}