/* Wall tab in the area card: a plain list of posts, a writing row on top, hearts and replies. */
.vertex-v3 #app#app#app#app#app .area-tabs { display:flex; }
.vertex-v3 #app#app#app#app#app .area-tabs button { flex:1 1 auto; min-width:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app .wall-panel { overflow-x:clip; display:flex; flex-direction:column; color:var(--ui-text,var(--g-contrast)); font:500 13px/1.35 var(--font-sans); }
.vertex-v3 #app .wall-panel[hidden] { display:none; }
.vertex-v3 #app .wall-panel button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app .wall-write { margin:2px 0 6px; }
.vertex-v3 #app .wall-start { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 6px 0 14px; border-radius:999px; background:var(--ui-raised,var(--g-raised))!important; color:var(--ui-muted,var(--g-muted))!important; font-size:14px; text-align:left; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .wall-start span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .wall-start i { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--g-accent); color:var(--g-contrast); font:500 20px/1 var(--font-sans); font-style:normal; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-write.open { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:14px; background:var(--ui-raised,var(--g-raised)); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .wall-compose-head { display:flex; align-items:center; font:600 15px var(--font-sans); }
.vertex-v3 #app .wall-compose-head b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .wall-close { width:36px; height:36px; margin:-8px 0; color:var(--ui-muted,var(--g-muted)); font-size:16px; }
.vertex-v3 #app .wall-text { width:100%; box-sizing:border-box; min-height:64px; padding:10px 12px; border:1px solid rgba(var(--g-ink-rgb),0.122); border-radius:14px; background:rgba(var(--g-ink-rgb),0.039); color:inherit; font:400 16px/1.4 var(--font-sans); resize:vertical; }
.vertex-v3 #app .wall-text:focus { outline:none; border-color:var(--g-accent); }
.vertex-v3 #app .wall-kinds { display:flex; flex-wrap:wrap; gap:6px; }
.vertex-v3 #app .wall-kind { height:32px; padding:0 12px; border:1px solid rgba(var(--g-ink-rgb),0.149)!important; border-radius:999px; color:var(--g-muted)!important; font-size:13px; }
.vertex-v3 #app .wall-kind[aria-pressed="true"] { background:var(--g-accent)!important; border-color:var(--g-accent)!important; color:var(--g-on-accent)!important; font-weight:600; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-compose-foot { display:flex; align-items:center; gap:10px; }
.vertex-v3 #app .wall-note { flex:1; margin:0; color:var(--ui-muted,var(--g-muted)); font:500 12px/1.35 var(--font-sans); }
.vertex-v3 #app .wall-panel .wall-post { flex:none; height:44px; padding:0 24px; border-radius:999px; background:var(--g-accent)!important; color:var(--g-contrast)!important; font:600 15px var(--font-sans); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-empty { margin:14px 4px; color:var(--ui-muted,var(--g-muted)); font:500 13px/1.45 var(--font-sans); }
.vertex-v3 #app .wall-item { position:relative; padding:12px 2px; border-top:1px solid rgba(var(--g-ink-rgb),0.071); }
.vertex-v3 #app .wall-item:first-child { border-top:0; }
.vertex-v3 #app .wall-meta { display:flex; align-items:baseline; gap:5px; min-width:0; color:var(--ui-muted,var(--g-muted)); font:500 12px var(--font-sans); }
.vertex-v3 #app .wall-meta b { color:var(--ui-text,var(--g-contrast)); font:600 13.5px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; }
.vertex-v3 #app .wall-meta span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app .wall-more { margin:-10px 0 -10px auto; flex:none; width:40px; height:36px; color:var(--ui-muted,var(--g-muted)); font:600 15px var(--font-sans); letter-spacing:1px; }
.vertex-v3 #app .wall-body { margin:4px 0 6px; font:400 14.5px/1.42 var(--font-sans); white-space:pre-wrap; overflow-wrap:anywhere; }
.vertex-v3 #app .wall-foot { display:flex; align-items:center; gap:6px; }
.vertex-v3 #app .wall-foot button:first-child { margin-left:-8px; }
.vertex-v3 #app .wall-foot button { display:flex; align-items:center; gap:5px; min-height:36px; padding:0 8px; border-radius:999px; color:var(--ui-muted,var(--g-muted)); font:500 12.5px var(--font-sans); }
.vertex-v3 #app .wall-foot svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.vertex-v3 #app .wall-like[aria-pressed="true"] { color:var(--g-danger); }
.vertex-v3 #app .wall-like[aria-pressed="true"] svg { fill:currentColor; }
.vertex-v3 #app .wall-thread { display:flex; flex-direction:column; gap:8px; margin:6px 0 2px 12px; padding-left:10px; border-left:2px solid rgba(var(--g-ink-rgb),0.078); }
.vertex-v3 #app .wall-thread[hidden] { display:none; }
.vertex-v3 #app .wall-reply-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; font:400 13.5px/1.4 var(--font-sans); }
.vertex-v3 #app .wall-reply-row b { font-weight:600; }
.vertex-v3 #app .wall-reply-row span { overflow-wrap:anywhere; }
.vertex-v3 #app .wall-reply-row small { color:var(--ui-muted,var(--g-muted)); font-size:11.5px; }
.vertex-v3 #app .wall-reply-delete { color:var(--ui-muted,var(--g-muted))!important; font-size:11.5px!important; text-decoration:underline; }
.vertex-v3 #app .wall-reply-form { display:flex; gap:6px; }
.vertex-v3 #app .wall-reply-form input { flex:1; min-width:0; height:38px; padding:0 12px; border:1px solid rgba(var(--g-ink-rgb),0.122); border-radius:999px; background:rgba(var(--g-ink-rgb),0.039); color:inherit; font:400 16px var(--font-sans); }
.vertex-v3 #app .wall-reply-form input:focus { outline:none; border-color:var(--g-accent); }
.vertex-v3 #app .wall-reply-form .wall-send { flex:none; height:38px; padding:0 14px; border-radius:999px; background:var(--g-accent)!important; color:var(--g-contrast)!important; font:600 13px var(--font-sans); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-reply-form .wall-send:disabled,.vertex-v3 #app .wall-post:disabled { background:var(--g-raised)!important; color:var(--g-muted)!important; opacity:1; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .wall-reply-form .wall-reply-close { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(var(--g-ink-rgb),0.071)!important; color:var(--g-muted)!important; font-size:15px; }
.vertex-v3 #app .wall-menu { position:absolute; right:0; top:34px; z-index:5; display:flex; flex-direction:column; width:min(220px,80%); padding:4px; border-radius:14px; background:var(--g-raised); border:1px solid rgba(var(--g-ink-rgb),0.133); box-shadow:0 10px 28px rgba(var(--g-shadow-rgb),0.240); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .wall-menu button { min-height:42px; padding:0 12px; border-radius:10px; text-align:left; color:var(--g-contrast); font:500 14px var(--font-sans); }
.vertex-v3 #app .wall-menu button:hover { background:rgba(var(--g-ink-rgb),0.051); }
.vertex-v3 #app .wall-menu button.danger { color:var(--g-danger); }
.vertex-v3 #app .wall-menu-title { margin:6px 12px 4px; color:var(--ui-muted,var(--g-muted)); font:500 12.5px/1.4 var(--font-sans); }
.vertex-v3 #app .wall-panel button:focus-visible { outline:2px solid var(--g-accent); outline-offset:2px; }
/* Unread posts: a small count on the dock's Area info button, nothing in the card. */
.vertex-v3 #app #dockTitle { position:relative; }
.vertex-v3 #app .wall-badge { position:absolute; top:6px; right:6px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:var(--g-accent); color:var(--g-contrast); font:600 11px/1 var(--font-sans); box-shadow:0 0 0 2px var(--ui-base,rgba(var(--g-shadow-rgb),0.240)); pointer-events:none; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-badge[hidden] { display:none; }
/* Replies to your own posts: a red count on the dock, a red dot on the Wall tab, and a list on top of the Wall. */
.vertex-v3 #app .wall-badge.reply { background:var(--ripa-red); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app #areaTabWall { position:relative; overflow:visible; }
.vertex-v3 #app .wall-tab-dot { position:absolute; top:7px; right:calc(50% - 26px); width:8px; height:8px; border-radius:50%; background:var(--ripa-red); box-shadow:0 0 0 2px var(--ui-base,rgba(var(--g-shadow-rgb),0.240)); pointer-events:none; color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-tab-dot[hidden] { display:none; }
.vertex-v3 #app .wall-inbox { display:flex; flex-direction:column; margin:0 0 8px; padding:4px 0; border-radius:14px; background:var(--ui-raised,var(--g-raised)); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .wall-inbox[hidden] { display:none; }
.vertex-v3 #app .wall-inbox h3 { display:flex; align-items:center; gap:7px; margin:8px 14px 4px; color:var(--g-contrast); font:600 13px/1.3 var(--font-sans); }
.vertex-v3 #app .wall-inbox h3::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ripa-red); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .wall-inbox-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 8px; width:100%; min-height:52px; padding:8px 12px 8px 14px; text-align:left; }
.vertex-v3 #app .wall-inbox-item + .wall-inbox-item { border-top:1px solid rgba(var(--g-ink-rgb),0.063); }
.vertex-v3 #app .wall-inbox-line { display:flex; gap:6px; min-width:0; font:400 14px/1.35 var(--font-sans); }
.vertex-v3 #app .wall-inbox-line b { flex:none; font-weight:600; }
.vertex-v3 #app .wall-inbox-line span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .wall-inbox-item small { grid-column:1; color:var(--ui-muted,var(--g-muted)); font:500 12px/1.3 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .wall-inbox-item i { grid-column:2; grid-row:1 / span 2; color:var(--ui-muted,var(--g-muted)); font:400 20px/1 var(--font-sans); font-style:normal; }
.vertex-v3 #app .wall-reply-row.new { margin-left:-12px; padding:4px 8px 4px 10px; border-left:2px solid var(--ripa-red); border-radius:0 10px 10px 0; background:var(--ripa-red)14; }
.vertex-v3 #app .wall-item.wall-focus { animation:wall-focus 2.4s ease-out; }
@keyframes wall-focus { 0%,40% { background:rgba(var(--g-accent-rgb),0.122); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);} 100% { background:transparent; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;} }
/* Photos on Locals posts: one per post, camera button in the composer, tap a photo to see it full screen. */
.vertex-v3 #app .wall-photo-add { flex:none; display:grid; place-items:center; width:44px; height:44px; margin-left:-4px; border-radius:50%; color:var(--g-ink)!important; background:rgba(var(--g-ink-rgb),0.071)!important; }
.vertex-v3 #app .wall-photo-add[hidden] { display:none; }
.vertex-v3 #app .wall-photo-add svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.vertex-v3 #app .wall-photo-add:disabled { opacity:.5; }
.vertex-v3 #app .wall-photo-preview { position:relative; align-self:flex-start; }
.vertex-v3 #app .wall-photo-preview[hidden] { display:none; }
.vertex-v3 #app .wall-photo-preview img { display:block; max-width:100%; max-height:140px; border-radius:10px; object-fit:cover; }
.vertex-v3 #app .wall-photo-remove { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(16,24,32,.62)!important; color:#fff!important; font-size:14px; --g-contrast:#fff; }
.vertex-v3 #app .wall-photo { position:relative; display:block; width:100%; max-height:230px; margin:2px 0 6px; padding:0; overflow:hidden; border-radius:14px; background:rgba(var(--g-ink-rgb),0.071)!important; }
.vertex-v3 #app .wall-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .2s; }
.vertex-v3 #app .wall-photo.ready img { opacity:1; }
.vertex-v3 #app .wall-photo.failed::after { content:'Photo unavailable'; display:grid; place-items:center; height:100%; color:var(--g-muted); font:500 12px var(--font-sans); }
.vertex-v3 #app .wall-photo.failed img { display:none; }
.vertex-v3 #app .wall-viewer { position:fixed; inset:0; z-index:6000; display:grid; place-items:center; padding:calc(env(safe-area-inset-top,0px) + 56px) 0 calc(env(safe-area-inset-bottom,0px) + 16px); background:rgba(8,14,20,.94); }
.vertex-v3 #app .wall-viewer img { max-width:100%; max-height:100%; object-fit:contain; }
.vertex-v3 #app .wall-viewer-close { position:absolute; top:calc(env(safe-area-inset-top,0px) + 10px); right:12px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font:500 16px var(--font-sans); cursor:pointer; }