/* ==========================
   IPSURVEILLANCE – BASE THEME
   ========================== */
.ipsur-page, .ipsur-page * { box-sizing: border-box; }
.ipsur-page a { text-decoration: none; }

:root{
  --txt: rgba(245,245,255,0.92);
  --muted: rgba(245,245,255,0.78);
  --muted2: rgba(245,245,255,0.62);

  --border: rgba(200,160,255,0.22);
  --border2: rgba(200,160,255,0.30);

  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.04);

  --priA: rgba(170,110,255,0.70);
  --priB: rgba(110,70,220,0.45);

  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --shadowSoft: 0 10px 40px rgba(0,0,0,.45);
}

html,body{height:100%}
body{
  margin:0;
  color: var(--txt);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: #05000b;
}

/* ===== Fond site ===== */
.ipsur-page{
  position: relative;
  min-height: 100vh;
  padding: clamp(32px, 6vw, 90px) 18px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.ipsur-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 650px at 50% 38%,
      rgba(170,120,255,0.55) 0%,
      rgba(120,80,220,0.28) 38%,
      rgba(30,12,60,0.82) 70%,
      rgba(7,0,15,0.96) 100%),
    linear-gradient(180deg, #07000f 0%, #05000b 100%);
}

/* ===== Card ===== */
.ipsur-card{
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  padding: clamp(22px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* ===== Hero ===== */
.ipsur-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(28px, 4.0vw, 50px);
}
.ipsur-subtitle{
  margin-top: 10px;
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--muted);
}

/* ===== Scintillement titre principal ===== */
.scintille{
  background: linear-gradient(110deg,
    rgba(210,170,255,1) 0%,
    rgba(255,255,255,1) 40%,
    rgba(150,95,255,1) 70%,
    rgba(210,170,255,1) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.6s linear infinite, glow 2.2s ease-in-out infinite;
}
@keyframes shimmer{ to { background-position: 220% 50%; } }
@keyframes glow{
  0%,100% { text-shadow:0 0 18px rgba(170,110,255,.4); }
  50%     { text-shadow:0 0 34px rgba(190,140,255,.8); }
}

/* ==========================
   CHAT
   ========================== */
.panel{
  margin-top: 16px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadowSoft);
  padding: 16px;
}

/* ===== Messages ===== */
.messages{
  height: 460px;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(200,160,255,0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,5,18,.30), rgba(10,5,18,.18));
}

/* ===== Bulles ===== */
.msg{
  max-width: 86%;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
}
.msg.user{
  margin-left: auto;
  background: linear-gradient(135deg, rgba(170,110,255,0.22), rgba(110,70,220,0.14));
  border: 1px solid rgba(200,160,255,0.30);
}
.msg.bot{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,160,255,0.18);
}

/* ===== Welcome ===== */
.welcome{
  position: relative;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(200,160,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  overflow: hidden;
}

.welcome-title{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* ===== POINT VIOLET ===== */
.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(170,110,255,1);
  box-shadow: 0 0 18px rgba(170,110,255,.6);
}

/* ⚡ ÉCLAIR RAPIDE VIOLET FONCÉ */
.welcome-title::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width:22%;
  height:220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(90,40,180,1),
    rgba(190,140,255,1),
    rgba(90,40,180,1),
    transparent
  );
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: ipsur-flash 1.2s cubic-bezier(.6,0,.4,1) infinite;
}

@keyframes ipsur-flash{
  0%   { transform: translateX(-140%); opacity:0; }
  15%  { opacity:1; }
  45%  { transform: translateX(260%); opacity:1; }
  60%  { opacity:0; }
  100% { transform: translateX(260%); opacity:0; }
}

.welcome-text{
  color: var(--muted);
  line-height: 1.6;
}

/* ===== Input ===== */
.input-row{
  display:flex;
  gap:12px;
  margin-top:12px;
}
.input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(200,160,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--txt);
}
.btn{
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(200,160,255,0.35);
  background: linear-gradient(135deg, var(--priA), var(--priB));
  color:#fff;
}

/* ===== Footer ===== */
.ipsur-footnote{
  margin-top:10px;
  font-size:12.5px;
  color: rgba(245,245,255,0.55);
  text-align:center;
}

/* ===== Bouton Accueil ===== */
.ipsur-back-wrapper{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
.ipsur-back-btn{
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(170,110,255,0.55), rgba(110,70,220,0.35));
  border: 1px solid rgba(200,160,255,0.45);
}