/* Déchiffrement SASP, app Notes, aperçu en direct de l'admin, modèles rapides */

/* Écran de déchiffrement SASP (avant la fiche) */
.decrypt {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 22px 40px;
  border-radius: inherit;
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgba(124, 224, 158, 0.04) 0 1px, transparent 1px 3px),
    radial-gradient(90% 60% at 50% 45%, rgba(124, 224, 158, 0.1), transparent 70%),
    #020503;
  color: #7ce09e;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  text-shadow: 0 0 4px rgba(124, 224, 158, 0.2);
  cursor: pointer;
  animation: decrypt-in 0.25s ease-out;
  transition: opacity 0.3s ease;
}
.decrypt[hidden] { display: none; }
.decrypt.is-out { opacity: 0; }
@keyframes decrypt-in { from { opacity: 0; } }
.decrypt__head { position: absolute; top: 58px; left: 22px; right: 22px; margin: 0; font-size: 0.6875rem; color: rgba(124, 224, 158, 0.6); text-transform: uppercase; }
.decrypt__rain {
  position: absolute;
  inset: 0;
  margin: 0;
  font: inherit;
  font-size: 0.625rem;
  line-height: 1.35;
  color: rgba(124, 224, 158, 0.12);
  text-shadow: none;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}
.decrypt__core { position: relative; padding: 18px 16px; border: 1px dashed rgba(124, 224, 158, 0.35); background: rgba(2, 5, 3, 0.85); }
.decrypt__label { margin: 0 0 6px; font-size: 0.625rem; color: rgba(124, 224, 158, 0.6); text-transform: uppercase; }
.decrypt__target { margin: 0 0 16px; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.08em; overflow-wrap: anywhere; min-height: 1.4em; }
.decrypt__bar { height: 10px; border: 1px solid rgba(124, 224, 158, 0.45); padding: 1px; }
.decrypt__bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #7ce09e 0 5px, transparent 5px 7px); box-shadow: 0 0 8px rgba(124, 224, 158, 0.6); }
.decrypt__step { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; font-size: 0.6875rem; color: rgba(124, 224, 158, 0.75); }
.decrypt__ok {
  margin: 14px 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  visibility: hidden;
}
.decrypt.is-granted .decrypt__ok { visibility: visible; animation: term-alert 0.3s steps(1) 2; }
.decrypt.is-granted .decrypt__core { border-style: solid; border-color: #7ce09e; box-shadow: 0 0 18px rgba(124, 224, 158, 0.25); }
.decrypt__skip { position: absolute; bottom: 34px; left: 0; right: 0; margin: 0; text-align: center; font-size: 0.625rem; color: rgba(124, 224, 158, 0.4); }
@media (prefers-reduced-motion: reduce) { .decrypt, .decrypt.is-granted .decrypt__ok { animation: none; } }

/* Éditeur de messages : flèches pour déplacer une bulle */
.fil-row__move { display: flex; flex-direction: column; flex: none; }
.fil-row__move button { display: grid; place-items: center; width: 22px; height: 14px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.fil-row__move button:hover { color: var(--text); }
.fil-row__move svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fil-row:first-child [data-fil-move="-1"], .fil-row:last-child [data-fil-move="1"] { visibility: hidden; }

/* Icône Notes */
.app__icon--notes { --icon: linear-gradient(180deg, #fdd64b 0 29%, #fffdf6 29%); }

/* App Notes */
.void--notes .void__icon { background: rgba(253, 214, 75, 0.14); box-shadow: inset 0 0 0 1px rgba(253, 214, 75, 0.35); }
.void--notes .void__icon svg { stroke: #fdd64b; }
#view-notes.is-open > .view__head { display: none; }
.appwin:has(#view-notes.is-open:not([hidden])) .appbar { display: none; }
.notes { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--panel); overflow: hidden; }
.note-row + .note-row { border-top: 1px solid var(--line); }
.note-row .row-actions { display: flex; gap: 12px; padding: 0 16px 10px; }
.note-row__open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.note-row__open:hover { background: rgba(255, 255, 255, 0.03); }
.note-row__open:focus-visible { outline: 2px solid #fdd64b; outline-offset: -2px; }
.note-row__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row__meta { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row__meta b { color: var(--text); font-weight: 500; margin-right: 6px; }
.notes__count { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 0.75rem; }
.note { display: flex; flex-direction: column; }
.note__back { align-self: flex-start; display: flex; align-items: center; gap: 2px; margin: 0 0 8px -6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: #fdd64b; font: inherit; font-weight: 600; cursor: pointer; }
.note__back:hover { background: rgba(255, 255, 255, 0.05); }
.note__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.note__date { margin: 0; text-align: center; color: var(--muted); font-size: 0.75rem; }
.note__title { margin: 10px 0 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.note__text { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }

/* Admin : aperçu en direct */
.preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.preview-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.preview-toggle:hover { color: var(--text); border-color: var(--muted); }
.preview-toggle[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
body.has-preview { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  height: min(980px, calc(100vh - 4vw));
  min-height: 560px;
}
.preview[hidden] { display: none; }
.preview__head { display: flex; justify-content: space-between; align-items: center; }
.preview__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em; }
.preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.preview__close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.preview__close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.preview__stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.preview__phone {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background: #000;
  box-shadow: 0 0 0 9px #1a1b1e, 0 0 0 11px #3a3b40, 0 30px 60px rgba(0, 0, 0, 0.6);
}
.preview__phone iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; }
.preview__hint { margin: 0; color: var(--muted); font-size: 0.75rem; text-align: center; }
/* aperçu ouvert : formulaire à gauche */
body.has-preview .dialog:not(.member)::backdrop { background: rgba(0, 0, 0, 0.35); }
body.has-preview #dialog { margin-left: max(16px, calc(50vw - 620px)); }
@media (max-width: 1100px) {
  body.has-preview { grid-template-columns: minmax(0, 1fr); }
  body.has-preview .preview { width: 100%; height: 720px; }
  body.has-preview #dialog { margin-left: auto; }
}

/* Admin : fonds d'écran multiples */
.walls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 6px; }

.walls__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 260px; }
.walls__item { position: relative; width: 44px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.walls__item img { width: 100%; height: 100%; object-fit: cover; }
.walls__del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.875rem; line-height: 1; cursor: pointer; }
.walls__del:hover { background: var(--red); }
.walls__none { color: var(--muted); font-size: 0.8125rem; }
.walls__hint { margin: 0; color: var(--muted); font-size: 0.75rem; }
.walls .btn { margin-top: 0 !important; }

/* Déchiffrement refusé */
.decrypt__denied, .decrypt__actions { display: none; }
.decrypt.is-denied { color: #ff4d55; text-shadow: 0 0 6px rgba(255, 77, 85, 0.5); cursor: default; animation: decrypt-shake 0.35s steps(2) 1; }
.decrypt.is-denied .decrypt__rain { color: rgba(255, 77, 85, 0.14); }
.decrypt.is-denied .decrypt__core { border: 1px solid #ff4d55; box-shadow: 0 0 18px rgba(255, 77, 85, 0.3); }
.decrypt.is-denied .decrypt__bar { border-color: rgba(255, 77, 85, 0.6); }
.decrypt.is-denied .decrypt__bar span { background: repeating-linear-gradient(90deg, #ff4d55 0 5px, transparent 5px 7px); box-shadow: 0 0 8px rgba(255, 77, 85, 0.6); }
.decrypt.is-denied .decrypt__label, .decrypt.is-denied .decrypt__step { color: rgba(255, 77, 85, 0.8); }
.decrypt.is-denied .decrypt__denied {
  display: block;
  margin: 14px 0 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: term-alert 0.8s steps(1) infinite;
}
.decrypt.is-denied .decrypt__actions { display: flex; gap: 8px; margin-top: 14px; }
.decrypt__actions button {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.decrypt__actions button[data-decrypt-retry] { background: rgba(255, 77, 85, 0.15); }
.decrypt__actions button:hover, .decrypt__actions button:focus-visible { background: #ff4d55; color: #000; text-shadow: none; outline: none; }
.decrypt.is-denied .decrypt__skip { visibility: hidden; }
@keyframes decrypt-shake { 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .decrypt.is-denied, .decrypt.is-denied .decrypt__denied { animation: none; } }

/* Admin : interrupteur d'accès SASP_Secure */
.sasp-toggle b { color: var(--green); }
.sasp-toggle[aria-pressed="false"] { border-color: rgba(227, 36, 43, 0.6); background: var(--red-soft); }
.sasp-toggle[aria-pressed="false"] b { color: #ff6b70; }

/* Admin : modèles rapides en haut des formulaires d'ajout */
.templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.templates[hidden] { display: none; }
.templates__label { margin-right: 4px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.templates__btn { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.templates__btn:hover { border-color: var(--red); color: #fff; }