/* ============================================
   TICThink Chat Widget - Styles
   Aligné sur les tokens du site principal (site.css / account.css) :
   fond marine sombre, vert TICThink, Poppins + Roboto.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=Poppins:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  --tt-bg: #000000;
  --tt-bg-elev: #000000;
  --tt-surface-light: #000000;
  --tt-border: transparent;
  --tt-fg: #f4f4f2;
  --tt-muted: #9a9a96;
  --tt-dim: #6a7f92;
  --tt-accent: #00d166;
  --tt-accent-hover: #1ae884;
  --tt-on-accent: #0b1623;
  --tt-radius: 16px;
  --tt-radius-sm: 12px;
  --tt-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --tt-shadow-glow: 0 4px 20px rgba(0, 209, 102, 0.35);
}

/* ========== LOGO "ASK TICTHINK" (badge, style McKinsey) ========== */
/* Composition : mascotte en haut a droite, wordmark en dessous, legende
   "AI ASSISTANT (BETA)" en petites capitales grises tout en bas — remplace
   l'ancien "BETA" en eyebrow au-dessus. */
.tt-brand-mark {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}
.tt-brand-mark__word {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--tt-accent);
  line-height: 1.08;
  margin: 0 0 8px;
  font-size: 36px;
}
.tt-brand-mark__sparkle {
  display: inline-block;
  font-style: normal;
  animation: tt-sparkle 3s ease-in-out infinite;
}
@keyframes tt-sparkle {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(160deg) scale(1.15); opacity: 0.7; }
}
.tt-brand-mark__caption {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-muted);
  margin: 0;
}
.tt-brand-mark__bubbles {
  align-self: flex-end;
  width: 72px;
  height: 56px;
  margin-bottom: 6px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.tt-brand-mark__bubbles svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Logo dans la sidebar de conversation : version complete (mascotte + wordmark)
   mais reduite pour tenir sur une ligne dans les 240px de la colonne, sans la
   legende "AI ASSISTANT (BETA)". */
.tt-assist-sidebar .tt-brand-mark__word {
  font-size: 22px;
  white-space: nowrap;
  margin-bottom: 0;
}
.tt-assist-sidebar .tt-brand-mark__caption {
  display: none;
}
.tt-assist-sidebar .tt-brand-mark__bubbles {
  width: 42px;
  height: 33px;
  margin-bottom: 3px;
}

/* Variante compacte : en-tete du panneau de chat */
.tt-brand-mark--sm {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: none;
}
.tt-brand-mark--sm .tt-brand-mark__caption { display: none; }
.tt-brand-mark--sm .tt-brand-mark__word {
  font-size: 15px;
  margin: 0;
  white-space: nowrap;
}
.tt-brand-mark--sm .tt-brand-mark__bubbles {
  align-self: center;
  width: 32px;
  height: 25px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ========== ANIMATION D'APPARITION DU TEXTE (style McKinsey) ========== */
.tt-typewriter {
  display: inline;
}
.tt-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: tt-caret-blink 0.9s step-end infinite;
}
@keyframes tt-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Vignettes des projets reels cites dans une reponse — image + lien vers la
   vraie case study sur ticthink.dz. */
.tt-citation-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.tt-citation-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--tt-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--tt-radius-sm);
  padding: 14px 28px 14px 14px;
  text-decoration: none;
  max-width: 420px;
  transition: border-color 0.15s, background 0.15s;
}
.tt-citation-card:hover { border-color: var(--tt-accent); background: rgba(0, 209, 102, 0.06); }
.tt-citation-card__thumb {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}
.tt-citation-card__name {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--tt-fg);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Indicateur "Generating response..." (remplace/complete les 3 points) */
.tt-generating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tt-muted);
  padding: 4px 0 8px;
}
.tt-generating-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--tt-border);
  border-top-color: var(--tt-accent);
  animation: tt-spin 0.7s linear infinite;
}
@keyframes tt-spin {
  to { transform: rotate(360deg); }
}

/* ========== CONTENEUR PRINCIPAL / BULLE ========== */
#ticthink-assistant {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--tt-fg);
}

.tt-assist-bubble {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  border: none;
  outline: none;
  padding: 0;
  /* iOS/WebKit fait disparaitre les elements position:fixed quand un ancetre
     (ici body, via .menu-open/.search-open dans site.css) a overflow:hidden.
     Forcer sa propre couche de composition sur la bulle (pas sur le conteneur
     parent #ticthink-assistant : un transform sur ce parent redefinirait le
     point de reference des overlays fixed enfants -> fenetre de connexion/chat
     coincee dans le cadre 92x71px de la bulle au lieu du plein ecran) contourne
     le bug ; Chrome/Blink n'en a pas besoin mais ca ne change rien pour lui.
     Combine avec scale() dans transform/transform:active ci-dessous. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.tt-assist-bubble:hover {
  transform: translateZ(0) scale(1.06);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.tt-assist-bubble:active { transform: translateZ(0) scale(0.97); }

.tt-assist-bubble svg { width: 92px; height: auto; display: block; }

.tt-assist-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: #e8735a;
  border-radius: 50%;
  border: 2px solid var(--tt-bg);
  display: none;
}
.tt-assist-badge.active { display: block; }

/* ========== TOOLTIP "ASK TICTHINK" AU SURVOL DE LA BULLE (fermée) ========== */
/* Degrade fonce (vert profond -> quasi noir) plutot que vert vif uni : le
   texte blanc du wordmark se lisait mal sur le vert clair d'origine.
   Animation d'entree plus marquee (translation + scale, courbe "back" avec
   leger rebond) plutot que la micro-translation de 8px d'avant. */
.tt-bubble-tooltip {
  position: absolute;
  bottom: 4px;
  right: 104px;
  background: linear-gradient(135deg, #0f3d29 0%, var(--tt-on-accent) 100%);
  border: 1px solid rgba(0, 209, 102, 0.25);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-glow);
  padding: 16px 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px) scale(0.92);
  transform-origin: right center;
  transition: opacity 0.28s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.28s;
  pointer-events: none;
  white-space: nowrap;
}
.tt-assist-bubble:hover + .tt-bubble-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}
.tt-bubble-tooltip .tt-brand-mark { padding: 0; align-items: center; }
.tt-bubble-tooltip .tt-brand-mark__bubbles { display: none; }
.tt-bubble-tooltip .tt-brand-mark__eyebrow,
.tt-bubble-tooltip .tt-brand-mark__caption { color: rgba(255, 255, 255, 0.8); }
.tt-bubble-tooltip .tt-brand-mark__word { color: #fff; }
@media (max-width: 640px) {
  .tt-bubble-tooltip { display: none; }
}

/* ========== OVERLAY PLEIN ÉCRAN (commun gate + chat) ========== */
.tt-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 12, 18, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tt-fadeIn 0.25s ease;
}
.tt-overlay.open { display: flex; }

.tt-overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--tt-bg-elev);
  border: 1px solid var(--tt-border);
  color: var(--tt-muted);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 20;
}
.tt-overlay-close:hover {
  background: var(--tt-bg);
  color: var(--tt-fg);
  border-color: rgba(255, 255, 255, 0.2);
}
.tt-overlay-close svg { width: 15px; height: 15px; }

/* ========== GATE (connexion requise) — quasi plein ecran, style McKinsey ========== */
/* Deux colonnes : formulaire a gauche, panneau de marque + jeu typographique
   a droite (repris de la version d'origine — la variante carte unique
   centree a ete essayee puis abandonnee). */
.tt-gate {
  position: relative;
  width: min(920px, 100%);
  height: min(600px, 100%);
  background: var(--tt-bg-elev);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
/* Le bouton fermer vit dans .tt-gate (pas .tt-overlay) pour rester ancre
   au coin de la carte maintenant qu'elle ne remplit plus tout l'ecran. */
.tt-gate .tt-overlay-close { top: 16px; right: 16px; }
@media (max-width: 760px) {
  .tt-gate { grid-template-columns: 1fr; height: 100%; overflow-y: auto; }
}

.tt-gate-form {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tt-gate-form h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--tt-fg);
  margin: 0 0 24px;
  text-align: left;
}

.tt-gate-emailrow {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow: hidden;
}
.tt-gate-emailrow input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  padding: 13px 16px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--tt-fg);
}
.tt-gate-emailrow input::placeholder { color: var(--tt-dim); }
.tt-gate-emailrow input:focus { outline: none; }
.tt-gate-emailrow button {
  flex-shrink: 0;
  width: 50px;
  background: var(--tt-accent);
  color: var(--tt-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-gate-emailrow button:hover { background: var(--tt-accent-hover); }

.tt-gate-msg {
  font-size: 12.5px;
  margin-top: 10px;
  min-height: 1.2em;
  color: var(--tt-muted);
}
.tt-gate-msg.err { color: #e8735a; }

/* Etapes mot de passe / inscription / confirmation — inline dans le gate,
   pas de navigation vers espace/auth/*.php (voir tt-gate-step-* dans le JS). */
.tt-gate-back {
  background: none;
  border: none;
  color: var(--tt-muted);
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  display: block;
  transition: color 0.15s;
}
.tt-gate-back:hover { color: var(--tt-fg); }

.tt-gate-substep-email {
  font-size: 13px;
  color: var(--tt-muted);
  margin: -12px 0 18px;
}

.tt-gate-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tt-gate-field { margin-bottom: 10px; }
.tt-gate-field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--tt-fg);
}
.tt-gate-field input::placeholder { color: var(--tt-dim); }
.tt-gate-field input:focus { outline: none; border-color: var(--tt-accent); }

.tt-gate-submit {
  width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
  background: var(--tt-accent);
  color: var(--tt-on-accent);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.tt-gate-submit:hover { background: var(--tt-accent-hover); }

.tt-gate-foot, .tt-gate-terms {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tt-muted);
  margin-top: 14px;
}
.tt-gate-foot a, .tt-gate-terms a { color: var(--tt-muted); text-decoration: underline; }
.tt-gate-foot a:hover, .tt-gate-terms a:hover { color: var(--tt-accent); }

.tt-gate-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-muted);
}
.tt-gate-divider::before, .tt-gate-divider::after {
  content: none;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

/* Boutons Google/LinkedIn reduits a l'icone seule, carres arrondis a contour
   fin gris, cote a cote, centres. --tt-border vaut "transparent" dans ce
   theme (toujours sombre, pas de variante claire) : un vrai gris fixe ici,
   sinon le contour demande est invisible (meme bug que .tt-suggested-progress). */
.tt-gate-social {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.tt-gate-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tt-gate-social-btn:hover {
  border-color: var(--tt-accent);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}
.tt-gate-social-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

.tt-gate-visual {
  background: linear-gradient(160deg, var(--tt-accent) 0%, #00a854 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}
/* display:none pour mobile doit venir APRES la regle de base ci-dessus :
   meme specificite, donc l'ordre source decide — le placer avant (comme
   dans le bloc @media plus haut) se faisait toujours ecraser par ce
   display:flex, et le panneau vert restait visible/empile sur mobile. */
@media (max-width: 760px) {
  .tt-gate-visual { display: none; }
}
.tt-gate-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%);
}
/* Aligne a peu pres avec le champ email du formulaire en face (voir
   padding-top ci-dessus) plutot que centre au milieu du panneau — remplace
   align-items:center. Plafond de largeur garde pour ne pas etirer le
   wordmark/texte anime sur toute la colonne. */
/* margin-bottom pour remonter le bloc un peu au-dessus du centre vertical
   pur (align-items:center sur .tt-gate-visual) sans repasser a un padding-top fixe. */
/* width fixe (pas max-width seul) : sinon le bloc retrecit/grandit en largeur
   avec le texte anime et se decale visuellement, meme "centre". min() pour
   ne jamais deborder si la colonne est plus etroite que 400px (voir .tt-gate,
   carte plafonnee a 920px de large, donc colonne ~460px - padding). */
.tt-gate-visual-inner { position: relative; z-index: 1; width: min(400px, 100%); }
/* Centre (texte + mascotte) au lieu de l'alignement a gauche par defaut de
   .tt-brand-mark. Le conteneur .tt-gate-visual-inner garde une largeur fixe
   (520px, voir ci-dessus) et une position fixe (justify-content:center sur
   le parent) : le bloc entier ne bouge pas quand le texte change/s'anime,
   seul le texte a l'interieur est centre. */
.tt-gate-visual .tt-brand-mark { align-items: center; margin-bottom: 26px; }
.tt-gate-visual .tt-brand-mark__bubbles { margin-bottom: 10px; }
.tt-gate-visual .tt-brand-mark__eyebrow,
.tt-gate-visual .tt-brand-mark__caption { color: rgba(11, 22, 35, 0.7); }
.tt-gate-visual .tt-brand-mark__word { color: var(--tt-on-accent); }
/* Ligne animee (machine a ecrire, typewriterCycle) qui definit l'assistant
   en plusieurs passages. Repasse en retour a la ligne (plus de nowrap) : a
   400px de large les phrases les plus longues debordaient et se faisaient
   couper par l'overflow:hidden de .tt-gate. min-height sur 2 lignes pour
   que le bloc ne saute pas verticalement pendant la frappe/l'effacement. */
.tt-gate-visual .tt-gate-typewriter {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--tt-on-accent);
  margin: 0;
  text-align: left;
  width: 100%;
  min-height: 2.8em;
}

/* ========== CHAT PLEIN ÉCRAN ========== */
.tt-assist-panel {
  width: 100%;
  height: 100%;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
/* La sidebar n'apparait qu'une fois la conversation demarree (comme Ask McKinsey :
   l'ecran d'accueil est plein large, sans sidebar). */
.tt-assist-panel.tt-conv-started { grid-template-columns: 240px 1fr; }
.tt-assist-sidebar { display: none; }
.tt-assist-panel.tt-conv-started .tt-assist-sidebar { display: flex; }
@media (max-width: 760px) {
  /* Pas de colonne laterale sur mobile : le logo + "Nouvelle conversation"
     deviennent un bandeau pleine largeur en haut (meme empilement vertical
     que sur desktop), plutot que de disparaitre completement. */
  .tt-assist-panel.tt-conv-started { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tt-assist-panel.tt-conv-started .tt-assist-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
    flex-shrink: 0;
  }
}

/* Barre laterale : logo + nouvelle conversation */
.tt-assist-sidebar {
  background: var(--tt-bg-elev);
  border-right: 1px solid var(--tt-border);
  padding: 20px 16px;
  flex-direction: column;
  gap: 18px;
}
.tt-assist-new {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--tt-border);
  color: var(--tt-muted);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  align-self: flex-start;
}
.tt-assist-new:hover { border-color: var(--tt-accent); color: var(--tt-fg); }
.tt-assist-new svg { width: 14px; height: 14px; }

.tt-assist-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.tt-assist-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.tt-conv-started .tt-assist-header {
  background: var(--tt-bg-elev);
  border-bottom: 1px solid var(--tt-border);
}
.tt-assist-header-status {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tt-accent);
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.tt-conv-started .tt-assist-header-status { display: flex; }
.tt-status-dot {
  width: 6px; height: 6px;
  background: var(--tt-accent);
  border-radius: 50%;
  animation: tt-pulse 2s infinite;
}
@keyframes tt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.tt-assist-close {
  background: none; border: none; color: var(--tt-muted);
  cursor: pointer; padding: 6px; border-radius: 8px;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.tt-assist-close:hover { color: var(--tt-fg); background: rgba(255,255,255,0.08); }
.tt-assist-close svg { width: 20px; height: 20px; }

.tt-error-banner {
  background: rgba(232, 115, 90, 0.1);
  border: 1px solid rgba(232, 115, 90, 0.2);
  color: #e8735a;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  margin: 12px 24px 0;
  display: none;
}
.tt-error-banner.show { display: block; animation: tt-fadeIn 0.3s ease; }

.tt-assist-messages {
  flex: 1;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.tt-assist-messages::-webkit-scrollbar { width: 5px; }
.tt-assist-messages::-webkit-scrollbar-track { background: transparent; }
.tt-assist-messages::-webkit-scrollbar-thumb { background: var(--tt-border); border-radius: 10px; }

/* Ecran d'accueil (avant le premier message) — plein large, centre, sans sidebar */
.tt-landing-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
}
.tt-landing-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.tt-landing-inner .tt-brand-mark { margin: 0 auto; align-items: center; padding: 0 40px; }
.tt-landing-inner .tt-brand-mark__word { font-size: 64px; margin-bottom: 18px; }
.tt-landing-inner .tt-brand-mark__eyebrow { font-size: 13px; margin-bottom: 12px; }
.tt-landing-inner .tt-brand-mark__caption { font-size: 14px; }
.tt-landing-inner .tt-brand-mark__bubbles {
  align-self: center;
  order: -1;
  width: 90px;
  height: 70px;
  margin: 0 auto 16px;
}
.tt-landing-tagline {
  font-size: 19px;
  color: var(--tt-muted);
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
  min-height: 1.5em;
}
.tt-landing-inputrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  background: linear-gradient(var(--tt-bg), var(--tt-bg)) padding-box,
              linear-gradient(135deg, var(--tt-accent), #000) border-box;
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 10px 10px 10px 30px;
  transition: box-shadow 0.15s;
}
.tt-landing-inputrow:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 209, 102, 0.15);
}
.tt-landing-inputrow input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--tt-fg);
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  padding: 18px 0;
}
.tt-landing-inputrow input::placeholder { color: var(--tt-dim); }
.tt-landing-inputrow button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tt-accent);
  border: none;
  color: var(--tt-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tt-landing-inputrow button:hover { background: var(--tt-accent-hover); }
.tt-landing-inputrow button svg { width: 18px; height: 18px; }

.tt-landing-trending {
  width: 100%;
  padding: 24px 56px 0;
  flex-shrink: 0;
}
.tt-landing-trending .tt-suggested-eyebrow { padding: 0 56px; margin-left: -56px; margin-right: -56px; }

/* Effet de masque sur les bords du carrousel (indique qu'on peut scroller) —
   meme vide, symetrique, a gauche et a droite. */
.tt-suggested-mask {
  position: relative;
  margin: 0 -56px;
}
.tt-suggested-mask::before,
.tt-suggested-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 4px;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}
.tt-suggested-mask::before {
  left: 0;
  background: linear-gradient(90deg, var(--tt-bg) 0%, transparent 100%);
}
.tt-suggested-mask::after {
  right: 0;
  background: linear-gradient(270deg, var(--tt-bg) 0%, transparent 100%);
}
.tt-suggested-mask .tt-suggested-track { padding-left: 56px; padding-right: 56px; }

/* Carrousel navigable au glisser. Le JS (pointer events) gere le glisser
   souris ; au tactile on laisse le scroll natif du navigateur faire le
   travail (plus fiable que reimplementer le glisser en JS sur WebKit/iOS),
   d'ou touch-action: auto au lieu de pan-y ici. */
.tt-suggested-track { cursor: grab; user-select: none; }
.tt-suggested-track.tt-dragging { cursor: grabbing; scroll-behavior: auto; }
.tt-suggested-track.tt-dragging .tt-suggested-pill { pointer-events: none; }

.tt-landing-disclaimer {
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tt-dim);
  padding: 16px 40px 22px;
}
.tt-landing-disclaimer button {
  background: none;
  border: none;
  color: var(--tt-dim);
  text-decoration: underline;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
.tt-landing-disclaimer button:hover { color: var(--tt-muted); }

/* Popup "En savoir plus" */
.tt-info-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(8, 12, 18, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tt-info-modal.open { display: flex; }
.tt-info-modal-card {
  background: var(--tt-bg-elev);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow);
  max-width: 480px;
  width: 100%;
  padding: 28px 28px 24px;
  position: relative;
}
.tt-info-modal-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--tt-fg);
  margin: 0 0 12px;
}
.tt-info-modal-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--tt-muted);
  margin: 0;
}
.tt-info-modal-card a { color: var(--tt-accent); }
.tt-info-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tt-border);
  color: var(--tt-fg);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-info-modal-close svg { width: 13px; height: 13px; }
.tt-suggested-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tt-muted);
  margin: 0 0 14px;
  text-align: left;
}
.tt-suggested-eyebrow svg { width: 16px; height: 16px; color: var(--tt-accent); flex-shrink: 0; }

/* Carrousel horizontal (style "Trending questions") */
.tt-suggested-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tt-suggested-track::-webkit-scrollbar { display: none; }
.tt-suggested-pill {
  background: var(--tt-bg-elev);
  border: 1px solid var(--tt-border);
  color: var(--tt-fg);
  font-size: 16px;
  line-height: 1.45;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  flex: 0 0 auto;
  width: 340px;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-suggested-pill:hover { border-color: var(--tt-accent); background: rgba(0, 209, 102, 0.06); }

.tt-suggested-progress {
  height: 5px;
  /* --tt-border vaut "transparent" dans ce theme (toujours sombre, pas de
     variante claire) : la ligne de fond etait donc invisible. Couleur fixe
     ici pour qu'elle marque bien la piste de glissement derriere le curseur. */
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  margin-top: 12px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.tt-suggested-progress:active { cursor: grabbing; }
.tt-suggested-progress__thumb {
  height: 100%;
  background: var(--tt-accent);
  border-radius: 9999px;
  width: 25%;
  transition: transform 0.1s linear, width 0.1s linear;
  pointer-events: none;
}

.tt-message-bot {
  align-self: flex-start;
  max-width: 88%;
  display: flex;
  gap: 10px;
  animation: tt-fadeIn 0.3s ease;
}
.tt-message-bot-avatar {
  width: 28px; height: 28px;
  background: var(--tt-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--tt-on-accent);
  margin-top: 4px;
}
.tt-message-bot-content {
  background: var(--tt-bg-elev);
  color: var(--tt-fg);
  padding: 14px 16px;
  border-radius: 4px var(--tt-radius-sm) var(--tt-radius-sm) var(--tt-radius-sm);
  line-height: 1.6;
  font-size: 16px;
  border: 1px solid var(--tt-border);
}
.tt-message-bot-content strong { color: #fff; font-weight: 600; }
.tt-message-bot-content p { margin: 0 0 10px 0; }
.tt-message-bot-content p:last-child { margin-bottom: 0; }
.tt-message-bot-content ul { margin: 8px 0; padding-left: 18px; }
.tt-message-bot-content li { margin-bottom: 5px; }

.tt-message-user {
  align-self: flex-start;
  max-width: 85%;
  background: var(--tt-accent);
  color: var(--tt-on-accent);
  padding: 12px 16px;
  border-radius: 4px var(--tt-radius-sm) var(--tt-radius-sm) var(--tt-radius-sm);
  line-height: 1.5;
  font-size: 16px;
  font-weight: 500;
  animation: tt-fadeIn 0.25s ease;
}

@keyframes tt-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tt-typing {
  display: flex; gap: 4px; padding: 16px 18px;
  background: var(--tt-bg-elev);
  border-radius: 4px var(--tt-radius-sm) var(--tt-radius-sm) var(--tt-radius-sm);
  width: fit-content;
  border: 1px solid var(--tt-border);
}
.tt-typing-dot {
  width: 7px; height: 7px;
  background: var(--tt-muted);
  border-radius: 50%;
  animation: tt-typingBounce 1.4s infinite ease-in-out both;
}
.tt-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.tt-typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes tt-typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ========== FORMULAIRE LEAD (nom/email deja connus) ========== */
.tt-lead-form {
  background: var(--tt-bg-elev);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  padding: 18px;
  margin-top: 8px;
  animation: tt-fadeIn 0.35s ease;
}
.tt-lead-form h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px 0;
  color: var(--tt-fg);
}
.tt-lead-form p {
  font-size: 0.82rem;
  color: var(--tt-muted);
  margin: 0 0 14px 0;
  line-height: 1.5;
}
.tt-form-group { margin-bottom: 12px; }
.tt-form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tt-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tt-form-group input,
.tt-form-group select {
  width: 100%;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  color: var(--tt-fg);
  padding: 11px 14px;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.88rem;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}
.tt-form-group input:focus,
.tt-form-group select:focus {
  border-color: var(--tt-accent);
  box-shadow: 0 0 0 3px rgba(0, 209, 102, 0.12);
}
.tt-form-submit {
  width: 100%;
  background: var(--tt-accent);
  color: var(--tt-on-accent);
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tt-form-submit:hover { background: var(--tt-accent-hover); transform: translateY(-1px); }
.tt-form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tt-form-submit svg { width: 16px; height: 16px; }

.tt-lead-form__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--tt-border);
  color: var(--tt-fg);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.tt-lead-form__call:hover { border-color: var(--tt-accent); background: rgba(255, 255, 255, 0.03); }
.tt-lead-form__call svg { width: 14px; height: 14px; }

.tt-form-success { text-align: center; padding: 20px; }
.tt-form-success svg { width: 40px; height: 40px; color: var(--tt-accent); margin-bottom: 12px; }
.tt-form-success h4 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--tt-fg); margin: 0 0 6px 0; }
.tt-form-success p { font-size: 0.85rem; color: var(--tt-muted); margin: 0; }

/* ========== ZONE DE SAISIE ========== */
.tt-assist-input-area {
  padding: 16px 24px;
  background: var(--tt-bg-elev);
  border-top: 1px solid var(--tt-border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.tt-assist-input {
  flex: 1;
  background: var(--tt-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--tt-fg);
  padding: 12px 16px;
  border-radius: 9999px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s;
}
.tt-assist-input:focus { border-color: var(--tt-accent); box-shadow: 0 0 0 3px rgba(0, 209, 102, 0.08); }
.tt-assist-input::placeholder { color: var(--tt-dim); }

.tt-assist-send {
  width: 42px; height: 42px;
  background: var(--tt-accent);
  border: none;
  border-radius: 50%;
  color: var(--tt-on-accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.tt-assist-send:hover { background: var(--tt-accent-hover); transform: scale(1.05); }
.tt-assist-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.tt-assist-send svg { width: 18px; height: 18px; }

.tt-assist-foot {
  text-align: center;
  font-size: 10.5px;
  color: var(--tt-dim);
  padding: 8px 24px 14px;
  background: var(--tt-bg-elev);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  #ticthink-assistant {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .tt-assist-bubble svg { width: 64px; height: auto; }

  /* Plein ecran veritable sur mobile : pas de marge de l'overlay, et 100dvh
     plutot que 100vh (sur Safari iOS, 100vh est calcule sur la hauteur SANS
     la barre d'adresse, ce qui rend le panneau plus grand que l'ecran
     reellement visible et casse le scroll interne des messages). */
  .tt-overlay { padding: 0; }
  .tt-assist-panel {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .tt-gate {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Logo d'accueil : reduit pour tenir sans deborder sur un ecran etroit */
  .tt-landing-inner .tt-brand-mark { padding: 0 26px; }
  .tt-landing-inner .tt-brand-mark__word { font-size: 34px; margin-bottom: 10px; }
  .tt-landing-inner .tt-brand-mark__eyebrow { font-size: 11px; margin-bottom: 8px; }
  .tt-landing-inner .tt-brand-mark__caption { font-size: 12px; }
  .tt-landing-inner .tt-brand-mark__bubbles { width: 62px; height: 48px; margin: 0 auto 10px; }

  .tt-landing-view { padding: 20px 16px; }
  .tt-landing-inner { gap: 18px; }
  .tt-landing-tagline { font-size: 14.5px; }
  .tt-landing-inputrow { padding: 6px 6px 6px 16px; border-radius: 16px; }
  .tt-landing-inputrow input { font-size: 15px; padding: 13px 0; }
  .tt-landing-inputrow button { width: 38px; height: 38px; }

  .tt-landing-trending { padding: 18px 16px 0; }
  .tt-landing-trending .tt-suggested-eyebrow { padding: 0 16px; margin-left: -16px; margin-right: -16px; font-size: 13px; }
  .tt-suggested-mask { margin: 0 -16px; }
  .tt-suggested-mask::before, .tt-suggested-mask::after { width: 16px; }
  .tt-suggested-mask .tt-suggested-track { padding-left: 16px; padding-right: 16px; }
  .tt-suggested-pill { width: 240px; font-size: 14px; padding: 12px 14px; }
  .tt-landing-disclaimer { padding: 12px 20px 16px; font-size: 11px; }

  /* Gate (connexion) */
  .tt-gate-form { padding: 28px 20px; }
  .tt-gate-form h2 { font-size: 19px; }

  /* Panneau de conversation */
  .tt-assist-header { padding: 14px 16px; }
  .tt-assist-messages { padding: 16px; gap: 12px; }
  .tt-message-bot-content, .tt-message-user { font-size: 15px; padding: 12px 14px; }
  .tt-message-bot { max-width: 92%; }
  .tt-message-user { max-width: 90%; }

  .tt-assist-input-area { padding: 12px 14px; }
  .tt-assist-input { font-size: 0.95rem; padding: 11px 14px; }
  .tt-assist-send { width: 38px; height: 38px; }
  .tt-assist-foot { padding: 6px 16px 12px; }

  /* References : vignettes plus compactes pour tenir 1,3 carte visible a la fois */
  .tt-citation-card { max-width: 260px; padding: 10px 16px 10px 10px; gap: 12px; }
  .tt-citation-card__thumb { width: 80px; height: 80px; border-radius: 12px; }
  .tt-citation-card__name { font-size: 14px; }

  .tt-lead-form { padding: 14px; }
  .tt-info-modal-card { padding: 22px 20px 18px; }
}