/* Conversation avec Pixel */
:root { --kb: 0px; }
.view.is-pixel { padding-bottom: calc(var(--tabs-h) + var(--sab) + 96px); }
/* Titre, Historique et « + » restent à portée pendant que le fil défile. Le bandeau remonte sous la
   barre d'état (qui recouvre la page) et déborde du padding de .view pour la couvrir bord à bord. */
.px-top { position: sticky; top: 0; z-index: 15; margin: calc(-1 * (var(--sat) + 8px)) -16px 12px; padding: calc(var(--sat) + 8px) 16px 8px; background: var(--bg); border-bottom: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s; }
.px-top.is-stuck { background: var(--panel); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom-color: var(--line); }
.px-status { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 6px 6px 14px; border-radius: 22px; background: var(--fill); margin-bottom: 14px; }
.px-tv { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.px-tv i { width: 10px; height: 10px; flex: none; border-radius: 5px; background: var(--ink-3); }
.px-tv i.is-on { background: var(--ok); }
.px-thread { display: flex; flex-direction: column; gap: 14px; }
.px-msg { display: flex; gap: 10px; align-items: flex-start; }
.px-msg.is-user { flex-direction: column; align-items: flex-end; gap: 3px; }
.px-msg.is-user .px-bubble { max-width: 82%; background: var(--ink); color: var(--bg); border-radius: 18px 18px 4px 18px; }
.px-msg.is-user small { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.px-msg.is-pending .px-bubble { opacity: 0.6; }
.px-avatar { width: 32px; height: 32px; flex: none; border-radius: 16px; background: linear-gradient(145deg, #FF6B6F, #7A5CFF); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.px-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.px-bubble { padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--fill-2); font-size: 15px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.px-bubble.is-error { background: rgba(255, 107, 111, 0.16); }
.px-more { font-size: 14px; color: var(--ink-2); line-height: 1.45; white-space: pre-line; }
.px-link { font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: underline; }
.px-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.px-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-2); animation: pulse 1.2s ease-in-out infinite; }
.px-dots i:nth-child(2) { animation-delay: 0.2s; }
.px-dots i:nth-child(3) { animation-delay: 0.4s; }
.px-msg.is-typing .px-bubble { color: var(--ink-2); font-size: 14px; }

.px-card { width: 100%; padding: 10px; border-radius: 14px; background: var(--fill); display: flex; flex-direction: column; gap: 10px; transition: opacity 0.2s; }
.px-card.is-dismissed { opacity: 0.35; }
.px-card-head { display: flex; gap: 12px; align-items: flex-start; }
.px-card .px-poster { width: 64px; aspect-ratio: 2 / 3; flex: none; border-radius: 8px; background: linear-gradient(160deg, #23262F, #12141A); overflow: hidden; }
.px-card .px-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-card .px-logo { width: 64px; height: 42px; flex: none; border-radius: 8px; background: #2a2f3f; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1; padding: 0 4px; }
.px-card .px-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.px-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.px-card-t b { font-size: 15px; }
.px-card-t .m { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.px-card-t .r { font-size: 13px; color: var(--ink); line-height: 1.35; }
.px-card-note { font-size: 12px; color: var(--ink-3); }
.px-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.px-card-acts .btn { padding: 0 12px; }
.px-done { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ok); font-weight: 600; }
.px-undo { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: underline; }
.px-offers { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.px-offers .btn { justify-content: flex-start; white-space: normal; text-align: left; height: auto; min-height: 42px; padding: 8px 14px; }
.px-chips { margin-top: 12px; }

.px-composer { position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + var(--sab)); z-index: 19; padding: 8px 12px; background: var(--panel); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--line); transition: bottom 0.25s cubic-bezier(0.38, 0.7, 0.125, 1); }
.kb-open .px-composer { bottom: var(--kb); }
.kb-open body:has(.px-screen) .tabs { visibility: hidden; }
.kb-open .view.is-pixel { padding-bottom: calc(var(--kb) + 96px); }
.px-input { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 5px 0 16px; border-radius: 23px; background: var(--fill-2); }
.px-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font-size: 16px; }
.px-input input::placeholder { color: var(--ink-3); }
.px-send, .px-mic { width: 38px; height: 38px; flex: none; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); }
.px-send[disabled], .px-mic[disabled] { opacity: 0.35; }
.px-send svg, .px-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Maintenu sous le doigt : ni loupe, ni menu contextuel, ni défilement de la page. */
.px-mic { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.px-voice { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.px-voice.is-cancel .px-rec-hint { color: var(--accent); }
.px-mic.is-rec { background: var(--accent); color: #fff; transform: scale(1.12); transition: transform 0.12s; }
.px-rec-dot { width: 10px; height: 10px; flex: none; border-radius: 5px; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.px-rec-time { font-weight: 800; min-width: 34px; }
.px-rec-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.px-rec-meter i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink-2); animation: px-meter 0.9s ease-in-out infinite; }
.px-rec-meter i:nth-child(2) { animation-delay: 0.15s; }
.px-rec-meter i:nth-child(3) { animation-delay: 0.3s; }
.px-rec-meter i:nth-child(4) { animation-delay: 0.45s; }
@keyframes px-meter { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.px-rec-hint { flex: 1; min-width: 0; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-rec-acts { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .px-dots i, .px-rec-dot, .px-rec-meter i { animation: none; } }

.px-toast { display: flex; align-items: center; gap: 14px; }
.px-toast-btn { font-weight: 800; text-decoration: underline; }
body:has(.px-screen) #toasts { bottom: calc(var(--tabs-h) + var(--sab) + 80px); }
.kb-open body:has(.px-screen) #toasts { bottom: calc(var(--kb) + 80px); }

.px-note { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }
.px-hist { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 12px; border-radius: var(--radius); background: var(--fill); min-height: 64px; }
.px-hist.is-cast { background: var(--fill-2); }
.px-hist-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.px-hist-t b { font-size: 15px; }
.px-hist-t span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.px-minis { display: flex; gap: 4px; flex: none; }
.px-mini { width: 28px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: #23262F; }
.px-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-wipe { width: 100%; margin-top: 18px; }