/* TraderFa — comment box (phase 22). Used by Views/Shared/_CommentForm.cshtml, _StarRatingPartial,
   _loginToCom, _CommentsEmpty and the analysis page. Loaded by the layout on every page that defines
   @section UsesComments, and by Views/Analysis/Show.cshtml via PageStyles. Tokens only (css/ds/tokens.css). */

/* ── card ── */
.cbx { position: relative; isolation: isolate; margin-bottom: 20px; padding: clamp(16px, 3.5vw, 24px); border-radius: var(--ds-r-xl, 22px);
  background: var(--ds-surface-1); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); text-align: start; }
.cbx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--ds-primary) 8%, transparent), transparent 70%); }
.cbx--guest { padding: 0; overflow: hidden; }
.cbx__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cbx__icon { flex: none; width: 44px; height: 44px; border-radius: var(--ds-r-lg); display: grid; place-items: center; color: var(--ds-primary-ink);
  background: var(--ds-primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-primary) 18%, transparent); }
.cbx__htx { display: grid; gap: 2px; min-width: 0; }
.cbx__title { margin: 0; font-size: 1.05rem; font-weight: var(--ds-fw-black); color: var(--ds-text); line-height: 1.6; }
.cbx__sub { margin: 0; font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.8; }
.cbx__form { display: grid; gap: 16px; }
.cbx__actions { display: flex; justify-content: flex-end; }
.cbx__send { gap: 8px; min-width: 9.5rem; }
.cbx__send svg { transition: transform .35s var(--ds-ease-out); }
.cbx__send:hover svg { transform: translate(-3px, -2px) rotate(-8deg); }
@media (max-width: 479px) { .cbx__actions .cbx__send { width: 100%; } }

/* ── star rating ── */
.cbx-rate { margin: 0; padding: 14px 14px 12px; min-width: 0; border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-lg); display: grid; justify-items: center; gap: 4px;
  background: color-mix(in srgb, var(--ds-surface-2) 60%, transparent); transition: border-color .3s var(--ds-ease), background-color .3s var(--ds-ease); }
.cbx-rate:has(.cbx-rate__in:checked) { border-style: solid; border-color: color-mix(in srgb, var(--ds-gold) 40%, var(--ds-line)); background: color-mix(in srgb, var(--ds-gold-soft) 55%, transparent); }
.cbx-rate__q { float: none; width: auto; padding: 0; margin: 0 0 2px; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); color: var(--ds-text); text-align: center; }
/* DOM order is 5→1; row-reverse lays it out 1→5 left-to-right, so "this and every LOWER star" is
   `label` + all following siblings — pure CSS, no JS needed to fill */
.cbx-rate__stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 0; }
.cbx-rate__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cbx-rate__star { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; cursor: pointer; border-radius: var(--ds-r-md);
  -webkit-tap-highlight-color: transparent; }
.cbx-rate__star svg { fill: transparent; stroke: var(--ds-text-3); stroke-width: 1.6; stroke-linejoin: round; overflow: visible;
  transition: fill .2s var(--ds-ease), stroke .2s var(--ds-ease), transform .25s var(--ds-ease-out), filter .25s var(--ds-ease); }
.cbx-rate__in:focus-visible + .cbx-rate__star { outline: 2px solid var(--ds-focus); outline-offset: 1px; }
.cbx-rate__in:checked + .cbx-rate__star svg, .cbx-rate__in:checked ~ .cbx-rate__star svg {
  fill: var(--ds-gold); stroke: var(--ds-gold); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ds-gold) 45%, transparent)); }
/* hover preview (pointer devices only, so a tap on a phone never leaves a sticky preview): while the
   pointer is over the strip the selection steps back and the preview takes over */
@media (hover: hover) {
  .cbx-rate__stars:hover .cbx-rate__in:checked + .cbx-rate__star svg,
  .cbx-rate__stars:hover .cbx-rate__in:checked ~ .cbx-rate__star svg { fill: transparent; stroke: var(--ds-text-3); filter: none; }
  .cbx-rate__stars:hover .cbx-rate__star.cbx-rate__star:hover svg,
  .cbx-rate__stars:hover .cbx-rate__star:hover ~ .cbx-rate__star svg { fill: color-mix(in srgb, var(--ds-gold) 55%, transparent); stroke: var(--ds-gold); transform: scale(1.1); }
}
.cbx-rate__burst { position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--ds-gold); }
@media (prefers-reduced-motion: no-preference) {
  .cbx-rate__in:checked ~ .cbx-rate__star svg { animation: cbx-wave .45s var(--ds-ease-out) calc((4 - var(--i)) * 45ms) backwards; }
  .cbx-rate__stars .cbx-rate__in:checked + .cbx-rate__star svg { animation: cbx-pop .5s cubic-bezier(.3, 1.7, .5, 1); }
  .cbx-rate__in:checked + .cbx-rate__star .cbx-rate__burst { animation: cbx-burst .6s var(--ds-ease-out); }
}
@keyframes cbx-pop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.28) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes cbx-wave { 0% { transform: scale(.85); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes cbx-burst { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
.cbx-rate__word { min-height: 1.6em; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-3); transition: color .2s var(--ds-ease); }
.cbx-rate:has(.cbx-rate__in:checked) .cbx-rate__word { color: var(--ds-gold-ink); }
.cbx-rate.is-invalid { border-color: var(--ds-danger); border-style: solid; animation: cbx-shake .4s var(--ds-ease); }
@keyframes cbx-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ── textarea ── */
.cbx-field { display: grid; border-radius: var(--ds-r-lg); background: var(--ds-surface-2); border: 1px solid var(--ds-line);
  transition: border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease), background-color .2s var(--ds-ease); }
.cbx-field:focus-within { border-color: var(--ds-primary); background: var(--ds-surface-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 16%, transparent); }
.cbx-field__ta { display: block; width: 100%; min-height: 7.5rem; max-height: 22rem; resize: vertical; padding: 14px 16px 6px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--ds-fs-body); line-height: 2; color: var(--ds-text); field-sizing: content; box-shadow: none; }
/* the whole field shows focus (border + 4px ring via :focus-within), so the legacy global textarea
   outline (css/v2/traderfa-plugins.css, !important) is switched off here only */
.cbx-field .cbx-field__ta:focus, .cbx-field .cbx-field__ta:focus-visible { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
.cbx-field__ta::placeholder { color: var(--ds-text-3); }
.cbx-field__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px 10px; font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }
.cbx-field__count { font-variant-numeric: tabular-nums; flex: none; }
.cbx-field__count.is-near { color: var(--ds-warn); } .cbx-field__count.is-full { color: var(--ds-danger); }
@media (max-width: 479px) { .cbx-field__hint { display: none; } .cbx-field__foot { justify-content: flex-end; } }

/* ── guest prompt ── */
.cbx-login { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 5vw, 34px) clamp(16px, 4vw, 30px); text-align: center; }
/* item 31: .cbx-login__ghost / __gstars / __gline(--s) removed with their markup (_loginToCom.cshtml). */
.cbx-login__in { display: grid; justify-items: center; gap: 10px; max-width: 30rem; margin-inline: auto; }
.cbx-login__icon { width: 56px; height: 56px; border-radius: var(--ds-r-xl); display: grid; place-items: center; color: var(--ds-primary-ink); margin-bottom: 4px;
  background: var(--ds-surface-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-primary) 22%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--ds-primary) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) { .cbx-login__icon { animation: cbx-float 4.5s ease-in-out infinite; } }
@keyframes cbx-float { 50% { transform: translateY(-5px); } }
.cbx-login__title { margin: 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); font-weight: var(--ds-fw-black); color: var(--ds-text); line-height: 1.6; }
.cbx-login__text { margin: 0 0 6px; font-size: var(--ds-fs-sm); line-height: 2; color: var(--ds-text-2); text-wrap: pretty; }
.cbx-login__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.cbx-login__btns .ds-btn { gap: 8px; min-width: 8.5rem; }
@media (max-width: 400px) { .cbx-login__btns .ds-btn { flex: 1 1 0; min-width: 0; } }

/* ── empty state ── */
.cbx-empty { display: grid; justify-items: center; gap: 4px; padding: 30px 18px 34px; border-radius: var(--ds-r-xl, 22px); text-align: center;
  background: var(--ds-surface-1); border: 1px dashed var(--ds-line-strong); }
.cbx-empty__art { margin-bottom: 8px; }
.cbx-empty__art svg { display: block; overflow: visible; }
.cbx-empty__b1 { fill: var(--ds-primary-soft); stroke: color-mix(in srgb, var(--ds-primary) 45%, transparent); stroke-width: 1.5; }
.cbx-empty__b2 { fill: var(--ds-surface-2); stroke: var(--ds-line-strong); stroke-width: 1.5; }
.cbx-empty__dot { fill: var(--ds-primary); }
@media (prefers-reduced-motion: no-preference) {
  .cbx-empty__dot { animation: cbx-typing 1.4s ease-in-out infinite; }
  .cbx-empty__dot:nth-of-type(2) { animation-delay: .18s; } .cbx-empty__dot:nth-of-type(3) { animation-delay: .36s; }
  .cbx-empty__b2 { animation: cbx-float 5s ease-in-out infinite; }
}
@keyframes cbx-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cbx-empty__title { margin: 0; font-size: 1rem; font-weight: var(--ds-fw-black); color: var(--ds-text); }
.cbx-empty__sub { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }

/* ── analysis page wrapper + list ── */
.cbx-wrap { display: grid; gap: 16px; }
.cbx-wrap__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--ds-fs-h4, 1.15rem); font-weight: var(--ds-fw-black); color: var(--ds-text); }
.cbx-wrap__count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: var(--ds-r-pill); display: inline-grid; place-items: center; font-size: var(--ds-fs-2xs);
  color: var(--ds-primary-ink); background: var(--ds-primary-soft); }
.cbx-wrap .cbx { margin-bottom: 0; }
.cbx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cbx-item { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--ds-r-lg); background: var(--ds-surface-1); border: 1px solid var(--ds-line); scroll-margin-top: 96px; }
.cbx-item:target { border-color: var(--ds-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 14%, transparent); }
.cbx-item__av { flex: none; width: 38px; height: 38px; border-radius: var(--ds-r-md); display: grid; place-items: center; font-weight: var(--ds-fw-black);
  color: var(--ds-primary-ink); background: var(--ds-primary-soft); }
.cbx-item__body { min-width: 0; display: grid; gap: 4px; }
.cbx-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cbx-item__name { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); color: var(--ds-text); overflow-wrap: anywhere; }
.cbx-item__date { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }
.cbx-item__text { margin: 0; font-size: var(--ds-fs-sm); line-height: 2; color: var(--ds-text-2); white-space: pre-line; overflow-wrap: anywhere; }