/* assets/style.css */

/* ---------- box-sizing baseline ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- global safety ---------- */
html, body {
  width: 100%;
  height: 100%;
  /* prevent accidental horizontal scroll on small devices */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---------- range styling ---------- */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: 0.6rem;
  border-radius: 9999px;
  background: rgba(148,163,184,.35);
  outline:none;
}

input[type="range"]::-webkit-slider-runnable-track{
  height:0.6rem;
  border-radius:9999px;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:1rem;
  height:1rem;
  border-radius:9999px;
  background: rgb(132,204,22);
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 1px 2px rgba(15,23,42,0.12);
  margin-top: -0.16rem;
}

input[type="range"]::-moz-range-track{
  height:0.6rem;
  border-radius:9999px;
  background: transparent;
}

input[type="range"]::-moz-range-progress{
  height:0.6rem;
  border-radius:9999px;
  background: rgba(132,204,22,.95);
}

input[type="range"]::-moz-range-thumb{
  width:1rem;
  height:1rem;
  border-radius:9999px;
  background: rgb(132,204,22);
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 1px 2px rgba(15,23,42,0.12);
}

/* ---------- color swatch (square -> round on focus) ---------- */
.color-swatch{
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border-radius: 0.5rem;     /* carré arrondi par défaut */
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  box-shadow: none;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.35);
  background-clip: padding-box;
}

/* Chrome / WebKit specifics for color input */
.color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch::-webkit-color-swatch { border: none; border-radius: 0.5rem; }

/* On focus/active -> turn into a circle (selected state) */
.color-swatch:focus,
.color-swatch:active,
.color-swatch:focus-visible {
  outline: none;
  border-radius: 9999px; /* full circle */
  box-shadow: 0 8px 22px rgba(16,24,40,0.06), 0 0 0 6px rgba(132,204,22,0.08);
}

/* ---------- preview image fit ---------- */
#preview svg, #preview canvas, #preview img{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* ---------- preview responsive wrapper ---------- */
/* ensure it respects container paddings and never exceeds viewport */
.preview-wrapper {
  max-width: min(420px, calc(100% - 2rem)); /* safer than vw */
  width: 100%;
  box-sizing: border-box;
}

/* ---------- history scrollbar polish ---------- */
#history::-webkit-scrollbar { height: 6px; width: 10px; }
#history::-webkit-scrollbar-track { background: transparent; }
#history::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.35);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#history::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55); }

/* ---------- utility / shrink fixes ---------- */
.min-w-0 { min-width: 0; }
textarea, input[type="text"], input[type="number"] {
  word-break: break-word;
  min-width: 0;
}

/* ---------- mobile sticky bar safety ---------- */
/* left/right insets handled in HTML, give strict max width */
.mobile-sticky {
  width: auto;
  max-width: calc(100% - 2.5rem); /* safety margin for device UI */
  margin: 0 auto;
}

/* ensure content inside sticky bar wraps/scrolls without expanding page */
.mobile-sticky .overflow-auto { max-width: calc(100% - 120px); }

/* ---------- UI button utilities ---------- */
.action-btn { border-radius: 0.75rem; border: 1px solid rgba(148,163,184,.2); background: rgba(255,255,255,.8); padding: 8px 12px; display:inline-flex; gap:8px; align-items:center; font-weight:600; color: #0f172a; box-shadow: 0 1px 2px rgba(2,6,23,0.04); }
.action-btn.primary { background: #dcfce7; color: #071b14; border-color: rgba(132,204,22,0.25); }
.action-btn.danger { background: #fff1f2; color: #9f1239; border-color: rgba(250,204,210,0.6); }
.action-btn.save { background: #f1f9ff; color: #128a9f; border-color: rgba(112, 234, 255, 0.514); }

.action-btn-xs { border-radius: 0.6rem; border: 1px solid rgba(148,163,184,.12); background: rgba(255,255,255,0.95); padding: 6px; display:inline-flex; gap:6px; align-items:center; justify-content:center; font-weight:600; color:#0f172a; }
.action-btn-xs.primary { background:#dcfce7; color: #071b14; border-color: rgba(132,204,22,0.25); }
.action-btn-xs.danger { background:#fff1f2; color:#9f1239; border-color: rgba(250,204,210,0.6); }

/* ---------- hide mobile scrollbar for sticky bar overflow icons ---------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } 
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- small screen tweaks ---------- */
@media (max-width: 640px) {
  main { padding-left: 12px; padding-right: 12px; }
  .action-btn { padding: 8px 10px; font-size: 13px; }
  .action-btn-xs { padding: 8px; width: 40px; height: 40px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; }
  .color-swatch { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
}

/* ---------- Button interaction (scale + shadow + ripple) ---------- */

/* make buttons positionable for ripple and clamp overflow */
.action-btn, .action-btn-xs {
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow, opacity;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s cubic-bezier(.2,.9,.2,1), background-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent; /* mobile: remove highlight */
  touch-action: manipulation;
}

/* hover / focus micro-lift */
.action-btn:hover, .action-btn:focus,
.action-btn-xs:hover, .action-btn-xs:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 26px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.03);
}

/* active (press) */
.action-btn.is-pressed, .action-btn:active,
.action-btn-xs.is-pressed, .action-btn-xs:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(15,23,42,0.05);
  transition-duration: 90ms;
}

/* small visual tweak for keyboard focus */
.action-btn:focus-visible, .action-btn-xs:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px rgba(132,204,22,0.08);
}

/* ripple element (inserted dynamically) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.35;
  pointer-events: none;
  background: rgba(15,23,42,0.06);
  animation: ripple-grow 520ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity;
}

/* subtle fade */
@keyframes ripple-grow {
  from { transform: scale(0); opacity: 0.35; }
  60%  { transform: scale(1.6); opacity: 0.22; }
  to   { transform: scale(2.8); opacity: 0; }
}

/* Reduced motion: disable animations & ripples */
@media (prefers-reduced-motion: reduce) {
  .action-btn, .action-btn-xs {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .btn-ripple { display: none !important; }
}

/* Slightly reduce effects on very small screens for comfort */
@media (max-width: 420px) {
  .action-btn:hover, .action-btn:focus { transform: translateY(-1px) scale(1.01); }
  .action-btn-xs:hover, .action-btn-xs:focus { transform: translateY(-1px) scale(1.01); }
}


@media (max-width: 420px) {
  .preview-wrapper { max-width: calc(100% - 2rem); }
  main { padding-left: 10px; padding-right: 10px; }
}
/* Force fixed + safe-area fallback if JS didn't run for some reason */
.mobile-sticky {
  position: fixed !important;
  bottom: 10px !important;
  left: 1rem !important;
  right: 1rem !important;
  z-index: 11000 !important;
  max-width: calc(100% - 2rem) !important;
  margin: 0 auto !important;
}

/* When the keyboard opens on mobile, avoid being covered (iOS desktop browsers) */
@supports (height: 100dvh) {
  .mobile-sticky { bottom: calc(env(safe-area-inset-bottom, 12px) + 5px); }
}

/* small visual tweak when hidden/shown via JS */
.mobile-sticky[aria-hidden="true"] { transform: translateY(12px); opacity: 0; pointer-events: none; }

/* ---------- Fix overflow mobile / safe-guards ---------- */

/* ensure viewport never grows beyond 100vw (safety) */
html, body {
  max-width: 100vw;
  overflow-x: hidden; /* déjà présent mais on renforce */
}

/* safe wrappers: clamp any large element to viewport width */
main, .preview-wrapper, .mobile-sticky, .pointer-events-none {
  max-width: 100vw;
  overflow-x: hidden;
}

/* replace aggressive forcing of width/height on media inside preview:
   allow natural aspect ratio while keeping within container */
#preview svg,
#preview canvas,
#preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* prevent form controls / titles from forcing min-width */
textarea,
input[type="text"],
input[type="number"],
.js-title {
  min-width: 0;
  overflow-wrap: anywhere; /* break long tokens/URLs */
  word-break: break-word;
}

/* sticky bar internals: avoid inner content forcing page width */
.mobile-sticky {
  left: env(safe-area-inset-left, 1rem);
  right: env(safe-area-inset-right, 1rem);
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
}

/* inner scroll area of the sticky bar: limit growth */
.mobile-sticky .overflow-auto {
  max-width: calc(100% - 120px);
  min-width: 0;
}

/* small debug helper — active only si tu ajoutes la classe "debug" sur <html> */
html.debug * {
  outline: 1px solid rgba(255,0,0,0.04);
}
/* QR preview: shrink only on small screens */
@media (max-width: 640px) {
  .preview-wrapper{
    /* 72vw mais borné entre 220px et 320px */
    width: min(320px, 72vw);
    max-width: min(320px, 72vw);
  }

  /* bonus: moins de padding autour sur mobile */
  .preview-wrapper + * { /* optionnel */
    margin-top: 0.75rem;
  }
}