/* Messagerie : même mise en page qu'avant, mais elle suit le thème clair ou sombre comme le reste de l'appli. */
[data-screen="messages"] body,[data-screen="chat"] body,[data-screen="friend-map"] body{background:var(--bg)}
[data-screen="messages"] .topbar,[data-screen="chat"] .topbar,[data-screen="friend-map"] .topbar{display:none}
.hub .hub-h.inbox-header{padding:30px 24px 22px;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
.inbox-account{min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--fg)}
.inbox-account h1{font-family:var(--font);font-size:27px;line-height:1.2;letter-spacing:-1px;font-weight:800;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0}
.inbox-account>svg{width:17px;flex:none}.inbox-header .icon-btn{width:40px;height:40px;display:grid;place-items:center;color:var(--fg)}.inbox-header .icon-btn>svg{width:26px;height:26px}
.inbox-back{visibility:hidden;width:40px;height:40px;display:grid;place-items:center}
[data-screen="friend-map"] .inbox-back{visibility:visible}
.inbox-header .hub-seg{display:none}
.hub .hub-p.chats{padding:0 24px 28px;gap:0;background:var(--bg);scrollbar-width:none}
.hub-p.chats::-webkit-scrollbar{display:none}
.hub .search{border-radius:999px;background:var(--soft);padding:12px 17px;gap:11px;height:47px;box-shadow:none;color:var(--muted)}
.hub .search input{font:500 16px var(--font);color:var(--fg)}.hub .search input::placeholder{color:var(--muted)}.hub .search>svg{width:21px;height:21px}
.hub .fr-rail{gap:19px;padding:29px 3px 22px;margin:0 -3px;align-items:end;overflow-x:auto;scrollbar-width:none;min-height:156px;flex:none}
.hub .fr-c{position:relative;width:88px;gap:8px;justify-items:center;color:var(--fg);font:600 13px var(--font);padding-top:24px;flex:none}
.hub .fr-c>.av,.hub .fr-c .note-avatar{width:76px;height:76px;box-shadow:none;background:var(--soft);border-radius:50%;overflow:hidden}
.hub .fr-c .note-avatar>.av{width:100%;height:100%}.hub .fr-c .note-avatar .avsvg{height:100%;width:100%}
.hub .fr-c>span:last-child{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-bubble{position:absolute;z-index:1;top:-9px;left:50%;transform:translateX(-50%);padding:9px 11px;max-width:94px;min-width:75px;min-height:42px;max-height:59px;background:var(--card);border-radius:18px;box-shadow:0 3px 15px #00000016;color:var(--muted);font:600 11px/1.25 var(--font);text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.note-bubble::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--card);bottom:-5px;left:20px}
.hub .fr-c .note-bubble{max-width:98px;white-space:normal;line-height:1.25}.hub .fr-c>.av,.hub .fr-c .note-avatar{max-width:none}
.fr-c.self{color:var(--muted)}.fr-c.self .note-bubble{font-weight:500}.fr-c.map-shortcut{padding-top:24px}.fr-c.map-shortcut>svg{width:76px;height:76px;border-radius:50%;background:#91d8f5}
.inbox-section{display:flex;align-items:center;justify-content:space-between;margin:12px 0 14px;padding:0;gap:12px}
.inbox-section h2{font:800 22px/1.25 var(--font);letter-spacing:-.65px;margin:0;color:var(--fg)}.inbox-requests{color:var(--muted);font:650 16px var(--font);white-space:nowrap}
.clist2{gap:0}.hub .crow2{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:13px;padding:13px 0;min-height:88px;border-radius:0;color:var(--fg);background:var(--bg);box-shadow:none}
.hub .crow2 .av{width:62px;height:62px}.hub .crow2>div{display:grid;gap:5px}.hub .crow2 b{font:650 17px/1.2 var(--font);letter-spacing:-.25px}.hub .crow2 small{font:500 15px/1.3 var(--font);letter-spacing:-.12px;color:var(--muted);margin:0}.hub .crow2.unread b{font-weight:800}.hub .crow2.unread small{font-weight:700;color:var(--fg)}.hub .crow2 .dotn{width:9px;height:9px;background:var(--blue);margin-left:3px}.hub .crow2:hover{background:var(--soft)}
.dm-group{position:relative;width:62px;height:62px;display:block}
.group-back,.group-front{position:absolute;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--bg);background:var(--line);overflow:hidden;font:750 12px var(--font);color:var(--fg)}
.group-back{top:0;left:0;background:var(--line)}.group-front{right:0;bottom:0;background:var(--soft)}.group-front>svg{width:24px;height:24px}
.inbox-extra{margin-top:23px}.inbox-extra>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font:650 14px var(--font);color:var(--muted);padding:12px 0;border-top:1px solid var(--line)}.inbox-extra>summary::-webkit-details-marker{display:none}.inbox-extra>summary::after{content:"+";font-size:21px;font-weight:400}.inbox-extra[open]>summary::after{content:"−"}.inbox-extra .btn{background:var(--blue);color:white;border-radius:9px;min-height:32px;padding:7px 12px;font-size:12px}.inbox-extra .av{width:48px!important;height:48px!important}.inbox-extra .crow2{grid-template-columns:48px minmax(0,1fr) auto;min-height:70px}.inbox-extra .crow2 b{font-size:14px}.inbox-extra .crow2 small{font-size:12px}
.inbox-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;color:var(--blue);font:650 13px var(--font)}
[data-screen="chat"] .chat{font-family:var(--font);background:var(--bg)}.chat .chat-h{border-color:var(--line)}[data-screen="chat"] .chat-h b{font:700 16px var(--font)}[data-screen="chat"] .chat-h small{color:var(--muted)}[data-screen="chat"] .bub{background:var(--soft);color:var(--fg);font:400 15px/1.45 var(--font)}[data-screen="chat"] .bub.me{background:var(--blue);color:#fff}[data-screen="chat"] .bub-n{color:var(--muted);font-weight:650}[data-screen="chat"] .chat-f{background:var(--bg);border-color:var(--line)}[data-screen="chat"] .chat-f textarea{background:var(--bg);border:1px solid var(--line);color:var(--fg);font:400 15px/20px var(--font)}[data-screen="chat"] .chat-f .btn{background:var(--blue);color:#fff}[data-screen="chat"] .sys{color:var(--muted)}
[data-screen="messages"] .side,[data-screen="chat"] .side,[data-screen="friend-map"] .side{background:var(--bg);border-color:var(--line);color:var(--fg)}[data-screen="messages"] .side .nav-a.on,[data-screen="chat"] .side .nav-a.on{color:var(--fg);background:var(--soft)}
/* One floating navigation frame, shared by all player screens. */
@media(max-width:900px){
 :root{--nav-height:calc(100px + env(safe-area-inset-bottom,0px))}
 :root[data-screen="messages"],:root[data-screen="chat"],:root[data-screen="friend-map"]{--top-height:0px}
 .bottombar.is-player{left:18px;right:18px;bottom:calc(15px + env(safe-area-inset-bottom,0px));height:66px;padding:5px 10px;border:0;border-radius:999px;background:var(--card);box-shadow:0 5px 28px #0000001a;align-items:stretch;gap:6px}
 .bottombar.is-player a,.bottombar.is-player .fab{min-height:0;height:56px;padding:8px 0;justify-content:center;border-radius:999px;margin:0;color:var(--fg);gap:0;background:transparent}
 .bottombar.is-player a>svg{width:28px;height:28px;stroke-width:2.3}
 .bottombar.is-player a>span:not(.nav-av){display:none}.bottombar.is-player a .nav-av{width:28px;height:28px}.bottombar.is-player a.on{background:var(--soft);color:var(--fg)}
 .bottombar.is-player a.on::after{display:none}.bottombar.is-player .msg-ic.on>svg{fill:currentColor}.bottombar.is-player .msg-ic .unread-dot{top:auto;bottom:9px;right:calc(50% - 20px);border:0;background:#ff274c;min-width:7px;width:7px;height:7px;padding:0;font-size:0}
 [data-screen="messages"] .bottombar.is-player,[data-screen="chat"] .bottombar.is-player,[data-screen="friend-map"] .bottombar.is-player{background:var(--bg);box-shadow:0 5px 30px #00000012}
 [data-screen="messages"] .bottombar.is-player a.on,[data-screen="chat"] .bottombar.is-player a.on{background:var(--soft);color:var(--fg)}
 .hub .hub-h.inbox-header{padding:25px 19px 22px;grid-template-columns:32px minmax(0,1fr) 32px}.inbox-account h1{font-size:28px}.hub .hub-p.chats{padding:0 19px 24px}.hub .fr-rail{gap:22px;padding-top:32px;padding-bottom:22px;min-height:166px}.hub .fr-c{width:83px}.hub .crow2{padding:13px 0}.inbox-section{margin-top:9px;margin-bottom:11px}
}
@media(max-width:380px){.inbox-account h1{font-size:25px}.hub .search input{font-size:14px}.hub .crow2{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}.hub .crow2 .av,.hub .dm-group{width:56px;height:56px}.hub .crow2 b{font-size:16px}.hub .crow2 small{font-size:14px}.inbox-section h2{font-size:21px}.inbox-requests{font-size:14px}.bottombar.is-player{left:14px;right:14px}}

/* ---------- téléphone : messagerie sous la barre d'état et avec le clavier (iPhone) ---------- */
@media(max-width:900px){
 /* l'heure et la batterie ne recouvrent plus le haut de l'écran Messages ni la carte des amis */
 :root[data-screen="messages"] .hub .hub-h.inbox-header,:root[data-screen="friend-map"] .hub .hub-h.inbox-header{padding-top:calc(18px + env(safe-area-inset-top,0px))}
 /* une conversation prend tout l'écran, comme Instagram : pas de barre du bas, l'en-tête reste visible clavier ouvert */
 :root[data-screen="chat"] .bottombar{display:none}
 :root[data-screen="chat"],:root[data-screen="chat"] body{overflow:hidden;overscroll-behavior:none}
 :root[data-screen="chat"] .main{padding:0}
 :root[data-screen="chat"] .chat{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100dvh);min-height:0;max-width:none;margin:0;padding:0 14px;z-index:40;grid-template-rows:auto minmax(0,1fr) auto;background:var(--bg)}
 :root[data-screen="chat"] .chat-h{padding:calc(8px + env(safe-area-inset-top,0px)) 0 10px}
 :root[data-screen="chat"] .chat-h b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 :root[data-screen="chat"] .chat-l{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 :root[data-screen="chat"] .chat-f{padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px))}
 :root[data-screen="chat"].kb .chat-h{padding-top:8px}
 :root[data-screen="chat"].kb .chat-f{padding-bottom:8px}
 /* 16 px : sinon l'iPhone zoome tout l'écran quand on touche le champ */
 :root[data-screen="chat"] .chat-f textarea{font-size:16px}
}
/* partage de position : gros bouton rond en bas de l'écran */
.loc-fab{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:8px;padding:0 16px 0 0;height:56px;border:0;border-radius:28px;background:#fff;color:#1c2420;font:700 13.5px/1 inherit;font-family:inherit;box-shadow:0 12px 28px rgba(20,30,25,.2);cursor:pointer}
.loc-fab .lf-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--pal-barre);color:#e6cd93}
.loc-fab.shared .lf-ic{background:linear-gradient(135deg,#e2c585,#c39a52 60%,#a98040);color:#fff}
.loc-fab:active{transform:scale(.97)}
@media (min-width:901px){.loc-fab{bottom:24px;right:24px}}
:root[data-screen="chat"] .loc-fab,:root[data-screen="friend-map"] .loc-fab{display:none}