/* chat.css — Mark-chatin uusien lohkojen muotoilu.

   VIIMEISTELTY Task D1:ssä (web-designer, 28.9.2026), F1:n perusmuotoilun
   päälle. Lähde: KOMPONENTTIKIELI_2026-09-28.md luvut 2.2 ja 3.8-3.9,
   SIMON_MAKU.md. Väri/fontti-tokenit ovat OLEMASSA OLEVIA (var(--ink),
   var(--warm) = dark-teeman #34C2AE, sama sävy kuin komponenttikielen
   ehdottama teal, var(--paper*), var(--line*), var(--mono)/var(--display)/
   var(--body)) — ei uusia värejä, ei muutoksia muihin tiedostoihin.

   KOLME KORJAUSTA F1:n pohjalle, kaikki kolme komponenttikielen suoria
   vaatimuksia jotka puuttuivat:
   1) Taulukon ENSIMMÄINEN sarake ei ollut kiinteä (3.8: "puhelimessa
      näkyy vain ensimmäinen sarake" -ongelman korjaus vaatii nimenomaan
      position:sticky, ei vain overflow-x:auto). Lisätty alempana.
   2) Kuvaruudukko käytti auto-fit-minmax(220px,1fr): 780px-levyisessä
      viestissä kolme 220px-sarakettaa MAHTUU vierekkäin, mikä rikkoo
      3.5:n "enintään 2 sarakkeen ruudukko" -rajan. Korjattu kiinteäksi
      2 sarakkeeksi > 480px, 1 sarake sen alla.
   3) Bubblen ENSIMMÄINEN lohko (usein otsikko) sai ylimääräisen
      margin-topin "MARK"-nimikkeen jälkeen — turhaa tyhjää tilaa
      viestin alussa. Nollattu :first-child-säännöllä. */

/* ---- Otsikkotasot (2.2): kokoaskelma, ei vain lihavointi ---- */
.mk-h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  margin: 14px 0 4px;
  color: var(--ink);
}
.mk-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  margin: 12px 0 4px;
  color: var(--ink);
}
.mk-h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 10px 0 2px;
  color: var(--ink);
}

/* ---- Kappale ---- */
.mk-p { margin: 0 0 8px; }
.mk-p:last-child { margin-bottom: 0; }

/* ---- Ensimmäinen lohko viestissä: ei ylimääräistä yläväliä ----
   .who ("MARK") -nimike jättää oman 9px marginin (dashboard.css); mikä
   tahansa lohko sen jälkeen ei tarvitse lisää tyhjää. Korkeampi
   spesifisyys (.bubble > *:first-child) voittaa yksittäiset .mk-h1 jne
   -säännöt riippumatta CSS:n lähdejärjestyksestä. */
.bubble > *:first-child { margin-top: 0; }

/* ---- Listat: sisennys 22px, numerot tabular jotta 9->10 ei loiskaa ----
   app.css nollaa `ol, ul { list-style: none }` koko dashboardissa (rivi 74),
   joten merkit ja numerot on palautettava tässä nimenomaisesti - muuten
   listat näyttävät tasakorkeilta riveiltä ilman että kukaan huomaa miksi. */
ul.mk-lista { list-style: disc; }
ol.mk-lista { list-style: decimal; }
.mk-lista {
  margin: 6px 0;
  padding-left: 22px;
}
.mk-lista li { margin: 4px 0; }
.mk-lista ol.mk-lista, .mk-lista ul.mk-lista { margin: 4px 0; }
ol.mk-lista { font-variant-numeric: tabular-nums; }
.mk-tehtava { list-style: none; margin-left: -22px; padding-left: 0; display: flex; align-items: flex-start; gap: 6px; }
.mk-tehtava input[type="checkbox"] {
  margin-top: 3px;
  /* Yksi korostusväri: oletusnäppäimistön sininen valintamerkki
     kilpailisi teal-korostuksen kanssa (SIMON_MAKU: "kaksi kilpailevaa
     korostusväriä"). */
  accent-color: var(--warm);
}

/* ---- Taulukko (3.8): vaakavieritys omassa kääreessä ---- */
.mk-taulukko-kaare {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: 10px;
  border: 1px solid var(--line-2);
}
.mk-taulukko {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}
.mk-taulukko thead th {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
}
.mk-taulukko td {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  /* EI PAKKORIVITYSTÄ SOLUIHIN (3.8, mobiili 375px) - ilman tätä
     table-layout:auto kutistaa sarakkeet ahtaalle 375px-ruudulle ja
     rivittää jokaisen luvun kahdelle riville ("1"+"4" "14":n sijaan),
     koska width:100% pakottaa taulukon konttiin eikä overflow-x:auto
     ehdi laueta ollenkaan. nowrap tekee sarakkeista kutistumattomia,
     jolloin taulukko ylittää 100%:n luonnostaan ja KÄÄRE vierittää
     vaakasuunnassa niin kuin piti - todennettu screenshotilla 375px,
     8 saraketta. */
  white-space: nowrap;
}
.mk-taulukko .mk-oikea { text-align: right; font-variant-numeric: tabular-nums; }
.mk-taulukko .mk-keski { text-align: center; }
.mk-taulukko .mk-vasen { text-align: left; }

/* ---- Ensimmäinen sarake kiinteä (3.8, mobiili 375px) ----
   Rivin tunniste (esim. nimi/pvm) pysyy näkyvissä vaakavierityksen
   ajan sen sijaan että katoaisi ruudun vasemman reunan taakse — tämä
   on suora korjaus periaatteen 2 "puhelimessa näkyy vain ensimmäinen
   sarake" -vahingolle kääntämällä se tarkoitukselliseksi ankkuriksi.
   Tausta pakko asettaa erikseen (rivit ovat läpinäkyviä, taakse näkyisi
   muuten vierivät sarakkeet); reunaviiva erottaa kiinteän sarakkeen
   liikkuvasta sisällöstä. */
.mk-taulukko th:first-child,
.mk-taulukko td:first-child {
  position: sticky;
  left: 0;
  border-right: 1px solid var(--line-2);
}
.mk-taulukko thead th:first-child { background: var(--paper-2); }
.mk-taulukko tbody td:first-child { background: var(--paper); }
.mk-taulukko-kaare:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* ---- Koodilohko (3.9): oma pinta, ei kappale ---- */
.mk-koodi-kaare {
  position: relative;
  margin: 8px 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--paper-3);
}
.mk-koodi {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  overflow-x: auto;
}
.mk-kopioi {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 11px;
  transition: color .12s ease, border-color .12s ease;
}
.mk-kopioi:hover { color: var(--warm); border-color: var(--warm); }
.mk-kopioi:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.mk-kopioi::before { content: "⧉"; }
.mk-kopioi.mk-kopioitu { color: var(--warm); border-color: var(--warm); }
.mk-kopioi.mk-kopioitu::before { content: "✓"; }

/* ---- Inline-koodi ---- */
.mk-p code, .mk-lista code, .mk-taulukko code, .mk-lainaus code {
  font-family: var(--mono);
  font-size: 90%;
  background: var(--paper-2);
  padding: 2px 5px;
  border-radius: 4px;
}

/* ---- Lainaus ja viiva ---- */
.mk-lainaus {
  margin: 8px 0;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--line-2);
  color: var(--ink-2);
}
.mk-lainaus .mk-p:last-child { margin-bottom: 0; }
.mk-viiva {
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--line-2);
}

/* ---- Sivukuitti: sanatarkka, ei markdown-tulkintaa ---- */
.mk-kuitti {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
}

/* ---- Kuvat: ruudukko, ENINTÄÄN 2 sarakkeen leveys desktopilla (3.5) ----
   auto-fit + minmax(220px,1fr) laski aiemmin kolmeen 220px-sarakkeeseen
   780px-viestissä (3*220 + 2*10 = 680 < 780) - kolmas kuva olisi kutistunut
   ruudukoksi rajattoman rivityksen sijaan siitä, mikä on juuri se virhe
   jonka 3.5 kieltää nimenomaisesti. Kiinteä 2 saraketta korjaa tämän:
   kolmas kuva menee omalle rivilleen täydessä koossa, ei kutistu. */
.mk-kuvat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0;
}
@media (min-width: 481px) {
  .mk-kuvat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* TODENNETTU BUGI (D1b, 28.9.2026): kiinteä 2 saraketta vei YKSITTÄISEN
   kuvan vain ensimmäiseen 372px-sarakkeeseen 754px-kontissa, jolloin
   puolet lukupalstasta jäi tyhjäksi - suora ristiriita 3.4/3.5:n kanssa
   ("yksittäinen kuva täyttää palstan"). :only-child venyttää ainoan
   lapsen molempien sarakkeiden yli; 2+ kuvaa käyttäytyvät ennallaan. */
.mk-kuvat > *:only-child { grid-column: 1 / -1; }
.mk-kuva { margin: 0; }
.mk-kuva img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---- Mobiili 375px: kevyempi rivinkorkeus, tiiviimpi koodi ---- */
@media (max-width: 560px) {
  .mk-koodi { font-size: 12.5px; }
}

/* =====================================================================
   TASK F1b (28.9.2026, Seppo) — MarkKuvat: kuvakortti ja lightbox.
   Lisätty D1:n (web-designer) muotoilun PÄÄLLE, ei muuteta yhtäkään
   ylläolevaa sääntöä. Perusmuotoilu; designer viimeistelee myöhemmin.
   Lähde: web-design-agentti/output/mark-chat/KOMPONENTTIKIELI_2026-09-
   28.md luvut 3.4-3.6 + prototyyppi.html (ajoitukset sanatarkasti
   sieltä). Värit olemassa olevilla muuttujilla, ei uusia sävyjä.
   ===================================================================== */

/* Ruudunlukija-vain-teksti, näkymätön muuten. */
.mk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Elävien kuvakorttien säiliö (Task F1b): sama ruudukko kuin
   mk-kuvat, mutta elää bubbleEl:n ULKOPUOLELLA (markEl:n lapsena) jottei
   striimin uudelleenpiirto (kohde.textContent='') pyyhi sitä pois. ---- */
.mk-kuvat-elava {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 0;
}
.mk-kuvat-elava:empty { display: none; margin: 0; }
@media (min-width: 481px) {
  .mk-kuvat-elava { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sama :only-child-korjaus kuin .mk-kuvat:ssa - ks. perustelu ylempänä. */
.mk-kuvat-elava > *:only-child { grid-column: 1 / -1; }

/* ---- Kuvakortti: kolme tilaa (3.4) ---- */
.mk-kuva {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
}
.mk-kuva[data-tila="alkoi"] { display: block; }
.mk-kuva-varattu {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--paper-2) 30%, var(--paper-3) 50%, var(--paper-2) 70%);
  background-size: 200% 100%;
  animation: mkKuvaShimmer 1.4s ease-in-out infinite;
}
@keyframes mkKuvaShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

.mk-kuva-avaa {
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; text-align: left;
}
.mk-kuva-avaa:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.mk-kuva-img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  opacity: 1; transform: scale(1);
  transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1);
}
/* Ristihäivytys valmistumishetkellä (3.4 kohta 2): kuva syntyy pienestä
   skaalasta täyteen näkyviin sen sijaan että ilmestyisi äkkiä. Luokka
   lisätään hetkeksi juuri kun sisältö vaihtuu, ks. kuvat.js paivitaSisalto. */
.mk-kuva-ristihaivytys .mk-kuva-img { opacity: 0; transform: scale(.98); }

.mk-kuva-virhe {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 18px; color: var(--ink-2);
}
.mk-kuva-virhe-ikoni {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--alert); color: var(--alert); font-size: 13px; font-weight: 700;
}
.mk-kuva-virhe-teksti { margin: 0; font-size: 14.5px; }
.mk-kuva-uudelleen {
  border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 16px;
  background: none; color: var(--ink); cursor: pointer; font-size: 13px;
}
.mk-kuva-uudelleen:hover, .mk-kuva-uudelleen:focus-visible { border-color: var(--warm); color: var(--warm); outline: none; }

/* Inline-kuva (kesken lauseen, ei omalla rivillään): TODENNETTU D1b:ssä
   ettei render.js tuota tähän lainkaan figure.mk-kuva-korttia - annaInline()
   luo PALJAAN <img class="mk-inline-kuva">:n suoraan tekstivirtaan (ei
   avaa/lightbox-nappia, ei latautuu/virhe-tiloja). ".mk-kuva.mk-inline-kuva"
   -sääntö ei siis KOSKAAN osunut mihinkään elementtiin - kuollutta CSS:ää.
   Korjattu kohdistumaan oikeaan elementtiin. Koko lukupalstan levyinen
   valokuva keskellä virkettä olisi juuri se "hallitsematon rytmi" jonka
   slop-portti kieltää, joten kokoa rajoitetaan sekä leveyden että korkeuden
   suunnassa (rajattu peukalonpään kokoinen esikatselu, ei täysi kortti);
   koodarin 220px oli vain leveysrajoitus, mikä olisi sallinut hyvin korkean
   kuvan venyttää koko rivin - päätetty D1b:ssä 180x120, object-fit:cover. */
.mk-inline-kuva {
  display: inline-block; vertical-align: middle;
  max-width: 180px; max-height: 120px; width: auto; height: auto;
  object-fit: cover; border-radius: 8px; margin: 2px 6px;
}

/* ---- Lightbox (3.6) ---- */
.mk-lightbox {
  position: fixed; inset: 0;
  /* z-index-tarkistus 28.9.2026: dashboardin ylin tunnettu modaali on
     .chat-lista (61, dashboard.css). Lightbox menee reilusti yli. */
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.mk-lightbox-tausta {
  position: absolute; inset: 0;
  background: rgba(16,13,10,0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background .26s ease-out, backdrop-filter .26s ease-out;
}
.mk-lightbox.mk-lightbox-auki .mk-lightbox-tausta {
  background: rgba(16,13,10,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* SULKEUTUMINEN (D1b): kuvat.js lisää mk-lightbox-sulkeutuu-luokan ja
   poistaa juuren DOM:ista 200ms:n kuluttua (reduced motion ohittaa tämän
   kokonaan, ks. kuvat.js sulje2), mutta MIKÄÄN sääntö ei aiemmin reagoinut
   luokkaan - tausta ja kehys pysyivät täysin auki-tilassa koko 200ms:n ajan
   ja katosivat sitten yhtäkkiä. "Ympäristö sumenee ennenkuin kuvan sulkee"
   (Simo) tarkoittaa myös sumennuksen POISTUMISEN pitää näkyä. Kehykselle
   !important on pakko: avausanimaatio jättää INLINE transform/opacity/
   transition-arvot elementtiin pysyvästi (kuvat.js rivit ~470-478, ei
   koskettu), ja inline-tyyli voittaa aina tavallisen luokkasäännön
   spesifisyydestä riippumatta - ilman !importantia tämä sääntö ei tekisi
   mitään näkyvää. Nopeampi ja käänteinen easing kuin auki (komponenttikieli
   3.6: "200ms, käänteinen, nopeampi kuin auki"). */
.mk-lightbox.mk-lightbox-sulkeutuu .mk-lightbox-tausta {
  background: rgba(16,13,10,0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background .2s cubic-bezier(.4,0,1,1), backdrop-filter .2s cubic-bezier(.4,0,1,1);
}
.mk-lightbox.mk-lightbox-sulkeutuu .mk-lightbox-kehys {
  transform: scale(.94) !important;
  opacity: 0 !important;
  transition: transform .2s cubic-bezier(.4,0,1,1) !important, opacity .2s cubic-bezier(.4,0,1,1) !important;
}
/* @supports-varapolku (Seppo F1b): jos backdrop-filter ei ole tuettu,
   tummempi tausta korvaa sumennuksen kokonaan. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mk-lightbox.mk-lightbox-auki .mk-lightbox-tausta { background: rgba(16,13,10,0.92); }
}
.mk-lightbox-kehys {
  position: relative; z-index: 1;
  max-width: min(92vw, 1100px); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.mk-lightbox-kuva {
  display: block; max-width: 100%; max-height: min(78vh, 780px);
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.mk-lightbox-sulje {
  position: absolute; top: -44px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.mk-lightbox-sulje:hover, .mk-lightbox-sulje:focus-visible { border-color: var(--warm); color: var(--warm); outline: none; }
.mk-lightbox-nuoli {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.mk-lightbox-edellinen { left: -56px; }
.mk-lightbox-seuraava { right: -56px; }
.mk-lightbox-nuoli:hover, .mk-lightbox-nuoli:focus-visible { border-color: var(--warm); color: var(--warm); outline: none; }
.mk-lightbox-laskuri {
  position: absolute; top: -44px; left: 0;
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.mk-lightbox-toiminnot { display: flex; align-items: center; gap: 18px; }
.mk-lightbox-toiminto {
  border: none; background: none; color: var(--ink-2); cursor: pointer;
  font-size: 13px; font-family: var(--body); padding: 4px 0;
}
.mk-lightbox-toiminto:hover, .mk-lightbox-toiminto:focus-visible { color: var(--warm); outline: none; }
.mk-lightbox-vahvistus { font-size: 13px; color: var(--warm); }

/* Mobiili 375px: täysruutu, toiminnot alareunan kiinteänä rivinä. */
@media (max-width: 560px) {
  .mk-lightbox { padding: 0; }
  .mk-lightbox-kehys { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; justify-content: center; }
  .mk-lightbox-kuva { max-height: calc(100vh - 120px); }
  .mk-lightbox-sulje { top: 12px; right: 12px; }
  /* Desktopilla laskuri kelluu tumman TAUSTAN päällä (kehyksen ULKOPUOLELLA,
     top:-44px), kontrasti on jo riittävä. Mobiilissa kehys täyttää koko
     ruudun ja laskuri siirtyy KUVAN PÄÄLLE (top:12,left:12) - ilman omaa
     taustaa se olisi lukukelvoton vaalean/kirkkaan valokuvan yllä. Sama
     scrim-periaate kuin sulje-napissa (var(--paper-2)). */
  .mk-lightbox-laskuri {
    top: 12px; left: 12px;
    background: rgba(16,13,10,0.55);
    padding: 5px 10px;
    border-radius: 100px;
  }
  .mk-lightbox-edellinen { left: 8px; top: auto; bottom: 70px; transform: none; }
  .mk-lightbox-seuraava { right: 8px; top: auto; bottom: 70px; transform: none; }
  .mk-lightbox-toiminnot {
    position: fixed; left: 0; right: 0; bottom: 0; justify-content: center;
    gap: 28px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(16,13,10,0.9);
  }
}

/* prefers-reduced-motion: ei transformia, 1ms häivytys (komponenttikieli
   2.3: kaikki siirtymät poistuvat paitsi ristihäivytys). */
@media (prefers-reduced-motion: reduce) {
  .mk-kuva-varattu { animation: none; }
  .mk-kuva-img, .mk-lightbox-tausta, .mk-lightbox-kehys {
    transition-duration: .001s !important;
  }
}