/* styles.css — v4.0 : refonte visuelle inspiration iOS / iMessage. Contraintes respectées : typographie SYSTÈME uniquement (San Francisco natif sur Apple, sans police externe), icônes SVG inline auto-hébergées, aucune ressource tierce. Sobriété conservée (finition et fluidité, pas de décor). */ :root { color-scheme: light; --ink: #1c1c1e; --ink-soft: #6b6b70; --paper: #f2f2f7; /* gris système iOS */ --surface: #ffffff; --accent: #0a84ff; /* bleu iMessage */ --accent-2: #34c759; /* vert (accents secondaires) */ --line: #d9d9de; --bubble-mine-1: #0a84ff; --bubble-mine-2: #0a7cff; --bubble-theirs: #e9e9eb; --danger: #ff3b30; --radius: 18px; --radius-lg: 22px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.05); --spring: cubic-bezier(.22,1,.36,1); } [data-theme="dark"] { color-scheme: dark; --ink: #f2f2f7; --ink-soft: #98989f; --paper: #000000; --surface: #1c1c1e; --accent: #0a84ff; --line: #38383a; --bubble-mine-1: #0a84ff; --bubble-mine-2: #0060df; --bubble-theirs: #26262a; --danger: #ff453a; } /* v4.1 : contraste élevé — accessibilité. Renforce les contours et le texte secondaire sans changer la palette de base (pas un thème à part entière). */ [data-contrast="high"] { --ink-soft: var(--ink); --line: currentColor; } [data-contrast="high"] .bubble.theirs { border: 1.5px solid var(--ink); } [data-contrast="high"] .bubble.mine { border: 1.5px solid var(--surface); } [data-contrast="high"] button, [data-contrast="high"] input, [data-contrast="high"] textarea { border-width: 1.5px; } /* v4.1 : taille de texte réglable (accessibilité), sur . */ [data-font-scale="sm"] body { font-size: 14px; } [data-font-scale="md"] body { font-size: 16px; } [data-font-scale="lg"] body { font-size: 19px; } [data-font-scale="xl"] body { font-size: 22px; } * { box-sizing: border-box; } html, body, #root, .app { height: 100%; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); font-size: 16px; -webkit-font-smoothing: antialiased; } /* --- Contrôles --- */ button { font: inherit; font-weight: 590; border: none; border-radius: 12px; padding: 11px 18px; background: var(--accent); color: #fff; cursor: pointer; transition: transform .18s var(--spring), opacity .18s var(--spring), background .18s; } button:active { transform: scale(.96); } button:disabled { opacity: .45; cursor: default; transform: none; } button.ghost { background: transparent; color: var(--accent); padding: 8px 12px; font-weight: 500; } button.big { font-size: 22px; padding: 6px 10px; } button.danger { background: var(--danger); } input, textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; width: 100%; background: var(--surface); color: var(--ink); transition: border-color .18s; } input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 1; } input:focus, textarea:focus, button:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* --- Écrans de base --- */ .center { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; max-width: 400px; width: 100%; display: flex; flex-direction: column; gap: 14px; animation: sheet-in .4s var(--spring); } h1 { font-size: 22px; margin: 0; letter-spacing: -.02em; } .muted { color: var(--ink-soft); } .small { font-size: 13px; } .error { color: var(--danger); font-size: 14px; margin: 4px 0 0; } .fingerprint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--paper); border-radius: 12px; padding: 10px; word-break: break-word; font-size: 14px; letter-spacing: .5px; } .fingerprint.inline { display: inline; padding: 2px 6px; } .notice { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); padding: 11px 16px; font-size: 13px; cursor: pointer; animation: slide-down .35s var(--spring); } .notice.warn { background: color-mix(in srgb, #ff9f0a 22%, var(--surface)); cursor: default; } .screen { height: 100%; display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; background: var(--paper); position: relative; } /* --- Barres translucides (façon iOS) --- */ .bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--line); position: sticky; top: 0; z-index: 5; } .grow { flex: 1; min-width: 0; } .pad { padding: 12px 16px; } .row { display: flex; gap: 8px; } /* --- Avatars générés localement (initiales + couleur déterministe) --- */ .avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -.01em; } .avatar.sm { width: 30px; height: 30px; font-size: 13px; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; } .dot.on { background: var(--accent-2); } .dot.off { background: var(--line); } /* --- Liste de conversations --- */ .conv-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .conv-list li { padding: 12px 14px; cursor: pointer; background: var(--surface); border-radius: 16px; display: flex; align-items: center; gap: 12px; transition: transform .18s var(--spring), background .18s; } .conv-list li:active { transform: scale(.985); } .conv-list li:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .badge { display: inline-block; margin-left: 8px; min-width: 20px; text-align: center; background: var(--accent); color: #fff; border-radius: 10px; font-size: 12px; font-weight: 600; padding: 2px 6px; vertical-align: middle; } .preview { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings { background: var(--surface); border-bottom: .5px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; animation: slide-down .3s var(--spring); } .settings label { display: flex; gap: 10px; align-items: center; } .group-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .fp-panel { padding: 12px 16px; background: var(--surface); border-bottom: .5px solid var(--line); font-size: 13px; animation: slide-down .3s var(--spring); } /* --- Messages --- */ .messages { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 3px; } .date-sep { text-align: center; margin: 14px 0 8px; } .date-sep span { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 4px 12px; border-radius: 10px; } .bubble-row { display: flex; flex-direction: column; animation: bubble-in .35s var(--spring); } .bubble-row.mine { align-items: flex-end; } .bubble-row.theirs { align-items: flex-start; } .bubble { position: relative; max-width: 76%; padding: 8px 13px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; border-radius: var(--radius); } .bubble.mine { color: #fff; background: linear-gradient(180deg, var(--bubble-mine-1), var(--bubble-mine-2)); border-bottom-right-radius: 5px; } .bubble.theirs { background: var(--bubble-theirs); color: var(--ink); border-bottom-left-radius: 5px; } .bubble.failed { outline: 1.5px solid var(--danger); } .sender { color: var(--accent); font-weight: 600; margin: 0 0 3px 4px; font-size: 12px; } .stamp { font-size: 11px; color: var(--ink-soft); margin: 2px 6px 6px; } .bubble.mine + .stamp, .bubble-row.mine .stamp { text-align: right; } .inline-img { max-width: 100%; border-radius: 14px; display: block; margin-bottom: 4px; } video.inline-img { max-width: 260px; } .media-wrap { position: relative; } .save-media-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: none; background: rgba(0,0,0,.08); color: inherit; cursor: pointer; } .bubble.mine .save-media-btn { background: rgba(255,255,255,.22); } .file-chip { background: color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; border-radius: 12px; margin-bottom: 4px; font-weight: 500; padding: 9px 12px; } .bubble.mine .file-chip { background: rgba(255,255,255,.2); color: #fff; } /* Citation (réponse à un message) */ .reply-quote { border-left: 3px solid currentColor; padding: 3px 8px; margin-bottom: 5px; font-size: 13px; opacity: .8; border-radius: 4px; background: color-mix(in srgb, currentColor 8%, transparent); } /* Réactions */ .reactions { display: flex; gap: 4px; margin: 2px 6px 4px; flex-wrap: wrap; } .reaction { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1px 7px; font-size: 13px; box-shadow: var(--shadow); } .bubble-row.mine .reactions { justify-content: flex-end; } /* Actions au survol/appui d'une bulle */ .msg-actions { position: absolute; top: -10px; right: -6px; display: none; gap: 4px; z-index: 2; } .bubble:hover .msg-actions, .bubble:focus-within .msg-actions { display: flex; } /* v4.3 (tactile) : ouverture par appui sur la bulle — iOS/Android n'ont pas de survol, les actions (modifier, répondre…) étaient inaccessibles. */ .bubble.actions-open .msg-actions { display: flex; } /* v4.3 : bouton de renvoi d'un message échoué / bloqué en envoi */ .resend-chip { align-self: inherit; margin-top: 4px; padding: 4px 12px; font-size: 13px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: 12px; } .msg-actions button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; width: 26px; height: 26px; padding: 0; font-size: 12px; box-shadow: var(--shadow); } /* --- Composition --- */ .progress { height: 3px; background: var(--line); } .progress > div { height: 100%; background: var(--accent); transition: width .25s var(--spring); } .queue-pill { align-self: center; margin: 6px auto; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); padding: 4px 12px; border-radius: 12px; animation: slide-down .3s var(--spring); } .reply-bar, .attach-preview { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-top: .5px solid var(--line); font-size: 14px; } .attach-preview img { max-height: 56px; border-radius: 10px; } .composer { display: flex; gap: 8px; padding: 10px 12px; align-items: flex-end; background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: .5px solid var(--line); } .composer textarea { border-radius: 20px; resize: none; max-height: 120px; min-height: 42px; padding: 10px 14px; } .char-count { font-size: 11px; color: var(--ink-soft); align-self: center; padding: 0 4px; } .emoji-pop { position: absolute; display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 5px 8px; box-shadow: var(--shadow); z-index: 10; animation: sheet-in .25s var(--spring); } .emoji-pop button { background: transparent; padding: 3px 5px; font-size: 20px; } /* Alerte TOFU */ .key-alert { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-bottom: 2px solid var(--danger); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; animation: slide-down .3s var(--spring); } /* --- Squelettes de chargement --- */ .skeleton { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .sk-row { height: 44px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb,var(--ink) 6%,transparent) 25%, color-mix(in srgb,var(--ink) 12%,transparent) 37%, color-mix(in srgb,var(--ink) 6%,transparent) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .sk-row.short { width: 60%; } /* --- Bottom sheet (mobile) / modale (desktop) --- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; display: flex; align-items: center; justify-content: center; animation: fade-in .25s var(--spring); } .sheet { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; width: min(440px, 92vw); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; animation: sheet-in .35s var(--spring); } @media (max-width: 620px) { .sheet-backdrop { align-items: flex-end; } .sheet { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); animation: sheet-up .4s var(--spring); } } /* --- Animations --- */ @keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes sheet-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --- v4.1 : messages vocaux --- */ .inline-audio { max-width: 240px; display: block; } .rec-indicator { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-variant-numeric: tabular-nums; } .rec-indicator button { margin-left: auto; } /* --- v4.1 : édition de message --- */ .edit-row textarea { width: 100%; min-height: 32px; resize: vertical; background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 10px; padding: 6px 8px; } .bubble.mine .edit-row textarea { border-color: rgba(255,255,255,.4); } /* --- v4.1 : QR code (affichage + scan) --- */ .qr-canvas { border-radius: 12px; background: #fff; padding: 8px; } .qr-video { width: 100%; max-width: 340px; border-radius: var(--radius); background: #000; aspect-ratio: 1 / 1; object-fit: cover; } /* v4.4 */ .composer-options{display:flex;gap:8px;align-items:center;padding:4px 10px}.schedule-control{font-size:.85rem;display:flex;align-items:center;gap:4px}.schedule-control input{max-width:210px}.important-toggle.active,.important-label{color:#c40000;font-weight:700}.important-message{border:2px solid #d11!important}.shopping-panel{margin:8px 10px;padding:10px;border:1px solid var(--border,#ccc);border-radius:12px;display:grid;gap:7px}.shopping-item{display:flex;gap:8px;align-items:center}.poll-card{display:grid;gap:7px;margin-top:8px}.poll-option{display:flex;justify-content:space-between;text-align:left} /* v4.4.1 — palettes locales, rouge exclu car réservé à la priorité. */ [data-bubble-color="blue"] { --bubble-mine-1:#0a84ff; --bubble-mine-2:#0a7cff; } [data-bubble-color="purple"] { --bubble-mine-1:#8b5cf6; --bubble-mine-2:#6d28d9; } [data-bubble-color="green"] { --bubble-mine-1:#34c759; --bubble-mine-2:#198f3d; } [data-bubble-color="teal"] { --bubble-mine-1:#20b8bd; --bubble-mine-2:#087f8c; } [data-bubble-color="graphite"] { --bubble-mine-1:#636366; --bubble-mine-2:#3a3a3c; } [data-bubble-color="orange"] { --bubble-mine-1:#ff9f0a; --bubble-mine-2:#d97706; } [data-bubble-color="pink"] { --bubble-mine-1:#d65a91; --bubble-mine-2:#a83e70; } .bubble-palette{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}.color-choice{width:34px;height:34px;padding:0;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px var(--line)}.color-choice.selected{border-color:var(--surface);box-shadow:0 0 0 3px var(--accent)}.color-choice[data-color="blue"]{background:#0a84ff}.color-choice[data-color="purple"]{background:#7c3aed}.color-choice[data-color="green"]{background:#28a745}.color-choice[data-color="teal"]{background:#149ba3}.color-choice[data-color="graphite"]{background:#4b4b4f}.color-choice[data-color="orange"]{background:#e88a00}.color-choice[data-color="pink"]{background:#bd4f80}.setting-block,.health-card{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--line);border-radius:12px}.health-card button{align-self:flex-start} /* Liste de courses mobile : aucun décalage ni débordement horizontal. */ .shopping-panel{min-width:0;overflow:hidden}.shopping-panel>.row{min-width:0;flex-wrap:wrap}.shopping-panel>.row input{flex:1 1 180px;min-width:0}.shopping-item{width:100%;min-width:0;display:grid!important;grid-template-columns:28px minmax(0,1fr);gap:8px!important;align-items:start!important;padding:5px 2px}.shopping-item input{width:22px;height:22px;margin:0}.shopping-item span{min-width:0;overflow-wrap:anywhere;line-height:1.35;padding-top:1px}.shopping-panel>.row button{flex:1 1 150px;white-space:normal} @media (max-width:480px){.shopping-panel{margin:6px 8px;padding:10px}.shopping-panel>.row{display:grid;grid-template-columns:minmax(0,1fr) auto}.shopping-panel>.row:last-child{grid-template-columns:1fr}.shopping-panel>.row:last-child button{width:100%}.settings .row form,.settings form.row{flex-wrap:wrap}.settings form.row button{width:100%}} /* v4.4.2 */ .reaction-trigger{position:absolute;top:-15px;left:-15px;z-index:4;width:31px;height:31px;padding:0;border-radius:50%;display:none;align-items:center;justify-content:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 5px 16px rgba(0,0,0,.16)} .bubble:hover .reaction-trigger,.bubble.actions-open .reaction-trigger,.bubble:focus-within .reaction-trigger{display:flex}.emoji-pop-top-left{left:-2px!important;right:auto!important;bottom:calc(100% + 20px)!important}.mention{background:rgba(10,132,255,.16);color:inherit;border-radius:6px;padding:0 3px;font-weight:650}.mention-suggestions{margin:0 10px;padding:7px;display:flex;gap:6px;overflow-x:auto;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.mention-suggestions button{white-space:nowrap;padding:6px 10px}.shopping-message-card{margin-top:7px;min-width:min(280px,72vw);display:grid;gap:8px;padding:10px;border-radius:13px;background:rgba(255,255,255,.16)}.bubble.theirs .shopping-message-card{background:rgba(0,0,0,.045)}.shopping-message-card ul{margin:0;padding-left:22px;display:grid;gap:4px}.shopping-import-actions{flex-wrap:wrap}.shopping-import-actions button{flex:1 1 130px}.share-destination-list{display:grid;gap:7px;max-height:50vh;overflow:auto}.share-destination-list button{text-align:left}.segmented-control{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}.segmented-control button{background:transparent;color:var(--ink);box-shadow:none}.segmented-control button.selected{background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.12)} [data-ui-style="modern"] body{background:radial-gradient(circle at 20% 0%,rgba(90,160,255,.17),transparent 38%),radial-gradient(circle at 100% 20%,rgba(170,110,255,.12),transparent 34%),var(--bg)}[data-ui-style="modern"] .app{max-width:760px;margin:0 auto;min-height:100dvh;background:color-mix(in srgb,var(--bg) 82%,transparent);box-shadow:0 0 70px rgba(0,0,0,.10)}[data-ui-style="modern"] .bar,[data-ui-style="modern"] .composer{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}[data-ui-style="modern"] .bubble{border-radius:22px;box-shadow:0 7px 20px rgba(0,0,0,.08)}[data-ui-style="modern"] .bubble.mine{border-bottom-right-radius:7px}[data-ui-style="modern"] .bubble.theirs{border-bottom-left-radius:7px}[data-ui-style="modern"] .conv-list li,[data-ui-style="modern"] .setting-block,[data-ui-style="modern"] .health-card,[data-ui-style="modern"] .shopping-panel{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);box-shadow:0 8px 25px rgba(0,0,0,.055)}[data-ui-style="modern"] button{border-radius:14px}[data-ui-style="modern"] input,[data-ui-style="modern"] textarea{border-radius:15px;background:color-mix(in srgb,var(--surface) 88%,transparent)} @media(hover:none){.bubble.actions-open .reaction-trigger{display:flex;opacity:.92}}@media(max-width:480px){.shopping-message-card{min-width:0;width:min(76vw,310px)}.emoji-pop-top-left{max-width:calc(100vw - 28px);overflow-x:auto}}@media(prefers-reduced-motion:reduce){[data-ui-style="modern"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* v4.4.3 */ .server-stats{display:grid;gap:3px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line)} .mention-suggestions{scrollbar-width:thin}.mention-suggestions button{flex:0 0 auto}.reaction-trigger{transition:opacity .12s ease,transform .12s ease}.bubble:not(.actions-open) .reaction-trigger{pointer-events:none}@media(hover:hover){.bubble:hover .reaction-trigger{pointer-events:auto}} /* v4.5.0 — appels audio WebRTC 1-à-1. */ .call-start-button{display:inline-flex!important;align-items:center;justify-content:center;min-width:42px}.call-start-button:disabled{opacity:.38} .call-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 12%,rgba(10,132,255,.30),transparent 35%),rgba(5,8,18,.88);-webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);animation:fade-in .22s var(--spring)} .call-card{width:min(420px,100%);min-height:430px;padding:34px 24px;border-radius:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 90px rgba(0,0,0,.38)} .call-card .avatar{width:96px;height:96px;font-size:34px;box-shadow:0 14px 36px rgba(0,0,0,.25);margin:12px 0}.call-card h1{font-size:30px}.call-card .muted{color:rgba(255,255,255,.76)}.call-card .error{color:#ffd1cf}.call-security{font-size:12px;font-weight:650;letter-spacing:.02em;color:rgba(255,255,255,.72)}.call-status{margin:2px 0 0;font-size:17px;font-weight:650}.call-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:34px}.call-button{width:68px;height:68px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.24)}.call-button svg{width:28px;height:28px}.call-button.accept{background:#30d158}.call-button.decline{background:#ff453a}.call-button.neutral{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.20)}.call-button.neutral.active{background:#fff;color:#111} @media(max-width:620px){.call-overlay{align-items:stretch;padding:0}.call-card{width:100%;min-height:100dvh;border-radius:0;padding-top:max(44px,env(safe-area-inset-top));padding-bottom:max(34px,env(safe-area-inset-bottom));border:0}.call-card .avatar{width:108px;height:108px}} /* v4.5.3 — polish appels : qualité locale, vérification et historique. */ .verified-badge{display:inline-flex;align-items:center;margin-left:7px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:750;vertical-align:1px;background:rgba(48,209,88,.13);color:#1b8f3d;border:1px solid rgba(48,209,88,.22)} .verified-panel{margin-bottom:8px;padding:7px 10px;border-radius:10px;background:rgba(48,209,88,.10);color:#1b8f3d;font-size:12px;font-weight:700} .call-verified{font-size:12px;font-weight:700;color:#8ff0a8;background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.22);border-radius:999px;padding:5px 10px} .call-card.reconnecting .avatar{animation:call-pulse 1.25s ease-in-out infinite}.call-diagnostics{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:2px}.quality-pill,.route-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.88)}.quality-pill i{width:7px;height:7px;border-radius:50%;background:#30d158}.quality-pill.good i{background:#a7e22e}.quality-pill.weak i{background:#ffd60a}.quality-pill.poor i{background:#ff453a}.call-action-labels{display:grid;grid-template-columns:68px 68px;gap:28px;margin-top:-2px;font-size:11px;color:rgba(255,255,255,.68)} .call-history-card{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.call-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:6px 0;border-top:1px solid var(--line)}.call-history-row>span:last-child{grid-column:1/-1} @keyframes call-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} /* v4.6.0 — confort messagerie local, tactile iPhone et messages éphémères. */ .local-search-results{display:grid;gap:7px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent)} .message-search-hit{display:grid;gap:2px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:9px 11px;border-radius:13px;box-shadow:none} .archived-block{padding-top:6px;padding-bottom:8px}.archived-toggle{width:100%;justify-content:flex-start}.archived-list{margin-top:6px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.conv-pin.active{background:color-mix(in srgb,var(--accent) 12%,transparent)} .media-gallery-button{font-size:22px;line-height:1}.media-gallery-button:disabled{opacity:.28}.media-gallery-sheet{width:min(720px,calc(100vw - 24px));max-height:min(82dvh,760px);overflow:auto}.media-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px}.media-gallery-item{min-width:0;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--bg);display:grid;gap:6px}.media-gallery-item .inline-img{width:100%;height:120px;object-fit:cover;border-radius:10px}.media-gallery-file-icon{height:94px;display:grid;place-items:center;font-size:38px;border-radius:10px;background:var(--surface)}.media-gallery-item strong{overflow-wrap:anywhere}.ephemeral-control{display:flex;align-items:center;gap:5px;font-size:.85rem}.ephemeral-control select{max-width:115px;min-height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:4px 7px}.ephemeral-stamp{font-size:10px;opacity:.68;margin-top:5px}.search-hit .bubble{animation:search-pulse 1.1s ease 2;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),var(--shadow)} @keyframes search-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}} /* iOS : le déclencheur reste DANS la zone cliquable de la bulle. Le menu de réactions devient une barre fixe tactile plutôt qu'un popover hors-bulle, dont le hit-testing WebKit était intermittent. */ @media(hover:none){ .reaction-trigger{top:7px!important;left:7px!important;width:42px!important;height:42px!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:12} .emoji-pop-top-left{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;z-index:180!important;max-width:calc(100vw - 24px)!important;overflow-x:auto!important;padding:7px 9px!important;box-shadow:0 14px 40px rgba(0,0,0,.28)!important} .emoji-pop button{min-width:46px;min-height:46px;padding:5px 7px!important;font-size:25px!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent} } @media(max-width:480px){.composer-options{overflow-x:auto;scrollbar-width:none}.composer-options::-webkit-scrollbar{display:none}.ephemeral-control{flex:0 0 auto}.media-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* --- v4.7.0 : confidentialité, média à ouverture unique, admin et verrou local --- */ .snap-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; } .snap-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } .snap-toggle.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .view-once-message { min-width: min(240px, 68vw); display: grid; justify-items: center; gap: 7px; padding: 14px 12px; margin: 2px 0; text-align: center; border: 1px dashed color-mix(in srgb, currentColor 28%, transparent); border-radius: 14px; } .view-once-message button { min-height: 38px; } .view-once-icon { font-size: 30px; line-height: 1; } .view-once-backdrop { z-index: 90; background: rgba(0,0,0,.86); } .view-once-sheet { width: min(900px, 96vw); max-height: 94vh; padding: 12px; background: #090909; color: #fff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .view-once-sheet img, .view-once-sheet video { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 12px; } .view-once-sheet button { align-self: stretch; } .app-lock-screen { min-height: 100dvh; display: grid; place-items: center; padding: 22px; background: var(--bg); color: var(--ink); } .app-lock-card { width: min(420px, 94vw); display: grid; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); text-align: center; } .app-lock-icon { font-size: 42px; line-height: 1; } .app-lock-card input { text-align: center; font-size: 20px; letter-spacing: .05em; } .app-lock-settings { margin-top: 4px; } .admin-card { display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); } .admin-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .admin-badge { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); } .admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; } .admin-actions button { min-width: 0; white-space: normal; } .danger-soft { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); } .admin-confirm { display: grid; gap: 8px; padding: 11px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); } .admin-confirm input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 750; } .admin-result { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #34c759 10%, var(--surface)); border: 1px solid color-mix(in srgb, #34c759 30%, var(--line)); } /* Le bouton « supprimer pour tous » reste une cible tactile lisible malgré les boutons ronds historiques de msg-actions. */ .msg-actions button[title="Supprimer pour tout le monde"] { width: auto; min-width: 34px; padding: 0 7px; border-radius: 14px; font-size: 11px; } @media (max-width: 620px) { .admin-actions { grid-template-columns: 1fr; } .view-once-backdrop { align-items: center; } .view-once-sheet { width: 100%; max-height: 100dvh; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); } .view-once-sheet img, .view-once-sheet video { max-height: 76dvh; } .snap-toggle { min-height: 38px; } } /* v4.8.0 — appels vidéo 1-to-1 : média plein écran + aperçu local. */ .video-call-overlay { background: #10131a; } .video-stage { position: absolute; inset: 0; overflow: hidden; background: #090b10; } .remote-call-video { width: 100%; height: 100%; object-fit: cover; background: #090b10; } .local-call-video { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 16px; width: min(29vw, 150px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; background: #1e2330; box-shadow: 0 8px 30px rgba(0,0,0,.35); transform: scaleX(-1); z-index: 2; } .local-call-video.camera-off { opacity: .18; } .video-waiting { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; justify-items: center; color: white; } .video-call-card { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 620px); padding: 16px 18px; background: rgba(20,24,34,.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.14); } .video-call-card h1 { font-size: 1.15rem; margin: 4px 0; } .video-call-card .call-security, .video-call-card .call-status, .video-call-card .muted { margin: 2px 0; } .video-call-card .call-actions { margin-top: 10px; } .video-call-card .call-action-labels { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 600px) { .local-call-video { width: 28vw; max-width: 120px; } .video-call-card { width: calc(100vw - 20px); padding: 13px 10px; } .video-call-card .call-button { width: 54px; height: 54px; } } /* v4.9.0 — polish vidéo + liste de conversations compacte + coffre local. */ .vault-screen { min-height: 100dvh; padding: 22px; background: var(--bg); color: var(--ink); } .vault-card { width: min(470px, 94vw); display: grid; gap: 12px; padding: 24px; text-align: center; } .vault-card input { text-align: center; font-size: 18px; } .vault-settings details { width: 100%; } .vault-settings summary { cursor: pointer; padding: 5px 0; } .vault-code-grid { display: grid; gap: 7px; margin-top: 8px; } .conv-call-button { width: 40px; min-width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 13px; } .conv-call-button:disabled { opacity: .30; } .conv-more-wrap { position: relative; flex: 0 0 auto; } .conv-more-button { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 25px; line-height: 1; border-radius: 13px; } .conv-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 190px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 40px rgba(0,0,0,.18); } .conv-more-menu button { width: 100%; justify-content: flex-start; text-align: left; background: transparent; color: var(--ink); box-shadow: none; border: 0; padding: 9px 10px; border-radius: 9px; } .conv-more-menu button:hover { background: color-mix(in srgb,var(--accent) 8%,transparent); } .conv-more-menu .danger-text { color: var(--danger); } /* En appel vidéo connecté, l'interlocuteur occupe réellement l'écran. Les contrôles forment une barre basse et disparaissent après quelques secondes ; un tap sur la vidéo les rappelle. */ .video-top-hud { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -10px); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 210px); padding: 7px 12px; color: #fff; background: rgba(8,10,16,.52); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; white-space: nowrap; overflow: hidden; } .video-top-hud.visible { opacity: 1; transform: translate(-50%, 0); } .video-top-hud strong, .video-top-hud span { overflow: hidden; text-overflow: ellipsis; } .video-top-diagnostics { font-size: 11px; opacity: .78; } .video-call-card.video-connected { width: auto; min-width: 0; padding: 8px 10px; border-radius: 999px; bottom: max(14px, env(safe-area-inset-bottom)); background: rgba(12,15,22,.58); border-color: rgba(255,255,255,.11); transition: opacity .2s ease, transform .2s ease; } .video-call-card.video-connected .call-security, .video-call-card.video-connected .call-verified, .video-call-card.video-connected > h1, .video-call-card.video-connected > .call-status, .video-call-card.video-connected > .muted, .video-call-card.video-connected > .call-diagnostics, .video-call-card.video-connected > .call-action-labels { display: none; } .video-call-card.video-connected .call-actions { margin: 0; gap: 10px; } .video-call-card.video-connected .call-button { width: 54px; height: 54px; } .video-call-card.video-connected.controls-hidden { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; } @media (max-width: 620px) { .conv-list > li { gap: 8px; } .conv-call-button, .conv-more-button { width: 38px; min-width: 38px; height: 38px; } .conv-more-menu { position: fixed; right: 12px; left: 12px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); min-width: 0; z-index: 190; } .conv-more-menu button { min-height: 46px; font-size: 16px; } .video-top-hud { max-width: calc(100vw - 155px); left: 12px; transform: translateY(-10px); } .video-top-hud.visible { transform: translateY(0); } .video-top-diagnostics { display: none; } .video-call-card.video-connected { width: auto; padding: 7px 8px; } .video-call-card.video-connected .call-button { width: 52px; height: 52px; } } /* v4.9.2 — UI WebAuthn multi-OS + menu contextuel adaptatif + backup coffre. */ .conv-more-menu { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; } .vault-auth-block, .vault-policy-block, .vault-backup-block { display: grid; gap: 8px; width: 100%; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); } .vault-policy-block label { display: flex; gap: 8px; align-items: flex-start; } .vault-biometric-button { font-weight: 650; } .vault-file-label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; } /* v4.9.3 — menu ⋯ en modal centré, toujours au premier plan. Le portal document.body évite les contextes de stacking/backdrop-filter de Safari. */ .conv-menu-backdrop { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: rgba(8, 12, 20, .26); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .conv-more-menu.conv-more-menu-centered { position: relative; inset: auto; right: auto; left: auto; top: auto; bottom: auto; width: min(360px, calc(100vw - 36px)); min-width: 0; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 10px; gap: 4px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.34); } .conv-more-menu-centered .conv-menu-title { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 3px; } .conv-more-menu-centered .conv-menu-title .avatar { width: 36px; height: 36px; min-width: 36px; font-size: 14px; } .conv-more-menu-centered button { min-height: 48px; font-size: 16px; } .conv-more-menu-centered .conv-menu-close { justify-content: center; text-align: center; margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; } /* v4.9.3 — action de vocal après appel sans réponse. */ .call-button.voicemail { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); } .call-terminal-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }