/* 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,#eef1f5); font:500 13px/1.35 system-ui,sans-serif; }
.vertex-v3 #app .wall-panel[hidden] { display:none; }
.vertex-v3 #app .wall-panel button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
.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:22px; background:var(--ui-raised,#2a2e35)!important; color:var(--ui-muted,#8d96a2)!important; font-size:14px; text-align:left; }
.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:#3b82f6; color:#fff; font:500 20px/1 system-ui; font-style:normal; }
.vertex-v3 #app .wall-write.open { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:16px; background:var(--ui-raised,#2a2e35); }
.vertex-v3 #app .wall-compose-head { display:flex; align-items:center; font:650 15px system-ui; }
.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,#8d96a2); font-size:16px; }
.vertex-v3 #app .wall-text { width:100%; box-sizing:border-box; min-height:84px; padding:10px 12px; border:1px solid #ffffff1f; border-radius:12px; background:#ffffff0a; color:inherit; font:400 16px/1.4 system-ui; resize:vertical; }
.vertex-v3 #app .wall-text:focus { outline:none; border-color:#3b82f6; }
.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 #ffffff26!important; border-radius:16px; color:#cfd4dc!important; font-size:13px; }
.vertex-v3 #app .wall-kind[aria-pressed="true"] { background:#eef1f5!important; border-color:#eef1f5!important; color:#16181c!important; }
.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,#8d96a2); font:500 12px/1.35 system-ui; }
.vertex-v3 #app .wall-post { flex:none; height:44px; padding:0 24px; border-radius:22px; background:#3b82f6!important; color:#fff!important; font:650 15px system-ui; }
.vertex-v3 #app .wall-empty { margin:14px 4px; color:var(--ui-muted,#8d96a2); font:500 13px/1.45 system-ui; }
.vertex-v3 #app .wall-item { position:relative; padding:12px 2px; border-top:1px solid #ffffff12; }
.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,#8d96a2); font:500 12px system-ui; }
.vertex-v3 #app .wall-meta b { color:var(--ui-text,#eef1f5); font:650 13.5px system-ui; 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,#8d96a2); font:700 15px system-ui; letter-spacing:1px; }
.vertex-v3 #app .wall-body { margin:4px 0 6px; font:400 14.5px/1.42 system-ui; 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:18px; color:var(--ui-muted,#8d96a2); font:500 12.5px system-ui; }
.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:#ff5a6e; }
.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 #ffffff14; }
.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 system-ui; }
.vertex-v3 #app .wall-reply-row b { font-weight:650; }
.vertex-v3 #app .wall-reply-row span { overflow-wrap:anywhere; }
.vertex-v3 #app .wall-reply-row small { color:var(--ui-muted,#8d96a2); font-size:11.5px; }
.vertex-v3 #app .wall-reply-delete { color:var(--ui-muted,#8d96a2)!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 #ffffff1f; border-radius:19px; background:#ffffff0a; color:inherit; font:400 16px system-ui; }
.vertex-v3 #app .wall-reply-form input:focus { outline:none; border-color:#3b82f6; }
.vertex-v3 #app .wall-reply-form .wall-send { flex:none; height:38px; padding:0 14px; border-radius:19px; background:#3b82f6!important; color:#fff!important; font:600 13px system-ui; }
.vertex-v3 #app .wall-reply-form .wall-send:disabled,.vertex-v3 #app .wall-post:disabled { background:#3a3f47!important; color:#8d96a2!important; opacity:1; }
.vertex-v3 #app .wall-reply-form .wall-reply-close { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffffff12!important; color:#cfd4dc!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:#24282e; border:1px solid #ffffff22; box-shadow:0 10px 28px #000a; }
.vertex-v3 #app .wall-menu button { min-height:42px; padding:0 12px; border-radius:9px; text-align:left; color:#eef1f5; font:500 14px system-ui; }
.vertex-v3 #app .wall-menu button:hover { background:#ffffff0d; }
.vertex-v3 #app .wall-menu button.danger { color:#ff7b72; }
.vertex-v3 #app .wall-menu-title { margin:6px 12px 4px; color:var(--ui-muted,#8d96a2); font:500 12.5px/1.4 system-ui; }
.vertex-v3 #app .wall-panel button:focus-visible { outline:2px solid #93c5fd; 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:9px; background:#3b82f6; color:#fff; font:700 11px/1 system-ui; box-shadow:0 0 0 2px var(--ui-base,#1e2126); pointer-events:none; }
.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:#ef4444; }
.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:#ef4444; box-shadow:0 0 0 2px var(--ui-base,#1e2126); pointer-events:none; }
.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:16px; background:var(--ui-raised,#2a2e35); }
.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:#eef1f5; font:650 13px/1.3 system-ui; }
.vertex-v3 #app .wall-inbox h3::before { content:""; width:8px; height:8px; border-radius:50%; background:#ef4444; }
.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 #ffffff10; }
.vertex-v3 #app .wall-inbox-line { display:flex; gap:6px; min-width:0; font:400 14px/1.35 system-ui; }
.vertex-v3 #app .wall-inbox-line b { flex:none; font-weight:650; }
.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,#8d96a2); font:500 12px/1.3 system-ui; 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,#8d96a2); font:400 20px/1 system-ui; font-style:normal; }
.vertex-v3 #app .wall-reply-row.new { margin-left:-12px; padding:4px 8px 4px 10px; border-left:2px solid #ef4444; border-radius:0 8px 8px 0; background:#ef444414; }
.vertex-v3 #app .wall-item.wall-focus { animation:wall-focus 2.4s ease-out; }
@keyframes wall-focus { 0%,40% { background:#3b82f61f; } 100% { background:transparent; } }