:root {
  --fond: #f5f5f4;
  --surface: #ffffff;
  --texte: #1c1917;
  --discret: #78716c;
  --bordure: #e7e5e4;
  --accent: #2563eb;
  --bulle-moi: #dbeafe;
  --erreur: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1c1917;
    --surface: #292524;
    --texte: #f5f5f4;
    --discret: #a8a29e;
    --bordure: #44403c;
    --accent: #60a5fa;
    --bulle-moi: #1e3a5f;
    --erreur: #f87171;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 14px; cursor: pointer;
}
button.discret { background: transparent; color: var(--discret); }
input, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--bordure);
  border-radius: 8px; background: var(--surface);
}

#ecran-connexion { display: grid; place-items: center; min-height: 100%; padding: 16px; }
.carte {
  width: 100%; max-width: 360px; background: var(--surface); padding: 24px;
  border-radius: 12px; border: 1px solid var(--bordure); display: grid; gap: 14px;
}
.carte h1 { margin: 0 0 4px; font-size: 1.4rem; }
.carte label { display: grid; gap: 4px; font-size: .9rem; color: var(--discret); }
.erreur { color: var(--erreur); margin: 0; min-height: 1.5em; }

#ecran-chat { display: flex; height: 100%; }
#panneau {
  width: 260px; flex-shrink: 0; border-right: 1px solid var(--bordure);
  background: var(--surface); display: flex; flex-direction: column; padding: 12px; gap: 8px;
}
#liste-conversations { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#liste-conversations li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#liste-conversations li.active, #liste-conversations li:hover { background: var(--fond); }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
header {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--bordure);
}
header h2 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-menu { display: none; background: transparent; color: var(--texte); padding: 4px 8px; font-size: 1.2rem; }
#fil { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bulle { max-width: 760px; padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle.user { align-self: flex-end; background: var(--bulle-moi); }
.bulle.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--bordure); }
.bulle.attente::after { content: "▍"; animation: clignote 1s steps(1) infinite; }
.bulle a { color: var(--accent); }
#etat-nas {
  font-size: .8rem; color: var(--discret); border-top: 1px solid var(--bordure);
  padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
#etat-nas button { padding: 4px 6px; font-size: .8rem; }
@keyframes clignote { 50% { opacity: 0; } }
#form-message {
  display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordure);
}
#form-message textarea { resize: none; max-height: 200px; }

@media (max-width: 720px) {
  #panneau { position: fixed; inset: 0 auto 0 0; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  #panneau.ouvert { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); }
  #btn-menu { display: block; }
}

/* --- Espaces pro / perso --- */
body.perso { --accent: #7c3aed; --bulle-moi: #ede9fe; }
@media (prefers-color-scheme: dark) { body.perso { --accent: #a78bfa; --bulle-moi: #3b2a5e; } }
#bascule-espace { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--fond); padding: 4px; border-radius: 10px; }
#bascule-espace button { background: transparent; color: var(--discret); padding: 6px; }
#bascule-espace button.actif { background: var(--accent); color: #fff; }
.nav-espace { display: grid; gap: 2px; }
.nav-espace:not([hidden]) { display: grid; }
button.nav { background: transparent; color: var(--texte); text-align: left; padding: 8px 10px; display: flex; justify-content: space-between; }
button.nav.actif, button.nav:hover { background: var(--fond); }
.pastille { background: var(--accent); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 7px; }
#etiquette-espace { margin-left: auto; font-size: .75rem; color: var(--accent); font-weight: 600; text-transform: uppercase; }

/* --- Pages perso --- */
.vue { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page { overflow-y: auto; padding: 16px; gap: 12px; }
.page h3 { margin: 12px 0 6px; font-size: 1rem; }
.depot { border: 2px dashed var(--bordure); border-radius: 12px; padding: 16px; text-align: center; }
.depot.survol { border-color: var(--accent); }
.depot p { margin: 0 0 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.bouton {
  display: inline-block; background: var(--accent); color: #fff; border-radius: 8px;
  padding: 10px 14px; cursor: pointer; text-decoration: none;
}
.secondaire { background: var(--fond); color: var(--texte); border: 1px solid var(--bordure); }
.danger { background: var(--erreur); }
.discret-texte { color: var(--discret); font-size: .85rem; margin: 6px 0 0; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.filtres input { flex: 1 1 160px; width: auto; }
select { font: inherit; color: inherit; padding: 9px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); }
.liste-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-docs li {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 12px;
  cursor: pointer; display: grid; gap: 2px;
}
.liste-docs li .titre { font-weight: 600; overflow-wrap: anywhere; }
.liste-docs li .meta { font-size: .85rem; color: var(--discret); }
.liste-docs li.alerte { border-color: var(--accent); }
.liste-docs li .boutons { display: flex; gap: 6px; margin-top: 6px; }
.liste-docs li .boutons button { padding: 4px 10px; font-size: .85rem; }
.ligne-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ligne-form input[name=titre] { flex: 1 1 200px; width: auto; }
.ligne-form input[type=date] { width: auto; }
.petit { font-size: .9rem; color: var(--discret); display: flex; align-items: center; gap: 6px; }
.petit input { width: 70px; }
#table-impots { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 10px; overflow: hidden; }
#table-impots th, #table-impots td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
#table-impots td.montant { white-space: nowrap; font-variant-numeric: tabular-nums; }
#table-impots a { color: var(--accent); display: block; }
.manques { color: var(--erreur); padding-left: 18px; }

/* --- Fiche document --- */
dialog { border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); color: var(--texte); padding: 0; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.reponse { display: flex; gap: 8px; align-items: flex-end; }
.reponse textarea { flex: 1; }
dialog::backdrop { background: rgba(0,0,0,.4); }
#form-fiche { display: grid; gap: 10px; padding: 18px; }
#form-fiche h3 { margin: 0; overflow-wrap: anywhere; }
#form-fiche label { display: grid; gap: 4px; font-size: .85rem; color: var(--discret); }
#form-fiche .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#form-fiche fieldset { border: 1px solid var(--bordure); border-radius: 8px; display: grid; gap: 6px; }
#form-fiche .actions { justify-content: flex-end; }
.question { background: var(--bulle-moi); padding: 8px 10px; border-radius: 8px; margin: 0; }

/* --- Tâches et mails (pro) --- */
.ligne-form input.court { flex: 0 1 160px; width: auto; }
.onglets { display: flex; gap: 2px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 8px; padding: 2px; }
.onglets button { background: transparent; color: var(--discret); padding: 6px 10px; }
.onglets button.actif { background: var(--accent); color: #fff; }
.liste-docs li.tache { cursor: default; grid-template-columns: auto 1fr; column-gap: 10px; }
.liste-docs li.tache > input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; }
.liste-docs li.tache .corps { display: grid; gap: 2px; min-width: 0; }
.liste-docs li.tache.faite .titre { text-decoration: line-through; color: var(--discret); }
.liste-docs li.tache textarea { font-size: .9rem; padding: 6px 8px; resize: vertical; }
.liste-docs li .details { margin: 2px 0; padding-left: 18px; font-size: .9rem; }
.badge { display: inline-block; font-size: .75rem; padding: 0 6px; border-radius: 999px; border: 1px solid var(--bordure); margin-right: 4px; }
.badge.haute { background: var(--erreur); color: #fff; border-color: var(--erreur); }
.badge.retard { color: var(--erreur); border-color: var(--erreur); }
.form-dialog { display: grid; gap: 10px; padding: 18px; }
.form-dialog h3 { margin: 0; overflow-wrap: anywhere; }
.form-dialog label { display: grid; gap: 4px; font-size: .85rem; color: var(--discret); }
.form-dialog .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-dialog .actions { justify-content: flex-end; }
.entetes { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: .9rem; }
.entetes dt { color: var(--discret); }
.entetes dd { margin: 0; overflow-wrap: anywhere; }
.texte-mail { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; max-height: 50vh; overflow-y: auto;
  background: var(--fond); padding: 10px; border-radius: 8px; margin: 0; }
#fiche-mail { width: min(760px, calc(100% - 24px)); }