/* AxioraX New: the Axio Canvas cards, as in the main app (native/ax-app-canvas.css), for AxioCHAT. */
/* ==========================================================================
   AxioraX app: Axio Canvas cards in the Lite door chat (app only).
   The same look as the pictures in the Axio engine: a white card with a soft
   shadow, a calm light sweep while the picture is made, Save and View under
   it, and a full screen view with pinch to zoom. Light mode only.
   ========================================================================== */
html .ax-cv {
  align-self: flex-start; width: min(88%, 420px); margin: -2px 0 6px; font-family: inherit;
  opacity: 0; transform: translateY(8px); animation: axCvIn .45s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes axCvIn { to { opacity: 1; transform: none; } }
html .ax-cv-frame {
  position: relative; width: 100%; overflow: hidden; border-radius: 18px; background: #FFFFFF;
  border: 1.5px solid rgba(167, 148, 33, .28);
  box-shadow: 0 1px 2px rgba(31, 42, 38, .06), 0 8px 22px rgba(31, 42, 38, .09);
}
html .ax-cv-art { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; }
html .ax-cv.is-ready .ax-cv-art { opacity: 1; }
html .ax-cv-art > img, html .ax-cv-art > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #F4F7F2; border: 0; }
html .ax-cv-art > video { background: #1F2A26; }

/* while the picture is on its way */
html .ax-cv-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  background: #F4F7F2; transition: opacity .32s ease; text-align: center;
}
html .ax-cv-wait::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%);
  background-size: 220% 100%; animation: axCvSweep 1.6s ease-in-out infinite;
}
@keyframes axCvSweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes axCvPulse { 0%, 100% { transform: scale(.82); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
html .ax-cv-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E4BE3F, #A79421); animation: axCvPulse 1.4s ease-in-out infinite; }
html .ax-cv-note { position: relative; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: #5B6862; }
html .ax-cv.is-ready .ax-cv-wait { opacity: 0; pointer-events: none; }

/* a message in the card: register, an error, try again */
html .ax-cv-msg { display: none; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 18px; min-height: 124px; text-align: center; background: #F4F7F2; }
html .ax-cv.is-msg .ax-cv-frame { aspect-ratio: auto !important; }
html .ax-cv.is-msg .ax-cv-msg { display: flex; }
html .ax-cv.is-msg .ax-cv-art, html .ax-cv.is-msg .ax-cv-wait { display: none; }
html .ax-cv-text { font-size: 13.5px; line-height: 1.5; color: #1F2A26; max-width: 32ch; }

/* the keys */
html .ax-cv-btn {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #6C7A72; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; min-height: 0; min-width: 0;
  font-family: inherit; font-weight: 700; font-size: 9.5px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
}
html .ax-cv-btn:active { background: rgba(167, 148, 33, .12); color: #75681A; }
html .ax-cv-btn svg { width: 12px; height: 12px; flex: 0 0 12px; }
html .ax-cv-acts { display: flex; gap: 2px; margin-top: 4px; margin-inline-start: -6px; min-height: 26px; }
html .ax-cv:not(.is-ready) .ax-cv-acts { visibility: hidden; }
html .ax-cv.is-msg .ax-cv-acts { display: none; }
html .ax-cv-btn.ax-cv-go {
  padding: 9px 16px; min-height: 38px; border-radius: 999px; background: #135333; color: #FFFFFF;
  font-size: 13px; letter-spacing: 0; text-transform: none; gap: 8px; box-shadow: 0 6px 16px rgba(19, 83, 51, .22);
}
html .ax-cv-btn.ax-cv-go:active { transform: translateY(1px); background: #0F4429; color: #FFFFFF; }
html .ax-cv-btn.ax-cv-go svg { width: 14px; height: 14px; flex-basis: 14px; }

/* the full screen view */
html .ax-cv-viewer {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #F4F7F2;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
html .ax-cv-viewer.on { opacity: 1; pointer-events: auto; }
html .ax-cv-vtop { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px; }
html .ax-cv-vx {
  width: 42px; height: 42px; border: 0; border-radius: 50%; background: #FFFFFF; color: #1F2A26; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 42, 38, .12); padding: 0;
}
html .ax-cv-vx svg { width: 18px; height: 18px; }
html .ax-cv-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
html .ax-cv-vart { width: 100%; max-height: 100%; transform-origin: 50% 50%; will-change: transform; display: flex; align-items: center; justify-content: center; }
html .ax-cv-vart > img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 6px 22px rgba(31, 42, 38, .12); display: block; }
html .ax-cv-vbar { flex: 0 0 auto; display: flex; justify-content: center; gap: 10px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
html .ax-cv-vbar .ax-cv-btn {
  padding: 11px 20px; min-height: 44px; border-radius: 999px; background: #135333; color: #FFFFFF;
  font-size: 14px; letter-spacing: 0; text-transform: none; gap: 8px; box-shadow: 0 6px 16px rgba(19, 83, 51, .22);
}
html .ax-cv-vbar .ax-cv-btn svg { width: 16px; height: 16px; flex-basis: 16px; }

/* Arabic: the card keeps to the answer's side */
html[dir="rtl"] .ax-cv { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  html .ax-cv { animation: none; opacity: 1; transform: none; }
  html .ax-cv-wait::before, html .ax-cv-dot { animation: none !important; }
}

/* ---------- real photos from the web: a row of tiles with their sources */
html .ax-cv-find { width: 100%; max-width: 100%; }
html .ax-cv-find .ax-cv-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; opacity: 0; transition: opacity .32s ease;
}
html .ax-cv-find.is-ready .ax-cv-grid { opacity: 1; }
html .ax-cv-find .ax-cv-grid:has(.ax-cv-tile:nth-child(4)) .ax-cv-tile:first-child { grid-column: span 2; grid-row: span 2; }
html .ax-cv-tile {
  appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; margin: 0;
  border: 0; border-radius: 14px; overflow: hidden; background: #E9EDE7; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(31, 42, 38, .06), 0 6px 16px rgba(31, 42, 38, .07);
}
html .ax-cv-tile.is-gone { display: none; }
html .ax-cv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
html .ax-cv-tile:active img { transform: scale(1.03); }
html .ax-cv-src {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 9px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  color: #FFFFFF; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(20, 30, 25, .62), rgba(20, 30, 25, 0)); pointer-events: none;
}
html .ax-cv-findwait { position: relative; inset: auto; min-height: 92px; border-radius: 14px; overflow: hidden; }
html .ax-cv-find.is-ready .ax-cv-findwait { display: none; }
html .ax-cv-find.is-msg .ax-cv-grid, html .ax-cv-find.is-msg .ax-cv-findwait { display: none; }
html .ax-cv-find .ax-cv-msg { border-radius: 14px; }
html .ax-cv-from { font-size: 10.5px; line-height: 1.4; color: #6C7A72; padding: 4px 2px 0; }
html .ax-cv-find .ax-cv-acts { margin-inline-start: 0; }

/* the large view of a photo: its caption, Open source and Save */
html .ax-cv-vbar { flex-direction: column; align-items: center; gap: 8px; }
html .ax-cv-vcap { max-width: 100%; font-size: 12px; line-height: 1.4; color: #5B6862; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
html .ax-cv-vrow { display: flex; gap: 10px; }
html .ax-cv-vrow .ax-cv-btn.ax-cv-vopen { background: #FFFFFF; color: #135333; box-shadow: 0 2px 8px rgba(31, 42, 38, .12); }

/* inside the Axio engine the shared card sits in the answer like the engine's own cards */
html .axbody > .ax-cv { align-self: auto; width: 100%; max-width: none; margin: 4px 0 14px; }
html .axbody > .ax-cv .ax-cv-btn { font-family: inherit; }

/* Before and After: the improved photo over the original, a handle to slide between them (2026.10.18) */
html .ax-cv-edit { width: min(92%, 440px); }
html .ax-cmp { position: absolute; inset: 0; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: #F4F7F2; }
html .ax-cmp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
html .ax-cmp-h { position: absolute; top: 0; bottom: 0; width: 0; transform: translateX(-1px); border-left: 2px solid #FFFFFF; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); pointer-events: none; }
html .ax-cmp-h span { position: absolute; top: 50%; left: 0; width: 38px; height: 38px; margin: -19px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; color: #135333; box-shadow: 0 2px 10px rgba(31, 42, 38, .28); }
html .ax-cmp-h span svg { width: 16px; height: 16px; }
html .ax-cmp-l { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 26, 23, .55); color: #FFFFFF; font-size: 11.5px; font-weight: 700; line-height: 16px; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html .ax-cmp-lb { left: 10px; }
html .ax-cmp-la { right: 10px; background: rgba(19, 83, 51, .82); }
html .ax-cv-btn.ax-cv-kept { color: #135333; }