/* Import (build test 3) */
/* tiny change: comment */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

/* Base overlay (no body scroll; footer always visible) */
.drastuce-overlay { position: fixed; inset: 0; background:#fff; z-index: 9999; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
#drastuce-loading-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background:#fff; z-index: 100000; font-weight: 700; font-size: 24px; letter-spacing: 0.4px; color:#111827; transition: opacity .28s ease; }
html.drastuce-new-session #drastuce-loading-overlay { display: flex; }
#drastuce-loading-overlay.is-hidden { opacity: 0; pointer-events: none; }
#drastuce-loading-overlay .loading-title { font-size: 24px; line-height: 1; font-weight: 700; color: inherit; transform: translateY(0); transition: transform .28s ease, opacity .28s ease; }
#drastuce-loading-overlay.is-hidden .loading-title { transform: translateY(-12px); }

/* Typography base */
#drastuce-chat-root,
#drastuce-chat-root * {
  font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-style: normal;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.work-sans {
  font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
}
#drastuce-chat-root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height:100vh;
  min-height:100vh;
  min-width:500px;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  font-weight: 400;
  line-height: 1.6;
  color: #222;
}
#drastuce-chat-root h1,
#drastuce-chat-root h2,
#drastuce-chat-root h3,
#drastuce-chat-root h4 {
  font-size: 1.3em;
  font-weight: 600;
  line-height: 3;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#drastuce-chat-root p {
  font-weight: 400;
  margin-bottom: 1em;
}
#drastuce-chat-root small,
#drastuce-chat-root .caption {
  font-weight: 300;
  color: #555;
}
#drastuce-chat-root a,
#drastuce-chat-root button,
#drastuce-chat-root [role="button"] {
  /* Remove mobile tap highlight overlay */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
#drastuce-chat-root button,
#drastuce-chat-root button:hover,
#drastuce-chat-root button:focus,
#drastuce-chat-root button:active {
  text-decoration: none;
}
#drastuce-chat-root button,
#drastuce-chat-root .dr-btn,
#drastuce-chat-root .composer-mode-chip,
#drastuce-chat-root .mode-versions-btn,
#drastuce-chat-root .guided-astuces-option,
#drastuce-chat-root .camera-mode-choice,
#drastuce-chat-root .icon-btn {
  text-transform: capitalize;
}
#drastuce-chat-root.guest-mobile{ min-height:100vh; max-height:none; overflow:auto; }
#drastuce-chat-root.guest-mobile main{ overflow:auto; min-height:0; height:100%; }
#drastuce-chat-root.guest-mobile footer{ position:sticky; bottom:0; }
@supports (height: 100dvh){
  #drastuce-chat-root{
    height:100dvh;
    min-height:100dvh;
  }
  #drastuce-chat-root.guest-mobile{
    height:100dvh;
    max-height:100dvh;
  }
}
/* Mobile: keep layout inside the viewport so the composer stays visible without page scroll */
@media (max-width: 640px){
  #drastuce-chat-root{
    min-width:0;
    width:100vw;
    max-width:100vw;
  }
  #drastuce-chat-root.drastuce-overlay{
    height:100vh;
    min-height:100vh;
  }
  @supports (height: 100dvh){
    #drastuce-chat-root.drastuce-overlay{
      height:100dvh;
      min-height:100dvh;
    }
  }
  #drastuce-chat-root main{
    min-height:0;
  }
  #chat-container{
    padding-bottom:8px;
  }
}
#drastuce-chat-root button,
#drastuce-chat-root .dr-btn,
#drastuce-chat-root .icon-btn {
  position: relative;
  overflow: hidden;
}
.btn-ripple-span {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  animation: ripple-center 0.6s linear;
}
body.expdrastuce-chat-active{ overflow-x:hidden; overflow-y:auto; }
@keyframes ripple-center {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

button,
button:hover,
button:focus,
button:focus-visible,
button:active {
  text-decoration: none !important;
}
/* Tooltip helper for any control that declares data-tooltip */
#drastuce-chat-root [data-tooltip] {
  position: relative;
}
#drastuce-chat-root [data-tooltip]::after,
#drastuce-chat-root [data-tooltip]::before {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 10010;
}
#drastuce-chat-root [data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15,23,42,0.26);
}
#drastuce-chat-root [data-tooltip]::before {
  content: "";
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, -4px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}
#drastuce-chat-root [data-tooltip]:hover::after,
#drastuce-chat-root [data-tooltip]:hover::before,
#drastuce-chat-root [data-tooltip]:focus-visible::after,
#drastuce-chat-root [data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (hover: none), (pointer: coarse) {
  #drastuce-chat-root [data-tooltip]::after,
  #drastuce-chat-root [data-tooltip]::before {
    display: none !important;
  }
}
/* Allow the UI to shrink on phones (avoid horizontal overflow) */
@media (max-width: 770px) {
  #drastuce-chat-root { min-width: 0; }
}
#drastuce-chat-root { --sidebar-mobile-w: min(69vw, 270px); }
#drastuce-chat-root { --composer-max-width: 630px; }
#drastuce-chat-root {
  --theme-accent: #8a2be2;
  --theme-accent-dark: #5b21b6;
  --theme-link-color: var(--theme-accent-dark);
  --theme-user-bg: #f3edff;
  --theme-user-text: #4c1d95;
  --theme-user-border: #d8b4fe;
  --theme-active-convo-bg: #f3edff;
  --theme-loader-border: #8a2be2;
  --theme-accent-ring: #551f96;
  --accent: var(--theme-accent);
  --accent-surface: rgba(138,43,226,0.16);
  --accent-surface-stronger: rgba(138,43,226,0.75);
}
#drastuce-chat-root.theme-green {
  --theme-accent: #00c853;
  --theme-accent-dark: #0d652d;
  --theme-link-color: var(--theme-accent-dark);
  --theme-user-bg: #e6f4ea;
  --theme-user-text: #0d652d;
  --theme-user-border: #b7e0c2;
  --theme-active-convo-bg: #e6f4ea;
  --theme-loader-border: #00c853;
  --theme-accent-ring: #0b7a3d;
  --accent: var(--theme-accent);
  --accent-surface: rgba(0,200,83,0.16);
  --accent-surface-stronger: rgba(0,200,83,0.75);
}
#drastuce-chat-root.theme-purple {
  --theme-accent: #8a2be2;
  --theme-accent-dark: #5b21b6;
  --theme-link-color: var(--theme-accent-dark);
  --theme-user-bg: #f3edff;
  --theme-user-text: #4c1d95;
  --theme-user-border: #d8b4fe;
  --theme-active-convo-bg: #f3edff;
  --theme-loader-border: #8a2be2;
  --theme-accent-ring: #551f96;
  --accent: var(--theme-accent);
  --accent-surface: rgba(138,43,226,0.16);
  --accent-surface-stronger: rgba(138,43,226,0.75);
}
#drastuce-chat-root.theme-blue {
  --theme-accent: #6495ed;
  --theme-accent-dark: #3b6fc4;
  --theme-link-color: var(--theme-accent-dark);
  --theme-user-bg: #e9f1ff;
  --theme-user-text: #1f3f75;
  --theme-user-border: #c1d8ff;
  --theme-active-convo-bg: #e9f1ff;
  --theme-loader-border: #6495ed;
  --theme-accent-ring: #305da8;
  --accent: var(--theme-accent);
  --accent-surface: rgba(100,149,237,0.16);
  --accent-surface-stronger: rgba(100,149,237,0.75);
}
body.admin-bar .drastuce-overlay { top:32px; } @media (max-width:782px){ body.admin-bar .drastuce-overlay{ top:46px; } }

/* Header: centered title, compact, pills removed */
#app-title { position: relative; background:#fff; border-bottom:0; padding:14px 12px; font-weight:600; font-size:18px; color:#223; display:flex; align-items:center; justify-content:center; min-height:48px; z-index:2; gap:12px; }
/* Reserve space so the centered title never overlaps the left icon or right chip */
#app-title { padding-left:52px; padding-right:52px; }
/* Subtle initial slide-up + fade-in for header */
@keyframes dr-header-slide-fade {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#app-title.animate-in { animation: dr-header-slide-fade 280ms ease-out both; }
.title-text-static { font-weight:600; font-size:18px; line-height:1; display:inline-flex; align-items:center; gap:6px; color:#000; text-decoration:none; cursor:pointer; text-transform:none; letter-spacing:0; background:transparent; border:0; padding:0; }
.title-text-static:focus { outline:none; }
.title-text-static:focus-visible { outline:2px solid #111827; outline-offset:3px; border-radius:6px; }
.header-upgrade-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:9999px; background:#a855f7; color:#fff; border:0; font-weight:600; font-size:14px; line-height:1; cursor:pointer; box-shadow:none; transition:background-color .15s ease; }
.header-upgrade-btn:hover { background:#9333ea; }
.header-upgrade-btn:focus-visible { outline:2px solid rgba(255,255,255,0.7); outline-offset:2px; }
.header-upgrade-btn[hidden] { display:none !important; }
.mode-switcher-wrap { position:relative; display:inline-flex; z-index:2; }
.mode-switcher { border:none; background:transparent; padding:0; gap:6px; font-size:18px; font-weight:600; line-height:1; letter-spacing:0; color:#000; transition:color .15s ease; white-space:nowrap; display:inline-flex; align-items:center; }
.mode-switcher:hover { color:#0f172a; }
.mode-switcher:hover, .mode-switcher:focus, .mode-switcher:active { text-decoration:none; }
.mode-switcher:focus-visible { outline:2px solid rgba(17,24,39,0.2); outline-offset:2px; }
.mode-switcher:focus, .mode-switcher:active { outline:none; box-shadow:none; }
.mode-switcher::-moz-focus-inner { border:0; }
.mode-switcher:focus-visible { background:none; }
.mode-switcher:focus-visible { outline:2px solid rgba(17,24,39,0.3); outline-offset:2px; }
.mode-switcher.mode-switcher-disabled { color:#111827; }
.mode-switcher.mode-switcher-disabled:hover { color:#111827; }
.mode-switcher-main { display:inline-flex; align-items:center; gap:6px; }
.mode-switcher-label { font-weight:600; text-transform:none; }
.mode-switcher-current { display:none; }
.mode-switcher-caret { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:#6b7280; }
.mode-switcher-caret::before { content:""; display:block; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-2px; }
.mode-switcher[aria-expanded="true"] .mode-switcher-caret::before { transform:rotate(-135deg); margin-top:2px; }
#mode-dropdown { position:absolute; top:calc(100% + 10px); left:0; transform:none; min-width:240px; max-width: min(320px, calc(100vw - 32px)); background:#fff; border-radius:14px; box-shadow:0 20px 40px rgba(15,23,42,0.12); border:1px solid rgba(15,23,42,0.08); padding:8px 0; z-index:10002; pointer-events:auto; }
#mode-dropdown[hidden] { display:none !important; }
.mode-option { padding:10px 18px; display:flex; flex-direction:column; gap:4px; cursor:pointer; outline:none; }
.mode-option:hover { background:#f3f4f6; }
.mode-option:focus-visible { background:#f3f4f6; box-shadow:inset 0 0 0 2px rgba(15,23,42,0.08); }
.mode-option:focus, .mode-option:active { background:#f3f4f6; box-shadow:none; }
.mode-option::-moz-focus-inner { border:0; }
.mode-option-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mode-option-name { font-weight:600; color:#111827; font-size:15px; }
.mode-option-check { display:none; font-weight:700; color:var(--theme-accent); }
.mode-option.active .mode-option-check { display:inline; }
.mode-option-desc { margin:0; font-size:13px; color:#6b7280; line-height:1.4; }
.mode-option-info { cursor:default; }
.mode-option-info:hover { background:transparent; }
.composer-mode-selector { position:absolute; z-index:10005; display:block; }
.composer-mode-selector[hidden] { display:none !important; }
.composer-mode-selector::before { content:""; position:absolute; inset:0; }
.composer-mode-selector .composer-mode-selector-card { background:#fff; border-radius:14px; box-shadow:0 18px 38px rgba(15,23,42,0.16); border:1px solid rgba(15,23,42,0.08); padding:8px 0; min-width:200px; display:flex; flex-direction:column; gap:0; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; }
.composer-mode-selector.is-above .composer-mode-selector-card { transform:translateY(-6px); }
.composer-mode-selector.is-open .composer-mode-selector-card { opacity:1; transform:translateY(0); }
.composer-mode-selector-options { display:flex; flex-direction:column; gap:0; padding:0; }
.composer-mode-selector-option { appearance:none; border:0; border-radius:0; padding:10px 18px; background:transparent; text-align:left; font-size:15px; font-weight:400; color:#333; cursor:pointer; transition:background .18s ease, color .18s ease; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.composer-mode-selector-option:first-of-type { padding-top:12px; }
.composer-mode-selector-option:last-of-type { padding-bottom:12px; }
.composer-mode-selector-option.is-locked { color:#94a3b8; cursor:not-allowed; }
.composer-mode-selector-option.is-locked:hover,
.composer-mode-selector-option.is-locked:focus-visible { background:transparent; color:#94a3b8; }
.composer-mode-selector-option-label { pointer-events:none; font-size:15px; font-weight:400; color:inherit; text-transform:none; }
.composer-mode-selector-option-check { font-size:16px; color:var(--theme-accent-dark, #0f172a); opacity:0; transition:opacity .18s ease; pointer-events:none; }
.composer-mode-selector-option.is-locked .composer-mode-selector-option-check { color:#cbd5f5; opacity:0.35; }
.composer-mode-selector-option:hover,
.composer-mode-selector-option:focus-visible { background:#f3f4f6; outline:none; }
.composer-mode-selector-option.is-active { background:var(--accent-surface, rgba(17,24,39,0.08)); color:var(--theme-accent-dark, #111827); }
.composer-mode-selector-option.is-locked.is-active { background:#f8fafc; color:#64748b; }
.composer-mode-selector-option.is-active .composer-mode-selector-option-check { opacity:1; }
.composer-mode-selector-option.is-locked.is-active .composer-mode-selector-option-check { opacity:0.55; }
.composer-mode-selector-upsell { border-top:1px solid #e2e8f0; padding:12px 18px 16px; display:flex; flex-direction:column; gap:10px; background:#f8fafc; }
.composer-mode-selector-upsell-text { margin:0; font-size:13px; line-height:1.45; color:#64748b; }
.composer-mode-selector-upsell-button { align-self:flex-start; border-radius:999px; border:1px solid var(--theme-accent-ring, rgba(11,122,61,0.35)); background:var(--accent-surface, rgba(16,185,129,0.16)); color:var(--theme-accent-dark, #0b7a3d); font-weight:600; padding:6px 16px; font-size:13px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.composer-mode-selector-upsell-button:hover { background:var(--accent-surface-strong, rgba(16,185,129,0.24)); box-shadow:0 6px 16px rgba(15,23,42,0.15); }
.composer-mode-selector-upsell-button:focus-visible { outline:2px solid rgba(11,122,61,0.35); outline-offset:2px; }
.composer-mode-selector-upsell-button:active { transform:translateY(1px); }
.title-logo { width:20px; height:20px; display:inline-block; object-fit:contain; }
.menu-btn { position:absolute; left:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px; z-index:2; transition:left .2s ease; }
.menu-btn { background-image: url('sidebar.svg'); background-position:center; background-repeat:no-repeat; background-size:28px 20px; }
.menu-btn:hover { background-color:#f3f4f6; box-shadow: inset 0 0 0 1px #e5e7eb; }
.menu-img { width:28px; height:28px; display:block; object-fit:contain; }
/* Hamburger icon copied from source */
/* Robust hamburger icon: draw 3 bars via background stripes (no pseudos) */
/* Inline image hamburger (robust vs site CSS) */
.menu-btn { color:#111827; }
.menu-img { width:28px; height:20px; display:block; object-fit:contain; filter:none !important; opacity:1 !important; }
/* no pseudo-element or masking — direct image only */
.right-spacer { position:absolute; right:8px; width:36px; height:36px; }

/* Floating new chat button */
#drastuce-chat-root .floating-new-chat {
  position:absolute;
  top:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
  color:#111827;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:box-shadow .18s ease, transform .18s ease, opacity .18s ease;
  z-index:30;
}
#drastuce-chat-root .floating-new-chat[hidden] {
  display:none !important;
}
#drastuce-chat-root .floating-new-chat:hover {
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
  transform:translateY(-1px);
}
#drastuce-chat-root .floating-new-chat:focus-visible {
  outline:2px solid rgba(15,23,42,0.32);
  outline-offset:3px;
}
#drastuce-chat-root .floating-new-chat-icon {
  width:18px;
  height:18px;
  display:block;
}
#drastuce-chat-root .floating-new-chat-label {
  white-space:nowrap;
  text-transform:none;
}
@media (max-width: 640px) {
  #drastuce-chat-root .floating-new-chat {
    top:12px;
    right:12px;
    padding:calc(12px * 0.8);
    gap:0;
  }
  #drastuce-chat-root .floating-new-chat-icon {
    width:calc(27px * 0.8);
    height:calc(27px * 0.8);
  }
  #drastuce-chat-root .floating-new-chat-label {
    display:none;
  }
}

/* Authenticated header: align title next to sidebar button and hide logo */
#drastuce-chat-root:not(.guest) #app-title { justify-content:flex-start; padding-left:8px; padding-right:8px; }
#drastuce-chat-root:not(.guest) #menu-btn { position:static; left:auto; top:auto; transform:none; margin-right:6px; width:34px; height:34px; padding:0; border-radius:10px; align-self:center; }
#drastuce-chat-root:not(.guest) #app-title .title-text-static { margin-left:0; line-height:1; display:flex; align-items:center; transform:none; }
#drastuce-chat-root:not(.guest) #app-title .title-logo { display:none !important; }

/* Header: title + return button */
#app-title .header-title-wrap{ display:flex; align-items:center; gap:12px; min-width:0; }
#app-title .header-return-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#111827;
  cursor:pointer;
  flex:0 0 auto;
  transition:background-color .15s ease, transform .15s ease;
}
#app-title .header-return-btn:hover{ background:#f3f4f6; }
#app-title .header-return-btn:active{ transform:scale(0.98); }
#app-title .header-return-btn:focus-visible{ outline:2px solid rgba(17,24,39,0.32); outline-offset:2px; }
#app-title .header-return-btn[hidden]{ display:none !important; }

/* Guest header alignment */
#drastuce-chat-root.guest #app-title .title-text-static { display:flex !important; align-items:center !important; line-height:1 !important; transform:none !important; }
#drastuce-chat-root.guest:not(.guest-mobile) #menu-btn { width:34px !important; height:34px !important; padding:0 !important; border-radius:10px !important; align-self:center !important; margin-right:6px !important; }
#drastuce-chat-root.guest:not(.guest-mobile) #app-title .title-text-static { margin-left:0 !important; }
#drastuce-chat-root.guest-mobile #menu-btn { width:34px !important; height:34px !important; padding:0 !important; border-radius:10px !important; }
#drastuce-chat-root.guest-mobile #app-title .title-text-static { display:flex !important; align-items:center !important; line-height:1 !important; transform:translateY(1px) !important; }
@media (max-width: 770px){
  /* Align guest header + new chat button flush left on mobile to match logged-in layout */
  #drastuce-chat-root.guest #app-title{
    justify-content:flex-start !important;
    padding-left:10px !important;
    padding-right:12px !important;
    gap:10px !important;
  }
  #drastuce-chat-root.guest #menu-btn{
    margin-left:0 !important;
    margin-right:6px !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
  }
  #drastuce-chat-root.guest #app-title .title-text-static{
    margin-left:0 !important;
    justify-self:flex-start !important;
    transform:none !important;
  }
  #drastuce-chat-root.guest #menu-btn .menu-img{
    width:16px !important;
    height:16px !important;
  }
}

/* Guests: rely on img swap for the new chat icon (avoid double icons) */
#drastuce-chat-root.guest .menu-btn {
  background-image: none !important;
}

/* Hide WP admin bar on chat */
#wpadminbar{ display:none !important; }
html.wp-toolbar, body.admin-bar { padding-top:0 !important; }
body.admin-bar .drastuce-overlay { top:0 !important; }

/* Side menu */
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.10); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:10000; }
.side-menu { position:fixed; top:0; left:0; bottom:0; width:min(var(--sidebar-mobile-w), 100vw); max-width:100vw; background:#fff; box-shadow: 2px 0 18px rgba(0,0,0,.12); transform:translateX(-100%); transition:transform .2s ease; z-index:10001; display:flex; flex-direction:column; overflow-x:hidden; }
.side-menu:not(.open){ box-shadow:none; z-index:0; }
.side-menu.open { transform:translateX(0); }
.side-header { padding:14px 12px; font-weight:600; border-bottom:0; }
.side-header { display:flex; align-items:center; gap:10px; position:relative; justify-content:flex-start; }
.side-header .side-title { font-weight:600; font-size:18px; line-height:1; display:flex; align-items:center; color:#000; margin-right:auto; }
.side-content { display:flex; flex-direction:column; min-height:0; flex:1; overflow:auto; overflow-x:hidden; }
.menu-item { width:100%; text-align:left; padding:10px 12px; border:0; background:#fff; cursor:pointer; font-size:14px; text-transform:none; text-decoration:none !important; position: relative; display:flex; align-items:center; line-height:1.4; min-height:38px; }
.menu-item:hover { background:#f3f4f6; text-decoration:none; }
.menu-item.danger { color:#000; }
.menu-section { padding:10px 12px; font-size:14px; color:#000; text-transform:none; letter-spacing:0; font-weight:400; position: relative; display:flex; align-items:center; line-height:1.4; min-height:38px; }
.menu-sub { padding:10px 12px; font-size:14px; color:#000; }
#pack-remaining, #pack-expiry { display:none; }
.menu-divider { display:none; height:0; margin:0; }
.convo-list { overflow:auto; overflow-x:hidden; padding:6px 8px 14px; flex:1; }
.side-content::-webkit-scrollbar,
.convo-list::-webkit-scrollbar { width:6px; }
.side-content::-webkit-scrollbar-track,
.convo-list::-webkit-scrollbar-track { background:transparent; }
.side-content::-webkit-scrollbar-thumb,
.convo-list::-webkit-scrollbar-thumb { background:rgba(17,24,39,0.32); border-radius:999px; }
.side-content { scrollbar-width:thin; scrollbar-color:rgba(17,24,39,0.32) transparent; }
.convo-list { scrollbar-width:thin; scrollbar-color:rgba(17,24,39,0.32) transparent; }
.convo-list-status { font-size:12px; color:#6b7280; text-align:center; padding:8px 4px 10px; }
.logout-wrap { order: 9999; margin-top:auto; position: sticky; bottom: 0; background:#fff; border-top:1px solid #e5e7eb; z-index:2; padding:4px 0; }
.side-content { gap: 0; }
.logout-wrap .menu-item { width:100%; }
.convo-item { padding:6px 12px; border-radius:8px; cursor:pointer; color:#000; font-weight:400; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.convo-item:hover { background:#f3f4f6; }
.convo-item.active { background:var(--theme-active-convo-bg); font-weight:600; color:var(--theme-user-text); }
.convo-item.active > span { color:inherit; }
.convo-item > span { color:#000; font-size:14px; font-weight:400; text-transform:none; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Close/retract button inside the sidebar header (visible on mobile) */
.side-toggle-btn { position:static; left:auto !important; top:auto; transform:none; width:34px; height:34px; z-index:3; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:10px; padding:0; margin-left:auto; }
@media (min-width:771px){ .side-toggle-btn { display:none !important; } }

/* Chats section label in gray and spaced below top items */
#section-chats { color:#6b7280; margin-top:14px; }

/* Guide icon */

/* Pack modal */
.dr-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.10); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 10002; }
.dr-modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10003; }
.dr-modal-backdrop[hidden], .dr-modal[hidden] { display: none !important; }

/* User 1 new UI modal skin for dr-modal family (except mode choice modal) */
body.userone-newui-modal-scope .userone-newui-modal-backdrop{
  background:rgba(0,0,0,.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.userone-newui-modal-scope .userone-newui-modal{
  padding:0 1rem;
}
body.userone-newui-modal-scope .userone-newui-modal-card{
  border-radius:24px;
  border:1px solid #d4d4d8;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
body.userone-newui-modal-scope .userone-newui-modal-header{
  border-bottom:0;
  padding:18px 24px 8px;
}
body.userone-newui-modal-scope .userone-newui-modal-title{
  font-size:18px;
  line-height:1.2;
  font-weight:500;
  color:#18181b;
}
body.userone-newui-modal-scope .userone-newui-modal-close{
  color:#52525b;
  border-radius:999px;
}
body.userone-newui-modal-scope .userone-newui-modal-close:hover{
  background:#f4f4f5;
}
body.userone-newui-modal-scope .userone-newui-modal-body{
  padding:0 24px 20px;
  color:#52525b;
}
body.userone-newui-modal-scope #name-modal.userone-newui-modal-name.nm2-modal{
  padding:0 1rem;
}
body.userone-newui-modal-scope #name-modal.userone-newui-modal-name.nm2-modal .nm2-shell{
  border:1px solid #d4d4d8;
  border-radius:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  background:#fff;
  overflow:hidden;
}
@media (max-width:420px){
  body.userone-newui-modal-scope .userone-newui-modal-header{ padding:18px 20px 8px; }
  body.userone-newui-modal-scope .userone-newui-modal-body{ padding:0 20px 18px; }
}

/* User 1 new UI info modals (Explication / Astuce / Astuce Turbo) */
.userone-newui-info-modal-root{
  --userone-newui-info-modal-border:#d4d4d8;
  --userone-newui-info-modal-text:#18181b;
  --userone-newui-info-modal-muted:#52525b;
  --userone-newui-info-modal-shadow:0 10px 28px rgba(0,0,0,.18);
  --userone-newui-info-modal-radius:24px;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.userone-newui-info-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
}
.userone-newui-info-modal-overlay.userone-newui-info-modal--astuce{ z-index:10029; }
.userone-newui-info-modal-overlay.userone-newui-info-modal--turbo{ z-index:10030; }
.userone-newui-info-modal-overlay.userone-newui-info-modal--explication{ z-index:10031; }
.userone-newui-info-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.10);
  backdrop-filter: blur(2px);
}
.userone-newui-info-modal-modal{
  position:relative;
  max-height:calc(100vh - 3rem);
  border-radius:var(--userone-newui-info-modal-radius);
  background:#fff;
  box-shadow:var(--userone-newui-info-modal-shadow);
  transform:translateY(10px) scale(.985);
  opacity:0;
}
.userone-newui-info-modal-overlay.userone-newui-info-modal--astuce .userone-newui-info-modal-modal,
.userone-newui-info-modal-overlay.userone-newui-info-modal--explication .userone-newui-info-modal-modal{
  width:min(720px, calc(100vw - 3rem));
}
.userone-newui-info-modal-overlay.userone-newui-info-modal--turbo .userone-newui-info-modal-modal{
  width:min(520px, calc(100vw - 3rem));
}
.userone-newui-info-modal-overlay[aria-hidden="false"] .userone-newui-info-modal-modal{ animation:userone-newui-info-modal-pop-in 180ms ease-out forwards; }
.userone-newui-info-modal-overlay.userone-newui-info-modal-closing .userone-newui-info-modal-modal{ animation:userone-newui-info-modal-pop-out 140ms ease-in forwards; }
.userone-newui-info-modal-overlay.userone-newui-info-modal-closing{ animation:userone-newui-info-modal-fade-out 140ms ease-in forwards; }
@keyframes userone-newui-info-modal-pop-in{
  from{ transform:translateY(10px) scale(.985); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes userone-newui-info-modal-pop-out{
  from{ transform:translateY(0) scale(1); opacity:1; }
  to{ transform:translateY(10px) scale(.985); opacity:0; }
}
@keyframes userone-newui-info-modal-fade-out{
  from{ opacity:1; }
  to{ opacity:0; }
}
.userone-newui-info-modal-inner{
  border-radius:var(--userone-newui-info-modal-radius);
  border:1px solid var(--userone-newui-info-modal-border);
  padding:16px 20px;
  max-height:calc(100vh - 3rem);
  overflow-y:auto;
}
@media (min-width:640px){
  .userone-newui-info-modal-inner{ padding:18px 24px; }
}
.userone-newui-info-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:6px;
}
.userone-newui-info-modal-title{
  font-size:18px;
  line-height:1.2;
  font-weight:500;
  color:var(--userone-newui-info-modal-text);
  margin:0;
}
.userone-newui-info-modal-subtitle{
  margin-top:2px;
  font-size:13px;
  line-height:1.2;
  color:#a1a1aa;
}
.userone-newui-info-modal-body{
  margin-top:24px;
  padding:0 12px;
}
.userone-newui-info-modal-overlay.userone-newui-info-modal--astuce .userone-newui-info-modal-body,
.userone-newui-info-modal-overlay.userone-newui-info-modal--explication .userone-newui-info-modal-body{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.userone-newui-info-modal-overlay.userone-newui-info-modal--turbo .userone-newui-info-modal-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}
@media (min-width:768px){
  .userone-newui-info-modal-overlay.userone-newui-info-modal--astuce .userone-newui-info-modal-body,
  .userone-newui-info-modal-overlay.userone-newui-info-modal--explication .userone-newui-info-modal-body{ grid-template-columns:repeat(3,1fr); }
}
.userone-newui-info-modal-intro{ display:flex; flex-direction:column; gap:6px; }
.userone-newui-info-modal-feature-title{
  font-size:18px;
  font-weight:600;
  color:var(--userone-newui-info-modal-text);
  line-height:1.3;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ast1-feature-title,
.exp1-feature-title{ white-space:nowrap; }
.ast1-pill{
  width:18px;
  height:10px;
  margin-top:7px;
  border-radius:999px;
  display:inline-block;
  flex-shrink:0;
}
.ast1-pill-green{ background:#22c55e; }
.ast1-diamond{
  width:12px;
  height:12px;
  margin-top:6px;
  transform:rotate(45deg);
  display:inline-block;
  flex-shrink:0;
}
.ast1-diamond-orange{ background:#f97316; }
.ast1-icon-wand{
  width:18px;
  height:18px;
  margin-top:3px;
  flex-shrink:0;
  color:#a855f7;
}
.ast1-icon-wand svg{
  width:100%;
  height:100%;
  display:block;
}
.exp1-dot{
  width:14px;
  height:14px;
  margin-top:5px;
  border-radius:999px;
  display:inline-block;
  flex-shrink:0;
}
.exp1-dot-square{ border-radius:2px; }
.exp1-dot-purple{ background:#a855f7; }
.exp1-dot-blue{ background:#f97316; }
.exp1-icon-conversation{
  width:16px;
  height:16px;
  margin-top:4px;
  flex-shrink:0;
}
.exp1-icon-conversation svg{
  width:100%;
  height:100%;
  fill:#3b82f6;
  stroke:#3b82f6;
  stroke-width:1.2;
  display:block;
}
.userone-newui-info-modal-feature-desc{
  font-size:15px;
  line-height:1.55;
  color:var(--userone-newui-info-modal-muted);
}
.userone-newui-info-modal-footer{
  margin-top:28px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:0 12px;
}
.userone-newui-info-modal-btn{
  border:1px solid transparent;
  cursor:pointer;
  border-radius:999px;
  background:var(--userone-newui-info-modal-text);
  color:#fff;
  font-size:15px;
  font-weight:500;
  padding:12px 28px;
  min-height:40px;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.userone-newui-info-modal-btn:hover{ background:#27272a; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.userone-newui-info-modal-btn:active{ transform:scale(.99); }
.userone-newui-info-modal-hidden{ display:none !important; }
@media (max-width:420px){
  .userone-newui-info-modal-inner{ padding:18px 20px; }
  .userone-newui-info-modal-body{ padding:0 10px; }
  .userone-newui-info-modal-footer{ padding:0 10px; }
}

/* Safety: never let theme/browser `code { background: ... }` make text unreadable in chat renders */
#drastuce-chat-root .ai code,
#drastuce-chat-root .ai pre code,
#drastuce-chat-root .ai code[class],
#drastuce-chat-root .ai pre code[class]{
  background: transparent !important;
  color: inherit !important;
}

/* Same for the reasoning modal (mounted outside #drastuce-chat-root) */
#reasoning-modal code,
#reasoning-modal pre code,
.reasoning-modal-body code,
.reasoning-modal-body pre code{
  background: transparent !important;
  color: inherit !important;
}
.dr-modal-card { background:#fff; width:min(520px,92vw); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); overflow:hidden; border:1px solid #e5e7eb; }
.dr-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #e5e7eb; }
.dr-modal-title { font-weight:600; font-size:16px; color:#111827; }
.dr-modal-close { background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; color:#111827; padding:4px 8px; border-radius:6px; }
.dr-modal-close:hover { background:#f3f4f6; }
.dr-modal-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
#versions-modal .dr-modal-card { width:min(420px, 90vw); }
#attach-modal .dr-modal-card { width:min(420px, 90vw); }
.astuces-confirm-body { gap:16px; }
.astuces-confirm-question { margin:0; font-size:15px; line-height:1.5; color:#111827; }
.astuces-confirm-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:4px; }
.astuces-confirm-actions .dr-btn { min-width:120px; }
@media (max-width: 520px) {
  .astuces-confirm-actions { flex-direction:column; }
  .astuces-confirm-actions .dr-btn { width:100%; min-width:0; }
}
#astuces-confirm-modal .dr-modal-card { width:min(520px, 92vw); }
.versions-modal-list { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#111827; line-height:1.5; margin:4px 0 0; }
.versions-modal-list p { margin:0; }
/* Mode-choice: blur background without dimming (top inset is set in JS for user 1) */
#userone-mode-choice-backdrop {
  background: rgba(255,255,255,0.01) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  /* Keep blur snapshotted (no transition) and delay `visibility:hidden` until fade-out ends (fixes mobile flicker). */
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
#userone-mode-choice-backdrop:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 200ms ease, visibility 0s;
}
/* Override the default UA `display:none` for `[hidden]` so transitions can run. */
#userone-mode-choice-backdrop[hidden] { display:block !important; }

/* User 1: bare mode-choice (buttons only, keep backdrop) */
#userone-mode-choice-modal.userone-mode-choice-bare { display:grid; place-items:center; }
#userone-mode-choice-modal.userone-mode-choice-bare .userone-mode-choice-bare-inner{
  position:relative;
  z-index:10004;
}
#userone-mode-choice-modal.userone-mode-choice-bare .userone-mode-choice-bare-anim{
  display:grid;
  grid-template-columns: repeat(2, max-content);
  gap:16px;
  justify-content:center;
  align-items:center;
  padding:14px 10px;
  opacity:0;
  will-change: opacity;
}
#userone-mode-choice-modal.userone-mode-choice-bare .userone-mode-choice-bare-anim.is-in{
  animation: u1_mode_choice_in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes u1_mode_choice_in{
  from { opacity:0; }
  to { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #userone-mode-choice-modal.userone-mode-choice-bare .userone-mode-choice-bare-anim.is-in{
    animation: none;
    opacity: 1;
  }
}
#userone-mode-choice-modal.userone-mode-choice-bare .composer-mode-chip{
  background:#ffffff;
  color:#5b21b6;
  border:1px solid transparent;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
  transform:none;
  font-size:16px;
  padding:9px 17px;
  min-height:42px;
  text-transform:none;
  letter-spacing:0;
}
#userone-mode-choice-modal.userone-mode-choice-bare .composer-mode-chip:hover{
  background:#ffffff;
  box-shadow:0 14px 28px rgba(0,0,0,0.22);
}
#userone-mode-choice-modal.userone-mode-choice-bare .composer-mode-chip:focus-visible{
  outline:2px solid rgba(138,43,226,0.35);
  outline-offset:2px;
}
#userone-mode-choice-modal.userone-mode-choice-bare .composer-mode-chip.astuce_turbo-choice{
  grid-column: 1 / -1;
  justify-self: center;
}
/* Mode choice buttons: animated border + glow (scoped to this modal only) */
@property --u1-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes u1_spin {
  from { --u1-angle: 0deg; }
  to { --u1-angle: 360deg; }
}

#userone-mode-choice-modal .composer-mode-chip[data-mode-choice]{
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

/* Glowing conic halo behind the button */
#userone-mode-choice-modal .composer-mode-chip[data-mode-choice]::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  /* Safari: avoid rectangular rasterization artifacts with conic-gradient + filter blur */
  -webkit-clip-path: inset(-24px round 999px);
  clip-path: inset(-24px round 999px);
  transform: translateZ(0);
  z-index:-2;
  pointer-events:none;
  animation: 7s u1_spin linear infinite;
  background: conic-gradient(
    from var(--u1-angle),
    #24daff,
    #ab43fa,
    #24daff
  );
  filter: blur(14px);
  opacity: 0.75;
}

/* Actual button surface + animated border (kept above halo, behind content) */
#userone-mode-choice-modal .composer-mode-chip[data-mode-choice]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  -webkit-clip-path: inset(0 round 999px);
  clip-path: inset(0 round 999px);
  transform: translateZ(0);
  z-index:-1;
  pointer-events:none;
  animation: 7s u1_spin linear infinite;
  border: 2px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      from var(--u1-angle),
      #24daff,
      #ab43fa,
      #24daff
    ) border-box;
}

#userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice{
  background:#6d28d9;
  color:#fff;
  overflow: visible;
}
#userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice::before{
  display:none;
}
#userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice::after{
  background:
    linear-gradient(#6d28d9, #6d28d9) padding-box,
    conic-gradient(
      from var(--u1-angle),
      #24daff,
      #ab43fa,
      #24daff
    ) border-box;
}

/* Sparkles for Astuce Turbo button (modal only) */
#userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice .sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-2;
  overflow: visible;
}
#userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice .sparkle{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--s, 4px);
  height:var(--s, 4px);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle,
      hsla(var(--h), 95%, 85%, var(--core,.95)) 0 35%,
      transparent 70%
    ),
    radial-gradient(circle,
      hsla(var(--h), 90%, 65%, var(--haloC,.25)) 0 45%,
      transparent 75%
    );
  filter:
    blur(var(--blur, 0px))
    drop-shadow(0 0 10px hsla(var(--h), 90%, 60%, .35))
    drop-shadow(0 0 14px hsla(var(--h), 90%, 55%, .25));
  transform:
    translate(calc(-50% + var(--ex)), calc(-50% + var(--ey)))
    scale(.35);
  animation: u1_sparkle_float 3s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--delay);
}
@keyframes u1_sparkle_float{
  0%{
    transform:
      translate(calc(-50% + var(--ex)), calc(-50% + var(--ey)))
      scale(0.35);
    opacity:0;
  }
  15%{ opacity:var(--op); }
  60%{
    transform:
      translate(
        calc(-50% + var(--ex) + var(--x)),
        calc(-50% + var(--ey) + var(--y))
      )
      scale(1);
    opacity:calc(var(--op) * .85);
  }
  100%{
    transform:
      translate(
        calc(-50% + var(--ex) + var(--x2)),
        calc(-50% + var(--ey) + var(--y2))
      )
      scale(0.15);
    opacity:0;
  }
}
@media (prefers-reduced-motion: reduce){
  #userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice::after,
  #userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice .sparkle{
    animation: none !important;
  }
  #userone-mode-choice-modal .composer-mode-chip.astuce_turbo-choice .sparkle{
    opacity:0 !important;
  }
}


/* Bubble "pop" animation on click (shared) */
/* Note: base button styles set `overflow:hidden` on all buttons, so we must override with higher specificity. */
#drastuce-chat-root .bubbly-pop-btn{
  overflow: visible !important;
}
#drastuce-chat-root .bubbly-pop-btn.is-bubbly-animate{
  /* Lift above nearby UI so bubbles can overlap other elements */
  z-index: 10050;
}
.bubbly-pop-btn .bubbly-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Render above adjacent UI while animating */
  z-index: 10049;
}
.bubbly-pop-btn .bubbly-layer::before,
.bubbly-pop-btn .bubbly-layer::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:150%;
  z-index: 10049;
  background-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
}

.bubbly-pop-btn.is-bubbly-animate .bubbly-layer::before{
  top:-70%;
  opacity:1;
  background-image:
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #8a2be2 20%, transparent 30%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #8a2be2 15%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%);
  background-size:
    10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%,
    10% 10%, 15% 15%, 10% 10%, 18% 18%;
  background-position:
    5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%,
    25% 90%, 40% 90%, 55% 90%, 70% 90%;
  animation: u1_topBubbles .6s ease-in-out forwards;
}
@keyframes u1_topBubbles{
  50%{
    background-position:
      0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%,
      22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100%{
    background-position:
      0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%,
      22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size:
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
      0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.bubbly-pop-btn.is-bubbly-animate .bubbly-layer::after{
  bottom:-70%;
  opacity:1;
  background-image:
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #8a2be2 20%, transparent 30%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #8a2be2 15%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%),
    radial-gradient(circle, #8a2be2 20%, transparent 20%);
  background-size:
    15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
  background-position:
    10% 0%, 30% 10%, 55% 0%, 70% 0%, 85% 10%, 90% 30%, 70% 40%;
  animation: u1_bottomBubbles .6s ease-in-out forwards;
}
@keyframes u1_bottomBubbles{
  50%{
    background-position:
      0% 80%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 20%;
  }
  100%{
    background-position:
      0% 90%, 20% 110%, 45% 90%, 60% 130%, 75% 100%, 95% 90%, 110% 40%;
    background-size:
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

@media (prefers-reduced-motion: reduce){
  .bubbly-pop-btn .bubbly-layer::before,
  .bubbly-pop-btn .bubbly-layer::after{
    animation: none !important;
  }
}
.guided-astuces-body { display:flex; flex-direction:column; gap:16px; }
 .guided-astuces-intro { margin:0; font-size:16px; line-height:1.5; color:#4b5563; }
.guided-astuces-intro { font-weight:600; }
.guided-astuces-preview { display:flex; flex-direction:column; }
.guided-astuces-preview-bubble { background:rgba(138,43,226,0.1); color:#5b21b6; border:1px solid #8a2be2; border-radius:22px; padding:14px 24px 19px; font-size:15px; line-height:1.6; min-height:48px; box-shadow:0 2px 6px rgba(138,43,226,0.2); word-break:break-word; }
.guided-astuces-preview-bubble[data-empty="1"] { color:#9ca3af; }
.userone-mode-choice-custom .composer-mode-chip,
.userone-mode-choice-custom .composer-mode-chip:hover,
.userone-mode-choice-custom .composer-mode-chip:focus-visible,
.userone-mode-choice-custom .composer-mode-chip:active,
.userone-mode-choice-custom .composer-mode-chip.is-active,
.userone-mode-choice-custom .composer-mode-chip[aria-pressed="true"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  border-radius:999px;
  border:1px solid #8a2be2;
  background:transparent;
  color:#5b21b6;
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:7px 14px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease;
  flex-shrink:0;
  box-shadow:none;
  text-transform:capitalize;
}
.userone-mode-choice-custom .composer-mode-chip:hover {
  background:rgba(138,43,226,0.1);
  box-shadow:0 4px 12px rgba(138,43,226,0.2);
}
.userone-mode-choice-custom .composer-mode-chip:focus-visible {
  background:rgba(138,43,226,0.1);
  box-shadow:0 4px 12px rgba(138,43,226,0.2);
  outline:2px solid rgba(138,43,226,0.35);
  outline-offset:2px;
}
.userone-mode-choice-custom .composer-mode-chip:active {
  transform:translateY(1px);
}
.userone-mode-choice-custom .composer-mode-chip.is-active,
.userone-mode-choice-custom .composer-mode-chip[aria-pressed="true"] {
  background:rgba(138,43,226,0.18);
  color:#421475;
  border-color:#8a2be2;
  box-shadow:0 0 0 2px rgba(138,43,226,0.18);
}
.userone-mode-choice-custom .composer-mode-chip[aria-pressed="true"]:hover {
  box-shadow:0 6px 16px rgba(138,43,226,0.25);
}
.userone-mode-choice-custom .userone-mode-choice-preview{display:none;}
.guided-astuces-actions { display:flex; justify-content:flex-end; gap:8px; }
.profile-preference { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#f9fafb; flex-wrap:wrap; }
.profile-preference-text { display:flex; flex-direction:column; gap:4px; color:#111827; flex:1 1 200px; }
.profile-preference-title { font-weight:600; font-size:13px; line-height:1.3; }
.profile-preference-subtitle { font-size:12px; color:#6b7280; line-height:1.3; }
.profile-preference-toggle { position:relative; width:64px; height:36px; flex-shrink:0; cursor:pointer; user-select:none; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; border-radius:999px; }
.profile-preference-toggle-input { appearance:none; -webkit-appearance:none; -moz-appearance:none; position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.profile-preference-toggle-track { position:relative; width:64px; height:36px; border-radius:999px; background:#c7c9cf; pointer-events:none; transition:background 180ms ease, box-shadow 180ms ease; }
.profile-preference-toggle-knob { position:absolute; top:5px; left:5px; width:26px; height:26px; border-radius:999px; background:#ffffff; box-shadow:0 3px 10px rgba(0,0,0,.22); transition:transform 180ms ease; }
.profile-preference-toggle-input:checked + .profile-preference-toggle-track { background:#22c55e; }
.profile-preference-toggle-input:checked + .profile-preference-toggle-track .profile-preference-toggle-knob { transform:translateX(28px); }
.profile-preference-toggle-input:focus-visible + .profile-preference-toggle-track { box-shadow:0 0 0 4px rgba(59,130,246,.25); }
.nm2-modal .dr-modal-card{display:none !important;}
.nm2-modal{
  --nm2-text:#111827;
  --nm2-muted:#6b7280;
  --nm2-muted2:#9ca3af;
  --nm2-border:#e6e7ea;
  --nm2-hover:#f3f4f6;
  --nm2-selected:#f1f2f4;
  --nm2-accent:#7c3aed;
  --nm2-fs-title:32px;
  --nm2-fs-nav:18px;
  --nm2-fs-row:18px;
  --nm2-fs-sub:14px;
}
.nm2-shell{
  width:min(860px, calc(100vw - 48px));
  height:min(520px, calc(100vh - 48px));
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  display:flex;
  overflow:hidden;
}
.nm2-rail{
  width:268px;
  flex:0 0 268px;
  border-right:1px solid var(--nm2-border);
  background:#fbfbfc;
  padding:14px 10px;
}
.nm2-rail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 6px 10px 6px;
}
.nm2-rail-title{font-size:12px;color:var(--nm2-muted2);letter-spacing:.02em;}
.nm2-close,.nm2-icon-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#6b7280;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nm2-close:hover,.nm2-icon-btn:hover{background:var(--nm2-hover);border-color:rgba(0,0,0,.03);}
.nm2-nav{display:flex;flex-direction:column;gap:4px;}
.nm2-nav button{
  width:100%;
  border:0;
  background:transparent;
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--nm2-fs-nav);
  color:var(--nm2-text);
  line-height:1.25;
}
.nm2-nav button:hover{background:var(--nm2-hover);}
.nm2-nav button[aria-selected="true"]{background:var(--nm2-selected);font-weight:600;}
.nm2-ico{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#374151;
}
.nm2-ico svg{
  width:18px;
  height:18px;
  display:block;
}
.nm2-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  min-width:0;
  background:#fff;
  padding:0 !important;
}
.nm2-header{
  padding:18px 22px 10px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nm2-header-left{display:flex;align-items:center;gap:10px;min-width:0;}
.nm2-header h1{
  margin:0;
  font-size:var(--nm2-fs-title);
  font-weight:650;
  letter-spacing:-0.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nm2-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  padding:6px 22px 22px 22px;
  overflow:auto;
  margin:0;
}
.nm2-panel{
  width:100%;
  margin:0;
  align-self:stretch;
  padding:0 !important;
}
.nm2-panel[hidden]{display:none !important;}
.nm2-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--nm2-border);
}
.nm2-row:last-child{border-bottom:0;}
.nm2-row-stack{display:block;}
.nm2-nav-row{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  font:inherit;
  font-size:var(--nm2-fs-row);
  font-weight:600;
  color:var(--nm2-text);
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--nm2-border);
}
.nm2-nav-row:hover{background:rgba(0,0,0,.015);}
.nm2-shortcuts-title{
  font-size:var(--nm2-fs-row);
  font-weight:700;
  color:var(--nm2-text);
  margin:6px 0 10px;
}
.nm2-shortcut-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--nm2-border);
}
.nm2-kbd{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  min-width:140px;
  text-align:center;
  font-size:var(--nm2-fs-sub);
  font-weight:650;
  color:var(--nm2-text);
  flex:0 0 auto;
  margin-left:16px;
}
.nm2-shortcut-desc{
  font-size:var(--nm2-fs-row);
  font-weight:600;
  color:var(--nm2-text);
  text-align:left;
  flex:1 1 auto;
}
.nm2-shortcuts-back{
  margin-top:18px;
  background:transparent;
  border:0;
  font:inherit;
  font-size:16px;
  font-weight:600;
  color:#6b7280;
  cursor:pointer;
}
.nm2-shortcuts-back:hover{color:#374151;}
.nm2-plan-row{
  position:relative;
  align-items:flex-start;
}
.nm2-plan-left{
  max-width:520px;
  min-width:0;
}
.nm2-plan-sub{
  margin-top:8px;
  font-size:var(--nm2-fs-sub);
  color:var(--nm2-muted2);
  line-height:1.45;
}
.nm2-plan-actions{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  min-width:160px;
}
.nm2-manage-btn{
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  font-size:var(--nm2-fs-row);
  font-weight:650;
  color:var(--nm2-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.nm2-manage-btn:hover{background:rgba(0,0,0,.02);}
.nm2-caret{
  display:inline-flex;
  width:14px;
  justify-content:center;
  color:#6b7280;
  transform:translateY(-1px);
}
.nm2-manage-menu{
  position:absolute;
  top:46px;
  right:0;
  min-width:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  padding:10px;
  z-index:50;
}
.nm2-manage-menu[hidden]{display:none !important;}
.nm2-manage-item{
  width:100%;
  border:0;
  background:transparent;
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  font:inherit;
  font-size:var(--nm2-fs-row);
  font-weight:600;
  color:var(--nm2-text);
  text-align:left;
}
.nm2-manage-item:hover{background:rgba(0,0,0,.04);}
.nm2-manage-ico{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  opacity:.75;
}
.nm2-manage-sep{
  height:1px;
  background:rgba(0,0,0,.08);
  margin:8px 6px;
}
.nm2-row-title-wrap{display:flex;flex-direction:column;gap:4px;min-width:0;}
.nm2-row-title{font-size:var(--nm2-fs-row);font-weight:600;color:var(--nm2-text);line-height:1.35;letter-spacing:-0.01em;}
.nm2-row-subtitle{font-size:var(--nm2-fs-sub);color:var(--nm2-muted);line-height:1.4;}
.nm2-row-label{font-size:var(--nm2-fs-sub);color:var(--nm2-muted2);line-height:1.3;}
.nm2-row-value{font-size:var(--nm2-fs-row);font-weight:650;color:var(--nm2-text);line-height:1.35;margin-top:8px;}
.nm2-row-value-muted{font-weight:600;color:var(--nm2-muted2);}
.nm2-input{
  width:100%;
  margin-top:10px;
  font-size:var(--nm2-fs-row);
  font-weight:450;
  color:var(--nm2-text);
  border:1px solid var(--nm2-border);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
}
.nm2-input:focus{
  border-color:rgba(124,58,237,.75);
  box-shadow:0 0 0 3px rgba(124,58,237,.14);
}
.nm2-index-item{
  width:100%;
  border:0;
  background:transparent;
  padding:18px 0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--nm2-border);
  color:var(--nm2-text);
  font-size:var(--nm2-fs-row);
  font-weight:600;
  text-align:left;
  line-height:1.35;
}
.nm2-index-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.nm2-index-item:hover{background:rgba(0,0,0,.015);}
.nm2-index-item:last-child{border-bottom:0;}
.nm2-chev{color:var(--nm2-muted2);font-size:22px;line-height:1;}
/* Match mockup compact switch ratio inside the revamped modal only */
.nm2-modal .profile-preference-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:44px;
  height:26px;
  border-radius:999px;
}
.nm2-modal .profile-preference-toggle-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.nm2-modal .profile-preference-toggle-track{
  width:44px;
  height:26px;
  border-radius:999px;
  background:#e5e7eb;
  border:1px solid #e5e7eb;
}
.nm2-modal .profile-preference-toggle-knob{
  top:50%;
  left:3px;
  width:20px;
  height:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.14);
  transform:translateY(-50%);
}
.nm2-modal .profile-preference-toggle-input:checked + .profile-preference-toggle-track{
  background:var(--nm2-accent);
  border-color:rgba(124,58,237,.35);
}
.nm2-modal .profile-preference-toggle-input:checked + .profile-preference-toggle-track .profile-preference-toggle-knob{
  transform:translate(18px, -50%);
}
.nm2-modal .profile-preference-toggle-input:focus-visible + .profile-preference-toggle-track{
  box-shadow:0 0 0 3px rgba(124,58,237,.2);
}
@media (max-width: 860px){
  .nm2-shell{height:min(560px, calc(100vh - 24px));}
  .nm2-modal{
    --nm2-fs-title:26px;
    --nm2-fs-nav:16px;
    --nm2-fs-row:16px;
    --nm2-fs-sub:13px;
  }
}
@media (max-width: 640px){
  .nm2-shell{
    width:100vw;
    height:100vh;
    max-width:100vw;
    max-height:100vh;
    border-radius:0;
    border:0;
  }
  .nm2-rail{display:none;}
  .nm2-body{padding:6px 18px 22px 18px;}
  .nm2-header{padding:16px 18px 8px 18px;}
  .nm2-modal{--nm2-fs-title:30px;}
  .nm2-plan-row{display:block;}
  .nm2-plan-actions{margin-top:10px;justify-content:flex-start;}
  .nm2-manage-menu{left:0;right:auto;min-width:min(320px, calc(100vw - 48px));}
}
.answer-feedback-body{ gap:12px; }
.answer-feedback-field{ display:flex; flex-direction:column; gap:6px; }
.answer-feedback-label{ font-weight:600; font-size:14px; color:#111827; }
.answer-feedback-textarea{ width:100%; min-height:120px; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; font-size:14px; line-height:1.4; resize:vertical; font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); background:#fff; color:#111827; }
.answer-feedback-textarea::placeholder{ color:#9ca3af; }
.answer-feedback-textarea:focus{ outline:none; border-color:#111827; box-shadow:0 0 0 3px rgba(17,24,39,0.15); }
.answer-feedback-toggles{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.answer-feedback-toggle{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; background:#fff; }
.answer-feedback-toggle:hover{ border-color:#d1d5db; background:#f9fafb; }
.answer-feedback-toggle-input{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:18px; height:18px; border-radius:4px; border:1px solid #d1d5db; display:grid; place-items:center; background:#fff; margin-top:2px; transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; font-weight:600; line-height:1; }
.answer-feedback-toggle-input::after{ content:"✓"; color:#111827; font-size:13px; font-weight:600; opacity:0; transition:opacity .12s ease; transform:translateY(-0.5px); }
.answer-feedback-toggle-input:checked{ background:#fff; border-color:#111827; }
.answer-feedback-toggle-input:checked::after{ opacity:1; }
.answer-feedback-toggle-input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,0.25); }
.answer-feedback-toggle span{ font-size:14px; color:#111827; font-weight:500; line-height:1.4; }
.answer-feedback-submit{ align-self:flex-start; margin-top:4px; }
.answer-feedback-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:#111827; color:#fff; padding:14px 20px; border-radius:12px; display:flex; align-items:center; gap:12px; box-shadow:0 12px 30px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:10010; font-size:13px; font-weight:300; line-height:1.45; }
.answer-feedback-toast.visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.answer-feedback-toast[hidden]{ display:none; }
.answer-feedback-toast-close{ background:transparent; border:0; color:#fff; font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; }
.answer-feedback-toast-close:hover{ background:rgba(255,255,255,0.12); }

.composer-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); background:#111827; color:#ffffff; padding:12px 18px; border-radius:12px; font-size:13px; line-height:1.45; box-shadow:0 16px 40px rgba(15,23,42,0.25); opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; z-index:10020; font-weight:400; text-align:center; }
.composer-toast.is-visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.composer-toast[hidden]{ display:none !important; }
.composer-toast.is-error{ background:#b91c1c; color:#ffffff; }

@media (max-width: 640px){
  .answer-feedback-toast{
    left:50%;
    right:auto;
    bottom:24px;
    transform:translate(-50%, 20px);
    border-radius:12px;
    justify-content:space-between;
    width:min(calc(100vw - 32px), 420px);
    max-width:100%;
    padding:14px 18px;
  }
  .answer-feedback-toast.visible{ transform:translate(-50%, 0); }
}

@media (max-width: 640px){
  .composer-toast{ width:min(calc(100vw - 32px), 420px); max-width:100%; bottom:18px; left:50%; transform:translate(-50%, 16px); }
  .composer-toast.is-visible{ transform:translate(-50%, 0); }
}

/* Feedback modal stars */
.rating-stars { display:flex; gap:10px; justify-content:center; align-items:center; margin:12px 0; }
.rating-star { position:relative; width:44px; height:44px; cursor:pointer; }
.rating-star .star { position:absolute; inset:0; font-size:44px; line-height:44px; display:block; text-align:center; user-select:none; }
.rating-star .star.empty { color:#e5e7eb; }
.rating-star .star.fill { color:#fbbf24; width:0%; overflow:hidden; }
.feedback-input { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:10px; font: inherit; }
.feedback-textarea { width:100%; min-height:3.2em; resize:vertical; border:1px solid #e5e7eb; border-radius:8px; padding:10px; font: inherit; }
.feedback-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* Offer modal cards */
.offer-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 771px){ .offer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){
  .offer-grid { grid-template-columns: 1fr; }
}
.offer-card { border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff; text-align:center; display:flex; flex-direction:column; height:100%; }
.offer-img { width:100%; height:auto; max-height:90px; object-fit:contain; }
.offer-head { display:flex; align-items:stretch; gap:12px; }
.offer-head .offer-img { width:90px; flex:0 0 auto; }
.offer-text {
  margin-top:0;
  font-size:14px;
  color:#111827;
  font-weight:500;
  line-height:1.35;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  align-self: stretch;
  margin: 18px 0;
}
.offer-name { font-weight:900; font-size:24px; margin-top:4px; }
.offer-desc { margin-top:6px; }
.offer-desc .offer-price { display:block; margin-top:4px; }
.offer-validity { margin-top:6px; color:#374151; font-weight:600; }
.offer-actions {
  margin-top:auto;
  display:flex;
  flex-direction: column;
  gap: 8px;
  justify-content:center;
  align-items: stretch;
  padding-bottom:5px;
}

/* Center the Offer modal title while keeping close button on the right */
#offer-modal .dr-modal-card { width:min(680px,95vw); max-height:90vh; display:flex; flex-direction:column; }
#offer-modal .dr-modal-header { justify-content: center; position: relative; }
#offer-modal .dr-modal-title { text-align: center; margin: 0 auto; }
#offer-modal .dr-modal-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
#qr-code { width: 220px; height: 220px; }
#qr-code img, #qr-code canvas { width: 220px; height: 220px; display: block; }
#feedback-modal .dr-modal-header { justify-content: center; position: relative; }
#feedback-modal .dr-modal-title { text-align: center; margin: 0 auto; }
#feedback-modal .dr-modal-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  #feedback-modal { display: flex; align-items: stretch; justify-content: center; padding: 0; }
  #feedback-modal .dr-modal-card { width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: 0; display: flex; flex-direction: column; }
  #feedback-modal .dr-modal-header { padding-top: calc(12px + env(safe-area-inset-top)); }
  #feedback-modal .dr-modal-body { flex: 1; overflow: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
/* Make Offer modal scrollable on small screens */
#offer-modal .dr-modal-body { overflow: auto; }
@media (max-width: 640px) {
  #offer-modal .dr-modal-card { width: 100vw; max-width: 100vw; border-radius: 0; border: 0; height: 100vh; }
}

/* Guide content defaults */
#guide-content { color:#111827; font-size:15px; line-height:1.6; }
/* Guide modal action button (auto-open acknowledgment) */
#guide-actions { display:flex; justify-content:flex-end; margin-top:6px; }
#guide-ack-btn[disabled],
#guide-ack-btn.is-disabled { background:#e5e7eb; color:#6b7280; border-color:#e5e7eb; cursor:not-allowed; box-shadow:none; }
#guide-modal.guide-locked .dr-modal-close { display:none; }
/* Default font + line-height */
#drastuce-chat-root { font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: normal; line-height: 1.6; }
#drastuce-chat-root * { font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: normal; }
#drastuce-chat-root p { line-height: 1.75; }
/* Mermaid diagrams */
#drastuce-chat-root .mermaid { display:block; width:100%; max-width:100%; overflow-x:auto; margin:12px 0; flex:0 0 100%; }
#drastuce-chat-root .mermaid svg { display:block; }
#drastuce-chat-root .mermaid-stack { display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%; }
/* Ensure headings and spacing match editor expectations (Titre 1–6) */
#guide-content h1,
#guide-content h2,
#guide-content h3,
#guide-content h4,
#guide-content h5,
#guide-content h6 { color:#111827; font-weight:700; line-height:1.3; margin:0 0 10px !important; }
/* Typographic scale approximating WP editor */
#guide-content h1 { font-size:32px !important; margin-top:24px !important; }
#guide-content h2 { font-size:28px !important; margin-top:22px !important; }
#guide-content h3 { font-size:22px !important; margin-top:20px !important; }
#guide-content h4 { font-size:18px !important; margin-top:18px !important; }
#guide-content h5 { font-size:16px !important; margin-top:16px !important; }
#guide-content h6 { font-size:15px !important; margin-top:14px !important; font-weight:600; }
/* Paragraphs and lists */
#guide-content p { margin:0 0 12px !important; }
#guide-content ul,
#guide-content ol { margin:0 0 12px 20px !important; padding:0; }
#guide-content li { margin: 0 0 6px; }
/* Blockquote */
#guide-content blockquote { margin: 0 0 12px; padding-left:12px; border-left:3px solid #e5e7eb; color:#374151; }
/* Links */
#guide-content a { color:var(--theme-link-color); text-decoration:underline; }
#chat-container .ai a { color:var(--theme-link-color); text-decoration:underline; font-weight:600; }
#chat-container .ai a[href="#offer"] { color:#6495ed; }
/* Horizontal rule */
#guide-content hr { border:0; border-top:1px solid #e5e7eb; margin:16px 0; }

/* Buttons used in popups/modals */
.dr-btn { 
  font-family: var(--default-font-family, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  text-transform: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.dr-btn:active { transform: translateY(1px); }
.dr-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17,24,39,.2); }
.dr-btn-primary { background:#111827; color:#fff; border-color:#111827; }
.dr-btn-primary:hover { background:#0d1422; border-color:#0d1422; }
.dr-btn-secondary { background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }
.dr-btn-secondary:hover { background:#e5e7eb; border-color:#d1d5db; color:#4b5563; }

.dr-pack-row { font-size:14px; color:#111827; }

/* Make Pack section appear clickable */
#section-pack, #section-search { cursor:pointer; user-select:none; }
#section-pack:hover, #section-search:hover { background:#f3f4f6; }
.menu-legal-link { display:block; text-decoration:none; color:#374151; }
.menu-legal-link:hover { background:#f3f4f6; color:#111827; }
.trash-btn { background:transparent; border:none; color:#6b7280; padding:6px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.trash-btn:hover { background:#f3f4f6; color:#6b7280; }
.trash-img { width:18px; height:18px; display:block; object-fit:contain; flex:0 0 18px; }

/* Icons for specific sidebar items */
#new-convo, #logout-btn, #section-pack, #section-search, #section-guide { position: relative; padding-left: 40px; }
#new-convo::before, #logout-btn::before, #section-pack::before, #section-search::before, #section-guide::before { content: ""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; background-repeat:no-repeat; background-size: contain; opacity:0.95; }
#new-convo::before { background-image: url('new chat.png'); }
#section-guide::before { background-image: url('guide.png'); }
#logout-btn::before { background-image: url('sign out.png'); }
#section-pack::before { background-image: url('diamond.png'); }
/* Rechercher un chat icon */
#section-search::before { background-image: url('search.png'); }
/* Profile button icon */
#profile-btn::before { display: none; }
#profile-btn.has-avatar::before { background-image: none; }
#profile-btn { gap:10px; padding-left:0; }
#profile-btn .profile-avatar { position:static; left:auto; top:auto; transform:none; display:inline-flex; flex-shrink:0; width:32px !important; height:32px !important; border-radius:50%; background:#e5e7eb center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
#profile-btn .profile-details { display:flex; flex-direction:column; align-items:flex-start; gap:6px; flex:1; min-width:0; }
#profile-btn .profile-info { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; min-height:32px; gap:2px; line-height:1.2; flex:1; min-width:0; }
#profile-btn .profile-upgrade { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; text-align:center; border-radius:9999px; background:var(--theme-accent,#00c853); color:#fff; font-size:12px; font-weight:600; line-height:1; border:1px solid var(--theme-accent,#00c853); white-space:nowrap; flex-shrink:0; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor:pointer; }
#profile-btn .profile-upgrade:hover { background:var(--theme-accent-dark,#0d652d); border-color:var(--theme-accent-dark,#0d652d); }
#profile-btn .profile-upgrade[hidden] { display:none !important; }

/* Resize the main four sidebar icons: 20% bigger (keep ratios) */
#new-convo::before,
#section-search::before,
#section-guide::before,
#section-pack::before { width:16px; height:16px; background-size: contain; }

/* Profile popup styling */
.profile-popup[hidden] { display:none !important; }
.profile-popup { position: fixed; left: 0; width: calc(min(270px, 63vw) - 20px); background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:10004; padding:8px 0; }
/* sit above the profile row inside the side menu */
.side-menu.open ~ .profile-popup { display:block; }
.profile-item { position:relative; width:100%; text-align:left; padding:10px 12px 10px 44px; background:#fff; border:0; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; }
.profile-item:hover { background:#f8fafc; }
#convo-delete { position:relative; }
#convo-delete::before { content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url('trash icon.png') no-repeat center center; background-size: contain; }
.profile-item-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:inherit; }
.profile-item-icon svg { width:100%; height:100%; display:block; }
.profile-item-label { flex:1; display:inline-flex; align-items:center; }

/* Unify sidebar item typography and spacing */
.side-content .menu-item,
.side-content .menu-section,
.side-content .menu-sub,
.side-content .convo-item {
  color:#000;
  font-size:14px;
  font-weight:400;
  text-transform:none;
}

/* Chat scroll area (never forces page scroll) */
#chat-container { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; padding-bottom:0; position:relative; height:100%; }

/* Messages */
#chat-container .user {
  background:var(--theme-user-bg);
  color:#333;
  align-self:flex-end;
  padding:12px 16px;
  border-radius:22px;
  max-width:75%;
  line-height:1.66;
  font-size:15px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  font-weight:400;
}
#chat-container .ai { align-self:flex-start; color:#333; font-size:16px; line-height:1.9; max-width:75%; overflow-x:auto; overscroll-behavior-x:contain; overscroll-behavior-y:auto; }
#chat-container .ai ul,
#chat-container .ai ol { margin-bottom: 1em; }
#chat-container .ai li > p { margin: 0; }
#chat-container .ai li { margin-bottom: 1em; }
#chat-container .inline-feedback{
  margin-top:10px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  max-width:100%;
}
#chat-container .inline-feedback-question{
  font-size:14px;
  font-weight:600;
  color:#111827;
  margin-bottom:8px;
  transition: opacity .14s ease;
}
#chat-container .inline-feedback-question.inline-feedback-fade{
  opacity:0;
}
#chat-container .inline-feedback-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  transition: opacity .2s ease, transform .2s ease;
}
#chat-container .inline-feedback-btn{
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
  background:#f9fafb;
  color:#111827;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:38px;
}
#chat-container .inline-feedback-btn.is-selected{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
#chat-container .inline-feedback-form{
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease, margin-top .22s ease;
  max-height:0;
  overflow:hidden;
}
#chat-container .inline-feedback:not(.inline-feedback-answered) .inline-feedback-form{
  max-height:0;
  margin-top:0;
}
#chat-container .inline-feedback.inline-feedback-answered .inline-feedback-actions{
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  height:0;
  overflow:hidden;
  margin:0;
}
#chat-container .inline-feedback.inline-feedback-answered .inline-feedback-form{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  max-height:200px;
  margin-top:10px;
  overflow:visible;
}
#chat-container .inline-feedback-prompt{
  font-size:13px;
  color:#374151;
}
#chat-container .inline-feedback-input-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
#chat-container .inline-feedback-input{
  flex:1;
  min-width:200px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:8px 10px;
  font-size:14px;
  font-family: inherit;
  outline-offset:2px;
}
#chat-container .inline-feedback-send{
  border:0;
  background:#111827;
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#chat-container .inline-feedback-send:disabled{
  opacity:0.7;
  cursor:default;
}
#chat-container .ai.user-one-ai{ display:flex; flex-direction:column; gap:10px; }
#chat-container .ai.user-one-ai .reasoning-content{
  display:block;
  font-size:16px;
  line-height:1.9;
  color:#333;
}
#chat-container .ai.user-one-ai .reasoning-content strong,
#chat-container .ai.user-one-ai .reasoning-content b{
  font-weight:600;
}
#chat-container .ai .reasoning-heading{
  font-size:15px;
  color:#6f7385;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}
#chat-container .ai .reasoning-heading.turbo-mode-label{
  cursor:default;
}
#chat-container .ai .reasoning-title{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#chat-container .ai .reasoning-title .thinking-base{
  color:inherit;
}
#chat-container .ai .reasoning-title .thinking-shine{
  color:transparent;
}
#chat-container .ai .reasoning-toggle{
  display:inline-flex;
  width:16px;
  height:16px;
  color:inherit;
  transition:transform .2s ease;
}
#chat-container .ai .reasoning-toggle svg{
  width:100%;
  height:100%;
  fill:currentColor;
  display:block;
}
#chat-container .ai .reasoning-body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  margin-top:0;
}
#chat-container .ai .reasoning-loader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0 2px;
  color:#6f7385;
  font-size:14px;
}
#chat-container .ai[data-reasoning-expanded="1"] .reasoning-body{
  max-height:2000px;
  opacity:1;
  margin-top:4px;
}
#chat-container .ai[data-reasoning-expanded="1"] .reasoning-toggle{
  transform:rotate(180deg);
}
#chat-container .ai.pre-etape-mode{
  color:#1f2933;
  opacity:1;
}
#chat-container .ai.pre-etape-mode *{
  color:inherit;
}
#chat-container .ai .pre-etape7{
  color:#1f2933;
  opacity:1;
  margin-bottom:12px;
}
#chat-container .ai .pre-etape7 *{
  color:inherit;
}
.ai-actions { margin-top:4px; display:flex; align-items:center; gap:0; }
.icon-btn{ background:transparent; border:none; padding:5px; border-radius:6px; cursor:pointer; color:#6b7280; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; }
.icon-btn:hover{ color:var(--theme-accent-dark); background:#f3f4f6; }
.copy-action-button{ padding:0; width:34px; height:34px; border-radius:8px; transition:color .15s ease, background-color .15s ease; }
.copy-action-button:hover{ background:#f3f4f6; color:var(--theme-accent-dark); }
.copy-action-button .copy-action-icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; }
.copy-action-button svg{ width:24px; height:24px; display:block; }
.feedback-btn{ transition: color .15s ease, background-color .15s ease, opacity .25s ease, width .25s ease, height .25s ease, margin .25s ease, padding .25s ease, transform .25s ease; overflow:hidden; }
.feedback-btn{ width:34px; height:34px; padding:5px; }
.feedback-btn img,
.feedback-btn svg{ width:24px; height:24px; pointer-events:none; object-fit:contain; }
.feedback-btn.is-active{ color:var(--theme-accent-dark); }
.feedback-btn:hover{ color:var(--theme-accent-dark); }
.icon-btn.feedback-btn:hover,
.icon-btn.feedback-btn:focus-visible{ background:#f3f4f6; color:var(--theme-accent-dark); }
.feedback-btn.is-collapsed{ opacity:0; width:0; height:0; margin:0; padding:0; transform:scale(0.7); }
.feedback-btn.is-collapsed svg{ display:none; }

/* Render markdown tables with clear borders + responsive overflow */
#chat-container .ai table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  margin:12px 0;
  font-size:14px;
  line-height:1.5;
  background:#fff;
}
#chat-container .ai table caption {
  caption-side:bottom;
  font-size:13px;
  color:#6b7280;
  padding-top:8px;
  text-align:left;
}
#chat-container .ai table th,
#chat-container .ai table td {
  border:1px solid rgba(15,23,42,0.16);
  padding:8px 12px;
  text-align:left;
  vertical-align:top;
}
#chat-container .ai table th {
  background:rgba(138,43,226,0.08);
  color:#111827;
  font-weight:600;
}
#chat-container .ai table tbody tr:nth-child(even) td {
  background:rgba(15,23,42,0.03);
}

.ai-actions .astuces-btn{ margin-left:0; width:34px; height:34px; padding:5px; }
.ai-actions .astuces-btn img{
  width:25px;
  height:24px;
  object-fit:contain;
  pointer-events:none;
  -webkit-filter:drop-shadow(0 0 0 rgba(255,255,255,0.95)) drop-shadow(0 0 3px rgba(255,255,255,0.55));
          filter:drop-shadow(0 0 0 rgba(255,255,255,0.95)) drop-shadow(0 0 3px rgba(255,255,255,0.55));
}
#chat-container .astuces-block{ max-width:100%; width:100%; align-self:stretch; }
#chat-container .astuces-body{ display:flex; flex-direction:column; gap:8px; }
#chat-container .astuces-block .astuces-content{ max-width:100%; width:100%; }
#chat-container .astuces-thinking{ max-width:100%; width:100%; }
#chat-container .astuces-actions{ justify-content:flex-start; }
#chat-container .astuces-version-buttons{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; }
.astuces-version-btn{ appearance:none; border:0; border-radius:999px; background:rgba(15,23,42,0.06); color:#0f172a; font-size:13px; font-weight:600; padding:6px 12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:36px; transition:background .18s ease, color .18s ease, box-shadow .18s ease; text-decoration:none !important; }
.astuces-version-btn:hover,
.astuces-version-btn:focus,
.astuces-version-btn:active,
.astuces-version-btn:focus-visible,
.astuces-version-btn:visited{ text-decoration:none !important; }
.astuces-version-btn:hover{ background:rgba(15,23,42,0.1); }
.astuces-version-btn:focus-visible{ outline:2px solid rgba(15,23,42,0.18); outline-offset:2px; }
.astuces-version-btn.is-active{ background:var(--theme-active-convo-bg); color:var(--theme-user-text); box-shadow:inset 0 0 0 1px var(--theme-user-border); }
.astuces-version-btn:disabled{ opacity:0.6; cursor:default; }
.astuces-version-spinner{ width:16px; height:16px; border-radius:9999px; background: linear-gradient(135deg, #ff4db8 0%, #8a2be2 50%, #ff4db8 100%); animation: thinking-dot-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite; display:inline-block; }
#chat-container .astuces-version-panels{ display:flex; flex-direction:column; gap:14px; width:100%; }
#chat-container .astuces-version-panel{ display:flex; flex-direction:column; gap:8px; }
#chat-container .astuces-version-panel[hidden]{ display:none !important; }
.astuces-version-label{ font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#6b7280; }
/* Align user message copy button to the right */
.user + .ai-actions { justify-content: flex-end; }

@media (max-width: 600px) {
  #chat-container .msg-row { width: 100%; max-width: 100%; margin: 0; }
  #chat-container .msg-row.ai-row,
  #chat-container .msg-row.user-row { align-items: stretch; }
  #chat-container .ai,
  #chat-container .thinking { max-width: 100%; width: 100%; align-self: stretch; }
  #chat-container .ai-actions { width: 100%; max-width: 100%; margin: 0; }
}

/* Footer (scoped to plugin, prevent theme collisions) */
#drastuce-chat-root footer { display:flex; flex-direction:column; padding:12px 12px max(8px, env(safe-area-inset-bottom)) 12px; background:#fff; border-top:0; min-height:64px; align-items:stretch; justify-content:flex-end; gap:4px; flex-shrink:0; position:relative; z-index:1; }
/* Enforce vertical stacking order globally so pre-hint (guest modal) sits above the input bar */
#drastuce-chat-root footer { display:flex !important; flex-direction:column !important; align-items:stretch !important; }
#drastuce-chat-root footer #empty-prompt{ order:1 !important; }
#drastuce-chat-root footer #pre-hint{ order:2 !important; }
#drastuce-chat-root footer .input-row{ order:3 !important; }
.input-row { display:flex; align-items:center; width: 100%; position:relative; }
.input-row { flex: 0 0 auto; max-width: var(--composer-max-width, 630px); margin: 0 auto; }
#drastuce-chat-root .composer-bar { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; flex:1 1 auto; min-height:56px; padding:12px 14px 16px; border-radius:28px; background:var(--composer-bg, #ffffff); border:1px solid var(--composer-border, rgba(15,23,42,0.08)); box-shadow:0 8px 24px rgba(15,23,42,0.08); cursor:text; }
.composer-bar.composer-bar-dragover { border-color:var(--theme-accent, #0f172a); box-shadow:0 0 0 2px rgba(15,23,42,0.12), 0 8px 24px rgba(15,23,42,0.12); }
.composer-footer-row { display:flex; align-items:center; gap:8px; width:100%; }
.composer-bar.composer-bar-multiline { padding-top:16px; padding-bottom:14px; }
.composer-bar.composer-bar-multiline .composer-footer-row { align-items:flex-end; flex-wrap:wrap; row-gap:10px; }
.composer-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; }
#composer-mode-buttons { display:flex; align-items:center; flex:0 0 auto; gap:8px; margin-right:4px; flex-wrap:wrap; row-gap:6px; padding-bottom:2px; }
#composer-mode-buttons:empty { display:none; }
.composer-mode-chip,
.mode-versions-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; border-radius:999px; border:1px solid var(--theme-accent, #0f172a); background:transparent; color:var(--theme-accent-dark, #0f172a); font-size:13px; font-weight:600; line-height:1; padding:7px 14px; cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease; flex-shrink:0; }
.composer-mode-chip:hover,
.mode-versions-btn:hover { background:var(--accent-surface, rgba(15,23,42,0.08)); box-shadow:0 4px 12px rgba(15,23,42,0.1); }
.composer-mode-chip:focus-visible,
.mode-versions-btn:focus-visible { outline:2px solid rgba(15,23,42,0.2); outline-offset:2px; }
.composer-mode-chip:active,
.mode-versions-btn:active { transform:translateY(1px); }
.composer-mode-chip.is-active,
.composer-mode-chip[aria-pressed="true"] { background:var(--accent-surface, rgba(15,23,42,0.12)); color:var(--theme-accent-dark, #0f172a); box-shadow:0 0 0 2px var(--accent-surface, rgba(15,23,42,0.12)); }
.composer-mode-chip.is-active,
.composer-mode-chip[aria-pressed="true"] { border-color:var(--theme-accent, #0f172a); }
.composer-mode-chip[aria-pressed="true"]:hover { box-shadow:0 6px 16px rgba(15,23,42,0.14); }
.mode-versions-btn { padding:7px 14px; min-width:0; gap:6px; }
.mode-versions-btn[hidden] { display:none !important; }
.mode-versions-btn.is-open,
.mode-versions-btn[aria-expanded="true"] { background:var(--accent-surface, rgba(15,23,42,0.12)); box-shadow:0 6px 16px rgba(15,23,42,0.14); }
.mode-versions-icon { width:18px; height:18px; flex:0 0 auto; color:currentColor; }
.mode-versions-count { font-size:12px; font-weight:600; letter-spacing:-0.01em; }
.mode-versions-count:empty { display:none; }
.mode-versions-btn .mode-versions-icon { display:none; }
@media (max-width: 520px){
  #composer-mode-buttons { gap:6px; row-gap:6px; }
  .composer-mode-chip,
  .mode-versions-btn { font-size:12px; padding:6px 12px; min-height:32px; }
  .mode-versions-icon { width:16px; height:16px; }
}
.composer-image-status { font-size:13px; line-height:1.4; border-radius:999px; border:1px solid var(--composer-border, rgba(15,23,42,0.12)); background:var(--composer-bg, #ffffff); color:var(--theme-accent-dark, #0f172a); padding:8px 14px; display:flex; align-items:center; gap:8px; margin:6px auto 0; width:min(100%, var(--composer-max-width, 630px)); max-width:var(--composer-max-width, 630px); box-shadow:0 6px 18px rgba(15,23,42,0.08); overflow-wrap:anywhere; word-break:break-word; }
.composer-image-status[hidden] { display:none !important; }
.composer-safety-hint { font-size:12px; color:#6b7280; text-align:center; margin:4px auto 0; width:min(100%, var(--composer-max-width, 630px)); max-width:var(--composer-max-width, 630px); line-height:1.45; }
.auth-legal-note { margin-top:10px; font-size:12px; line-height:1.45; text-align:center; color:#6b7280; }
.auth-legal-note a { color:var(--theme-link-color); text-decoration:underline; }
.composer-image-status.is-error { background:#fef2f2; border-color:rgba(248,113,113,0.65); color:#b91c1c; box-shadow:none; }
#attach-image-btn.is-disabled { opacity:0.55; pointer-events:none; }
.image-picker-popover { position:absolute; bottom:calc(100% + 12px); right:0; background:#fff; border-radius:14px; box-shadow:0 20px 40px rgba(15,23,42,0.25); border:1px solid rgba(148,163,184,0.25); padding:8px; display:flex; flex-direction:column; gap:4px; min-width:160px; z-index:40; }
.image-picker-popover::before { content:none; }
.image-picker-popover[hidden] { display:none !important; }
.image-picker-option { display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent; padding:10px 12px; border-radius:10px; font-size:15px; font-weight:600; color:#1f2937; text-align:left; cursor:pointer; transition:background .2s ease, color .2s ease; }
.image-picker-option:focus-visible { outline:2px solid var(--theme-accent-ring, rgba(11,122,61,0.35)); outline-offset:2px; }
.image-picker-option:hover, .image-picker-option:focus { background:rgba(148,163,184,0.14); color:#111827; }
.image-picker-option-icon { display:flex; align-items:center; justify-content:center; width:22px; height:22px; color:#0f172a; }
.image-picker-option-icon svg { width:100%; height:100%; display:block; }
.image-picker-option-label { flex:1; }
#camera-capture-modal .dr-modal-card {
  width:min(96vw, 720px);
  max-width:100%;
  height:min(100vh, 820px);
  max-height:100vh;
  display:flex;
  flex-direction:column;
  padding:0;
  border-radius:20px;
  overflow:hidden;
  background:#050b1a;
  color:#f9fafb;
  border:1px solid rgba(148,163,184,0.25);
  box-shadow:0 24px 60px rgba(2,6,23,0.55);
}
#camera-capture-modal .dr-modal-header {
  padding:18px 22px;
  border-bottom:1px solid rgba(148,163,184,0.25);
  background:rgba(5,11,26,0.88);
  color:#f9fafb;
  justify-content:center;
  position:relative;
  z-index:15;
}
#camera-capture-modal .dr-modal-title {
  color:inherit;
  margin:0 auto;
  text-align:center;
}
#camera-capture-modal .dr-modal-body {
  flex:1;
  padding:0;
  display:flex;
}
.camera-capture-body {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.camera-capture-view {
  position:relative;
  width:100%;
  flex:1 1 auto;
  background:#000;
  display:flex;
  align-items:stretch;
  justify-content:center;
  min-height:0;
}
.camera-focus-ring {
  position:absolute;
  width:84px;
  height:84px;
  border-radius:999px;
  border:2px solid rgba(248,250,252,0.9);
  left:50%;
  top:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.75);
  transition:opacity .18s ease, transform .25s ease;
  box-shadow:0 0 0 2px rgba(15,23,42,0.5), 0 0 14px rgba(59,130,246,0.45);
}
.camera-capture-hint {
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(560px, calc(100% - 80px));
  width:auto;
  margin:0;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  z-index:12;
}
.camera-capture-hint[hidden] {
  display:none !important;
}
.camera-focus-ring.is-active {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.camera-capture-video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.camera-capture-crop {
  position:relative;
  width:100%;
  height:100%;
  flex:1 1 auto;
  display:none;
  align-items:center;
  justify-content:center;
}
.camera-capture-crop-stage {
  position:relative;
  width:100%;
  height:100%;
  z-index:20;
}
.camera-capture-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}
.camera-capture-crop-overlay {
  position:absolute;
  inset:auto;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow:0 0 0 9999px rgba(2,6,23,0.55);
  border-radius:12px;
  pointer-events:none;
  z-index:21;
  transition:transform .08s ease, width .08s ease, height .08s ease, left .08s ease, top .08s ease;
}
.camera-capture-view:not(.captured) .camera-capture-canvas { display:none; }
.camera-capture-view.captured .camera-capture-video { display:none; }
.camera-capture-view.captured .camera-capture-crop { display:flex; }
.camera-capture-crop-handle {
  position:absolute;
  width:48px;
  height:48px;
  border:none;
  background:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(0, 0);
  cursor:nwse-resize;
  touch-action:none;
  pointer-events:auto;
  z-index:22;
  transition:color .16s ease;
  padding:0;
}
.camera-capture-crop-handle svg {
  width:100%;
  height:100%;
  pointer-events:none;
}
.camera-capture-crop-handle.handle-top-left {
  transform:translate(0, 0);
}
.camera-capture-crop-handle.handle-top-right {
  transform:translate(-100%, 0);
  cursor:nesw-resize;
}
.camera-capture-crop-handle.handle-bottom-right {
  transform:translate(-100%, -100%);
  cursor:nwse-resize;
}
.camera-capture-crop-handle.handle-bottom-left {
  transform:translate(0, -100%);
  cursor:nesw-resize;
}
.camera-capture-crop-handle:is(:hover, :focus-visible, .is-dragging) {
  color:#bfdbfe;
}
.camera-capture-crop-handle:focus-visible {
  outline:2px solid rgba(191,219,254,0.85);
  outline-offset:4px;
}
.camera-capture-crop-handle.is-dragging {
  cursor:grabbing;
}
.camera-capture-controls {
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  gap:18px;
  padding:20px 28px 28px;
  background:rgba(5,11,26,0.82);
  border-top:1px solid rgba(148,163,184,0.2);
  z-index:30;
}
.camera-control-slot {
  display:flex;
  align-items:center;
  justify-content:center;
}
.camera-control-slot-left {
  justify-content:flex-start;
}
.camera-control-slot-right {
  justify-content:flex-end;
}
.camera-control-btn {
  position:relative;
  border-radius:999px;
  border:none;
  background:transparent;
  color:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease;
  padding:0;
  width:auto;
  height:auto;
  max-width:56px;
  max-height:56px;
  min-width:0;
  min-height:0;
}
.camera-control-btn:hover {
  transform:scale(1.05);
}
.camera-control-btn:active { transform:scale(0.97); }
.camera-control-btn:focus-visible {
  outline:2px solid transparent;
  outline-offset:3px;
}
.camera-control-btn svg {
  width:32px;
  height:32px;
  pointer-events:none;
}
.camera-capture-take {
  padding:0;
  width:400px;
  height:400px;
  clip-path:circle(50%);
}
.camera-capture-take:hover,
.camera-capture-take:active {
  transform:none;
}
.camera-capture-take svg {
  width:400px;
  height:400px;
}
.camera-capture-retake svg {
  width:52px;
  height:52px;
}
.camera-capture-close {
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  z-index:20;
}
.camera-capture-close:hover,
.camera-capture-close:active {
  transform:translateY(-50%);
}
.camera-capture-confirm svg {
  width:52px;
  height:52px;
}
.camera-capture-view:not(.captured) .camera-capture-retake { display:none; }
.camera-capture-view.captured .camera-capture-take { display:none; }
.camera-control-primary {
  color:#5E35B1;
}
.camera-control-success {
  color:#10b981;
}
/* Keep desktop controls in normal flow (same layout model as small screens). */
@media (max-width: 720px){
  #camera-capture-modal .dr-modal-card { height:min(100vh, 700px); }
  .camera-capture-controls {
    padding:18px 20px 24px;
    gap:14px;
  }
  .camera-control-btn svg {
    width:26px;
    height:26px;
  }
  .camera-capture-close {
    right:16px;
  }
}
@media (max-width: 520px){
  .camera-capture-controls {
    padding:16px 16px 22px;
    gap:12px;
  }
  .camera-control-btn {
    width:auto;
    height:auto;
    padding:0;
  }
  .camera-control-btn svg {
    width:24px;
    height:24px;
  }
  .camera-capture-hint {
    top:16px;
    max-width:calc(100% - 120px);
    font-size:13px;
    padding:8px 14px;
  }
  .camera-capture-close {
    right:14px;
  }
  .camera-capture-crop-handle {
    width:40px;
    height:40px;
  }
}
@media (max-width: 520px){
  .composer-image-status { margin:4px auto 0; padding:8px 12px; font-size:12.5px; }
}
.camera-mode-overlay-backdrop { z-index:10020; background:rgba(0,0,0,.10); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
#camera-mode-overlay {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:10021;
  opacity:0;
  pointer-events:none;
  transform:scale(0.98);
  transition:opacity .2s ease, transform .2s ease;
}
#camera-mode-overlay.is-visible {
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
#camera-mode-overlay[hidden] { display:none !important; }
.camera-mode-overlay-layer {
  position:relative;
  width:min(640px, 96vw);
  max-width:100%;
  min-height:320px;
  height:min(90vh, 560px);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 32px 70px rgba(15,23,42,0.35);
  background:#f8fafc;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.camera-mode-overlay-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.camera-mode-overlay-preview[hidden] { display:none !important; }
.camera-mode-overlay-scrim {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}
.camera-mode-overlay-content {
  position:relative;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  padding:48px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
.camera-mode-overlay-main {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
}
.camera-mode-overlay-title {
  font-size:22px;
  font-weight:600;
  margin:0;
  color:#fff;
}
.camera-mode-overlay-subtitle {
  margin:0;
  font-size:15px;
  line-height:1.45;
  color:#fff;
  max-width:420px;
}
.camera-mode-overlay-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.camera-mode-choice {
  border-radius:9999px;
  padding:12px 26px;
  font-size:15px;
  line-height:1.2;
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
}
.camera-mode-choice-astuces {
  background:var(--accent, #8a2be2);
  border-color:transparent;
  color:#fff;
}
.camera-mode-choice-astuces:hover {
  filter:brightness(0.94);
}
.camera-mode-choice-explications {
  background:rgba(255,255,255,0.92);
  color:#0f172a;
  border-color:rgba(15,23,42,0.14);
}
.camera-mode-choice-explications:hover {
  background:#fff;
  border-color:rgba(15,23,42,0.22);
}
.camera-mode-close {
  position:absolute;
  top:18px;
  right:18px;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.camera-mode-close svg {
  width:28px;
  height:28px;
  pointer-events:none;
}
@media (max-width: 520px){
  #camera-mode-overlay {
    padding:16px;
  }
  .camera-mode-overlay-layer {
    border-radius:20px;
  }
  .camera-mode-overlay-content {
    padding:40px 26px;
  }
  .camera-mode-overlay-main {
    gap:16px;
  }
  .camera-mode-overlay-title {
    font-size:20px;
  }
  .camera-mode-overlay-subtitle {
    font-size:14px;
  }
  .camera-mode-choice {
    width:100%;
    max-width:280px;
  }
}
#user-input { flex: 1 1 auto; min-width: 0; padding:12px 10px 12px 6px; border:none; border-radius:20px; outline:none; font-size:15px; background:transparent; color:#333; align-self:stretch; }
#drastuce-chat-root .composer-bar.composer-bar-multiline #user-input { order:0; flex-basis:auto; width:100%; min-width:100%; align-self:stretch; padding-top:4px; padding-bottom:2px; padding-left:6px; padding-right:10px; }
#user-input::placeholder { color:#6b7280; opacity:1; }
#user-input:focus { border:none; box-shadow:none; }
textarea#user-input { resize: none; line-height: 1.4; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; min-height: 44px; height: auto; }

/* Empty state heading: render independently from layout */
/* Reset any special empty-state footer positioning so other elements stay put */
#drastuce-chat-root.empty-state footer {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  background: #fff !important;
  width: auto !important;
  min-height: 64px !important;
  padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#drastuce-chat-root.leaving-empty footer { top: auto; transform: none; transition: none; }
#drastuce-chat-root.empty-state .input-row { display:flex; }
#drastuce-chat-root.empty-state #user-input { font-size:16px; }

/* Prevent iOS Safari zoom on focus: ensure >=16px on small screens */
@media (max-width: 768px) {
  #user-input { font-size:17px; }
  /* Ensure all plugin inputs avoid iOS zoom */
  #drastuce-chat-root input,
  #drastuce-chat-root textarea,
  #drastuce-chat-root select { font-size:17px; }
}
/* Additional iOS hint */
@supports (-webkit-touch-callout: none) {
  #user-input { font-size:17px; }
  #drastuce-chat-root input,
  #drastuce-chat-root textarea,
  #drastuce-chat-root select { font-size:17px; }
}
/* Ensure empty prompt respects hidden attribute */
.empty-prompt[hidden]{ display:none !important; }
.empty-prompt { text-align:center; }
.empty-heading { font-size:22px; font-weight:600; color:#111827; margin-bottom:16px; }
@media (min-width: 900px) {
  .empty-heading { margin-bottom:20px; }
}

/* Mobile logged-out override: keep composer at bottom instead of centered */
@media (max-width: 768px) {
  /* No special centering on mobile either; footer stays in normal place */
  #drastuce-chat-root footer { gap: 10px !important; }
  #drastuce-chat-root footer #pre-hint { margin-bottom: 6px !important; }
  #drastuce-chat-root footer .input-row { margin-bottom: 0 !important; }
}

/* Keep core grid rows stable even when extra React roots are mounted */
#drastuce-chat-root > #app-title { grid-row: 1; }
#drastuce-chat-root > main#chat-container { grid-row: 2; min-height: 0; }
#drastuce-chat-root > footer { grid-row: 3; }

/* Centered empty heading overlay independent of layout */
#empty-center-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:translateY(-8%); transition: opacity 0.25s ease, transform 0.25s ease; z-index:4; padding:0 16px; text-align:center; width:100%; max-width:none; margin:0 auto; }
#empty-center-overlay .empty-heading { margin:0; width:100%; }
#empty-center-overlay .empty-astuces-buttons,
#empty-center-overlay .empty-astuces-buttons * { pointer-events:auto; }
#drastuce-chat-root.empty-state #chat-container { position:relative; overflow-y:hidden; }
#drastuce-chat-root.empty-state.empty-ready #empty-center-overlay { opacity:1; transform:translateY(0); }
#drastuce-chat-root.empty-state:not(.empty-ready) #empty-center-overlay { opacity:0; transform:translateY(-8%); }
#drastuce-chat-root:not(.empty-state) #empty-center-overlay { opacity:0; transform:translateY(-16%); }

#drastuce-chat-root.empty-state footer .empty-prompt{ visibility:hidden; }

/* Final overrides: keep footer/input centered normally even in empty-state */
@media (min-width: 771px){
  #drastuce-chat-root.empty-state footer{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    background: #fff !important;
    padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
  }
  #drastuce-chat-root.sidebar-open.empty-state footer{
    position: relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width: calc(100% - var(--sidebar-w)) !important;
    margin-left: var(--sidebar-w) !important;
    margin-right: 0 !important;
    padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
  }
  /* Ensure the composer row itself is centered with a max width */
  #drastuce-chat-root.empty-state .input-row{ max-width:var(--composer-max-width, 630px); margin:0 auto; }
  #drastuce-chat-root.sidebar-open .input-row{ max-width:var(--composer-max-width, 630px); margin:0 auto; }
}

/* === Strong overrides to ensure requested UI updates apply === */
/* Keep Suggestions icon aspect ratio */
#profile-suggestions::before { background-position: center center !important; background-size: contain !important; }
/* Bigger, always-highlighted Profile row with larger icon */
#profile-btn { background:transparent; padding:8px 10px 8px 5px; border-radius:8px; display:flex; align-items:center; gap:8px; min-height:initial; width:calc(100% - 12px); margin:2px 6px; }
#profile-btn:hover { background:#f3f4f6; }
#profile-btn::before { display:none; }
#profile-btn .profile-details { display:flex; flex-direction:row; align-items:center; gap:10px; flex:1; min-width:0; }
#profile-btn .profile-info { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:32px; gap:2px; line-height:1.2; flex:1; min-width:0; }
#profile-btn .profile-label { font-weight:600; font-size:14px; color:#111827; }
#profile-btn .profile-pack { font-size:12px; color:#6b7280; }
#profile-btn .profile-label, #profile-btn .profile-pack { display:block; max-width:8ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#profile-btn.has-active-pack .profile-label,
#profile-btn.has-active-pack .profile-pack {
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
#profile-btn .profile-upgrade { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; text-align:center; border-radius:9999px; background:var(--theme-accent,#00c853); color:#fff; font-size:12px; font-weight:600; line-height:1; border:1px solid var(--theme-accent,#00c853); white-space:nowrap; flex-shrink:0; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor:pointer; }
#profile-btn .profile-upgrade:hover { background:var(--theme-accent-dark,#0d652d); border-color:var(--theme-accent-dark,#0d652d); }
#profile-btn .profile-upgrade[hidden] { display:none !important; }
/* Avatar grid styling inside personalize modal */
.avatar-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap:10px; }
.avatar-grid .avatar-choice { width:56px; height:56px; border-radius:50%; background:#f3f4f6 center/cover no-repeat; border:2px solid transparent; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.avatar-grid .avatar-choice.selected { border-color:#8a2be2; box-shadow: 0 0 0 2px rgba(138,43,226,0.25); }
.theme-grid { display:flex; align-items:center; gap:12px; }
.theme-choice { width:42px; height:42px; border-radius:50%; border:2px solid transparent; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:3px; transition:border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.theme-choice .theme-dot { width:100%; height:100%; border-radius:50%; }
.theme-choice[data-theme="green"] .theme-dot { background:#00c853; box-shadow:0 0 0 2px #0b7a3d; }
.theme-choice[data-theme="purple"] .theme-dot { background:#8a2be2; box-shadow:0 0 0 2px #551f96; }
.theme-choice[data-theme="blue"] .theme-dot { background:#6495ed; box-shadow:0 0 0 2px #305da8; }
.theme-choice.selected { border-color:var(--theme-accent-dark); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 0 0 2px var(--theme-accent-dark); }
.theme-choice:focus-visible { outline:2px solid var(--theme-accent-dark); outline-offset:2px; }
/* Personnaliser item icon now rendered via inline SVG */
#profile-customize::before { content:none; display:none; }

/* Remove legacy PNG overlay for logout row */
#logout-btn::before { content:none; display:none; background:none !important; }
/* Extra spacing before Chats label */
.side-content > #section-chats { margin-top:18px !important; color:#6b7280 !important; }
.fade-out { animation: fadeOut 300ms ease forwards; }
@keyframes fadeOut { from{ opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-6px); } }

/* Disclaimer under the input, near bottom */
/* Guide hint below input bar, same visual style but in normal flow */
.guide-hint { display:none !important; }
.accent-text { color:var(--theme-link-color); }
.accent-link { color:var(--theme-link-color); font-weight:700; text-decoration:underline; }

/* Thinking animation: gray text with moving pink→purple→pink shine */
.thinking { position: relative; color: #6b7280; }
.thinking .thinking-base { color: #6b7280; }
.thinking .thinking-shine { position:absolute; inset:0; color: transparent; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, #ff4db8 50%, #8a2be2 65%, #ff4db8 80%, rgba(0,0,0,0) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: thinking-wipe 1.6s linear infinite; pointer-events:none; }
.thinking .thinking-dot,
.reasoning-loader .thinking-dot { display:inline-block; width:16px; height:16px; border-radius:9999px; background: linear-gradient(135deg, #ff4db8 0%, #8a2be2 50%, #ff4db8 100%); animation: thinking-dot-pulse 1.5s cubic-bezier(0.4,0,0.6,1) 3; vertical-align:middle; }

@keyframes thinking-dot-pulse {
  0% { transform: scale(0.7); opacity: 0.78; }
  50% { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0.78; }
}

@keyframes thinking-wipe {
  0% { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}
#send-btn { background:var(--theme-accent); border:none; width:44px; height:44px; flex:0 0 44px; min-width:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; border-radius:999px; transition:background-color .18s ease, transform .1s ease; }
#send-btn:hover { background:var(--theme-accent-dark); }
#send-btn .send-icon { width:38px; height:38px; display:block; pointer-events:none; }
#send-btn:active { transform:scale(.96); }
#send-btn:disabled { opacity:.7; cursor:default; }
.attach-image-btn { background:transparent; border:none; width:39px; height:39px; flex:0 0 39px; min-width:39px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:999px; transition:transform .1s ease; cursor:pointer; box-shadow:none; }
.attach-image-btn:hover { background:transparent; }
.attach-image-btn:focus-visible { outline:2px solid var(--theme-accent-ring, rgba(11,122,61,0.35)); outline-offset:2px; }
.attach-image-btn:active { transform:scale(.96); }
.attach-image-btn[hidden] { display:none !important; }
.attach-image-btn .attach-image-icon { width:19.2px; height:19.2px; display:block; pointer-events:none; color:#6b7280; }
.loading{ border:3px solid rgba(0,0,0,.08); border-top:3px solid var(--theme-loader-border); border-radius:50%; width:22px; height:22px; animation:spin 1s linear infinite; }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Search modal content */
.search-results { max-height: 60vh; overflow:auto; border:1px solid #e5e7eb; border-radius:8px; padding:6px; }
.search-item { padding:8px 10px; border-radius:8px; cursor:pointer; }
.search-item:hover { background:#f3f4f6; }
.search-title { font-size:14px; color:#111827; margin-bottom:4px; }
.search-snippet { font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-empty { padding:10px; font-size:14px; color:#6b7280; }

/* ================= Desktop layout ================= */
/* Desktop (>=771px): fixed sidebar, centered column with max width */
/* Global message-row alignment so phone user messages are right-aligned */
#chat-container .msg-row { width: 100%; display: flex; flex-direction: column; gap: 6px; }
#chat-container .msg-row.ai-row { align-items: stretch; }
#chat-container .msg-row.user-row { align-items: flex-end; }
#chat-container .msg-row .ai-actions { width: 100%; }
#chat-container .msg-row.ai-row .ai-actions { justify-content: flex-start; }
#chat-container .msg-row.user-row .ai-actions { justify-content: flex-end; }
#chat-post-send-spacer { flex: 0 0 auto; width: 100%; }
@media (min-width: 771px) {
  /* Shared sizing variables (scoped to plugin root) */
  #drastuce-chat-root { --sidebar-w: 280px; --col-max: 975px; }

  /* Sidebar always visible and fixed */
  .side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(var(--sidebar-w), 100vw); max-width: 100vw; z-index: 10001; }
  #backdrop { display: none !important; }
  .menu-btn { display: flex !important; }

  /* Logged-out (guest) header: keep title perfectly centered between left icon and right login chip */
  #drastuce-chat-root.guest #app-title { display: grid !important; grid-template-columns: 1fr auto 1fr !important; padding-left: 52px !important; padding-right: 52px !important; }
  #drastuce-chat-root.guest #app-title .header-title-wrap { grid-column: 2 !important; justify-self: center !important; display:flex !important; align-items:center !important; gap:12px !important; }
  #drastuce-chat-root.guest #app-title .title-text-static { display:flex !important; align-items:center !important; line-height:1 !important; transform:translateY(1px) !important; }
  #drastuce-chat-root.guest #menu-btn { position: static !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 !important; margin-right:6px !important; justify-self: start !important; width:34px !important; height:34px !important; padding:0 !important; border-radius:10px !important; align-self:center !important; }
  #drastuce-chat-root.guest #login-top-btn { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; justify-self: end !important; align-self: center !important; }

  /* Shift main regions only when sidebar is open (keep header centered) */
  #drastuce-chat-root.sidebar-open #chat-container,
  #drastuce-chat-root.sidebar-open footer {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
  }
  #drastuce-chat-root.sidebar-open #chat-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  #drastuce-chat-root.sidebar-open footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Centered content column for messages */
  #chat-container { align-items: stretch; }
  /* Constrain row width and center on desktop */
  #chat-container .msg-row { max-width: 630px; margin: 0 auto; }
  #chat-container .msg-row.ai-row { align-items: stretch; }
  #chat-container .msg-row.user-row { align-items: flex-end; }

  /* Bubbles within the centered column */
  #chat-container .ai { max-width: 100%; }
  #chat-container .user { max-width: 80%; margin-left: 0; }

  /* Action row width matches the column; alignment by role */
  #chat-container .ai-actions { width: 100%; max-width: 630px; margin: 0 auto; }
  #chat-container .msg-row.ai-row .ai-actions { justify-content: flex-start; }
  #chat-container .msg-row.user-row .ai-actions { justify-content: flex-end; }

  /* Composer fills remaining content area next to sidebar */
  #drastuce-chat-root footer { justify-content: stretch; }
  /* Cap composer width on desktop and keep centered */
  .input-row { flex: none; width: 100%; max-width: var(--composer-max-width, 630px); margin: 0 auto; }

  /* Empty state on desktop: keep footer near the bottom at all widths */
  #drastuce-chat-root.empty-state footer {
    top: auto !important;
    bottom: 24px !important;
    left: 50%;
    transform: translate(-50%, 0) !important;
    width: 100% !important;
    padding: 0 12px; /* ensure side padding */
    background: transparent;
  }
  /* When the sidebar is open, maintain bottom anchoring and correct centering */
  #drastuce-chat-root.sidebar-open.empty-state footer {
    width: min(var(--col-max), calc(100% - var(--sidebar-w))) !important;
    left: calc(50% + (var(--sidebar-w) / 2));
  }

  /* Desktop: hide 3-dots until hover on conversation rows */
  .convo-item .trash-btn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; }
  .convo-item:hover .trash-btn { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Offer modal grid + animated cards */
.offer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; align-items:stretch; }
@media (max-width: 640px){
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card { min-width: 0; }
}
.offer-card { position:relative; padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); opacity:0; transform: translateY(50px); transition: opacity .6s ease, transform .6s cubic-bezier(0.4,0,0.2,1), box-shadow .3s ease, border-color .3s ease, filter .3s ease; }

/* Mobile performance: reduce heavy filters/animations */
@media (max-width: 768px) {
  .offer-card { backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; transition: none; }
  .offer-card.memory-card:hover, .offer-card.memory-card.touching { transform: none; box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
  #app-title.animate-in { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.offer-card.in { opacity:1; transform: translateY(0); }
.offer-card.memory-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 64px var(--glow, rgba(139, 92, 246, 0.35)), 0 0 36px 12px var(--glow, rgba(139, 92, 246, 0.25)); border-color: var(--accent, rgba(139,92,246,0.5)); }
/* Touch-equivalent of hover for phones */
.offer-card.memory-card.touching {
  transform-origin: top center;
  transform: translateY(0) scale(1.02);
  box-shadow: 0 24px 64px var(--glow, rgba(139, 92, 246, 0.35)), 0 0 36px 12px var(--glow, rgba(139, 92, 246, 0.25));
  border-color: var(--accent, rgba(139,92,246,0.5));
}

/* Mobile: double the outer glow intensity on touch */
@media (hover: none), (pointer: coarse) {
  .offer-card.memory-card.touching {
    box-shadow:
      0 24px 64px var(--glow, rgba(139, 92, 246, 0.35)),
      0 0 36px 12px var(--glow, rgba(139, 92, 246, 0.25)),
      /* duplicate layers to roughly double perceived glow */
      0 24px 64px var(--glow, rgba(139, 92, 246, 0.35)),
      0 0 36px 12px var(--glow, rgba(139, 92, 246, 0.25));
  }
}
.offer-img { width:100%; height:auto; display:block; border-radius:12px; margin-bottom:10px; }
.offer-card .offer-img { border:0; transition: border-color .25s ease, box-shadow .25s ease; }
.offer-card:hover .offer-img { border-color: var(--accent, rgba(139,92,246,0.35)); box-shadow: none; }
.offer-card.touching .offer-img { border-color: var(--accent, rgba(139,92,246,0.35)); box-shadow: none; }
.offer-text { display:flex; flex-direction:column; gap:6px; }
.offer-name { font-size:24px; font-weight:900; color: var(--accent, #a78bfa); transition: color .25s ease; }
.offer-card:hover .offer-name { color: var(--accent, #a78bfa); }
.offer-card.touching .offer-name { color: var(--accent, #a78bfa); }
.offer-desc { color:#374151; font-size:14px; font-weight:900; }
.offer-note { color:#4b5563; font-size:13px; margin-top:-2px; padding-left:16px; text-align:left; list-style: disc; }
.offer-note .offer-note-meta{ display:none; }
#offer-modal .offer-card .offer-price { font-weight:700; color: var(--accent-strong, var(--accent, #8a2be2)); font-size: 130%; line-height: 1.2; }
#offer-modal .offer-card .offer-price { text-align:center; display:block; margin-top:2px; }
#offer-modal .offer-card .offer-price-badge{
  width:112px;
  min-height:60px;
  border-radius:18px;
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 55%, rgba(245,248,255,0.92) 100%),
    linear-gradient(180deg, rgba(250,252,255,0.95), rgba(246,249,255,0.96));
  border:1px solid rgba(120,150,220,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 10px 18px rgba(70,120,230,0.18),
    0 4px 10px rgba(70,120,230,0.10);
  position:relative;
  overflow:hidden;
  margin:0;
  position:absolute;
  top:12px;
  right:12px;
  flex:0 0 auto;
}
#offer-modal .offer-card .offer-price-badge::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  pointer-events:none;
}
#offer-modal .offer-card .offer-price-badge .offer-price{
  color:#1f2a3a;
  line-height:1;
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:42px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  margin:0;
}
#offer-modal .offer-card .offer-price-badge .offer-price *{
  line-height:1;
}
#offer-modal .offer-card.offer-card-free,
#offer-modal .offer-card.offer-card-free.in {
  opacity: 1;
  transform: none;
  transition: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  filter: none;
  cursor: default;
}
#offer-modal .offer-card.offer-card-free:hover,
#offer-modal .offer-card.offer-card-free.touching {
  transform: none;
  box-shadow: none;
}
#offer-modal .offer-card.offer-card-free .offer-img {
  border-color: #e5e7eb;
  box-shadow: none;
}
#offer-modal .offer-card.offer-card-free .offer-name {
  color: #111827;
}
#offer-modal .offer-card.offer-card-free .offer-price {
  color: #047857;
  font-weight: 600;
  font-size: 210%;
}
#offer-modal .offer-card.offer-card-free .offer-actions {
  margin-top: 12px;
}
#offer-modal .offer-card.offer-card-free .offer-buy-disabled {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #6b7280;
  cursor: default;
  pointer-events: none;
}
#offer-modal .offer-card.offer-card-free .offer-buy-disabled:focus {
  outline: none;
}
/* Make crossed-out (old) prices subdued: gray and regular weight */
#offer-modal .offer-card .offer-price s,
#offer-modal .offer-card .offer-price del,
#offer-modal .offer-card .offer-price strike,
#offer-modal .offer-card .offer-price .strike,
#offer-modal .offer-card .offer-price .strikethrough,
#offer-modal .offer-card .offer-price [style*="line-through"] {
  color:#9ca3af !important; /* gray-400 */
  font-weight:400 !important;
  text-decoration-color:#9ca3af !important;
  text-decoration-thickness: 1px;
}
.offer-validity { color:#6b7280; font-size:12px; }
.offer-usage { color:#111827; font-size:12px; font-weight:700; }
.offer-actions {
  margin-top:10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  justify-content:center;
  align-items: stretch;
}
.offer-actions .offer-buy-ls { order: 0; }
.offer-actions .offer-buy:not(.offer-buy-ls) { order: 1; }
.offer-actions .offer-btn-sub { order: 2; }
#offer-modal .offer-card { display:flex; flex-direction:column; height:100%; }
#offer-modal .offer-card { padding-top:84px; }
#offer-modal .offer-text { margin-top:auto; }
#offer-modal .offer-actions { margin-top:6px; padding-bottom:5px; }
.offer-actions .dr-btn {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.offer-buy-ls {
  display: none !important;
}
.offer-btn-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.offer-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.offer-buy {
  flex-direction: row;
}
.offer-buy .offer-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.offer-btn-text { display: inline-block; white-space: nowrap; }
.offer-btn-sub {
  display: block;
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.offer-btn-sub > * {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  object-fit: contain;
}
.offer-btn-sub svg { width:100%; height:100%; }
.offer-btn-sub:empty {
  display: none;
}
.offer-secure-line{
  display:none;
}
.dr-modal-body .offer-grid { margin-top:6px; }

/* Optional: subtle click feedback without JS */
.memory-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.memory-card:active { transform: translateY(-4px) scale(0.99); }

/* Themed styles per pack */
.offer-card[data-pack="silver"] { --accent: #2563eb; --accent-strong:#1d4ed8; --glow: rgba(37,99,235,0.35); background-image: linear-gradient(180deg, rgba(219,234,254,0.85) 0%, rgba(191,219,254,0.6) 100%); filter: saturate(1.05) brightness(1.01); }
.offer-card[data-pack="gold"] { --accent: #d4af37; --accent-strong:#b45309; --glow: rgba(212,175,55,0.35); background-image: linear-gradient(180deg, rgba(255,249,196,0.65) 0%, rgba(253,230,138,0.4) 100%); filter: saturate(1.05); }
.offer-card[data-pack="diamond"] { --accent: #cb4ef4; --accent-strong:#cb4ef4; --glow: rgba(203,78,244,0.35); background-image: linear-gradient(180deg, rgba(245, 225, 251, 0.65) 0%, rgba(241, 231, 252, 0.45) 100%); filter: saturate(1.06); }

/* Buttons inside themed cards pick up the accent */
#offer-modal .offer-card .dr-btn-primary { background: var(--accent, #00c853); border-color: transparent; }
#offer-modal .offer-card .dr-btn-primary:hover { filter: brightness(0.95); }

/* User 1 only: premium refreshed offer-card style */
#offer-modal.offer-style-user1 .dr-modal-card{
  width:min(980px,95vw);
  border-radius:32px;
  background: radial-gradient(1200px 700px at 50% 20%, #ffffff 0%, #eef4ff 45%, #e6efff 100%);
}
#offer-modal.offer-style-user1 .dr-modal-body{
  padding:22px;
}
#offer-modal.offer-style-user1 .offer-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  align-items:stretch;
}
#offer-modal.offer-style-user1 .offer-card{
  border-radius:32px;
  border:1px solid rgba(186,204,255,.55);
  background:#fff;
  box-shadow:0 12px 24px rgba(11,27,72,.10);
  padding:24px 20px 20px;
  transform:none;
  opacity:1;
}
#offer-modal.offer-style-user1 .offer-card.in{
  transform:none;
  opacity:1;
}
#offer-modal.offer-style-user1 .offer-card.memory-card:hover,
#offer-modal.offer-style-user1 .offer-card.memory-card.touching{
  transform:translateY(-3px);
  box-shadow:0 20px 45px rgba(62,96,255,.18);
}
#offer-modal.offer-style-user1 .offer-card[data-pack="silver"]::before{
  content:"LE PLUS POPULAIRE";
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:999px;
  background:linear-gradient(180deg,#e3ecff 0%, #d7e3ff 100%);
  color:#3f63f4;
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  margin-bottom:14px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(63,99,244,.10);
}
#offer-modal.offer-style-user1 .offer-card[data-pack="diamond"]::before{
  content:"LE PLUS AVANTAGEUX";
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:999px;
  background:linear-gradient(180deg,#f4e5ff 0%, #ecd7ff 100%);
  color:#8b3de8;
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  margin-bottom:14px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(139,61,232,.12);
}
@media (min-width: 771px){
  /* Keep desktop cards vertically aligned when some packs have promo pills. */
  #offer-modal.offer-style-user1 .offer-card[data-pack="free"]::before,
  #offer-modal.offer-style-user1 .offer-card[data-pack="gold"]::before{
    content:"";
    display:block;
    height:44px;
    margin-bottom:14px;
    visibility:hidden;
  }
}
#offer-modal.offer-style-user1 .offer-price-badge{
  position:static;
  order:2;
  width:auto;
  min-height:0;
  border:0;
  box-shadow:none;
  border-radius:0;
  background:transparent;
  overflow:visible;
  margin:12px 0 0;
  justify-content:center;
}
#offer-modal.offer-style-user1 .offer-price-badge::before{
  display:none;
}
#offer-modal.offer-style-user1 .offer-price-badge .offer-price{
  color:#1b2638;
  font-size:58px;
  font-weight:850;
  letter-spacing:-.02em;
  justify-content:center;
}
#offer-modal.offer-style-user1 .once{
  position:relative;
  order:2;
  text-align:center;
  margin:0;
  font-size:26px;
  color:rgba(27, 38, 56, .55);
  font-weight:500;
}
#offer-modal.offer-style-user1 .offer-head{
  display:block;
  order:1;
}
#offer-modal.offer-style-user1 .offer-features-card{
  order:3;
}
#offer-modal.offer-style-user1 .offer-text{
  margin:0;
  align-items:center;
  text-align:center;
  gap:6px;
}
#offer-modal.offer-style-user1 .offer-name{
  color:#1b2638;
  font-size:36px;
  line-height:1;
  font-weight:600;
  margin:0;
  width:100%;
  text-align:left;
}
#offer-modal.offer-style-user1 .offer-desc{
  font-size:20px;
  color:#1b2638;
  font-weight:800;
  margin:0;
}
#offer-modal.offer-style-user1 .offer-validity{
  margin:0;
  color:#6f7b8f;
  font-size:18px;
  font-weight:500;
}
#offer-modal.offer-style-user1 .offer-desc,
#offer-modal.offer-style-user1 .offer-validity{
  display:none;
}
#offer-modal.offer-style-user1 .offer-note{
  list-style:none;
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:22px;
  line-height:1.25;
  color:#1b2638;
}
#offer-modal.offer-style-user1 .offer-features-card{
  margin:14px 0 0;
  padding:18px 16px 14px;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(186,204,255,.35);
  box-shadow:0 20px 55px rgba(54,85,255,.10);
  display:flex;
  flex-direction:column;
}
#offer-modal.offer-style-user1 .offer-note li{
  position:relative;
  padding-left:34px;
  margin:0 0 12px;
}
#offer-modal.offer-style-user1 .offer-note .offer-note-meta{
  display:block;
}
#offer-modal.offer-style-user1 .offer-note .offer-note-item-messages{ order:1; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-turbo{ order:2; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-validity{ order:3; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-access{ order:4; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-reasoning{ order:5; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-versions{ order:6; }
#offer-modal.offer-style-user1 .offer-note .offer-note-item-messages strong{
  font-weight:850;
}
#offer-modal.offer-style-user1 .offer-note li:last-child{
  margin-bottom:0;
}
#offer-modal.offer-style-user1 .offer-note li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#30b36b;
  font-weight:900;
}
#offer-modal.offer-style-user1 .offer-actions{
  order:1;
  margin-top:0;
  margin-bottom:12px;
  gap:10px;
}
#offer-modal.offer-style-user1 .offer-note{
  order:2;
}
#offer-modal.offer-style-user1 .offer-card.offer-card-free .offer-actions{
  order:1;
  margin-top:0;
  margin-bottom:12px;
}
#offer-modal.offer-style-user1 .offer-card.offer-card-free .offer-note{
  order:2;
}
#offer-modal.offer-style-user1 .offer-actions .offer-buy{
  height:70px;
  border-radius:22px;
  background:linear-gradient(180deg,#4f73ff 0%, #3f62f2 100%);
  color:#fff;
  box-shadow:0 18px 38px rgba(66,106,255,.28);
  font-size:18px;
  font-weight:850;
}
#offer-modal.offer-style-user1 .offer-btn-sub{
  order:4;
}
#offer-modal.offer-style-user1 .offer-btn-sub > *{
  width:64px;
  height:64px;
  flex:0 0 64px;
}
#offer-modal.offer-style-user1 .offer-buy-ls{
  display:none !important;
}
#offer-modal.offer-style-user1 .offer-secure-line{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:6px;
  row-gap:2px;
  order:3;
  margin-top:2px;
  color:rgba(27,38,56,.55);
  font-size:16px;
  font-weight:500;
  text-align:center;
}
#offer-modal.offer-style-user1 .offer-secure-line .offer-secure-lock,
#offer-modal.offer-style-user1 .offer-secure-line > span:not(.offer-secure-bank){
  order:1;
}
#offer-modal.offer-style-user1 .offer-secure-line .offer-secure-bank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-basis:100%;
  order:2;
  min-height:18px;
}
#offer-modal.offer-style-user1 .offer-secure-line .offer-secure-lock{
  width:16px;
  height:16px;
  opacity:.75;
  flex:0 0 16px;
}
#offer-modal.offer-style-user1 .offer-secure-line .offer-secure-bank > *{
  width:auto;
  height:20px;
  max-width:120px;
  object-fit:contain;
}
#offer-modal.offer-style-user1 .offer-card.offer-card-free .offer-buy-disabled{
  height:58px;
  border-radius:18px;
  font-size:22px;
  font-weight:800;
}
@media (max-width: 640px){
  #offer-modal.offer-style-user1 .offer-grid{
    grid-template-columns:1fr;
  }
  #offer-modal.offer-style-user1 .offer-name{
    font-size:36px;
  }
  #offer-modal.offer-style-user1 .offer-price-badge .offer-price{
    font-size:48px;
  }
  #offer-modal.offer-style-user1 .offer-note{
    font-size:19px;
  }
}

/* Offer modal: full-screen on all viewport sizes */
#offer-modal-backdrop{
  display:none !important;
}
#offer-modal{
  padding:0;
  place-items:stretch;
}
#offer-modal .dr-modal-card,
#offer-modal.offer-style-user1 .dr-modal-card{
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:100dvh;
  max-height:none;
  border-radius:0;
  border:0;
  box-shadow:none;
}
#offer-modal .dr-modal-header{
  padding-top:calc(14px + env(safe-area-inset-top));
}
#offer-modal .dr-modal-body,
#offer-modal.offer-style-user1 .dr-modal-body{
  flex:1;
  overflow:auto;
  padding:18px clamp(14px, 4vw, 42px) calc(28px + env(safe-area-inset-bottom));
  scroll-padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
#offer-modal .dr-modal-body .offer-grid{
  width:min(1280px, 100%);
  margin:0 auto;
  padding-bottom:10px;
}
@media (max-width: 770px){
  /* Prevent touched card scaling from clipping the bottom edge on mobile. */
  .offer-card.memory-card.touching{
    transform:none;
  }
}
/* Hide sidebar completely for guests */
#drastuce-chat-root.guest #menu-btn { display: flex !important; }
#drastuce-chat-root.guest #side-menu { display: none !important; }
#drastuce-chat-root.guest #backdrop { display: none !important; }

/* Desktop-only adjustments when guest: undo desktop sidebar offsets without affecting mobile */
@media (min-width: 771px) {
  #drastuce-chat-root.guest #app-title,
  #drastuce-chat-root.guest #chat-container,
  #drastuce-chat-root.guest footer { padding-left: 12px !important; }
  /* Guest on desktop: keep footer in normal flow and center the composer */
  #drastuce-chat-root.guest.empty-state footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
    background: #fff !important;
  }
  #drastuce-chat-root.guest .input-row { max-width: var(--composer-max-width, 630px); margin: 0 auto; }
}

/* Narrow: when sidebar is open, hide the header menu button to avoid overlap */
@media (max-width: 770px) {
  #drastuce-chat-root.sidebar-open #app-title .menu-btn { display: none; }
  /* Ensure padding on phone for empty-state composer */
  #drastuce-chat-root.empty-state footer { padding: 0 12px; width: 100%; }
}

/* Back-compat: if actions remain siblings after a user bubble, keep right alignment */
.user + .ai-actions { justify-content: flex-end; }

/* Freeze zone: 714–770px — keep a fixed centered column at 714px */
@media (min-width: 714px) and (max-width: 770px) {
  #drastuce-chat-root { --composer-max-width: 714px; }
  #chat-container { align-items: stretch; }
  #chat-container .msg-row { max-width: 714px; margin: 0 auto; }
  .input-row { width: min(100%, var(--composer-max-width, 714px)); margin: 0 auto; }
  .composer-image-status { max-width: var(--composer-max-width, 714px); }
}

/* Expand zone: 501–713px — input fills width */
@media (min-width: 501px) and (max-width: 713px) {
  .input-row { width: 100%; }
}

/* Cap at large widths: >= 976px stop expanding input/text */
@media (min-width: 976px) {
  /* Keep composer capped even on very wide screens */
  .input-row { max-width: var(--composer-max-width, 630px); margin: 0 auto; }
  #chat-container .msg-row { max-width: 630px; margin: 0 auto; }
}

/* Strongest override for large desktop: keep footer centered normally in empty-state */
@media (min-width: 771px){
  #drastuce-chat-root.empty-state footer{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    background: #fff !important;
    padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
  }
  #drastuce-chat-root.sidebar-open.empty-state footer{
    left:auto !important;
    width: calc(100% - var(--sidebar-w)) !important;
    margin-left: var(--sidebar-w) !important;
    margin-right: 0 !important;
    padding: 12px 12px max(8px, env(safe-area-inset-bottom)) 12px !important;
  }
  #drastuce-chat-root.empty-state .input-row{ max-width:var(--composer-max-width, 630px); margin:0 auto; }
}
.mode-option.mode-select-pack { cursor:default; padding-top:6px; }
.mode-prompt-btn { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:10px 18px; font-weight:600; background:#111827; color:#fff; font-size:13px; width:100%; }
.mode-prompt-btn:hover { background:#0c1220; }
.mode-prompt-btn:focus-visible { outline:2px solid rgba(17,24,39,0.3); outline-offset:3px; }
.mode-prompt-btn:focus, .mode-prompt-btn:active { outline:none; box-shadow:none; }
.mode-prompt-btn::-moz-focus-inner { border:0; }
.dr-btn::-moz-focus-inner { border:0; }
.menu-btn:focus, .menu-btn:active { outline:none; box-shadow:none; }
.menu-btn::-moz-focus-inner { border:0; }
.mode-switcher,
.mode-option,
.menu-btn,
.menu-item,
.side-toggle-btn { background:none; }
.dr-btn:focus, .dr-btn:active { outline:none; box-shadow:none; }
#login-top-btn:focus, #login-top-btn:active { outline:none; box-shadow:none; }
#reasoning-modal-backdrop{ background-color:rgba(0,0,0,.10); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
#reasoning-modal .dr-modal-card{
  max-width:720px;
  width:calc(100% - 32px);
  font-size:0.65em;
  color:#6f7385;
  line-height:1.9;
}
#reasoning-modal .dr-modal-body{
  max-height:70vh;
  overflow-y:auto;
  font-size:inherit;
  color:inherit;
  line-height:inherit;
}
.reasoning-modal-body .reasoning-body,
.reasoning-modal-body .reasoning-body-modal{
  max-height:none;
  opacity:1;
  margin-top:0;
  color:inherit;
  font-size:1em;
  font-family:inherit;
}
.reasoning-modal-body .reasoning-body *{
  color:inherit;
}
.reasoning-modal-body .reasoning-body ul,
.reasoning-modal-body .reasoning-body ol{
  padding-left:1.2em;
  margin:0 0 1em;
}
.reasoning-modal-body .reasoning-body li{
  margin:0.2em 0;
}
.reasoning-modal-body .reasoning-body li > p{
  display:inline;
  margin:0;
}
.reasoning-modal-body .reasoning-body li > p + p{
  display:inline;
}
.reasoning-modal-body .reasoning-body .pre-etape7{
  font-size:1em;
  display:block;
}
#drastuce-chat-root button,
#drastuce-chat-root .dr-btn,
#drastuce-chat-root .icon-btn {
  position: relative;
  overflow: hidden;
}