/* ===================================================================
   VARIABLES
   =================================================================== */
:root {
  --bg: #fafafa;
  --bg2: #ffffff;
  --text: #0a0a0a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --ring: #d4d4d8;
  --emerald: #10b981;
  --emerald-600: #059669;
  --sky: #0ea5e9;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --indigo: #6366f1;
  --radius: 16px;
  --shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  --histrow-bg: #fafafa;
  --summary-bg: #f4f4f5;
  --chart-grid: #e5e7eb;
  --input-bg: #f4f4f5;
  --track: #f1f5f9;
  --track-checkered: #e2e8f0;
}

[data-theme="dark"] {
  --bg: #282c34;
  --bg2: #3c4049;
  --text: #ffffff;
  --muted: #bdbdbd;
  --border: #4b515c;
  --ring: #5c6370;
  --summary-bg: #4c5059;
  --chart-grid: #5c6370;
  --shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  --histrow-bg: #3c4049;
  --input-bg: #4c5059;
  --track: #2d3139;
  --track-checkered: #4b515c;
}


/* ===================================================================
   BASE STYLES
   =================================================================== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(to bottom, #f4f4f5, #fff);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  transition: background 0.3s, color 0.3s;
}

[data-theme="dark"] body {
  background: linear-gradient(to bottom, var(--bg2), var(--bg));
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 56px;
  position: relative;
}

/* ===================================================================
   COMPONENTS
   =================================================================== */

/* --- Tabs --- */
.tabs {
  display: grid;
  gap: 8px;
  background: #eef0f3;
  border-radius: 14px;
  padding: 6px;
  transition: background 0.3s;
}

[data-theme="dark"] .tabs {
  background: var(--bg);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: #52525b;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s, color 0.3s;
}

[data-theme="dark"] .tab {
  color: var(--muted);
}

.tab.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* --- Card --- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background 0.3s, border-color 0.3s;
}

.card .hdr {
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px; /* Add a small gap between icon and text */
  transition: border-color 0.3s;
}

.card .hdr h2 {
    margin: 0;
}

.card .cnt {
  padding: 20px 24px;
}

/* Collapsible cards (grid trick) */
.card.collapsible > .hdr {
  cursor: pointer;
  user-select: none;
  border-bottom-color: transparent;
  transition: border-color 0.3s;
}
.card.collapsible > .hdr::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.card.collapsible.is-open > .hdr {
  border-bottom-color: var(--border);
}
.card.collapsible.is-open > .hdr::after {
  transform: rotate(180deg);
}
.collapsible > .body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.collapsible.is-open > .body-wrapper {
  grid-template-rows: 1fr;
}
.collapsible > .body-wrapper > .body-inner {
  overflow: hidden;
}
/* Settings page 2-column layout */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Language selector + change password row (2-col → 1-col on mobile) */
.settings-lang-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
@media (max-width: 768px) {
  .settings-lang-row {
    grid-template-columns: 1fr;
  }
}

/* Sub-cards (nested inside a parent card) */
.card.sub-card {
  background: var(--bg);
  box-shadow: none;
  border-radius: 10px;
}
.card.sub-card > .hdr {
  padding: 10px 16px;
  font-size: 13px;
}
.card.sub-card > .body-wrapper > .body-inner > .cnt {
  padding: 14px 16px;
}

/* History items collapsible */
.ai-history-item.collapsible > .summary-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}
.ai-history-item.collapsible > .summary-item::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.ai-history-item.collapsible.is-open > .summary-item::after {
  transform: rotate(180deg);
}
/* Pomodoro history year/month/week collapsible items */
.hist-item.collapsible {
  margin-bottom: 8px;
}
.hist-item.collapsible > .summary-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.hist-item.collapsible > .summary-item::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.hist-item.collapsible.is-open > .summary-item::after {
  transform: rotate(180deg);
}
.hist-item.collapsible > .body-wrapper > .body-inner > .details-content {
  margin-top: 8px;
}
/* Filter-panel headers (funnel icon style) inside collapsible cards */
.card.collapsible > .summary-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.card.collapsible > .summary-item::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.card.collapsible.is-open > .summary-item::after {
  transform: rotate(180deg);
}

/* --- Buttons --- */
.btn {
  border: 1px solid var(--border);
  background: #f4f4f5;
  color: #0a0a0a;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

[data-theme="dark"] .btn {
  background: var(--bg2);
  color: var(--text);
}

.btn.primary {
  background: var(--emerald-600) !important;
  color: white;
  border-color: transparent;
}

.btn.success {
  background: var(--emerald) !important;
  color: white !important;
  border-color: transparent !important;
}

.btn.primary:disabled {
  background: var(--muted) !important; /* Force grey background */
  color: var(--text) !important; /* Force dark text color */
}

.btn.danger {
  background: var(--rose) !important;
  color: white !important;
  border-color: transparent !important;
}

.btn.warning {
  background: var(--amber);
  color: white;
  border-color: transparent;
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn.ghost {
  background: transparent;
}

.btn.ghost:hover {
  background: var(--border);
}

.btn-icon-square {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

/* --- Forms --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  color: var(--text);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.field input {
  width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none; /* Default for light theme */
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--input-bg);
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Invert color for dark theme */
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: var(--bg);
  border-color: var(--sky);
}

[data-theme="dark"] .table tbody tr:hover .ai-request-limit-input {
  background-color: var(--bg);
  border-color: var(--ring);
}

textarea {
  resize: vertical;
}

input[type="color"] {
  padding: 4px;
  height: 38px;
}

/* --- Circle --- */
.circle {
  height: 220px;
  width: 220px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 0 2px var(--ring);
  transition: background 0.3s, box-shadow 0.3s;
}

.circle .pill {
  position: absolute;
  bottom: -10px;
  background: #f4f4f5;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #6b7280;
  transition: background 0.3s, color 0.3s;
}

[data-theme="dark"] .circle .pill {
  background: var(--bg2);
  color: var(--muted);
}

/* Pomodoro Timer Colors */
.circle.focus-active {
  background-color: var(--emerald);
  box-shadow: inset 0 0 0 2px var(--emerald-600);
}

.circle.break-active {
  background-color: var(--amber);
  box-shadow: inset 0 0 0 2px #d97706; /* A darker amber */
}

.focus-active #timer-text,
.focus-active .pill,
.break-active #timer-text,
.break-active .pill {
  color: white;
}

[data-theme="dark"] .focus-active .pill,
[data-theme="dark"] .break-active .pill {
    background-color: rgba(0,0,0,0.2);
}

[data-theme="light"] .focus-active .pill,
[data-theme="light"] .break-active .pill {
    background-color: rgba(0,0,0,0.1);
}

/* --- Badge --- */
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

/* --- Letter grade badges --- */
.badge-letter-A { background: #d1fae5; color: #065f46; font-weight: 600; }
.badge-letter-B { background: #dbeafe; color: #1e40af; font-weight: 600; }
.badge-letter-C { background: #fef3c7; color: #92400e; font-weight: 600; }
.badge-letter-D { background: #ffedd5; color: #9a3412; font-weight: 600; }
.badge-letter-F { background: #fee2e2; color: #991b1b; font-weight: 600; }
[data-theme="dark"] .badge-letter-A { background: #065f46; color: #a7f3d0; }
[data-theme="dark"] .badge-letter-B { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .badge-letter-C { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge-letter-D { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"] .badge-letter-F { background: #7f1d1d; color: #fecaca; }

/* --- GPA pill (next to letter badge in grade list) --- */
.gpa-pill {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--summary-bg);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Progress Bar --- */
.progress {
  height: 8px;
  border-radius: 6px;
  background: #e5e7eb;
  overflow: hidden;
  transition: background 0.3s;
}

[data-theme="dark"] .progress {
  background: var(--ring);
}

.progress > span {
  display: block;
  height: 100%;
  background-color: var(--emerald-600);
}

/* --- Title Pills --- */
.title-pill {
  border-radius: 14px;
  padding: 9px 15px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
  border: 0;
  backdrop-filter: saturate(140%) blur(2px);
  background-clip: padding-box;
  font-size: 18px;
}

.title-pilier {
  color: #fff;
  background: linear-gradient(90deg, #10b981, #059669);
  box-shadow: 0 10px 22px rgba(16, 185, 129, .3);
}

.title-marathonien {
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  box-shadow: 0 10px 22px rgba(245, 158, 11, .3);
}

.title-matheux {
  color: #fff;
  background: linear-gradient(90deg, #d946ef, #a21caf);
  box-shadow: 0 10px 22px rgba(217, 70, 239, .3);
}

.title-physicien {
  color: #fff;
  background: linear-gradient(90deg, #0ea5e9, #1d4ed8);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24), 0 4px 10px rgba(14, 165, 233, .22);
  filter: saturate(1.02);
}

.title-informaticien {
  color: #fff;
  background: linear-gradient(90deg, #fb7185, #e11d48);
  box-shadow: 0 10px 22px rgba(241, 71, 111, .3);
}

.title-ecrivain {
  color: #fff;
  background: linear-gradient(90deg, #a6e4ed, #194d6b);
  box-shadow: 0 10px 22px rgba(77, 182, 252, 0.3);
}

.title-bilingue {
  color: #fff;
  background: linear-gradient(90deg, #7c76e4, #3731a2);
  box-shadow: 0 10px 22px rgba(99, 102, 241, .3);
}

.title-legende {
  color: #fff;
  background: linear-gradient(270deg, #fa3553, #0370f6, #d423f0);
  background-size: 400% 400%;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
  animation: legende-glow 10s ease-in-out infinite;
}

@keyframes legende-glow {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .5);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
  }
}

.title-divinite {
  color: #fff;
  background: linear-gradient(90deg, #fde68a, #fcd34d, #f59e0b);
  background-size: 200% 200%;
  box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.7);
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  animation: divine-halo 4s ease-in-out infinite;
}

@keyframes divine-halo {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.7);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 30px 10px rgba(252, 211, 77, 0.9);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.7);
  }
}

.title-alien {
  color: #fff;
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff0000);
  background-size: 400% 400%;
  animation: psychedelic-bg 5s ease infinite;
  text-shadow: 2px 2px 4px #000000;
}

@keyframes psychedelic-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- History Row --- */
.histrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--histrow-bg);
  border-radius: 12px;
  padding: 8px 12px;
  transition: background 0.3s, border-color 0.3s;
}

/* --- Grade click/swipe-to-reveal --- */
.grade-swipe-wrap { margin-bottom: 8px; position: relative; overflow: hidden; border-radius: 12px; }
.grade-main { flex: 1; min-width: 0; }
.histrow.grade-swipeable { border-left-width: 5px; cursor: pointer; position: relative; transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background 0.3s, border-color 0.3s; will-change: transform; }
.grade-meta-coeff { display: none; }
.grade-right-section { display: flex; align-items: center; gap: 16px; }
.grade-score { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.grade-coeff { font-size: 14px; }
.grade-reveal { display: flex; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; border-radius: 0 12px 12px 0; transform: translateX(100%); transition: transform 0.28s cubic-bezier(.25,.46,.45,.94); }
.grade-swipe-wrap.swiped .grade-reveal { transform: translateX(0); }
.grade-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.grade-reveal-btn:not(.danger) { background: #3b82f6; }
.grade-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.grade-reveal-btn:hover { filter: brightness(1.08); }
.grade-swipe-wrap.swiped .histrow.grade-swipeable {
  transform: translateX(-88px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .grade-reveal-btn { width: 56px; font-family: inherit; }
  .grade-swipe-wrap.swiped .histrow.grade-swipeable { transform: translateX(-112px); }
  .grade-meta-coeff { display: inline; }
  .grade-right-section { flex-direction: column; align-items: flex-end; gap: 4px; }
  .grade-score { font-size: 17px; font-weight: 800; }
  .grade-coeff { display: none; }
}

/* --- Pomo click/swipe-to-reveal --- */
.pomo-swipe-wrap {
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.pomo-swipe-wrap .histrow-btns { display: none; }
.pomo-reveal {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0 12px 12px 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);
}
.pomo-swipe-wrap.swiped .pomo-reveal { transform: translateX(0); }
.pomo-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.pomo-reveal-btn:not(.danger) { background: #3b82f6; }
.pomo-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.pomo-reveal-btn:hover { filter: brightness(1.08); }
.histrow.pomo-swipeable {
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background 0.3s, border-color 0.3s;
  will-change: transform;
}
.pomo-swipe-wrap.swiped .histrow.pomo-swipeable {
  transform: translateX(-88px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .pomo-reveal-btn { width: 56px; }
  .pomo-swipe-wrap.swiped .histrow.pomo-swipeable { transform: translateX(-112px); }
}

/* Goals complétés dans la modale de validation : fond vert clair fixe → texte sombre forcé */
.goal-complete-row.completed {
  color: #065f46;
}

[data-theme="dark"] .goal-complete-row.completed {
  color: #6ee7b7 !important;
}

[data-theme="dark"] #pomodoro-goals-bonus-summary {
  color: #6ee7b7 !important;
}

.histrow-title {
  font-weight: 600;
  color: var(--text);
}

/* Layout grid pour les lignes de session historique */
.histrow-session {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title xp   btns"
    "meta  xp   btns";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  justify-content: initial;
}

.histrow-session .histrow-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.histrow-meta {
  grid-area: meta;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.histrow-xp {
  grid-area: xp;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}

.histrow-btns {
  grid-area: btns;
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: center;
}

.histrow-session .comment-box {
  grid-column: 1 / -1;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .histrow-session {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title xp"
      "meta  btns";
    column-gap: 8px;
    row-gap: 5px;
  }

  .histrow-btns .btn {
    background: var(--bg2);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Sub Navigation --- */
.sub-nav-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg2);
}

.sub-nav-btn.active {
  background: var(--sky);
  color: white;
  border-color: transparent;
}

.sub-nav-btn .ico svg {
  width: 14px;
  height: 14px;
}

/* --- Details/Summary --- */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

.summary-item {
  padding: 10px 12px;
  background: var(--summary-bg);
  border-radius: 10px;
  margin-bottom: 8px;
  font-weight: 600;
  transition: background 0.3s;
}

[data-theme="dark"] .summary-item {
  background: var(--summary-bg);
  border: 1px solid var(--border);
}

.details-content {
  padding-left: 16px;
  border-left: 2px solid var(--border);
  margin-bottom: 8px;
  transition: border-color 0.3s;
}

.comment-box {
  font-size: 12px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  white-space: pre-wrap;
  cursor: pointer;
  transition: background 0.3s;
}

[data-theme="dark"] .comment-box {
  background: var(--ring);
}

.news-hdr .news-date {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.news-hdr .news-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
  flex-shrink: 0;
}

.news-card.news-unread {
  border-color: var(--emerald-600);
  background-color: rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] .news-card.news-unread {
  border-color: var(--emerald);
  background-color: rgba(16, 185, 129, 0.12);
}

/* Admin action buttons in news card header */
.news-admin-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Reduce margin for paragraphs generated by Markdown */
.news-content p,
#broadcastMessageContent p,
#broadcast-message-preview p {
  margin-top: 0;
  margin-bottom: 0.75em;
}

#broadcast-message-preview > :first-child {
  margin-top: 0 !important;
}

#broadcast-message-preview > :last-child {
  margin-bottom: 0 !important;
}

/* ── Broadcast modal (Design 1 – Gradient Signature) ── */
#broadcastModal .modal-content {
  padding: 0;
  max-width: 480px;
  overflow: hidden;
}

.broadcast-header {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.broadcast-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.broadcast-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.broadcast-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.broadcast-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: background .2s;
}

.broadcast-close-btn:hover {
  background: rgba(255, 255, 255, .32);
}

.broadcast-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.broadcast-body {
  padding: 20px 22px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}


details.card > summary.hdr {
  border-bottom: 1px solid var(--border);
}

details.card[open] > summary.hdr {
  border-bottom: 1px solid var(--border);
}

details.card:not([open]) > summary.hdr {
  border-bottom: none;
}

/* --- Theme Switch --- */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 44px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .2s;
  border-radius: 24px;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 16px;
  left: 4px;
  position: absolute;
  transition: .2s;
  width: 16px;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--sky);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  background-color: var(--border);
  cursor: not-allowed;
  opacity: 0.7;
}

/* --- Impersonation --- */
.impersonate-link {
  text-decoration: none;
  color: var(--sky);
  font-weight: 500;
}

.impersonate-link:hover {
  text-decoration: underline;
}

.impersonation-banner {
  background: var(--amber);
  color: black;
  padding: 12px;
  text-align: center;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.impersonation-banner .btn {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: black;
  padding: 4px 10px;
}

/* --- Subject & Routine Selection --- */
.subject-clickable,
.routine-clickable {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  background-color: transparent;
}

.subject-clickable:hover,
.routine-clickable:hover {
  background-color: var(--border);
}

.subject-selected,
.routine-selected {
  border: 2px solid currentColor;
  padding: 7px 11px;
  background-color: transparent;
}

.subject-selected:hover,
.routine-selected:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .subject-selected:hover,
[data-theme="dark"] .routine-selected:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.subject-color-display {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* --- Toast Notifications --- */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* Ne bloque pas les clics sur les éléments dessous (banner, Nom|Titre) */
}


.toast {
  padding: 12px 18px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.success {
  background-color: var(--emerald-600);
}

.toast.error {
  background-color: var(--rose);
}

.toast.info {
  background-color: var(--sky);
}

/* --- Disabled Section --- */
.disabled-section {
  pointer-events: none; /* Désactive tous les événements de pointeur */
  opacity: 0.6; /* Grise visuellement */
}
.disabled-section input[type="number"],
.disabled-section input[type="checkbox"] {
  cursor: not-allowed;
}

/* --- Table --- */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  border: 1px solid var(--muted);
  padding: 8px 12px;
}

.table th {
  background-color: var(--summary-bg);
  font-weight: 600;
}

.table tbody tr:nth-child(even) {
  background-color: var(--bg);
}

.table tbody tr:hover {
  background-color: var(--border);
  cursor: pointer;
}

/* --- Ranking Podium (B3 design) --- */
.ranking-podium {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 20px;
}

.podium-step {
  flex: 1;
  min-width: 0;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 14px;
  color: white;
  position: relative;
  overflow: visible;
}
.podium-step.rank1 { min-height: 160px; background: linear-gradient(160deg,#f59e0b,#fbbf24); order: 2; }
.podium-step.rank2 { min-height: 120px; background: linear-gradient(160deg,#9ca3af,#d1d5db); order: 1; color: #374151; }
.podium-step.rank3 { min-height: 90px;  background: linear-gradient(160deg,#b45309,#d97706); order: 3; }

.podium-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
}
.podium-name-row .friend-avail-dot { flex-shrink: 0; }

.podium-medal { font-size: 26px; margin-bottom: 6px; }

.podium-name {
  font-size: 13px; font-weight: 800; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; cursor: pointer;
}
.podium-name:hover { text-decoration: underline; }

.podium-online {
  width: 9px; height: 9px; background: #10b981; border-radius: 50%;
  display: inline-block; margin-left: 4px; vertical-align: middle;
  border: 1.5px solid rgba(255,255,255,0.6);
}

.podium-me-badge {
  font-size: 9px; background: rgba(255,255,255,0.25);
  border-radius: 20px; padding: 1px 6px; margin-top: 2px; display: inline-block;
}

.podium-xp { font-size: 12px; font-weight: 600; opacity: 0.85; margin-top: 2px; }

.podium-mood {
  font-size: 10px; opacity: 0.75; font-style: italic; margin-top: 3px;
  max-width: 100%; overflow: hidden; white-space: normal; text-align: center;
  line-height: 1.35; overflow-wrap: break-word; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.podium-rank-label { font-size: 11px; font-weight: 800; opacity: 0.6; margin-top: 4px; }

.podium-actions-btn {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,0.25); border: none;
  color: inherit; cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background 0.15s;
}
.podium-actions-btn:hover { background: rgba(255,255,255,0.45); }

/* --- Shared action dropdown --- */
.ranking-action-panel {
  position: absolute; top: 36px; right: 0;
  background: var(--bg2); border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  padding: 6px; z-index: 100; min-width: 170px;
  border: 1px solid var(--border); color: var(--text);
}
.ranking-action-panel.hidden { display: none; }

.panel-color-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; transition: background 0.1s; white-space: nowrap;
}
.panel-color-row:hover { background: var(--bg); }
.panel-color-row input[type=color] {
  width: 20px; height: 20px; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px; cursor: pointer; background: none; flex-shrink: 0;
}

.panel-danger-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; font-size: 12px; padding: 6px 8px;
  border-radius: 6px; border: none; background: none;
  color: var(--rose); cursor: pointer; text-align: left;
  transition: background 0.1s; margin-top: 2px; white-space: nowrap;
}
.panel-danger-btn:hover { background: #fff1f2; }

/* --- Compact list (rank 4+) --- */
.ranking-separator {
  border: none; border-top: 1px solid var(--border); margin: 0 0 14px 0;
}

.ranking-compact-list { display: flex; flex-direction: column; gap: 6px; }

.ranking-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 10px;
  border-radius: 10px; border: 1px solid var(--border); border-left-width: 5px;
  background: var(--bg2); transition: background 0.12s, box-shadow 0.12s;
}
.ranking-row:hover { background: var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.ri-pos { font-size: 13px; font-weight: 800; color: var(--muted); width: 22px; flex-shrink: 0; text-align: center; }

.ri-info { flex: 1; min-width: 0; }

.ri-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.ri-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ri-name-text:hover { text-decoration: underline; }

.ri-online { width: 7px; height: 7px; background: #10b981; border-radius: 50%; flex-shrink: 0; }
.friend-avail-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ri-me { font-size: 10px; color: var(--muted); font-weight: 400; flex-shrink: 0; }

.ri-mood {
  font-size: 11px; color: var(--muted); font-style: italic; margin-top: 2px;
  overflow: hidden; white-space: normal; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.ri-xp { font-size: 13px; font-weight: 800; color: var(--emerald); flex-shrink: 0; text-align: right; align-self: flex-start; margin-top: 2px; }
.ri-xp-lbl { font-size: 9px; color: var(--muted); font-weight: 400; display: block; }

.ri-actions-btn-wrap { position: relative; flex-shrink: 0; align-self: flex-start; margin-top: 1px; }
.ri-actions-btn-wrap .ranking-action-panel { top: calc(100% + 4px); right: 0; }

.ri-actions-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg2);
  font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.ri-actions-btn:hover { background: var(--bg); border-color: #d1d5db; }

.current-user-rank {
  background-color: var(--emerald);
  color: white;
  border-color: var(--emerald-600);
}

.current-user-rank .muted {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Accordion --- */
.accordion-header {
  cursor: pointer;
  padding: 12px;
  background-color: var(--summary-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-content {
  padding: 12px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  display: none;
}

.accordion-content.show {
  display: block;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

/* --- User Menu Dropdown --- */
.user-menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ── Mood availability pill ── */
.mood-avail-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 20px;
  padding: 3px 10px 3px 0;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 8px;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.avail-dot {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 0 0 8px;
  cursor: pointer;
  border-radius: 20px 0 0 20px;
  flex-shrink: 0;
}
.avail-dot:hover {
}
.avail-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 8px;
  transition: transform 0.15s;
}
.avail-dot:hover .avail-dot-inner {
  transform: scale(1.25);
}
.avail-sep {
  width: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}
.mood-pill-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 8px;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.mood-pill-txt:hover {
  border-bottom-color: currentColor;
}
.mood-pill-txt.is-empty {
  font-style: italic;
  opacity: 0.7;
}

/* Disponible — Emerald */
.mood-avail-pill.avail-available {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.45);
  color: #065f46;
}
.mood-avail-pill.avail-available .avail-dot-inner { background: #10b981; }
[data-theme="dark"] .mood-avail-pill.avail-available {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.4);
  color: #6ee7b7;
}

/* Occupé — Amber */
.mood-avail-pill.avail-busy {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.45);
  color: #92400e;
}
.mood-avail-pill.avail-busy .avail-dot-inner { background: #f59e0b; }
[data-theme="dark"] .mood-avail-pill.avail-busy {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.4);
  color: #fcd34d;
}

/* Ne pas déranger — Red */
.mood-avail-pill.avail-dnd {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.45);
  color: #991b1b;
}
.mood-avail-pill.avail-dnd .avail-dot-inner { background: #ef4444; }
[data-theme="dark"] .mood-avail-pill.avail-dnd {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.mood-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  max-width: 220px;
}
.mood-edit-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mood-edit-row input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.mood-edit-row button {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: #6366f1;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-pill-wrapper {
  position: relative;
}

.user-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  background-color: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 100;
  padding: 8px;
  overflow: hidden;
}

.user-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
  font-size: 13px;
}

.user-menu-item:hover {
  background-color: var(--border);
}

.user-menu-item .ico svg {
  width: 16px;
  height: 16px;
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media(min-width: 992px) {
  .row.lg-3 {
    grid-template-columns: 0.75fr 0.85fr 1.4fr;
  }

  .row.lg-3 > .card {
    min-width: 0;
  }

  .row.lg-3.row-dashboard-bottom {
    grid-template-columns: 2fr 1fr; /* Adjust for two cards: Objectif hebdo (2 parts) and Titres (1 part) */
  }
}

.flex {
  display: flex;
  align-items: center;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid {
  display: grid;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.justify-start {
  justify-content: flex-start;
}

.muted {
  color: var(--muted);
}

.right-fixed {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 20;
}

.scroller {
  max-height: 320px;
  overflow: auto;
  padding-right: 14px;
}

.ico {
  display: inline-flex;
  gap: 6px;
  vertical-align: -5px;
}

.ico svg {
  width: 20px;
  height: 20px;
}

.hdr .ico svg { /* New rule for icons within .hdr */
  width: 1em;
  height: 1em;
}

.sep {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
  transition: background 0.3s;
}

.sortable-header {
  cursor: pointer;
}

.sortable-header:hover {
  color: var(--sky);
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

#compositeTitlesModal .grid label {
  justify-content: flex-start;
}

/* --- Save Indicator --- */
#save-indicator {
    position: fixed;
    top: 22px;
    right: 250px; /* Adjust as needed */
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* Make it non-interactive */
}

#save-indicator.saving,
#save-indicator.saved,
#save-indicator.error {
    opacity: 1;
}

#save-indicator.saving {
    background-color: var(--muted);
    color: var(--text);
}

#save-indicator.saved {
    background-color: var(--emerald);
}

#save-indicator.error {
    background-color: var(--rose);
}


.composite-title-reqs {
  justify-items: start;
}

/* Routines Page */
.routine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

#routines-content .card:not(:last-child) {
  margin-bottom: 24px;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: background-color 0.2s, opacity 0.3s;
}

.task-item:hover {
  background-color: var(--summary-bg);
}

.task-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.task-description {
  font-weight: 500;
  transition: color 0.3s;
}

.task-streaks-info {
  display: flex;
  gap: 8px; /* Space between current and longest streak */
  align-items: center;
}

.task-streak,
.task-longest-streak {
  font-size: 13px;
  font-weight: 500;
  background-color: var(--summary-bg);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap; /* Prevent wrapping */
}

.task-streak {
  color: var(--amber);
}

.task-longest-streak {
  color: var(--indigo); /* A different color to distinguish */
}

[data-theme="dark"] .task-streak,
[data-theme="dark"] .task-longest-streak {
  background-color: var(--bg);
}

/* Custom Checkbox */
.task-checkbox {
  position: relative;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
  display: flex;
  align-items: center;
}

.task-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox {
  height: 24px;
  width: 24px;
  background-color: var(--summary-bg);
  border: 2px solid var(--ring);
  border-radius: 6px;
  transition: all 0.2s;
  display: inline-block;
}

.task-checkbox:hover input ~ .custom-checkbox {
  border-color: var(--emerald);
}

.task-checkbox input:checked ~ .custom-checkbox {
  background-color: var(--emerald);
  border-color: var(--emerald-600);
}

.custom-checkbox:after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.task-checkbox input:checked ~ .custom-checkbox:after {
  display: block;
}

/* Completed State */
.task-item.completed {
  opacity: 0.6;
}

.task-item.completed .task-description {
  text-decoration: line-through;
  color: var(--muted);
}

/* --- Routine swipe-to-reveal (desktop) --- */
/* --- Routine click/swipe-to-reveal --- */
.routine-swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.routine-reveal { display: flex; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; border-radius: 0 12px 12px 0; transform: translateX(100%); transition: transform 0.28s cubic-bezier(.25,.46,.45,.94); }
.routine-swipe-wrap.swiped .routine-reveal { transform: translateX(0); }
.routine-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.routine-reveal-btn:not(.pause):not(.resume):not(.danger) { background: #3b82f6; }
.routine-reveal-btn.pause { background: #f59e0b; }
.routine-reveal-btn.resume { background: #22c55e; }
.routine-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.routine-reveal-btn:hover { filter: brightness(1.08); }
.routine-item.routine-swipeable {
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background-color 0.3s, border-color 0.3s;
  will-change: transform;
}
.routine-swipe-wrap.swiped .routine-item.routine-swipeable {
  transform: translateX(-132px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .routine-reveal-btn { width: 56px; font-family: inherit; }
  .routine-swipe-wrap.swiped .routine-item.routine-swipeable { transform: translateX(-168px); }
}

/* --- Advisor swipe-to-reveal (desktop) --- */
/* --- Advisor click/swipe-to-reveal --- */
.advisor-swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.advisor-swipe-wrap .routine-actions { display: none; }
.advisor-reveal {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0 12px 12px 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);
}
.advisor-swipe-wrap.swiped .advisor-reveal { transform: translateX(0); }
.advisor-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.advisor-reveal-btn:not(.danger) { background: #3b82f6; }
.advisor-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.advisor-reveal-btn:hover { filter: brightness(1.08); }
.routine-item.advisor-swipeable {
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background-color 0.3s, border-color 0.3s;
  will-change: transform;
}
.advisor-swipe-wrap.swiped .routine-item.advisor-swipeable {
  transform: translateX(-88px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .advisor-reveal-btn { width: 56px; font-family: inherit; }
  .advisor-swipe-wrap.swiped .routine-item.advisor-swipeable { transform: translateX(-112px); }
}

/* --- Friend row swipe-to-reveal (desktop) --- */
/* --- Friend row click/swipe-to-reveal --- */
.friend-row-swipe-wrap { margin-bottom: 6px; position: relative; overflow: hidden; border-radius: 10px; }
.friend-row-swipe-wrap .ri-actions-btn-wrap { display: none; }
.friend-row-reveal {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0 10px 10px 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);
}
.friend-row-swipe-wrap.swiped .friend-row-reveal { transform: translateX(0); }
.friend-row-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
  position: relative;
}
.friend-row-reveal-btn.color { background: #3b82f6; }
.friend-row-reveal-btn.danger { background: #ef4444; border-radius: 0 10px 10px 0; }
.friend-row-reveal-btn:hover { filter: brightness(1.08); }
.friend-row-swipe-wrap.current-user .friend-row-reveal-btn.color { border-radius: 0 10px 10px 0; }
.ranking-row.ri-swipeable {
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background 0.12s, box-shadow 0.12s;
  will-change: transform;
  margin-bottom: 0;
}
/* Ami (2 boutons) : -88px desktop */
.friend-row-swipe-wrap:not(.current-user).swiped .ranking-row.ri-swipeable {
  transform: translateX(-88px);
  border-radius: 10px 0 0 10px;
  border-right-color: transparent;
}
/* Utilisateur courant (1 bouton) : -44px desktop */
.friend-row-swipe-wrap.current-user.swiped .ranking-row.ri-swipeable {
  transform: translateX(-44px);
  border-radius: 10px 0 0 10px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .friend-row-reveal-btn { width: 56px; font-family: inherit; }
  .friend-row-swipe-wrap:not(.current-user).swiped .ranking-row.ri-swipeable { transform: translateX(-112px); }
  .friend-row-swipe-wrap.current-user.swiped .ranking-row.ri-swipeable { transform: translateX(-56px); }
}

/* Routines List */
.routines-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routine-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: background-color 0.2s, opacity 0.3s, border-color 0.3s;
}

.routine-item:hover {
  background-color: var(--summary-bg);
}

.routine-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
}

.routine-description {
  font-weight: 600;
  font-size: 15px;
}

.routine-frequency {
  font-size: 12px;
}

.routine-streaks {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.routine-streaks span {
  background-color: var(--summary-bg);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

[data-theme="dark"] .routine-streaks span {
  background-color: var(--bg);
}

.routine-actions {
  display: flex;
  gap: 8px;
  margin-left: 16px; /* Space between info and actions */
}

.routine-actions .btn-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.routine-actions .btn-icon:hover {
  background-color: var(--summary-bg);
  border-color: var(--ring);
}

.routine-actions .btn-icon i {
  font-size: 16px;
}

/* Paused State */
.routine-item.paused {
  background-color: var(--summary-bg);
}

.routine-item.paused .routine-info {
  opacity: 0.7;
}

.routine-item.paused .routine-description,
.routine-item.paused .routine-frequency,
.routine-item.paused .routine-streaks span {
  color: var(--muted);
}

.routine-item.paused .routine-actions .btn-icon {
  color: var(--muted);
  background-color: var(--bg);
}

.routine-item.paused .routine-actions .btn-icon:hover {
  background-color: var(--border);
}

/* ===================================================================
   MODALS
   =================================================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 2000; /* Augmenté pour être au-dessus de tout */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  /* Centrage moderne robuste */
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: auto; /* Par défaut une modale affichée capture les clics */
}

/* Sécurité : si une modale est masquée via display:none (attribut style), 
   on s'assure qu'elle ne bloque RIEN, même par erreur */
.modal[style*="display: none"] {
    pointer-events: none !important;
}

/* On n'applique l'animation que si explicitement demandé */
.modal.animate-fade {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Animations d'ouverture et fermeture globales ── */
@keyframes modal-elastic-open {
  0%   { transform: scale(0) rotate(-3deg); opacity: 0; }
  50%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  75%  { transform: scale(.97) rotate(-.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes modal-bounce-close {
  0%   { transform: scale(1);    opacity: 1; }
  20%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(.5);   opacity: 0; }
}

.modal-content {
  background-color: var(--bg2);
  margin: auto; /* Le margin:auto dans un conteneur flex centre parfaitement dans les deux axes et gère le scroll */
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 500px;
  position: relative;
  overflow: hidden;
  animation: modal-elastic-open .4s cubic-bezier(.34,1.56,.64,1);
}

.modal.modal-closing .modal-content {
  animation: modal-bounce-close .32s cubic-bezier(.55,0,1,.45) forwards;
}

/* Classe legacy — remplacée par modal-elastic-open global */
.modal.animate-slide .modal-content {
  animation: modal-elastic-open .4s cubic-bezier(.34,1.56,.64,1);
}

/* Specific styling for the friend titles modal content */
#friend-titles-modal .modal-content {
  padding: 0; /* Remove padding for this specific modal */
}

/* Reduce top padding for specific modals */
#thresholdsModal .modal-content,
#compositeTitlesModal .modal-content {
  padding-top: 16px;
}

.modal-header {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--sky); /* Blue background */
  color: white; /* White text */
}

.modal-header h2 {
  margin: 0;
  color: white;
}

.modal-header .btn-icon-square {
  background-color: transparent;
  border: none;
  color: white; /* White icon */
}

.modal-header .btn-icon-square:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

@keyframes slideIn {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.close-modal {
  color: var(--muted);
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  transition: color 0.2s;
}

.close-modal:hover,
.close-modal:focus {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

#routine-modal h3,
#edit-pomodoro-modal h3,
#add-grade-modal h3,
#edit-grade-modal h3,
#thresholdsModal h3,
#compositeTitlesModal h3,
#add-ai-doc-modal h3,
#edit-ai-doc-modal h3,
#news-edit-modal h3 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 18px;
}

#routine-form .form-group {
  margin-bottom: 16px;
  display: flex; /* Use flexbox */
  align-items: center; /* Vertically align items */
  gap: 8px; /* Space between elements */
  justify-content: flex-start;
}

#routine-form .form-group label {
  flex-shrink: 0; /* Prevent label from shrinking */
  margin-bottom: 0; /* Remove default margin */
}

#routine-form .form-group input[type="number"] {
  flex-grow: 0; /* Prevent input from growing */
}

/* #routine-form .form-group span { */
  /* flex-grow: 1; */ /* Allow span to take remaining space */
/* } */ 


#routine-form .form-group:last-child {
  margin-bottom: 0;
  margin-top: 24px;
  justify-content: center;
}

/* --- Minimalist Routine Modal --- */
#routine-modal .modal-content {
    border-radius: 24px;
    padding: 30px;
    max-width: 450px;
}

.routine-description-minimal {
    border: none !important;
    border-bottom: 2px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 12px 0 !important;
    margin-bottom: 10px;
}

.routine-description-minimal:focus {
    border-bottom-color: var(--sky) !important;
    box-shadow: none !important;
}

.segmented-control {
    display: flex;
    background: var(--input-bg);
    padding: 4px;
    border-radius: 14px;
    margin: 20px 0;
}

.segment-item {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    color: var(--muted);
}

.segment-item.active {
    background: var(--bg2);
    color: var(--sky);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.color-picker-minimal {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 15px 0 25px;
}

.color-dot-minimal {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    padding: 0;
}

.color-dot-minimal.active {
    border-color: var(--text);
    transform: scale(1.1);
}

.freq-display-minimal {
    text-align: center;
    padding: 20px 0;
}

.freq-value-minimal {
    font-size: 36px;
    font-weight: 800;
    margin: 10px 0;
    color: var(--text);
}

.minimal-btn-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.minimal-btn-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--input-bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text);
}

.minimal-btn-item.active {
    background: var(--text);
    color: var(--bg2);
}

#routine-modal .actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

#routine-modal .actions .btn {
    flex: 1;
    padding: 15px;
    font-size: 15px;
}



#routine-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--muted);
}

#routine-form input[type="text"],
#routine-form select {
  width: 100%;
}

.form-group-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-group-checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.monthly-dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
}

.monthly-dates-grid label {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.monthly-dates-grid label:hover {
  background-color: var(--summary-bg);
}

.monthly-dates-grid input[type="checkbox"] {
  display: none;
}

.monthly-dates-grid input[type="checkbox"]:checked + span {
  background-color: var(--emerald);
  color: white;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monthly-dates-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.weekly-days-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center; /* Center the buttons */
}

.day-button,
.monthly-day-button {
  background-color: var(--summary-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  min-width: 40px;
  text-align: center;
}

.day-button:hover,
.monthly-day-button:hover {
  background-color: var(--border);
}

.day-button.selected,
.monthly-day-button.selected {
  background-color: var(--sky);
  color: white;
  border-color: var(--sky);
}

[data-theme="dark"] .day-button,
[data-theme="dark"] .monthly-day-button {
  background-color: var(--bg2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .day-button.selected,
[data-theme="dark"] .monthly-day-button.selected {
  background-color: var(--sky);
  border-color: var(--sky);
  color: white;
}

/* ===================================================================
   MOBILE NAVIGATION (Hamburger Menu)
   =================================================================== */
.hamburger-menu-toggle {
  display: none; /* Hidden by default on desktop */
  position: fixed; /* Use fixed to ensure it's always in the viewport */
  top: 0px;
  left: 0px;
  padding: 10px; /* Add padding for better click area */
  z-index: 30; /* Above user-menu-container */
  cursor: pointer;
  background: transparent; /* Ensure no background interferes */
  border: none; /* Remove any default button border */
}

.hamburger-menu-toggle svg {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  display: block; /* Ensure it takes up its own space */
  stroke: var(--text); /* Use text color for the lines */
  stroke-width: 2;
}

.mobile-nav-close-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto; /* Allow the icon to dictate width */
  height: auto; /* Allow the icon to dictate height */
  padding: 0; /* Remove padding from the button itself */
}

.mobile-nav-close-btn .ico svg {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  stroke: var(--text); /* Use text color for the lines */
  stroke-width: 2;
}





.mobile-nav-menu {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg2);
  z-index: 25; /* Below hamburger toggle, above app content */
  overflow-y: auto;
  transform: translateX(-100%); /* Start off-screen to the left */
  transition: transform 0.3s ease-out;
  box-shadow: var(--shadow);
}

.mobile-nav-menu.show {
  transform: translateX(0); /* Slide in */
}

.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background-color: var(--summary-bg);
}

.mobile-nav-title {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--text);
}

.mobile-nav-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
  font-size: 16px;
  transition: background-color 0.2s;
}

.mobile-nav-item:hover {
  background-color: var(--border);
}

.mobile-nav-item.active {
  background-color: var(--sky);
  color: white;
}

.mobile-nav-item .ico svg {
  width: 20px;
  height: 20px;
}

/* Media Queries for responsiveness */
@media (max-width: 768px) {
  .tabs {
    display: none;
  }

  .hamburger-menu-toggle {
    display: flex;
  }

  .mobile-nav-menu {
    display: block;
  }

  .right-fixed {
    right: 16px;
    left: auto;
  }

  .routine-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .routine-info {
    width: 100%;
    margin-bottom: 8px;
  }

  .routine-actions {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .routine-streaks span {
    white-space: normal;
  }

  .user-menu.show {
    display: none !important;
  }
}

@media (min-width: 769px) { /* Adjust breakpoint as needed */
  .hamburger-menu-toggle,
  .mobile-nav-menu {
    display: none !important; /* Hide mobile elements on desktop */
  }
}

/* --- Title Selection in User Menu --- */
.user-menu-section-header {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
 
.title-selection-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
}

.title-option {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  font-size: 13px;
  color: var(--text);
}

.title-option:hover {
  background-color: var(--border);
}

.title-option.selected {
  background-color: var(--sky);
  color: white;
  font-weight: 600;
}



/* --- Mobile Responsiveness Fixes --- */
@media (max-width: 768px) {
  .mobile-two-col-grid {
    grid-template-columns: 1fr !important; /* Force single column for these grids */
  }

  .mobile-auto-fit-grid {
    grid-template-columns: 1fr !important; /* Force single column for these grids */
  }
}

/* --- Unlocked Titles Modal — Hall of Fame --- */
#friend-titles-modal .modal-header {
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
}

.hof-body {
  padding: 20px;
}

.hof-featured {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #fcd34d;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hof-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .hof-featured {
  background: linear-gradient(135deg, #3d3010, #4a3a0e);
  border-color: #a07d10;
}

.hof-feat-latest {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.55);
  color: #92400e;
  padding: 2px 8px;
  border-radius: 20px;
}

[data-theme="dark"] .hof-feat-latest {
  background: rgba(0, 0, 0, 0.3);
  color: #fcd34d;
}

.hof-feat-emoji {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}

.hof-feat-info {
  min-width: 0;
}

.hof-feat-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #78350f;
  margin-bottom: 4px;
}

[data-theme="dark"] .hof-feat-name {
  color: #fde68a;
}

.hof-feat-date {
  font-size: 0.8rem;
  color: #92400e;
}

[data-theme="dark"] .hof-feat-date {
  color: #ca9a1a;
}

.hof-others-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.hof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hof-mini {
  background: var(--summary-bg);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hof-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.hof-mini-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.hof-mini-date {
  font-size: 0.68rem;
  color: var(--muted);
}

.hof-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.hide-on-create {
    display: none;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content .field-group {
    display: flex;
    gap: 16px;
}

.modal-content .field-group .field {
    flex: 1;
}
/* --- AI Assistant Styles --- */
#ai-prompt-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-quota-info {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-align: right;
    margin-left: 16px;
}

.prompt-input-wrapper {
    position: relative;
    width: 100%;
}

#ai-prompt-input {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    padding-right: 40px; /* Space for the clear button */
}

#ai-clear-prompt-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 1; /* Ensure it's above the textarea */
    background: var(--bg2); /* Ensure it has a background to stand out */
    border-radius: 50%; /* Make it round */
    width: 30px; /* Smaller size */
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow); /* Add a subtle shadow */
    border: 1px solid var(--border);
}

#ai-clear-prompt-btn .ico svg {
    width: 16px;
    height: 16px;
    stroke: var(--muted); /* Use muted color for the icon */
}

#ai-clear-prompt-btn:hover {
    background: var(--summary-bg);
    border-color: var(--ring);
}

#ai-clear-prompt-btn:hover .ico svg {
    stroke: var(--text);
}

/* --- Coop Invitation Modal (Social Pulse) --- */
.coop-invitation-modal-pulse .modal-content {
    max-width: 400px;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
}

.coop-invitation-modal-pulse .modal-header-pulse,
.coop-lobby-modal-social .modal-header-pulse {
    background: linear-gradient(135deg, var(--sky), #6366f1);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    color: white;
}

.coop-invitation-modal-pulse .pulse-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-white-glow 2s infinite;
}

@keyframes pulse-white-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.coop-invitation-modal-pulse .duration-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg2);
    border: 4px solid var(--sky);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -40px auto 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
}

.coop-invitation-modal-pulse .duration-circle .val { font-size: 20px; font-weight: 900; color: var(--sky); line-height: 1; }
.coop-invitation-modal-pulse .duration-circle .lbl { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; }

.coop-invitation-modal-pulse .modal-body {
    padding: 0 32px 32px;
    text-align: center;
}

.coop-invitation-modal-pulse .invitation-text {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 30px;
    line-height: 1.5;
}

.coop-invitation-modal-pulse .invitation-text b {
    color: var(--sky);
    font-weight: 800;
}

.coop-invitation-modal-pulse .modal-actions,
.coop-lobby-modal-social .modal-actions {
    display: flex;
    gap: 12px;
}

.coop-invitation-modal-pulse .btn-pill,
.coop-lobby-modal-social .btn-pill {
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    flex: 1;
}

/* --- Coop Lobby Social Design --- */
.coop-lobby-modal-social .modal-content {
    max-width: 550px;
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
}

.coop-lobby-modal-social .grid-friends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 24px;
}

.coop-lobby-modal-social .friend-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border: 2px solid var(--border);
    text-align: center;
    position: relative;
    background: var(--bg);
    transition: all 0.2s;
}

.coop-lobby-modal-social .friend-tile.accepted {
    border-color: var(--emerald);
    background: #f0fdf4;
}

[data-theme="dark"] .coop-lobby-modal-social .friend-tile.accepted {
    background: rgba(16, 185, 129, 0.1);
}

.coop-lobby-modal-social .friend-tile .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--border);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--muted);
}

.coop-lobby-modal-social .friend-tile.accepted .avatar {
    background: var(--emerald);
    color: white;
}

.coop-lobby-modal-social .badge-mini {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.coop-lobby-modal-social .badge-ready { background: var(--emerald); color: white; }
.coop-lobby-modal-social .badge-waiting { background: var(--border); color: var(--muted); }
.coop-lobby-modal-social .badge-rejected { background: var(--rose); color: white; }

.coop-lobby-modal-social .tile-status-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.coop-lobby-modal-social .tile-status-corner .badge-mini {
    position: static; /* Sortir du positionnement absolu individuel */
}

.coop-lobby-modal-social .btn-mini-plus {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--emerald-600);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
    padding: 0;
}

.coop-lobby-modal-social .btn-mini-plus:hover {
    background: var(--emerald);
    transform: scale(1.1);
}

.coop-lobby-modal-social .btn-mini-plus svg {
    width: 14px;
    height: 14px;
}

.coop-lobby-modal-social .reinvite-overlay {
    margin-top: 10px;
    width: 100%;
}

/* --- Coop Banner & Drawer (Fixed Overlay) --- */
:root {
    --coop-banner-height: 80px; /* JS will adjust this dynamically */
}

/* Le Web Component <coop-banner> lui-même */
coop-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1500; /* Above everything but toasts */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* LAISSE PASSER LES CLICS PAR DÉFAUT */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

coop-banner.is-open {
    transform: translateY(0);
}

coop-banner.is-closed {
    /* On remonte le bandeau pour ne laisser que la languette */
    transform: translateY(-100%);
}

.coop-banner-active {
    width: 100%;
    background: var(--bg2);
    border-bottom: 3px solid var(--sky);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 20px;
    min-height: 60px;
    transition: background 0.3s;
    pointer-events: auto; /* La barre du bannière est propriétaire de son rectangle — les clics ne traversent pas vers .right-fixed */
}

@media (max-width: 768px) {
    .coop-banner-active { 
        padding: 10px; 
        gap: 10px; 
    }
}

/* Zone 1: Timelines (FLEXIBLE) */
.coop-banner-timeline-zone {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 15px;
    padding: 0; /* Centralisé sur le parent */
}

@media (max-width: 768px) {
    .coop-banner-timeline-zone {
        gap: 8px;
    }
}

.coop-names-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px;
}

@media (max-width: 768px) {
    .coop-names-col {
        min-width: 65px;
        max-width: 65px;
    }
}

.coop-name-item {
    font-size: 13px;
    font-weight: 500;
    height: 16px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-transform: capitalize;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .coop-name-item {
        font-size: 11px;
    }
}

.coop-name-item.is-me { color: var(--sky); }
.coop-name-item.is-creator { font-weight: 800; }

.coop-svg-col {
    flex: 1;
    display: flex;
    align-items: center;
}

.coop-banner-timeline-zone svg {
    width: 100%;
    display: block;
}

/* Zone 2: Timer (FIXE - Masqué sur mobile) */
.coop-banner-timer-zone {
    flex: 0 0 auto;
    border-left: 1px solid var(--border);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* On masque le gros timer sur mobile pour laisser de la place aux timelines */
@media (max-width: 768px) {
    .coop-banner-timer-zone {
        display: none;
    }
}

.coop-timer-val {
    font-size: 32px;
    font-weight: 900;
    font-family: monospace;
    color: var(--text);
    line-height: 1;
}

.coop-timer-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 1.5px;
    margin-top: 4px;
}

/* Zone 3: Actions */
.coop-banner-actions-zone {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: auto; /* Réactive les clics sur les boutons invite/leave */
}

/* Boutons cerclés */
.btn-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--ring);
    background: var(--bg2);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-circle.small {
    width: 32px;
    height: 32px;
    font-weight: 800;
    font-size: 13px;
}

.btn-icon-circle:hover { 
    background: var(--summary-bg); 
    color: var(--sky); 
    border-color: var(--sky); 
}

.btn-icon-circle.primary {
    border-color: var(--emerald-600);
    color: var(--emerald-600);
}

.btn-icon-circle.primary:hover {
    background: var(--emerald-600);
    color: white;
    border-color: var(--emerald-600);
}

.btn-icon-circle.danger {
    border-color: var(--rose);
    color: var(--rose);
}

.btn-icon-circle.danger:hover { 
    color: white; 
    border-color: var(--rose); 
    background: var(--rose); 
}

/* Languette de contrôle (Handle) - MODIFIÉE pour accueillir le timer mobile */
.coop-drawer-handle {
    position: absolute;
    bottom: -26px; /* Légèrement plus bas */
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg2);
    border: 2px solid var(--sky);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 2px 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    min-height: 26px;
    transition: background 0.2s;
    pointer-events: auto;
}

.handle-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: var(--sky);
    font-family: monospace;
    font-weight: 800;
    font-size: 14px;
}

.handle-content svg {
    width: 18px;
    height: 18px;
}

.handle-timer { 
    font-family: monospace; 
    color: var(--sky); 
    font-weight: 800; 
    font-size: 14px;
}

.handle-icon { 
    color: var(--sky); 
    display: flex; 
    align-items: center; 
}

.handle-icon svg { 
    width: 18px; 
    height: 18px; 
}

/* Affichage du timer dans la languette sur mobile (toujours visible) */
@media (max-width: 768px) {
    .handle-timer {
        opacity: 1 !important;
    }
    .handle-icon {
        display: none;
    }
    .coop-drawer-handle {
        min-width: 110px;
    }
}



#ai-submit-btn {
    width: 100%;
}

.token-usage {
    font-size: 0.8em;
    color: #888;
    text-align: right;
    padding: 5px 10px;
    border-top: 1px solid #eee;
}

/* Unify spacing for generated markdown content */
#ai-response-content p,
.llm-response p,
#ai-response-content ul,
.llm-response ul,
#ai-response-content ol,
.llm-response ol {
    margin-bottom: 0.75em;
}

/* --- Coop Create Modal (Social Pulse Redesign) --- */
.coop-create-modal-pulse .modal-content {
    max-width: 400px;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
}

.coop-create-modal-pulse .modal-header-pulse {
    background: linear-gradient(135deg, var(--sky), #6366f1);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    color: white;
}

.duration-circle-interactive {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg2);
    border: 4px solid var(--sky);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -40px auto 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.duration-circle-interactive:hover { transform: scale(1.05); }
.duration-circle-interactive .val { font-size: 20px; font-weight: 900; color: var(--sky); line-height: 1; }
.duration-circle-interactive .lbl { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; }

.duration-circle-interactive input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--sky);
    border: none;
    background: var(--bg2);
    border-radius: 50%;
    outline: none;
}

.duration-circle-interactive input:focus {
    opacity: 1; 
    border: 2px solid var(--sky);
}

.coop-create-modal-pulse .friend-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 0 24px 24px;
    max-height: 250px;
    overflow-y: auto;
}

.coop-create-modal-pulse .coop-friend-tile {
    padding: 10px 8px;
    border: 2px solid var(--border);
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg);
    color: var(--muted);
    transition: all 0.2s;
}

.coop-create-modal-pulse .coop-friend-tile.selected {
    border-color: var(--emerald-600);
    color: var(--emerald-600);
    background: var(--bg2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.coop-create-modal-pulse .modal-actions {
    padding: 0 24px 24px;
    display: flex;
    justify-content: center;
}

.coop-create-modal-pulse .btn-pill {
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    width: 100%;
}

/* --- Lobby Duration Circle --- */
.coop-lobby-modal-social .duration-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bg2);
    border: 4px solid var(--sky);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -35px auto 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.coop-lobby-modal-social .duration-circle .val { 
    font-size: 18px; 
    font-weight: 900; 
    color: var(--sky); 
    line-height: 1; 
}

.coop-lobby-modal-social .duration-circle .lbl { 
    font-size: 9px; 
    font-weight: 700; 
    color: var(--muted); 
    margin-top: 2px;
}

/* --- Button Icons --- */
.btn svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* ── Goal difficulty select ── */
.goal-difficulty-select {
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 10px;
  padding: 9px 28px 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.goal-difficulty-select:focus { border-color: var(--sky); }
.diff-lvl-1 { color: #16a34a !important; border-color: #bbf7d0 !important; background-color: #f0fdf4 !important; }
.diff-lvl-2 { color: #2563eb !important; border-color: #bfdbfe !important; background-color: #eff6ff !important; }
.diff-lvl-3 { color: #d97706 !important; border-color: #fde68a !important; background-color: #fffbeb !important; }
.diff-lvl-4 { color: #ea580c !important; border-color: #fed7aa !important; background-color: #fff7ed !important; }
.diff-lvl-5 { color: #dc2626 !important; border-color: #fecaca !important; background-color: #fef2f2 !important; }
[data-theme="dark"] .diff-lvl-1 { background-color: #14532d !important; border-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] .diff-lvl-2 { background-color: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
[data-theme="dark"] .diff-lvl-3 { background-color: #78350f !important; border-color: #92400e !important; color: #fcd34d !important; }
[data-theme="dark"] .diff-lvl-4 { background-color: #7c2d12 !important; border-color: #9a3412 !important; color: #fdba74 !important; }
[data-theme="dark"] .diff-lvl-5 { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fca5a5 !important; }

/* ── Goal difficulty info icon + tooltip ── */
.diff-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--muted);
  color: white;
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  cursor: default;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  vertical-align: middle;
  transition: background .15s;
}
.diff-info-icon:hover { background: var(--sky); }
.diff-info-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
  min-width: 190px;
  z-index: 9999;
  pointer-events: none;
  white-space: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--text);
}
.diff-info-icon:hover .diff-info-tooltip { display: flex; flex-direction: column; gap: 4px; }
.diff-info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 6px; transform: none;
  border: 6px solid transparent;
  border-top-color: var(--border);
}
.diff-info-tooltip::before {
  content: '';
  position: absolute;
  top: 100%; left: 6px; transform: none;
  border: 5px solid transparent;
  border-top-color: var(--bg2);
  z-index: 1;
  margin-top: -1px;
}
.diff-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}
.diff-tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.diff-tip-xp {
  margin-left: auto;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   CHAT DOCK
════════════════════════════════════════════════════════════ */

/* ── Dock container ── */
#chat-dock {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 14px;
  z-index: 100;
  pointer-events: none;
}
#chat-dock > * { pointer-events: all; }

/* ── Hub ── */
#chat-hub-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}
.chat-hub-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#4338ca);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
  margin: 10px 0;
  position: relative;
  transition: transform .2s;
  flex-shrink: 0;
}
.chat-hub-btn:hover { transform: scale(1.08); }
.chat-hub-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.chat-hub-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  border: 2px solid var(--bg2);
  font-size: 9px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: 0 2px;
}

/* ── Hub panel ── */
.chat-hub-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  width: 260px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: chat-open .25s ease-out;
}
.chat-hub-panel.open { display: flex; }
.hub-ph {
  background: linear-gradient(135deg,#6366f1,#4338ca);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.hub-ph span { font-size: 13px; font-weight: 700; color: #fff; }
.hub-ph button {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-body { overflow-y: auto; max-height: 320px; }
.hub-section {
  padding: 7px 13px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.hub-item, .hub-friend-item {
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.hub-item:last-child, .hub-friend-item:last-child { border-bottom: none; }
.hub-item:hover, .hub-friend-item:hover { background: var(--input-bg); }
.hub-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.hub-av-group { border-radius: 9px; }
.hub-av svg { width: 15px; height: 15px; }
.hub-av-presence {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg2);
}
.hub-info { flex: 1; min-width: 0; }
.hub-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-sub { font-size: 10px; color: var(--muted); }
.hub-type {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.hub-type-1on1 { background: rgba(99,102,241,.15); color: #6366f1; }
.hub-type-salon { background: rgba(245,158,11,.15); color: #f59e0b; }
.hub-chat-icon { width: 14px; height: 14px; flex-shrink: 0; }
.hub-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ── Fenêtre de chat ── */
.chat-win {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  width: 258px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0,0,0,.13);
  overflow: hidden;
  flex-shrink: 0;
  animation: chat-open .4s ease-out;
  position: relative;
}
.chat-win.cw-minimized .cw-body,
.chat-win.cw-minimized .cw-foot,
.chat-win.cw-minimized .cw-parts { display: none; }

/* En-tête */
.cw-hdr {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.cw-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cw-av-group { border-radius: 7px; }
.cw-av-group svg { width: 14px; height: 14px; }
.cw-title { flex: 1; min-width: 0; }
.cw-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-sub { font-size: 10px; color: rgba(255,255,255,.75); }
.cw-type-tag {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  flex-shrink: 0;
}
.cw-type-tag-support {
  background: rgba(251,191,36,.25);
  color: #fbbf24;
}
.cw-ctrls { display: flex; gap: 3px; flex-shrink: 0; }
.cc {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  flex-shrink: 0;
  line-height: 1;
}
.cc:hover { background: rgba(255,255,255,.35); }
.cc svg { width: 10px; height: 10px; }
.cw-unread-badge {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  animation: chat-pulse 1.5s infinite;
}
@keyframes chat-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Bandeau participants */
.cw-parts {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cw-part-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--bg2);
  flex-shrink: 0;
  cursor: default;
  position: relative;
}
.cw-part-av:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.cw-invite-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,.18);
  border: none;
  color: rgba(255,255,255,.9);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
  margin-left: 2px;
}
.cw-invite-chip:hover { background: rgba(255,255,255,.28); }
.cw-invite-chip svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* Corps messages */
.cw-body {
  flex: 1;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 190px;
  max-height: 230px;
  overflow-y: auto;
  background: var(--bg);
}
.cw-msg { display: flex; flex-direction: column; max-width: 85%; }
.cw-msg-me { align-self: flex-end; align-items: flex-end; }
.cw-msg-them { align-self: flex-start; align-items: flex-start; }
.cw-bubble {
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.cw-msg-me .cw-bubble {
  background: linear-gradient(135deg,#6366f1,#4338ca);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.cw-bubble-them {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px !important;
  border-radius: 11px;
}
.cw-msg-time { font-size: 9px; color: var(--muted); margin-top: 2px; }
.cw-msg-label { font-size: 9px; font-weight: 700; margin-bottom: 2px; }
.cw-sys-msg {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  padding: 4px 8px;
  background: var(--input-bg);
  border-radius: 6px;
  align-self: center;
  font-style: italic;
  max-width: 95%;
}

/* Pied de fenêtre */
.cw-foot {
  padding: 7px 9px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.cw-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  resize: none;
  min-height: 28px;
  max-height: 72px;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.cw-input:focus { border-color: #6366f1; }
.cw-send-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg,#6366f1,#4338ca);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cw-send-btn svg { width: 12px; height: 12px; }

/* Overlay invitation */
.cw-invite-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10;
  flex-direction: column;
  animation: chat-fade .18s ease;
}
.cw-ov-panel {
  background: var(--bg2);
  border-radius: 10px 10px 0 0;
  margin-top: auto;
  padding: 13px;
}
.cw-ov-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cw-ov-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.cw-ov-sub { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.cw-fo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity .1s;
}
.cw-fo:last-of-type { border-bottom: none; }
.cw-fo:hover:not(.cw-fo-disabled) .cw-fo-name { color: #6366f1; }
.cw-fo-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.cw-fo-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cw-fo-name { font-size: 12px; font-weight: 600; flex: 1; }
.cw-fo-status { font-size: 10px; color: #10b981; }
.cw-fo-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(245,158,11,.15);
  color: #f59e0b;
  font-weight: 700;
}
.cw-fo-empty { font-size: 12px; color: var(--muted); padding: 12px 0; text-align: center; font-style: italic; }

/* ── Bouton chat dans les tableaux ── */
.btn-chat-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.25);
  cursor: pointer;
  color: #6366f1;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-chat-icon:hover { background: rgba(99,102,241,.22); border-color: #6366f1; }
.btn-chat-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Animations ── */
@keyframes chat-open  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes chat-close { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(30px)} }
@keyframes chat-fade  { from{opacity:0} to{opacity:1} }
.chat-win.cw-closing { animation: chat-close .25s ease-in forwards; pointer-events:none; }
.chat-hub-panel.hub-closing { animation: chat-close .2s ease-in forwards; pointer-events:none; }

/* --- Sound Settings --- */
.sound-volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sound-volume-row label {
  font-size: 13px;
  flex-shrink: 0;
}
.sound-volume-row input[type="range"] {
  flex: 1;
}
.sound-volume-row .vol-val {
  font-size: 12px;
  color: var(--muted);
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.sound-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sound-row:last-child {
  border-bottom: none;
}
.sound-row .ev-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sound-row .ev-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sound-row .ev-desc {
  font-size: 12px;
  color: var(--muted);
}
.sound-row .ev-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sound-row .ev-actions select {
  width: 148px;
  max-width: 148px;
}
.sound-sw {
  width: 36px !important;
  height: 20px !important;
}
.sound-sw .slider:before {
  height: 14px !important;
  width: 14px !important;
  bottom: 3px !important;
  left: 3px !important;
}
.sound-sw input:checked + .slider:before {
  transform: translateX(16px) !important;
}
.btn-play {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  color: var(--text);
  transition: background .15s;
  line-height: 1;
  flex-shrink: 0;
}
.btn-play:hover {
  background: var(--border);
}

.sound-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.sound-section-title:first-child {
  margin-top: 0;
}

@media (max-width: 480px) {
  .sound-row { flex-wrap: wrap; gap: 8px; }
  .sound-row .ev-actions { flex: 1 1 100%; justify-content: space-between; }
  .sound-row .ev-actions select { flex: 1; width: auto; max-width: none; }
}

.chart-point, .chart-point * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* --- History goal swipe-to-reveal --- */
.history-goal-swipe-wrap {
  margin-bottom: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.history-goal-reveal {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0 12px 12px 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);
}
.history-goal-swipe-wrap.swiped .history-goal-reveal { transform: translateX(0); }
.history-goal-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.history-goal-reveal-btn:not(.danger) { background: #3b82f6; }
.history-goal-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.history-goal-reveal-btn:hover { filter: brightness(1.08); }
.histrow.history-goal-swipeable {
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background 0.3s, border-color 0.3s;
  will-change: transform;
}
.history-goal-swipe-wrap.swiped .histrow.history-goal-swipeable {
  transform: translateX(-88px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .history-goal-reveal-btn { width: 56px; }
  .history-goal-swipe-wrap.swiped .histrow.history-goal-swipeable { transform: translateX(-112px); }
}

/* --- Goal list swipe-to-reveal (settings card) --- */
.goal-list-swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 6px; }
.goal-list-reveal {
    position: absolute; right: 0; top: 0; bottom: 0;
    display: flex; overflow: hidden; border-radius: 0 12px 12px 0;
    transform: translateX(100%); transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);
}
.goal-list-swipe-wrap.swiped .goal-list-reveal { transform: translateX(0); }
.goal-list-reveal-btn {
    width: 44px; display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; color: white; transition: filter 0.15s;
}
.goal-list-reveal-btn:not(.danger) { background: #3b82f6; }
.goal-list-reveal-btn.danger { background: #ef4444; }
.goal-list-reveal-btn:hover { filter: brightness(1.08); }
.goal-list-swipeable { transition: transform 0.28s cubic-bezier(.25,.46,.45,.94); }
.goal-list-swipe-wrap.swiped .goal-list-swipeable {
    transform: translateX(-88px);
    border-radius: 12px 0 0 12px;
    border-right-color: transparent;
}


/* --- Subject click/swipe-to-reveal --- */
.subject-swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.subject-reveal { display: flex; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; border-radius: 0 12px 12px 0; transform: translateX(100%); transition: transform 0.28s cubic-bezier(.25,.46,.45,.94); }
.subject-swipe-wrap.swiped .subject-reveal { transform: translateX(0); }
.subject-reveal-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.subject-reveal-btn:not(.danger) { background: #3b82f6; }
.subject-reveal-btn.danger { background: #ef4444; border-radius: 0 12px 12px 0; }
.subject-reveal-btn:hover { filter: brightness(1.08); }
.histrow.subject-swipeable {
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(.25,.46,.45,.94), background 0.3s, border-color 0.3s;
  will-change: transform;
}
.subject-swipe-wrap:not(.single).swiped .histrow.subject-swipeable {
  transform: translateX(-88px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
.subject-swipe-wrap.single.swiped .histrow.subject-swipeable {
  transform: translateX(-44px);
  border-radius: 12px 0 0 12px;
  border-right-color: transparent;
}
@media (max-width: 768px) {
  .subject-reveal-btn { width: 56px; font-family: inherit; }
  .subject-swipe-wrap:not(.single).swiped .histrow.subject-swipeable { transform: translateX(-112px); }
  .subject-swipe-wrap.single.swiped .histrow.subject-swipeable { transform: translateX(-56px); }
}

/* ─────────────────────────────────────────
   Admin — Users filter bar
───────────────────────────────────────── */
.admin-users-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-users-filter-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.admin-users-filter-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  flex-shrink: 0;
}
.admin-users-filter-input {
  width: 100%;
  padding: 7px 32px 7px 30px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.admin-users-filter-input:focus { border-color: var(--indigo); }
.admin-users-filter-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s;
}
.admin-users-filter-clear:hover { color: var(--text); }
.admin-users-filter-count {
  font-size: 11px;
  color: var(--indigo);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   Admin — Users Table (modern redesign)
───────────────────────────────────────── */
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-users-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.admin-users-table th.sortable-header { cursor: pointer; transition: color .15s; }
.admin-users-table th.sortable-header:hover { color: var(--text); }
.admin-users-table th.sortable-header.active { color: var(--indigo); }
.admin-users-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-users-table tr:hover td { background: rgba(99,102,241,.04); }

/* User cell */
.admin-user-cell { display: flex; align-items: center; gap: 10px; position: relative; }
.admin-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0;
}
.admin-user-info { min-width: 0; }
.admin-user-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* Tooltip on hover */
.admin-user-tooltip {
  position: absolute; left: 0; top: calc(100% + 6px);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 11px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 30;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.admin-user-cell:hover .admin-user-tooltip { opacity: 1; transform: translateY(0); }

/* Status pills */
.admin-col-connected-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 1;
  background: rgba(16,185,129,.15); color: #10b981;
  vertical-align: middle;
}

.admin-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; white-space: nowrap;
}
.admin-status-online  { background: rgba(16,185,129,.12); color: #10b981; }
.admin-status-offline { background: rgba(107,114,128,.10); color: var(--muted); }

/* Role badges */
.admin-role-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px;
  border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.admin-role-admin { background: rgba(99,102,241,.15); color: var(--indigo); border: 1px solid rgba(99,102,241,.3); }
.admin-role-user  { background: rgba(107,114,128,.10); color: var(--muted); border: 1px solid var(--border); }

/* ··· button */
.admin-dots-btn {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border);
  cursor: pointer; color: var(--text);
  font-size: 15px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.admin-dots-btn:hover { background: var(--border); }
.admin-dots-btn.open  { background: rgba(99,102,241,.15); border-color: var(--indigo); color: var(--indigo); }

/* Global dropdown (position:fixed, appended to body) */
.admin-dropdown-menu {
  position: fixed; z-index: 9999;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 190px; overflow: hidden;
  display: none;
  animation: admin-dropdown-pop .15s ease;
}
.admin-dropdown-menu.open { display: block; }
.admin-dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  font-size: 12px; cursor: pointer; transition: background .12s;
  color: var(--text); border: none; background: none; width: 100%; text-align: left;
}
.admin-dropdown-item:hover { background: var(--input-bg); }
.admin-dropdown-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.admin-dropdown-item.danger { color: var(--rose); }
.admin-dropdown-item.danger:hover { background: rgba(244,63,94,.08); }
.admin-dropdown-sep { height: 1px; background: var(--border); margin: 3px 0; }

@keyframes admin-dropdown-pop {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ── AI Usage table – en-têtes ── */
.ai-th-inner { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ai-th-title {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; transition: color .15s; border-radius: 4px; padding: 1px 3px;
}
.ai-th-title:hover { color: var(--text); }
.ai-th-title.active { color: var(--indigo); }
.ai-th-idle { opacity: .35; font-size: 9px; }
.ai-sort-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(99,102,241,.15); color: var(--indigo);
  font-size: 9px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(99,102,241,.25); transition: background .15s;
  text-transform: none; letter-spacing: 0;
}
.ai-sort-badge:hover { background: rgba(99,102,241,.28); }
.ai-badge-dir { opacity: .7; margin-left: 1px; }
.ai-th-simple { cursor: pointer; }
.ai-th-simple:hover { color: var(--text); }
.ai-th-simple.active { color: var(--indigo); }
.ai-sort-icon { margin-left: 4px; opacity: .35; font-size: 9px; }
.ai-th-simple.active .ai-sort-icon { opacity: 1; }

/* ── AI Usage table – cellules stats ── */
.ai-stats-cell { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ai-stats-reqs { font-size: 13px; font-weight: 700; color: var(--text); }
.ai-stats-reqs span { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.ai-stats-tokens { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.tok-in  { color: var(--sky); }
.tok-out { color: var(--emerald); }
.tok-sep { opacity: .3; color: var(--muted); }
.ai-highlight { color: var(--indigo) !important; font-weight: 700; }

/* ── AI Usage table – permission pills ── */
.ai-perm-pills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ai-perm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s; user-select: none; white-space: nowrap;
}
.ai-perm-pill.on  { background: rgba(16,185,129,.15); color: #10b981; border-color: rgba(16,185,129,.3); }
.ai-perm-pill.off { background: rgba(107,114,128,.10); color: var(--muted); border-color: var(--border); }
.ai-perm-pill.on:hover  { background: rgba(16,185,129,.25); }
.ai-perm-pill.off:hover { background: rgba(107,114,128,.20); }
.ai-perm-pill svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ── AI Usage table – input limite ── */
.ai-limit-wrap  { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ai-limit-input {
  width: 80px; padding: 5px 8px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 12px; text-align: center;
  outline: none; transition: border-color .15s; font-family: inherit;
}
.ai-limit-input:focus { border-color: var(--indigo); }
.ai-limit-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Sort picker (position:fixed, appended to body) ── */
.ai-sort-picker {
  position: fixed; z-index: 9999;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 210px; overflow: hidden;
  display: none; animation: ai-picker-pop .15s ease;
}
.ai-sort-picker.open { display: block; }
.ai-sort-picker-header {
  padding: 8px 14px 6px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.ai-sort-picker-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 12px; cursor: pointer; transition: background .12s;
  color: var(--text); border: none; background: none; width: 100%; text-align: left;
}
.ai-sort-picker-item:hover { background: var(--input-bg); }
.ai-sort-picker-item.active { color: var(--indigo); font-weight: 600; background: rgba(99,102,241,.06); }
.ai-sort-picker-item .picker-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 11px; }
.ai-sort-picker-item .picker-check { margin-left: auto; font-size: 11px; opacity: 0; }
.ai-sort-picker-item.active .picker-check { opacity: 1; }
.ai-sort-picker-sep { height: 1px; background: var(--border); margin: 3px 0; }

@keyframes ai-picker-pop {
  from { opacity: 0; transform: scale(.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ── AI Docs table – Document cell ── */
.doc-file-cell { display: flex; align-items: center; gap: 10px; }
.doc-file-icon { flex-shrink: 0; color: var(--muted); }
.doc-file-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.doc-file-info { min-width: 0; }
.doc-file-name {
  display: block; font-size: 12px; font-weight: 600; color: var(--sky);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  text-decoration: none;
}
.doc-file-name:hover { text-decoration: underline; }
.doc-file-name.ai-highlight { color: var(--sky) !important; }
.doc-file-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ── AI Docs table – Provenance cell ── */
.doc-prov-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.doc-banque { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.doc-prov-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.doc-schools-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600;
  background: rgba(14,165,233,.12); color: var(--sky);
  border: 1px solid rgba(14,165,233,.22); cursor: default; white-space: nowrap;
}
.doc-schools-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.doc-loc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--muted); white-space: nowrap;
}
.doc-loc svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ── AI Docs table – Classification cell ── */
.doc-classif-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.doc-classif-subject { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.doc-classif-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.doc-badge-category {
  display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 600;
  background: rgba(245,158,11,.12); color: #d97706;
  border: 1px solid rgba(245,158,11,.25);
}
.doc-badge-year {
  display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 600;
  background: rgba(16,185,129,.10); color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
}
.doc-badge-none { font-size: 10px; color: var(--muted); opacity: .4; }

/* ── AI Docs table – Chunks badge ── */
.doc-chunks-badge {
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: rgba(16,185,129,.12); color: var(--emerald);
  border: 1px solid rgba(16,185,129,.22);
}

/* ── AI Docs table – Actions cell ── */
.doc-actions { display: flex; align-items: center; justify-content: center; }
.doc-dots-btn {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border);
  cursor: pointer; color: var(--text);
  font-size: 15px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.doc-dots-btn:hover { background: var(--border); }
.doc-dots-btn.open { background: rgba(99,102,241,.15); border-color: var(--indigo); color: var(--indigo); }

/* ── AI Docs – Schools popup (position:fixed, appended to body) ── */
.doc-schools-popup {
  position: fixed; z-index: 9999;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.20); min-width: 180px; max-width: 280px;
  padding: 10px 0; display: none;
  animation: ai-picker-pop .15s ease;
}
.doc-schools-popup.open { display: block; }
.doc-sp-title {
  padding: 0 14px 7px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.doc-sp-list { padding: 0 10px; max-height: 220px; overflow-y: auto; }
.doc-sp-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 4px; font-size: 11px; color: var(--text);
}
.doc-sp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--indigo); opacity: .6; flex-shrink: 0;
}

/* === Chart order list (settings) === */
.cnt.chart-order-cnt { padding-right: 16px; padding-left: 0; }
.chart-order-hint {
  padding: 0 16px 10px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-order-list {
  list-style: none;
  padding: 0 16px 0 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chart-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background .15s, box-shadow .15s;
  user-select: none;
}
.chart-order-item:hover { background: var(--hover); }
.chart-order-item.chart-item-disabled .chart-order-label {
  color: var(--muted);
  text-decoration: line-through;
}
.chart-drag-handle {
  cursor: grab;
  color: var(--muted);
  opacity: .5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 2px 3px;
  border-radius: 4px;
  transition: opacity .15s;
}
.chart-drag-handle:hover { opacity: 1; }
.chart-drag-handle:active { cursor: grabbing; }
.chart-order-label { flex: 1; font-size: 13px; }
.chart-order-badge {
  font-size: 11px;
  color: var(--muted);
  background: var(--border);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  transition: background .15s, color .15s;
}
.chart-order-item.chart-order-chosen {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-color: var(--accent);
  background: var(--card-bg, var(--bg));
  scale: 1.015;
  z-index: 10;
}
.chart-order-item.chart-order-chosen .chart-order-badge {
  background: var(--accent);
  color: #fff;
}
.chart-order-item.chart-order-ghost { opacity: .25; }