/* Import */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;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: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  box-sizing: border-box;
}
.work-sans {
  font-family: 'Work Sans', sans-serif;
}
#drastuce-chat-root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  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-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;
}

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; }

/* 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,0.35); backdrop-filter:saturate(0.9) blur(1px); -webkit-backdrop-filter:saturate(0.9) blur(1px); 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 */
#section-guide { display:none !important; }

/* Pack modal */
.dr-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); 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; }
.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); }
.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; }
#guided-astuces-modal .dr-modal-card { width:min(540px, 94vw); }
.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; }
.guided-astuces-columns { display:flex; flex-wrap:wrap; gap:2px; }
.guided-astuces-column { flex:1 1 200px; display:flex; flex-direction:column; gap:6px; }
.guided-astuces-column[data-group="infos"] { margin-left:-10px; }
@media (max-width: 700px) {
  .guided-astuces-columns {
    flex-wrap:nowrap;
    gap:8px;
  }
  .guided-astuces-column {
    flex:1 1 50%;
    min-width: 0;
  }
}
.guided-astuces-column-title { font-weight:600; font-size:13px; color:#111827; margin-bottom:2px; }
.guided-astuces-options { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
#guided-astuces-modal .guided-astuces-note { font-size:13px; line-height:1.5; color:#4b5563; margin:0; display:flex; flex-direction:column; gap:0; }
.guided-astuces-note-heading { font-weight:600; color:#111827; }
.guided-astuces-note-list { margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.guided-astuces-note-item { display:flex; align-items:flex-start; gap:6px; line-height:1.4; }
.guided-astuces-note-number { font-weight:600; color:#111827; flex:0 0 auto; }
#guided-astuces-modal .composer-mode-chip,
#guided-astuces-modal .composer-mode-chip:hover,
#guided-astuces-modal .composer-mode-chip:focus-visible,
#guided-astuces-modal .composer-mode-chip:active,
#guided-astuces-modal .composer-mode-chip.is-active,
#guided-astuces-modal .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;
}
#guided-astuces-modal .composer-mode-chip:hover {
  background:rgba(138,43,226,0.1);
  box-shadow:0 4px 12px rgba(138,43,226,0.2);
}
#guided-astuces-modal .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;
}
#guided-astuces-modal .composer-mode-chip:active {
  transform:translateY(1px);
}
#guided-astuces-modal .composer-mode-chip.is-active,
#guided-astuces-modal .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);
}
#guided-astuces-modal .composer-mode-chip[aria-pressed="true"]:hover {
  box-shadow:0 6px 16px rgba(138,43,226,0.25);
}
.guided-astuces-actions { display:flex; justify-content:flex-end; gap:8px; }
.guided-astuces-note { margin:4px 0 0; font-size:12px; line-height:1.5; color:#000; font-weight:300; }
@media (max-width: 520px){
  .guided-astuces-columns { gap:6px; }
  .guided-astuces-column { flex: 1 1 calc(50% - 4px); }
  .guided-astuces-options { align-items:flex-start; 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:36px; height:36px; flex-shrink:0; cursor:pointer; user-select:none; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; border-radius:50%; }
.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-icon { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; pointer-events:none; border-radius:50%; transition:box-shadow .18s ease, transform .18s ease; }
.profile-preference-toggle-svg { width:24px; height:24px; display:block; }
.profile-preference-toggle-svg circle { fill:transparent; stroke:#9ca3af; stroke-width:2; transition:fill .2s ease, stroke .2s ease; }
.profile-preference-toggle-input:checked + .profile-preference-toggle-icon { transform:scale(1.05); }
.profile-preference-toggle-input:checked + .profile-preference-toggle-icon .profile-preference-toggle-svg circle { fill:var(--theme-accent, #6366f1); stroke:var(--theme-accent, #6366f1); }
.profile-preference-toggle-input:focus-visible + .profile-preference-toggle-icon { box-shadow:0 0 0 3px rgba(99,102,241,0.28); }
.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:'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 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); } }
.offer-card { border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff; text-align:center; }
.offer-img { width:100%; height:auto; max-height:180px; object-fit:contain; }
.offer-text { margin-top:8px; font-size:14px; color:#111827; font-weight:500; line-height:1.35; }
.offer-name { font-weight:700; font-size:15px; 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:10px; display:flex; justify-content:center; }

/* Center the Offer modal title while keeping close button on the right */
#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%); }
#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; }

/* Guide content defaults */
#guide-content { color:#111827; font-size:15px; line-height:1.6; }
/* 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; }
/* Horizontal rule */
#guide-content hr { border:0; border-top:1px solid #e5e7eb; margin:16px 0; }

/* Buttons used in popups/modals */
.dr-btn { 
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  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:#111827; border-color:#e5e7eb; }
.dr-btn-secondary:hover { background:#e5e7eb; border-color:#d1d5db; }

.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; }
.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 { position: relative; padding-left: 40px; }
#new-convo::before, #logout-btn::before, #section-pack::before, #section-search::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'); }
#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 0 6px 12px; 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:contain; 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; }
#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-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;
  font-size:0.92em;
  opacity:1;
}
#chat-container .ai.pre-etape-mode *{
  color:inherit;
}
#chat-container .ai .pre-etape7{
  color:#1f2933;
  font-size:0.92em;
  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; }
/* 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 12px; min-width:40px; gap:0; }
.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; }
.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;
}
.camera-capture-view {
  position:relative;
  width:100%;
  flex:1;
  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%;
}
.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;
  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 {
  --handle-rotate: 0deg;
  position:absolute;
  width:48px;
  height:48px;
  border:none;
  background:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%, -50%) rotate(var(--handle-rotate));
  cursor:nwse-resize;
  touch-action:none;
  transition:color .16s ease, transform .16s ease;
  padding:0;
}
.camera-capture-crop-handle svg {
  width:100%;
  height:100%;
  pointer-events:none;
}
.camera-capture-crop-handle.handle-top-right {
  --handle-rotate: 90deg;
  cursor:nesw-resize;
}
.camera-capture-crop-handle.handle-bottom-right {
  --handle-rotate: 180deg;
  cursor:nwse-resize;
}
.camera-capture-crop-handle.handle-bottom-left {
  --handle-rotate: 270deg;
  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 {
  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);
}
.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;
  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:200px;
  height:200px;
}
.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-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;
}
@media (min-width: 721px){
  .camera-capture-body {
    position:relative;
  }
  .camera-capture-controls {
    position:absolute;
    inset:auto 0 24px 0;
    display:flex;
    justify-content:center;
    padding:0;
    background:transparent;
    border-top:none;
    gap:0;
  }
  .camera-control-slot-left,
  .camera-control-slot-center {
    display:none;
  }
  .camera-control-slot-right {
    justify-content:center;
  }
  .camera-capture-take,
  .camera-capture-retake {
    display:none !important;
  }
}
@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(15,23,42,0.55); 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; }
}

/* Centered empty heading overlay independent of layout */
#empty-center-overlay { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:translate(-50%, -40%); transition: opacity 0.25s ease, transform 0.25s ease; z-index:1; padding:0 16px; text-align:center; width:100%; max-width:680px; margin:0 auto; }
#empty-center-overlay .empty-heading { margin:0; width:100%; }
#drastuce-chat-root.empty-state #chat-container { position:relative; }
#drastuce-chat-root.empty-state.empty-ready #empty-center-overlay { opacity:1; transform:translate(-50%, -50%); }
#drastuce-chat-root.empty-state:not(.empty-ready) #empty-center-overlay { opacity:0; transform:translate(-50%, -40%); }
#drastuce-chat-root:not(.empty-state) #empty-center-overlay { opacity:0; transform:translate(-50%, -70%); }

#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 5px 6px 12px; 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 .title-text-static { grid-column: 2 !important; justify-self: center !important; 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; }
.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) {
  .backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .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: 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)); }

/* 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:1px solid rgba(0,0,0,0.06); 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: 0 0 0 2px rgba(255,255,255,0.5) inset; }
.offer-card.touching .offer-img { border-color: var(--accent, rgba(139,92,246,0.35)); box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset; }
.offer-text { display:flex; flex-direction:column; gap:6px; }
.offer-name { font-size:18px; font-weight:700; 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:700; }
.offer-note { color:#4b5563; font-size:13px; margin-top:-2px; }
#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-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; justify-content:center; }
.offer-actions .dr-btn { width:100%; }
.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); }
/* 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,.45); }
#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;
}