/* Chat wallpapers (wallpaper.js sets data-wp on <html> and on picker thumbnails) */
:root, [data-wp] {
    --wp-img: url("assets/wallpapers/mint-waves.jpg");
    --wp-size: cover; --wp-repeat: no-repeat; --wp-dim: rgba(0,0,0,0); --wp-wall: #e3f3ea;
}
[data-wp="mint-leaves"] { --wp-img: url("assets/wallpapers/mint-leaves.jpg"); }
[data-wp="cream-waves"] { --wp-img: url("assets/wallpapers/cream-waves.jpg"); --wp-wall: #f3eee6; }
[data-wp="night-sky"] { --wp-img: url("assets/wallpapers/night-sky.jpg"); --wp-wall: #3b3a6b; }
[data-wp="mint-soft"] { --wp-img: url("assets/wallpapers/mint-soft.jpg"); }
[data-wp="doodle"] { --wp-img: url("assets/doodle-light.svg?v=2"); --wp-size: 400px 400px; --wp-repeat: repeat; --wp-wall: #efeae2; }
[data-wp="plain"] { --wp-img: none; --wp-wall: #efeae2; }

/* dark mode: pictures are dimmed so bubbles stay readable */
[data-theme="dark"], [data-theme="dark"] [data-wp] { --wp-dim: rgba(11,20,26,.36); --wp-wall: #0b141a; }
[data-theme="dark"][data-wp="night-sky"], [data-theme="dark"] [data-wp="night-sky"] { --wp-dim: rgba(11,20,26,.12); }
[data-theme="dark"][data-wp="doodle"], [data-theme="dark"] [data-wp="doodle"] { --wp-img: url("assets/doodle-dark.svg?v=2"); --wp-dim: rgba(0,0,0,0); }
[data-theme="dark"][data-wp="plain"], [data-theme="dark"] [data-wp="plain"] { --wp-dim: rgba(0,0,0,0); }

.wp-surface, .chat-container, .vi-stage, .vi-chat, .landing .ph-screen, .landing .mini {
    background: linear-gradient(var(--wp-dim), var(--wp-dim)), var(--wp-img) center / var(--wp-size) var(--wp-repeat) var(--wp-wall) !important;
}

/* picker */
[data-wp-picker] { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
[data-wp-picker]::-webkit-scrollbar { display: none; }
.wp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.wp-thumb { position: relative; width: 74px; height: 132px; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 7px; box-sizing: border-box; border: 1px solid rgba(17,27,33,.12); }
.wp-item.on .wp-thumb { border: 3px solid #00a884; padding: 5px; }
.wp-thumb i { display: block; height: 12px; border-radius: 6px; }
.wp-thumb .b1 { width: 42px; background: #fff; }
.wp-thumb .b2 { width: 34px; background: #d9fdd3; align-self: flex-end; }
[data-theme="dark"] .wp-thumb .b1 { background: #202c33; }
[data-theme="dark"] .wp-thumb .b2 { background: #005c4b; }
.wp-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #00a884; color: #fff; display: none; place-items: center; }
.wp-item.on .wp-check { display: grid; }
.wp-item small { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 78px; }
.wp-item.on small { opacity: 1; font-weight: 700; }

.wp-wrap { position: relative; }
[data-wp-picker] { padding-right: 34px; }
.wp-more { position: absolute; right: 0; top: 50px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #00a884; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); animation: wp-nudge 1.2s ease-in-out infinite; }
.wp-more[hidden] { display: none; }
@keyframes wp-nudge { 50% { transform: translateX(4px); } }