* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 16px/1.4 system-ui, sans-serif; background: #f4f4f6; color: #1d1d22; }
h1 { margin: 0; font-size: 1.2rem; }
button { font: inherit; border: 0; border-radius: 8px; padding: .6rem 1rem; background: #2f5bd3; color: #fff; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
#ecran-connexion { display: grid; place-items: center; height: 100%; padding: 1rem; }
#ecran-connexion[hidden], #ecran-chat[hidden] { display: none; }
#form-connexion { background: #fff; padding: 1.5rem; border-radius: 12px; width: min(360px, 100%); display: grid; gap: .6rem; box-shadow: 0 2px 10px #0001; }
input, textarea { font: inherit; padding: .6rem; border: 1px solid #c4c4cc; border-radius: 8px; width: 100%; }
.erreur { color: #b00020; min-height: 1.2em; margin: 0; }
#ecran-chat { display: flex; flex-direction: column; height: 100%; height: 100dvh; max-width: 800px; margin: 0 auto; background: #fff; }
header { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; border-bottom: 1px solid #e2e2e8; }
#presence { flex: 1; font-size: .85rem; color: #55555f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres + .pres { margin-left: .6rem; }
.pres::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .25rem; background: #b4b4bc; vertical-align: .05rem; }
.pres.actif::before { background: #1e9e4a; }
.pres.absent::before { background: #e0a100; }
.pres.parti { color: #8a8a94; }
#deconnexion, #ma-cle, .secondaire { background: #e8e8ee; color: #1d1d22; padding: .4rem .8rem; }
@media (max-width: 480px) { header { gap: .3rem .5rem; padding: .5rem .7rem; flex-wrap: wrap; } #presence { order: 9; flex-basis: 100%; } #deconnexion, #ma-cle { padding: .35rem .55rem; font-size: .85rem; } #presence { font-size: .75rem; } }
#messages { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 85%; padding: .5rem .8rem; border-radius: 12px; background: #ececf2; align-self: flex-start; }
.msg.moi { background: #dbe5ff; align-self: flex-end; }
.msg.ia { background: #e6f4ea; }
.entete { font-size: .8rem; color: #55555f; margin-bottom: .15rem; }
.auteur { font-weight: 600; color: #1d1d22; }
.badge { font-size: .7rem; background: #1e7a3c; color: #fff; border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }
.texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.vu { font-size: .7rem; color: #6a6a74; text-align: right; margin-top: .2rem; }
#form-message { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid #e2e2e8; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
#texte { resize: none; max-height: 40vh; }
#lien-taches { font-size: .9rem; color: #2f5bd3; text-decoration: none; font-weight: 600; }
#activites { padding: .3rem 1rem .4rem; border-top: 1px dashed #e2e2e8; font-size: .8rem; color: #6a6a74; max-height: 30vh; overflow-y: auto; }
#activites[hidden] { display: none; }
.activite + .activite { margin-top: .35rem; }
.activite .qui { font-weight: 600; color: #3b3b44; }
.activite .duree { font-variant-numeric: tabular-nums; margin-left: .3rem; }
.activite ol { list-style: none; margin: .15rem 0 0; padding: 0 0 0 .6rem; border-left: 2px solid #e2e2e8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.activite li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .65; }
.activite li:last-child { opacity: 1; color: #3b3b44; }
.activite li:last-child::after, .activite .etat::after { content: ''; animation: points 1.2s steps(4) infinite; }
@keyframes points { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { .activite li:last-child::after, .activite .etat::after { animation: none; content: '…'; } }
#dialogue-cle { border: 0; border-radius: 12px; padding: 1.2rem; width: min(420px, 92vw); box-shadow: 0 4px 24px #0003; }
#dialogue-cle h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
#dialogue-cle p { font-size: .9rem; color: #3b3b44; }
#dialogue-cle input { margin-top: .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
#dialogue-cle .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
#info-cle { min-height: 1.2em; margin: .4rem 0 0; }
#joindre { display: grid; place-items: center; width: 2.6rem; flex: none; border-radius: 8px; color: #55555f; cursor: pointer; }
#joindre:hover { background: #ececf2; }
#joindre:focus-within { outline: 3px solid #f0b400; outline-offset: 2px; }
#pieces { display: flex; gap: .5rem; padding: .5rem .6rem 0; overflow-x: auto; border-top: 1px solid #e2e2e8; }
#pieces[hidden] { display: none; }
.piece { position: relative; flex: none; }
.piece img { height: 64px; width: auto; max-width: 120px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e2e8; display: block; }
.piece button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: #1d1d22; font-size: .8rem; line-height: 22px; }
.piece.envoi img { opacity: .5; }
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .3rem; margin-top: .3rem; }
.images a { display: block; }
.images img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; display: block; background: #fff; }
.images.seule { grid-template-columns: 1fr; }
.images.seule img { object-fit: contain; max-height: 360px; }