/* mobile-bleu.css (mini) — unified mobile design for visor and mini tool (no inline CSS) */

/* Minimal blueprint vars to be standalone in mini */
:root{ --ink:#eaf3ff; --bg:#000000; --grid-color:#30425f; --zx-013:#0055ff; --zx-013-bg:#001a4d; --zx-302:#ff3e3e; --zx-302-bg:#3a0000; --zx-023:#ff7f00; --zx-023-bg:#331a00; --zx-201:#ffd500; --zx-201-bg:#332b00; --zx-031:#00f000; --zx-210:#00e5ff; --maxw:480px; --kb-zone:30%; --visor-lh:26px; --visor-lines-editable:6; --msgbar-btnw:96px; --msgbar-gap:6px; }
html,body{ margin:0 }
*, *::before, *::after{ box-sizing: border-box; }
body{
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(0,85,255,0.12), transparent 60%),
    linear-gradient(180deg, var(--zx-013-bg), #000515);
  color:var(--ink);
  font:14px/1.5 Arial,Helvetica,sans-serif;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
/* Prevent horizontal overflow on wide screens */
body{ overflow-x:hidden; }
/* Evite le repositionnement auto (scroll anchoring) quand le clavier s'ouvre */
html, body { overflow-anchor: none; }

/* Base viewport and wrapper for full-height mobile layout */
/* Viewport lock: full-screen, no page scroll */
html{ height:100%; overflow:hidden; overscroll-behavior: none; width:100%; max-width:100%; }
body{ height:100dvh; overscroll-behavior: none; width:100%; max-width:100%; }

/* Mini pack wrapper */
.wrap{ width:100%; max-width: min(100vw, var(--maxw)); margin: 0 auto; padding: 8px 10px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding-bottom: calc(var(--kb-offset, 0px) + env(safe-area-inset-bottom, 0px)); overflow-x:hidden; }
h1, .meta { display: none; }

/* Media safety: visuals never exceed container */
img, video, canvas{ max-width:100%; height:auto; display:block; }

/* Layout */
.layout { display: grid; height: 100%; grid-template-rows: auto 1fr; gap: 0; }
.panel { background: rgba(0,0,0,0.4); border: 1px solid var(--grid-color); padding: 10px; position: relative; z-index: 2; }
.panel-visor { min-height: 0; display: flex; align-items: flex-start; justify-content: center; position: relative; top: auto; z-index: 2; grid-row: 2; }
.panel-bottom { height: auto; overflow: visible; position: sticky; top: 0; bottom: auto; z-index: 4; display: flex; flex-direction: column; grid-row: 1; }
.title { margin: 0 0 8px; font: 700 12px/1 monospace; opacity: .9; }

/* Visor frame — full frame, tinted glass, no blue frame */
.visor-frame { width: 100%; height: 100%; background: #000000; border: none; margin: 0 auto; position: relative; padding: 6px; overflow: hidden; box-sizing: border-box; }
#visor-stream { font-family: 'Courier New', monospace; font-weight: 700; font-size: 18px; line-height: var(--visor-lh,26px); color: #00ffff; white-space: pre-wrap; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; width: 100%; max-width: 26ch; margin: 0 auto; -webkit-user-select:none; user-select:none; }
#visor-stream::-webkit-scrollbar { width: 0; height: 0; display: none; }
#visor-stream a { color: inherit; text-decoration: underline; }
.visor-clock { position: absolute; top: 8px; right: 10px; font-family: 'Courier New', monospace; font-weight: 700; font-size: 14px; line-height: 1; color: rgba(0,255,255,0.4); pointer-events: none; z-index: 3; }
.cursor { display: inline-block; width: 0.33ch; background: #00ffff; animation: blink 1s infinite; vertical-align: sub; }
@keyframes blink { 50% { opacity: 0 } }

/* Mobile keyboard overlay (shared) */
.mobile-input-wrap { position: relative; }
#mobile-key, .mobile-key { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: calc(var(--visor-lines-editable, 6) * var(--visor-lh, 26px) + 12px); opacity: 0; width: 100%; border: 0; background: transparent; touch-action: none; }

/* Typo accents */
.zx-210 { color: var(--zx-210); font-family: Arial, Helvetica, sans-serif; font-weight: 700; }

/* Messaging dropdown and controls */
.dropdown { background: rgba(0,0,0,0.4); border: 1px solid var(--grid-color); }
.dropdown { max-width: 100%; }
.dropdown summary { list-style: none; cursor: pointer; padding: 12px; border-bottom: 1px solid var(--grid-color); font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 13px; position: relative; padding-right: 24px; }
/* Triangle indicator for dropdown */
.dropdown summary::after { content: '▸'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .9; font-size: 20px; line-height: 1; }
.dropdown[open] summary { border-bottom-color: #2a3b5a; }
.dropdown[open] summary::after { content: '▾'; font-size: 20px; }
.dropdown .content { padding: 12px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
.msg-bar { display: grid; grid-template-columns: var(--msgbar-btnw) minmax(56px,1fr) var(--msgbar-btnw) minmax(56px,1fr) var(--msgbar-btnw); gap: var(--msgbar-gap); margin: 6px 0; width: 100%; box-sizing: border-box; justify-content: stretch; }
.btn { background: #0c1c3a; border: 1px solid #2a3b5a; color: #fff; padding: 0; font-weight: 700; text-transform: uppercase; cursor: pointer; font-family: Arial, Helvetica, sans-serif; min-width: 0; border-radius: 12px; font-size: 12px; white-space: nowrap; overflow: visible; text-overflow: clip; display: flex; align-items: center; justify-content: center; height: 36px; }
.btn.btn-prev, .btn.btn-next { width: 100%; height: 36px; font-size: 16px; border-radius: 8px; padding: 0; min-width: 56px; }
.btn.send { border-color: var(--zx-031); color: var(--zx-031); background: #000; box-shadow: inset 0 0 10px rgba(0,240,0,.65), inset 0 0 20px rgba(0,240,0,.25); }
.btn.btn-prev { border-color: var(--zx-013); color: #00aaff; background: linear-gradient(180deg, var(--zx-013-bg), #000); }
.btn.btn-next { border-color: var(--zx-302); color: var(--zx-302); background: linear-gradient(180deg, var(--zx-302-bg), #000); }
.btn.btn-box { border-color: var(--zx-023); color: var(--zx-023); background: linear-gradient(180deg, var(--zx-023-bg), #000); }
.btn.clear { border-color: var(--zx-201); color: var(--zx-201); background: linear-gradient(180deg, var(--zx-201-bg), #000); }

/* Responsive: garantir lisibilité et 100% texte visible en petite largeur */
@media (max-width: 420px){
  .msg-bar{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 36px;
    grid-template-areas:
      "clear prev"
      "box   next"
      "send  send";
  }
  #btn-clear{ grid-area: clear; }
  #btn-prev{ grid-area: prev; }
  #btn-box{ grid-area: box; }
  #btn-next{ grid-area: next; }
  #btn-send{ grid-area: send; }
}

/* Keyboard-open layout: put messaging on top, visor grows below */
.kb-open .layout { grid-template-rows: auto 1fr; }
.kb-open .panel-bottom { grid-row: 1; position: sticky; top: 0; bottom: auto; z-index: 4; }
.kb-open .panel-visor { grid-row: 2; }
.btn.btn-cut { border-color: #7a0000; color: #ff3e3e; background: linear-gradient(180deg, #3a0000, #000); }
.btn.btn-paste { border-color: #0055ff; color: #00aaff; background: linear-gradient(180deg, #001a4d, #000); }
.lbl { display: block; margin: 6px 0 4px; opacity: .85; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 12px; }
.inp { width: 100%; max-width: 100%; background: transparent; border: 1px solid #2a3b5a; color: #fff; font: 14px/1.4 Arial, Helvetica, sans-serif; padding: 8px; outline: none; box-sizing: border-box; }
textarea.inp { resize: none; max-width: 100%; box-sizing: border-box; height: 7.5em; }

/* Optional heading styles if msg-init is viewed with CSS */
.zx-013 { color: #0055ff; }
.heading-arial { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 16px; margin: 8px 0; }