/* ==========================================================================
   css/apps/sticker-wall.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3585-3644.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Sticker Wall (App) -- */
.ch-type-badge { display:inline-block; vertical-align:middle; margin-left:7px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:5px; padding:1px 6px; }
.wall-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.wall-title { display:flex; align-items:center; gap:9px; color:var(--text-secondary); font-size:13px; font-weight:600; }
.wall-title svg { color:var(--text-muted); }
.wall-post-btn { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:8px 15px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.wall-post-btn:hover { opacity:.92; transform:translateY(-1px); }
.wall-scroll { flex:1; overflow-y:auto; padding:20px; }
.wall-grid { columns:4 220px; column-gap:16px; max-width:1200px; margin:0 auto; }
@media (max-width:900px) { .wall-grid { columns:2 160px; } }
.wall-card { break-inside:avoid; margin:0 0 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; position:relative; transition:transform .16s, box-shadow .16s, border-color .16s; transform:rotate(var(--rot,0deg)); }
.wall-card:hover { transform:rotate(0deg) translateY(-2px); box-shadow:0 14px 34px -18px rgba(0,0,0,.7); border-color:var(--border-strong); z-index:2; }
.wall-card.pinned { border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wall-pin-badge { position:absolute; top:8px; right:8px; z-index:3; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.wall-media { display:block; }
.wall-img { width:100%; display:block; cursor:zoom-in; }
.wall-emoji { font-size:84px; line-height:1; text-align:center; padding:30px 16px; background:var(--bg-elevated); }
.wall-caption { padding:10px 13px 0; font-size:13.5px; color:var(--text-primary); line-height:1.45; word-break:break-word; }
.wall-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 11px; }
.wall-author { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:var(--text-muted); }
.wall-author img, .wall-av-fallback { width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.wall-av-fallback { display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; }
.wall-author > span:not(.wall-dot):not(.wall-time) { color:var(--text-secondary); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:88px; }
.wall-dot { opacity:.5; }
.wall-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.wall-like { display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:600; padding:3px 6px; border-radius:7px; }
.wall-like:hover { background:var(--bg-hover); color:var(--text-secondary); }
.wall-like.liked { color:#ef4444; }
.wall-ico-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; border-radius:7px; }
.wall-ico-btn:hover { background:var(--bg-hover); color:var(--text-secondary); }
.wall-ico-btn.danger:hover { background:color-mix(in srgb, #ef4444 18%, transparent); color:#ef4444; }
.wall-empty { text-align:center; color:var(--text-muted); padding:80px 20px; }
.wall-empty svg { color:var(--border-strong); margin-bottom:14px; }
.wall-empty h3 { color:var(--text-secondary); font-size:17px; margin:0 0 6px; }
.wall-empty p { font-size:13.5px; margin:0; }
/* composer */
.wall-composer-overlay { position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; animation:overlay-in 0.15s ease; }
.wall-composer { width:100%; max-width:440px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:modal-pop 0.22s var(--ease-out, ease); }
.wall-composer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 0; }
.wall-composer-head h3 { margin:0; font-size:17px; color:var(--text-primary); }
.wall-composer-close { background:none; border:none; color:var(--text-muted); font-size:24px; line-height:1; cursor:pointer; }
.wall-composer-tabs { display:flex; gap:8px; padding:14px 20px 0; }
.wall-tab { flex:1; background:var(--bg-surface); border:1px solid var(--border); border-radius:9px; padding:9px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.wall-tab.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.wall-composer-body { padding:16px 20px; }
.wall-drop { border:2px dashed var(--border-strong); border-radius:12px; padding:26px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; color:var(--text-muted); }
.wall-drop:hover, .wall-drop.drag { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.wall-drop p { margin:10px 0 2px; font-size:13.5px; color:var(--text-secondary); font-weight:600; }
.wall-drop span { font-size:11.5px; }
.wall-emoji-input { width:100%; text-align:center; font-size:46px; padding:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; color:var(--text-primary); }
.wall-emoji-input:focus { outline:none; border-color:var(--accent); }
.wall-hint { font-size:12px; color:var(--text-muted); text-align:center; margin:8px 0 0; }
.wall-emoji-preview { font-size:70px; text-align:center; min-height:0; }
.wall-caption-input { width:100%; margin-top:14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.5px; color:var(--text-primary); font-family:var(--font-body); }
.wall-caption-input:focus { outline:none; border-color:var(--accent); }
.wall-composer-foot { display:flex; justify-content:flex-end; gap:10px; padding:4px 20px 20px; }
.wall-btn-ghost { background:transparent; border:1px solid var(--border); border-radius:9px; padding:9px 18px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; }
.wall-btn-primary { background:var(--accent); border:none; border-radius:9px; padding:9px 22px; font-size:13px; font-weight:600; color:#fff; cursor:pointer; }
.wall-btn-primary:disabled { opacity:.6; cursor:default; }