/* kraken_mangaka — layout structurel du Mangaka. Couleurs via tokens --kr-mangaka-* (defauts encre
   sur papier, surchargeables par le skin hote). Le ROULEAU webtoon a gauche (un seul papier continu,
   les cases se FONDENT et se superposent, sans coupure — direction Max 23/07), le PUPITRE d'ecriture
   a droite, colle a l'ecran. Le texte deja dessine se colore dans le champ (miroir sous textarea). */
:root {
  --kr-mangaka-papier: #ffffff;
  --kr-mangaka-fond: #f4f2ec;      /* table a dessin, leger grain chaud */
  --kr-mangaka-encre: #16181d;
  --kr-mangaka-ligne: #d9d5ca;
  --kr-mangaka-muted: #6b7280;
  --kr-mangaka-accent: #b3271e;    /* le sceau rouge du mangaka */
  /* Les 3 etats du texte (Max 24/07). Teintes pales : le texte a l'encre doit rester parfaitement
     lisible PAR-DESSUS (contraste AA conserve). */
  --kr-mangaka-scene: #cde9c4;     /* VERT  : pris en compte dans le webtoon */
  --kr-mangaka-vol: #ffe08a;       /* JAUNE : en preparation chez l'IA */
  --kr-mangaka-attente: transparent; /* BLANC : pas encore transfere a l'IA */
}

.kr-mangaka { display: flex; gap: 24px; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 20px 16px 60px; color: var(--kr-mangaka-encre);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; background: var(--kr-mangaka-fond); }

.kr-mangaka-rouleau { flex: 3; min-width: 0; }
.kr-mangaka-titre h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: 0.02em; }
.kr-mangaka-titre h1 .kr-mangaka-sceau { color: var(--kr-mangaka-accent); }
.kr-mangaka-titre p { margin: 0 0 18px; color: var(--kr-mangaka-muted); }

/* Le rouleau : UN papier continu ; les cases n'ont ni cadre ni fond propre (canvas transparents),
   elles se chevauchent legerement et alternent un petit decalage lateral : le fil se lit comme une
   planche, pas comme une galerie. */
.kr-mangaka-strip { display: flex; flex-direction: column; background: var(--kr-mangaka-papier);
  box-shadow: 0 2px 14px rgba(22, 24, 29, 0.08); padding: 0 0 30px;
  width: 100%; max-width: 620px; margin: 0 auto; }
/* UN SEUL RUBAN QUI DESCEND (Max 24/07 : « presque un seul et unique dessin continu »). Les cases
   etaient a 88 % de large, decalees alternativement et chevauchantes : on lisait une SUITE d'images.
   Pleine largeur et jointives, le rouleau devient une colonne continue — c'est la forme meme du
   webtoon, et ca ne coute pas un octet de GPU. Les formats (portrait / paysage / carre) donnent
   desormais le rythme a la place du decalage. */
/* La trame est dimensionnee en CELLULES de grille : plus la case est large a l'ecran, plus les
   points grossissent et plus le noir pese (finding Ripley 24/07 — le passage en pleine largeur a
   AGGRAVE la lisibilite sur grand ecran). On borne donc la LARGEUR DE LECTURE : au-dela, le ruban
   reste centre. C'est aussi la regle des vrais webtoons, qui se lisent en colonne etroite. */
.kr-mangaka-panel { width: 100%; align-self: stretch; margin: 0; }
.kr-mangaka-panel + .kr-mangaka-panel { margin-top: 0; }
.kr-mangaka-texte { position: relative; z-index: 2; align-self: center; max-width: 70%;
  font-size: 13px; line-height: 1.45; color: var(--kr-mangaka-muted); font-style: italic;
  padding: 1px 10px; background: rgba(255, 255, 255, 0.82); white-space: pre-wrap; }

/* Bulles de dialogue : lettrage manga, posees dans le coin le moins encre de la case. */
.kr-mangaka-bulle { position: absolute; z-index: 3; max-width: 46%; padding: 10px 14px;
  background: var(--kr-mangaka-papier); border: 2.5px solid var(--kr-mangaka-encre);
  border-radius: 50% / 42%; font-size: 14px; font-weight: 700; line-height: 1.3;
  text-align: center; animation: kr-mangaka-pop 0.25s ease-out; }
.kr-mangaka-bulle-tl { top: 4%; left: 4%; }
.kr-mangaka-bulle-tr { top: 4%; right: 4%; }
.kr-mangaka-bulle-bl { bottom: 6%; left: 4%; }
.kr-mangaka-bulle-br { bottom: 6%; right: 4%; }
@keyframes kr-mangaka-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── BEAT SANS DESSIN (Max 24/07) : « parfois juste une bulle de dialogue perdue, un personnage qui
   parle sans decor, puis on descend et un autre repond ». La bulle vit alors SEULE dans le rouleau,
   sur le papier, alternee gauche/droite : en descendant, le lecteur sent un ECHANGE. C'est aussi la
   respiration du webtoon — et ca ne coute aucun GPU, donc ca tombe instantanement. */
.kr-mangaka-libre { display: flex; width: 88%; padding: 10px 0; }
.kr-mangaka-libre-g { align-self: flex-start; margin-left: 4%; justify-content: flex-start; }
.kr-mangaka-libre-d { align-self: flex-end; margin-right: 4%; justify-content: flex-end; }
.kr-mangaka-libre + .kr-mangaka-libre { margin-top: -4px; }
.kr-mangaka-bulle-libre, .kr-mangaka-pensee-libre { max-width: 78%; padding: 12px 18px;
  background: var(--kr-mangaka-papier); font-size: 15px; line-height: 1.35;
  animation: kr-mangaka-pop 0.28s ease-out; }
.kr-mangaka-bulle-libre { border: 2.5px solid var(--kr-mangaka-encre); border-radius: 46% / 40%;
  font-weight: 700; }
.kr-mangaka-pensee-libre { border: 2px dashed var(--kr-mangaka-encre); border-radius: 50% / 46%;
  font-style: italic; }

/* BULLE DE PENSEE : le nuage. Meme placement que la parole (coins libres) mais bord ondule et
   trait plus leger — on doit voir d'un coup d'oeil que c'est pense, pas dit. */
.kr-mangaka-pensee { position: absolute; z-index: 3; max-width: 44%; padding: 10px 14px;
  background: var(--kr-mangaka-papier); border: 2px dashed var(--kr-mangaka-encre);
  border-radius: 50% / 46%; font-size: 13.5px; font-style: italic; line-height: 1.3;
  text-align: center; animation: kr-mangaka-pop 0.3s ease-out; }
.kr-mangaka-pensee-tl { top: 6%; left: 5%; }
.kr-mangaka-pensee-tr { top: 6%; right: 5%; }
.kr-mangaka-pensee-bl { bottom: 8%; left: 5%; }
.kr-mangaka-pensee-br { bottom: 8%; right: 5%; }

/* ONOMATOPEE : elle ne se range pas dans un coin, elle TRAVERSE la case — c'est l'evenement lui
   meme. Encre pleine, contour blanc pour rester lisible par-dessus n'importe quel dessin. */
.kr-mangaka-onoma { position: absolute; z-index: 4; left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-size: clamp(28px, 9vw, 76px); font-weight: 900; letter-spacing: 0.03em;
  color: var(--kr-mangaka-encre); -webkit-text-stroke: 6px var(--kr-mangaka-papier);
  paint-order: stroke fill; text-transform: uppercase; pointer-events: none;
  animation: kr-mangaka-boum 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes kr-mangaka-boum {
  from { transform: translate(-50%, -50%) rotate(-11deg) scale(0.3); opacity: 0; }
  to   { transform: translate(-50%, -50%) rotate(-11deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kr-mangaka-onoma { animation: none; } }

.kr-mangaka-pupitre { flex: 2; min-width: 300px; max-width: 460px; position: sticky; top: 84px;
  align-self: flex-start; display: flex; flex-direction: column; gap: 10px; }
.kr-mangaka-status { min-height: 20px; margin: 0; font-style: italic; font-size: 14px;
  color: var(--kr-mangaka-muted); }

/* Le scribe : textarea a fond TRANSPARENT au-dessus d'un miroir qui porte le meme texte ; le
   texte porte 3 etats de couleur (scene = vert, vol = ambre, attente = jaune) -> on voit ou en est
   le Mangaka dans sa reflexion, en direct.
   Miroir et textarea DOIVENT partager exactement metrique, padding et wrap. */
.kr-mangaka-scribe { position: relative; }
.kr-mangaka-story, .kr-mangaka-miroir { width: 100%; min-height: 260px; padding: 12px 14px;
  font: 15px/1.55 system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: normal;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
.kr-mangaka-miroir { position: absolute; inset: 0; overflow: hidden; color: transparent;
  background: var(--kr-mangaka-papier); border: 1px solid transparent; border-radius: 8px; }
.kr-mangaka-miroir .kr-mangaka-scene { background: var(--kr-mangaka-scene); border-radius: 3px; }
.kr-mangaka-miroir .kr-mangaka-attente { background: var(--kr-mangaka-attente); border-radius: 3px; }
.kr-mangaka-miroir .kr-mangaka-vol { background: var(--kr-mangaka-vol); border-radius: 3px;
  animation: kr-mangaka-reflexion 1.4s ease-in-out infinite; }
/* Le chunk en cours d'examen respire : l'attente devient visible sans texte de statut. */
@keyframes kr-mangaka-reflexion { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .kr-mangaka-miroir .kr-mangaka-vol { animation: none; } }
.kr-mangaka-story { position: relative; z-index: 1; resize: vertical; background: transparent;
  color: var(--kr-mangaka-encre); border: 1px solid var(--kr-mangaka-ligne); border-radius: 8px; }
.kr-mangaka-story:focus { outline: 2px solid var(--kr-mangaka-encre); }

.kr-mangaka-send { border: 2px solid var(--kr-mangaka-encre);
  background: transparent; color: var(--kr-mangaka-encre); border-radius: 8px; padding: 6px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.kr-mangaka-send:hover { background: var(--kr-mangaka-accent); border-color: var(--kr-mangaka-accent); color: #fff; }
.kr-mangaka-send:disabled { opacity: 0.5; cursor: wait; }

/* Amorces : trois idees pour demarrer sans reflechir (P1 accueil). Disparaissent des qu'on ecrit ? Non :
   inertes si le champ est occupe (le JS refuse), assez discretes pour ne pas gener. */
.kr-mangaka-amorces { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-mangaka-amorce { border: 1px dashed var(--kr-mangaka-ligne); background: var(--kr-mangaka-papier);
  color: var(--kr-mangaka-muted); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.kr-mangaka-amorce:hover { border-color: var(--kr-mangaka-accent); color: var(--kr-mangaka-accent); }

/* Rang d'actions : PDF + copier le lien (discrets) + Dessine ! (l'action franche a droite). */
.kr-mangaka-actions { display: flex; align-items: center; gap: 10px; }
.kr-mangaka-pdf, .kr-mangaka-copier { border: 1px solid var(--kr-mangaka-ligne); background: transparent;
  color: var(--kr-mangaka-muted); border-radius: 8px; padding: 5px 12px; font-size: 12.5px;
  text-decoration: none; cursor: pointer; }
.kr-mangaka-pdf:hover, .kr-mangaka-copier:hover { color: var(--kr-mangaka-encre); border-color: var(--kr-mangaka-encre); }
.kr-mangaka-auto { border: 1px solid var(--kr-mangaka-ligne); background: transparent;
  color: var(--kr-mangaka-muted); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.kr-mangaka-auto:hover { color: var(--kr-mangaka-encre); border-color: var(--kr-mangaka-encre); }
/* Auto ENCLENCHE : le bouton devient le sceau rouge et respire — on voit d'un coup d'oeil que la
   plume n'est plus dans la main du lecteur. */
.kr-mangaka-auto[aria-pressed="true"] { background: var(--kr-mangaka-accent); border-color: var(--kr-mangaka-accent);
  color: #fff; animation: kr-mangaka-reflexion 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kr-mangaka-auto[aria-pressed="true"] { animation: none; } }
.kr-mangaka-actions .kr-mangaka-send { margin-left: auto; }
.kr-mangaka-lien { margin: 0; font-size: 11.5px; color: var(--kr-mangaka-muted); }

/* La case demo d'accueil : marquee comme un echauffement, jamais confondue avec l'histoire. */
.kr-mangaka-demo { opacity: 0.9; }
.kr-mangaka-demo::before { content: "✒️ échauffement du Mangaka : écris et il dessinera TON histoire";
  position: absolute; top: 6px; left: 10px; z-index: 3; font-size: 12px; font-style: italic;
  color: var(--kr-mangaka-muted); background: rgba(255, 255, 255, 0.85); padding: 2px 8px; }

/* TÉLÉPHONE (Max 23/07, « utilisable et agréable aussi sur téléphone ») : le pupitre devient une
   BARRE D'ÉCRITURE fixée en bas, façon chat — on écrit au pouce, le rouleau défile derrière et le
   scroll-suiveur montre le pinceau au travail. 16px dans le champ (sinon iOS zoome au focus). */
@media (max-width: 900px) {
  .kr-mangaka { flex-direction: column; gap: 0; padding: 10px 8px 0; }
  .kr-mangaka-titre h1 { font-size: 22px; }
  .kr-mangaka-titre p { font-size: 13px; margin-bottom: 10px; }
  .kr-mangaka-rouleau { padding-bottom: 178px; } /* le rouleau ne finit jamais sous la barre */
  .kr-mangaka-panel { width: 96%; }
  .kr-mangaka-panel:nth-child(odd) { margin-left: 0; }
  .kr-mangaka-panel:nth-child(even) { margin-right: 0; }
  .kr-mangaka-texte { max-width: 92%; font-size: 12px; }
  .kr-mangaka-bulle { font-size: 12px; max-width: 60%; padding: 7px 10px; }
  .kr-mangaka-pupitre { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    max-width: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--kr-mangaka-fond); border-top: 1px solid var(--kr-mangaka-ligne);
    box-shadow: 0 -4px 14px rgba(22, 24, 29, 0.10); gap: 6px; }
  .kr-mangaka-status { min-height: 16px; font-size: 12px; }
  .kr-mangaka-story, .kr-mangaka-miroir { min-height: 58px; max-height: 128px; font-size: 16px;
    line-height: 1.45; padding: 9px 12px; }
  .kr-mangaka-story { resize: none; overflow-y: auto; }
  .kr-mangaka-send { padding: 5px 14px; font-size: 13px; }
  .kr-mangaka-amorce { font-size: 11px; padding: 3px 9px; }
  .kr-mangaka-lien { display: none; } /* la barre reste basse : le bouton copier porte le message */
  .kr-mangaka-rouleau { padding-bottom: 216px; }
}