/* Laura F.S.M · FSM SI — interface mobile, palette et rythmes iOS échantillonnés */
:root {
  --fond: #141414;
  --fond-chat: #141414; /* gris du fil Grok Bot (relevé sur la capture) */
  --sheet: #1C1C1C;
  --group: #272628;
  --btn: #171717;
  --surface: #1C1C1E;
  --bulle-bot: #202020;
  --bulle-moi: #C24E00;
  --texte: #FFFFFF;
  --texte-moi: #FFF8F3;
  --muted: #8E8E93;
  --sep: #38383A;
  --vert: #34C759;
  --lien: #0A84FF;
  --danger: #FF453A;
  --accent: #C24E00;
  --toggle-off: #39393D;
  --toggle-on: #FF9F0A;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --sf: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  position: fixed;
  inset: 0;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  background: var(--fond-chat);
  color: var(--texte);
  font: 16px/1.4 var(--sf);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
#app {
  position: fixed;
  inset: 0;
  width: 100%;
  width: 100vw;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior-x: none;
}
#app, #home, #chatView, #login, #fil, .screen, .msg, .msg .bubble, .sheet-scroll, .push-body {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
button, input, textarea, select { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: none; background: none; padding: 0; }
textarea, input { user-select: text; }
a { color: var(--lien); text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Composer and fields: no orange focus ring (matches the Grok composer). */
#texte, #texte:focus, #texte:focus-visible,
#composePill, #composePill:focus-within,
#composePill textarea, #composePill input {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

/* Avatars */
.av { position: relative; width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: visible; }
.av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #222; }
.av .dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--vert); border: 2.5px solid #000;
  right: -1px; bottom: 2px; box-sizing: border-box;
}
.av.sm { width: 40px; height: 40px; }
.av.lg { width: 80px; height: 80px; }
.av.xl { width: 96px; height: 96px; }
.av.xl .dot { width: 18px; height: 18px; border-width: 3px; border-color: #141414; right: -3px; bottom: 4px; box-shadow: none; }

/* Login */
#login {
  position: fixed; inset: 0; z-index: 90;
  background: var(--fond);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(48px + var(--safe-top)) 24px calc(24px + var(--safe-bot));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#login .hero { text-align: center; margin-bottom: 28px; }
#login .hero .av { margin: 0 auto 14px; }
#login h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
#login .sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
#loginForm { width: 100%; max-width: 400px; }
#loginForm label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
#loginForm input {
  width: 100%; background: var(--surface); border: 0; border-radius: 12px;
  padding: 12px 14px; font-size: 17px;
}
#aerreur { color: var(--danger); font-size: 14px; min-height: 1.2em; }
.btn-orange {
  width: 100%; margin-top: 18px; border-radius: 22px; padding: 12px;
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 600;
}
.btn-orange:disabled { opacity: .45; }
.howto { max-width: 400px; margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.legal { margin-top: auto; padding-top: 24px; color: var(--muted); font-size: 13px; }

/* Screens */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--fond);
  overflow: hidden;
}
#home { background: var(--fond); z-index: 2; }
#chatView { background: var(--fond-chat); z-index: 3; }

/* Home */
.home-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(8px + var(--safe-top)) 16px 0;
}
.round-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20,20,20,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: #F2F2F2;
  display: grid; place-items: center; overflow: hidden; flex: none;
}
#btnSettings { padding: 0; background: #000; border-color: rgba(255,255,255,0.18); }
.round-btn img { width: 100%; height: 100%; object-fit: cover; }
.round-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.home-center {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding-top: 20px;
}
.home-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; }
.home-name {
  font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  max-width: none; overflow: visible; white-space: nowrap;
  text-align: center;
}
.home-bottom {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px calc(16px + var(--safe-bot));
}
#btnGrid {
  width: 48px; height: 48px; background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
}
#btnGrid svg { width: 22px; height: 22px; }
.search-pill {
  flex: 1; height: 48px; border-radius: 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; font-size: 17px;
}
.search-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.grid-ico { fill: currentColor; stroke: currentColor; }

/* Chat */
#chatView .topbar {
  display: flex; align-items: center; gap: 4px;
  padding: calc(4px + var(--safe-top)) 8px 8px 4px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
  flex: none; z-index: 2;
}
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; color: #fff; flex: none;
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.who { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.who .av { width: 32px; height: 32px; }
.who .av .dot { box-shadow: 0 0 0 2px #000; width: 10px; height: 10px; border-width: 2px; bottom: 0; right: -1px; }
.who .nm {
  font-weight: 600; font-size: 16px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.who .st { font-size: 12px; color: var(--muted); }
.circ-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: #2C2C2E; color: #fff;
  display: grid; place-items: center; flex: none;
}
.circ-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.circ-btn.menu-circ { width: 32px; height: 32px; margin-right: 8px; }
.circ-btn.accent { background: var(--accent); color: #fff; }
.circ-btn.light { background: #fff; color: #000; }
.circ-btn.light .stop-sq { width: 12px; height: 12px; border-radius: 3px; background: #111; display: block; }

#fil {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 12px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg { display: flex; flex-direction: column; max-width: 86%; animation: bubble-in .28s var(--ease-ios) both; }
.msg.bot { align-self: flex-start; align-items: flex-start; }
.msg.me, .msg.ordre { align-self: flex-end; align-items: flex-end; }
.msg .bubble {
  padding: 10px 14px; font-size: 16px; line-height: 1.35;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.msg.bot .bubble { background: var(--bulle-bot); color: #fff; border-radius: 16px; border-bottom-left-radius: 6px; }
.msg.me .bubble { background: var(--bulle-moi); color: var(--texte-moi); border-radius: 16px; border-bottom-right-radius: 6px; }
.msg.ordre .bubble { background: #3A3A3C; color: #eee; }
.msg .bubble .petit, .msg .bubble sub, .msg .bubble .sub { display: none !important; }
.msg .bubble pre {
  overflow-x: auto; max-width: 100%; background: rgba(0,0,0,.35); border-radius: 8px;
  padding: 8px; font-size: 13px; user-select: text; overflow-wrap: anywhere;
}
.msg .bubble code { font-size: 0.92em; }
.msg .bubble ul { margin: 4px 0; padding-left: 1.2em; }
.msg .bubble h4 { margin: 6px 0 4px; font-size: 15px; }
.msg .bubble table { border-collapse: collapse; font-size: 14px; }
.msg .bubble td { border: 1px solid rgba(255,255,255,.12); padding: 4px 6px; }
.msg .bubble a.fichier {
  display: inline-block; padding: 8px 12px; margin: 4px 0;
  border: 1px solid var(--sep); border-radius: 10px; color: #fff;
}
.msg time { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; text-align: right; }
.msg.bot time { text-align: left; }
.vid-wrap, .msg .bubble img.vue { border-radius: 12px; display: block; max-width: 100%; }
.vid-wrap { position: relative; }
.vid-wrap video, .vid-wrap img { border-radius: 12px; width: 100%; }
.vid-wrap .play {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.92); pointer-events: none;
  display: grid; place-items: center;
}
.vid-wrap .play::after {
  content: ""; border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #111; margin-left: 3px;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Typing / status line */
#typing {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 6px;
  color: var(--muted); font-size: 13px; flex: none;
}
#typing em { font-style: normal; font-size: 13px; color: var(--muted); transition: opacity .2s; }
.dots { display: flex; gap: 4px; align-items: center; height: 14px; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: dots 1.05s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dots i, .msg, .blob, .sheet-up, .push, .backdrop, #menuPop, #banner { animation: none !important; transition: none !important; }
}

/* Scroll to bottom */
#scrollDown {
  position: absolute; left: 50%; bottom: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: #2C2C2E; color: #fff;
  display: grid; place-items: center;
  transform: translateX(-50%) translateY(-8px) scale(.85);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-ios), transform .2s var(--ease-ios);
  z-index: 4;
}
#scrollDown.show {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(-8px) scale(1);
}
#scrollDown svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#chatView { position: fixed; }

/* Composer */
#composer {
  background: var(--fond-chat); flex: none;
  padding: 6px 12px calc(8px + var(--safe-bot));
  position: relative;
}
.compose-row { display: flex; align-items: flex-end; gap: 8px; }
.pill {
  flex: 1; min-width: 0; display: flex; align-items: flex-end;
  background: var(--surface); border-radius: 22px; padding: 6px 8px 6px 14px;
}
#texte {
  flex: 1; min-width: 0; resize: none; border: 0; background: none;
  font-size: 16px; line-height: 1.35; max-height: 38vh; padding: 6px 0;
  caret-color: var(--accent);
}
#texte::placeholder { color: var(--muted); }
.expand-btn {
  width: 28px; height: 28px; color: #8E8E93; flex: none;
  display: grid; place-items: center; margin-bottom: 1px;
}
.expand-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#sendBtn .ico-send, #sendBtn .ico-mic { width: 18px; height: 18px; display: block; }
#sendBtn.ico-mic .ico-send, #sendBtn .ico-send.hidden, #sendBtn .ico-mic.hidden { display: none; }

/* Attachments preview */
#attachments {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch;
}
#attachments.hidden, #attachments:empty { display: none; }
.att {
  position: relative; flex: none;
  width: 42vw; max-width: 200px;
  border-radius: 14px; overflow: hidden; background: #2C2C2E;
}
.att img, .att video { width: 100%; height: auto; display: block; max-height: 240px; object-fit: cover; }
.att .play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); pointer-events: none;
  display: grid; place-items: center;
}
.att .play::after {
  content: ""; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #111; margin-left: 2px;
}
.att .dur {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 10px;
}
.att .dur::before {
  content: ""; border-style: solid; border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
}
.att .rm {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: #111; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  z-index: 1;
}

/* Fullscreen composer */
#composer.full {
  position: fixed; inset: 0; z-index: 25;
  background: #1C1C1E;
  padding: calc(12px + var(--safe-top)) 16px calc(12px + var(--safe-bot));
  display: flex; flex-direction: column;
  border-radius: 0;
  transform-origin: top center;
}
#composer.full .compose-row { flex: 1; align-items: stretch; }
#composer.full .pill { background: transparent; border-radius: 0; padding: 0; align-items: stretch; }
#composer.full #texte { max-height: none; height: 100%; }
#composer.full #attachBtn, #composer.full #sendBtn { display: none; }
#composer.full .expand-btn { color: #fff; }

/* Voice */
#voiceBar { display: flex; align-items: center; gap: 10px; }
#voiceBar[hidden] { display: none !important; }
#wave { flex: 1; height: 36px; }
#voiceHint { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* In-chat search */
#chatSearchBar {
  display: flex; align-items: center; gap: 8px;
  background: #1C1C1E; border-radius: 22px; padding: 6px 8px;
}
#chatSearchBar[hidden] { display: none !important; }
#chatSearchBar input { flex: 1; min-width: 0; background: transparent; border: 0; font-size: 17px; padding: 6px 4px; }
#searchDone { font-size: 17px; font-weight: 700; color: #fff; padding: 0 8px; white-space: nowrap; }
mark.hit { background: #FF9F0A; color: #000; border-radius: 2px; padding: 0 1px; }
mark.hit.cur { background: #FFD60A; }

/* ⋯ menu */
#overlay {
  position: fixed; inset: 0; z-index: 50; background: transparent;
}
#menuPop {
  position: fixed; z-index: 51;
  background: rgba(44,44,46,.82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-radius: 12px; padding: 4px 0; min-width: 280px;
  transform-origin: top right;
  animation: menu-in .2s var(--ease-ios) both;
}
#menuPop.out { animation: menu-out .16s var(--ease-ios) both; }
@keyframes menu-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes menu-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }
#menuPop button {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px; font-size: 17px; color: #fff;
  width: 100%; text-align: left;
  border-bottom: 1px solid #38383A;
}
#menuPop button:last-child { border-bottom: 0; }
#menuPop button svg { width: 20px; height: 20px; stroke: #8E8E93; fill: none; stroke-width: 1.7; flex: none; }

/* iOS alert */
#iosAlert {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#iosAlert[hidden] { display: none !important; }
.ios-box {
  width: min(320px, calc(100% - 48px));
  background: rgba(44,44,46,.92);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-radius: 16px; padding: 22px 18px 16px;
  text-align: center;
  animation: menu-in .22s var(--ease-ios);
}
.ios-box h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.ios-box p { margin: 0 0 18px; font-size: 14px; color: #EBEBF0; line-height: 1.4; }
.ios-acts { display: flex; gap: 10px; }
.ios-acts button {
  flex: 1; border-radius: 22px; padding: 10px 12px; font-size: 17px;
  background: #3A3A3C; color: #fff;
}
#alertOk { background: #0A84FF; color: #fff; font-weight: 700; }

/* Sheets */
.backdrop {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,0,0,.45);
  transition: opacity .45s var(--ease-spring);
}
.backdrop.hide { opacity: 0; }
.sheet-up {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-height: 92dvh;
  background: var(--sheet);
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(110%);
  transition: transform .45s var(--ease-spring);
  padding-bottom: var(--safe-bot);
}
.sheet-up.open { transform: translateY(0); }
.sheet-grab { padding: 10px 16px 4px; display: flex; align-items: center; }
.close-x { background: #2C2C2E; }
.close-x svg { width: 14px; height: 14px; }
.sheet-scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px 28px;
}
.group {
  background: var(--group); border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 12px 16px; min-height: 48px;
  font-size: 17px; color: #fff;
  border-bottom: 1px solid var(--sep);
  background: none;
}
.row:last-child { border-bottom: 0; }
.row .t { flex: none; }
.row-txt { flex: 1; min-width: 0; }
.row-txt .t { display: block; }
.row-txt .s, .row .s { font-size: 13px; color: var(--muted); margin-top: 1px; font-weight: 400; }
.val { margin-left: auto; color: var(--muted); font-size: 17px; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.chev, .ext { margin-left: auto; color: #636366; font-size: 20px; font-weight: 400; }
.sec-lab { font-size: 13px; color: var(--muted); margin: 0 16px 8px; }
.row.danger { color: var(--danger); justify-content: center; font-size: 17px; }
.sheet-foot { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; padding: 4px 8px 12px; }
.toggle {
  width: 51px; height: 31px; border-radius: 16px;
  background: var(--toggle-off); position: relative; flex: none; margin-left: auto;
  transition: background .28s var(--ease-spring);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .28s var(--ease-spring);
}
.toggle.on { background: var(--toggle-on); }
.toggle.on::after { transform: translateX(20px); }

/* Push screens */
#push {
  z-index: 40; background: var(--fond);
  transform: translateX(100%);
  transition: transform .35s var(--ease-ios);
}
#push.open { transform: translateX(0); }
.push-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px;
  padding: calc(8px + var(--safe-top)) 12px 10px;
  flex: none;
}
.push-head h2 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; padding: 0; min-width: 0; }
.push-extra { display: flex; gap: 8px; margin: 0; justify-content: flex-end; min-width: 40px; min-height: 40px; }
.push-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px calc(24px + var(--safe-bot));
}
.under-parallax { transition: transform .35s var(--ease-ios); }
.under-parallax.back { transform: translateX(-30%); }

/* Banner */
#banner {
  position: fixed; left: 12px; right: 12px; top: calc(8px + var(--safe-top));
  z-index: 70;
  display: flex; gap: 10px; align-items: center;
  background: #181818; border-radius: 18px; padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transform: translateY(-140%);
  transition: transform .4s var(--ease-spring);
}
#banner.show { transform: translateY(0); }
#banner .av { width: 40px; height: 40px; }
.bn-body { flex: 1; min-width: 0; }
.bn-top { display: flex; justify-content: space-between; gap: 8px; }
.bn-top b { font-size: 15px; }
#bannerWhen { color: var(--muted); font-size: 13px; }
#bannerText { margin: 2px 0 0; font-size: 14px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Create bot */
.create-title { text-align: center; font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.blob {
  width: 120px; height: 120px; margin: 8px auto 24px;
  background: #7B61FF;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  animation: morph 6s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }
  50% { border-radius: 60% 40% 45% 55% / 40% 60% 50% 60%; }
}
#botName {
  width: 100%; background: #2C2C2E; border-radius: 22px; border: 0;
  padding: 12px 18px; font-size: 17px; text-align: center; margin-bottom: 20px;
}
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 8px 20px; }
.shape-cell {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: #fff;
}
.shape-cell.on { background: #2C2C2E; }
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 8px; margin: 0 4px 28px; justify-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--c, #7B61FF); }
.swatch.on { box-shadow: 0 0 0 3px #fff; }
.full-btn {
  width: 100%; border-radius: 22px; padding: 14px;
  background: #2D2C2E; color: #7A797B; font-size: 17px; font-weight: 600;
}
.full-btn:not(:disabled) { background: var(--accent); color: #fff; }
.full-btn:disabled { cursor: default; }

/* Profile extras */
.prof-hero { text-align: center; padding: 8px 0 20px; }
.prof-hero .av-wrap { position: relative; width: 108px; height: 108px; margin: 0 auto 14px; }
.prof-hero .av { width: 108px; height: 108px; }
.star-badge {
  position: absolute; right: -2px; bottom: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #FF9F0A; color: #fff;
  display: grid; place-items: center; font-size: 14px;
  box-shadow: 0 0 0 3px var(--sheet, #141414);
}
.prof-hero h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.chip { flex: none; background: #2C2C2E; color: #fff; border-radius: 16px; padding: 6px 12px; font-size: 14px; }
.chip.on { background: #fff; color: #000; }
.badge-pill {
  display: inline-block; margin-left: auto; padding: 3px 10px; border-radius: 12px;
  font-size: 13px; color: #0A84FF; border: 1px solid #0A84FF;
}
.icon-sq { width: 40px; height: 40px; border-radius: 10px; background: #3A3A3C; display: grid; place-items: center; flex: none; font-size: 18px; }
.row .pill-btn { margin-left: auto; background: #2C2C2E; border-radius: 14px; padding: 5px 12px; font-size: 14px; flex: none; }
.util-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.util-head .tiny { font-size: 12px; color: var(--muted); }
.track { height: 4px; border-radius: 2px; background: #3A3A3C; overflow: hidden; }
.track > i { display: block; height: 100%; background: #0A84FF; width: 0; }
.util-pct { font-size: 13px; color: var(--muted); margin-top: 8px; }
.float-search {
  position: sticky; bottom: calc(8px + var(--safe-bot));
  display: flex; align-items: center; gap: 8px;
  background: #2C2C2E; border-radius: 22px; padding: 10px 14px; color: var(--muted);
}
.float-search input { flex: 1; font-size: 17px; color: #fff; border: 0; background: none; }
.add-rule { margin-left: auto; background: #3A3A3C; border-radius: 14px; padding: 4px 10px; font-size: 13px; color: #fff; }
.rule-card { background: var(--group); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.more-link { display: block; text-align: center; color: #0A84FF; font-size: 16px; padding: 8px 0 0; background: none; width: 100%; }
.invite { color: var(--muted); font-size: 15px; padding: 8px 4px; }
.fiche { background: var(--group); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.fiche b { display: block; margin-bottom: 4px; }
.fiche p { margin: 0; color: var(--muted); font-size: 14px; }
.actes { display: flex; gap: 8px; margin-top: 10px; }
.actes button { flex: 1; border-radius: 18px; padding: 10px; font-size: 16px; background: #3A3A3C; }
.actes .ok { background: var(--accent); color: #fff; font-weight: 600; }
.copy-btn { color: var(--lien); font-size: 16px; margin: 8px 0; }
.import-box, .prompt-box {
  background: #1C1C1E; border-radius: 12px; padding: 12px; font-size: 13px;
  white-space: pre-wrap; user-select: text; margin: 8px 0;
}
#importMem { width: 100%; min-height: 140px; background: #1C1C1E; border: 0; border-radius: 12px; padding: 12px; font-size: 16px; margin: 8px 0; }
.conv-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 12px 4px;
  border-bottom: 1px solid var(--sep);
}
.conv-item .meta { flex: 1; min-width: 0; }
.conv-item .ttl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .sub { font-size: 13px; color: var(--muted); }

/* Lightbox */
#lightbox {
  position: fixed; inset: 0; z-index: 85;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
#lightbox img, #lightbox video { max-width: 100%; max-height: 100%; }
#lightbox .close {
  position: absolute; top: calc(8px + var(--safe-top)); right: 8px;
  color: #fff; z-index: 1;
}
#lightbox video:not([src]), #lightbox img:not([src]) { display: none; }

/* Morph overlay */
#morph {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
}
#morph .av, #morph .home-name { position: absolute; will-change: transform; }
#morph .home-name { color: #fff; }

/* Chat as dismissible card */
#chatView.carding {
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transform-origin: top center;
}
#alerte {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + var(--safe-bot));
  z-index: 95; background: #2C2C2E; color: #fff;
  border-radius: 12px; padding: 12px 16px; font-size: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

@media (min-width: 735px) {
  /* remplacé plus bas : plus de colonne téléphone rétrécie */
}


/* ===== Fidelity pass (frames video 2–9) ===== */
#chatView .topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 6px;
  padding: calc(2px + var(--safe-top)) 10px 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,0));
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  z-index: 6; flex: none;
  pointer-events: none;
}
#chatView .topbar > * { pointer-events: auto; }
.frost-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(44,44,46,.32);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display: grid; place-items: center; flex: none;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: none;
}
.frost-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.frost-btn .dots-h { width: 18px; height: 18px; }
.frost-btn .dots-h circle { fill: currentColor; stroke: none; }
.who.pill {
  justify-self: center;
  display: flex; align-items: center; gap: 6px;
  background: rgba(28,28,30,.42);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-radius: 20px;
  padding: 2px 10px 2px 2px;
  max-width: 100%;
  min-width: 0;
}
.who.pill .av { width: 26px; height: 26px; flex: none; }
.who.pill .av .dot { width: 8px; height: 8px; border-width: 2px; border-color: #000; right: -1px; bottom: 0; }
.who.pill .nm {
  font-weight: 600; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em;
}
#fil { padding-top: calc(var(--safe-top) + 52px); }

.msg .bubble { font-size: 17px; line-height: 1.35; padding: 10px 14px; }
.msg.bot .bubble { background: var(--bulle-bot); border-radius: 18px; border-bottom-left-radius: 8px; }
.msg.me .bubble { background: #C24E00; border-radius: 18px; border-bottom-right-radius: 8px; }
.msg time { display: none; }
.msg .bubble details { display: none !important; }
.msg .bubble blockquote {
  margin: 0 0 6px; padding: 0; border: 0;
  color: var(--muted); font-size: 15px; font-weight: 400;
}
.msg .bubble.vocal {
  display: flex; align-items: center; gap: 10px;
  min-width: 148px; padding: 10px 14px;
}
.msg .bubble.vocal .vocal-wave {
  display: flex; align-items: center; gap: 2px; height: 18px;
}
.msg .bubble.vocal .vocal-wave i {
  display: block; width: 3px; border-radius: 2px; background: currentColor;
  opacity: .9;
}
.msg.me .bubble.vocal { color: #FFF8F3; }
.msg .bubble.vocal .vocal-lab { font-weight: 500; font-size: 16px; }

#composer { background: var(--fond-chat); padding: 8px 30px max(30px, var(--safe-bot)); }
#typing {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 22px 12px;
  color: #8E8E93; font-size: 17px; flex: none;
}
#typing em { font-style: normal; font-size: 17px; color: #8E8E93; font-weight: 400; }
#typing[hidden] { display: none !important; }
.dots i { width: 5px; height: 5px; }
.pill.big {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: #181818;
  border: 1px solid #313131;
  border-radius: 999px;
  padding: 6px 8px;
  gap: 6px;
  min-height: 51px;
}
.pill.big #texte {
  flex: 1; min-width: 0; font-size: 16px; line-height: 1.25;
  padding: 6px 4px; max-height: 38vh;
  caret-color: var(--accent);
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
  background: transparent;
  color: #fff;
}
.pill.big #texte:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.big #texte::placeholder { color: #6E6E73; opacity: 1; }
.pill-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: #2A2A2C; color: #EBEBF0;
  display: grid; place-items: center; flex: none; margin-bottom: 0;
}
.pill-ico svg { width: 16px; height: 16px; }
.pill-ico.accent { width: 36px; height: 36px; background: #C24E00; color: #fff; }
.pill-ico.accent svg { width: 16px; height: 16px; }
.expand-btn { color: #8E8E93; width: 28px; height: 36px; }
#sendBtn .ico-wave, #sendBtn .ico-send { display: block; }
#sendBtn .ico-send.hidden, #sendBtn .ico-wave.hidden { display: none; }

/* Create header */
.create-grab { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 10px 12px 4px; }
.create-grab .create-title { margin: 0; text-align: center; font-size: 17px; font-weight: 600; }
.create-body { padding-top: 8px; }
#botName {
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 16px 18px; font-size: 17px; color: #fff;
}
#botName::placeholder { color: #8E8E93; }
.shape-grid { grid-template-columns: repeat(5, 1fr); gap: 14px 8px; }
.shape-cell { width: 56px; height: 56px; background: transparent; }
.shape-cell .bloblet {
  width: 48px; height: 48px; background: #7B61FF; position: relative;
  display: block;
}
.shape-cell .bloblet::before,
.shape-cell .bloblet::after {
  content: ""; position: absolute; width: 6px; height: 8px; border-radius: 50%;
  background: #1a1028; top: 38%;
}
.shape-cell .bloblet::before { left: 32%; }
.shape-cell .bloblet::after { right: 32%; }
.shape-cell.on { background: transparent; box-shadow: 0 0 0 2px rgba(255,255,255,.35); border-radius: 16px; }

/* Profile */
.push-head .frost-btn, .push-head .round-btn, .coffre-head-btn {
  width: 40px; height: 40px; background: transparent;
  border: 1px solid rgba(255,255,255,.22);
}
.push-head h2:empty { display: none; }
.mod-pill {
  display: block; width: fit-content; margin: 8px auto 20px; background: #2C2C2E;
  border-radius: 18px; padding: 8px 22px; font-size: 17px; color: #fff;
}
.row .row-ico { width: 22px; color: #C7C7CC; flex: none; font-size: 18px; }
.sec-lab { font-size: 13px; color: var(--muted); margin: 16px 4px 8px; }

#scrollDown { z-index: 5; }
#btnSettings img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Home + is outline, logo fills the circle */
#newBtn { background: transparent; }
#home .home-top { padding-left: 16px; padding-right: 16px; }

/* Gesture robustness + status line */
html, body, #chatView, #fil, #home {
  overscroll-behavior-x: none;
}
#chatView { touch-action: pan-y; }
#chatEdge {
  position: absolute;
  left: 0;
  top: calc(var(--safe-top) + 58px);
  bottom: 0;
  width: 28px;
  z-index: 8;
  touch-action: none;
}
#composer { touch-action: pan-y; }
.typing-stack {
  position: relative;
  display: inline-block;
  min-height: 1.2em;
  min-width: 8em;
  overflow: hidden;
  vertical-align: middle;
}
.typing-stack em {
  display: block;
  font-style: normal;
  font-size: 17px;
  color: #8E8E93;
  font-weight: 400;
  line-height: 1.25;
}
.typing-stack em.cur {
  position: relative;
  opacity: 1;
  transition: opacity .2s ease;
}
.typing-stack em.out {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.build-tag { display: inline-block; margin-top: 6px; font-size: 11px; color: #636366; letter-spacing: .02em; }

/* Mode vocal : pastille sous la barre, chat intact */
#chatView.voice-on .topbar { z-index: 46; }
#chatView.voice-on #fil { pointer-events: auto; }
#chatView.voice-on #micBtn { display: none !important; }
#chatView.voice-on #sendBtn:not(.has-text) { display: none !important; }
#voiceScreen {
  position: fixed; inset: 0; z-index: 36;
  background: transparent;
  pointer-events: none;
  color: #fff;
}
#voiceScreen[hidden] { display: none !important; }
.voice-dim {
  display: none !important;
  pointer-events: none;
}
.voice-dock {
  position: absolute;
  left: 20px; right: 20px;
  top: calc(var(--safe-top) + 52px);
  bottom: auto;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto;
  z-index: 1;
}
.voice-pill {
  width: 100%;
  max-width: none;
  height: 60px;
  border-radius: 30px;
  background: rgba(28,28,30,.78);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 8px;
}
.voice-av {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex: none;
}
.voice-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#voiceWave {
  flex: 1; min-width: 0; height: 44px; width: 100%;
  display: block;
}
.voice-btn {
  width: 43px; height: 43px; border-radius: 50%;
  background: #2C2C2E; color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.voice-btn svg { width: 18px; height: 18px; }
.voice-btn.hang {
  background: #FF453A; color: #fff;
  transform: none;
}
.voice-btn.hang svg { width: 22px; height: 22px; }
.voice-btn.muted { background: #3A3A3C; color: #FF453A; }
.voice-btn .hidden { display: none !important; }
.voice-grab {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.32);
  margin: 8px 0 0;
}
.voice-state, .voice-caption { display: none !important; }
.voice-prefs {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--safe-top) + 130px) 20px 20px;
  background: rgba(0,0,0,.28);
  pointer-events: auto;
  z-index: 2;
}
.voice-prefs[hidden] { display: none !important; }
.voice-prefs-card {
  width: min(360px, 100%);
  background: #1C1C1E;
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.voice-prefs-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.vp-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 15px; color: #fff;
}
.vp-row span:first-child { width: 64px; flex: none; color: #8E8E93; }
.vp-row select, .vp-row input[type="range"] { flex: 1; min-width: 0; }
.vp-row select {
  background: #2C2C2E; color: #fff; border: 0; border-radius: 10px;
  padding: 8px 10px; font-size: 15px;
}
.vp-row input[type="range"] { accent-color: #FF4B8A; }
#voiceRateVal { width: 48px; flex: none; text-align: right; color: #8E8E93; font-size: 14px; }
.vp-ok {
  display: block; width: 100%; margin-top: 6px;
  border-radius: 12px; padding: 10px;
  background: #2C2C2E; color: #fff; font-size: 17px; font-weight: 600;
}

/* ===== Tablette / iPad : tailles proportionnées, contenu centré ===== */
@media (min-width: 735px) and (min-height: 700px) {
  .home-top {
    max-width: none;
    padding: calc(16px + var(--safe-top)) 32px 0;
  }
  .home-center {
    justify-content: center;
    padding-top: 0;
  }
  .av.xl, #homeAv {
    width: 152px;
    height: 152px;
  }
  .home-name { font-size: 18px; font-weight: 500; }
  .round-btn { width: 52px; height: 52px; }
  .round-btn svg { width: 24px; height: 24px; }
  .home-bottom {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 28px calc(28px + var(--safe-bot));
    gap: 14px;
  }
  #btnGrid { width: 56px; height: 56px; }
  #btnGrid svg { width: 24px; height: 24px; }
  .search-pill { height: 56px; border-radius: 28px; font-size: 18px; padding: 0 20px; }
  .search-pill svg { width: 22px; height: 22px; }

  #login { justify-content: center; }
  #login .hero { margin-bottom: 8px; }
  #login .av.lg, #login .hero .av {
    width: 120px !important;
    height: 120px !important;
  }
  #login h1 { font-size: 34px; }
  #loginForm, .howto { max-width: 440px; }

  #chatView .topbar {
    max-width: 720px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translateX(-50%);
    padding-left: 20px;
    padding-right: 20px;
  }
  #fil {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  #composer {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 36px max(34px, var(--safe-bot));
  }
  .frost-btn { width: 44px; height: 44px; }
  #chatView .topbar { grid-template-columns: 44px 1fr 44px; }
  .who.pill .av { width: 30px; height: 30px; }
  .who.pill .nm { font-size: 16px; }
  .msg { max-width: 74%; }
  .msg .bubble { font-size: 17px; padding: 12px 16px; }
  .pill.big { min-height: 56px; padding: 8px 10px; }
  .pill.big #texte { font-size: 17px; }
  .pill-ico { width: 38px; height: 38px; }
  .pill-ico svg { width: 17px; height: 17px; }
  .pill-ico.accent { width: 40px; height: 40px; }

  #settingsSheet, #createSheet, #reactSheet, #flagSheet {
    left: 50%;
    right: auto;
    width: min(560px, 100%);
    max-width: 560px;
    margin-left: -280px;
  }
  #push .push-head,
  #push .push-body {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #push .push-head { padding-left: 20px; padding-right: 20px; }
  #push .push-body { padding-left: 20px; padding-right: 20px; }
  .fiches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .shape-grid { grid-template-columns: repeat(6, 1fr); }
  #banner {
    max-width: 480px;
    left: 50%;
    right: auto;
    margin-left: -240px;
  }
  #alerte {
    max-width: 480px;
    left: 50%;
    right: auto;
    margin-left: -240px;
  }
  .ios-box { width: 400px; }

  .voice-dock { left: 28px; right: 28px; top: calc(var(--safe-top) + 60px); bottom: auto; }
  .voice-pill { max-width: 720px; height: 72px; border-radius: 36px; padding: 10px 12px 10px 10px; gap: 12px; }
  .voice-av { width: 52px; height: 52px; }
  #voiceWave { height: 52px; }
  .voice-btn { width: 52px; height: 52px; }
  .voice-btn svg { width: 22px; height: 22px; }
  .voice-btn.hang svg { width: 26px; height: 26px; }
  .voice-grab { width: 44px; height: 5px; margin: 10px 0 0; }
  .voice-prefs { padding-top: calc(var(--safe-top) + 150px); }
  .voice-prefs-card { width: min(420px, 100%); }
}

/* iPad paysage : avatar un peu plus compact, héros toujours centré */
@media (min-width: 735px) and (max-height: 699px) {
  .home-center { justify-content: center; padding-top: 0; }
  .home-top { padding: calc(10px + var(--safe-top)) 28px 0; }
  .home-bottom {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 24px calc(16px + var(--safe-bot));
  }
  .av.xl, #homeAv { width: 100px; height: 100px; }
  .home-name { font-size: 16px; }
  #chatView .topbar, #fil, #composer {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #chatView .topbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #settingsSheet, #createSheet, #reactSheet, #flagSheet {
    left: 50%;
    right: auto;
    width: min(560px, 100%);
    max-width: 560px;
    margin-left: -280px;
  }
  #push .push-head, #push .push-body {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .fiches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .voice-dock { left: 28px; right: 28px; top: calc(var(--safe-top) + 52px); bottom: auto; }
  .voice-pill { max-width: 720px; height: 64px; }
  .voice-av { width: 48px; height: 48px; }
  .voice-btn { width: 48px; height: 48px; }
}

@media (min-width: 1000px) and (max-height: 900px) {
  .av.xl, #homeAv { width: 128px; height: 128px; }
  .home-name { font-size: 17px; }
  .round-btn { width: 50px; height: 50px; }
  .search-pill { height: 52px; font-size: 17px; }
  .voice-pill { height: 68px; }
  .voice-av { width: 50px; height: 50px; }
}


/* ===== Appui long + coffre-fort + composer réponse ===== */
.grab-bar {
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.28);
  margin: 2px auto 8px;
}
.react-sheet, .flag-sheet {
  padding-bottom: calc(12px + var(--safe-bot));
  z-index: 62;
  background: rgba(28,28,28,.88);
  -webkit-backdrop-filter: blur(42px) saturate(180%);
  backdrop-filter: blur(42px) saturate(180%);
  max-height: 92dvh;
}
#reactBackdrop, #flagBackdrop { z-index: 61; background: rgba(0,0,0,.45); }
.react-rows { margin: 4px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.react-row { display: flex; justify-content: space-between; gap: 8px; }
.react-emo, .react-add {
  width: 48px; height: 48px; border-radius: 50%;
  background: #2C2C2E; display: grid; place-items: center;
  font-size: 24px; flex: none; border: 0; color: #fff;
}
.react-add svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
#reactSheet .row .row-ico {
  width: 22px; height: 22px; color: #C7C7CC; display: grid; place-items: center;
}
#reactSheet .row .row-ico svg { width: 22px; height: 22px; }
#reactSheet .row.danger, #reactSheet .row.danger .t, #reactSheet .row.danger .row-ico { color: var(--danger); }
.msg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.msg .bubble {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.msg .bubble.sel-on, .msg.sel-on .bubble {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.msg.nonlu { position: relative; }
.msg.nonlu::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: #0A84FF;
}
.react-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.react-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #2C2C2E; border-radius: 12px; padding: 2px 8px;
  font-size: 14px; line-height: 1.4;
}
.msg.me .react-pills { justify-content: flex-end; }
.flag-title { margin: 4px 0 6px; font-size: 18px; font-weight: 650; text-align: center; }
.flag-sub { margin: 0 0 14px; text-align: center; color: var(--muted); font-size: 14px; }

.reply-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 6px 8px; padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--accent);
  background: #1C1C1E; border-radius: 0 12px 12px 0;
}
.reply-bar[hidden] { display: none !important; }
.reply-meta { flex: 1; min-width: 0; }
.reply-who { font-size: 12px; font-weight: 650; color: var(--accent); }
.reply-txt { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#replyClear {
  width: 28px; height: 28px; border-radius: 50%;
  background: #2C2C2E; color: #fff; display: grid; place-items: center; flex: none;
}
#replyClear svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Coffre-fort */
#push.coffre-ecran .push-body {
  display: flex; flex-direction: column;
  padding-bottom: calc(8px + var(--safe-bot));
  overflow: hidden;
}
.coffre-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.coffre-main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.coffre-tabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px; scrollbar-width: none;
}
.coffre-tabs::-webkit-scrollbar { display: none; }
.coffre-tab {
  flex: none; border: 0; border-radius: 16px;
  padding: 6px 12px; font-size: 14px; font-weight: 500;
  background: transparent; color: #fff; white-space: nowrap;
}
.coffre-tab .n { color: var(--muted); margin-left: 3px; font-variant-numeric: tabular-nums; }
.coffre-tab.on { background: #3A3A3C; }
.coffre-tab.on .n { color: #C7C7CC; }
.coffre-card { margin-bottom: 10px; }
.cf-empty { color: var(--muted); font-size: 15px; padding: 18px 16px; margin: 0; }
.cf-disclaimer {
  margin: 0 4px 8px; font-size: 12px; line-height: 1.35;
  color: var(--muted);
}
.cf-backup { display: flex; gap: 16px; padding: 0 4px 12px; }
.cf-link { background: none; color: var(--lien); font-size: 14px; padding: 0; }
.coffre-row .cf-av { margin: 0; }
.cf-av {
  width: 40px; height: 40px; border-radius: 10px;
  background: #3A3A3C; color: #EBEBF0;
  display: grid; place-items: center; flex: none;
}
.cf-av.rond { border-radius: 50%; }
.cf-av.lg { width: 56px; height: 56px; border-radius: 14px; }
.cf-av.lg.rond { border-radius: 50%; }
.cf-av svg { width: 22px; height: 22px; }
.cf-av.lg svg { width: 28px; height: 28px; }
.cf-detail-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 18px; }
.cf-detail-head h3, .cf-form-title, .cf-lock h3 { margin: 0; font-size: 20px; font-weight: 650; text-align: center; }
.cf-form-title { margin: 4px 0 14px; }
.cf-field { display: block; padding: 10px 16px; border-bottom: 1px solid var(--sep); }
.group > .cf-field:last-child, .cf-lock .cf-field { border-bottom: 0; }
.cf-lab { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cf-ctrl { display: flex; align-items: center; gap: 6px; }
.cf-input {
  flex: 1; min-width: 0; background: none; border: 0;
  color: #fff; font-size: 17px; padding: 2px 0;
  font-family: inherit;
}
textarea.cf-input { resize: vertical; min-height: 72px; }
.cf-ico-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: #C7C7CC;
  display: grid; place-items: center; flex: none;
}
.cf-ico-btn svg { width: 18px; height: 18px; }
.cf-btn {
  display: block; width: 100%; border: 0; border-radius: 14px;
  padding: 14px 16px; font-size: 17px; font-weight: 600;
  background: #2C2C2E; color: #fff; margin: 10px 0 0;
}
.cf-btn.primary { background: #0A84FF; color: #fff; }
.cf-btn.danger { background: transparent; color: var(--danger); font-weight: 600; }
.cf-btn.ghost { background: transparent; color: var(--lien); font-weight: 500; }
.cf-err { color: var(--danger); font-size: 14px; margin: 8px 0 0; }
.cf-warn { color: var(--muted); font-size: 14px; line-height: 1.4; text-align: center; margin: 8px 0 16px; }
.cf-lock { padding: 24px 8px 8px; }
.cf-lock-ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: #2C2C2E; color: #fff;
  display: grid; place-items: center; margin: 0 auto 16px;
}
.cf-lock-ico svg { width: 28px; height: 28px; }
.cf-lock .cf-field { background: var(--group); border-radius: 12px; margin-bottom: 10px; border: 0; }
.coffre-head-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coffre-menu-dim { position: fixed; inset: 0; z-index: 80; background: transparent; }
.coffre-menu {
  position: fixed; z-index: 81; min-width: 230px;
  background: rgba(44,44,46,.90);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.coffre-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 16px; background: none;
  color: #fff; font-size: 17px; text-align: left;
}
.coffre-menu-item .cm-ico {
  width: 22px; height: 22px; color: #EBEBF0; display: grid; place-items: center;
}
.coffre-menu-item .cm-ico svg { width: 20px; height: 20px; }
#push.coffre-ecran .float-search { margin-top: 6px; flex: none; }

@media (min-width: 735px) and (min-height: 700px) {
  #chatView .topbar { padding-top: calc(4px + var(--safe-top)); }
}

/* ===== 20261111-11 : fluidité, en-tête flottant, tapbacks ===== */
/* Messages : l’entrée n’anime que les messages réellement nouveaux, jamais l’historique */
.msg { animation: none; }
.msg.neuf { animation: bubble-in .34s var(--ease-spring) both; }
@keyframes bubble-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); }
  to { opacity: 1; transform: none; }
}
.msg.me.neuf { transform-origin: 100% 100%; }
.msg.bot.neuf { transform-origin: 0 100%; }
/* longs historiques : le navigateur saute le rendu des bulles hors écran */
#fil > .msg { content-visibility: auto; contain-intrinsic-size: auto 72px; }
#fil > .msg.has-react, #fil > .msg.neuf, #fil > .msg.nonlu { content-visibility: visible; }
#fil { contain: layout paint; will-change: scroll-position; }
/* envoi en file : la bulle est là tout de suite, légèrement estompée tant que GitHub n’a pas répondu */
.msg.local.envoi .bubble { opacity: .78; transition: opacity .2s ease; }
.msg.echec .bubble { opacity: .55; }
.msg.echec time::after { content: " · Non envoyé, touche pour réessayer"; color: var(--danger); }

/* En-tête : pas de barre, trois pastilles flottantes translucides au-dessus du fil */
#chatView .topbar {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: calc(6px + var(--safe-top)) 12px 6px;
  grid-template-columns: 44px 1fr 44px;
  pointer-events: none;
}
#chatView .topbar .frost-btn, #chatView .topbar .who.pill {
  background: rgba(30,30,32,.58);
  border: .5px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: none;
}
#chatView .topbar .frost-btn { width: 44px; height: 44px; color: #fff; }
#chatView .topbar .frost-btn svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.2; }
#chatView .topbar .who.pill {
  height: 44px; border-radius: 22px; gap: 8px;
  padding: 0 16px 0 6px;
  max-width: calc(100% - 8px);
}
#chatView .topbar .who.pill .av { width: 32px; height: 32px; position: relative; }
#chatView .topbar .who.pill .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#chatView .topbar .who.pill .av .dot {
  width: 10px; height: 10px; right: -1px; bottom: -1px;
  background: #34C759; border: 2px solid #1E1E20; box-shadow: none;
}
#chatView .topbar .who.pill .nm { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
#fil { padding-top: calc(var(--safe-top) + 62px); }
@media (min-width: 735px) {
  #chatView .topbar .who.pill .nm { font-size: 17px; }
}

/* Tapbacks : pastille au coin bas-droit de la bulle, découpe noire, apparition instantanée */
.msg .bubble { position: relative; }
.react-pills {
  position: absolute; right: 6px; bottom: -20px;
  display: inline-flex; gap: 0; margin: 0;
  background: #2C2C2E;
  border: 2.5px solid #000;
  border-radius: 999px;
  padding: 4px 7px;
  line-height: 1;
  animation: none !important; transition: none !important;
  box-shadow: none;
  z-index: 1;
  pointer-events: none;
}
.msg.bot .react-pills { right: auto; left: calc(100% - 40px); }
.react-pill {
  background: none; border-radius: 0; padding: 0 1px;
  font-size: 15px; line-height: 18px; display: inline-block;
}

/* Ligne d’état : fondu en opacité seulement, jamais de mise en page du champ */
.typing-stack em.out { opacity: 0; transition: opacity .22s ease; }
.typing-stack em.cur { animation: etat-in .22s ease both; }
@keyframes etat-in { from { opacity: 0; } to { opacity: 1; } }
.dots i { will-change: transform, opacity; }

/* Clavier : le chat suit la zone visible, le composer colle au clavier */
#chatView.kb-open #composer { padding-bottom: 8px !important; }

/* Carte (glisser pour revenir) : couche GPU, rayon fixe (pas de repeinture à chaque image) */
#chatView.carding { will-change: transform; border-radius: 32px; box-shadow: none; }
#morph .av, #morph .home-name { left: 0; top: 0; transform-origin: 0 0; }

/* Feuilles : pas de transition pendant le glisser au doigt */
.sheet-up.drag { transition: none !important; }

/* Visionneuse : ouverture/fermeture en fondu + échelle */
#lightbox { opacity: 0; transition: opacity .28s var(--ease-ios); }
#lightbox.open { opacity: 1; }
#lightbox img, #lightbox video { transform: scale(.94); transition: transform .34s var(--ease-spring); will-change: transform; }
#lightbox.open img, #lightbox.open video { transform: none; }
#lightbox.drag, #lightbox.drag img, #lightbox.drag video { transition: none !important; }
#lightbox.retour { transition: transform .3s var(--ease-spring), opacity .28s var(--ease-ios); }

/* Appui long : la bulle se contracte légèrement comme sur iOS */
.msg .bubble { transition: transform .2s var(--ease-ios); }
.msg.appui .bubble { transform: scale(.965); }

/* Flèche vers le bas */
#scrollDown { transition: opacity .2s var(--ease-ios), transform .28s var(--ease-spring); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .msg.neuf, .typing-stack em.cur { animation: none !important; }
}
.msg.react-espace { margin-bottom: 14px; }
#fil { padding-bottom: 26px; }

/* ===== Deux modes : Laura FSM SI / Laura · Grok (indice minimal) ===== */
#chatView .topbar .who.pill .av .dot { transition: background-color .35s ease, transform .35s var(--ease-spring); }
#chatView .topbar .who.pill .av.mode-grok .dot { background: #F2F2F7; }
#chatView .topbar .who.pill .av.mode-flash .dot { transform: scale(1.25); }
#menuPop button.mode-row { color: rgba(255,255,255,.92); }
#menuPop button.mode-row .mode-coche { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease; }
#menuPop button.mode-row .mode-coche.off { opacity: 0; }
.react-par { margin: 10px 4px 2px; text-align: center; font-size: 12px; color: #8E8E93; letter-spacing: .01em; }
.react-par[hidden] { display: none; }

/* ===== Images jointes, comme Grok : vignette seule, coins arrondis, légende dans sa bulle ===== */
.msg .pj-grille { display: block; margin: 0 0 4px; line-height: 0; }
.msg.bot .pj-grille { margin: 4px 0 0; }
.msg .pj-grille.pj-seule { margin: 0; }
.msg .bubble.pj-seule { background: transparent !important; padding: 0 !important; border-radius: 18px !important; }
.msg .pj-grille img.vue.pj {
  display: block; width: 45vw; max-width: 240px; height: auto; max-height: 440px;
  aspect-ratio: auto 4 / 3; object-fit: cover; border-radius: 18px;
  background: #1C1C1E; -webkit-touch-callout: none; cursor: zoom-in;
}
.msg .pj-grille.pj-multi { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 62vw; max-width: 320px; }
.msg .pj-grille.pj-multi img.vue.pj { width: 100%; max-width: none; aspect-ratio: 1 / 1 !important; border-radius: 14px; }
.msg.local.envoi .pj-grille img.vue.pj { opacity: .78; transition: opacity .2s ease; }
@media (min-width: 735px) { .msg .pj-grille img.vue.pj { width: 240px; } .msg .pj-grille.pj-multi { width: 320px; } }

/* ===== En-tête : fondu sombre et flou sous les pastilles (le texte disparaît en remontant) ===== */
#chatView .topbar { isolation: isolate; }
#chatView .topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 30px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,20,20,.94) 0%, rgba(20,20,20,.82) 38%, rgba(20,20,20,.45) 68%, rgba(20,20,20,0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

/* ===== Flèche vers le bas, comme Grok : petit rond sombre avec ombre, au-dessus du composer ===== */
#scrollDown {
  width: 34px; height: 34px;
  background: rgba(36,36,38,.94);
  border: .5px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateX(-50%) translateY(-4px) scale(.85);
}
#scrollDown.show { transform: translateX(-50%) translateY(-4px) scale(1); }
#scrollDown svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ===== Build 20261111-21 : relevés image par image sur l’enregistrement Grok Bot de Tom ===== */
/* Marges latérales du fil : 16 px comme Grok Bot */
@media (max-width: 734px) { #fil { padding-left: 16px; padding-right: 16px; } }

/* Ligne d’état « ••• Avance pas à pas » : 3 points gris qui s’allument tour à tour (montée franche, extinction lente),
   boucle 1,07 s, décalage 0,23 s ; texte gris #676767 balayé par un reflet blanc de gauche à droite. */
#typing { gap: 0; padding: 0; height: 32px; margin: 0 0 18px -7px; align-items: center; }
#typing .dots { gap: 4px; width: 23px; height: 5px; margin-right: 17px; flex: none; }
#typing .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: #8E8E93;
  transform: none !important; will-change: opacity;
  animation: grok-point 1.07s linear infinite;
}
#typing .dots i:nth-child(1) { animation-delay: -0.84s; }
#typing .dots i:nth-child(2) { animation-delay: -0.61s; }
#typing .dots i:nth-child(3) { animation-delay: -0.38s; }
@keyframes grok-point {
  0% { opacity: .85; }
  35% { opacity: .74; }
  65% { opacity: .62; }
  85% { opacity: .48; }
  99.9% { opacity: .33; }
  100% { opacity: .85; }
}
#typing .typing-stack { min-width: 0; overflow: visible; }
#typing .typing-stack em, #typing em {
  font-size: 17px; font-weight: 400; line-height: 22px; color: #676767;
}
#typing .typing-stack em.cur {
  color: transparent;
  background: linear-gradient(90deg, #676767 0%, #676767 35%, #FFFFFF 50%, #676767 65%, #676767 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: etat-in .22s ease both, grok-reflet 1.07s linear -0.07s infinite;
}
@keyframes grok-reflet {
  0% { background-position: 97% 0; }
  84% { background-position: 3% 0; }
  100% { background-position: 3% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #typing .typing-stack em.cur { animation: none !important; color: #676767; background: none; }
  #typing .dots i { animation: none !important; opacity: .7; }
}

/* Glissement chat ↔ accueil : translation pure, ni coins ni ombre (comme Grok Bot) */
#chatView.carding { border-radius: 0 !important; box-shadow: none !important; overflow: visible; }
#home.sous-chat { will-change: transform; }

/* Boutons ronds du composeur : gris Grok #2E2E31, icônes #9F9FA6 */
.pill-ico { background: #2E2E31; color: #EBEBF0; }
#attachBtn { color: #BABAC2; }
#micBtn { color: #9F9FA6; }

/* Appui long sur Laura (accueil) : aperçu + menu contextuel iOS, comme Grok Bot */
#homeCtx { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0); transition: background .25s ease; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#homeCtx[hidden] { display: none !important; }
#homeCtx.on { background: rgba(0,0,0,.08); }
#homeCtx .hc-col { position: absolute; left: 0; right: 0; top: var(--hc-top, 79px); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
#homeCtx .hc-preview, #homeCtx .hc-menu, #homeCtx .hc-sous { pointer-events: auto; }
.hc-preview {
  width: 318px; max-width: calc(100% - 72px); padding: 0 0 0;
  transform-origin: 50% 0; opacity: 0; transform: scale(.82);
  transition: transform .42s var(--ease-spring), opacity .18s ease;
}
.hc-head { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 15px; border-bottom: 0; }
.hc-head .av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; }
.hc-head .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-head b { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-preview::after { content: ""; display: block; height: 1px; background: #222222; margin-top: -1px; }
.hc-head { margin-bottom: 12px; }
.hc-bulle {
  margin: 17px 0 0 16px; max-width: 258px; width: fit-content;
  background: #1D1D1D; color: #fff; border-radius: 18px;
  padding: 8px 13px; font-size: 17px; line-height: 24px;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
  word-wrap: break-word;
}
.hc-preview { display: flex; flex-direction: column; }
.hc-preview::after { order: 1; }
.hc-head { order: 0; }
.hc-bulle { order: 2; }
.hc-menu, .hc-sous {
  width: 248px; background: #111014; border: 1px solid #34333D; border-radius: 30px;
  padding: 8px 0; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform-origin: 50% 0; opacity: 0; transform: scale(.55);
  transition: transform .42s var(--ease-spring), opacity .18s ease, filter .25s ease;
}
.hc-menu { margin-top: 34px; position: relative; }
.hc-row {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 11px 24px 11px 0; min-height: 42px;
  font-size: 17px; line-height: 20px; color: #fff; font-weight: 400;
  transition: color .2s ease, opacity .2s ease;
}
.hc-row > svg:first-child { width: 20px; height: 20px; flex: none; margin: 0 14px 0 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hc-row span { flex: 1; min-width: 0; }
.hc-row .chev { width: 16px; height: 16px; flex: none; margin-right: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-row.danger { color: #FF4046; }
.hc-row:active, .hc-row.press { background: rgba(255,255,255,.06); }
.hc-sous { position: absolute; left: 50%; margin-left: -124px; background: #141315; border-color: #2B2A32; padding: 6px 0; transform: scale(.92); transform-origin: 50% 100%; pointer-events: none; }
.hc-sous .hc-plus { font-weight: 600; }
.hc-sep { height: 1px; background: #222125; margin: 6px 22px; }
#homeCtx.on .hc-preview, #homeCtx.on .hc-menu { opacity: 1; transform: none; }
#homeCtx.plus .hc-menu { transform: scale(.97); }
#homeCtx.plus .hc-menu .hc-row { color: rgba(255,255,255,.42); }
#homeCtx.plus .hc-menu .hc-row.danger { color: rgba(255,64,70,.45); }
#homeCtx.plus .hc-menu .hc-plus { opacity: 0; }
#homeCtx.plus .hc-sous { opacity: 1; transform: none; pointer-events: auto; }
#homeCtx.sortie .hc-preview, #homeCtx.sortie .hc-menu, #homeCtx.sortie .hc-sous { opacity: 0; transform: scale(.82); transition: transform .24s ease, opacity .18s ease; }
#homeAv, #homeName { transition: opacity .18s ease, transform .42s var(--ease-spring); }
#home.ctx-on #homeAv, #home.ctx-on #homeName { opacity: 0; transform: scale(.9); transition: opacity .12s ease, transform .2s ease; }
#home.ctx-retour #homeAv { animation: hc-retour .42s var(--ease-spring) both; }
@keyframes hc-retour { from { transform: scale(1.25); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-preview, .hc-menu, .hc-sous { transition: none !important; } }
#homeAvatar, #homeAvatar img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Composeur avec média joint : la pilule devient une carte arrondie, vignette 105×105 en haut à gauche (photo de Tom) */
.pill.big #attachments { display: none; }
.pill.big:has(#attachments:not(.hidden):not(:empty)) {
  flex-wrap: wrap; align-items: center; border-radius: 26px;
  padding: 10px 8px 7px; row-gap: 8px;
}
.pill.big:has(#attachments:not(.hidden):not(:empty)) #attachments {
  display: flex; flex: 0 0 100%; order: -1; gap: 8px; padding: 0 0 0 2px; margin: 0; overflow-x: auto; scrollbar-width: none;
}
.pill.big #attachments::-webkit-scrollbar { display: none; }
.pill.big #attachments .att {
  width: 105px; height: 105px; max-width: none; flex: none;
  border-radius: 14px; overflow: hidden; background: #2A2A2C; position: relative;
}
.pill.big #attachments .att img, .pill.big #attachments .att video { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.pill.big #attachments .att .play { display: none; }
.pill.big #attachments .att .dur {
  left: 7px; bottom: 6px; background: none; padding: 0; gap: 4px; border-radius: 0;
  font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.pill.big #attachments .att .dur::before { border-width: 5px 0 5px 8px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pill.big #attachments .att .apercu-nom { font-size: 12px; color: #EBEBF0; padding: 10px !important; word-break: break-all; }
.pill.big #attachments .att .rm {
  top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(28,28,30,.78); color: #fff; font-size: 0; box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pill.big #attachments .att .rm::before, .pill.big #attachments .att .rm::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.8px; border-radius: 1px; background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.pill.big #attachments .att .rm::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pill.big:has(#attachments:not(.hidden):not(:empty)) #expandBtn { display: none !important; }
#homeCtx:not(.plus) .hc-sous { pointer-events: none; }
.hc-menu .hc-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-row > svg:first-child { width: 22px; height: 22px; margin: 0 13px 0 28px; stroke-width: 1.8; }
.hc-row .chev { stroke-width: 2.2; color: #fff; }
.hc-sous { padding: 8px 0; }
.hc-sous .hc-row { min-height: 46px; }
.hc-sous .hc-sep { margin: 6px 22px; }

/* ===== Build 20261111-24 : Créer un nouveau Bot (relevé Grok Bot, 390×844 @3x) ===== */
#createBackdrop {
  background: rgba(0, 0, 0, 0.33);
  transition: opacity .4s var(--ease-spring);
  z-index: 30;
}
#createSheet {
  top: calc(var(--safe-top) + 61px);
  bottom: 0;
  max-height: none;
  height: auto;
  background: #1C1C1C;
  border-radius: 37px 37px 0 0;
  padding: 0;
  transform: translateY(110%);
  transition: transform .4s var(--ease-spring), top .4s var(--ease-spring);
  z-index: 31;
  overflow: hidden;
}
#createSheet.open { transform: translateY(0); }
#createSheet.kb {
  top: var(--safe-top);
}
#createSheet .create-grab {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 20px 12px 0;
  flex: none;
  position: relative;
  z-index: 2;
}
#createSheet .create-title {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 22px;
}
#createClose.create-x,
#createSheet .create-x {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  color: #F2F2F2;
  display: grid;
  place-items: center;
  box-shadow: none;
}
#createSheet .create-x svg {
  width: 14px;
  height: 14px;
  stroke: #F2F2F2;
  stroke-width: 2.2;
  stroke-linecap: round;
}
#createSheet .create-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}
.create-preview {
  position: relative;
  width: 121px;
  height: 121px;
  margin: 44px auto 0;
  flex: none;
}
.create-preview svg#botBlob {
  width: 121px;
  height: 121px;
  display: block;
  opacity: 0;
  position: relative;
  z-index: 1;
}
.create-preview.assembled svg#botBlob { opacity: 1; }
.create-part {
  position: absolute;
  border-radius: 50%;
  background: #6C6C6C;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.create-part.p1 { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.create-part.p2 { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.create-part.p3 { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
#createSheet.open .create-preview.assembling .create-part { opacity: 1; }
#createSheet.open .create-preview.assembling .p1 {
  animation: botPart1 .55s var(--ease-spring) forwards;
}
#createSheet.open .create-preview.assembling .p2 {
  animation: botPart2 .55s var(--ease-spring) forwards;
}
#createSheet.open .create-preview.assembling .p3 {
  animation: botPart3 .55s var(--ease-spring) forwards;
}
#createSheet.open .create-preview.assembled .create-part { opacity: 0; }
@keyframes botPart1 {
  0%   { transform: translate(-38px, 40px) scale(.55); opacity: .9; }
  70%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(.2); opacity: 0; }
}
@keyframes botPart2 {
  0%   { transform: translate(42px, 24px) scale(.8); opacity: .85; }
  70%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(.2); opacity: 0; }
}
@keyframes botPart3 {
  0%   { transform: translate(-28px, 32px) scale(.8); opacity: .8; }
  70%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(.2); opacity: 0; }
}
#createSheet #botName {
  width: auto;
  margin: 39px 24px 0;
  height: 54px;
  padding: 0 18px;
  background: #272628;
  border: 0;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: #fff;
  text-align: center;
  flex: none;
  outline: none !important;
  box-shadow: none !important;
}
#createSheet #botName::placeholder { color: #5A595D; }
#createSheet #botName:focus, #createSheet #botName:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#createSheet .shape-grid {
  display: grid;
  grid-template-columns: repeat(5, 57.5px);
  justify-content: center;
  column-gap: 0;
  row-gap: 14px;
  margin: 36px auto 0;
  width: 287.5px;
  flex: none;
}
#createSheet .shape-cell {
  width: 57.5px;
  height: 52px;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  color: inherit;
}
#createSheet .shape-cell .shape-svg,
#createSheet .shape-cell svg {
  width: 36px;
  height: 36px;
  display: block;
  position: relative;
  z-index: 1;
}
#createSheet .shape-cell.on::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45px;
  height: 43px;
  margin: -21.5px 0 0 -22.5px;
  border: 1.5px solid #6E6E73;
  border-radius: 13px;
  pointer-events: none;
  z-index: 0;
}
#createSheet .swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 310px;
  margin: 28px auto 0;
  gap: 16.5px 26.5px;
  flex: none;
}
#createSheet .swatch {
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: none;
  position: relative;
  flex: none;
}
#createSheet .swatch.on {
  box-shadow: none;
}
#createSheet .swatch.on::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31px;
  height: 31px;
  margin: -15.5px 0 0 -15.5px;
  border: 1.6px solid #6E6E73;
  border-radius: 50%;
  pointer-events: none;
}
#createSheet .create-go,
#createSheet #botCreate.full-btn,
#createSheet #botCreate {
  width: auto;
  margin: auto 37px calc(12px + var(--safe-bot));
  margin-top: 24px;
  height: 46px;
  padding: 0 18px;
  border-radius: 23px;
  background: #858585;
  color: #262626;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  flex: none;
  cursor: default;
}
#createSheet #botCreate:disabled {
  background: #858585;
  color: #262626;
  opacity: 1;
}
#createSheet #botCreate:not(:disabled) {
  background: #fff;
  color: #111;
  cursor: pointer;
}
#createSheet.kb .swatches { display: none; }
#createSheet.kb .create-preview {
  width: 88px;
  height: 88px;
  margin-top: 16px;
}
#createSheet.kb .create-preview svg#botBlob { width: 88px; height: 88px; }
#createSheet.kb #botName { margin-top: 22px; }
#createSheet.kb .shape-grid { margin-top: 22px; }
#createSheet.kb #botCreate {
  margin-top: auto;
  background: rgba(133, 133, 133, 0.92);
}

/* Accueil : bots locaux sous Laura, qui reste le Bot principal */
.home-bots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
  width: 100%;
  padding: 28px 24px 8px;
  box-sizing: border-box;
}
.home-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  min-width: 72px;
  max-width: 96px;
}
.home-bot-svg, .home-bot svg { width: 64px; height: 64px; display: block; }
.home-bot .nm {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatAv svg.bot-av {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  #createSheet, #createBackdrop, .create-part, .create-preview svg#botBlob {
    animation: none !important;
    transition: none !important;
  }
  .create-preview svg#botBlob { opacity: 1; }
  .create-part { display: none; }
}

#createSheet .shape-cell:nth-child(11) { grid-column: 2; }

#home .home-center { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== Build 20261111-28 : logo officiel FSM SI, bloc à propos comme Grok Bot ===== */
.about-fsm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 16px 12px;
}
.about-fsm-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}
.about-fsm-name {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.about-fsm-ver,
.about-fsm #buildTag {
  margin-top: 10px;
  font-size: 15px;
  color: #99999F;
  letter-spacing: 0;
  line-height: 1.2;
}
.about-fsm-legal {
  margin: 14px 0 0;
  font-size: 12px;
  color: #636366;
  line-height: 1.4;
}
.about-fsm .build-tag { display: none; }