/* css/sidebar.futuristic.css - barre latérale futuriste */
#fut-sidebar {
	position: fixed;
	left: 18px; 
	top: calc(var(--fut-menu-height, 88px) + 16px);
	width: 72px;
	height: calc(95vh - (var(--fut-menu-height, 88px) + 40px));
	display: flex;
	align-items: flex-start;
	justify-content: center; 
	z-index: 100020;
	pointer-events: auto; 
	background: linear-gradient(180deg, rgba(8,8,12,0.02), rgba(6,6,8,0.02)); 
	border-radius: 12px; 
	padding: 12px 8px; 
	flex-direction: column; 
	gap: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.45); backdrop-filter: blur(6px);
	}
	
.fut-sidebar-list { list-style:none;
 margin:0; padding:0; display:flex; 
 flex-direction:column; gap:10px; 
 align-items:center;
 }
.fut-item { width: 52px;
 height: 52px; 
 display:flex; 
 align-items:center; 
 justify-content:center;
 border-radius:12px; 
 background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
 transition: transform .18s ease, box-shadow .18s ease; 
 cursor: pointer; 
 position: relative; isolation: isolate; 
 outline: none; 
 border: 1px solid rgba(255,255,255,0.03); 
 }
 
.fut-icon { width:28px;
 height:28px; 
 fill: rgba(200,220,255,0.9);
 transition: transform .18s ease, filter .18s ease; }
.fut-item:hover, .fut-item:focus, .fut-item.active { 
transform: translateY(-6px) scale(1.06); 
box-shadow: 0 18px 48px rgba(255,34,34,0.18), 0 24px 120px rgba(255,34,34,0.08); 
border-color: rgba(255,34,34,0.38); 
background: linear-gradient(180deg, rgba(255,34,34,0.04), rgba(255,34,34,0.02)); 
}

.fut-item:hover::after, .fut-item.active::after { 
content: ""; position: absolute;
 inset: -10% -20% -40% -20%; 
 background: radial-gradient(ellipse at 50% 0%, rgba(255,80,80,0.28), rgba(120,10,10,0.06) 40%, rgba(0,0,0,0) 70%); 
 filter: blur(8px) saturate(140%); 
 pointer-events: none; 
 mix-blend-mode: screen; 
 border-radius: 14px;
 animation: redFlame 1800ms ease-in-out infinite; 
 opacity: 0.85; 
 }
 
@keyframes redFlame { 0% { transform: translateY(0) scale(1); opacity:0.8; } 40% { transform: translateY(-6px) scale(1.03); opacity:0.85; } 70% { transform: translateY(-3px) scale(1.02); opacity:0.95; } 100% { transform: translateY(0) scale(1); opacity:0.85; } }
.fut-sidebar-label {
	position: fixed; 
	left: 92px; 
	top: 0; 
	padding: 8px 12px; 
	border-radius: 8px; 
	background: rgba(6,6,10,0.12);
	color: #EAF6FF; 
	font-weight: 700; 
	box-shadow: 0 8px 24px rgba(0,0,0,0.45); 
	pointer-events: none; 
	opacity: 0; 
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(4px); 
	mix-blend-mode: screen; 
	white-space: nowrap;
	z-index: 100030; 
	}
	
.fut-sidebar-label.show { 
opacity: 0.85; 
transform: translateY(0);
 }
 
.fut-sidebar-label::after {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: rgba(6,6,10,0.12);
	filter: blur(1px);
	border-radius: 2px; 
	}
	
@media (max-width: 880px) { #fut-sidebar { display: none !important; } }



/* Bottom futuristic fixed menu */
#fut-bottombar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 100020;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(8,10,18,0.6), rgba(6,8,12,0.5));
  box-shadow: 0 8px 30px rgba(2,6,20,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.03);
}
.fut-bottom-list { list-style:none; margin:0; padding:0; display:flex; gap:8px; align-items:center; }
.fut-bottom-item {
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 1px solid rgba(255,255,255,0.03);
}
.fut-bottom-item:active, .fut-bottom-item:focus, .fut-bottom-item:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.fut-bottom-item .fut-icon { width:26px; height:26px; fill: rgba(220,230,255,0.95); }

/* label for bottom items (same element used but apply .bottom modifier) */
.fut-sidebar-label.bottom { transform: translateY(0) scale(1); padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight:600; color:#fff; pointer-events:none; }
/* ensure it appears above the cursor */
.fut-sidebar-label.bottom.show { opacity: 0.95; transform: translateY(0); }

/* hide bottom bar on very small screens */
@media (max-width: 560px) {
  #fut-bottombar { display: none !important; }
}




/* --- Additional customizations injected by assistant --- */

/* Flame highlight applied to icons (non-intrusive) */
.fut-item.flame-active::before,
.fut-bottom-item.flame-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 10%, rgba(255,120,80,0.95), rgba(255,40,40,0.12) 30%, rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  filter: blur(6px) saturate(130%);
  animation: flarePulse 1200ms ease-in-out infinite;
  z-index: 2;
  opacity: 0.95;
}

/* Keep existing dynamics intact: flame visual only, not replacing hover styles */
@keyframes flarePulse {
  0% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-4px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.85; }
}

/* Distinct geometric shapes for sidebar icons (uses clip-path) */
#fut-sidebar .fut-item:nth-child(1) { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); } /* pentagon */
#fut-sidebar .fut-item:nth-child(2) { clip-path: circle(50% at 50% 50%); } /* circle */
#fut-sidebar .fut-item:nth-child(3) { clip-path: polygon(0 0, 100% 0, 100% 100%); } /* triangle */
#fut-sidebar .fut-item:nth-child(4) { clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); } /* hex-like */
#fut-sidebar .fut-item:nth-child(5) { clip-path: inset(12% 12% 12% 12% round 18%); } /* rounded square */
#fut-sidebar .fut-item:nth-child(6) { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } /* hexagon */
#fut-sidebar .fut-item:nth-child(7) { clip-path: polygon(50% 0, 100% 40%, 80% 100%, 20% 100%, 0 40%); } /* shield-like */
#fut-sidebar .fut-item:nth-child(8) { clip-path: ellipse(50% 40% at 50% 50%); } /* ellipse */
#fut-sidebar .fut-item:nth-child(9) { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } /* star-ish */
#fut-sidebar .fut-item:nth-child(10){ clip-path: polygon(10% 20%, 90% 20%, 90% 80%, 10% 80%); } /* wide rectangle */

/* Slight inner icon adjustment to keep visuals readable inside clip-path */
#fut-sidebar .fut-item .fut-icon { transform-origin: center center; }

/* Make sure sidebar labels are visible even when icons at page edge: allow overflow */
#fut-sidebar, #fut-sidebar * { overflow: visible !important; }

/* Bottom bar label style tweak (appear above bar, with slight glow) */
.fut-sidebar-label.bottom {
  background: linear-gradient(180deg, rgba(20,20,28,0.98), rgba(10,10,16,0.96));
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 18px rgba(255,60,60,0.08) inset;
  transform-origin: center bottom;
  z-index: 100040;
}

/* Sidebar label futuristic offset style */
.fut-sidebar-label {
  background: linear-gradient(180deg, rgba(6,8,14,0.96), rgba(10,12,18,0.9));
  color: #eaf6ff;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  transform-origin: left center;
}

/* ensure label text remains readable */
.fut-sidebar-label.show { opacity: 0.80 !important; transform: translateY(0) !important; }

/* small responsive safety */
@media (max-width: 480px){
  #fut-sidebar { display: none !important; }
}


/* === CONVERSATION HEADER STRUCTURE (INJECTED – DO NOT REMOVE) === */
.conversation-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.conversation-header-center {
  display: flex;
  justify-content: center;
}

.conversation-count {
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(0, 180, 255, 0.18);
  color: #00eaff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
}

.conversation-header {
  overflow: visible;
  z-index: 2;
}


/* === SIDEBAR PANELS CORE (PHASE 2) === */
.sidebar-panel {
  position: fixed;
  top: 0;
  left: 72px;
  width: calc(100% - 72px);
  height: 100vh;
  z-index: 200;
}
.sidebar-panel-active { display: block !important; }


/* =========================================================
   UNIPAY SIDEBAR TRANSPARENCY PATCH
========================================================= */

#fut-sidebar{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

#fut-sidebar .fut-item{
    position: relative;
    z-index: 2;
}

#fut-sidebar-label{
    z-index: 3;
}

/*
 * Desktop-mode override (Assistant)
 *
 * Toujours afficher la barre latérale et agrandir ses éléments,
 * même sur des écrans étroits. Ceci force l'usage du mode
 * ordinateur pour toute largeur d'écran en surclassant les
 * règles existantes. Le but est de désactiver la version
 * mobile et d'augmenter la taille des icônes de la barre.
 */

/* Affiche la barre latérale même en dessous du seuil mobile */
@media (max-width: 880px) {
  #fut-sidebar {
    display: flex !important;
  }
}

/* Largeur et hauteur augmentées de la barre latérale */
#fut-sidebar {
  width: 82px !important;
}

/* Dimension des éléments de la barre latérale */
#fut-sidebar .fut-item {
  width: 64px !important;
  height: 64px !important;
}

/* Taille des icônes dans la barre latérale */
#fut-sidebar .fut-icon {
  width: 32px !important;
  height: 32px !important;
}