static/css/ui.css

/* ==========================================================================
   Opsiom UI — pop-up de dialogue + notifications (voir js/ui.js)
   Utilise les jetons de couleur de chat.css / pages.css.
   ========================================================================== */
.ic { flex: none; }

.op-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(20, 8, 32, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: op-fade .2s both;
}
.op-overlay.out { opacity: 0; transition: opacity .15s; }
html.op-modal-open, html.op-modal-open body { overflow: hidden; }
.op-dialog {
  width: min(440px, 100%); max-height: 100%; overflow-y: auto; border: 1px solid var(--line); border-radius: 26px; outline: 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -20px rgba(20, 8, 32, .6);
  font-family: 'Geist', system-ui, sans-serif; animation: op-pop .28s cubic-bezier(.2, .9, .3, 1.15) both;
}
.op-dialog-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 28px 24px; }
.op-dialog-icon {
  width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--pop); margin-bottom: 6px;
}
.op-danger .op-dialog-icon { background: rgba(var(--red-rgb), 0.14); color: var(--red); }
.op-warn .op-dialog-icon { background: rgba(var(--amber-rgb), 0.16); color: var(--amber); }
.op-dialog-title { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.op-dialog-msg { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.op-dialog-actions { align-self: stretch; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.op-btn {
  height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 14px; background: transparent;
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .2s, transform .2s, filter .2s;
}
.op-btn:hover { background: var(--hover); }
.op-btn-primary { border-color: transparent; background: var(--grad); color: #fff; }
.op-btn-primary:hover { background: var(--grad); filter: brightness(1.08); transform: translateY(-1px); }
.op-danger .op-btn-primary { background: var(--red); }
:root[data-theme="dark"] .op-danger .op-btn-primary { color: #20102E; }
.op-btn:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }

.op-errbar {
  position: fixed; z-index: 10001; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 12px 14px; border-radius: 14px; background: #3A1020; color: #FFE3EA; font: 13px/1.4 'Geist', system-ui, sans-serif; box-shadow: 0 14px 36px -10px rgba(20, 8, 32, .6);
}
.op-errbar button { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 9px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.op-toasts { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.op-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 16px; background: var(--ubg); color: var(--uink);
  font: 500 14px 'Geist', system-ui, sans-serif; box-shadow: 0 18px 44px -12px rgba(20, 8, 32, .55); animation: op-rise .3s cubic-bezier(.2, .8, .2, 1) both;
}
.op-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.op-toast-icon { display: flex; }
.op-toast-success .op-toast-icon { color: #45D99A; }
.op-toast-error .op-toast-icon { color: #F08AA5; }
.op-toast-info .op-toast-icon { color: #E6A9CC; }

@keyframes op-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes op-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes op-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .op-dialog, .op-dialog::backdrop, .op-toast { animation: none; } }

/* ==========================================================================
   PWA : installation, hors connexion, mode application (standalone)
   ========================================================================== */
.sidebar-install {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 2px; padding: 9px 10px; border: 0; border-radius: 10px;
  background: rgba(var(--pop-rgb), 0.12); color: var(--ink); font: 500 13.5px 'Geist', system-ui, sans-serif; cursor: pointer; text-align: left;
}
.sidebar-install:hover { background: rgba(var(--pop-rgb), 0.2); }
.sidebar-install .ic { color: var(--pop); }
[data-pwa-install][hidden] { display: none !important; }

.net-banner {
  position: fixed; z-index: 9998; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px;
  background: var(--ubg); color: var(--uink); font: 500 13px 'Geist', system-ui, sans-serif; box-shadow: 0 14px 36px -10px rgba(20, 8, 32, .55);
  animation: op-rise .3s cubic-bezier(.2, .8, .2, 1) both;
}
.net-banner .ic, .net-banner svg { color: #F0B5D6; }

/* Zones sûres (encoche, barre d'accueil iOS) — actives en plein écran */
@supports (padding: max(0px)) {
  #composer-wrap { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #topbar { padding-top: max(14px, env(safe-area-inset-top)); }
  #sidebar { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .topnav { padding-top: max(12px, env(safe-area-inset-top)); }
  .page { padding-bottom: max(88px, calc(40px + env(safe-area-inset-bottom))); }
}
html { -webkit-tap-highlight-color: transparent; }
html.is-standalone, html.is-standalone body { overscroll-behavior: none; }
html.is-standalone #conversation { overscroll-behavior: contain; }
@media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none; } input, textarea, .msg-content, .bubble, code { -webkit-user-select: text; user-select: text; } }