/* css/screens/comments.css — Grand Mumtoz Director · ZARHAL · screen "comments" («Комментарии / Izohlar»), DESIGN-screen-feed §5.4 + VARIETY-RULES.
 * A CHAT-LIKE STREAM, not a list of cards: author medallion with a dept ring and a stamp letter, bubbles with a tail, photo cards of
 * natural height (masonry-like variance), unread bubbles glow until an explicit act, replies as right-aligned brass bubbles, day pills
 * between messages, the composer inside the open thread. Desktop: list 420 px + thread column. Tokens only; transform/opacity motion. */

/* ---------- root ---------- */
.cm { position: relative; }
.cm .error-panel { margin: 12px 0; }

/* ---------- hero: big serif unread number + today's authors as overlapping medallions ---------- */
.cm__head { display: flex; flex-direction: column; gap: 6px; }
.cm-hero { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0 8px; }
.cm-hero__count { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.cm-hero__num { font: 600 52px/52px var(--font-display); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; transition: color var(--t-short); }
.cm-hero__num.is-zero { color: var(--text-3); }
.cm-hero__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 6px; }
.cm-hero__label { font: 600 17px/22px var(--font-display); color: var(--text-1); }
.cm-hero__sub { font-style: italic; }
.cm-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 6px; }
.cm-hero__wrote { white-space: nowrap; }
.cm-hero__medals { display: flex; flex-direction: row-reverse; padding-left: 8px; }
.cm-hero__medals .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3.5px var(--ring); animation: cmPop 320ms var(--e-velvet) both; animation-delay: calc(var(--i, 0) * 60ms); }
.cm-hero__more { color: var(--text-2); font-size: 11px; }
.cm-hero__readall { align-self: flex-start; margin: -6px -8px 0 0; color: var(--accent); }
.cm-hero__readall:disabled { color: var(--text-3); opacity: .6; }

/* ---------- filter rail ---------- */
.cm__segwrap .seg { width: 100%; }
.cm__chips { min-height: 40px; padding: 2px 0; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.cm__chips .chip { flex-shrink: 0; height: 32px; }
.cm__chips .chip .i { color: var(--text-3); }
.cm__chips .chip--selected .i { color: inherit; }
.cm__byline { margin-top: 8px; }
.cm__byline:empty { display: none; }
.cm__more { margin-top: 12px; }
.cm__more:empty { display: none; }

/* ---------- stream ---------- */
.cm__stream { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cm-day { position: relative; display: flex; justify-content: center; margin: 6px 0 -2px; }
.cm-day::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold) 25%, var(--line-gold) 75%, transparent); }
.cm-day > span { position: relative; padding: 0 10px; background: var(--bg-0); font: 700 11px/18px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* message = medallion | bubble */
.cm-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; --dept: var(--text-3); border-radius: var(--r-md); outline: none; }
.cm-msg:focus-visible .cm-msg__bubble { box-shadow: 0 0 0 2px var(--accent-line); }
.cm-msg__medal { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.cm-msg__medal .avatar { display: grid; }
.cm-stamp { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--dept, var(--text-3)); color: var(--text-inverse); font: 700 10px/1 var(--font-display); box-shadow: 0 0 0 2px var(--bg-0); }
.cm-msg__bubble { position: relative; min-width: 0; padding: 9px 12px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; border-top-left-radius: 4px; box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--t-med), border-color var(--t-short), background-color var(--t-short); }
.cm-msg__bubble::before { content: ''; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; background: var(--bg-2); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); transition: border-color var(--t-short); }
/* unread glow — brass halo that fades once seen */
.cm-msg.is-unread .cm-msg__bubble { border-color: var(--line-strong); box-shadow: 0 0 0 1px var(--accent-soft), 0 0 22px -6px var(--accent); }
.cm-msg.is-unread .cm-msg__bubble::before { border-color: var(--line-strong); }
.cm-msg.is-open .cm-msg__bubble, .cm-msg.is-selected .cm-msg__bubble { border-color: var(--accent-line); background: color-mix(in srgb, var(--bg-2) 92%, var(--accent)); }
.cm-msg.is-open .cm-msg__bubble::before, .cm-msg.is-selected .cm-msg__bubble::before { border-color: var(--accent-line); background: color-mix(in srgb, var(--bg-2) 92%, var(--accent)); }
.cm-msg.is-highlight .cm-msg__bubble { box-shadow: 0 0 0 2px var(--accent-line), 0 0 28px -4px var(--accent); }
.cm.is-readall .cm-msg .cm-msg__bubble { transition: box-shadow 700ms var(--e-exit), border-color 700ms var(--e-exit); }
.cm-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.cm-msg__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex-shrink: 0; transition: opacity var(--t-short); }
.cm-msg__name { font: 700 14px/20px var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.cm-msg__role { color: var(--dept, var(--text-2)); }
.cm-msg__room { cursor: pointer; }
.cm-msg__time { margin-left: auto; white-space: nowrap; color: var(--text-3); }
.cm-msg__text { margin-top: 4px; font: 400 14px/20px var(--font-ui); color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-msg:not(.is-unread):not(.is-open):not(.is-selected) .cm-msg__text { color: var(--text-2); }
.cm-msg__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm-msg__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text-3); }
.cm-msg__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-msg__actions .btn--32 { padding: 0 10px; }

/* photo card — natural height (aspect from the loaded image), scales in */
.cm-photo { position: relative; display: block; margin-top: 8px; max-width: 100%; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-3); cursor: zoom-in; outline: none; }
.cm-photo.is-loading { height: var(--ph, 180px); animation: skelPulse 1200ms ease-in-out infinite alternate; }
.cm-photo:not(.is-loading):not(.is-failed) { aspect-ratio: var(--ar, 4 / 3); max-height: 420px; }
.cm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.96); transition: opacity var(--t-med) var(--e-velvet), transform 320ms var(--e-velvet); }
.cm-photo.is-in img { opacity: 1; transform: none; }
.cm-photo:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); }
.cm-photo.is-failed { display: flex; align-items: center; justify-content: center; gap: 8px; height: 96px; color: var(--text-3); font: 500 13px/18px var(--font-ui); cursor: default; }

/* replies — right-aligned brass bubbles under the message */
.cm-msg__replies, .cm-thread__replies { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cm-reply { display: flex; }
.cm-reply--me { justify-content: flex-end; }
.cm-reply__bubble { max-width: 88%; padding: 6px 10px 7px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; border-top-left-radius: 4px; }
.cm-reply--me .cm-reply__bubble { background: var(--accent-soft); border-color: var(--accent-line); border-radius: 12px; border-bottom-right-radius: 4px; }
.cm-reply__who { font: 700 12px/16px var(--font-ui); color: var(--text-1); margin-right: 6px; }
.cm-reply--me .cm-reply__who { color: var(--accent); }
.cm-reply__time { font: 500 11px/16px var(--font-ui); color: var(--text-3); }
.cm-reply__text { font: 400 13px/18px var(--font-ui); color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* composer — inside the open thread */
.cm-composer { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.cm-composer .field { flex: 1; min-width: 0; margin: 0; gap: 0; }
.cm-composer .field__hint, .cm-composer .field__error:empty { display: none; }
.cm-composer .textarea { min-height: 44px; max-height: 160px; padding: 10px 12px; font-size: 15px; line-height: 20px; resize: none; }
.cm-composer .btn { flex-shrink: 0; }
.cm-composer .btn .btn__label { display: none; }
.cm-composer .btn { width: 44px; padding: 0; }
.cm-issue .chip { flex-shrink: 0; }

/* skeleton — medallion + bubbles of two heights */
.cm__skel { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cm__skel-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.cm__skel-medal { width: 40px; height: 40px; border-radius: 50%; }
.cm__skel-bubble { border-radius: 14px; border-top-left-radius: 4px; }
.cm__empty { padding-top: 32px; }

/* ---------- motion signature: new bubbles slide in from above and settle; medallions pop; reduced motion → fades ---------- */
.cm__stream.enter > .cm-msg { animation: cmIn 260ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 10) * 28ms); }
.cm__stream.enter > .cm-day { animation: fadeIn 200ms var(--e-enter) both; animation-delay: calc(min(var(--i, 0), 10) * 28ms); }
.cm-msg.is-new { animation: cmIn 320ms var(--e-enter); }
@keyframes cmIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cmPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .cm__stream.enter > *, html[data-motion="reduced"] .cm-msg.is-new, html[data-motion="reduced"] .cm-hero__medals .avatar { animation: fadeIn 120ms both; }
html[data-motion="reduced"] .cm-photo img { transform: none; transition: opacity 120ms; }
html[data-motion="reduced"] .cm-photo.is-loading { animation: none; }
@media (prefers-reduced-motion: reduce) { .cm-photo img { transform: none; } }

/* ---------- desktop ≥ 900: list 420 px + thread column ---------- */
@media (min-width: 900px) and (min-height: 521px) {
  .cm--desk { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .cm--desk .cm__col--list { min-width: 0; }
  .cm--desk .cm-hero__num { font-size: 44px; line-height: 44px; }
  .cm--desk .cm__chips { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; mask-image: none; }
  .cm--desk .cm-msg { cursor: pointer; }
  .cm--desk .cm-msg__bubble { padding: 8px 10px 9px; }
  .cm--desk .cm-msg__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
  .cm--desk .cm__stream .cm-photo { max-height: 160px; aspect-ratio: auto; height: 120px; }
  .cm--desk .cm__stream .cm-photo.is-loading { height: 120px; }
  .cm--desk .cm__stream .cm-msg__replies { display: none; }
  @media (hover: hover) { .cm--desk .cm-msg:hover .cm-msg__bubble { border-color: var(--line-strong); } }
  /* thread column sticks while the list scrolls */
  .cm__col--thread { position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 60px - 48px); overflow-y: auto; padding: 0 4px 24px 0; border-left: 1px solid var(--line); padding-left: 28px; overscroll-behavior: contain; }
  .cm-thread { display: flex; flex-direction: column; gap: 12px; max-width: 640px; animation: fadeIn 160ms var(--e-velvet); }
  html[data-motion="reduced"] .cm-thread { animation: none; }
  .cm-thread__head { display: flex; align-items: center; gap: 12px; }
  .cm-thread__head .cm-msg__medal { margin-top: 0; }
  .cm-thread__who { flex: 1; min-width: 0; }
  .cm-thread__who .title { font: 600 22px/26px var(--font-display); }
  .cm-thread__text { font: 400 16px/24px var(--font-ui); color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
  .cm-thread .cm-photo { margin-top: 0; max-width: 640px; }
  .cm-thread__replies { margin-top: 0; }
  .cm-thread__actions { display: flex; gap: 8px; }
  .cm-thread .cm-composer { margin-top: 0; }
  .cm-thread .cm-composer .btn { width: auto; padding: 0 16px; }
  .cm-thread .cm-composer .btn .btn__label { display: inline; }
  .cm-roomcard { display: flex; flex-direction: column; gap: 6px; }
  .cm-roomcard .btn { align-self: flex-start; margin-top: 4px; }
  .cm-thread__empty { min-height: 320px; }
}
@media (min-width: 900px) and (min-height: 521px) and (max-width: 1099px) {
  .cm--desk { grid-template-columns: 360px minmax(0, 1fr); gap: 0 20px; }
  .cm__col--thread { padding-left: 20px; }
}