/* ============================================================
   GenBox — coquille : barre du haut, navigation, pages,
   barre latérale, modales, lightbox
   ============================================================ */

/* ---------- barre du haut ---------- */
.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s4);
  background: var(--base);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: var(--s6); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--s3); }

.logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo b { color: var(--violet); font-weight: 700; }

.nav { display: flex; gap: 2px; }
.nav-btn {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tx3);
  padding: 7px 13px;
  border-radius: var(--r-sm);
  transition: background var(--speed), color var(--speed);
  white-space: nowrap;
}
.nav-btn:hover { background: var(--raised); color: var(--tx2); }
.nav-btn.active { background: var(--violet-tint); color: var(--violet-txt); }
/* Point terracotta = onglet à accès restreint (visible seulement si accordé). */
.nav-btn[data-admin]::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terra-dim);
  margin-left: 7px;
  vertical-align: middle;
}

/* ---------- dépenses ---------- */
.spending-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tx3);
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
  padding: 6px 14px;
  white-space: nowrap;
}
.spending-item { color: var(--terra-txt); }
.spending-divider { width: 1px; height: 11px; background: var(--line); }

/* ---------- menu utilisateur ---------- */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-full);
  color: var(--tx2);
  transition: background var(--speed);
}
.user-menu-btn:hover { background: var(--raised); }
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--violet), var(--terra));
  color: var(--void);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  flex: none;
}
.user-name { font-size: 13px; font-weight: 500; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 208px;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s1);
  z-index: 40;
}
.user-dropdown-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s1); }
.user-dropdown-name { font-size: 13.5px; font-weight: 600; }
.user-dropdown-role { font-size: var(--fs-xs); color: var(--tx3); margin-top: 2px; }
.user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: var(--tx2);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  transition: background var(--speed), color var(--speed);
}
.user-dropdown-item:hover { background: var(--raised); color: var(--tx); }
.user-dropdown-item.danger { color: var(--danger-txt); }
.user-dropdown-item.danger:hover { background: var(--danger-tint); }

/* ---------- bandeau budget ---------- */
.budget-alert {
  flex: none;
  padding: 9px var(--s4);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.budget-alert.warning { background: var(--warn-tint); color: var(--warn-txt); }
.budget-alert.danger { background: var(--danger-tint); color: var(--danger-txt); }

/* ---------- file d'attente ---------- */
.queue-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--s4);
  background: var(--violet-tint);
  border-bottom: 1px solid var(--violet-dim);
  font-size: 13px;
  color: var(--violet-txt);
}
.queue-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .queue-pulse { animation: qp 1.4s ease-in-out infinite; }
  @keyframes qp { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}
.queue-text { font-weight: 600; flex: none; }
.queue-toggle {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--violet-txt);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--violet-dim);
  flex: none;
}
.queue-toggle:hover { background: var(--violet-dim); color: var(--tx); }

.queue-jobs { display: none; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.queue-bar.open { align-items: flex-start; flex-wrap: wrap; }
.queue-bar.open .queue-jobs { display: flex; width: 100%; margin-top: 6px; }
.queue-job {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--tx2);
  background: var(--void);
  border-radius: var(--r-sm);
  padding: 5px 9px;
}
.queue-job-state {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  flex: none;
}
.queue-job.running .queue-job-state { background: var(--violet); color: var(--void); }
.queue-job.queued .queue-job-state { background: var(--raised); color: var(--tx3); }
.queue-job.done .queue-job-state { background: var(--ok-tint); color: var(--ok-txt); }
.queue-job.error .queue-job-state { background: var(--danger-tint); color: var(--danger-txt); }
.queue-job-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Motif de l'attente et délai estimé — pour que patienter ait une raison. */
.queue-job-eta { font-family: var(--mono); font-size: 10px; color: var(--tx3); flex: none; }
.queue-job button {
  flex: none;
  font-size: 14px; line-height: 1;
  color: var(--tx3);
  padding: 0 4px;
}
.queue-job button:hover { color: var(--danger-txt); }

/* ---------- pages ---------- */
.page { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.page.active { display: flex; }
.page-scroll { flex: 1; overflow-y: auto; }

/* Les écrans qui défilent d'un bloc (Stats, Réglages, Comptes, Roblox)
   portent leur propre défilement vertical ; les écrans à colonnes
   (Studio, Galerie, Musique) le délèguent à leurs zones internes. */
#page-stats, #page-settings, #page-users, #page-roblox { overflow-y: auto; }

/* ---------- barre latérale ---------- */
.sidebar {
  width: var(--side-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--base);
  border-right: 1px solid var(--line-soft);
  min-height: 0;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s3) 10px;
  flex: none;
}
.sidebar-header h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx3);
}
.chats-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--s2) var(--s3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-header-actions { display: flex; gap: 4px; }

/* En-tête de période : l'icône se remplit d'autant plus que c'est récent —
   aujourd'hui plein, hier cerclé, plus ancien réduit à un point. */
.chats-group {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
  padding: var(--s4) 10px 6px;
}
.chats-group svg { flex: none; opacity: 0.75; }
.chats-group:first-child { padding-top: var(--s2); }

/* Pastille du modèle utilisé en dernier dans la conversation. */
.chat-item-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  opacity: 0.55;
  transition: opacity var(--speed), transform var(--speed);
}
.chat-item:hover .chat-item-dot { opacity: 0.9; }
.chat-item.active .chat-item-dot { opacity: 1; transform: scale(1.25); }

/* ---------- dossiers ---------- */
.folder { margin-bottom: 2px; border-radius: var(--r-sm); }
.folder.drop-target { background: var(--violet-tint); box-shadow: inset 0 0 0 1px var(--violet-dim); }
.folder-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--speed);
}
.folder-head:hover { background: var(--raised); }
.folder-caret {
  color: var(--tx3);
  flex: none;
  transition: transform var(--speed);
}
.folder.open .folder-caret { transform: rotate(90deg); }
.folder-icon { color: var(--tx3); flex: none; }
.folder.open .folder-icon { color: var(--violet); }
.folder-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  background: var(--raised);
  padding: 1px 6px;
  border-radius: var(--r-full);
  flex: none;
}
.folder-actions { display: none; gap: 2px; flex: none; }
.folder-head:hover .folder-actions { display: flex; }
.folder-head:hover .folder-count { display: none; }
.folder-actions button {
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  color: var(--tx3);
  font-size: 12px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.folder-actions button:hover { background: var(--hover); color: var(--tx); }
.folder-actions button[data-faction="delete"]:hover { background: var(--danger-tint); color: var(--danger-txt); }
.folder-body { display: none; padding-left: 12px; border-left: 1px solid var(--line-soft); margin-left: 14px; }
.folder.open .folder-body { display: block; }
.folder-empty { font-size: var(--fs-xs); color: var(--tx3); padding: 7px 10px; line-height: 1.5; }
.chat-item.dragging { opacity: 0.45; }
.chat-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--speed);
  position: relative;
}
.chat-item:hover { background: var(--raised); }
.chat-item.active { background: var(--violet-tint); }
.chat-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item.active .chat-item-name { color: var(--tx); }
.chat-item-meta { font-family: var(--mono); font-size: 10.5px; color: var(--tx3); }
.chat-item-actions { display: none; flex: none; }
.chat-item:hover .chat-item-actions, .chat-item.active .chat-item-actions { display: flex; }
.chat-item-actions button {
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  color: var(--tx3);
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.chat-item-actions button:hover { background: var(--danger-tint); color: var(--danger-txt); }

/* ---------- volet mobile ---------- */
.hamburger { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.hamburger span { display: block; width: 17px; height: 2px; background: var(--tx2); border-radius: 2px; }
.sidebar-overlay {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: oklch(0.05 0 0 / 0.6);
  z-index: 18;
}

/* ---------- modales ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}
.modal-overlay { position: absolute; inset: 0; background: oklch(0.05 0 0 / 0.68); }
.modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
}
.modal-content.modal-sm { max-width: 400px; }
.modal-content > h3 { font-size: var(--fs-md); margin-bottom: var(--s2); }
.modal-content > p { font-size: 13.5px; color: var(--tx2); line-height: 1.6; }
.modal-body { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s4) 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }

.setting-row { display: flex; flex-direction: column; gap: 6px; }
.setting-row > label { font-size: var(--fs-sm); font-weight: 600; color: var(--tx2); }

/* Récapitulatif des capacités du modèle choisi, dans la modale de preset. */
.preset-caps-note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--tx3);
}
.input-with-toggle { display: flex; gap: var(--s2); }
.btn-toggle-vis {
  flex: none;
  padding: 0 13px;
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.btn-toggle-vis:hover { background: var(--hover); color: var(--tx); }

.err {
  display: none;
  background: var(--danger-tint);
  border: 1px solid var(--danger-tint);
  color: var(--danger-txt);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.err.show { display: block; }
.code-input {
  text-align: center;
  letter-spacing: 8px;
  font-family: var(--mono);
  font-size: 20px;
}
.secret-box {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--tx2);
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  text-align: center;
  word-break: break-all;
  margin: 10px 0;
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
}
.lightbox-overlay { position: absolute; inset: 0; background: oklch(0.05 0 0 / 0.85); }
.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  max-width: 100%;
  max-height: 100%;
}
.lightbox-content img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  background: var(--void);
}
.lightbox-meta { font-family: var(--mono); font-size: var(--fs-sm); color: var(--tx2); }
.lightbox-close {
  position: absolute;
  top: -42px; right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--tx2);
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: var(--hover); color: var(--tx); }

/* ---------- adaptatif ---------- */
@media (max-width: 1100px) {
  .nav-btn { padding: 7px 10px; font-size: 13px; }
  .spending-bar { padding: 6px 11px; }
}
@media (max-width: 900px) {
  .user-name { display: none; }
  .spending-divider:last-of-type, #month-images { display: none; }
}
@media (max-width: 768px) {
  :root { --topbar-h: 50px; }
  .hamburger { display: flex; }
  .topbar-left { gap: var(--s3); }
  .nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--base);
    border-top: 1px solid var(--line-soft);
    padding: 6px;
    justify-content: space-around;
    z-index: 25;
    overflow-x: auto;
  }
  .nav-btn { font-size: 12px; padding: 8px 10px; }
  .nav-btn[data-admin]::after { display: none; }
  .sidebar {
    position: fixed;
    top: var(--topbar-h); bottom: 0; left: 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .spending-bar { font-size: 10.5px; }
}
@media (max-width: 480px) {
  .modal { padding: var(--s3); }
  .modal-content { padding: var(--s4); }
}