/* Ultragram (owner 22/10) — design inspiré de Telegram posé sur les pages Whooph Pro.
   Chargé par WhoophProSkin (thème « ultragram ») sur <html class="ug">. Les vues gardent leurs classes ;
   ici : jetons de couleur (sombre = :root, clair = .wh-light), police système, puis la structure
   des écrans (liste des chats, fil, barre d'onglets, réglages). Maquette : brand/ultragram/. */

/* ── Jetons ─────────────────────────────────────────────────────────── */
html.ug {
  --ug-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ug-accent: #4a9bf0; --ug-accent-rgb: 74, 155, 240; --ug-accent-ink: #fff;
  --ug-cell: #1c1c1e; --ug-group: #000; --ug-sep: #38383a; --ug-sep-soft: rgba(255,255,255,.08);
  --ug-badge-mute: #48484a; --ug-online: #3fc552;
  --ug-in: #262628; --ug-out: #2b5278; --ug-out-ink: #fff; --ug-out-meta: #7fb3e6; --ug-in-meta: #8d8e93;
  --ug-bar: rgba(22,22,24,.86); --ug-wall: #0f1720;
  --wh-bg: #000; --wh-bg2: #1c1c1e; --wh-ink: #fff; --wh-muted: #8d8e93; --wh-line: rgba(255,255,255,.10);
  --wh-fg-rgb: 255,255,255; --wh-bg-rgb: 0,0,0; --wh-elev-rgb: 28,28,30;
  --wh-card: #1c1c1e; --wh-sheet: #1c1c1e; --wh-elev: #2c2c2e; --wh-input: #1c1c1e;
  --wh-scrim: rgba(0,0,0,.55); --wh-shadow: rgba(0,0,0,.4);
  --wh-t-pink: #6ab3f3; --wh-t-violet: #6ab3f3; --wh-t-blue: #6ab3f3; --wh-t-cyan: #64d2ff;
  --wh-bones: url("/images/ultragram/wall-dark.svg?v=1"); --wh-bones-load: url("/images/ultragram/wall-dark.svg?v=1");
}
html.ug.wh-light {
  --ug-accent: #3390ec; --ug-accent-rgb: 51, 144, 236;
  --ug-cell: #fff; --ug-group: #efeff4; --ug-sep: #c8c7cc; --ug-sep-soft: rgba(0,0,0,.08);
  --ug-badge-mute: #b4b8bf;
  --ug-in: #fff; --ug-out: #e3fecb; --ug-out-ink: #000; --ug-out-meta: #4fae4e; --ug-in-meta: #8e8e93;
  --ug-bar: rgba(248,248,250,.86); --ug-wall: #cfe8f2;
  --wh-bg: #fff; --wh-bg2: #fff; --wh-ink: #000; --wh-muted: #8e8e93; --wh-line: rgba(0,0,0,.09);
  --wh-fg-rgb: 0,0,0; --wh-bg-rgb: 255,255,255; --wh-elev-rgb: 255,255,255;
  --wh-card: #fff; --wh-sheet: #fff; --wh-elev: #f2f2f7; --wh-input: #eeeff3;
  --wh-scrim: rgba(0,0,0,.32); --wh-shadow: rgba(0,0,0,.12);
  --wh-t-pink: #3390ec; --wh-t-violet: #3390ec; --wh-t-blue: #3390ec; --wh-t-cyan: #0e8fb3;
  --wh-bones: url("/images/ultragram/wall-light.svg?v=1"); --wh-bones-load: url("/images/ultragram/wall-light.svg?v=1");
}

/* Police système partout (Telegram = SF / Roboto), les émojis passent par le repli système. */
html.ug body, html.ug body *:not(svg):not(svg *) { font-family: var(--ug-font) !important; letter-spacing: normal; }
html.ug body { background: var(--wh-bg); color: var(--wh-ink); -webkit-font-smoothing: antialiased; }
html.ug ::selection { background: rgba(var(--ug-accent-rgb), .3); }

/* Boutons « pleins » de l'app : l'or / le dégradé deviennent le bleu Ultragram. */
html.ug :is(.wh-btn, .btn-primary, .wh-cta, .pp-cta, .np-btn.on) { background: var(--ug-accent) !important; color: var(--ug-accent-ink) !important; border-color: transparent !important; box-shadow: none !important; }

/* ── Écran Chats : en-tête façon Telegram ───────────────────────────── */
html.ug .wc-head { background: var(--ug-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: .5px solid var(--ug-sep-soft); min-height: 52px; }
html.ug .wc-head h1 { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.2px; position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
html.ug .wc-head .wc-hact { margin-left: auto; gap: 4px; }
html.ug .wc-head .wc-pts { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
html.ug .wc-head .wc-newc { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ug-accent) !important; width: 36px; height: 36px; }
html.ug .wc-head .wc-newc svg { stroke: var(--ug-accent) !important; }
html.ug .wc-head .wc-pts { background: rgba(var(--ug-accent-rgb), .12) !important; border: 0 !important; color: var(--ug-accent) !important; box-shadow: none !important; }
html.ug .wc-head .wc-pts svg { color: var(--ug-accent) !important; stroke: var(--ug-accent) !important; }

/* Dossiers (Tous / Favoris / groupes) = onglets-pastilles Telegram */
html.ug .wc-grps { background: var(--wh-bg) !important; padding-top: 6px; padding-bottom: 6px; gap: 6px; }
html.ug .wc-grps .g { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--wh-muted) !important; font-weight: 600 !important; font-size: 14.5px !important; padding: 6px 13px !important; min-height: 32px; border-radius: 16px !important; }
html.ug .wc-grps .g.on { background: var(--ug-accent) !important; color: #fff !important; }
html.ug .wc-grps .g.add { color: var(--ug-accent) !important; }
html.ug .wc-grps .g svg { stroke: currentColor !important; }

/* Lignes de conversation */
html.ug .wc-list { background: var(--wh-bg) !important; }
html.ug .wc-row { background: var(--wh-bg) !important; padding: 0 0 0 14px !important; min-height: 78px; gap: 12px !important; box-shadow: none !important; border-radius: 0 !important; }
html.ug .wc-row:active { background: rgba(var(--wh-fg-rgb), .06) !important; }
html.ug .wc-udot { display: none !important; }
html.ug .wc-row .wc-avwrap, html.ug .wc-row .wc-av { width: 58px !important; height: 58px !important; }
html.ug .wc-av { border-radius: 50% !important; box-shadow: none !important; font-weight: 600 !important; font-size: 21px !important; }
html.ug .wc-av span:not(.ph) { font-weight: 600 !important; }
html.ug .wc-meta { align-self: stretch; padding: 9px 14px 9px 0 !important; border-bottom: .5px solid var(--ug-sep-soft); display: flex !important; flex-direction: column; justify-content: flex-start; min-width: 0; }
html.ug .wc-name { font-weight: 600 !important; font-size: 16.5px !important; color: var(--wh-ink) !important; }
html.ug .wc-name.lg { font-size: 16.5px !important; }
html.ug .wc-time { color: var(--wh-muted) !important; font-size: 14px !important; font-weight: 400 !important; }
html.ug .wc-row.unread .wc-time { color: var(--ug-accent) !important; }
html.ug .wc-prev { color: var(--wh-muted) !important; font-size: 15px !important; line-height: 20px !important; margin-top: 2px; }
html.ug .wc-prev .tx:not(.wc-wr) { color: var(--wh-muted) !important; font-weight: 400 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.ug .wc-prev .tx[style*="display: none"] { display: none !important; }
html.ug .wc-prev .wc-wr { color: var(--ug-accent) !important; }
html.ug .wc-prev.unread .tx { color: var(--wh-muted) !important; }
html.ug .wc-down { color: #ff9500 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: 24px !important; height: 24px !important; }
/* Pastille du réseau d'origine sur l'avatar (WhatsApp, Telegram…), le point « en ligne » sinon. */
html.ug .wc-row .wc-chb { display: grid !important; position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--wh-bg); place-items: center; z-index: 2; }
html.ug .wc-row .wc-chb svg { width: 12px; height: 12px; }
html.ug .wc-row .wc-chb[style*="display: none"] { display: none !important; }
html.ug .wc-row .wc-chb:not([style*="display: none"]) ~ .wc-ondot { display: none !important; }
html.ug .wc-ondot-row { border-color: var(--wh-bg) !important; }
html.ug .wc-ondot-row.off { display: none !important; }
html.ug .wc-ondot-row:not(.off) { background: var(--ug-online) !important; }
/* Compteur de non-lus : pastille bleue (grise si sourdine), comme Telegram */
html.ug .wc-cnt > span { background: var(--ug-accent) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 11px !important; min-width: 22px; height: 22px; padding: 0 7px; font-size: 13.5px !important; font-weight: 600 !important; }
html.ug .wc-cnt svg { stroke: #fff !important; }
html.ug .wc-pini { color: var(--wh-muted) !important; }

/* Actions au glissé (épingler, groupes, archiver, supprimer) aux couleurs iOS */
html.ug .wc-rowact .a { border-radius: 0 !important; box-shadow: none !important; }
html.ug .wc-rowact .a.pin { background: #34c759 !important; color: #fff !important; }
html.ug .wc-rowact .a.grp { background: var(--ug-accent) !important; color: #fff !important; }
html.ug .wc-rowact .a.arch { background: #8e8e93 !important; color: #fff !important; }
html.ug .wc-rowact .a.del { background: #ff3b30 !important; color: #fff !important; }

/* ── Barre d'onglets : pilule translucide, actif en bleu ────────────── */
html.ug .wh-tabbar { background: var(--ug-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important;
  border: .5px solid var(--ug-sep-soft) !important; box-shadow: 0 6px 24px rgba(0,0,0,.18) !important; }
html.ug .wh-tab { color: var(--wh-muted) !important; font-weight: 500 !important; }
html.ug .wh-tab.on { color: var(--ug-accent) !important; }
html.ug .wh-tab.on::before { background: rgba(var(--ug-accent-rgb), .13) !important; }
html.ug .wh-tab .wh-tabimg { opacity: 1 !important; }
html.ug .wh-tab.on .wh-tabimg { box-shadow: 0 0 0 2px var(--ug-accent); }
html.ug .wh-tab .wh-badge, html.ug .wh-tab .badge, html.ug .wh-tab [class*="badge"] { background: #ff3b30 !important; color: #fff !important; }

/* Cartes / feuilles génériques : surfaces plates façon cellules groupées */
html.ug .wh-sec, html.ug .bh-sheet { background: var(--ug-cell) !important; border-radius: 12px !important; box-shadow: none !important; border: 0 !important; }

/* Compteur de non-lus (élément .wc-ugcnt ajouté au gabarit, visible seulement ici) */
html.ug .wc-prev { display: flex !important; align-items: flex-start; gap: 8px; }
html.ug .wc-ugcnt { margin-left: auto; align-self: flex-end; flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--ug-accent); color: #fff; font-size: 13.5px; font-weight: 600; display: inline-grid; place-items: center; }
html.ug .wc-row.muted .wc-ugcnt { background: var(--ug-badge-mute); }

/* Couleur du réseau d'origine sur la pastille (le style d'origine la forçait en gris) */
html.ug .wc-row .wc-chb { background: var(--ug-accent) !important; color: #fff !important; }
html.ug .wc-row .wc-chb svg { fill: #fff; }
html.ug .wc-row .wc-chb:is([title="WhatsApp"], [title="WhatsApp Business"]) { background: #25d366 !important; }
html.ug .wc-row .wc-chb[title="Telegram"] { background: #2aabee !important; }
html.ug .wc-row .wc-chb[title="Instagram"] { background: radial-gradient(circle at 30% 110%, #fdd36e, #f5643f 45%, #c1328f 70%, #6a3fd0) !important; }
html.ug .wc-row .wc-chb:is([title="Messenger"], [title="Facebook"]) { background: #0a7cff !important; }
html.ug .wc-row .wc-chb[title="Signal"] { background: #3a76f0 !important; }
html.ug .wc-row .wc-chb:is([title="SMS"], [title="iMessage"]) { background: #34c759 !important; }
html.ug .wc-row .wc-chb:is([title="Email"], [title="E-mail"]) { background: #8e8e93 !important; }
html.ug .wc-row .wc-chb:is([title="X"], [title="TikTok"]) { background: #111 !important; }
html.ug .wc-row .wc-chb[title="LinkedIn"] { background: #0a66c2 !important; }
html.ug .wc-row .wc-chb[title="Viber"] { background: #7360f2 !important; }
html.ug .wc-row .wc-chb:is([title="LINE"], [title="Line"]) { background: #06c755 !important; }

/* Fond de page clair : la balise <html> porte un fond sombre en ligne */
html.ug.wh-light { background: #fff !important; }

/* Icône blanche dans la pastille du réseau */
html.ug .wc-chb svg, html.ug .wc-chb svg * { fill: #fff !important; }

/* ── Fil de conversation ────────────────────────────────────────────── */
html.ug .wc-thread { border-radius: 0 !important; box-shadow: none !important; background: var(--ug-wall) !important; }
html.ug .wc-cvhead { background: var(--ug-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: .5px solid var(--ug-sep-soft) !important; box-shadow: none !important; }
html.ug .wc-back { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ug-accent) !important; }
html.ug .wc-back svg { stroke: var(--ug-accent) !important; color: var(--ug-accent) !important; }
html.ug .wc-hdav, html.ug .wc-hdav .wc-av { width: 40px !important; height: 40px !important; }
html.ug .wc-hdav { align-self: center; }
html.ug .wc-hdav .wc-av { font-size: 15px !important; }
html.ug .wc-cvhead .nm .t { font-weight: 600 !important; font-size: 16.5px !important; color: var(--wh-ink) !important; }
html.ug .wc-cvhead .sub { color: var(--wh-muted) !important; font-size: 13px !important; }
html.ug .wc-cvhead .wc-kebab { background: transparent !important; border: 0 !important; }
html.ug .wc-cvhead .wc-kebab svg { color: var(--ug-accent) !important; stroke: var(--ug-accent) !important; fill: var(--ug-accent); }
html.ug .wc-info-i { background: rgba(var(--ug-accent-rgb), .14) !important; color: var(--ug-accent) !important; }
/* Fond : motif Ultragram en tuiles de 220 px ; dégradé clair façon Telegram, bleu nuit en sombre */
html.ug .wc-msgs { background-color: var(--ug-wall) !important; background-image: var(--wh-bones) !important; background-size: 220px 220px !important; background-repeat: repeat !important; }
html.ug.wh-light .wc-msgs { background-image: var(--wh-bones), linear-gradient(160deg, #cfe9f6 0%, #d9efdc 55%, #e8f3c8 100%) !important;
  background-size: 220px 220px, 100% 100% !important; background-repeat: repeat, no-repeat !important; }
/* Bulles */
html.ug .wc-b { border: 0 !important; box-shadow: 0 1px 1.5px rgba(0,0,0,.13) !important; border-radius: 18px !important; }
html.ug .wc-b.wc-in { background: var(--ug-in) !important; color: var(--wh-ink) !important; border-bottom-left-radius: 6px !important; }
html.ug .wc-b.wc-out { background: var(--ug-out) !important; color: var(--ug-out-ink) !important; border-bottom-right-radius: 6px !important; }
html.ug .wc-b .wc-t { color: inherit !important; font-size: 16px !important; line-height: 21px !important; }
/* Dates : pastille translucide */
html.ug :is(.wc-floatday, .wc-daysep) { background: rgba(0,0,0,.22) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
  font-weight: 600 !important; font-size: 13px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.ug:not(.wh-light) :is(.wc-floatday, .wc-daysep) { background: rgba(255,255,255,.12) !important; }
/* Barre de saisie */
html.ug .wc-comp { background: var(--ug-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important;
  border-top: .5px solid var(--ug-sep-soft) !important; box-shadow: none !important; }
html.ug .wc-comprow > button { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--wh-muted) !important; }
html.ug .wc-comprow > button svg { stroke: var(--wh-muted) !important; }
html.ug .wc-comp textarea { background: var(--ug-cell) !important; border: .5px solid var(--ug-sep) !important; border-radius: 18px !important; color: var(--wh-ink) !important; box-shadow: none !important; }
html.ug.wh-light .wc-comp textarea { background: #fff !important; }
html.ug .wc-comprow > .wc-send:not(.mic) { background: var(--ug-accent) !important; color: #fff !important; border-radius: 50% !important; }
html.ug .wc-comprow > .wc-send:not(.mic) svg { stroke: #fff !important; }

/* ── Pages Pro (Fetch, Réseaux sociaux, Pubs) : le « noir & blanc » de Whooph Pro devient le bleu Ultragram ── */
html.ug :is(.ps-btn, .pa-btn, .pf-btn.go, .pf-go) { background: var(--ug-accent) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; }
html.ug :is(.ps-tabs, .pf-tabs, .pa-tabs, .ps-chips, .pf-chips, .pa-chips) .on { background: var(--ug-accent) !important; color: #fff !important; border-color: var(--ug-accent) !important; }
html.ug :is(.ps-box, .pf-box, .pa-box) { background: var(--ug-cell) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
html.ug.wh-light :is(.ps-box, .pf-box, .pa-box) { background: #f2f2f7 !important; }
html.ug.wh-light .pf-intro { background: var(--wh-bg) !important; color: var(--wh-ink) !important; }
/* Actus : tuiles d'actions (Promotion, Actu, Relance) */
html.ug .wc-acts .it { background: rgba(var(--ug-accent-rgb), .09) !important; border: 0 !important; box-shadow: none !important; }
html.ug .wc-acts .it svg { color: var(--ug-accent) !important; stroke: var(--ug-accent) !important; }

/* ── Connexion / inscription (layout plein écran) : accueil blanc façon Telegram ── */
html.ug .pro-auth { background: #fff !important; color: #000;
  --color-brand-50: #e8f2fd; --color-brand-300: #9cc9f5; --color-brand-400: #5aa7f0; --color-brand-500: #3390ec;
  --color-brand-600: #2a7fd6; --color-brand-700: #2468b3; --color-brand-800: #1d4f86; }
html.ug .pro-auth .wp-glow { display: none !important; }
html.ug .pro-auth :is(h1, h2, .text-gray-800) { color: #000 !important; }
html.ug .pro-auth :is(.text-gray-500, .text-gray-400) { color: #8e8e93 !important; }
html.ug .pro-auth .relative.flex.justify-center > span { background: #fff !important; color: #8e8e93 !important; }
html.ug .pro-auth :is(.border-gray-200, .border-gray-100) { border-color: #e5e5ea !important; }
html.ug .pro-auth [x-show="authStep === 'choose'"] > button:first-of-type { background: #3390ec !important; color: #fff !important; box-shadow: none !important; }
html.ug .pro-auth input { background: #f2f2f7 !important; color: #000 !important; border-color: #e5e5ea !important; }

/* Apparence : ni thèmes de couleur ni icônes Whooph Pro (os, or) — Ultragram = un seul look, clair / sombre / auto */
html.ug :is(.pt-grid, .ic-grid), html.ug .st-cap:has(+ .pt-grid), html.ug .st-cap:has(+ .ic-grid) { display: none !important; }

/* ── Accueil visiteur (.wp) : façon écran d'accueil Telegram ── */
html.ug body:has(.wp) { background: #fff !important; }
html.ug .wp { background: #fff !important; color: #000 !important; }
html.ug .wp .wp-glow, html.ug .wp .tag { display: none !important; }
html.ug .wp h1 { color: #000 !important; }
html.ug .wp p, html.ug .wp small { color: #8e8e93 !important; }
html.ug .wp li { background: #f2f2f7 !important; color: #000 !important; }
html.ug .wp li .ic { background: rgba(51,144,236,.12) !important; color: #3390ec !important; }
html.ug .wp a.st { background: #3390ec !important; color: #fff !important; box-shadow: none !important; border: 0 !important; }
html.ug .wp a.st[href="/signin"] { background: transparent !important; color: #3390ec !important; }
html.ug :has(> #ic-hint), html.ug #ic-hint { display: none !important; }

/* Updates (owner 22/10 « manque des background color ») : cartes blanches sur blanc → fond groupé gris façon
   Telegram, cartes en cellules (blanc / #1c1c1e). */
html.ug #upRoot { background: var(--ug-group) !important; min-height: 100vh; }
html.ug #upRoot :is(.ax-card, .ax-sw .ax-card, .wl-card) { background: var(--ug-cell) !important; border-radius: 14px !important; box-shadow: none !important; }
html.ug #upRoot .ax-sw { background: transparent; }

/* Fetch (owner 22/10 « Theme ?? ») : page Pro dessinée pour le noir (tuiles voile blanc, icônes #e4e4e7, bouton
   blanc) → fond groupé + cellules, icônes et bouton au bleu Ultragram. */
html.ug .pf { background: var(--ug-group) !important; }
html.ug .pf-seg { background: rgba(var(--wh-fg-rgb), .08) !important; border: 0 !important; }
html.ug .pf-seg button.on { background: var(--ug-cell) !important; color: var(--wh-ink) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html.ug :is(.pf-act, .pf-card, .pf-f) { background: var(--ug-cell) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; color: var(--wh-ink) !important; }
html.ug .pf-act svg { color: var(--ug-accent) !important; }
html.ug .pf-act.on { box-shadow: inset 0 0 0 2px var(--ug-accent) !important; }
html.ug :is(.pf-in input, .pf-f input, .pf-f textarea) { background: var(--ug-cell) !important; border: .5px solid var(--ug-sep) !important; color: var(--wh-ink) !important; }
html.ug :is(.pf-in input, .pf-f input, .pf-f textarea):focus { border-color: var(--ug-accent) !important; }
html.ug .pf-btn:not(.alt) { background: var(--ug-accent) !important; color: #fff !important; }
html.ug .pf-btn.alt { background: rgba(var(--ug-accent-rgb), .12) !important; color: var(--ug-accent) !important; }
html.ug .pf-chip { background: var(--ug-cell) !important; border: 0 !important; }
html.ug .pf-ck svg { color: #fff !important; }
html.ug .pf-ck.on { background: var(--ug-accent) !important; border-color: var(--ug-accent) !important; }
html.ug .pf-chip.on { background: var(--ug-accent) !important; color: #fff !important; }