/* ============================================================================
   Sadaļa "Pazīstama situācija": kartītes pa kreisi, darba čats pa labi.

   Konsole der tikai tur, kur temats ir kods. Šeit tā vietā ir uzņēmuma iekšējā
   grupas saruna: trīs kolēģi un pats lasītājs, brīdis, kurā viņiem pašiem
   kļūst skaidrs, ka kaut kas nestrādā. JKonsult sarunā nav vispār, jo kartītes
   blakus jau pasaka, ko dara JKonsult; pateikt to vēlreiz burbulī nozīmētu
   likt cilvēkam vienu un to pašu lasīt divreiz.

   Panelis ir aria-hidden, tāpat kā konsole: tā ir ilustrācija, ne saturs.
   ==========================================================================*/

.situ-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
/* Trīs kartītes blakus kļūst par trim viena zem otras, jo blakus tām tagad
   stāv panelis. */
.situ-cols .grid-3 { display: flex; flex-direction: column; gap: 14px }

.jkch {
  background: #EFE7DA; border: 1px solid #E0D4C0; border-radius: 12px;
  position: relative; overflow: hidden;
  /* Augstumu nosaka KARTITES blakus, un panelis tam seko. min-height ir tikai
     gridsla tam gadijumam, ja panelis kadreiz stavetu viens pats. */
  height: 100%; min-height: 300px;
  display: flex; flex-direction: column;
}
.jkch-bar {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border-bottom: 1px solid rgba(14, 18, 17, .07); flex: 0 0 auto;
}
/* Trīs sejas, ne viena: pēc joslas vien jābūt skaidram, ka tā ir grupa. */
.jkch-avs { display: flex; flex: 0 0 auto; padding-right: 9px }
.jkch-avs i {
  width: 28px; height: 28px; border-radius: 50%; margin-right: -9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600;
  font-style: normal; color: #F4EFE6; border: 2px solid #EFE7DA;
}
.jkch-avs i:nth-child(1) { background: #3F6B52 }
.jkch-avs i:nth-child(2) { background: #7A5C3A }
.jkch-avs i:nth-child(3) { background: #6B5570 }

.jkch-nm { font-family: 'Inter Tight', sans-serif; font-size: 14.5px; font-weight: 600; color: #1B211E }
.jkch-st {
  display: block; font-size: 11px; color: #7C7365; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.jkch-live {
  margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8072;
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.jkch-live i { width: 6px; height: 6px; border-radius: 50%; background: #57A85B; animation: jkchBlip 1.8s infinite }
@keyframes jkchBlip { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* Vecās ziņas aizslīd augšā un pakāpeniski izgaist, nevis tiek nogrieztas uz
   pusēm. Tas pats, ko dara konsole ar vecajām rindām. */
.jkch-body {
  flex: 1 1 0; min-height: 0; padding: 14px 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  transition: opacity .42s;
}
/* Beigusies saruna nodziest visa reizē. Bez tā nākamā saruna sāktos zem
   iepriekšējās, un abas kopā izskatītos pēc vienas garas, kurā cilvēki
   atbild cits citam bez sakara. */
.jkch-body.jkch-out { opacity: 0 }

.jkch-m {
  max-width: 84%; padding: 9px 13px; font-size: 13.5px; line-height: 1.45;
  border-radius: 16px; opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .35s, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.jkch-m.on { opacity: 1; transform: none }
.jkch-a {
  align-self: flex-start; background: #fff; color: #26302B;
  border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(14, 18, 17, .07);
}
.jkch-b {
  align-self: flex-end; background: #1E3028; color: #EFE7DA; border-bottom-right-radius: 5px;
}
/* Vārds tikai virs pirmās rindas pēc runātāja maiņas, tāpat kā īstā grupā. */
.jkch-who {
  display: block; font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600; line-height: 1.3; margin-bottom: 2px;
}
.jkch-p0 .jkch-who { color: #3F6B52 }
.jkch-p1 .jkch-who { color: #7A5C3A }
.jkch-p2 .jkch-who { color: #6B5570 }

.jkch-t {
  align-self: flex-start; background: #fff; border-radius: 16px; padding: 11px 14px;
  display: flex; gap: 4px; box-shadow: 0 1px 2px rgba(14, 18, 17, .07);
}
.jkch-t i { width: 6px; height: 6px; border-radius: 50%; background: #B6AC9C; animation: jkchDot 1.1s infinite }
.jkch-t i:nth-child(2) { animation-delay: .16s }
.jkch-t i:nth-child(3) { animation-delay: .32s }
@keyframes jkchDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5 }
  30% { transform: translateY(-4px); opacity: 1 }
}

/* Uz telefona panelim vairs nav kartisu, kas to izstieptu, tapec augstums
   janorada pasam. Ar 300px sesu rindu saruna neietilpa: mereju, ka virs loga
   augsmalas palika lidz 214px teksta, tatad no sarunas redzeja pedejas divas
   rindas. Sis skaitlis ir merits, ne minets, un to pashu dara clip.mjs. */
@media (max-width: 900px) {
  .situ-cols { grid-template-columns: 1fr }
  .jkch { min-height: 545px }
  .jkch-m { font-size: 12.5px; line-height: 1.42; max-width: 88% }
}
@media (prefers-reduced-motion: reduce) {
  .jkch-m, .jkch-body { transition: none }
  .jkch-live i, .jkch-t i { animation: none }
}