/* Ailex 1.7.0 G2 — schermen (schermen.js): kijker, geluidskaart, jasje, profiel, thema's.
   Zelfde game-stijl als G1 (dikke inktrand, harde schaduw onder, ronde letter); kleuren uit de variabelen van speelgoed.css.
   Rustig (.ju-rustig), prefers-reduced-motion en lage accu: geen beweging (onderaan). */
.ic.mi { fill: initial; stroke: none; }
.mi { width: 24px; height: 24px; flex: none; }
.mi.groot { width: 40px; height: 40px; }
.mi.reus { width: 96px; height: 96px; }
.lamp.aan.draait .ic.mi { animation: zw-klop 1.2s ease-in-out infinite; }   /* lijst Camila punt 4: laptop en hamer draaien niet */
.sg-menu-lijst [data-sg-doe] { display: flex; align-items: center; gap: 10px; }
.sg-menu-lijst [data-sg-doe] .mi { width: 22px; height: 22px; }

.sch-kop { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.sch-kop b { display: block; font-size: 1.15em; color: var(--ink); }
.sch-kop small { display: block; color: var(--m3g-dim, #6B6F99); line-height: 1.35; }
.sch-uitleg { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--bg1); color: var(--ink); font-size: .92em; line-height: 1.4; }
.sch-melding { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 12px; border-radius: 16px; border: 1px solid var(--ax-rand);
  background: var(--kaart); color: var(--ink); box-shadow: var(--ax-diep); }
.sch-melding.goed { background: color-mix(in srgb, var(--munt) 22%, var(--kaart)); }
.sch-melding.fout { background: color-mix(in srgb, var(--roze) 18%, var(--kaart)); }
.sch-knoppen { display: grid; gap: 10px; }
.sch-k { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-size: 1.02em; }

/* 10 schatkist */
@keyframes sch-hup { 0% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.97) rotate(2deg); } 100% { transform: none; } }

/* 11 kijker en geluidskaart */
.sch-prijs { cursor: zoom-in; animation: sch-prijs .55s cubic-bezier(.3, 1.5, .5, 1) 1; border-radius: 12px; max-width: 100%; }
@keyframes sch-prijs { 0% { transform: scale(.6) rotate(-4deg); opacity: 0; } 60% { transform: scale(1.06) rotate(1deg); opacity: 1; } 100% { transform: none; } }
.sch-kijker { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(20, 22, 50, .92); touch-action: none; overflow: hidden; }
.sch-kijker img { max-width: 100vw; max-height: 100vh; transform-origin: center; touch-action: none; user-select: none; }
.sch-kijker-dicht { position: absolute; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); left: 12px; min-height: 48px; padding: 0 18px; border-radius: 24px;
  border: 1px solid var(--ax-rand); background: var(--geel); color: #262A4D; font: 800 1em var(--sg-letter); box-shadow: var(--ax-diep); }
.sch-kijker-tip { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0; color: #fff; font: 700 .9em var(--sg-letter); opacity: .8; }
.sch-geluid { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--ax-rand);
  background: var(--kaart); box-shadow: var(--ax-diep); }
.sch-speel { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ax-rand-sterk); background: var(--munt); display: grid; place-items: center; }
.sch-speel i { width: 0; height: 0; border-left: 15px solid #262A4D; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.sch-geluid.speelt .sch-speel i { width: 14px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, #262A4D 0 5px, transparent 5px 9px, #262A4D 9px); }
.sch-geluid-in { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sch-geluid-in b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-geluid-in input { width: 100%; accent-color: var(--blauw); }


/* 13 vandaag */

/* 17/30 Wat ik deed */
@keyframes sch-los { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
.sch-deed { margin: 8px 0 0; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); padding: 4px 10px; }
.sch-deed summary { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; }
.sch-deed summary .mi { width: 18px; height: 18px; }
.sch-deed ol { margin: 0 0 6px; padding-left: 20px; }
.sch-deed li { color: var(--ink); line-height: 1.4; }
.sch-deed time { font-weight: 800; color: var(--blauwdd); margin-right: 6px; }   /* AX-09: was --blauw (4,17 op wit; zee 3,68, zon 2,70) */

/* 19 oude gesprekken */
.sch-gb { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px 12px; }
.sch-gb .pl-k { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.sch-gb .mi { width: 18px; height: 18px; }
.sch-gb .pl-inv { flex: 1 1 100%; }

/* 20 nieuw jasje */
.sch-jasje { position: fixed; left: 12px; right: 12px; bottom: calc(var(--sg-onder, 112px) + 8px); z-index: 8500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px; border-radius: 20px; border: 1px solid var(--ax-rand); background: var(--geel); color: #262A4D; box-shadow: var(--ax-diep); animation: sch-prijs .6s cubic-bezier(.3, 1.5, .5, 1) 1; }
.sch-jasje > span { flex: 1 1 180px; display: grid; gap: 2px; }
.sch-jasje small { line-height: 1.35; }
.sch-jasje > span { flex-basis: calc(100% - 80px); min-width: 0; }
.sch-jasje > .pl-k { flex: 1 1 40%; min-width: 0; white-space: nowrap; }   /* basis 40%: past niet naast de tekst, dus samen op een eigen regel eronder */

/* 27 radio */
.sch-radiochip { position: fixed; right: 12px; top: calc(var(--sg-kop, 84px) + 6px); z-index: 8400; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: 22px; border: 1px solid var(--ax-rand); background: var(--munt); color: #262A4D; font: 800 .85em var(--sg-letter); box-shadow: var(--ax-diep); }
.sch-radiochip .mi { width: 18px; height: 18px; }

/* 34 thema's */
.sch-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sch-skin { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: 16px; border: 1px solid var(--ax-rand); background: var(--kaart);
  color: var(--ink); font: 800 .9em var(--sg-letter); }
.sch-skin[aria-pressed="true"] { outline: 3px solid var(--blauw); outline-offset: 2px; }
.sch-staal { display: flex; gap: 2px; }
.sch-staal i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #262A4D; }
.sch-voorbeeld { display: grid; gap: 6px; margin: 12px 0; padding: 12px; border-radius: 18px; border: 1px solid var(--ax-rand); background: var(--kaart); box-shadow: var(--ax-diep); }
.sch-vb-kopje { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 2px 10px 2px 4px; border-radius: 14px; background: var(--blauw); color: #fff; font-weight: 800; }
.sch-vb-kopje .mi { width: 20px; height: 20px; }
.sch-vb-knoppen { display: flex; gap: 8px; }
.sch-vb-knoppen i { font-style: normal; padding: 6px 14px; border-radius: 14px; border: 1.5px solid var(--ax-rand-sterk); background: var(--munt); font-weight: 800; color: #262A4D; }
.sch-vb-knoppen i + i { background: var(--roze); color: #fff; }
html[data-skin="zee"] { --blauw: #1E88E5; --blauwd: #1976D2; --blauwdd: #0D47A1; --roze: #00ACC1; --rozed: #0097A7; --rozedd: #006064; --munt: #26C6DA; --muntd: #00ACC1; --geel: #FFD54F; --geeld: #FFB300; --lila: #4FC3F7; --lilad: #039BE5; }
html[data-skin="bos"] { --blauw: #2E7D32; --blauwd: #1B5E20; --blauwdd: #114417; --roze: #8D6E63; --rozed: #6D4C41; --rozedd: #4E342E; --munt: #66BB6A; --muntd: #43A047; --geel: #FFB300; --geeld: #FF8F00; --lila: #9CCC65; --lilad: #7CB342; }
html[data-skin="zon"] { --blauw: #F57C00; --blauwd: #EF6C00; --blauwdd: #BF360C; --roze: #E53935; --rozed: #C62828; --rozedd: #8E1C1C; --munt: #FFB300; --muntd: #FFA000; --geel: #FFE082; --geeld: #FFCA28; --lila: #FF8A65; --lilad: #F4511E; }
html[data-skin="bes"] { --blauw: #8E24AA; --blauwd: #7B1FA2; --blauwdd: #4A148C; --roze: #D81B60; --rozed: #C2185B; --rozedd: #880E4F; --munt: #BA68C8; --muntd: #AB47BC; --geel: #FFCA28; --geeld: #FFB300; --lila: #CE93D8; --lilad: #BA68C8; }
html[data-skin="nacht"] { --blauw: #3949AB; --blauwd: #303F9F; --blauwdd: #1A237E; --roze: #5E35B1; --rozed: #512DA8; --rozedd: #311B92; --munt: #26A69A; --muntd: #00897B; --geel: #FFD740; --geeld: #FFC400; --lila: #7986CB; --lilad: #5C6BC0; }
html[data-skin="zee"] { --bg1: #D6EEFF; --bg2: #E3FAFB; }
html[data-skin="bos"] { --bg1: #E2F2DF; --bg2: #F4EEDC; }
html[data-skin="zon"] { --bg1: #FFEBD2; --bg2: #FFF6D8; }
html[data-skin="bes"] { --bg1: #F1DDF7; --bg2: #FCE1EC; }
html[data-skin="nacht"] { --bg1: #D9DCF2; --bg2: #E4DDF4; }

/* Rustig, minder beweging, lage accu: alles stil */
.ju-rustig .sch-prijs, .ju-rustig .sch-jasje { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sch-prijs, .sch-jasje { animation: none !important; transition: none !important; }
}

/* 1.7.0 G3b: de knop onder Moppies antwoord die de telefoon iets laat doen (telefoonknop.js) en gedeelde plaatjes */
.ailex-bedien { display: grid; gap: 6px; margin-top: 10px; }
.ailex-bedien-k { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ax-rand);
  border-radius: 16px; font-size: 14px !important; box-shadow: var(--ax-diep); }
.ailex-bedien-k:disabled { opacity: .7; }
.ailex-bedien small { color: var(--m3g-dim, #6B6F99); }
.ailex-bedien.klaar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--ax-rand);
  background: color-mix(in srgb, var(--munt) 22%, var(--kaart)); font-weight: 700; }
.ailex-bedien-zin { margin: 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--roze) 18%, var(--kaart)); line-height: 1.35; }
.ailex-gedeeld-rij { display: flex; gap: 8px; flex: 1 1 100%; }
.ailex-gedeeld-img { width: 64px; height: 64px; padding: 0; border: 1px solid var(--ax-rand); border-radius: 12px; overflow: hidden; background: var(--kaart); }
.ailex-gedeeld-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 23-10-2026 (klus "Ailex kleurrijk en compleet"): Nieuws op Vandaag en als eigen scherm, met foto per bericht */

/* 23-10-2026 (check Ailex): radiokaart in de chat (radiokaart.js), in de Radio-kleur (rood, zoals #sheet[data-blad="radio"]) */
.ailex-radio { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 18px; background: #E03131; color: #FFFFFF; box-shadow: var(--ax-diep); }
.ailex-radio-kop { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ailex-radio-kop small { margin-left: auto; font-weight: 700; color: #FFFFFF; }
.ailex-radio .ailex-radio-k { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 14px;
  background: #FFFFFF !important; color: #AE2222 !important; font-weight: 800; font-size: 15px !important; border: 0; }
.ailex-radio-rij { display: flex; flex-wrap: wrap; gap: 6px; }
.ailex-radio .ailex-radio-z { min-height: 44px; padding: 6px 12px; border-radius: 12px; background: #AE2222 !important; color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .55); font-size: 13px !important; }


/* 1.8.17 Profiel (schermen.js profielHtml): twee tekstvelden, 16 px tegen inzoomen, tikvlakken minstens 48 px */
.sch-profiel form { display: grid; gap: 8px; margin-top: 14px; }
.sch-profiel .sch-veld { width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px; font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.sch-profiel .sch-k { min-height: 48px; }