/* Component: style.css */
:root{--coral:#f36f58;--ink:#232420;--muted:#777;--line:#e8e3db}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;font:14px Arial,sans-serif;background:#f5f2ed;color:var(--ink)}button,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#ffe8e1,#f5f2ed 45%)}.login-card{width:min(420px,calc(100% - 30px));background:white;border:1px solid var(--line);border-radius:24px;padding:42px;text-align:center;box-shadow:0 25px 80px #5f483526}.logo{margin:auto;width:58px;height:58px;border-radius:18px;background:var(--coral);color:white;display:grid;place-items:center;font-size:30px}.login h1{font-size:26px;margin:22px 0 8px}.login p{color:var(--muted);line-height:1.5}.login button{width:100%;height:48px;border:1px solid #ddd;border-radius:12px;background:#fff;font-weight:700;margin:20px 0 15px;cursor:pointer}.login button span{font-size:18px;color:#4285f4;margin-right:10px}.login small{color:#999}.app{height:100vh;height:100dvh;display:grid;grid-template-columns:240px 1fr 270px;max-width:1500px;margin:auto;background:#fff;overflow:hidden}.side{background:#f8f6f2;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column}.brand{font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px;margin:0 5px 22px}.brand b{width:36px;height:36px;border-radius:12px;background:var(--coral);color:white;display:grid;place-items:center}.new{border:0;background:var(--coral);color:white;border-radius:11px;padding:13px;font-weight:700}.side nav{display:flex;flex-direction:column;margin:20px 0}.side a{padding:11px;border-radius:9px;color:#666}.side a.active{background:#fff;color:#222;font-weight:700}.side h3{font-size:10px;color:#999;letter-spacing:1px;margin:8px}.room{margin:2px 0}.account{margin-top:auto;border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;gap:9px}.account img,.person img,.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#d9c9bf}.account>div{flex:1;display:flex;flex-direction:column;min-width:0}.account strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account small{color:#58916e}.account button{border:0;background:none}.chat{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.chat>header{height:75px;flex:0 0 75px;border-bottom:1px solid var(--line);padding:0 22px;display:flex;align-items:center;justify-content:space-between}.chat h1{margin:0;font-size:17px}.chat header p{font-size:11px;color:#888;margin:4px 0}.chat header p span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#49a078}.chat header button{border:0;border-radius:10px;background:#292c29;color:white;padding:11px 14px;font-weight:700}.messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:24px 30px}.message{display:flex;gap:11px;margin-bottom:20px;max-width:720px}.message.mine{margin-left:auto;flex-direction:row-reverse}.message .avatar{display:grid;place-items:center;font-size:11px;font-weight:800;color:#713e36}.message .meta{margin:0 0 5px;display:flex;gap:8px;align-items:baseline}.message .meta time{font-size:10px;color:#999}.message .bubble{margin:0;background:#f3f0eb;padding:10px 13px;border-radius:4px 14px 14px 14px;line-height:1.5;white-space:pre-wrap}.message.mine .bubble{background:#ffefea;border-radius:14px 4px 14px 14px}.media{display:block;width:min(380px,55vw);max-height:350px;object-fit:cover;border-radius:14px;margin-top:7px;background:#eee}.empty{text-align:center;color:#888;padding:18vh 20px}.empty b{font-size:40px;color:var(--coral)}.empty h2{color:#333}.chat footer{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 22px;background:#fff;padding-bottom:max(12px,env(safe-area-inset-bottom))}.composer{display:flex;align-items:flex-end;border:1px solid #ded8cf;border-radius:14px;padding:6px;min-width:0}.composer button{width:36px;height:36px;flex:0 0 36px;border:0;background:none}.composer textarea{flex:1 1 auto;min-width:0;width:0;border:0;outline:0;resize:none;min-height:36px;max-height:96px;padding:9px}.composer #send{background:var(--coral);color:white;border-radius:9px}.chat footer small{display:block;font-size:10px;color:#999;margin:6px}.typing{height:20px;flex:0 0 20px;color:#888;font-size:11px;padding-left:30px}.error{flex:0 0 auto;margin:0 22px 8px;padding:9px;background:#fff0ed;color:#a13f31;border-radius:8px}.people{border-left:1px solid var(--line);background:#fdfcfa;padding:24px 20px;overflow-y:auto}.people h2{font-size:15px}.person{display:flex;align-items:center;gap:9px;margin:12px 0}.person div{display:flex;flex-direction:column}.person small{color:#58916e}.call{position:fixed;inset:0;background:#171917;color:white;z-index:50;display:flex;flex-direction:column;padding:20px}.call>header{display:flex;justify-content:space-between;align-items:center;height:55px}.call header>div{display:flex;align-items:center;gap:10px}.call header b{font-size:9px;color:#ff9b8d;background:#472d2b;padding:7px;border-radius:20px}.call header h2{font-size:16px}.call header button{border:0;background:#303330;color:white;width:38px;height:38px;border-radius:10px;font-size:24px}.video-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;min-height:0}.video{position:relative;border-radius:18px;overflow:hidden;background:#292c29}.video video{width:100%;height:100%;object-fit:cover}.video span{position:absolute;left:12px;bottom:10px;background:#111a;padding:6px 9px;border-radius:7px}.call>footer{display:flex;justify-content:center;gap:10px;padding-top:14px}.call footer button{width:72px;height:58px;border:0;background:#2d302e;color:white;border-radius:13px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.call footer .hang{background:#dc5549}@media(max-width:1000px){.app{grid-template-columns:220px 1fr}.people{display:none}}@media(max-width:650px){.app{grid-template-columns:minmax(0,1fr);width:100%;max-width:none}.side,.people{display:none}.chat>header{height:60px;flex-basis:60px;padding:0 12px}.chat header button{padding:9px 10px}.messages{padding:14px 10px}.message{max-width:95%;margin-bottom:14px}.message .avatar{width:32px;height:32px;flex:0 0 32px}.media{width:min(100%,360px);max-height:45dvh}.typing{padding-left:12px}.error{margin:0 10px 6px}.chat footer{position:relative;z-index:5;padding:7px 7px max(7px,env(safe-area-inset-bottom))}.chat footer small{display:none}.composer{padding:4px;border-radius:12px}.composer button{width:34px;height:38px;flex-basis:34px}.composer textarea{font-size:16px;line-height:20px;padding:9px 5px}.video-grid{grid-template-columns:1fr}.call{padding:10px}.call footer button{width:60px}}@media(max-width:370px){.composer #emoji{display:none}.composer button{width:32px;flex-basis:32px}.chat header button{font-size:12px}.message{gap:7px}}

.chat-actions{display:flex;align-items:center;gap:7px}.chat-actions #peopleBtn{display:none}.close-people{display:none}.people-help{font-size:12px;line-height:1.4;color:#777}
@media(max-width:650px){.chat-actions #peopleBtn{display:block}.chat-actions #callBtn{font-size:0}.chat-actions #callBtn::after{content:"▣";font-size:18px}.people{display:block;position:fixed;z-index:80;inset:0 0 0 auto;width:min(86vw,340px);padding:22px;background:#fff;box-shadow:-12px 0 40px #0003;transform:translateX(105%);transition:transform .2s ease;overflow-y:auto}.people.open{transform:translateX(0)}.close-people{display:block;position:absolute;right:14px;top:10px;width:40px;height:40px;border:0;background:#f3f0eb;border-radius:50%;font-size:26px}.people h2{padding-right:45px}.person-button{padding:8px}.person-button:active{background:#ffefea}}

.unread-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:20px;background:#e53935;color:#fff;font-size:11px;font-weight:800}.message-toast{position:fixed;z-index:120;right:18px;top:18px;max-width:min(360px,calc(100% - 36px));border:0;border-radius:14px;padding:14px 18px;background:#242724;color:#fff;box-shadow:0 12px 35px #0004;text-align:left;font-weight:700;cursor:pointer}
@media(max-width:650px){.message-toast{top:auto;right:10px;left:10px;bottom:92px;max-width:none}.chat-actions #peopleBtn{position:relative}.unread-badge{position:absolute;right:-5px;top:-8px}}

/* Profil public intégré — ne nécessite aucun fichier CSS supplémentaire */
.location-group { margin: 0 0 20px; }
.location-group h3 { font-size: 11px; line-height: 1.4; color: #777; border-bottom: 1px solid #e8e3db; padding: 0 0 7px; margin: 0 0 10px; }
.profile-modal { position: fixed; inset: 0; z-index: 100; background: #171917aa; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.profile-modal.hidden { display: none !important; }
.profile-card { position: relative; width: min(540px, 100%); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 24px 80px #0004; }
.profile-card h2 { margin: 0 0 8px; }
.profile-card > p { color: #777; line-height: 1.5; margin: 0 0 20px; }
.profile-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; margin: 13px 0; }
.profile-card label input[type="text"], .profile-card label input:not([type]) { height: 44px; border: 1px solid #d8d3cc; border-radius: 10px; padding: 0 12px; outline: 0; }
.profile-card label input:focus { border-color: #f36f58; }
.profile-card textarea { border: 1px solid #d8d3cc; border-radius: 10px; padding: 11px 12px; outline: 0; resize: vertical; font: inherit; }
.profile-card textarea:focus { border-color: #f36f58; }
.person-button small { max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card .profile-check { flex-direction: row; align-items: center; font-weight: 400; }
.profile-save { width: 100%; height: 46px; border: 0; border-radius: 11px; background: #f36f58; color: #fff; font-weight: 800; margin-top: 8px; }
.profile-close { position: absolute; right: 16px; top: 14px; border: 0; background: none; font-size: 25px; }
.profile-error { color: #a13f31; margin-top: 10px; }
.account #profileBtn { font-size: 16px; }
.person-button { width: 100%; border: 0; background: transparent; text-align: left; padding: 0; cursor: pointer; color: inherit; }
.person-button:hover { background: #f6f2ed; border-radius: 10px; }
.login-error { margin: 0 0 14px; padding: 10px; border-radius: 9px; background: #fff0ed; color: #a13f31; font-size: 12px; line-height: 1.4; }
.login-card small a { color: #315b76; font-weight: 700; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 13px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee9e3; }
.legal-links a { color: #6b6b68; font-size: 11px; text-decoration: none; }
.legal-links a:hover, .legal-links a:focus { color: #315b76; text-decoration: underline; }
.account-data { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e8e3db; display: grid; gap: 9px; }
.account-data h3, .account-data p { margin: 0; }
.account-data p, .account-data small { color: #777; font-size: 12px; }
.account-data button { width: 100%; min-height: 42px; border: 0; border-radius: 10px; font-weight: 800; }
.premium-badge { margin-left: 4px; padding: 3px 6px; border-radius: 7px; background: linear-gradient(135deg,#ffba4b,#f36f58); color: #fff; font-size: 9px; letter-spacing: .5px; }
.premium-box { margin-top: 22px; padding: 16px; display: grid; gap: 9px; border: 1px solid #f0cf91; border-radius: 13px; background: #fff9ec; }
.premium-box h3,.premium-box p { margin: 0; }
.premium-box p,.premium-box small { color: #765f35; font-size: 12px; }
.premium-box button { min-height: 42px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#315b76,#497d9e); color: #fff; font-weight: 800; }
.premium-box button#managePremium { background: #e8e3d8; color: #514c42; }
.ad-banner { flex: 0 0 auto; margin: 9px 22px 0; min-height: 58px; padding: 10px 16px; border: 1px dashed #d7c7ae; border-radius: 11px; background: #faf7f1; display: flex; align-items: center; justify-content: center; gap: 10px; color: #61594e; }
.ad-banner span { padding: 3px 6px; border-radius: 5px; background: #eae3d8; font-size: 8px; letter-spacing: 1px; }
.ad-banner small { color: #94897b; }
.account-export { background: #e6eef3; color: #294b61; }
.account-delete { background: #ffe4e0; color: #a33229; }
.age-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: #152027ed; }
.age-card { width: min(480px,100%); background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 28px 90px #0006; }
.age-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: #315b76; color: #fff; font-size: 20px; font-weight: 900; }
.age-card h2 { margin: 18px 0 7px; }
.age-card > p { color: #666; line-height: 1.5; }
.age-agreement { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #ded8cf; border-radius: 11px; font-weight: 700; }
.age-agreement input { margin-top: 3px; transform: scale(1.15); }
.age-card > button { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 11px; font-weight: 800; }
.age-card button[type=submit] { background: #315b76; color: #fff; }
.age-card .age-leave { background: #f0ece6; color: #555; }
@media(max-width:650px){.age-modal{align-items:end;padding:0}.age-card{border-radius:20px 20px 0 0;padding:24px 19px max(22px,env(safe-area-inset-bottom))}.ad-banner{margin:6px 8px 0;min-height:46px;padding:7px 9px}.ad-banner small{display:none}.ad-banner strong{font-size:11px}}
#mobileProfileBtn { display: none; }
@media(max-width:650px) {
  #mobileProfileBtn { display: inline-block; font-size: 17px; }
  .profile-modal { align-items: end; padding: 0; }
  .profile-card { width: 100%; max-height: 92dvh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 26px 20px max(22px, env(safe-area-inset-bottom)); }
}

/* Galerie Vidéos / Photos amateurs */
.room-feature-title #publishGalleryMedia {
  border: 0;
  border-radius: 10px;
  background: var(--coral);
  color: #fff;
  padding: 9px 13px;
  font-weight: 700;
  cursor: pointer;
}
.gallery-media-open { cursor: zoom-in; }
.media-lightbox {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: block;
  padding: 30px;
  background: #111d;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.media-lightbox-content {
  width: min(1100px, 94vw);
  min-height: calc(100vh - 60px);
  height: auto;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.media-lightbox-content img,
.media-lightbox-content video {
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
}
.media-lightbox-content img.is-zoomed,
.media-lightbox-content video.is-zoomed {
  max-width: none;
  width: auto;
  cursor: zoom-out;
}
.media-lightbox-close {
  position: fixed;
  z-index: 201;
  right: 20px;
  top: 18px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 30px;
  cursor: pointer;
}
@media (max-width: 650px) {
  .messages.media-gallery { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .media-gallery .message { padding: 10px; }
  .media-gallery .media { max-height: 62dvh; }
  .media-lightbox { padding: 12px; }
  .media-lightbox-close { right: 10px; top: 10px; }
}

/* Espace Webcam */
.webcam-lobby-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.webcam-lobby-title>div{display:flex;flex-direction:column;gap:4px}.webcam-lobby-title #testWebcamButton{border:0;border-radius:10px;background:#315b76;color:#fff;padding:10px 14px;font-weight:800;cursor:pointer}.webcam-members article small{color:#58916e}.webcam-members .webcam-call-primary{background:var(--coral);color:#fff;border-color:var(--coral)}.webcam-empty{margin-top:12px;padding:24px;border:1px dashed var(--line);border-radius:15px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--muted)}.webcam-test{position:fixed;z-index:210;inset:0;display:grid;place-items:center;padding:20px;background:#101815d9}.webcam-test-card{position:relative;width:min(680px,100%);padding:24px;border-radius:22px;background:#fff;color:#232420;box-shadow:0 28px 90px #0006}.webcam-test-card h2{margin:0 45px 6px 0}.webcam-test-card>p{color:#666}.webcam-test-close{position:absolute;right:15px;top:15px;width:40px;height:40px;border:0;border-radius:50%;font-size:25px}.webcam-test-video{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#202522}.webcam-test-video video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.webcam-test-status{padding:10px;border-radius:10px;background:#eef5f1;color:#315e49!important;font-weight:700}.webcam-test-card>#finishWebcamTest{width:100%;height:46px;border:0;border-radius:11px;background:var(--coral);color:#fff;font-weight:800}@media(max-width:650px){.webcam-lobby-title{align-items:stretch;flex-direction:column}.webcam-lobby-title #testWebcamButton{width:100%}.webcam-test{align-items:end;padding:0}.webcam-test-card{border-radius:22px 22px 0 0;padding:22px 16px max(18px,env(safe-area-inset-bottom))}.webcam-test-video{aspect-ratio:3/4}}

.premium-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.premium-choices button { display: grid; gap: 3px; padding: 10px; }
.premium-choices button span { font-size: 11px; font-weight: 600; opacity: .85; }
.premium-choices #subscribePremiumPlus { background: linear-gradient(135deg, #9b6518, #e3a437); }
@media(max-width:520px) { .premium-choices { grid-template-columns: 1fr; } }

/* Abonnement : styles cohérents dans le profil, sur mobile et en mode sombre. */
.premium-box { gap: 14px; border-color: #dec49d; background: #fffaf1; }
.premium-heading { display: flex; align-items: center; gap: 11px; }
.premium-icon { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #a86a24; font-size: 20px; }
.premium-heading h3 { font-size: 17px; }
.premium-box #premiumState { padding: 11px 12px; border-radius: 9px; background: #fff; color: #503b21; font-weight: 700; line-height: 1.4; }
.premium-box .premium-renewal { line-height: 1.5; }
.premium-benefits { margin: 0; padding-left: 21px; color: #503b21; line-height: 1.55; font-size: 12px; }
.premium-benefits li + li { margin-top: 5px; }
.premium-choices button { min-height: 90px; text-align: left; padding: 13px; cursor: pointer; }
.premium-choices button strong { font-size: 14px; }
.premium-choices button span { font-size: 16px; }
.premium-choices button small { color: inherit; opacity: .9; line-height: 1.3; }
.premium-box button:disabled { opacity: .56; cursor: not-allowed; }
.premium-box #managePremium { cursor: pointer; }
.premium-box #premiumFootnote { line-height: 1.5; }
.premium-shortcut { width: 100%; margin-top: 9px; padding: 10px; border: 1px solid #d4aa68; border-radius: 10px; background: #fff6e7; color: #6b4217; font-weight: 800; cursor: pointer; }
.premium-shortcut:hover { background: #ffeac5; }
html[data-theme="dark"] .premium-shortcut { background: #3b3023; border-color: #8b6d47; color: #ffe6b5; }
html[data-theme="dark"] .premium-box { background: #25251f; border-color: #765c3b; color: #f3e8d8; }
html[data-theme="dark"] .premium-box #premiumState { background: #343025; color: #fff0d8; }
html[data-theme="dark"] .premium-box .premium-benefits,
html[data-theme="dark"] .premium-box p,
html[data-theme="dark"] .premium-box small { color: #e2d4c0; }
html[data-theme="dark"] .premium-box #managePremium { background: #454139; color: #fff0d8; }
.premium-room-gate { position: fixed; inset: 0; z-index: 305; display: grid; place-items: center; padding: 18px; background: #121b25d9; }
.premium-room-gate-card { width: min(430px,100%); padding: 28px; border: 1px solid #e4c98e; border-radius: 20px; background: #fffaf1; color: #382b1c; box-shadow: 0 24px 65px #0005; }
.premium-room-gate-card > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #ac762f; color: white; font-size: 24px; }
.premium-room-gate-card h2 { margin: 17px 0 8px; font-size: 20px; line-height: 1.3; }
.premium-room-gate-card p { margin: 0; line-height: 1.5; color: #5f5041; }
.premium-room-gate-card div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.premium-room-gate-card button { flex: 1 1 145px; min-height: 44px; border-radius: 10px; border: 1px solid #c6b8a4; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.premium-room-gate-card button:last-child { border-color: #80501f; background: #80501f; color: white; }
html[data-theme="dark"] .premium-room-gate-card { background: #232b33; border-color: #947447; color: #f6ebdc; }
html[data-theme="dark"] .premium-room-gate-card p { color: #d3c8b9; }

.message-content { min-width: 0; }
.message-quote { max-width: 360px; margin-bottom: 5px; padding: 7px 10px; border-left: 3px solid var(--coral); border-radius: 7px; background: #f7f4ef; display: grid; gap: 2px; font-size: 11px; }
.message-quote strong { color: #a64838; }
.message-quote span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; }
.message-actions { position: relative; display: flex; gap: 5px; margin-top: 4px; opacity: 0; transition: opacity .15s; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
.message-actions > button { border: 0; border-radius: 8px; padding: 4px 7px; background: #f1eee9; color: #555; font-size: 10px; cursor: pointer; }
.message-actions .delete-action { color: #a13f31; }
.reaction-picker { position: absolute; z-index: 8; left: 70px; bottom: 28px; display: flex; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 8px 24px #0002; }
.reaction-picker button { border: 0; border-radius: 8px; padding: 5px; background: transparent; font-size: 18px; cursor: pointer; }
.reaction-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip { border: 1px solid #ded8cf; border-radius: 14px; padding: 2px 7px; background: white; font-size: 12px; cursor: pointer; }
.reaction-chip.active { border-color: var(--coral); background: #fff0ec; }
.reply-preview { margin: 0 0 7px; padding: 7px 10px; border-left: 3px solid var(--coral); border-radius: 8px; background: #f7f4ef; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reply-preview > div { min-width: 0; display: grid; gap: 2px; }
.reply-preview strong { color: #a64838; font-size: 11px; }
.reply-preview span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; font-size: 11px; }
.reply-preview button { flex: 0 0 28px; height: 28px; border: 0; border-radius: 8px; background: #e9e4dc; cursor: pointer; }
@media(max-width:650px) { .message-actions { opacity: 1; } .message-actions > button { padding: 5px 7px; } .reaction-picker { left: 54px; } }

.search-modal { position: fixed; inset: 0; z-index: 155; display: grid; place-items: center; padding: 24px; background: #10171999; }
.contact-picker-modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;background:#101719aa}.contact-picker-panel{width:min(520px,100%);max-height:82dvh;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;background:#fff;color:#242522;box-shadow:0 24px 80px #0005}.contact-picker-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e8e2da}.contact-picker-panel h2,.contact-picker-panel p{margin:0}.contact-picker-panel p{margin-top:4px;color:#777;font-size:12px}.contact-picker-panel header button{width:38px;height:38px;border:0;border-radius:10px;background:#f2eee9;font-size:24px}.contact-picker-list{overflow-y:auto;padding:10px}.contact-picker-item{width:100%;display:flex;align-items:center;gap:11px;padding:11px;border:0;border-bottom:1px solid #eee9e3;background:#fff;text-align:left;cursor:pointer}.contact-picker-item:hover{background:#faf6f2}.contact-picker-item>span:nth-child(2){min-width:0;display:grid;gap:3px;flex:1}.contact-picker-item small{color:#6e8e79}.contact-picker-item>b{font-size:20px}.contact-picker-avatar{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#7d99a7;color:#fff;font-weight:800}.contact-picker-avatar img{width:100%;height:100%;object-fit:cover}.contact-picker-empty{display:grid;gap:6px;padding:34px 20px;text-align:center;color:#777}.private-home .messages{padding:18px;display:block}.private-home>footer{display:none}.private-home-page{width:min(900px,100%);margin:0 auto;display:grid;gap:24px}.private-home-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel,#fff)}.private-home-heading>div{display:flex;align-items:center;gap:13px}.private-home-heading>div>span{font-size:32px}.private-home-heading h2,.private-home-heading p{margin:0}.private-home-heading p{margin-top:4px;color:var(--muted)}.private-home-heading button{border:0;border-radius:11px;padding:12px 15px;background:var(--coral);color:#fff;font-weight:800}.private-home-page section h3{margin:0 0 9px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.private-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.private-home-grid>button{min-width:0;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel,#fff);color:var(--ink);text-align:left}.private-home-grid>button>span:nth-child(2){min-width:0;display:grid;gap:4px;flex:1}.private-home-grid strong,.private-home-grid small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.private-home-grid small,.private-home-empty{color:var(--muted)}.private-home-grid>button>b{min-width:24px;padding:4px 7px;border-radius:12px;background:var(--coral);color:#fff;text-align:center}.private-home-empty{padding:20px;border:1px dashed var(--line);border-radius:14px;text-align:center}html[data-theme="dark"] .private-home-heading,html[data-theme="dark"] .private-home-grid>button{background:#202b3b;color:#f5f7fb;border-color:#334155}html[data-theme="dark"] .contact-picker-panel,html[data-theme="dark"] .contact-picker-item{background:#202b3b;color:#f5f7fb}html[data-theme="dark"] .contact-picker-item{border-color:#334155}html[data-theme="dark"] .contact-picker-item:hover{background:#263447}
.search-panel { width: min(620px, 100%); max-height: 88dvh; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 24px 80px #0005; }
.search-panel > header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.search-panel header h2, .search-panel header p { margin: 0; }
.search-panel header p { margin-top: 4px; color: #888; font-size: 12px; }
.search-panel header button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #f2eee9; font-size: 24px; }
.search-field { margin: 14px 16px 6px; display: flex; align-items: center; gap: 9px; border: 1px solid #dcd6ce; border-radius: 12px; padding: 0 12px; }
.search-field input { width: 100%; height: 46px; border: 0; outline: 0; font-size: 16px; }
.search-results { overflow-y: auto; padding: 8px 16px 20px; }
.search-results h3 { margin: 14px 4px 6px; color: #777; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.search-result { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #eee9e3; background: #fff; padding: 11px 8px; text-align: left; cursor: pointer; }
.search-result:hover { background: #faf6f2; }
.search-result img, .search-result-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; background: #f0ece6; object-fit: cover; }
.search-result > span:last-child { min-width: 0; display: grid; gap: 4px; }
.search-result strong, .search-result small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-result small { color: #777; }
.search-empty { margin: 0; padding: 22px 8px; color: #999; text-align: center; }
.search-highlight { animation: searchPulse 1.8s ease; }
@keyframes searchPulse { 0%,100% { background: transparent; } 30%,70% { background: #fff1b8; border-radius: 14px; } }
@media(max-width:650px) { .search-button { font-size: 0; padding: 9px !important; } .search-button::after { content: "🔍"; font-size: 16px; } .search-modal { padding: 0; align-items: end; } .search-panel { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; } }
@media(max-width:650px){.contact-picker-modal{padding:0;align-items:end}.contact-picker-panel{width:100%;max-height:88dvh;border-radius:20px 20px 0 0}.private-home .messages{padding:10px}.private-home-heading{align-items:stretch;flex-direction:column;padding:15px}.private-home-heading button{width:100%}.private-home-grid{grid-template-columns:1fr}}

.voice-recording { margin-bottom: 7px; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 11px; background: #fff0ed; color: #8f3328; }
.recording-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #e33f32; animation: recordingPulse 1s infinite; }
.voice-recording strong { font-size: 12px; }
.voice-recording time { margin-right: auto; font-variant-numeric: tabular-nums; }
.voice-recording button { border: 0; border-radius: 8px; padding: 7px 9px; background: #fff; color: #7f342a; font-weight: 700; }
.voice-recording #sendVoice { background: var(--coral); color: #fff; }
.audio-message { width: min(320px, 70vw); height: 42px; object-fit: initial; background: transparent; }
#voiceBtn.recording { background: #e33f32; color: white; border-radius: 9px; }
@keyframes recordingPulse { 50% { opacity: .25; transform: scale(.75); } }
@media(max-width:370px) { .voice-recording strong { display: none; } }

.message-status { margin-top: 4px; color: #7b8f99; font-size: 10px; text-align: right; }
.message-status:first-letter { color: #3b83a8; }

.profile-photo-editor { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e4ded6; border-radius: 13px; background: #faf8f4; }
.profile-photo-editor img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; background: #e9e4dd; }
.profile-photo-editor > div { display: grid; gap: 6px; }
.profile-photo-editor button { border: 0; border-radius: 9px; padding: 8px 10px; background: #315b76; color: #fff; font-weight: 700; }
.profile-photo-editor small { color: #888; }
.public-profile-card { width: min(460px, calc(100% - 24px)); }
.public-profile-head { display: flex; align-items: center; gap: 15px; margin-top: 6px; }
.public-profile-head img { width: 82px; height: 82px; flex: 0 0 82px; border-radius: 50%; object-fit: cover; background: #e9e4dd; }
.public-profile-head h2, .public-profile-head p { margin: 0; }
.public-profile-head p { margin-top: 6px; color: #4c8c64; font-weight: 700; }
.public-profile-bio { padding: 12px; border-radius: 11px; background: #f5f2ed; white-space: pre-wrap; }
.public-profile-details { display: grid; gap: 8px; }
.public-profile-details > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid #eee8e1; }
.public-profile-details dt { color: #888; }
.public-profile-details dd { margin: 0; text-align: right; font-weight: 700; }
.public-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.public-profile-actions button { border: 0; border-radius: 10px; padding: 12px; background: #315b76; color: #fff; font-weight: 800; }
.public-profile-actions #publicProfileFriend { background: #e4f0e8; color: #27603c; }
@media(max-width:420px) { .public-profile-actions { grid-template-columns: 1fr; } }

.profile-card select { height: 44px; border: 1px solid #d8d3cc; border-radius: 10px; padding: 0 12px; outline: 0; background: #fff; font: inherit; }
.profile-card select:focus { border-color: #f36f58; }
.person-button { border: 1px solid transparent; padding: 8px; border-radius: 12px; }
.person-button.gender-female { background: #fff0f6; border-color: #f4b8d1; }
.person-button.gender-female img { outline: 3px solid #ec78aa; }
.person-button.gender-female strong { color: #a83268; }
.person-button.gender-male { background: #eef6ff; border-color: #b7d7f6; }
.person-button.gender-male img { outline: 3px solid #609ed8; }
.person-button.gender-male strong { color: #27659f; }
.person-button.gender-neutral { background: #f7f5f2; border-color: #e4dfd8; }
.chat-actions .danger-button { background: #b84040; }
.blocked-list { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e8e3db; }
.blocked-list h3 { margin: 0 0 10px; font-size: 14px; }
.blocked-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0ece6; }
.blocked-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blocked-person button { border: 0; border-radius: 8px; padding: 7px 10px; background: #eee9e3; color: #333; font-weight: 700; }
.no-blocks { margin: 0; color: #888; font-size: 12px; }
@media(max-width:650px) { .chat-actions .danger-button { font-size: 11px; padding: 9px 8px; } }
.chat-actions .report-button { background: #8b5b28; }
.report-card { border-top: 5px solid #d28a35; }
.report-card #reportTarget { color: #5f5143; }
.report-submit { background: #b66d23; }
@media(max-width:650px) {
  .chat-actions .report-button { font-size: 0; padding: 9px; }
  .chat-actions .report-button::after { content: "⚑"; font-size: 18px; }
}
.chat-actions .admin-button { background: #315b76; }
.admin-modal { position: fixed; inset: 0; z-index: 150; background: #101719bb; padding: 24px; display: grid; place-items: center; }
.admin-panel { width: min(920px, 100%); max-height: 92dvh; overflow: hidden; display: flex; flex-direction: column; background: #f8f6f2; border-radius: 20px; box-shadow: 0 24px 80px #0005; }
.admin-panel > header { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; background: #243c4c; color: #fff; }
.admin-panel header h2, .admin-panel header p { margin: 0; }
.admin-panel header p { margin-top: 4px; color: #c9dbe6; font-size: 12px; }
.admin-panel header button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #ffffff1c; color: #fff; font-size: 25px; }
.admin-toolbar { display: flex; align-items: end; gap: 10px; padding: 14px 20px; border-bottom: 1px solid #ddd7cf; background: #fff; }
.admin-toolbar label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }
.admin-toolbar select, .admin-toolbar button { height: 38px; border: 1px solid #d8d3cc; border-radius: 9px; padding: 0 12px; background: #fff; }
.admin-panel > .profile-error { margin: 10px 20px 0; }
.report-list { overflow-y: auto; padding: 18px 20px 24px; }
.report-item { background: #fff; border: 1px solid #ddd7cf; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.report-head { display: flex; justify-content: space-between; gap: 12px; }
.report-head strong { font-size: 16px; }
.report-head time { color: #888; font-size: 11px; }
.report-item p { margin: 8px 0; }
.report-details { padding: 10px; border-radius: 9px; background: #f4f0ea; white-space: pre-wrap; }
.moderation-log-item { border-left: 5px solid #315b76; }
.moderation-log-item .report-details { color: #445661; }
.verified-badge { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%; background: #2684ff; color: #fff; font-size: 11px; vertical-align: 2px; }
.admin-profile-search { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-profile-search input { flex: 1; min-width: 0; border: 1px solid #d8d3cc; border-radius: 9px; padding: 10px 12px; }
.admin-profile-search button, .admin-profile-item button { border: 0; border-radius: 9px; padding: 9px 12px; background: #315b76; color: #fff; font-weight: 700; }
.admin-profile-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-profile-item div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-profile-item small { color: #777; overflow-wrap: anywhere; }
.admin-profile-item button.danger { background: #ffe5e2; color: #a9362d; }
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.admin-stats article { min-height: 112px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 16px; border: 1px solid #ddd7cf; border-radius: 14px; background: #fff; text-align: center; }
.admin-stats strong { color: #315b76; font-size: 30px; }
.admin-stats span { color: #666; font-weight: 700; }
.admin-stats-note { color: #888; text-align: center; }
@media(max-width:650px) { .admin-stats { grid-template-columns: repeat(2,1fr); } .admin-stats article { min-height: 95px; } }

/* Le style du point vert ne doit pas réduire le texte de présence. */
#roomPresence, #privateTypingStatus {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}
.suspension-state { color: #8b4b2a; font-weight: 700; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.admin-actions button { border: 0; border-radius: 8px; padding: 8px 10px; background: #e7edf1; color: #263b48; font-weight: 700; }
.admin-actions .danger { background: #ffe5e2; color: #a9362d; }
.admin-loading, .admin-empty { text-align: center; color: #777; padding: 40px 10px; }
@media(max-width:650px) {
  .chat-actions .admin-button { font-size: 0; padding: 9px; }
  .chat-actions .admin-button::after { content: "◆"; font-size: 17px; }
  .admin-modal { padding: 0; align-items: end; }
  .admin-panel { max-height: 96dvh; border-radius: 18px 18px 0 0; }
  .report-head { flex-direction: column; gap: 4px; }
}
.people > hr { border: 0; border-top: 1px solid #e5dfd7; margin: 18px 0; }
.person-row { display: flex; align-items: center; gap: 6px; border: 1px solid transparent; padding: 5px; border-radius: 12px; margin: 7px 0; }
.person-row .person-button { flex: 1; min-width: 0; padding: 4px; }
.person-row.gender-female { background: #fff0f6; border-color: #f4b8d1; }
.person-row.gender-female img { outline: 3px solid #ec78aa; }
.person-row.gender-female strong { color: #a83268; }
.person-row.gender-male { background: #eef6ff; border-color: #b7d7f6; }
.person-row.gender-male img { outline: 3px solid #609ed8; }
.person-row.gender-male strong { color: #27659f; }
.person-row.gender-neutral { background: #f7f5f2; border-color: #e4dfd8; }
.friend-action { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 7px; background: #e4f0e8; color: #27603c; font-size: 11px; font-weight: 800; }
.friend-state { flex: 0 0 auto; color: #538066; font-size: 10px; font-weight: 700; padding-right: 4px; }
#friendRequests h3, #friendsList h3 { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 7px; }
.friend-card { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px; margin: 5px 0; border-radius: 10px; background: #f5f1eb; }
.friend-card > div { display: flex; gap: 5px; }
.friend-card button { border: 0; border-radius: 7px; padding: 6px 8px; background: #fff; color: #333; font-size: 11px; font-weight: 700; }
.friend-card button[data-accept-friend] { background: #dff1e5; color: #28633d; }
.friend-open { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-remove { flex: 0 0 29px; color: #9c3e36 !important; }
.online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #bbb; }
.online-dot.online { background: #43a46c; box-shadow: 0 0 0 3px #dcefe4; }
.no-friends { color: #999; font-size: 12px; }
.conversation-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-heading h2 { margin: 0; }
.conversation-total { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 20px; background: #e53935; color: #fff; font-size: 10px; font-weight: 800; }
.conversation-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
.conversation-tabs button { border: 0; border-radius: 8px; padding: 7px; background: #f0ece6; color: #777; font-size: 10px; font-weight: 700; }
.conversation-tabs button.active { background: #315b76; color: white; }
.conversation-list { margin-top: 8px; display: grid; gap: 4px; }
.conversation-item { width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; padding: 8px; background: transparent; color: #252622; text-align: left; cursor: pointer; }
.conversation-item:hover { background: #f6f2ed; }
.conversation-item.active { border-color: #efad9f; background: #fff0ec; }
.conversation-item.unread { background: #eef6fb; }
.conversation-open { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.conversation-actions { flex: 0 0 auto; display: grid; gap: 3px; opacity: .3; }
.conversation-item:hover .conversation-actions, .conversation-item:focus-within .conversation-actions { opacity: 1; }
.conversation-actions button { width: 24px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: #fff; color: #666; font-size: 10px; cursor: pointer; }
.conversation-actions button[data-delete-conversation] { color: #a33b33; }
.conversation-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; background: #e8e2da; color: #555; font-size: 12px; font-weight: 800; overflow: hidden; }
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-avatar.gender-female { outline: 2px solid #ec78aa; }
.conversation-avatar.gender-male { outline: 2px solid #609ed8; }
.conversation-content { min-width: 0; flex: 1; display: grid; gap: 4px; }
.conversation-line { min-width: 0; display: flex; align-items: center; gap: 6px; }
.conversation-line strong, .conversation-line small { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-line time { color: #999; font-size: 9px; }
.conversation-line small { color: #777; font-size: 11px; }
.conversation-line b { min-width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 20px; padding: 0 5px; background: #e53935; color: white; font-size: 9px; }
.no-conversations { margin: 9px 4px; color: #999; font-size: 12px; }
@media(max-width:650px) { .conversation-actions { opacity: 1; } }
.composer #viewOnceBtn { border-radius: 9px; color: #315b76; font-weight: 900; }
.composer #viewOnceBtn.active { background: #315b76; color: #fff; }
.view-once-open { width: min(300px, 70vw); margin-top: 7px; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 9px; align-items: center; border: 1px solid #b9d0de; border-radius: 13px; padding: 11px; background: #edf6fb; color: #294e64; text-align: left; cursor: pointer; }
.view-once-open b { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #315b76; color: white; font-size: 19px; }
.view-once-open span { font-weight: 800; }
.view-once-open small { color: #6f8795; }
.view-once-expired { margin-top: 7px; padding: 10px 12px; border-radius: 11px; background: #f0ede8; color: #888; font-size: 12px; font-weight: 700; }
.view-once-opened { display: grid; gap: 5px; }
.view-once-opened small { color: #9b5b45; font-size: 10px; }
#privateTypingStatus { color: #4b8d68; font-weight: 700; }
#privateTypingStatus.is-typing { color: #315b76; }
#privateTypingStatus.is-offline { color: #8c8c88; font-weight: 500; }
#privateTypingStatus.is-busy { color: #b2483d; }
#privateTypingStatus.is-away { color: #a77728; }
#privateTypingStatus.is-typing::after { content: ""; display: inline-block; width: 14px; height: 4px; margin-left: 4px; border-radius: 5px; background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0/5px 4px; animation: typingDots .8s steps(2,end) infinite; }
@keyframes typingDots { 50% { opacity: .3; transform: translateY(-1px); } }
.notifications-button { position: relative; }
.notifications-button .unread-badge { position: absolute; right: -6px; top: -7px; }
.notifications-modal { position: fixed; inset: 0; z-index: 145; background: #10171999; padding: 24px; display: grid; place-items: center; }
.notifications-panel { width: min(520px, 100%); max-height: 86dvh; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 24px 80px #0005; }
.notifications-panel > header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8e3db; }
.notifications-panel header h2, .notifications-panel header p { margin: 0; }
.notifications-panel header p { color: #888; font-size: 12px; margin-top: 4px; }
.notifications-panel header button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #f2eee9; font-size: 24px; }
.notifications-list { overflow-y: auto; padding: 10px; }
.notification-item { width: 100%; display: flex; align-items: flex-start; gap: 11px; border: 0; border-bottom: 1px solid #eee9e3; background: #fff; padding: 13px 10px; text-align: left; color: #252622; }
.notification-item.unread { background: #fff5f1; }
.notification-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #f0ece6; font-size: 18px; }
.notification-item > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notification-item strong { font-size: 13px; }
.notification-item small { color: #666; line-height: 1.35; white-space: normal; }
.notification-item time { color: #aaa; font-size: 10px; }
.notifications-empty { text-align: center; color: #999; padding: 42px 10px; }
@media(max-width:650px) {
  .notifications-button { font-size: 0; padding: 9px !important; }
  .notifications-button::after { content: "🔔"; font-size: 16px; }
  .notifications-modal { padding: 0; align-items: end; }
  .notifications-panel { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
}
.rules-modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px; background: #152027e8; }
.rules-card { width: min(560px, 100%); max-height: 94dvh; overflow-y: auto; background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 28px 90px #0006; }
.rules-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #e8f2f7; font-size: 27px; }
.rules-card h2 { margin: 18px 0 7px; }
.rules-card > p { color: #666; }
.rules-card ul { padding: 15px 15px 15px 34px; border-radius: 13px; background: #f5f3ef; line-height: 1.55; }
.rules-card li { margin: 7px 0; }
.rules-agreement { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #ded8cf; border-radius: 11px; font-weight: 700; line-height: 1.4; }
.rules-agreement input { margin-top: 3px; transform: scale(1.15); }
.rules-card > button { width: 100%; height: 47px; margin-top: 14px; border: 0; border-radius: 11px; background: #315b76; color: #fff; font-weight: 800; }
.rules-card > button:disabled { opacity: .55; }
@media(max-width:650px) {
  .rules-modal { align-items: end; padding: 0; }
  .rules-card { width: 100%; max-height: 96dvh; border-radius: 20px 20px 0 0; padding: 24px 19px max(22px, env(safe-area-inset-bottom)); }
}
@media(max-width:650px) {
  .chat>header { gap: 8px; overflow: hidden; }
  .chat>header>div:first-child { min-width: 0; flex: 1 1 auto; }
  .chat>header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-actions { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow-x: auto; display: flex; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chat-actions::-webkit-scrollbar { display: none; }
  .chat-actions button { flex: 0 0 auto; min-width: 42px; min-height: 42px; }
  .composer button, .account button, .conversation-actions button, .message-actions button { min-height: 40px; }
  .profile-card, .admin-panel { max-height: 96dvh; overscroll-behavior: contain; }
  .call>footer { overflow-x: auto; justify-content: flex-start; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .call>footer button { flex: 0 0 64px; min-height: 58px; }
}
/* Message affiché directement sur l’aperçu quand la caméra ne fournit aucune image. */
.camera-status{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(85%,420px);margin:0;padding:14px;text-align:center;line-height:1.4;background:#111d;border:1px solid #ffffff33;border-radius:12px;color:#fff}
.incoming-call{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:#101714d9;backdrop-filter:blur(8px)}
.incoming-call-card{width:min(430px,100%);padding:34px 28px;text-align:center;background:#fff;border-radius:26px;box-shadow:0 30px 100px #0008}
.incoming-call-avatar{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:#315b76;color:#fff;font-size:34px;box-shadow:0 0 0 12px #315b7617}
.incoming-call-card>p{margin:0;color:#777;font-size:11px;font-weight:800;letter-spacing:1.2px}
.incoming-call-card h2{margin:10px 0;font-size:23px;line-height:1.3}
.incoming-call-card small{display:block;color:#666;line-height:1.5}
.incoming-call-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}
.incoming-call-actions button{height:52px;border:0;border-radius:14px;color:#fff;font-weight:800;font-size:15px}
.incoming-decline{background:#c84a43}.incoming-accept{background:#278560}
.login-separator{display:flex;align-items:center;gap:10px;color:#aaa}.login-separator:before,.login-separator:after{content:"";height:1px;background:#e3ddd6;flex:1}.login-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0}.login-tabs button{height:38px!important;margin:0!important;padding:4px!important;font-size:11px}.login-tabs button.active{background:#315b76;color:#fff;border-color:#315b76}.local-auth-form{display:grid;gap:9px;text-align:left}.local-auth-form input,.local-auth-form select{width:100%;height:43px;border:1px solid #ddd6ce;border-radius:10px;padding:0 12px;background:#fff;font:inherit}.local-auth-form button{margin:2px 0 4px!important;background:#f36f58!important;color:#fff!important;border:0!important}.local-auth-form small{text-align:center;line-height:1.4}.login-card{max-height:94dvh;overflow-y:auto}
.call header h2{margin:0}.call header p{margin:3px 0 0;color:#aeb5b0;font-size:11px}.call-window-actions{display:flex!important;gap:8px!important}.call footer button.control-off{background:#68433f;color:#ffd7d1}.call footer button.control-off span{font-size:10px}
@media(max-width:650px){.incoming-call{align-items:end;padding:0}.incoming-call-card{width:100%;border-radius:24px 24px 0 0;padding:32px 20px max(28px,env(safe-area-inset-bottom))}.incoming-call-actions button{min-height:54px}}
.report-evidence{margin:10px 0;padding:12px;border-left:4px solid #c54b3c;background:#fff3f0;border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere}
.side .room{display:flex;align-items:center;gap:7px;cursor:pointer}
.room-unread{margin-left:auto;min-width:21px;height:21px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:#f36f58;color:#fff;font-size:10px;font-weight:800}
.room-feature{flex:0 0 auto;margin:8px 22px 0;padding:13px 15px;border:1px solid #e2d9cf;border-radius:14px;background:#faf7f2}
.room-feature-title{display:flex;justify-content:space-between;gap:12px;align-items:center}.room-feature-title span{color:#777;font-size:12px}
.webcam-members{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding-bottom:2px}.webcam-members article{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px;background:#fff;border:1px solid #e9e2d9;border-radius:12px}.webcam-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#315b76;color:#fff;font-weight:800;overflow:hidden}.webcam-avatar img{width:100%;height:100%;object-fit:cover}.webcam-members button{border:0;border-radius:8px;padding:7px 9px;background:#315b76;color:#fff;font-weight:700}.webcam-members button:last-child{background:#278560}.webcam-members button:disabled{opacity:.45}
.messages.media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-content:start;gap:14px}.media-gallery .empty{grid-column:1/-1}.media-gallery .message{max-width:none;margin:0;padding:12px;border:1px solid #e8e1d9;border-radius:16px;background:#fff;align-self:start}.media-gallery .message.mine{margin-left:0;flex-direction:row}.media-gallery .message-content{min-width:0;flex:1}.media-gallery .media{width:100%;max-height:270px}
.adult-room-warning{position:fixed;inset:0;z-index:350;display:grid;place-items:center;padding:20px;background:#17110ed9;backdrop-filter:blur(8px)}.adult-room-card{width:min(450px,100%);padding:30px;text-align:center;background:#fff;border-radius:24px;box-shadow:0 30px 100px #0008}.adult-room-icon{width:72px;height:72px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:#9d3030;color:#fff;font-size:24px;font-weight:900}.adult-room-card h2{margin:8px 0}.adult-room-card p{color:#666;line-height:1.55}.adult-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.adult-room-actions button{min-height:48px;border:0;border-radius:12px;font-weight:800}.adult-room-actions button:last-child{background:#9d3030;color:#fff}
.rooms-button,.close-side{display:none}
@media(max-width:650px){
  .rooms-button{display:inline-block!important;font-size:22px;padding:8px 11px!important}
  .side.open{display:flex;position:fixed;z-index:95;inset:0 auto 0 0;width:min(88vw,340px);padding:22px 16px;background:#f8f6f2;box-shadow:12px 0 40px #0004;overflow-y:auto}
  .close-side{display:grid;place-items:center;position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:#eee8df;font-size:27px;z-index:2}
  .side.open .brand{padding-right:42px}
  .side.open .room{cursor:pointer;min-height:44px;display:flex;align-items:center}
  .room-feature{margin:6px 8px 0;padding:10px}.room-feature-title{align-items:flex-start;flex-direction:column;gap:3px}.webcam-members article{display:grid;grid-template-columns:34px auto auto}.webcam-members article strong{grid-column:2/4}.messages.media-gallery{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.media-gallery .message{padding:8px;gap:6px}.media-gallery .message>.avatar{display:none}.media-gallery .message .meta{font-size:11px}.media-gallery .message-actions{flex-wrap:wrap}.adult-room-warning{align-items:end;padding:0}.adult-room-card{border-radius:24px 24px 0 0;padding:28px 19px max(24px,env(safe-area-inset-bottom))}
}
/* =========================================================
   PIED DE PAGE LÉGAL — LETCHAT.FR
   ========================================================= */

.legal-footer {
  width: 100%;
  padding: 18px 15px;
  margin-top: 25px;

  background: #171b26;
  color: #aeb5c5;

  text-align: center;
  font-size: 13px;

  border-top: 1px solid rgba(255,255,255,0.08);
}

.legal-footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.legal-footer a {
  color: #dce2ef;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.legal-footer span {
  color: #626b7d;
}

.legal-footer p {
  margin: 10px 0 0;
  color: #7f8796;
}


/* =========================
   VERSION TÉLÉPHONE
   ========================= */

@media (max-width: 700px) {

  .legal-footer {
    padding: 16px 10px;
    margin-top: 15px;
    font-size: 12px;
  }

  .legal-footer nav {
    gap: 6px;
  }

  .legal-footer a {
    padding: 4px 2px;
  }

  .legal-footer p {
    /* =========================================================
   PAGE PUBLIQUE — LETCHAT.FR
   ========================================================= */

.public-home {
  width: 100%;
  background: #ffffff;
  color: #202124;
}

.public-home-inner {
  width: 100%;
}

.public-intro {
  max-width: 850px;
  margin: 0 auto;
  padding: 85px 25px 55px;
  text-align: center;
}

.public-badge,
.public-eyebrow {
  display: inline-block;
  margin-bottom: 14px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  color: #f36f58;
}

.public-intro h2 {
  margin: 0 auto 20px;

  max-width: 720px;

  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1px;
}

.public-intro p {
  max-width: 700px;
  margin: 0 auto;

  font-size: 17px;
  line-height: 1.7;

  color: #68707d;
}


/* CARTES FONCTIONNALITÉS */

.public-features {
  max-width: 1150px;

  margin: 0 auto;
  padding: 20px 25px 90px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.public-feature {
  padding: 30px 25px;

  background: #faf9f7;

  border: 1px solid #eeeae5;
  border-radius: 18px;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.public-feature:hover {
  transform: translateY(-4px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}

.public-feature-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  background: #fff0ec;

  border-radius: 14px;

  font-size: 22px;
}

.public-feature h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.public-feature p {
  margin: 0;

  color: #6c727c;

  font-size: 14px;
  line-height: 1.65;
}


/* ESPACES */

.public-section {
  padding: 90px 25px;

  background: #faf8f5;
}

.public-section-text {
  max-width: 1000px;
  margin: 0 auto;
}

.public-section h2,
.public-safety h2,
.public-access h2 {
  margin: 0 0 15px;

  font-size: 32px;
  letter-spacing: -.5px;
}

.public-section-text > p {
  max-width: 650px;

  margin: 0 0 35px;

  color: #69717d;

  font-size: 16px;
  line-height: 1.7;
}

.public-room-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}

.public-room {
  padding: 22px;

  background: white;

  border: 1px solid #ebe7e1;
  border-radius: 14px;
}

.public-room strong {
  display: block;
  margin-bottom: 6px;

  font-size: 16px;
}

.public-room span {
  color: #727883;

  font-size: 14px;
  line-height: 1.55;
}


/* SÉCURITÉ */

.public-safety {
  padding: 90px 25px;
}

.public-safety-content {
  max-width: 1000px;
  margin: 0 auto;
}

.public-safety-content > p {
  max-width: 700px;

  color: #69717d;

  font-size: 16px;
  line-height: 1.7;
}

.public-safety-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 18px;

  margin-top: 35px;
}

.public-safety-grid > div {
  padding: 25px;

  border: 1px solid #ececec;
  border-radius: 15px;
}

.public-safety-grid strong {
  font-size: 16px;
}

.public-safety-grid p {
  margin: 10px 0 0;

  color: #717782;

  font-size: 14px;
  line-height: 1.6;
}


/* APPEL À L'ACTION */

.public-access {
  padding: 90px 25px;

  text-align: center;

  background: #171b26;
  color: white;
}

.public-access p {
  max-width: 620px;

  margin: 0 auto 28px;

  color: #b9c0cd;

  line-height: 1.7;
}

.public-access-button {
  padding: 14px 25px;

  border: 0;
  border-radius: 10px;

  background: #f36f58;
  color: white;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;
}

.public-access-button:hover {
  opacity: .92;
}


/* FOOTER PUBLIC */

.public-footer {
  padding: 35px 25px;

  text-align: center;

  background: #11151e;
  color: #89909d;
}

.public-footer-brand {
  margin-bottom: 20px;
}

.public-footer-brand strong {
  display: block;

  margin-bottom: 3px;

  color: white;

  font-size: 19px;
}

.public-footer-brand span {
  font-size: 13px;
}

.public-footer nav {
  display: flex;

  justify-content: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 20px;
}

.public-footer a {
  color: #c7ccd5;

  text-decoration: none;

  font-size: 13px;
}

.public-footer a:hover {
  color: white;
  text-decoration: underline;
}

.public-copyright {
  margin: 0;

  font-size: 12px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 950px) {

  .public-features {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .public-intro {
    padding: 60px 20px 40px;
  }

  .public-intro h2 {
    font-size: 30px;
  }

  .public-intro p {
    font-size: 15px;
  }

  .public-features {
    grid-template-columns: 1fr;

    padding:
      10px 18px 60px;
  }

  .public-section,
  .public-safety,
  .public-access {
    padding: 60px 20px;
  }

  .public-section h2,
  .public-safety h2,
  .public-access h2 {
    font-size: 27px;
  }

  .public-room-list {
    grid-template-columns: 1fr;
  }

  .public-safety-grid {
    grid-template-columns: 1fr;
  }

  .public-footer nav {
    gap: 12px;
  }

}
    margin-top: 8px;
  }

}
/* =========================================================
   AFFICHAGE PAGE PUBLIQUE LETCHAT
   ========================================================= */

/* Quand l'écran de connexion est affiché */
body:has(#login:not(.hidden)) {
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* La connexion reste une belle première section plein écran */
#login:not(.hidden) {
  position: relative !important;
  inset: auto !important;

  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;

  overflow: visible !important;
}

/* Présentation publique */
.public-home {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Dès que le tchat est ouvert, on masque toute la partie publique */
body:has(#app:not(.hidden)) .public-home {
  display: none !important;
}

/* Et le tchat reprend son fonctionnement normal */
body:has(#app:not(.hidden)) {
  height: 100vh;
  overflow: hidden;
}

/* Téléphone */
@media (max-width: 650px) {

  #login:not(.hidden) {
    min-height: 100svh !important;
  }

  body:has(#login:not(.hidden)) {
    min-height: 100svh;
  }

}
/* =========================================================
   LETCHAT — GESTION FINALE DU SCROLL
   ========================================================= */

/* Écran public : autoriser toute la page à défiler */
html:has(#login:not(.hidden)),
html:has(#login:not(.hidden)) body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Première partie : connexion */
#login:not(.hidden) {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}

/* Présentation publique sous la connexion */
body:has(#login:not(.hidden)) .public-home {
  display: block !important;
}

/* Utilisateur connecté : retour au tchat plein écran */
html:has(#app:not(.hidden)),
html:has(#app:not(.hidden)) body {
  height: 100% !important;
  overflow: hidden !important;
}
/* =========================================================
   LETCHAT - PAGE PUBLIQUE AVANT CONNEXION
   CORRECTIF FINAL
========================================================= */

.public-home {
  display: block;
  width: 100%;
  background: #ffffff;
  color: #202124;
  overflow: visible;
}

.public-home-inner {
  width: 100%;
}

/* INTRODUCTION */

.public-home .public-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 30px 70px;
  text-align: center;
}

.public-home .public-badge,
.public-home .public-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff0ec;
  color: #f36f58;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.public-home .public-intro h2 {
  max-width: 800px;
  margin: 0 auto 22px;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -1px;
  color: #202124;
}

.public-home .public-intro p {
  max-width: 760px;
  margin: 0 auto;
  color: #68707d;
  font-size: 17px;
  line-height: 1.7;
}

/* 4 CARTES */

.public-home .public-features {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px 90px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.public-home .public-feature {
  padding: 30px 25px;
  background: #faf9f7;
  border: 1px solid #eeeae5;
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.public-home .public-feature-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: #fff0ec;
  font-size: 25px;
}

.public-home .public-feature h3 {
  margin: 0 0 12px;
  font-size: 19px;
  color: #202124;
}

.public-home .public-feature p {
  margin: 0;
  color: #68707d;
  line-height: 1.6;
}

/* ESPACES */

.public-home .public-section {
  background: #f8f7f5;
  padding: 85px 30px;
}

.public-home .public-section-text {
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}

.public-home .public-section h2 {
  margin: 0 0 15px;
  font-size: 34px;
  color: #202124;
}

.public-home .public-section-text > p {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #68707d;
  font-size: 16px;
  line-height: 1.7;
}

.public-home .public-room-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 850px;
  margin: 0 auto;
  text-align: left;
}

.public-home .public-room {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e8e3de;
  border-radius: 16px;
}

.public-home .public-room strong {
  font-size: 17px;
  color: #202124;
}

.public-home .public-room span {
  color: #68707d;
  line-height: 1.5;
}

/* SÉCURITÉ */

.public-home .public-safety {
  padding: 90px 30px;
  background: #ffffff;
}

.public-home .public-safety-content {
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}

.public-home .public-safety h2 {
  margin: 0 0 15px;
  font-size: 34px;
  color: #202124;
}

.public-home .public-safety-content > p {
  max-width: 720px;
  margin: 0 auto 40px;
  color: #68707d;
  font-size: 16px;
  line-height: 1.7;
}

.public-home .public-safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-home .public-safety-grid > div {
  padding: 25px;
  background: #faf9f7;
  border: 1px solid #eeeae5;
  border-radius: 18px;
  text-align: left;
}

.public-home .public-safety-grid strong {
  font-size: 17px;
}

.public-home .public-safety-grid p {
  margin: 10px 0 0;
  color: #68707d;
  line-height: 1.6;
}

/* APPEL À L'ACTION */

.public-home .public-access {
  padding: 85px 30px;
  text-align: center;
  background: #fff3ef;
}

.public-home .public-access h2 {
  margin: 0 0 15px;
  font-size: 34px;
  color: #202124;
}

.public-home .public-access p {
  max-width: 650px;
  margin: 0 auto 28px;
  color: #68707d;
  font-size: 16px;
  line-height: 1.7;
}

.public-home .public-access-button {
  border: 0;
  border-radius: 12px;
  padding: 15px 25px;
  background: #f36f58;
  color: white;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* FOOTER PUBLIC */

.public-home .public-footer {
  padding: 35px 30px;
  background: #171c28;
  color: white;
  text-align: center;
}

.public-home .public-footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.public-home .public-footer-brand span {
  color: #aeb5c3;
}

.public-home .public-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.public-home .public-footer a {
  color: #d7dce5;
  text-decoration: none;
}

.public-home .public-copyright {
  margin: 20px 0 0;
  color: #8d96a8;
  font-size: 13px;
}

/* MOBILE */

@media (max-width: 850px) {

  .public-home .public-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-home .public-safety-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  .public-home .public-intro {
    padding: 60px 20px 45px;
  }

  .public-home .public-intro h2 {
    font-size: 32px;
  }

  .public-home .public-features {
    grid-template-columns: 1fr;
    padding: 0 18px 60px;
  }

  .public-home .public-room-list {
    grid-template-columns: 1fr;
  }

  .public-home .public-section,
  .public-home .public-safety,
  .public-home .public-access {
    padding: 60px 20px;
  }

  .public-home .public-section h2,
  .public-home .public-safety h2,
  .public-home .public-access h2 {
    font-size: 28px;
  }
}
/* Aucune page publique derrière le tchat */
body:has(#app:not(.hidden)) .public-home {
  display: none !important;
}


/* =========================================================
   PROFIL PUBLIC — actions sociales
   ========================================================= */
.public-profile-actions-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 18px;
}

.public-profile-actions-main button,
.public-profile-more-menu button {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  padding: 10px 13px;
  font-weight: 800;
  cursor: pointer;
}

#publicProfileMessage {
  background: var(--coral);
  color: #fff;
}

#publicProfileCall {
  background: #292c29;
  color: #fff;
}

#publicProfileFriend {
  grid-column: 1 / 3;
  background: #edf3f7;
  color: #294b61;
}

#publicProfileCall:disabled,
#publicProfileFriend:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.public-profile-more-button {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 48px;
  background: #f1eee9;
  color: #444;
  font-size: 23px;
}

.public-profile-more-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf8f5;
}

#publicProfileReport {
  background: #fff;
  color: #6d542d;
  border: 1px solid #e7d7bb;
}

#publicProfileBlock {
  background: #fff0ed;
  color: #a13f31;
  border: 1px solid #f2c6bf;
}

@media (max-width: 520px) {
  .public-profile-actions-main {
    grid-template-columns: 1fr 1fr auto;
  }

  #publicProfileMessage,
  #publicProfileCall {
    font-size: 12px;
    padding-inline: 8px;
  }

.public-profile-more-menu {
    grid-template-columns: 1fr;
  }
}

/* Rencontres et salon adulte */
.meeting-panel{width:100%}.meeting-heading{display:flex;align-items:end;justify-content:space-between;gap:15px}.meeting-heading>div:first-child{display:flex;flex-direction:column;gap:4px}.meeting-filters{display:flex;gap:8px}.meeting-filters select{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff}.meeting-profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}.meeting-profile{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.meeting-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#e5ddd4;font-weight:800}.meeting-avatar img{width:100%;height:100%;object-fit:cover}.meeting-profile>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}.meeting-profile small{color:#58916e}.meeting-profile p{margin:4px 0;color:var(--muted);font-size:12px;line-height:1.4}.meeting-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.meeting-actions button{border:1px solid var(--line);border-radius:9px;padding:8px;background:#f5f2ed;font-weight:700}.meeting-actions .meeting-call{border-color:var(--coral);background:var(--coral);color:#fff}.meeting-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted)}.adult-room-link{color:#9a312a!important}.adult-safety-panel{width:100%;display:grid;grid-template-columns:1fr auto;gap:10px 20px;padding:16px;border:1px solid #e0b4aa;border-radius:16px;background:#fff2ef}.adult-safety-panel>div{display:flex;flex-direction:column;gap:5px}.adult-safety-panel>div b{color:#8e2d27}.adult-safety-panel ul{grid-column:1/-1;margin:3px 0;padding-left:20px;color:#6d4944;line-height:1.6}.adult-safety-panel button{grid-column:2;grid-row:1;border:0;border-radius:10px;padding:9px 13px;background:#b94138;color:#fff;font-weight:800}@media(max-width:650px){.meeting-heading{align-items:stretch;flex-direction:column}.meeting-filters{display:grid;grid-template-columns:1fr 1fr}.meeting-profiles{grid-template-columns:1fr}.meeting-actions{grid-template-columns:1fr 1fr}.meeting-actions .meeting-call{grid-column:1/-1}.adult-safety-panel{display:flex;flex-direction:column}.adult-safety-panel button{width:100%}}
html[data-theme="dark"] .meeting-profile,html[data-theme="dark"] .meeting-filters select{background:#202b3b;color:#f5f7fb;border-color:#334155}html[data-theme="dark"] .meeting-actions button:not(.meeting-call){background:#263447;color:#f5f7fb;border-color:#40516a}html[data-theme="dark"] .adult-safety-panel{background:#352426;border-color:#74403e}html[data-theme="dark"] .adult-safety-panel>div b{color:#ff9b8d}html[data-theme="dark"] .adult-safety-panel ul{color:#e7c2bc}

/* Le Café moderne */
.cafe-overview{width:100%;display:grid;grid-template-columns:1fr auto;gap:14px}.cafe-topics,.cafe-active,.cafe-pinned{display:flex;flex-direction:column;gap:8px}.cafe-topics>div{display:flex;flex-wrap:wrap;gap:7px}.cafe-topics button{border:1px solid var(--line);border-radius:18px;padding:7px 11px;background:#fff;color:#4d4f4a;cursor:pointer}.cafe-active>div{display:flex;align-items:center;gap:5px}.cafe-active button{width:38px;height:38px;border:2px solid #fff;border-radius:50%;padding:0;overflow:hidden;background:#ddd}.cafe-active img{width:100%;height:100%;object-fit:cover}.cafe-active span{font-size:12px;color:var(--muted)}.cafe-pinned{grid-column:1/-1;padding-top:10px;border-top:1px solid var(--line)}.cafe-pinned button{display:flex;gap:8px;border:0;border-radius:9px;padding:8px 10px;background:#fff8df;text-align:left}.cafe-pinned button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pinned-label{padding:2px 6px;border-radius:9px;background:#fff1b8;color:#745b00;font-size:9px;font-weight:800}@media(max-width:650px){.cafe-overview{grid-template-columns:1fr}.cafe-active{grid-row:1}.cafe-topics button{font-size:12px}.cafe-pinned{grid-column:1}}
html[data-theme="dark"] .cafe-topics button{background:#263447;color:#edf2f7;border-color:#40516a}html[data-theme="dark"] .cafe-pinned button{background:#393422;color:#fff3bd}html[data-theme="dark"] .pinned-label{background:#5b4c18;color:#fff0a6}
.cafe-overview-compact{grid-template-columns:1fr}.cafe-overview-compact .cafe-active{flex-direction:row;align-items:center;justify-content:space-between}.cafe-overview-compact .cafe-pinned{grid-column:1}

/* Component: v3-modern.css */
/* Letchat V3 — interface moderne, responsive et non intrusive. */
:root {
  --v3-bg: #f3f5f9;
  --v3-surface: #ffffff;
  --v3-surface-soft: #f8fafc;
  --v3-surface-strong: #eef2f7;
  --v3-text: #172033;
  --v3-text-soft: #687386;
  --v3-border: #e1e6ef;
  --v3-primary: #f36f58;
  --v3-primary-strong: #df5741;
  --v3-accent: #315b76;
  --v3-success: #2ca66f;
  --v3-shadow: 0 18px 50px rgba(29, 43, 68, .10);
  --v3-shadow-soft: 0 8px 24px rgba(29, 43, 68, .08);
  --v3-radius: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --v3-bg: #0f141d;
  --v3-surface: #171d28;
  --v3-surface-soft: #1d2532;
  --v3-surface-strong: #252f3e;
  --v3-text: #f4f7fb;
  --v3-text-soft: #aab4c4;
  --v3-border: #2d3746;
  --v3-primary: #ff806b;
  --v3-primary-strong: #f36f58;
  --v3-accent: #78acd0;
  --v3-success: #49c98c;
  --v3-shadow: 0 22px 60px rgba(0, 0, 0, .35);
  --v3-shadow-soft: 0 10px 28px rgba(0, 0, 0, .24);
}

body {
  color: var(--v3-text);
  background:
    radial-gradient(circle at 0 0, rgba(243,111,88,.10), transparent 32rem),
    var(--v3-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease; }
button:not(:disabled):active { transform: scale(.97); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--v3-primary) 35%, transparent);
  outline-offset: 2px;
}

/* Connexion et accueil public */
.login {
  min-height: 100dvh;
  padding: 48px 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(243,111,88,.22), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(49,91,118,.16), transparent 28rem),
    var(--v3-bg);
}
.login-card {
  width: min(480px, 100%);
  padding: 42px;
  border: 1px solid var(--v3-border);
  border-radius: 28px;
  color: var(--v3-text);
  background: color-mix(in srgb, var(--v3-surface) 94%, transparent);
  box-shadow: var(--v3-shadow);
  backdrop-filter: blur(18px);
}
.logo, .brand b { box-shadow: 0 10px 24px rgba(243,111,88,.28); }
.login-card h1 { font-size: clamp(27px, 5vw, 34px); letter-spacing: -.7px; }
.login-card > p, .login-card small { color: var(--v3-text-soft); }
.login-tabs { padding: 5px; border-radius: 14px; background: var(--v3-surface-strong); }
.login-tabs button { border: 0; color: var(--v3-text-soft); background: transparent; }
.login-tabs button.active { color: var(--v3-text); background: var(--v3-surface); box-shadow: var(--v3-shadow-soft); }
.local-auth-form input, .local-auth-form select {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.local-auth-form button[type="submit"], #googleLogin {
  min-height: 50px;
  border-radius: 14px;
}
.legal-links a { color: var(--v3-accent); }

.public-home { color: var(--v3-text); background: var(--v3-bg); }
.public-home .public-intro {
  background:
    radial-gradient(circle at 18% 18%, rgba(243,111,88,.20), transparent 25rem),
    linear-gradient(145deg, var(--v3-surface), var(--v3-surface-soft));
}
.public-home .public-intro h2,
.public-home .public-section h2,
.public-home .public-safety h2,
.public-home .public-access h2 { color: var(--v3-text); letter-spacing: -.8px; }
.public-home .public-intro p,
.public-home .public-feature p,
.public-home .public-section p,
.public-home .public-safety p,
.public-home .public-access p { color: var(--v3-text-soft); }
.public-home .public-feature,
.public-home .public-room,
.public-home .public-safety-grid > div {
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow-soft);
}
.public-home .public-section,
.public-home .public-safety,
.public-home .public-access { background: var(--v3-bg); }
.public-home .public-access-button { border-radius: 14px; box-shadow: 0 12px 26px rgba(243,111,88,.25); }

/* Structure principale */
.app {
  width: min(1760px, 100%);
  max-width: none;
  grid-template-columns: 270px minmax(0, 1fr) 320px;
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow);
}
.side {
  padding: 24px 18px;
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.brand { margin-bottom: 26px; font-size: 24px; letter-spacing: -.6px; }
.brand b { width: 42px; height: 42px; border-radius: 14px; }
.new {
  min-height: 46px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(243,111,88,.20);
}
.side a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  color: var(--v3-text-soft);
  border: 1px solid transparent;
  cursor: pointer;
}
.side a:hover { color: var(--v3-text); background: var(--v3-surface-strong); }
.side a.active {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow-soft);
}
.account { border-color: var(--v3-border); }
.account img { width: 44px; height: 44px; }
.account button { color: var(--v3-text-soft); }

.chat { color: var(--v3-text); background: var(--v3-surface); }
.chat > header {
  height: 82px;
  flex-basis: 82px;
  padding: 0 26px;
  border-color: var(--v3-border);
  background: color-mix(in srgb, var(--v3-surface) 92%, transparent);
  backdrop-filter: blur(14px);
}
.chat h1 { font-size: 19px; letter-spacing: -.3px; }
.chat header p { color: var(--v3-text-soft); }
.chat-actions { display: flex; align-items: center; gap: 7px; }
.chat header .chat-actions button {
  min-width: 42px;
  min-height: 42px;
  padding: 10px 13px;
  color: var(--v3-text);
  background: var(--v3-surface-strong);
}
.chat header .chat-actions button:hover { box-shadow: var(--v3-shadow-soft); }
.chat header .chat-actions #adminBtn { color: #fff; background: var(--v3-accent); }
.chat header .chat-actions #callBtn { color: #fff; background: #242b35; }
.theme-button { font-size: 19px; }

.ad-banner {
  margin: 12px 24px 0;
  color: var(--v3-text-soft);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.ad-banner span { background: var(--v3-surface-strong); }
.messages { padding: 28px 34px; background: var(--v3-surface); scrollbar-color: var(--v3-border) transparent; }
.message { margin-bottom: 24px; }
.message .bubble {
  padding: 11px 15px;
  color: var(--v3-text);
  border: 1px solid var(--v3-border);
  border-radius: 6px 17px 17px 17px;
  background: var(--v3-surface-soft);
  box-shadow: 0 4px 12px rgba(29,43,68,.04);
}
.message.mine .bubble {
  color: #5b251d;
  border-color: color-mix(in srgb, var(--v3-primary) 25%, var(--v3-border));
  border-radius: 17px 6px 17px 17px;
  background: color-mix(in srgb, var(--v3-primary) 14%, var(--v3-surface));
}
html[data-theme="dark"] .message.mine .bubble { color: #ffe5df; }
.message .meta time, .empty, .typing { color: var(--v3-text-soft); }
.empty h2 { color: var(--v3-text); }
.message-actions > button, .reaction-chip, .reaction-picker {
  color: var(--v3-text-soft);
  border-color: var(--v3-border);
  background: var(--v3-surface-strong);
}
.reaction-picker { box-shadow: var(--v3-shadow-soft); }
.chat footer {
  padding: 14px 24px max(14px, env(safe-area-inset-bottom));
  border-color: var(--v3-border);
  background: var(--v3-surface);
}
.composer {
  padding: 7px;
  border-color: var(--v3-border);
  border-radius: 18px;
  background: var(--v3-surface-soft);
  box-shadow: 0 8px 24px rgba(29,43,68,.06);
}
.composer textarea { color: var(--v3-text); background: transparent; }
.composer textarea::placeholder { color: var(--v3-text-soft); }
.composer button { color: var(--v3-text-soft); }
.composer #send { background: var(--v3-primary); box-shadow: 0 7px 15px rgba(243,111,88,.22); }

.people {
  padding: 25px 20px;
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.people > hr { border-color: var(--v3-border); }
.people h2 { letter-spacing: -.2px; }
.people-help, .no-friends, .no-conversations { color: var(--v3-text-soft); }
.conversation-tabs button { color: var(--v3-text-soft); background: var(--v3-surface-strong); }
.conversation-tabs button.active { color: #fff; background: var(--v3-accent); }
.conversation-item:hover, .person-row, .friend-card { background: var(--v3-surface); }
.friend-card {
  border: 1px solid var(--v3-border);
}
.friend-card button {
  color: var(--v3-text);
  background: var(--v3-surface-strong);
}

/* Les anciennes couleurs de profil étaient presque blanches en mode sombre. */
html[data-theme="dark"] .person-row.gender-female {
  color: var(--v3-text);
  border-color: #57394a;
  background: #2b222d;
}
html[data-theme="dark"] .person-row.gender-male {
  color: var(--v3-text);
  border-color: #354b63;
  background: #202b39;
}
html[data-theme="dark"] .person-row.gender-neutral {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: #202734;
}
html[data-theme="dark"] .person-row.gender-female strong { color: #f4a8c8; }
html[data-theme="dark"] .person-row.gender-male strong { color: #9bc9f2; }
html[data-theme="dark"] .person-row.gender-neutral strong { color: var(--v3-text); }
html[data-theme="dark"] .person-row .person-button,
html[data-theme="dark"] .friend-card button {
  color: var(--v3-text);
  background: transparent;
}
html[data-theme="dark"] .friend-card {
  border-color: var(--v3-border);
  background: #202734;
}
html[data-theme="dark"] .friend-card button:hover,
html[data-theme="dark"] .person-row .person-button:hover {
  background: var(--v3-surface-strong);
}

/* V3.1 — finitions des conversations, notifications et profils. */
.mobile-theme-button { display: none; }
.conversation-item {
  color: var(--v3-text);
  border-color: transparent;
  background: transparent;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.conversation-item:hover { border-color: var(--v3-border); transform: translateY(-1px); }
.conversation-item.active {
  color: var(--v3-text);
  border-color: color-mix(in srgb, var(--v3-primary) 42%, var(--v3-border));
  background: color-mix(in srgb, var(--v3-primary) 10%, var(--v3-surface));
}
.conversation-item.unread {
  color: var(--v3-text);
  border-color: color-mix(in srgb, var(--v3-accent) 30%, var(--v3-border));
  background: color-mix(in srgb, var(--v3-accent) 10%, var(--v3-surface));
}
.conversation-item strong,
.conversation-item span,
.conversation-item small { color: inherit; }
.conversation-actions button,
.message-actions > button {
  color: var(--v3-text-soft);
  border: 1px solid var(--v3-border);
  background: var(--v3-surface-strong);
}
.message-actions > button:hover,
.conversation-actions button:hover { color: var(--v3-text); }
.message-actions .delete-action { color: #d86b5d; }
.message-toast {
  color: var(--v3-text);
  border: 1px solid var(--v3-border);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow);
}
.unread-badge { box-shadow: 0 0 0 3px var(--v3-surface-soft); }
.notification-item {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface);
}
.notification-item.unread { background: color-mix(in srgb, var(--v3-primary) 10%, var(--v3-surface)); }
.notification-icon { background: var(--v3-surface-strong); }
.notification-item small,
.notification-item time,
.notifications-panel header p { color: var(--v3-text-soft); }
.public-profile-head img { border: 3px solid var(--v3-surface); box-shadow: 0 0 0 2px var(--v3-border), var(--v3-shadow-soft); }
.public-profile-details > div { border-color: var(--v3-border); }
.public-profile-details dt { color: var(--v3-text-soft); }
.public-profile-actions button { border-radius: 13px; box-shadow: var(--v3-shadow-soft); }
.profile-save { border-radius: 13px; box-shadow: 0 10px 22px rgba(243,111,88,.20); }

@keyframes v3Enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.message { animation: v3Enter .22s ease both; }
.profile-card, .search-panel, .notifications-panel, .admin-panel { animation: v3Enter .20s ease both; }

/* Fenêtres et formulaires */
.profile-modal, .search-modal, .notifications-modal, .admin-modal { backdrop-filter: blur(8px); }
.profile-card, .search-panel, .notifications-panel, .admin-panel {
  color: var(--v3-text);
  border: 1px solid var(--v3-border);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow);
}
.profile-card input, .profile-card textarea, .profile-card select,
.search-field, .search-field input {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.profile-photo-editor, .public-profile-bio, .reply-preview, .message-quote {
  color: var(--v3-text);
  border-color: var(--v3-border);
  background: var(--v3-surface-soft);
}
.profile-close, .search-panel header button, .notifications-panel header button {
  color: var(--v3-text);
  background: var(--v3-surface-strong);
}

/* Tablette */
@media (max-width: 1180px) {
  .app { grid-template-columns: 238px minmax(0, 1fr); }
  .people { display: block; position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(390px, 90vw); transform: translateX(105%); transition: transform .22s ease; box-shadow: -18px 0 50px rgba(0,0,0,.18); }
  .people.open { transform: translateX(0); }
}

/* Téléphone */
@media (max-width: 650px) {
  .login { align-items: start; padding: max(22px, env(safe-area-inset-top)) 14px 28px; overflow-y: auto; }
  .login-card { padding: 28px 20px; border-radius: 24px; }
  .login-card h1 { margin-top: 18px; }
  .app { width: 100%; grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .side {
    display: flex;
    position: fixed;
    z-index: 95;
    inset: 0 auto 0 0;
    width: min(86vw, 340px);
    padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 18px 0 50px rgba(0,0,0,.18);
  }
  .side.open { transform: translateX(0); }
  .mobile-theme-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 9px;
    border: 1px solid var(--v3-border);
    border-radius: 13px;
    color: var(--v3-text);
    background: var(--v3-surface-strong);
    font-weight: 750;
  }
  .chat > header {
    height: 68px;
    flex-basis: 68px;
    padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  }
  .chat > header > div:first-child { min-width: 0; }
  .chat h1 { max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
  .chat-actions { gap: 4px; }
  .chat header .chat-actions button { min-width: 38px; min-height: 38px; padding: 8px; border-radius: 12px; }
  .chat-actions #peopleBtn, .chat-actions #callBtn { font-size: 0; }
  .chat-actions #peopleBtn::after { content: "👥"; font-size: 17px; }
  .chat-actions #callBtn::after { content: "▣"; font-size: 17px; }
  .chat-actions #searchBtn, .chat-actions .chat-actions #searchBtn { display: none; }
.chat-actions #notificationsBtn { display: inline-flex; align-items: center; justify-content: center; order: -2; }
.chat-actions #roomsBtn { order: -1; }
  .ad-banner { margin: 7px 8px 0; border-radius: 12px; }
  .messages { padding: 18px 10px; }
  .message { max-width: 96%; gap: 8px; }
  .message .bubble { padding: 10px 12px; }
  .chat footer { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .composer { padding: 5px; border-radius: 16px; }
  .composer button { width: 35px; flex-basis: 35px; }
  .composer textarea { font-size: 16px; }
  .people { width: min(90vw, 360px); color: var(--v3-text); background: var(--v3-surface-soft); }
  .close-side, .close-people { color: var(--v3-text); background: var(--v3-surface-strong); }
  .profile-modal { background: rgba(5,10,18,.72); }
  .profile-card { color: var(--v3-text); border-radius: 24px 24px 0 0; }
  .public-home .public-intro { padding-top: 54px; }
}

@media (max-width: 390px) {
  .theme-button { display: none; }
  .chat h1 { max-width: 38vw; }
  .composer #emoji { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Component: v2-community.css */
/* Community navigation: uses the existing light/dark theme palette. */
.side { min-height:0; overflow:hidden; }
.side > .brand { margin-bottom:16px; flex-shrink:0; }
.side > .new, .side > nav, .side > .account, .side > .mobile-theme-button { flex-shrink:0; }
.side > nav { margin:10px 0; }
.v2-room-directory { min-height:70px; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--v3-border) transparent; padding-right:3px; }
.v2-room-group { margin:0 0 8px; }
.v2-room-group summary { padding:10px 4px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--v3-text-soft); cursor:pointer; }
.v2-room-row { display:flex; align-items:center; gap:2px; }
.v2-room-row[hidden], .v2-room-group[hidden] { display:none!important; }
.side .v2-room-row .room { margin:2px 0; padding:9px 8px; min-width:0; flex:1; text-decoration:none; font-size:13px; gap:8px; border-radius:10px; }
.v2-room-icon { width:24px; text-align:center; flex-shrink:0; font-size:15px; }
.v2-room-name { min-width:0; overflow-wrap:anywhere; }
.v2-room-row .room-unread { margin-left:auto; flex-shrink:0; }
.side > .account { margin-top:12px; padding-top:14px; }
@media(max-width:650px) { .side.open { overflow:hidden; padding-bottom:max(16px,env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Component: v4-polish.css */
/* Letchat — finition communauté, septembre 2026. Chargé après les styles existants. */
:root { --v3-primary: #e56550; --v3-primary-strong: #cd4d39; --v3-radius: 16px; }
html[data-theme="dark"] { --v3-primary: #ff8973; --v3-primary-strong: #f36f58; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button:disabled { cursor: wait; opacity: .6; }
.app { height: 100dvh; grid-template-columns: 248px minmax(0, 1fr) 302px; }
.chat { position: relative; min-width: 0; }
.side { padding: 22px 15px; }
.brand { margin-bottom: 20px; }
.brand b { border-radius: 13px; }
.side .new { border-radius: 12px; min-height: 44px; }
.side nav { margin-top: 12px; }
.side a.active { color: var(--v3-primary-strong); box-shadow: none; border-color: color-mix(in srgb, var(--v3-primary) 24%, var(--v3-border)); background: color-mix(in srgb, var(--v3-primary) 8%, var(--v3-surface)); }
.v2-room-row { margin: 3px 0; }
.v2-room-group summary { font-size: 11px; letter-spacing: .04em; }
.chat > header { min-height: 70px; height: auto; flex-basis: auto; padding: 12px 20px; gap: 12px; }
.chat > header > div:first-child { min-width: 0; }
.chat h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-actions { flex-wrap: wrap; justify-content: flex-end; }
.chat header .chat-actions button { min-height: 38px; min-width: 38px; padding: 8px 10px; border-radius: 10px; }
.messages { padding: 24px; overscroll-behavior: contain; }
.message { max-width: 88%; margin-bottom: 19px; }
.message .bubble { overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.message .meta { gap: 8px; }
.message .meta strong { color: var(--v3-text); }
.message.mine .bubble { background: color-mix(in srgb, var(--v3-primary) 13%, var(--v3-surface)); }
.message .message-actions { flex-wrap: wrap; }
.message-actions button { min-height: 28px; }
.chat footer { position: relative; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
.composer { align-items: flex-end; border: 1px solid var(--v3-border); background: var(--v3-surface-soft); border-radius: 16px; padding: 6px; }
.composer:focus-within { border-color: var(--v3-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-primary) 10%, transparent); }
.composer textarea { max-height: 132px; line-height: 21px; background: transparent; }
.composer button { min-height: 38px; }
.composer #send { color: #fff; background: #d7513d; }
.composer-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 3px 0; font-size: 10px; color: var(--v3-text-soft); }
#connectionStatus { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#connectionStatus::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #bc8115; }
#connectionStatus[data-state="online"]::before { background: var(--v3-success); }
#connectionStatus[data-state="offline"]::before { background: #d7513d; }
.jump-latest { position: absolute; z-index: 8; bottom: 145px; left: 50%; transform: translateX(-50%); border: 1px solid var(--v3-border); border-radius: 24px; color: var(--v3-text); background: var(--v3-surface); padding: 10px 16px; box-shadow: var(--v3-shadow-soft); white-space: nowrap; }
.jump-latest:not(:disabled):active { transform: translateX(-50%); }
.emoji-picker { position: absolute; bottom: calc(100% + 8px); right: 16px; z-index: 15; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-width: calc(100vw - 24px); padding: 10px; border: 1px solid var(--v3-border); border-radius: 16px; box-shadow: var(--v3-shadow); background: var(--v3-surface); }
.emoji-picker button { width: 34px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; }
.emoji-picker button:hover { background: var(--v3-surface-strong); }
.people { padding: 22px 16px; }
.people h2 { font-size: 14px; }
.contact-search { display: block; margin: 12px 0; }
.contact-search input { width: 100%; min-width: 0; border: 1px solid var(--v3-border); border-radius: 10px; background: var(--v3-surface); color: var(--v3-text); padding: 10px 11px; font-size: 12px; }
.conversation-item { border-radius: 12px; }
.conversation-actions button { min-width: 30px; min-height: 30px; }
.friends-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#friendRequestCount { color: var(--v3-primary); font-size: 11px; font-weight: 600; }
.friend-card { gap: 8px; padding: 9px; border-radius: 11px; background: var(--v3-surface); }
.friend-open { min-width: 0; overflow-wrap: anywhere; }
.friend-remove { min-width: 32px; min-height: 32px; }
.outgoing-requests { margin: 10px 0; font-size: 12px; color: var(--v3-text-soft); }
.outgoing-requests summary { padding: 8px 0; cursor: pointer; }
.member-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 750; color: var(--v3-accent); background: var(--v3-surface-strong); overflow: hidden; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card { border: 1px solid var(--v3-border); }
.profile-card input, .profile-card select, .profile-card textarea { color: var(--v3-text); background: var(--v3-surface-soft); border-color: var(--v3-border); }
.bio-count { font-size: 11px; font-weight: 400; text-align: right; color: var(--v3-text-soft); }
.profile-close { min-width: 38px; min-height: 38px; border-radius: 50%; }
.login-card { border-radius: 24px; box-shadow: 0 24px 70px #24364712; }
.login-card h1 { font-size: clamp(23px, 4vw, 30px); letter-spacing: -.7px; }
.local-auth-form input, .local-auth-form select { min-height: 46px; }
.login-tabs button { min-height: 40px; }
.drawer-backdrop { display: none; }
@media (min-width: 761px) and (max-width: 1180px) {
  .app { grid-template-columns: 236px minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .chat-actions #peopleBtn { display: inline-flex; }
  .people { display: block; position: fixed; inset: 0 0 0 auto; width: min(90vw, 350px); height: 100dvh; z-index: 80; padding-top: 56px; background: var(--v3-surface-soft); transform: translateX(105%); transition: transform .2s ease; overflow: auto; }
  .people.open { transform: translateX(0); box-shadow: -10px 0 40px #0003; }
  .close-people { display: block; position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 10px; font-size: 24px; color: var(--v3-text); background: var(--v3-surface-strong); }
  .app:has(.people.open) .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 70; border: 0; background: #121b2d66; }
}
@media (max-width: 760px) {
  .app { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .side { display: flex; position: fixed; inset: 0 auto 0 0; width: min(86vw, 290px); height: 100dvh; z-index: 80; transform: translateX(-105%); background: var(--v3-surface-soft); }
  .side.open { transform: translateX(0); }
  .close-side { display: block; position: absolute; right: 10px; top: 13px; }
  .app:has(.side.open) .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 70; border: 0; background: #121b2d66; }
  .chat-actions #roomsBtn, .chat-actions #searchBtn, #mobileProfileBtn { display: inline-flex; align-items: center; justify-content: center; }
  .chat > header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 12px 9px; }
  .chat h1 { max-width: calc(100vw - 26px); font-size: 17px; }
  .chat > header > div:first-child { width: 100%; }
  .chat header p { margin-bottom: 0; }
  .chat-actions { width: 100%; justify-content: flex-start; gap: 5px; }
  .chat header .chat-actions button { min-width: 34px; min-height: 34px; padding: 6px 8px; }
  .chat-actions #peopleBtn, .chat-actions #callBtn { font-size: 0; }
  .chat-actions #peopleBtn::after { content: '👥'; font-size: 17px; }
  .chat-actions #callBtn::after { content: '▣'; font-size: 17px; }
  .messages { padding: 16px 10px; }
  .message { max-width: 97%; }
  .message .bubble { font-size: 14px; }
  .chat footer { padding: 8px 7px max(8px, env(safe-area-inset-bottom)); }
  .composer { flex-wrap: wrap; gap: 0; }
  .composer textarea { order: -1; flex: 1 0 100%; width: 100%; padding: 8px; font-size: 16px; }
  .composer #send { margin-left: auto; }
  .composer #emoji { display: block; }
  .composer-help > span:nth-child(2) { display: none; }
  .emoji-picker { right: 6px; grid-template-columns: repeat(8, 1fr); padding: 6px; }
  .emoji-picker button { width: 30px; }
  .jump-latest { bottom: 165px; }
  .login { padding: 24px 14px; }
  .login-card { padding: 26px 20px; }
  .local-auth-form input, .local-auth-form select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Annuaire global des membres connectés. */
.online-members-badge { margin-left: auto; min-width: 24px; padding: 3px 7px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--v3-success) 15%, var(--v3-surface)); color: var(--v3-text); font-size: 11px; font-weight: 800; }
.side #onlineMembersLink { font-size: 13px; gap: 6px; text-decoration: none; }
.side #onlineMembersLink:hover, .side #onlineMembersLink:focus, .side #onlineMembersLink:active { text-decoration: none; }
.online-members-shortcut { width: 100%; padding: 10px; border: 1px solid var(--v3-border); border-radius: 10px; color: var(--v3-accent); background: var(--v3-surface); text-align: left; font-size: 12px; cursor: pointer; }
.online-members-card { width: min(860px, 100%); padding: 30px; }
.online-members-eyebrow { display: block; padding-right: 30px; margin-bottom: 9px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--v3-primary); }
.online-members-card h2 { padding-right: 30px; }
.online-members-card > p { margin-bottom: 18px; }
.online-members-card .online-members-search { margin: 0 0 20px; }
.online-members-search input { width: 100%; min-width: 0; min-height: 46px; padding: 12px 14px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-surface-soft); color: var(--v3-text); font-size: 14px; }
.online-members-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.online-member-card { display: flex; flex-direction: column; min-width: 0; padding: 17px; border: 1px solid var(--v3-border); border-radius: 16px; background: var(--v3-surface-soft); }
.online-member-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.online-member-heading > div { min-width: 0; }
.online-member-heading h3 { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.online-member-heading h3 small { font-size: 11px; color: var(--v3-text-soft); font-weight: 400; }
.online-member-avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; overflow: hidden; background: var(--v3-surface-strong); color: var(--v3-accent); font-weight: 800; }
.online-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.online-member-status { font-size: 11px; color: var(--v3-success); }
.online-member-city { margin: 14px 0 5px; font-size: 12px; color: var(--v3-text-soft); overflow-wrap: anywhere; }
.online-member-bio { flex: 1; margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--v3-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.online-member-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.online-member-actions button { flex: 1; min-height: 40px; padding: 8px 10px; border: 1px solid var(--v3-border); border-radius: 10px; font-size: 12px; color: var(--v3-text); background: var(--v3-surface); }
.online-member-actions .online-member-message { background: #d7513d; border-color: #d7513d; color: white; }
.online-members-empty { grid-column: 1 / -1; padding: 28px 10px; color: var(--v3-text-soft); text-align: center; }
@media(max-width:600px) {
  .online-members-card { padding: 26px 16px 20px; max-height: 92dvh; }
  .online-members-grid { grid-template-columns: minmax(0, 1fr); }
  .online-members-search input { font-size: 16px; }
}

/* Membres en ligne regroupés selon le choix enregistré dans leur profil. */
.online-members-category { grid-column: 1 / -1; min-width: 0; }
.online-members-group-title { display: flex; align-items: center; gap: 9px; margin: 5px 0 12px; font-size: 15px; color: var(--v3-text); }
.online-members-group-title span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--v3-surface-strong); color: var(--v3-text-soft); font-size: 12px; }
.online-members-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.online-members-category + .online-members-category { margin-top: 8px; }
@media(max-width:600px) { .online-members-group-grid { grid-template-columns: minmax(0, 1fr); } }

/* Logo de navigation : conserve la présentation de la marque. */
.side button.brand { border: 0; padding: 0; background: transparent; color: var(--v3-text); text-align: left; cursor: pointer; border-radius: 12px; }
.side button.brand:hover { color: var(--v3-primary-strong); }
.side button.brand:focus-visible { outline: 3px solid var(--v3-primary); outline-offset: 4px; }

/* Mobile : navigation compacte, clavier et saisie accessibles au pouce. */
.mobile-nav-control, .composer #mobileComposerToggle { display: none; }
.mobile-actions-list { display: grid; gap: 7px; }
.mobile-actions-list > button { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 10px 12px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-surface-soft); color: var(--v3-text); text-align: left; font-size: 15px; }
.mobile-action-symbol { display: grid; place-items: center; width: 28px; font-size: 21px; color: var(--v3-accent); }
.mobile-actions-list b { margin-left: auto; padding: 3px 8px; border-radius: 12px; background: #d7513d; color: white; font-size: 12px; }
/* Le panneau du Café utilise les couleurs du thème, également sur ordinateur. */
.cafe-overview, .cafe-overview-compact, .cafe-active, .cafe-pinned { background: var(--v3-surface-soft); color: var(--v3-text); border-color: var(--v3-border); }
.cafe-active > div > span, .cafe-pinned button span { color: var(--v3-text-soft); }
.cafe-pinned button { color: var(--v3-text); background: var(--v3-surface); border-color: var(--v3-border); }
@media (max-width: 760px) {
  body.mobile-chat-active { overflow: hidden; overscroll-behavior: none; }
  .app { position: fixed; top: var(--mobile-viewport-top, 0px); right: 0; bottom: auto; left: 0; height: var(--mobile-app-height, 100dvh); min-height: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
  .chat { min-height: 0; height: 100%; overflow: hidden; }
  .chat > header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 6px; padding: 8px 10px; min-height: 64px; flex: 0 0 auto; height: auto; }
  .chat > header > .chat-heading { grid-column: 2; grid-row: 1; width: auto; min-width: 0; }
  .chat h1 { margin: 0; font-size: 16px; line-height: 1.35; max-width: 100%; text-overflow: ellipsis; }
  .chat header p { margin: 4px 0 0; font-size: 11px; line-height: 1.2; }
  .chat > header > .chat-actions { display: none; }
  .chat > header > .mobile-nav-control { display: grid; place-items: center; position: relative; width: 44px; min-width: 44px; height: 44px; padding: 8px; border: 1px solid var(--v3-border); border-radius: 13px; background: var(--v3-surface-soft); color: var(--v3-text); font-size: 24px; line-height: 1; }
  #mobileNavRooms { grid-column: 1; grid-row: 1; }
  #mobileNavMembers { grid-column: 3; grid-row: 1; }
  #mobileNavMore { grid-column: 4; grid-row: 1; }
  .mobile-nav-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 2px 4px; border-radius: 10px; border: 2px solid var(--v3-surface); background: #247653; color: #fff; font-size: 9px; font-weight: 800; }
  .mobile-unread-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-primary); }
  .messages { flex: 1 1 auto; min-height: 0; padding: 16px 12px 10px; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; }
  .message { max-width: 98%; gap: 8px; margin-bottom: 18px; }
  .message-content { min-width: 0; max-width: 100%; }
  .message .avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .message .meta { margin: 0 0 5px; font-size: 12px; }
  .message .meta strong { overflow-wrap: anywhere; }
  .message .bubble { padding: 9px 12px; border-radius: 3px 15px 15px; font-size: 15px; line-height: 1.5; }
  .message.mine .bubble { border-radius: 15px 3px 15px 15px; }
  .message-actions { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
  .message-actions button { min-height: 36px; padding: 6px 9px; font-size: 11px; }
  .message .media { max-width: 100%; width: min(100%, 340px); max-height: 40dvh; }
  .typing { height: 17px; flex-basis: 17px; padding-left: 12px; font-size: 11px; }
  .chat > footer { padding: 7px 8px max(7px, env(safe-area-inset-bottom)); flex: 0 0 auto; }
  .composer { display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)) 44px; align-items: end; gap: 2px; min-height: 54px; padding: 4px; border-radius: 18px; }
  .composer textarea { order: 0; grid-column: 2 / 6; grid-row: 1; width: 100%; min-width: 0; min-height: 44px; max-height: 104px; margin: 0; padding: 11px 5px; font-size: 16px; line-height: 22px; border-radius: 0; overflow-y: auto; }
  .composer #mobileComposerToggle { display: grid; grid-column: 1; grid-row: 1; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 12px; font-size: 26px; color: var(--v3-text-soft); }
  .composer #mobileComposerToggle[aria-expanded="true"] { background: var(--v3-surface-strong); color: var(--v3-primary); }
  .composer #send { display: grid; place-items: center; grid-column: 6; grid-row: 1; width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 13px; font-size: 22px; box-shadow: none; }
  .composer > button:not(#mobileComposerToggle):not(#send) { display: none; }
  .composer.mobile-tools-open > button:not(#mobileComposerToggle):not(#send):not(.hidden) { display: grid; place-items: center; grid-row: 2; width: 100%; height: 44px; min-width: 0; margin: 4px 0 0; padding: 5px; border-radius: 10px; font-size: 22px; background: var(--v3-surface-strong); color: var(--v3-text); }
  .composer #attach { grid-column: 1; }
  .composer #cameraBtn { grid-column: 2; }
  .composer #voiceBtn { grid-column: 3; }
  .composer #emoji { grid-column: 4; }
  .composer #viewOnceBtn { grid-column: 5; }
  .composer-help { margin-top: 5px; font-size: 10px; }
  .composer-help #messageCount { font-variant-numeric: tabular-nums; }
  .jump-latest { bottom: calc(var(--composer-footer-height, 85px) + 25px); max-width: calc(100% - 24px); font-size: 12px; }
  .emoji-picker { right: 8px; bottom: calc(100% + 5px); grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(352px, calc(100vw - 16px)); box-sizing: border-box; }
  .emoji-picker button { width: 100%; height: 40px; }
  #roomFeature { flex: 0 0 auto; max-height: 108px; overflow-y: auto; margin: 6px 10px 0; }
  .cafe-overview-compact { padding: 8px 10px; border-radius: 12px; }
  .cafe-active { gap: 8px; min-height: 32px; }
  .cafe-active > b { font-size: 12px; }
  .cafe-active > div { min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
  .cafe-active > div > span { font-size: 11px; }
  .cafe-active button, .cafe-active button img { width: 30px; height: 30px; }
  .ad-banner { margin: 6px 10px 0; padding: 0; min-height: 0; border-radius: 10px; }
  .ad-banner:has(ins[data-ad-status="unfilled"]) { display: none; }
  body.mobile-keyboard-open #roomFeature { display: none; }
  .side, .people { top: var(--mobile-viewport-top, 0px); bottom: auto; height: var(--mobile-app-height, 100dvh); max-height: var(--mobile-app-height, 100dvh); overflow-y: auto; overscroll-behavior: contain; }
  .side { width: min(88vw, 320px); padding: 20px 14px max(18px, env(safe-area-inset-bottom)); }
  .side .brand { margin-bottom: 18px; padding-right: 40px; font-size: 23px; }
  .side .brand b { width: 40px; height: 40px; }
  .side a, .side .new, .side .mobile-theme-button { min-height: 44px; }
  .side nav { margin-top: 8px; }
  .side .v2-room-group summary { padding-top: 12px; padding-bottom: 12px; }
  .side .account { flex-shrink: 0; }
  .close-side, .close-people { min-width: 44px; min-height: 44px; }
  .people { width: min(94vw, 380px); }
  .profile-modal { top: var(--mobile-viewport-top, 0px); bottom: auto; height: var(--mobile-app-height, 100dvh); align-items: end; padding: 10px 0 0; }
  .profile-modal .profile-card { width: 100%; max-width: 100%; max-height: calc(var(--mobile-app-height, 100dvh) - 10px); padding: 24px 16px max(20px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; overflow-y: auto; }
  .profile-card h2 { font-size: 21px; padding-right: 40px; }
  .profile-card > p { font-size: 13px; line-height: 1.5; }
  .profile-close { top: 10px; right: 10px; min-width: 44px; min-height: 44px; z-index: 1; color: var(--v3-text); background: var(--v3-surface-strong); }
  .profile-card input, .profile-card textarea, .profile-card select, .contact-search input { font-size: 16px; }
  .online-members-card .online-members-grid, .online-members-group-grid { grid-template-columns: minmax(0, 1fr); }
  .online-member-actions button { min-height: 44px; }
  .mobile-actions-card { max-height: min(80dvh, calc(var(--mobile-app-height, 100dvh) - 10px)) !important; }
  .mobile-actions-card > p { margin-bottom: 15px; }
  .login { min-height: 100dvh; padding: 20px 12px; }
  .login-card { width: 100%; padding: 25px 20px; }
  .login-tabs { gap: 3px; }
  .login-tabs button { min-height: 44px; padding: 8px; font-size: 12px; }
  .public-home-inner { max-width: 100%; }
}
.chat #roomFeature { background: var(--v3-surface-soft); color: var(--v3-text); border-color: var(--v3-border); }
@media (max-width: 760px) {
  .composer.mobile-tools-open > button[data-mobile-label]:not(.hidden) { height: 56px; gap: 3px; align-content: center; font-size: 20px; }
  .composer.mobile-tools-open > button[data-mobile-label]::after { content: attr(data-mobile-label); display: block; font-size: 9px; font-weight: 600; line-height: 1.1; }
  .search-modal, .notifications-modal, .contact-picker-modal, .admin-modal { top: var(--mobile-viewport-top, 0px); bottom: auto; height: var(--mobile-app-height, 100dvh); padding: 10px 0 0; align-items: end; }
  .search-panel, .notifications-panel, .contact-picker-panel, .admin-panel { width: 100%; max-width: 100%; max-height: calc(var(--mobile-app-height, 100dvh) - 10px); border-radius: 22px 22px 0 0; }
  .search-panel input, .contact-picker-panel input, .admin-panel input { font-size: 16px; }
  .search-panel header button, .notifications-panel header button, .contact-picker-panel header button { min-width: 44px; min-height: 44px; }
  .private-home-heading { flex-direction: column; align-items: stretch; padding: 16px; }
  .private-home-heading h2 { font-size: 19px; }
  .private-home-heading p { font-size: 12px; }
  .private-home-grid { grid-template-columns: minmax(0, 1fr); }
  .private-home .messages { padding: 12px; }
  .private-home-page { gap: 18px; }
}


/* 2026-09-27 — Contraste du menu mobile en mode sombre.
   .side.open avait un fond clair plus prioritaire dans style.css. */
html[data-theme="dark"] .side,
html[data-theme="dark"] .side.open {
  color: var(--v3-text);
  background: var(--v3-surface-soft);
  border-color: #53647c;
}

html[data-theme="dark"] .side a {
  color: #e4eaf2;
}

html[data-theme="dark"] .side .v2-room-group summary,
html[data-theme="dark"] .side h3 {
  color: #bdc9da;
}

html[data-theme="dark"] .side a:hover,
html[data-theme="dark"] .side a:focus-visible {
  color: #ffffff;
  background: #2c3a4e;
}

html[data-theme="dark"] .side a.active,
html[data-theme="dark"] .side a[aria-current="true"] {
  color: #ffdbd3;
  background: #42312f;
  border-color: #b78073;
}

/* La règle historique du lien adulte utilise déjà !important. */
html[data-theme="dark"] .side .adult-room-link {
  color: #ffb6a8 !important;
}

html[data-theme="dark"] .side button.brand,
html[data-theme="dark"] .side .account strong {
  color: #f4f7fb;
}

html[data-theme="dark"] .side .account {
  border-color: #53647c;
}

html[data-theme="dark"] .side .account small {
  color: #6de0aa;
}

html[data-theme="dark"] .side .account button {
  color: #e4eaf2;
}

html[data-theme="dark"] .side .new {
  color: #ffffff;
  background: #b94231;
  box-shadow: none;
}

html[data-theme="dark"] .side .new:hover {
  background: #a83929;
}

html[data-theme="dark"] .side .mobile-theme-button,
html[data-theme="dark"] .side .close-side {
  color: #f4f7fb;
  background: #29364a;
  border: 1px solid #71819a;
}

html[data-theme="dark"] .side .mobile-theme-button:hover,
html[data-theme="dark"] .side .close-side:hover,
html[data-theme="dark"] .side .account button:hover {
  color: #ffffff;
  background: #34455c;
}

html[data-theme="dark"] .side :is(button, a, summary):focus-visible {
  outline: 3px solid #ffb6a8;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .app:has(.side.open) .drawer-backdrop {
    background: rgb(3 7 14 / 68%);
  }
}


/* Confort de lecture et listes vides — septembre 2026. */
.message-day {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0 22px;
  color: var(--v3-text-soft);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  grid-column: 1 / -1;
}
.message-day::before, .message-day::after {
  content: "";
  flex: 1;
  max-width: 90px;
  height: 1px;
  background: var(--v3-border);
}
.message-day time { text-align: center; }
.messages > .message-day:first-child { margin-top: 0; }
.list-empty {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--v3-border);
  border-radius: 12px;
  color: var(--v3-text-soft);
  background: var(--v3-surface);
}
.list-empty p { margin: 0 0 12px; font-size: 12px; line-height: 1.6; }
.list-empty button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--v3-border);
  border-radius: 9px;
  color: var(--v3-text);
  background: var(--v3-surface-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.list-empty button:hover { border-color: var(--v3-accent); }
.list-empty button:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 3px; }
/* Les labels restent accessibles sans répéter le texte des champs. */
.v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .message-day { margin-bottom: 18px; }
  .list-empty button { min-height: 44px; }
}


/* Identités cliquables : même action sur le nom et sur l’avatar. */
html[data-theme] button.member-link {
  display: inline;
  border: 0;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow: none;
}
html[data-theme] button.member-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] button.member-link:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 3px; }
html[data-theme] button.member-link[hidden] { display: none !important; }
html[data-theme] button.member-avatar-link {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--v3-surface-strong);
  color: var(--v3-text);
  font-weight: 750;
}
html[data-theme] button.member-avatar-link:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--v3-accent); }
.member-avatar-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-theme] .online-member-avatar.member-avatar-link { border-radius: 15px; }
html[data-theme] .public-profile-photo-link { width: 82px; height: 82px; overflow: visible; }
.public-profile-photo-link img { border-radius: 50%; }
.search-message-summary { min-width: 0; flex: 1; display: grid; gap: 4px; }
.search-message-summary .search-message-jump {
  display: block;
  width: 100%;
  min-height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--v3-text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-message-summary .search-message-jump:hover { color: var(--v3-accent); }
.cafe-pinned-entry { display: grid; gap: 4px; padding: 6px 8px; border-left: 2px solid var(--v3-accent); }
.cafe-pinned-entry > .member-link { justify-self: start; font-weight: 700; }
.notification-author { padding: 12px 14px 0; color: var(--v3-text); font-weight: 700; }
.notification-entry { border-bottom: 1px solid var(--v3-border); }
html[data-theme] .account #meName { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
html[data-theme] .account #mePhotoLink { width: 44px; height: 44px; }
@media (max-width: 760px) {
  .message .meta .member-link { min-height: 24px; }
}

/* Component: audit-fixes.css */
.recovery-dialog { box-sizing:border-box; width:min(94vw,480px); max-height:88dvh; overflow:auto; border:1px solid #b7c2ce; border-radius:18px; padding:24px; background:#fff; color:#172234; box-shadow:0 12px 60px #0005; }
.recovery-dialog::backdrop { background:#111827b3; }
.recovery-dialog h2 { font-size:1.3rem; margin:0 0 14px; }
.recovery-dialog p,.recovery-dialog small { line-height:1.5; }
.recovery-dialog label { display:block; font-weight:600; margin:10px 0; }
.recovery-dialog input,.recovery-dialog textarea { box-sizing:border-box; width:100%; padding:12px; font:inherit; border:1px solid #8c9bad; border-radius:8px; background:#fff; color:#172234; margin-top:6px; }
.recovery-dialog textarea { font-family:monospace; overflow-wrap:anywhere; }
.recovery-dialog button { width:100%; padding:12px; margin-top:10px; border:1px solid #718198; border-radius:8px; background:#edf2f7; color:#172234; cursor:pointer; font:inherit; }
.recovery-dialog button[type=submit],#downloadRecoveryCode { background:#ad3b2b; color:#fff; border-color:#ad3b2b; }
.recovery-dialog a { color:#a93424; }
.recovery-dialog [role=alert] { color:#a82121; }
.recovery-dialog button:disabled { opacity:.6; cursor:wait; }
.recovery-dialog :focus-visible { outline:3px solid #1e68bf; outline-offset:3px; }
.media-unavailable { padding:12px; font-size:.9rem; }
[data-theme="dark"] .recovery-dialog { background:#18202c; color:#f0f3f8; } [data-theme="dark"] .recovery-dialog input,[data-theme="dark"] .recovery-dialog textarea { background:#0e1520; color:#f0f3f8; } [data-theme="dark"] .recovery-dialog a { color:#ffa997; } [data-theme="dark"] .recovery-dialog [role=alert] { color:#ffa6a6; }

/* Component: premium-benefits.css */
.premium-perks-button,.premium-search-button{display:block;width:100%;border:1px solid var(--v3-border,#dbdfe7);background:var(--v3-surface,#fff);color:var(--v3-text,#263244);padding:12px 14px;border-radius:12px;font:inherit;font-weight:650;cursor:pointer;margin:12px 0;min-height:44px}
.premium-perks-button:hover,.premium-search-button:hover{border-color:#b07b25}.premium-settings{max-width:690px}.premium-perks-summary{display:flex;flex-direction:column;gap:7px;background:#b9892520;border:1px solid #b9892560;border-radius:14px;padding:15px;margin-bottom:22px}.premium-perks-summary b{font-size:18px}.premium-perks-summary span{font-size:13px;line-height:1.5}
.premium-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.premium-fields label{min-width:0}.premium-preview{display:flex;align-items:center;justify-content:center;gap:18px;min-height:112px;background:var(--bg,#f5f7fa);border-radius:16px;padding:20px}.premium-preview strong{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:19px;overflow-wrap:anywhere}.premium-preview-avatar,.premium-result-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:50%;display:grid;place-items:center;background:#c5d8e8;color:#19324f;font-size:25px;font-weight:700}.premium-preview-avatar img,.premium-result-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.premium-discreet-box{padding:15px;border:1px solid var(--line,#d9dde5);border-radius:14px}.premium-discreet-box p{font-size:13px;line-height:1.65;margin:12px 0}.premium-discreet-box small{display:block;font-size:12px;opacity:.8}.premium-discreet-indicator{font-size:12px!important;line-height:1.5!important;font-weight:600;color:var(--v3-text,#263244)}.premium-discreet-indicator[hidden]{display:none}
.premium-member-badge{display:inline-flex;vertical-align:middle;align-items:center;font-size:9px;font-weight:750;line-height:1.4;padding:2px 5px;margin-left:5px;border-radius:6px;background:#fff0c6;color:#714500;border:1px solid #d9b665;white-space:nowrap;letter-spacing:.02em}.premium-offer{line-height:1.65}.premium-offer ul{padding-left:20px}.premium-offer li{margin:8px 0}.social-dialog .premium-offer button{background:#bd402e;border-color:#bd402e;color:white}
[data-premium-accent=coral]{color:#b43929!important}[data-premium-accent=blue]{color:#2363b0!important}[data-premium-accent=purple]{color:#7542b1!important}[data-premium-accent=green]{color:#19744c!important}
[data-premium-frame=gold]{outline:3px solid #b78525!important;outline-offset:2px}[data-premium-frame=coral]{outline:3px solid #de6850!important;outline-offset:2px}[data-premium-frame=blue]{outline:3px solid #4b8cda!important;outline-offset:2px}[data-premium-frame=purple]{outline:3px solid #a575d8!important;outline-offset:2px}
.premium-search-form{max-width:none}.premium-search-form .social-actions{gap:18px}.premium-search-form small{font-size:12px;opacity:.8}.premium-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.premium-member-card{border:1px solid var(--line,#d9dde5);border-radius:15px;padding:16px;min-width:0}.premium-result-head{display:flex;gap:13px;align-items:center}.premium-result-head>div{min-width:0}.premium-result-head strong{display:block;overflow-wrap:anywhere}.premium-result-head small{display:block;margin-top:6px;font-size:12px;line-height:1.5;opacity:.8}.premium-result-avatar{width:45px;height:45px;flex-basis:45px;font-size:18px}.premium-member-card p{font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.premium-member-card .social-actions button{flex:1;font-size:12px;min-height:44px}.premium-search [data-search-status]{line-height:1.5;font-size:13px}.premium-search [hidden]{display:none!important}
:root[data-theme=dark] [data-premium-accent=coral]{color:#ffa18c!important}:root[data-theme=dark] [data-premium-accent=blue]{color:#8bc0ff!important}:root[data-theme=dark] [data-premium-accent=purple]{color:#ceabff!important}:root[data-theme=dark] [data-premium-accent=green]{color:#7bd7a7!important}:root[data-theme=dark] .premium-member-badge{background:#41341c;color:#ffe1a0;border-color:#876832}.social-dialog .premium-search-button{background:var(--panel);color:var(--text)}
@media(max-width:700px){.premium-fields,.premium-results{grid-template-columns:1fr}.premium-preview{padding:18px 12px}.premium-preview strong{font-size:17px}.premium-settings .social-content{padding:16px}.premium-results{gap:10px}.premium-member-card{padding:14px}.premium-search-form .social-actions{gap:8px}.premium-search-form label{font-size:13px}.premium-search-form input,.premium-search-form select{font-size:16px!important}}

/* Component: social.css */
.social-toolbar{display:flex;gap:7px;padding:8px 14px;border-bottom:1px solid var(--line,#d9dde5);flex-shrink:0;overflow-x:auto;background:var(--panel,#fff)}
.social-toolbar button,.social-dialog button,.social-live button,.social-rich-button{font:inherit;cursor:pointer;border:1px solid var(--line,#d9dde5);background:var(--panel,#fff);color:var(--text,#1e2635);padding:9px 13px;border-radius:12px;min-height:40px}
.social-toolbar button{font-size:12px;white-space:nowrap;font-weight:650;flex-shrink:0}.social-toolbar span:not(:empty){background:#c8402c;color:#fff;border-radius:50%;padding:2px 6px}
.social-dialog{box-sizing:border-box;width:min(940px,calc(100% - 24px));max-height:90dvh;border:1px solid var(--line,#d9dde5);border-radius:22px;padding:0;background:var(--panel,#fff);color:var(--text,#202838);box-shadow:0 24px 90px #0005;overflow:auto}
.social-dialog::backdrop{background:#08121bcc;backdrop-filter:blur(4px)}
.social-dialog [hidden],.social-toolbar[hidden],.social-live[hidden],.social-dialog button[hidden],.social-toolbar button[hidden]{display:none!important}
.social-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line,#d9dde5);position:sticky;top:0;background:inherit;z-index:2}.social-top h2{font-size:19px;margin:0}.social-top button{font-size:22px}
.social-content{padding:20px}.social-split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;min-height:360px}.social-split>aside{border-right:1px solid var(--line,#d9dde5);padding-right:16px;max-height:65dvh;overflow:auto}
.social-list-item{display:flex!important;flex-direction:column;width:100%;gap:5px;text-align:left;margin-top:8px;overflow-wrap:anywhere}.social-list-item.active{border-color:#d8563f;background:#f4775f1c}.social-list-item small,.social-note{font-size:12px;line-height:1.5;opacity:.8}.social-empty{line-height:1.6;padding:16px 0;opacity:.8}
.social-form{display:grid;gap:14px;max-width:600px;margin:auto}.social-form h3{margin:0}.social-form label{display:grid;gap:7px;font-weight:600;font-size:14px}.social-form input:not([type=checkbox]),.social-form textarea,.social-form select,.social-group-composer textarea{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:var(--bg,#f6f7f9);border:1px solid var(--line,#cbd1dc);border-radius:10px;padding:11px}.social-form textarea{min-height:74px;resize:vertical}.social-form .social-check{display:flex;align-items:center;gap:8px;font-size:13px}.social-form small{line-height:1.5}.social-form button[type=submit],.social-group-composer button[type=submit]{background:#bd402e;color:#fff;border-color:#bd402e;font-weight:650}.social-dialog button:disabled{opacity:.5;cursor:default}.social-dialog button:focus-visible,.social-live button:focus-visible{outline:3px solid #f08a72;outline-offset:2px}
.social-group-detail{min-width:0}.social-group-heading{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.social-group-heading>div{flex:1;min-width:160px}.social-group-heading h3{margin:0 0 6px}.social-group-heading button{font-size:12px}.social-group-messages{height:38dvh;min-height:200px;overflow:auto;overscroll-behavior:contain;padding:10px;background:var(--bg,#f4f6f9);border-radius:14px}.social-bubble{padding:10px 13px;background:var(--panel,#fff);border:1px solid var(--line,#e0e3ea);border-radius:12px;max-width:92%;margin:0 auto 10px 0;overflow-wrap:anywhere}.social-bubble.mine{margin-left:auto;margin-right:0;border-color:#de8c7b}.social-bubble header{display:flex;gap:7px;align-items:center;font-size:12px}.social-bubble time{opacity:.7;font-size:11px;margin-left:auto}.social-bubble header button{padding:0 7px;min-height:26px}.social-bubble p{white-space:pre-wrap;font-size:14px;margin:8px 0}.social-bubble img,.social-bubble video{display:block;max-width:100%;max-height:260px;border-radius:8px}.social-bubble audio{max-width:100%;width:280px}.social-group-composer{display:grid;gap:8px;padding-top:12px}.social-actions{display:flex;gap:8px;flex-wrap:wrap}
.social-board{display:grid;gap:6px;width:min(100%,380px);margin:18px auto;padding:10px;border-radius:18px;background:#22344f}.social-board.connect4{grid-template-columns:repeat(7,1fr)}.social-board.tictactoe{grid-template-columns:repeat(3,1fr);max-width:280px}.social-board button{aspect-ratio:1;min-height:0;border-radius:50%;padding:0;background:#eef0f5;color:#556075;font-size:clamp(14px,3vw,24px);font-weight:800}.social-board.tictactoe button{border-radius:12px}.social-board .piece-1{background:#f08a72;color:#30120a;opacity:1}.social-board .piece-2{background:#89c5f6;color:#0e2c43;opacity:1}.social-game-status{font-weight:700;font-size:18px}.social-game-detail{text-align:center}.social-game-detail .social-form{text-align:left}
.social-recorder{max-width:460px;padding-bottom:22px}.social-recorder>p,.social-recorder>.social-actions,.social-recorder>audio{margin:18px 22px}.social-timer{display:block;text-align:center;font-size:42px;font-variant-numeric:tabular-nums;padding:10px}.social-recorder>audio{width:calc(100% - 44px)}.social-profile{max-width:660px}.social-cover-preview{min-height:100px;display:grid;place-items:center;background:linear-gradient(120deg,#f08a7240,#a5c9ef40);border-radius:14px;overflow:hidden}.social-cover-preview img,.social-profile-cover{width:100%;max-height:200px;object-fit:cover;border-radius:12px}.social-rich-profile dl>div{padding:10px 0;border-bottom:1px solid var(--line,#ddd)}.social-rich-profile dt{font-size:12px;font-weight:700;opacity:.75}.social-rich-profile dd{margin:5px 0;white-space:pre-wrap;overflow-wrap:anywhere}.social-rich-profile audio,.social-profile audio{max-width:100%}.social-rich-button{margin:12px 0;width:100%;font-size:13px!important}
.social-live{position:fixed;z-index:1700;inset:8vh 7vw auto;background:#111c2c;color:#fff;border:1px solid #52647e;border-radius:20px;box-shadow:0 24px 100px #0008;max-height:85dvh;overflow:auto;padding:16px}.social-live>header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.social-live p{font-size:12px;line-height:1.5;margin:5px 0;color:#d1dbea}.social-live button{background:#22344f;color:#fff;border-color:#4a5f7a;font-size:13px}.social-live>footer{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}.social-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.social-video{position:relative;background:#1b2b42;border-radius:12px;overflow:hidden;min-height:150px;aspect-ratio:16/10}.social-video video{width:100%;height:100%;object-fit:contain}.social-video>span{position:absolute;left:10px;bottom:30px;font-size:13px;background:#0009;padding:4px 8px;border-radius:6px;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-video>small{position:absolute;left:10px;bottom:8px;font-size:11px;color:#fff;background:#0009;padding:2px 4px}.social-video>button{position:absolute;right:8px;top:8px;font-size:11px;min-height:30px;padding:5px 8px}.social-video.focused{grid-column:1/-1;max-height:60dvh}.social-live.compact{inset:auto 14px 14px auto;width:min(440px,calc(100vw - 28px));padding:10px}.social-live.compact .social-video{min-height:65px}.social-live.compact .social-video-grid{max-height:140px;overflow:auto}.social-live.compact [data-status]{display:none}
:root[data-theme=dark] .social-dialog,body.dark .social-dialog,html.dark .social-dialog,:root[data-theme=dark] .social-toolbar,body.dark .social-toolbar{--panel:#1b2432;--bg:#121b28;--text:#edf1f8;--line:#425169}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .social-dialog{--panel:#1b2432;--bg:#121b28;--text:#edf1f8;--line:#425169}}
@media(max-width:700px){.social-toolbar{padding:6px 10px;gap:5px}.social-toolbar button{font-size:11px;padding:6px 10px;min-height:34px}.social-dialog{width:calc(100% - 12px);max-height:95dvh;border-radius:15px}.social-content{padding:12px}.social-top{padding:10px 14px}.social-split{grid-template-columns:1fr;gap:12px}.social-split>aside{border-right:0;border-bottom:1px solid var(--line,#ddd);padding:0 0 10px;max-height:170px}.social-group-messages{height:35dvh}.social-group-heading h3{font-size:17px}.social-live{inset:10px 6px auto;padding:10px;max-height:90dvh}.social-video-grid{gap:6px}.social-video{min-height:100px}.social-live>footer button{font-size:11px;padding:7px}.social-live.compact{width:290px}.social-live.compact .social-video>small{display:none}}

.social-games{position:fixed;inset:90px 16px auto auto;margin:0;width:min(660px,calc(100% - 24px));z-index:1600}.social-games .social-split{grid-template-columns:165px minmax(0,1fr)}
.social-video.camera-off video{opacity:0}.social-live button:disabled{opacity:.55;cursor:wait}
.social-board button:disabled{opacity:1}.social-invite-field{border:0;margin:0;padding:0;min-width:0}.social-invite-field legend{font-weight:600;margin-bottom:8px}.social-invite-list{max-height:190px;overflow:auto;border:1px solid var(--line,#cbd1dc);border-radius:10px;padding:6px;background:var(--bg,#f6f7f9)}.social-invite-list label{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:7px;font-weight:400;cursor:pointer}.social-invite-list label:has(input:checked){background:#f4775f26}.social-invite-list input{width:18px;height:18px;accent-color:#bd402e;flex-shrink:0}.social-invite-list span{overflow-wrap:anywhere}
@media(max-width:700px){.social-games{inset:70px 6px auto auto;max-height:80dvh;width:calc(100% - 12px)}.social-games .social-split{grid-template-columns:1fr}.social-games .social-split>aside{max-height:100px}}
.social-album-manager{max-width:760px}.social-album-intro{line-height:1.6;margin:0 0 18px}.social-album-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.social-album-tools [data-add]{background:#bd402e;border-color:#bd402e;color:#fff;font-weight:650}.social-album-status{font-size:13px;line-height:1.6;overflow-wrap:anywhere}.social-album-status:empty{display:none}.social-album-public{margin-top:22px;text-align:left}.social-album-public h3{margin:0 0 12px;font-size:16px}.social-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.social-album-card{min-width:0}.social-album-thumb{display:block;width:100%;aspect-ratio:1;padding:0!important;overflow:hidden;border:1px solid var(--line,#d9dde5);border-radius:13px!important;background:var(--bg,#eef0f4);cursor:pointer;color:inherit}.social-album-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}.social-album-thumb:hover img{transform:scale(1.025)}.social-album-thumb:focus-visible{outline:3px solid #f08a72;outline-offset:3px}.social-album-delete{width:100%;margin-top:6px;font-size:12px!important}.social-album-empty{grid-column:1/-1;line-height:1.6;opacity:.8;padding:16px 0;margin:0;font-size:14px}.social-album-viewer{max-width:1000px}.social-album-image{display:grid;place-items:center;min-height:140px;background:#101720;border-radius:12px;overflow:hidden}.social-album-image img{display:block;max-width:100%;max-height:65dvh;object-fit:contain}.social-album-image small{color:#fff;padding:20px}.social-album-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.social-album-navigation span{font-size:13px;white-space:nowrap}.social-album-button{margin-top:0}
@media(max-width:700px){.social-album-grid{gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}.social-album-image img{max-height:65dvh}.social-album-navigation button{padding:8px;font-size:12px;min-height:44px}.social-album-tools strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.social-album-thumb img{transition:none}}

/* Component: surprise.css */
#surpriseLink{ text-decoration:none; }
.surprise-dialog{box-sizing:border-box;width:min(540px,calc(100% - 24px));max-height:90dvh;padding:0;border:1px solid var(--line,#dce1e7);border-radius:22px;background:var(--panel,#fff);color:var(--text,#202838);box-shadow:0 24px 90px #0005;overflow:auto}
.surprise-dialog::backdrop{background:#101827b8;backdrop-filter:blur(3px)}
.surprise-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line,#dce1e7)}
.surprise-top h2{font-size:19px;margin:0}.surprise-content{padding:24px;text-align:center}.surprise-content h3{font-size:23px;line-height:1.3;margin:14px 0}.surprise-content p{font-size:14px;line-height:1.6}.surprise-dice{display:grid;place-items:center;width:76px;height:76px;margin:auto;border-radius:24px;background:#eef0ff;font-size:42px}.surprise-status{font-weight:650}.surprise-note{font-size:12px!important;opacity:.8;margin-top:22px}.surprise-error{color:#bb2929}.surprise-error:empty{display:none}
.surprise-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center}
.surprise-dialog button,.surprise-bar button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--line,#dce1e7);border-radius:12px;padding:9px 13px;background:var(--panel,#fff);color:var(--text,#202838)}
.surprise-dialog button.surprise-primary{background:#5146c7;color:#fff;border-color:#5146c7;font-weight:700}.surprise-dialog button:disabled,.surprise-bar button:disabled{opacity:.55;cursor:wait}
.surprise-dialog button:focus-visible,.surprise-bar button:focus-visible,#surpriseLink:focus-visible{outline:3px solid #8878ee;outline-offset:3px}
.surprise-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 14px;flex-shrink:0;border-bottom:1px solid var(--line,#dce1e7);background:var(--panel,#fff);color:var(--text,#202838)}
.surprise-bar>div:first-child{min-width:0;flex:1 1 180px}.surprise-bar strong{display:block;font-size:13px}.surprise-bar [data-status]{display:block;font-size:12px;margin-top:4px;overflow-wrap:anywhere}.surprise-bar button{font-size:12px;padding:8px 10px}.surprise-bar .surprise-actions{justify-content:flex-start}.surprise-active{font-weight:750!important;color:#5146c7!important}
.surprise-dialog [hidden],.surprise-bar[hidden],.surprise-bar [hidden]{display:none!important}
[data-theme="dark"] .surprise-dialog,[data-theme="dark"] .surprise-bar,body.dark .surprise-dialog,body.dark .surprise-bar{background:#182332;color:#eef2f7;border-color:#3b495e}
[data-theme="dark"] .surprise-dialog button,[data-theme="dark"] .surprise-bar button,body.dark .surprise-dialog button,body.dark .surprise-bar button{background:#233247;color:#eef2f7;border-color:#52627a}
[data-theme="dark"] .surprise-dialog .surprise-primary,body.dark .surprise-dialog .surprise-primary{background:#6b59dc;color:#fff;border-color:#8f80ed}
[data-theme="dark"] .surprise-error,body.dark .surprise-error{color:#ffaba9}[data-theme="dark"] .surprise-active,body.dark .surprise-active{color:#c1b5ff!important}
@media(max-width:700px){.surprise-content{padding:18px}.surprise-content h3{font-size:21px}.surprise-bar{padding:8px 10px}.surprise-bar .surprise-actions{gap:5px}.surprise-bar button{padding:8px}.surprise-dialog{max-height:88dvh}}

.surprise-dice svg{width:42px;height:42px;color:#5146c7}.surprise-bar strong svg,#surpriseLink svg{width:17px;height:17px;vertical-align:-3px;flex-shrink:0}.surprise-bar strong svg{margin-right:3px}

/* Component: city-autocomplete.css */
.city-suggestions {
  box-sizing: border-box; position: fixed; inset: auto; margin: 0; padding: 4px;
  z-index: 100000; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  border: 1px solid var(--v3-border, #d9e1eb); border-radius: 12px;
  background: var(--v3-surface, #fff); color: var(--v3-text, #172033);
  box-shadow: 0 12px 35px #08152d26; font: 14px/1.4 system-ui, sans-serif;
}
.city-suggestions[hidden] { display: none !important; }
.city-suggestions ul { list-style: none; padding: 0; margin: 0; }
.city-suggestions [role="option"] {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 46px; box-sizing: border-box; padding: 8px 11px; margin: 0;
  border-radius: 8px; cursor: pointer; overflow-wrap: anywhere;
}
.city-suggestions [role="option"] strong { font-size: 14px; font-weight: 650; color: inherit; }
.city-suggestions [role="option"] span { font-size: 12px; color: var(--v3-text-soft, #526176); }
.city-suggestions [role="option"]:hover,
.city-suggestions [aria-selected="true"] { background: var(--v3-surface-strong, #eef2f7); }
.city-suggestions [aria-selected="true"] { outline: 2px solid #dd6951; outline-offset: -2px; }
.city-suggestions-note { padding: 9px 11px; color: var(--v3-text-soft, #526176); font-size: 11px; line-height: 1.5; border-top: 1px solid var(--v3-border, #d9e1eb); }
.city-suggestions ul:empty + .city-suggestions-note { border-top: 0; font-size: 13px; }
.meeting-filters input[data-city-autocomplete] { min-width: 0; max-width: 100%; width: 200px; padding: 10px 12px; border: 1px solid var(--v3-border, #d9e1eb); border-radius: 10px; background: var(--v3-surface, #fff); color: var(--v3-text, #172033); font: inherit; }
@media (max-width: 700px) { input[data-city-autocomplete] { font-size: 16px !important; } }

/* Component: welcome.css */
/* Accueil et guide : tous les styles sont limités à ces composants. */
#login.welcome-login:not(.hidden) {
  min-height: 0 !important;
  display: block;
  padding: 0 28px 54px;
  background: radial-gradient(ellipse at 10% 32%, #ed806012, transparent 54%), var(--v3-bg);
}
.welcome-wrap, .welcome-content { width: min(1120px, 100%); margin: 0 auto; }
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 0 32px; }
.welcome-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--v3-text); font-size: 27px; font-weight: 800; letter-spacing: -1px; text-decoration: none; }
.welcome-brand > span:first-child { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; background: #c44934; color: white; font-size: 25px; }
.welcome-brand-dot { margin-left: -9px; color: #bc4833; }
.welcome-adults { padding: 7px 11px; border: 1px solid var(--v3-border); border-radius: 30px; color: var(--v3-text-soft); font-size: 12px; font-weight: 600; }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.welcome-eyebrow { color: #a54130; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.welcome-intro h1 { max-width: 570px; margin: 18px 0 18px; font-size: clamp(38px, 4.6vw, 57px); line-height: 1.08; letter-spacing: -2px; font-weight: 800; text-wrap: balance; }
.welcome-intro h1 em { color: #b84430; font-style: normal; }
#login .welcome-intro > p { max-width: 410px; color: var(--v3-text-soft); font-size: 16px; line-height: 1.7; }
.welcome-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
#login .welcome-entry-actions button { width: auto; height: auto; min-height: 46px; margin: 0; padding: 12px 18px; border-radius: 12px; font-size: 13px; }
#login .welcome-entry-actions .welcome-primary { background: #b84430; border-color: #b84430; color: white; }
#login .welcome-entry-actions .welcome-secondary { background: var(--v3-surface); border-color: var(--v3-border); color: var(--v3-text); }
#login .welcome-entry-actions button span { color: inherit; font-size: 15px; margin: 0 0 0 8px; }
#login .welcome-intro .welcome-entry-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; }
.welcome-highlights { display: grid; gap: 20px; list-style: none; padding: 0; margin: 35px 0 25px; }
.welcome-highlights li { display: flex; align-items: center; gap: 14px; }
.welcome-highlights li > span { display: grid; flex: 0 0 40px; place-items: center; height: 40px; border: 1px solid var(--v3-border); border-radius: 13px; font-size: 19px; background: var(--v3-surface); color: #a54130; }
.welcome-highlights strong { display: block; font-size: 13px; margin-bottom: 5px; }
.welcome-highlights div > span { display: block; color: var(--v3-text-soft); font-size: 12px; line-height: 1.5; }
.welcome-how-link { color: var(--v3-text); text-underline-offset: 4px; font-size: 12px; font-weight: 600; }
.welcome-how-link span { margin-left: 8px; }
#login .welcome-card { width: 100%; max-height: none; overflow: visible; padding: 29px; text-align: left; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 22px; box-shadow: 0 18px 65px #2331450a; scroll-margin-top: 16px; backdrop-filter: none; }
.welcome-card h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.6px; line-height: 1.2; }
#login .welcome-card #authDescription { margin: 0 0 20px; min-height: 38px; color: var(--v3-text-soft); font-size: 12px; line-height: 1.6; }
#login .welcome-card .login-tabs { margin: 0 0 21px; padding: 4px; gap: 2px; border-radius: 11px; }
#login .welcome-card .login-tabs button { height: auto !important; min-height: 40px; padding: 9px 6px !important; border: 0; border-radius: 8px; color: var(--v3-text-soft); background: transparent; font-size: 12px; }
#login .welcome-card .login-tabs button.active { color: var(--v3-text); background: var(--v3-surface); box-shadow: 0 2px 5px #0000000d; }
#login .welcome-card .local-auth-form { gap: 8px; }
.welcome-card label { display: block; font-size: 12px; font-weight: 650; color: var(--v3-text); margin-top: 5px; }
#login .welcome-card input, #login .welcome-card select { min-width: 0; min-height: 46px; height: 46px; border: 1px solid var(--v3-border); border-radius: 10px; background: var(--v3-surface-soft); color: var(--v3-text); font-size: 14px; }
#login .welcome-card input::placeholder { color: var(--v3-text-soft); opacity: 1; }
.welcome-password { display: flex; align-items: center; position: relative; min-width: 0; }
#login .welcome-password input { padding-right: 84px; }
#login .welcome-password button { position: absolute; right: 5px; width: 75px; height: 38px; min-height: 0; margin: 0 !important; padding: 0 5px; border-radius: 7px; background: transparent !important; color: var(--v3-accent) !important; font-size: 11px; }
#login .welcome-card .local-auth-form > button[type="submit"], #login .welcome-card #retrySessionRestore { min-height: 46px; height: auto; margin: 11px 0 0 !important; padding: 13px; border-radius: 11px; background: #b84430 !important; color: #fff !important; font-size: 13px; }
#login .welcome-card #forgotPassword { height: auto; min-height: 35px; margin: 0 !important; background: transparent !important; color: var(--v3-accent) !important; font-size: 11px; }
.welcome-form-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 12px; }
.welcome-form-row > div { min-width: 0; }
.welcome-form-row label { margin-bottom: 8px; }
#login .welcome-card .welcome-field-hint { margin: 0; color: var(--v3-text-soft); font-size: 11px; line-height: 1.6; }
.welcome-card .login-separator { margin: 16px 0 12px; font-size: 11px; color: var(--v3-text-soft); }
.welcome-card .login-separator::before, .welcome-card .login-separator::after { background: var(--v3-border); }
#login .welcome-card #googleLogin, #login .welcome-card #googleRedirect { display: flex; align-items: center; justify-content: center; min-height: 46px; height: auto; margin: 0 0 8px; padding: 11px; background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-text); border-radius: 11px; font-size: 13px; }
#login .welcome-card .welcome-terms { margin: 16px 0 0; font-size: 10px; line-height: 1.65; color: var(--v3-text-soft); text-align: center; }
.welcome-terms a { color: var(--v3-accent); text-underline-offset: 2px; }
.welcome-card .login-error { margin: 12px 0 0; border: 1px solid #db9a8f; font-size: 12px; overflow-wrap: anywhere; }
body:has(#login:not(.hidden)) .welcome-public { background: var(--v3-surface); border-top: 1px solid var(--v3-border); padding: 50px 28px 0; }
.welcome-section-heading { scroll-margin-top: 24px; }
.welcome-section-heading h2, .welcome-faq h2 { margin: 11px 0; color: var(--v3-text); font-size: 27px; line-height: 1.2; letter-spacing: -.7px; text-wrap: balance; }
.welcome-section-heading > p { margin: 0; color: var(--v3-text-soft); font-size: 14px; line-height: 1.6; }
.welcome-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 28px 0 45px; }
.welcome-steps li { padding: 23px; border: 1px solid var(--v3-border); border-radius: 16px; background: var(--v3-surface-soft); }
.welcome-step-number { display: block; color: #a54130; font-size: 12px; font-weight: 800; letter-spacing: .04em; margin-bottom: 20px; }
.welcome-steps h3 { margin: 0 0 10px; color: var(--v3-text); font-size: 16px; }
.welcome-steps p { margin: 0 0 18px; color: var(--v3-text-soft); font-size: 13px; line-height: 1.7; }
.welcome-steps button { padding: 0; min-height: 32px; border: 0; background: transparent; color: var(--v3-accent); font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; }
.welcome-step-example { color: var(--v3-text-soft); font-size: 11px; line-height: 1.6; display: block; }
.welcome-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 50px; padding: 35px 0 30px; border-top: 1px solid var(--v3-border); }
.welcome-faq h2 { font-size: 24px; }
.welcome-faq a { color: var(--v3-accent); font-size: 12px; text-underline-offset: 3px; }
.welcome-questions details { border-bottom: 1px solid var(--v3-border); }
.welcome-questions summary { padding: 18px 6px; color: var(--v3-text); font-weight: 600; font-size: 13px; line-height: 1.5; cursor: pointer; }
.welcome-questions p { margin: 0 6px 18px; color: var(--v3-text-soft); font-size: 13px; line-height: 1.75; }
.welcome-bottom-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 36px; padding: 20px 24px; background: var(--v3-surface-soft); border: 1px solid var(--v3-border); border-radius: 14px; }
.welcome-bottom-action p { color: var(--v3-text); font-size: 14px; font-weight: 600; line-height: 1.5; margin: 0; }
.welcome-bottom-action button { background: #b84430; color: white; border: 0; border-radius: 10px; padding: 13px 18px; min-height: 44px; font-size: 12px; font-weight: 700; cursor: pointer; }
.welcome-bottom-action button span { margin-left: 9px; }
.welcome-footer { display: flex; justify-content: space-between; gap: 25px; padding: 24px 0; border-top: 1px solid var(--v3-border); color: var(--v3-text-soft); font-size: 11px; line-height: 1.8; }
.welcome-footer strong { color: var(--v3-text); font-size: 15px; margin-right: 7px; }
.welcome-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.welcome-footer a { color: var(--v3-text-soft); text-decoration: none; }
.welcome-footer a:hover { text-decoration: underline; }
.side .welcome-help-link { display: flex; align-items: center; gap: 9px; min-height: 40px; flex-shrink: 0; margin: 10px 0; padding: 8px 10px; border: 0; border-radius: 10px; color: var(--v3-text-soft); background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
.welcome-help-link > span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; }
.welcome-help-link:hover { background: var(--v3-surface-strong); }
.welcome-guide { width: min(510px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 29px; border: 1px solid var(--v3-border); border-radius: 22px; color: var(--v3-text); background: var(--v3-surface); box-shadow: var(--v3-shadow); }
.welcome-guide::backdrop { background: #10182899; }
.welcome-guide > form { display: flex; justify-content: flex-end; margin: -10px -10px 2px 0; }
.welcome-guide-close { width: 36px; height: 36px; border: 0; border-radius: 10px; color: var(--v3-text); background: var(--v3-surface-strong); font-size: 24px; cursor: pointer; }
.welcome-guide h2 { font-size: 25px; margin: 12px 0; letter-spacing: -.6px; }
.welcome-guide p { color: var(--v3-text-soft); font-size: 13px; line-height: 1.7; }
.welcome-guide-actions { display: grid; gap: 10px; margin: 22px 0; }
.welcome-guide-actions button { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--v3-border); border-radius: 13px; color: var(--v3-text); background: var(--v3-surface-soft); text-align: left; cursor: pointer; }
.welcome-guide-actions button > span:first-child { font-size: 23px; color: var(--v3-accent); }
.welcome-guide-actions button > span:nth-child(2) { flex: 1; }
.welcome-guide-actions strong { display: block; font-size: 13px; line-height: 1.5; }
.welcome-guide-actions small { display: block; margin-top: 5px; color: var(--v3-text-soft); font-size: 11px; line-height: 1.6; }
.welcome-guide .welcome-guide-note { font-size: 11px; margin-bottom: 0; }
html[data-theme="dark"] .welcome-eyebrow, html[data-theme="dark"] .welcome-step-number, html[data-theme="dark"] .welcome-highlights li > span, html[data-theme="dark"] .welcome-intro h1 em, html[data-theme="dark"] .welcome-brand-dot { color: #ffac99; }
html[data-theme="dark"] .welcome-card .login-error { background: #422721; border-color: #985c4e; color: #ffd1c5; }
@media (max-width: 960px) {
  .welcome-grid { gap: 35px; }
  .welcome-intro h1 { font-size: 42px; }
  #login .welcome-card { padding: 23px; }
  .welcome-entry-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 760px) {
  #login.welcome-login:not(.hidden) { padding: 0 18px 30px; }
  .welcome-wrap { max-width: 510px; }
  .welcome-header { padding: 20px 0 27px; }
  .welcome-brand { font-size: 23px; }
  .welcome-brand > span:first-child { width: 31px; height: 31px; font-size: 22px; border-radius: 10px; }
  .welcome-adults { font-size: 10px; }
  .welcome-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .welcome-eyebrow { font-size: 9px; }
  .welcome-intro h1 { max-width: 420px; font-size: 35px; line-height: 1.1; letter-spacing: -1.1px; margin: 12px 0 12px; }
  #login .welcome-intro > p { font-size: 13px; line-height: 1.65; margin: 0; max-width: 410px; }
  .welcome-entry-actions { flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-top: 18px; }
  #login .welcome-entry-actions button { flex: 1; font-size: 11px; padding: 10px 8px; }
  #login .welcome-entry-actions button span { margin-left: 2px; }
  #login .welcome-intro .welcome-entry-note { font-size: 10px; }
  .welcome-highlights { display: none; }
  .welcome-how-link { display: inline-block; padding: 10px 0 0; font-size: 11px; }
  #login .welcome-card { padding: 23px 19px; border-radius: 19px; }
  #login .welcome-card input, #login .welcome-card select { font-size: 16px; }
  .welcome-card h2 { font-size: 21px; }
  body:has(#login:not(.hidden)) .welcome-public { padding: 30px 18px 0; }
  .welcome-section-heading h2 { font-size: 25px; }
  .welcome-section-heading > p { font-size: 12px; }
  .welcome-steps { grid-template-columns: minmax(0, 1fr); margin: 23px 0 28px; gap: 12px; }
  .welcome-steps li { padding: 20px; }
  .welcome-step-number { margin-bottom: 12px; }
  .welcome-steps p { margin-bottom: 10px; }
  .welcome-faq { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0 20px; }
  .welcome-bottom-action { flex-direction: column; align-items: stretch; padding: 20px; gap: 14px; }
  .welcome-bottom-action p { text-align: center; }
  .welcome-footer { flex-direction: column; gap: 13px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .welcome-guide { padding: 23px 20px; }
}
@media (max-width: 360px) {
  #login.welcome-login:not(.hidden) { padding-left: 12px; padding-right: 12px; }
  #login .welcome-card { padding: 22px 15px; }
  .welcome-intro h1 { font-size: 31px; }
  .welcome-form-row { gap: 8px; }
}

/* Component: admin.css */
.admin-console{--adm-bg:#f5f7fa;--adm-card:#fff;--adm-text:#203045;--adm-muted:#647287;--adm-line:#e1e6ed;--adm-accent:#275e72;--adm-soft:#eaf2f4;color:var(--adm-text);background:var(--adm-bg);border:0;padding:0;width:min(1500px,97vw);max-width:97vw;height:94dvh;max-height:94dvh;border-radius:20px;box-shadow:0 28px 100px #15283e60;margin:auto;font:14px/1.5 system-ui,sans-serif;overflow:hidden}
.admin-console::backdrop,.adm-subdialog::backdrop{background:#142337a6;backdrop-filter:blur(3px)}
.admin-console *, .adm-subdialog *{box-sizing:border-box}.adm-shell{height:100%;display:grid;grid-template-columns:235px minmax(0,1fr)}
.adm-sidebar{background:#172e3d;color:#fff;padding:32px 20px;display:flex;flex-direction:column;overflow-y:auto}.adm-brand{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:800;margin:0 8px 40px}.adm-brand>span{display:grid;place-items:center;background:#ef7962;width:42px;height:42px;border-radius:13px;color:#fff}.adm-brand small{display:block;font-size:9px;letter-spacing:2px;color:#b4c5d1;font-weight:650}.adm-sidebar nav{display:grid;gap:6px}.admin-console .adm-sidebar nav button{display:flex;align-items:center;text-align:left;border:0;background:transparent;color:#d3dfe6;padding:13px 12px;border-radius:9px;font-size:13px;gap:12px}.adm-sidebar nav button span{font-size:10px;color:#8fa5b4;font-weight:500}.admin-console .adm-sidebar nav button.selected{background:#34556a;color:white}.admin-console .adm-sidebar nav button:hover{background:#29485b}.adm-sidebar-note{font-size:12px;color:#aebfcc;margin:36px 12px 0;line-height:1.8}
.adm-main{min-width:0;overflow-y:auto;padding:30px 36px 20px}.adm-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}.adm-header h1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:5px 0 8px}.adm-header p{margin:0;color:var(--adm-muted);font-size:13px}.adm-header .adm-eyebrow,.adm-eyebrow{font-size:9px;letter-spacing:2px;font-weight:750;color:var(--adm-muted)}.adm-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-console button,.adm-subdialog button{cursor:pointer;font:inherit;font-size:12px;font-weight:650;border:1px solid var(--adm-line,#d5dce5);border-radius:8px;padding:9px 12px;background:var(--adm-card,#fff);color:var(--adm-text,#203045);line-height:1.4;white-space:normal}.admin-console button:hover,.adm-subdialog button:hover{background:var(--adm-soft,#eaf2f4)}.admin-console button:disabled,.adm-subdialog button:disabled{opacity:.48;cursor:default}.admin-console button.adm-primary,.adm-subdialog button.adm-primary{background:var(--adm-accent,#275e72);border-color:var(--adm-accent,#275e72);color:white}.admin-console button.adm-danger,.adm-subdialog button.adm-danger{color:#ad382c;border-color:#ecc8c2;background:#fff8f6}.admin-console button:focus-visible,.adm-subdialog button:focus-visible,.admin-console input:focus-visible,.admin-console select:focus-visible,.adm-subdialog input:focus-visible,.adm-subdialog textarea:focus-visible,.adm-subdialog select:focus-visible{outline:3px solid #efaa55;outline-offset:3px}
.adm-feedback:empty{display:none}.adm-feedback{color:#28704c;background:#e8f5ed;padding:10px 14px;border-radius:8px}.adm-error,.adm-sub-error{background:#fff0ed;color:#9f3027;padding:12px;border-radius:8px;overflow-wrap:anywhere}.adm-filter-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0}.adm-filter-form label,.adm-edit-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:650;color:var(--adm-muted)}.adm-search{flex:1;min-width:200px}.admin-console input,.admin-console select,.adm-subdialog input,.adm-subdialog select,.adm-subdialog textarea{font:inherit;font-size:13px;line-height:1.5;border:1px solid var(--adm-line,#d5dce5);border-radius:8px;background:var(--adm-card,#fff);color:var(--adm-text,#203045);padding:9px 10px;max-width:100%;min-width:0}.adm-filter-form .adm-checkbox{flex-direction:row;align-items:center;padding-bottom:10px}.adm-content{outline:0;min-height:240px}.adm-loading{padding:60px 20px;color:var(--adm-muted);text-align:center}
.adm-welcome{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:27px;background:var(--adm-soft);border:1px solid var(--adm-line);border-radius:14px;margin:20px 0}.adm-welcome h2{font-size:24px;letter-spacing:-.6px;margin:7px 0}.adm-welcome p{font-size:13px;max-width:520px;margin:0;color:var(--adm-muted)}.adm-welcome>button{flex-shrink:0}.adm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 24px}.adm-stats article{padding:21px;background:var(--adm-card);border:1px solid var(--adm-line);border-radius:12px}.adm-stats h3{font-size:12px;font-weight:600;color:var(--adm-muted);margin:0}.adm-stats strong{display:block;font-size:38px;font-weight:750;letter-spacing:-1px;margin:10px 0 4px}.adm-stats p{font-size:11px;color:var(--adm-muted);margin:0}.adm-system strong{font-size:21px}.adm-system .adm-ok{color:#318361}
.adm-card{background:var(--adm-card,#fff);border:1px solid var(--adm-line,#e1e6ed);border-radius:12px;padding:21px;margin-bottom:16px;overflow-wrap:anywhere}.adm-card h2{font-size:16px;margin:0 0 8px}.adm-card p{font-size:13px}.adm-card-head{display:flex;justify-content:space-between;gap:14px;align-items:start}.adm-card-head>div:last-child{text-align:right}.adm-card-head small{font-size:10px;color:var(--adm-muted);letter-spacing:.3px}.adm-card-head h2{margin-top:8px}.adm-card-head time{font-size:11px;color:var(--adm-muted)}.adm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.adm-muted{color:var(--adm-muted,#647287);font-size:12px!important}.adm-internal,.adm-explainer{background:var(--adm-soft,#eaf2f4);padding:12px 15px;border-radius:8px;font-size:12px;line-height:1.7}.adm-report-people{display:flex;flex-wrap:wrap;gap:20px;font-size:12px;align-items:center}.adm-report-people button{margin-left:4px}.adm-report blockquote,.adm-card blockquote,.adm-subdialog blockquote{margin:14px 0;padding:12px 15px;border-left:3px solid #d99076;background:var(--adm-bg,#f5f7fa);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.adm-badge{display:inline-block;vertical-align:middle;font-size:10px;font-weight:650;padding:4px 8px;background:#edf0f4;color:#5e6c7d;border-radius:6px;margin:2px 4px 2px 0;white-space:nowrap}.adm-badge.green{background:#e3f2e9;color:#256543}.adm-badge.red{background:#fce8e4;color:#a1382c}.adm-badge.gold{background:#fcf0ce;color:#76541f}.adm-badge.blue{background:#e2eef8;color:#2e5c86}.adm-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.adm-room-grid .adm-card{margin:0}.adm-room-numbers{display:flex;gap:25px;font-size:12px;color:var(--adm-muted);margin:16px 0}.adm-room-numbers b{font-size:20px;color:var(--adm-text);margin-right:4px}
.adm-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--adm-line);border-radius:12px;background:var(--adm-card)}.adm-table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}.adm-table-wrap th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--adm-muted);background:var(--adm-soft);padding:14px 16px}.adm-table-wrap td{padding:16px;border-top:1px solid var(--adm-line);vertical-align:middle;max-width:260px;overflow-wrap:anywhere}.adm-table-wrap small{display:block;color:var(--adm-muted);font-size:10px;margin-top:4px}.adm-table-wrap strong{font-size:13px}.adm-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--adm-muted);font-size:11px;padding:18px 0 5px}.adm-footer>div{display:flex;gap:8px}.adm-empty{text-align:center;padding:55px 20px;color:var(--adm-muted)}.adm-empty>span{font-size:27px;color:#5d8d7a}.adm-empty h3{font-size:16px;color:var(--adm-text);margin:12px 0}.adm-empty p{font-size:12px}.adm-timeline{list-style:none;padding:0;margin:16px 0}.adm-timeline li{padding:16px 20px;border-left:2px solid #aec4ce;margin-left:5px;background:var(--adm-card,#fff);border-bottom:1px solid var(--adm-line,#e1e6ed)}.adm-timeline li>div{display:flex;gap:10px;justify-content:space-between}.adm-timeline time,.adm-timeline small{color:var(--adm-muted,#647287);font-size:10px}.adm-timeline strong{font-size:13px}.adm-timeline p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.adm-subdialog{--adm-bg:#f5f7fa;--adm-card:#fff;--adm-text:#203045;--adm-muted:#647287;--adm-line:#e1e6ed;--adm-soft:#eaf2f4;width:min(760px,94vw);max-width:94vw;max-height:88dvh;padding:24px;border:1px solid var(--adm-line);border-radius:16px;color:var(--adm-text);background:var(--adm-card);margin:auto;overflow-y:auto;font:14px/1.5 system-ui,sans-serif}.adm-subdialog>header{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:22px}.adm-subdialog>header h2{font-size:21px;line-height:1.3;margin:0;overflow-wrap:anywhere}.adm-subdialog>header button{font-size:18px;padding:4px 11px}.adm-subdialog h3{font-size:15px}.adm-edit-form{display:grid;gap:18px}.adm-edit-form textarea{resize:vertical;width:100%}.adm-edit-form>p{font-size:13px;margin:0}.adm-details{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px 16px;font-size:12px}.adm-details dt{color:var(--adm-muted)}.adm-details dd{margin:0;overflow-wrap:anywhere}.adm-id{font-family:monospace;font-size:11px}.adm-member-status{margin-bottom:20px}
[data-theme=dark] .admin-console,[data-theme=dark] .adm-subdialog{--adm-bg:#101c29;--adm-card:#1a2a3a;--adm-text:#edf3f8;--adm-muted:#b0bfce;--adm-line:#34485c;--adm-soft:#233c4d;--adm-accent:#397990;color:var(--adm-text);background:var(--adm-bg)}[data-theme=dark] .adm-subdialog{background:var(--adm-card)}[data-theme=dark] .admin-console .adm-danger,[data-theme=dark] .adm-subdialog .adm-danger{background:#402a2d;color:#ffc1b6;border-color:#85564e}[data-theme=dark] .adm-error,[data-theme=dark] .adm-sub-error{background:#402a2d;color:#ffc1b6}[data-theme=dark] .adm-feedback{background:#203d35;color:#aff0cb}[data-theme=dark] .adm-badge{background:#314455;color:#dae5ef}[data-theme=dark] .adm-badge.red{background:#59362f;color:#ffcabe}[data-theme=dark] .adm-badge.green{background:#254b3b;color:#bcebcf}[data-theme=dark] .adm-badge.gold{background:#514626;color:#ffde91}[data-theme=dark] .adm-badge.blue{background:#294864;color:#c3dffc}
@media(max-width:1100px){.adm-shell{grid-template-columns:200px minmax(0,1fr)}.adm-main{padding:24px}.adm-sidebar{padding:26px 12px}.adm-header{flex-direction:column;gap:14px}.adm-header-actions{justify-content:start}.adm-stats{gap:10px}.adm-stats article{padding:16px}.adm-welcome{align-items:start;flex-direction:column;gap:15px}.adm-room-grid{grid-template-columns:1fr}}
@media(max-width:700px){.admin-console{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.adm-shell{display:flex;flex-direction:column}.adm-sidebar{padding:12px;flex-shrink:0;overflow:visible}.adm-brand,.adm-sidebar-note{display:none}.adm-sidebar nav{display:flex;overflow-x:auto;gap:6px;padding:2px}.admin-console .adm-sidebar nav button{white-space:nowrap;padding:10px 12px;font-size:12px}.adm-sidebar nav button span{display:none}.adm-main{padding:20px 15px;flex:1}.adm-header h1{font-size:26px}.adm-header-actions{width:100%;justify-content:space-between}.adm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-stats strong{font-size:29px}.adm-stats h3{min-height:33px}.adm-system{grid-template-columns:1fr}.adm-system h3{min-height:0}.adm-system strong{font-size:23px}.adm-card{padding:16px}.adm-welcome{padding:20px}.adm-welcome h2{font-size:21px}.adm-filter-form{gap:10px}.adm-filter-form>label{flex:1;min-width:130px}.adm-filter-form>.adm-search{flex-basis:100%}.adm-filter-form>button{flex:1}.adm-report .adm-card-head{display:block}.adm-card-head>div:last-child{text-align:left}.adm-report-people{display:grid;gap:9px}.adm-subdialog{padding:18px}.adm-details{grid-template-columns:1fr;gap:3px}.adm-details dd{margin-bottom:8px}.adm-table-wrap table{min-width:580px}.adm-footer{flex-wrap:wrap}.adm-timeline li>div{flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){.admin-console *,.adm-subdialog *{scroll-behavior:auto!important;transition:none!important}}

.adm-evidence-media{display:block;max-width:100%;max-height:65dvh;margin:0 auto;object-fit:contain}

@media(max-width:700px){
 .adm-table-wrap table{min-width:0}.adm-table-wrap thead{display:none}.adm-table-wrap tbody,.adm-table-wrap tr{display:block;width:100%}.adm-table-wrap tr{padding:12px 0;border-bottom:1px solid var(--adm-line)}.adm-table-wrap tr:last-child{border-bottom:0}.adm-table-wrap td{display:grid;grid-template-columns:102px minmax(0,1fr);align-items:center;gap:5px 12px;max-width:none;width:100%;border:0;padding:7px 14px}.adm-table-wrap td::before{content:attr(data-label);font-size:10px;color:var(--adm-muted)}.adm-table-wrap td small{grid-column:2}.adm-table-wrap td .adm-badge{width:fit-content;grid-column:2}.adm-table-wrap td .adm-badge:first-of-type{grid-row:1}
}
.room-moderation-notice{font-size:12px;padding:8px 14px;margin:0;background:#eaf2f4;color:#275e72;border-radius:8px}
[data-theme=dark] .room-moderation-notice{background:#233c4d;color:#d6eaf4}

/* Component: community.css */
.community-dialog { width:min(880px,calc(100vw - 36px)); max-height:calc(100dvh - 36px); padding:0; border:1px solid var(--v3-border,#dce1df); border-radius:24px; color:var(--v3-text,#21372c); background:var(--v3-surface,#fff); box-shadow:0 24px 90px #0004; font:inherit; overflow-y:auto; overscroll-behavior:contain; }
.community-dialog::backdrop { background:#10291ecc; backdrop-filter:blur(5px); }
.community-dialog [hidden], .community-guest[hidden], .guest-reminder[hidden] { display:none !important; }
.community-heading { position:sticky; top:0; z-index:2; background:var(--v3-surface,#fff); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px 16px; border-bottom:1px solid var(--v3-border,#dce1df); }
.community-eyebrow { color:var(--v3-text-soft,#587363); font-size:11px; font-weight:700; letter-spacing:1.8px; }
.community-heading h2 { margin:5px 0 0; font-size:29px; letter-spacing:-.6px; }
.community-dialog button { font:inherit; cursor:pointer; min-height:44px; border:1px solid var(--v3-border,#dce1df); border-radius:12px; padding:10px 16px; color:var(--v3-text,#21372c); background:var(--v3-surface-soft,#f4f7f4); font-weight:650; }
.community-dialog button:hover { border-color:var(--v3-primary,#29724e); }
.community-dialog button:focus-visible, .community-mobile-nav button:focus-visible { outline:3px solid var(--v3-primary,#29724e); outline-offset:3px; }
.community-dialog button:disabled { opacity:.55; cursor:wait; }
.community-heading > button { flex:0 0 44px; width:44px; height:44px; padding:0; font-size:26px; border-radius:50%; }
.community-body { padding:22px 28px 26px; }
.community-body p { line-height:1.55; }
.community-intro { margin:0 0 12px; color:var(--v3-text-soft,#587363); max-width:580px; }
.community-live { font-size:14px; font-weight:650; margin-bottom:20px; }
.community-live::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--v3-primary,#29724e); margin-right:8px; }
.community-quick { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.community-dialog .community-primary { color:#fff; background:#286344; border-color:#286344; }
.community-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 12px; }
.community-section-heading h3 { margin:0; font-size:18px; }
.community-section-heading button { border:0; background:transparent; font-size:12px; padding:8px; }
.community-rooms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.community-dialog .community-room { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; text-align:left; min-width:0; }
.community-room strong { font-size:16px; }
.community-room span { color:var(--v3-text-soft,#587363); font-size:12px; line-height:1.5; font-weight:400; }
.community-room small { font-size:11px; margin-top:auto; font-weight:600; }
.community-room .has-activity { color:var(--v3-primary,#29724e); }
.community-members { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.community-dialog .community-member { display:flex; align-items:center; gap:10px; padding:10px; text-align:left; font-size:12px; min-width:0; }
.community-member strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.community-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--v3-border,#dce1df); }
.community-muted { grid-column:1/-1; color:var(--v3-text-soft,#587363); font-size:13px; margin:0; }
.community-empty-tip { padding:16px; border-left:3px solid var(--v3-primary,#29724e); background:var(--v3-surface-soft,#f4f7f4); border-radius:10px; margin-top:18px; }
.community-empty-tip h3 { margin:0; font-size:16px; }
.community-empty-tip p { margin:8px 0 12px; font-size:13px; }
.community-guest { padding:18px; margin-top:24px; background:var(--v3-surface-soft,#f4f7f4); border:1px solid var(--v3-border,#dce1df); border-radius:16px; }
.community-guest h3 { margin:0 0 7px; font-size:16px; }
.community-guest p { font-size:13px; margin:6px 0 12px; }
.community-guest button { min-height:44px; border:1px solid var(--v3-border,#dce1df); background:var(--v3-surface,#fff); color:var(--v3-text,#21372c); padding:9px 14px; border-radius:10px; cursor:pointer; }
.community-footnote { margin:20px 0 0; font-size:11px; color:var(--v3-text-soft,#587363); }
.community-error { color:var(--v3-danger,#b33838); font-size:13px; }
.community-error:empty { display:none; }
.guest-upgrade { max-width:490px; }
.guest-upgrade h2 { font-size:23px; }
.guest-upgrade label { display:flex; flex-direction:column; gap:7px; margin:18px 0 7px; font-size:14px; font-weight:650; }
.guest-upgrade input { box-sizing:border-box; width:100%; min-height:46px; border:1px solid var(--v3-border,#dce1df); border-radius:10px; padding:10px 12px; color:var(--v3-text,#21372c); background:var(--v3-surface-soft,#f4f7f4); font:inherit; font-size:16px; }
.guest-upgrade small, .guest-upgrade p { font-size:13px; }
.guest-upgrade [type=submit] { width:100%; margin-top:12px; }
.guest-reminder { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 14px; font-size:11px; border-top:1px solid var(--v3-border,#dce1df); background:var(--v3-surface-soft,#f4f7f4); color:var(--v3-text,#21372c); }
.guest-reminder button { border:0; border-radius:9px; min-height:36px; padding:6px 10px; background:var(--v3-surface,#fff); color:var(--v3-text,#21372c); font:inherit; font-weight:700; cursor:pointer; }
.community-mobile-nav { display:none; }
.surprise-interests { margin:16px 0; padding:0; border:0; text-align:left; }
.surprise-interests legend { font-weight:700; font-size:14px; margin-bottom:10px; }
.surprise-interests legend small { font-weight:400; display:block; margin-top:4px; }
.surprise-interests > div { display:flex; flex-wrap:wrap; gap:7px; }
.surprise-interests button { min-height:44px; border:1px solid var(--v3-border,#dce1df); border-radius:24px; padding:8px 12px; background:var(--v3-surface-soft,#f4f7f4); color:var(--v3-text,#21372c); font:inherit; font-size:12px; cursor:pointer; }
.surprise-interests button[aria-pressed=true] { background:#286344; border-color:#286344; color:#fff; }
.surprise-interests p { font-size:12px; line-height:1.5; }
.surprise-elapsed { font-size:12px; font-variant-numeric:tabular-nums; }
.surprise-alternative { margin:14px 0; padding:14px; border-radius:14px; text-align:left; background:var(--v3-surface-soft,#f4f7f4); }
.surprise-alternative p { font-size:12px; line-height:1.5; }
.surprise-alternative button { min-height:44px; padding:9px 12px; border:1px solid var(--v3-border,#dce1df); border-radius:10px; background:var(--v3-surface,#fff); color:var(--v3-text,#21372c); font:inherit; font-size:13px; cursor:pointer; }
.surprise-dialog { max-height:calc(var(--mobile-app-height,100dvh) - 24px); overflow-y:auto; }
@media (max-width:760px) {
  .community-mobile-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:0 0 auto; gap:3px; padding:5px 8px max(5px,env(safe-area-inset-bottom)); background:var(--v3-surface,#fff); border-top:1px solid var(--v3-border,#dce1df); z-index:6; }
  .community-mobile-nav button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; min-width:0; border:0; border-radius:10px; background:transparent; color:var(--v3-text-soft,#587363); font:inherit; font-size:11px; cursor:pointer; }
  .community-mobile-nav button[aria-current] { background:var(--v3-surface-soft,#f4f7f4); color:var(--v3-text,#21372c); font-weight:750; }
  .community-mobile-nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .community-unread { position:absolute; top:1px; right:18%; border-radius:10px; min-width:17px; padding:2px 4px; font-size:10px; background:#b33838; color:#fff; }
  .community-mobile-nav [hidden] { display:none; }
  .chat > footer { padding-bottom:7px; }
  body.mobile-keyboard-open .community-mobile-nav, body.mobile-keyboard-open .guest-reminder { display:none; }
  body.mobile-keyboard-open .chat > footer { padding-bottom:max(7px,env(safe-area-inset-bottom)); }
  .jump-latest { bottom:calc(var(--composer-footer-height,85px) + 85px + env(safe-area-inset-bottom)); }
  body.mobile-keyboard-open .jump-latest { bottom:calc(var(--composer-footer-height,85px) + 25px); }
  .community-dialog { position:fixed; top:calc(var(--mobile-viewport-top,0px) + 8px); bottom:auto; margin:0 auto; width:calc(100vw - 16px); max-height:calc(var(--mobile-app-height,100dvh) - 16px); border-radius:20px; }
  .message-toast { bottom:calc(var(--composer-footer-height,85px) + 72px + env(safe-area-inset-bottom)); }
  body.mobile-keyboard-open .message-toast { bottom:calc(var(--composer-footer-height,85px) + 12px); }
  .community-heading { padding:20px 18px 14px; }
  .community-heading h2 { font-size:24px; }
  .community-body { padding:18px; }
  .community-rooms { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .community-dialog .community-room { padding:12px; }
  .community-room strong { font-size:14px; }
  .community-section-heading h3 { font-size:16px; }
  .community-members { grid-template-columns:minmax(0,1fr); }
  .community-quick { flex-direction:column; }
  .guest-reminder { padding:4px 10px; }
  .guest-reminder button { min-height:44px; }
}

/* Component: v3-experience.css */
/* Shared V3 tokens and layouts. Loaded after the preserved component styles. */
:root {
  --v3-bg:#f2f5f3; --v3-surface:#fff; --v3-surface-soft:#f6f8f6; --v3-surface-strong:#e8efea;
  --v3-text:#183126; --v3-text-soft:#52685c; --v3-border:#d6e2d9;
  --v3-primary:#286344; --v3-primary-strong:#1e4f35; --v3-accent:#286344;
  --v3-radius:16px; --v3-danger:#a62f3b;
}
html[data-theme=dark] {
  --v3-bg:#101b17; --v3-surface:#182720; --v3-surface-soft:#203229; --v3-surface-strong:#2a4235;
  --v3-text:#eef6f1; --v3-text-soft:#b5c8bc; --v3-border:#3e5748;
  --v3-primary:#96d6ad; --v3-primary-strong:#b1e8c4; --v3-accent:#96d6ad; --v3-danger:#ff9eaa;
}
body { background:var(--v3-bg); color:var(--v3-text); }
.chat, .chat > header, .sidebar, .people { background:var(--v3-surface); color:var(--v3-text); }
.chat > header { border-bottom:1px solid var(--v3-border); }
.chat-heading h1, .chat-heading h2 { letter-spacing:-.035em; }
.message .bubble { line-height:1.6; overflow-wrap:anywhere; }
.message-edited { color:var(--v3-text-soft); font-size:11px; }
.v3-tools { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:6px; padding:7px 18px; background:var(--v3-surface); border-bottom:1px solid var(--v3-border); }
.v3-tools button { min-height:36px; padding:6px 11px; border:1px solid var(--v3-border); border-radius:9px; background:var(--v3-surface-soft); color:var(--v3-text); font:inherit; font-size:12px; cursor:pointer; }
.v3-tools button:hover { background:var(--v3-surface-strong); }
.v3-dialog { box-sizing:border-box; width:min(690px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--v3-border); border-radius:20px; background:var(--v3-surface); color:var(--v3-text); font:inherit; box-shadow:0 24px 100px #061b2260; overflow:auto; overscroll-behavior:contain; }
.v3-dialog * { box-sizing:border-box; }
.v3-dialog::backdrop { background:#081c16b8; backdrop-filter:blur(5px); }
.v3-dialog > header { display:flex; position:sticky; top:0; z-index:2; align-items:center; justify-content:space-between; gap:14px; padding:22px 26px; background:var(--v3-surface); border-bottom:1px solid var(--v3-border); }
.v3-dialog > header h2 { font-size:24px; line-height:1.2; margin:6px 0 0; letter-spacing:-.03em; overflow-wrap:anywhere; }
.v3-eyebrow { color:var(--v3-text-soft); font-size:10px; font-weight:750; letter-spacing:2px; }
.v3-dialog-body { padding:24px 26px; }
.v3-dialog p { line-height:1.6; overflow-wrap:anywhere; }
.v3-dialog button { min-height:44px; padding:10px 14px; border:1px solid var(--v3-border); border-radius:10px; background:var(--v3-surface-soft); color:var(--v3-text); font:inherit; font-weight:600; font-size:13px; cursor:pointer; }
.v3-dialog button:hover { border-color:var(--v3-primary); }
.v3-dialog button:disabled { opacity:.5; cursor:default; }
.v3-dialog [data-close] { flex:0 0 44px; width:44px; padding:0; font-size:24px; border-radius:50%; }
.v3-dialog .v3-primary { color:#fff; border-color:#286344; background:#286344; }
.v3-dialog label { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:650; margin:0 0 18px; }
.v3-dialog input:not([type=checkbox]), .v3-dialog select, .v3-dialog textarea { width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:16px; font-weight:400; color:var(--v3-text); background:var(--v3-surface-soft); border:1px solid var(--v3-border); border-radius:10px; }
.v3-dialog textarea { resize:vertical; max-height:320px; }
.v3-dialog .v3-check { flex-direction:row; align-items:center; line-height:1.5; font-weight:500; }
.v3-check input { accent-color:#286344; width:20px; height:20px; flex:0 0 20px; }
.v3-dialog .v3-muted, .v3-dialog small { font-size:12px; color:var(--v3-text-soft); line-height:1.5; }
.v3-dialog .v3-feedback, .space-error { font-size:13px; color:var(--v3-danger); }
.v3-feedback:empty, .space-error:empty { display:none; }
.v3-dialog [hidden], .surprise-bar [hidden], .surprise-dialog [hidden] { display:none !important; }
.v3-search-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.v3-search-form label { margin:0; }
.v3-results article { border-top:1px solid var(--v3-border); padding:16px 0; }
.v3-results article > div, .space-message > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.v3-results p, .space-message p { white-space:pre-wrap; margin:8px 0; }
.v3-results time, .space-message time { color:var(--v3-text-soft); font-size:11px; }
.v3-spaces { width:min(950px,calc(100vw - 32px)); }
.space-intro { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.space-intro p { flex:1; margin:0; color:var(--v3-text-soft); }
.space-filters { display:grid; grid-template-columns:2fr 1fr auto auto; gap:12px; align-items:end; padding:18px; border:1px solid var(--v3-border); border-radius:14px; margin-bottom:22px; }
.space-filters label { margin:0; }
.space-filters .v3-check { align-self:center; }
.space-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.v3-dialog .space-card { display:flex; flex-direction:column; gap:10px; align-items:flex-start; text-align:left; padding:22px; background:var(--v3-surface); }
.space-card h3 { margin:0; font-size:21px; letter-spacing:-.025em; }
.space-card p { margin:0 0 8px; font-size:13px; font-weight:400; color:var(--v3-text-soft); }
.space-card > span:last-child { margin-top:auto; font-size:11px; font-weight:600; }
.space-theme { display:inline-flex; padding:5px 9px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; border-radius:6px; background:var(--v3-surface-strong); color:var(--v3-text); }
.space-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px; font-size:12px; }
.v3-empty { padding:22px; grid-column:1/-1; border-radius:14px; background:var(--v3-surface-soft); color:var(--v3-text-soft); }
.v3-empty h3 { color:var(--v3-text); margin-top:0; }
.space-actions, .space-message-pages { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.space-summary { padding:0 0 20px; }
.space-rules { background:var(--v3-surface-soft); padding:14px 18px; border-radius:12px; border:1px solid var(--v3-border); margin-bottom:20px; }
.space-rules summary { cursor:pointer; font-size:13px; font-weight:650; min-height:24px; }
.space-rules p { white-space:pre-wrap; font-size:13px; margin:12px 0 0; }
.space-notice { padding:14px; border-left:3px solid var(--v3-primary); background:var(--v3-surface-soft); }
.space-messages { max-height:42dvh; min-height:30px; overflow-y:auto; overscroll-behavior:contain; }
.space-message { padding:15px 18px; margin-bottom:10px; background:var(--v3-surface-soft); border:1px solid var(--v3-border); border-radius:12px; }
.space-message.mine { border-left:3px solid var(--v3-primary); }
.space-message p { font-size:14px; }
.space-message strong { font-size:13px; }
.space-message-actions { display:flex; justify-content:flex-end; gap:6px; }
.space-message-actions button { font-size:11px; min-height:32px; padding:4px 8px; background:transparent; }
.space-composer { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:18px; align-items:end; }
.space-composer label { margin:0; }
.space-composer small { grid-column:1/-1; }
.space-member { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 0; border-bottom:1px solid var(--v3-border); }
.space-member strong { flex:1; min-width:120px; }
.space-member span { font-size:12px; color:var(--v3-text-soft); }
.surprise-mode { margin:16px 0; text-align:left; border:1px solid var(--v3-border); border-radius:12px; padding:14px; }
.surprise-mode legend { font-size:14px; font-weight:650; }
.surprise-mode label { display:inline-flex; align-items:center; gap:7px; margin:6px 16px 6px 0; font-size:14px; min-height:36px; }
.surprise-mode p { font-size:12px; line-height:1.6; }
.surprise-mode input { accent-color:#286344; }
.surprise-bar { flex-wrap:wrap; }
.surprise-bar .surprise-actions { flex-wrap:wrap; }
.message-actions button { min-height:32px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media(max-width:760px) {
  .v3-dialog { width:calc(100vw - 16px); max-height:calc(var(--mobile-app-height,100dvh) - 16px); border-radius:16px; margin:8px auto; }
  .v3-dialog > header { padding:16px; }
  .v3-dialog > header h2 { font-size:21px; }
  .v3-dialog-body { padding:18px 16px; }
  .v3-tools { padding:5px 8px; flex-wrap:nowrap; overflow-x:auto; }
  .v3-tools button { flex:0 0 auto; min-height:40px; font-size:11px; }
  body.mobile-keyboard-open .v3-tools, body.mobile-keyboard-open .social-toolbar { display:none; }
  .space-intro { align-items:stretch; flex-direction:column; gap:14px; }
  .space-filters { grid-template-columns:1fr 1fr; padding:12px; gap:12px; }
  .space-filters label:first-child { grid-column:1/-1; }
  .space-filters .v3-check { font-size:12px; }
  .space-filters button { grid-column:1/-1; }
  .space-grid { grid-template-columns:1fr; }
  .v3-dialog .space-card { padding:18px; }
  .space-composer, .v3-search-form { grid-template-columns:1fr; }
  .space-message-actions button { min-height:44px; }
  .space-messages { max-height:40dvh; }
  .surprise-bar .surprise-actions { gap:4px; }
  .surprise-bar button { min-height:40px; }
}

/* Component: refonte.css */
/* Interface validée le 5 octobre 2026. Les tokens sont partagés avec les fenêtres existantes. */
html.letchat-refonte {
  --v3-bg:#f6f3ef; --v3-surface:#fffdfb; --v3-surface-soft:#f6f3ef; --v3-surface-strong:#eeebe6;
  --v3-text:#272b32; --v3-text-soft:#666a72; --v3-border:#e8e4df;
  --v3-primary:#ad422e; --v3-primary-strong:#923523; --v3-accent:#ad422e;
  --lc-active:#fbe9e2; --lc-own:#f5dacf; --lc-green:#347350; --lc-on-accent:#fffdfb;
  --coral:var(--v3-primary); --ink:var(--v3-text); --muted:var(--v3-text-soft); --line:var(--v3-border);
  color-scheme:light;
}
html.letchat-refonte[data-theme=dark] {
  --v3-bg:#14161a; --v3-surface:#191b20; --v3-surface-soft:#14161a; --v3-surface-strong:#24272e;
  --v3-text:#f2f0ee; --v3-text-soft:#a8aab2; --v3-border:#32353e;
  --v3-primary:#f39b83; --v3-primary-strong:#ffb29d; --v3-accent:#f39b83;
  --lc-active:#382621; --lc-own:#493127; --lc-green:#83bd99; --lc-on-accent:#191b20;
  color-scheme:dark;
}
html.letchat-refonte body {font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--v3-text);background:var(--v3-bg)}
.letchat-refonte .app {width:100%;max-width:1800px;height:100dvh;grid-template-columns:248px minmax(0,1fr);box-shadow:none;border:0;border-radius:0;background:var(--v3-surface)}
.letchat-refonte .refonte-icon {display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.letchat-refonte .side {padding:28px 16px 16px;background:var(--v3-surface-soft);color:var(--v3-text);border-color:var(--v3-border);gap:0;min-height:0;overflow:hidden;overscroll-behavior:contain}
.letchat-refonte .side .brand {flex-shrink:0;margin:0 10px 28px;padding:0;font-size:27px;letter-spacing:-1px;color:var(--v3-text);gap:10px}
.letchat-refonte .brand b {width:37px;height:37px;border-radius:12px;background:var(--v3-primary);color:var(--lc-on-accent);box-shadow:none;font-weight:500}
.letchat-refonte .brand b .refonte-icon {width:23px;height:23px}
.letchat-refonte .side nav {margin:2px 0;gap:0;flex-shrink:0}
.letchat-refonte .side a,.letchat-refonte .refonte-home {width:100%;display:flex;align-items:center;gap:10px;min-height:42px;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--v3-text-soft);font:inherit;font-size:13px;text-align:left;text-decoration:none;box-shadow:none;cursor:pointer}
.letchat-refonte .side a:hover,.letchat-refonte .refonte-home:hover {background:var(--v3-surface-strong);color:var(--v3-text);text-decoration:none}
.letchat-refonte .side a.active,.letchat-refonte .side a[aria-current=true] {background:var(--lc-active);color:var(--v3-accent);border-color:transparent;box-shadow:none}
.letchat-refonte .refonte-home[aria-current=true] {background:var(--v3-surface-strong);color:var(--v3-text);font-weight:650}
.letchat-refonte .side #onlineMembersLink,.letchat-refonte .side #surpriseLink {font-size:13px;gap:10px}
.letchat-refonte .side #surpriseLink::after {display:none}
.letchat-refonte .v2-room-directory {flex:1 1 auto;margin-top:22px;overflow-y:auto;min-height:0;scrollbar-width:thin}
.letchat-refonte .v2-room-group {margin:0 0 10px;border:0}
.letchat-refonte .v2-room-group summary {padding:10px;font-size:10px;letter-spacing:1.1px;line-height:1.5;font-weight:650;color:var(--v3-text-soft);text-transform:uppercase}
.letchat-refonte .v2-room-row a {min-height:38px;margin:1px 0;padding:8px 10px;font-size:13px}
.letchat-refonte .v2-room-icon {width:20px;min-width:20px;height:20px;display:grid;place-items:center;color:inherit;font-size:11px}
.letchat-refonte .v2-room-icon .refonte-icon {width:17px;height:17px}
html.letchat-refonte .side .adult-room-link {color:var(--v3-accent)!important}
.letchat-refonte .premium-shortcut {order:8;display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:40px;margin:12px 0 0;padding:9px 10px;border:0;background:transparent;color:var(--v3-accent);box-shadow:none;font-size:12px;font-weight:500;border-radius:9px}
.letchat-refonte .welcome-help-link {order:9;min-height:36px;padding:8px 10px;margin:0;color:var(--v3-text-soft);font-size:12px}
.letchat-refonte .side .account {order:10;flex-shrink:0;margin-top:12px;padding:16px 2px 0;border-color:var(--v3-border);gap:9px}
.letchat-refonte .account small {color:var(--lc-green);font-size:11px}
html.letchat-refonte .account #mePhotoLink {width:36px;height:36px;border-radius:12px}
html.letchat-refonte .account #meName {font-size:13px;color:var(--v3-text)}
.letchat-refonte .account>button:not(.member-link) {width:32px;height:36px;padding:6px;color:var(--v3-text-soft);border:0;background:transparent;border-radius:8px}
.letchat-refonte .chat {background:var(--v3-surface);position:relative}
.letchat-refonte .chat>header {height:auto;min-height:108px;flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px;padding:22px 32px;border-color:var(--v3-border);background:var(--v3-surface)}
.letchat-refonte .chat-heading {flex:1;min-width:0;width:auto}
.letchat-refonte .refonte-eyebrow {display:block;margin:0 0 4px;font-size:10px;letter-spacing:1.7px;font-weight:650;color:var(--v3-text-soft)}
.letchat-refonte .chat-heading h1 {font-size:27px;line-height:1.4;letter-spacing:-.8px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.letchat-refonte .chat-heading h1::after {content:".";color:var(--v3-accent)}
.letchat-refonte .chat-heading p {margin:5px 0 0;color:var(--v3-text-soft);font-size:12px;line-height:1.5;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.letchat-refonte .chat-heading p>span:first-child {width:6px;height:6px;flex-shrink:0;background:var(--lc-green)}
.letchat-refonte .chat-heading #roomPresence,.letchat-refonte .chat-heading #privateTypingStatus {width:auto;height:auto;border-radius:0;background:transparent;max-width:100%;overflow-wrap:anywhere}
.letchat-refonte .chat>header>.mobile-nav-control {position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:40px;width:auto;min-height:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--v3-text-soft);padding:9px;font-size:12px}
.letchat-refonte .chat>header>#mobileNavRooms {display:none}
.letchat-refonte .chat>header>#mobileNavMembers {padding:9px 12px}
.letchat-refonte .mobile-nav-badge {position:static;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:1px 5px;background:var(--v3-surface-strong);color:var(--v3-text-soft);border:0;border-radius:6px;font-size:11px}
.letchat-refonte .chat header button:hover {background:var(--v3-surface-strong)}
.letchat-refonte.refonte-ready .community-mobile-nav,.letchat-refonte.refonte-ready .account #logout,.letchat-refonte.refonte-ready .chat-actions,.letchat-refonte.refonte-ready .social-toolbar,.letchat-refonte.refonte-ready .v3-tools,.letchat-refonte.refonte-ready .side>.new,.letchat-refonte.refonte-ready #mobileThemeBtn {display:none}
.letchat-refonte .messages {padding:28px 36px 18px;background:var(--v3-surface);flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--v3-border) transparent}
.letchat-refonte .message {gap:12px;max-width:min(86%,780px);margin-bottom:24px;align-items:flex-start}
.letchat-refonte .message .avatar {width:35px;height:35px;flex:0 0 35px;border-radius:12px;background:var(--v3-surface-strong)}
.letchat-refonte .message .message-content {min-width:0;max-width:100%;flex:0 1 auto}
.letchat-refonte .message .meta {display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.5;margin:0 0 4px;min-height:26px;flex-wrap:wrap}
.letchat-refonte .meta time {font-size:11px;color:var(--v3-text-soft)}
.letchat-refonte .message .bubble {margin:0;padding:11px 15px;border:0;border-radius:3px 15px 15px;background:var(--v3-surface-strong);color:var(--v3-text);box-shadow:none;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.letchat-refonte .message.mine {margin-left:auto;flex-direction:row;justify-content:flex-end}
.letchat-refonte .message.mine>.avatar {display:none}
.letchat-refonte .message.mine .meta {justify-content:flex-end}
.letchat-refonte .message.mine .bubble {background:var(--lc-own);color:var(--v3-text);border-radius:15px 3px 15px 15px}
.letchat-refonte .refonte-message-toggle {display:grid;place-items:center;min-width:30px;min-height:28px;padding:4px;border:0;border-radius:7px;background:transparent;color:var(--v3-text-soft);cursor:pointer}
.letchat-refonte .refonte-message-toggle:hover {background:var(--v3-surface-strong)}
.letchat-refonte .message.refonte-message:not(.refonte-actions-open) .message-actions {display:none}
.letchat-refonte .message .message-actions {gap:5px;margin-top:8px;padding:6px;background:var(--v3-surface-soft);border:1px solid var(--v3-border);border-radius:10px;flex-wrap:wrap}
.letchat-refonte .message-actions button {background:var(--v3-surface);color:var(--v3-text);border:0;border-radius:7px;min-height:36px;padding:8px 10px;font-size:12px}
.letchat-refonte .message .media {max-width:100%;border-radius:14px}
.letchat-refonte .message-day {font-weight:400;font-size:11px;margin-bottom:25px}
.letchat-refonte .message-day::before,.letchat-refonte .message-day::after {max-width:48px}
.letchat-refonte .chat #roomFeature {margin:14px 32px 0;padding:12px;border-radius:12px;background:var(--v3-surface-soft);border-color:var(--v3-border);color:var(--v3-text)}
.letchat-refonte #roomFeature:has(.cafe-overview):not(:has(.cafe-pinned)) {display:none}
.letchat-refonte .cafe-overview .cafe-active {display:none}
.letchat-refonte .cafe-overview {padding:0;border:0;background:transparent}
.letchat-refonte .typing {padding:0 36px;font-size:12px;color:var(--v3-text-soft)}
.letchat-refonte .chat>footer {padding:8px 32px 20px;border:0;background:var(--v3-surface);flex-shrink:0;z-index:5}
.letchat-refonte .composer {display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:end;gap:8px;min-height:60px;padding:9px;border:1px solid var(--v3-border);border-radius:15px;background:var(--v3-surface);box-shadow:0 3px 12px #00000004}
.letchat-refonte .composer:focus-within {border-color:var(--v3-accent)}
.letchat-refonte .composer textarea {grid-row:1;grid-column:2;width:100%;min-height:40px;max-height:132px;padding:9px 2px;background:transparent;color:var(--v3-text);font-size:14px;line-height:22px;resize:none}
.letchat-refonte .composer #mobileComposerToggle {display:grid;grid-column:1;grid-row:1;place-items:center;width:40px;height:40px;padding:9px;background:transparent;color:var(--v3-text-soft);border:0;border-radius:9px}
.letchat-refonte .composer #send {display:grid;grid-column:3;grid-row:1;place-items:center;width:40px;height:40px;min-width:40px;padding:9px;border:0;border-radius:11px;background:var(--v3-primary);color:var(--lc-on-accent);box-shadow:none}
.letchat-refonte .composer>button:not(#mobileComposerToggle):not(#send) {display:none}
.letchat-refonte .composer.mobile-tools-open {grid-template-columns:40px repeat(3,minmax(0,1fr)) 40px}
.letchat-refonte .composer.mobile-tools-open textarea {grid-column:2/5}
.letchat-refonte .composer.mobile-tools-open #send {grid-column:5}
.letchat-refonte .composer.mobile-tools-open>button:not(#mobileComposerToggle):not(#send):not(.hidden) {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;grid-row:2;width:100%;height:55px;min-width:0;padding:6px;border-radius:9px;background:var(--v3-surface-strong);color:var(--v3-text);margin:3px 0 0}
.letchat-refonte .composer.mobile-tools-open>button[data-mobile-label]::after {content:attr(data-mobile-label);font-size:11px;line-height:1.2}
.letchat-refonte .composer #attach {grid-column:1}.letchat-refonte .composer #cameraBtn {grid-column:2}.letchat-refonte .composer #voiceBtn {grid-column:3}.letchat-refonte .composer #emoji {grid-column:4}.letchat-refonte .composer #viewOnceBtn {grid-column:5}
.letchat-refonte .composer-help {padding:3px 2px 0;font-size:11px;color:var(--v3-text-soft)}
.letchat-refonte #composerKeyboardHint {font-size:11px}
.letchat-refonte .people {display:block;position:fixed;inset:0 0 0 auto;width:min(92vw,360px);height:100dvh;max-height:100dvh;z-index:80;padding:58px 22px 24px;border-left:1px solid var(--v3-border);background:var(--v3-surface);color:var(--v3-text);transform:translateX(105%);visibility:hidden;overflow-y:auto;transition:transform .18s ease,visibility .18s}
.letchat-refonte .people.open {transform:translateX(0);visibility:visible;box-shadow:-10px 0 40px #0002}
.letchat-refonte .close-people {display:grid;place-items:center;position:absolute;top:12px;right:16px;min-width:38px;min-height:38px;border:0;border-radius:10px;background:var(--v3-surface-strong);color:var(--v3-text);font-size:24px}
.letchat-refonte .app:has(.people.open) .drawer-backdrop {display:block;position:fixed;inset:0;z-index:70;border:0;background:#10121866}
.letchat-refonte .private-home-heading {background:transparent;border:0;padding:0 0 24px;border-radius:0}
.letchat-refonte .private-home-heading>div>span {display:none}
.letchat-refonte .private-home-heading h2 {font-size:24px;letter-spacing:-.7px}
.letchat-refonte .private-home-grid {grid-template-columns:minmax(0,1fr);gap:0}
.letchat-refonte .private-home-grid>button {border:0;border-bottom:1px solid var(--v3-border);border-radius:0;padding:18px 8px;background:transparent;box-shadow:none}
.letchat-refonte .private-home-grid>button:hover {background:var(--v3-surface-soft)}
.letchat-refonte .refonte-bottom-nav {display:none}
.letchat-refonte .profile-card,.letchat-refonte .contact-picker-panel,.letchat-refonte .notifications-panel,.letchat-refonte .search-panel {background:var(--v3-surface);color:var(--v3-text);border-color:var(--v3-border)}
.letchat-refonte .mobile-actions-list>button {border:0;border-radius:9px;min-height:44px;background:var(--v3-surface-soft);color:var(--v3-text);font-weight:500}
.letchat-refonte .mobile-action-symbol {color:var(--v3-text-soft)}
.letchat-refonte .v3-dialog .v3-primary {background:var(--v3-primary);border-color:var(--v3-primary);color:var(--lc-on-accent)}
.letchat-refonte .empty {color:var(--v3-text-soft)}
.letchat-refonte .empty h2 {color:var(--v3-text);font-weight:600;letter-spacing:-.5px}
.letchat-refonte .empty>b {background:var(--lc-active);color:var(--v3-accent)}
.letchat-refonte :is(button,a,summary):focus-visible {outline:3px solid var(--v3-accent);outline-offset:3px}
@media(min-width:1400px){.letchat-refonte .messages {padding-inline:clamp(36px,6vw,110px)}.letchat-refonte .chat>footer {padding-inline:clamp(32px,6vw,110px)}}
@media(max-width:1100px) and (min-width:761px){.letchat-refonte .app {grid-template-columns:218px minmax(0,1fr)}.letchat-refonte .side {padding-inline:12px}.letchat-refonte .chat>header {padding-inline:24px}.letchat-refonte .messages,.letchat-refonte .chat>footer {padding-inline:24px}}
@media(max-width:760px){
 .letchat-refonte .app {grid-template-columns:minmax(0,1fr);height:var(--mobile-app-height,100dvh)}
 .letchat-refonte .side {width:min(88vw,320px);padding:22px 16px max(18px,env(safe-area-inset-bottom));background:var(--v3-surface-soft)}
 .letchat-refonte .side.open {background:var(--v3-surface-soft);color:var(--v3-text)}
 .letchat-refonte .chat>header {min-height:75px;padding:10px 12px;gap:8px;display:flex}
 .letchat-refonte .chat>header>#mobileNavRooms {display:grid;min-width:40px}
 .letchat-refonte .chat>header>#mobileNavMembers {display:none}
 .letchat-refonte .chat>header>#mobileNavMore {min-width:40px}
 .letchat-refonte .chat-heading {order:0}
 .letchat-refonte #mobileNavRooms {order:-1}
 .letchat-refonte .chat-heading h1 {font-size:21px;line-height:1.3}
 .letchat-refonte .chat-heading p {font-size:11px;margin-top:4px}
 .letchat-refonte .refonte-eyebrow {display:none}
 .letchat-refonte .messages {padding:20px 14px 8px}
 .letchat-refonte .message {max-width:96%;gap:8px;margin-bottom:20px}
 .letchat-refonte .message .avatar {width:29px;height:29px;flex-basis:29px;border-radius:10px}
 .letchat-refonte .message .meta {gap:7px;font-size:12px}
 .letchat-refonte .message .bubble {font-size:14px;padding:10px 12px}
 .letchat-refonte .message .message-content {max-width:calc(100% - 37px)}
 .letchat-refonte .message.mine .message-content {max-width:100%}
 .letchat-refonte .refonte-message-toggle {min-width:36px;min-height:32px}
 .letchat-refonte .message-actions button {min-height:44px}
 .letchat-refonte .typing {padding-inline:14px}
 .letchat-refonte .chat>footer {padding:7px 10px 9px}
 .letchat-refonte .composer {padding:7px;gap:5px;min-height:58px}
 .letchat-refonte .composer textarea {font-size:16px}
 .letchat-refonte .composer-help {font-size:10px;margin-top:4px}
 .letchat-refonte #composerKeyboardHint {display:none}
 .letchat-refonte .refonte-bottom-nav {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:0 0 auto;padding:6px 5px max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--v3-border);background:var(--v3-surface-soft);gap:2px}
 .letchat-refonte .refonte-bottom-nav button {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:49px;min-width:0;padding:6px 0;border:0;border-radius:9px;background:transparent;color:var(--v3-text-soft);font:inherit;font-size:10px;cursor:pointer}
 .letchat-refonte .refonte-bottom-nav button[aria-current=true] {color:var(--v3-accent);background:var(--lc-active)}
 .letchat-refonte .refonte-bottom-nav .room-unread {position:absolute;right:8px;top:1px;min-width:16px;height:16px;padding:1px 4px;font-size:9px;color:var(--lc-on-accent);background:var(--v3-accent)}
 .letchat-refonte body.mobile-keyboard-open .refonte-bottom-nav {display:none}
 .letchat-refonte body.mobile-keyboard-open .chat>footer {padding-bottom:max(7px,env(safe-area-inset-bottom))}
 .letchat-refonte .jump-latest {bottom:calc(var(--composer-footer-height,85px) + 86px)}
 .letchat-refonte body.mobile-keyboard-open .jump-latest {bottom:calc(var(--composer-footer-height,85px) + 20px)}
 .letchat-refonte .chat #roomFeature {margin:8px 12px 0;padding:9px}
 .letchat-refonte .people {height:var(--mobile-app-height,100dvh);max-height:var(--mobile-app-height,100dvh);top:var(--mobile-viewport-top,0px)}
 .letchat-refonte .chat.private-home>footer {display:none}
 .letchat-refonte .refonte-bottom-nav {z-index:6}
 .letchat-refonte .side .brand {margin-right:35px}
 .letchat-refonte .close-side {background:var(--v3-surface-strong);color:var(--v3-text);border-color:var(--v3-border)}
 .letchat-refonte .private-home-heading {gap:15px}
}
@media(prefers-reduced-motion:reduce){.letchat-refonte .people {transition:none}}

html.letchat-refonte[data-theme] .refonte-home[aria-current=true] {background:var(--v3-surface-strong);color:var(--v3-text)}
html.letchat-refonte[data-theme] .side .premium-shortcut {background:transparent;color:var(--v3-accent)}