/* One restrained palette per design. The private bubble is expressive; feeds use accents only. */
.bubble-theme{--bubble-bg:#f2f2f4;--bubble-fg:#21232b;--bubble-accent:#c6c9d1;--bubble-radius:18px;--bubble-decoration:none}
.bubble-clean{--bubble-bg:#f6f5f1;--bubble-fg:#242b2b;--bubble-accent:#8ca8a0;--bubble-radius:10px}
.bubble-soft-love,.bubble-love-doodle{--bubble-bg:#fce8ee;--bubble-fg:#622c43;--bubble-accent:#dd709a;--bubble-radius:23px}
.bubble-otter,.bubble-otter-sketch{--bubble-bg:#dff6fa;--bubble-fg:#17404b;--bubble-accent:#55a9bb;--bubble-radius:26px}
.bubble-frog{--bubble-bg:#f5efb9;--bubble-fg:#33452a;--bubble-accent:#7aab63;--bubble-radius:21px}
.bubble-night,.bubble-night-cut{--bubble-bg:#222c43;--bubble-fg:#fff;--bubble-accent:#9eb5e1;--bubble-radius:14px}
.bubble-neon{--bubble-bg:#262343;--bubble-fg:#fff;--bubble-accent:#dc83d9;--bubble-radius:22px}
.bubble-gold{--bubble-bg:#fff3d7;--bubble-fg:#4d3511;--bubble-accent:#be9441;--bubble-radius:12px}
.bubble-winter{--bubble-bg:#e8f4fb;--bubble-fg:#23425d;--bubble-accent:#7bb4d2;--bubble-radius:20px}
.bubble-halloween{--bubble-bg:#382b43;--bubble-fg:#fff;--bubble-accent:#efa15f;--bubble-radius:18px}
.chat-message-bubble.bubble-theme{background:var(--bubble-bg)!important;color:var(--bubble-fg)!important;border:1px solid var(--bubble-accent);border-radius:var(--bubble-radius);overflow:visible}
.chat-message-bubble.bubble-theme :is(p,small,time,strong,blockquote,.private-message-head){color:inherit}
.community-message.bubble-theme:not(.community-moment){background:var(--bubble-bg);color:var(--bubble-fg);border:1px solid var(--bubble-accent);border-left-width:3px;border-radius:var(--bubble-radius)}
.community-message.bubble-theme :is(.community-text,.community-author,time,.community-quote),.moment-comment.bubble-theme :is(p,time,strong){color:inherit}
.community-message.bubble-theme .community-quote{border-left-color:var(--bubble-accent)}
.moment-comment.bubble-theme{background:var(--bubble-bg);color:var(--bubble-fg);border:1px solid var(--bubble-accent);border-left-width:3px;border-radius:var(--bubble-radius)}
.bubble-picker-preview p,.bubble-picker-swatch{background:var(--bubble-bg);color:var(--bubble-fg);border:1px solid var(--bubble-accent);border-radius:var(--bubble-radius);padding:.8rem 1rem;max-width:26ch;margin:0;overflow-wrap:anywhere}
/* A nine-slice vector frame stretches with real message content. The tail and bubbles are decorative only. */
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-illustrated,
.community-bubble.bubble-shape-illustrated{position:relative;isolation:isolate;overflow:visible;background:var(--bubble-bg);background-clip:border-box!important;border:10px solid transparent;border-image-source:url('/assets/bubble-frames/otter-outline.svg');border-image-slice:26;border-image-width:10px;border-image-repeat:stretch;border-radius:25px 31px 27px 30px / 30px 25px 32px 27px}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-illustrated::after,
.community-bubble.bubble-shape-illustrated::after{content:'';position:absolute;bottom:-15px;left:11px;width:30px;height:24px;background:url('/assets/bubble-frames/otter-tail.svg') center/contain no-repeat;pointer-events:none}
.chat-message-wrapper.me .chat-message-bubble.bubble-shape-illustrated::after,
.community-message.own .community-bubble.bubble-shape-illustrated::after,
.bubble-picker-preview .bubble-shape-illustrated::after,
.bubble-picker-swatch.bubble-shape-illustrated::after{left:auto!important;right:11px;transform:scaleX(-1)}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-illustrated::before,
.community-bubble.bubble-shape-illustrated::before{content:'';position:absolute;top:-18px;right:14px;width:38px;height:25px;background:radial-gradient(circle at 7px 16px,#fff 0 3px,#55a9bb 3.5px 5px,transparent 5.5px),radial-gradient(circle at 22px 8px,#fff 0 4px,#55a9bb 4.5px 6px,transparent 6.5px);pointer-events:none}
/* The picker and every message renderer share one scalable frame and tail definition. */
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-doodle,.community-bubble.bubble-shape-doodle,:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-faceted,.community-bubble.bubble-shape-faceted{position:relative;isolation:isolate;overflow:visible;background:var(--bubble-bg);background-clip:border-box!important;border:10px solid transparent;border-image-slice:26;border-image-width:10px;border-image-repeat:stretch;overflow-wrap:anywhere}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-doodle,.community-bubble.bubble-shape-doodle{border-image-source:url('/assets/bubble-frames/love-doodle.svg');border-radius:36px 25px 38px 22px / 27px 35px 24px 37px;transform:rotate(-.35deg)}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-faceted,.community-bubble.bubble-shape-faceted{border-image-source:url('/assets/bubble-frames/night-facet.svg');border-radius:5px}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-doodle::after,.community-bubble.bubble-shape-doodle::after,:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-faceted::after,.community-bubble.bubble-shape-faceted::after{content:'';position:absolute;bottom:-17px;left:12px;width:34px;height:26px;background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-doodle::after,.community-bubble.bubble-shape-doodle::after{background-image:url('/assets/bubble-frames/love-tail.svg')}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-faceted::after,.community-bubble.bubble-shape-faceted::after{background-image:url('/assets/bubble-frames/night-tail.svg')}
.chat-message-wrapper.me :is(.bubble-shape-doodle,.bubble-shape-faceted)::after,.community-message.own .community-bubble:is(.bubble-shape-doodle,.bubble-shape-faceted)::after,.bubble-picker-preview :is(.bubble-shape-doodle,.bubble-shape-faceted)::after,.bubble-picker-swatch:is(.bubble-shape-doodle,.bubble-shape-faceted)::after{left:auto!important;right:12px;transform:scaleX(-1)}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-doodle::before,.community-bubble.bubble-shape-doodle::before{content:'♡';position:absolute;top:-17px;right:15px;color:#bb5078;font-size:19px;line-height:1;pointer-events:none}
:is(.chat-message-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-shape-faceted::before,.community-bubble.bubble-shape-faceted::before{content:'✦';position:absolute;top:-14px;right:15px;color:#cbd9ff;font-size:18px;line-height:1;pointer-events:none}
/* New immutable theme IDs keep historical message snapshots unchanged. */
.bubble-glossy-love{--bubble-bg:linear-gradient(145deg,#fff8fc 0%,#ffd9e9 38%,#f8b3d2 100%);--bubble-fg:#582644;--bubble-accent:#c3548a;--bubble-radius:28px;--shape-frame:url('/assets/bubble-frames/glossy-frame.svg');--shape-tail:url('/assets/bubble-frames/glossy-tail.svg');--shape-deco:url('/assets/bubble-frames/glossy-deco.svg');--shape-radius:32px 28px 35px 27px / 30px 36px 28px 34px}
.bubble-green-doodle{--bubble-bg:#e7f5df;--bubble-fg:#1c442c;--bubble-accent:#285d3b;--bubble-radius:27px;--shape-frame:url('/assets/bubble-frames/green-doodle-frame.svg');--shape-tail:url('/assets/bubble-frames/green-doodle-tail.svg');--shape-deco:url('/assets/bubble-frames/green-doodle-deco.svg');--shape-radius:28px 35px 26px 33px / 36px 27px 35px 25px}
.bubble-green-shimmer{--bubble-bg:linear-gradient(145deg,#e5ffd2 0%,#b9e9b0 45%,#87d4a0 100%);--bubble-fg:#164d35;--bubble-accent:#318a55;--bubble-radius:30px;--shape-frame:url('/assets/bubble-frames/shimmer-frame.svg');--shape-tail:url('/assets/bubble-frames/shimmer-tail.svg');--shape-deco:url('/assets/bubble-frames/shimmer-leaf.svg');--shape-radius:30px 34px 28px 32px}
.bubble-spider-night{--bubble-bg:linear-gradient(145deg,#382c49 0%,#282337 65%,#443653 100%);--bubble-fg:#fff4fb;--bubble-accent:#9f7bac;--bubble-radius:8px;--shape-frame:url('/assets/bubble-frames/spider-frame.svg');--shape-tail:url('/assets/bubble-frames/spider-tail.svg');--shape-deco:url('/assets/bubble-frames/spider-deco.svg');--shape-radius:8px}
.bubble-otter-pop{--bubble-bg:linear-gradient(145deg,#effdff 0%,#cceef0 48%,#a6dbe5 100%);--bubble-fg:#16424d;--bubble-accent:#348da2;--bubble-radius:28px;--shape-frame:url('/assets/bubble-frames/otter-pop-frame.svg');--shape-tail:url('/assets/bubble-frames/otter-pop-tail.svg');--shape-deco:url('/assets/bubble-frames/otter-pop-deco.svg');--shape-radius:31px 27px 33px 29px / 28px 35px 30px 34px}
.bubble-moon-velvet{--bubble-bg:linear-gradient(145deg,#333954 0%,#252940 65%,#33314b 100%);--bubble-fg:#f9f7ff;--bubble-accent:#a6addd;--bubble-radius:8px;--shape-frame:url('/assets/bubble-frames/moon-velvet-frame.svg');--shape-tail:url('/assets/bubble-frames/moon-velvet-tail.svg');--shape-deco:url('/assets/bubble-frames/moon-velvet-deco.svg');--shape-radius:8px}
.bubble-chill-leaf-v2{--bubble-bg:linear-gradient(145deg,#e5ffd2,#b9e9b0 45%,#87d4a0);--bubble-fg:#164d35;--bubble-accent:#318a55;--shape-tail:url('/assets/bubble-frames/shimmer-tail.svg');--shape-deco:url('/assets/bubble-frames/chill-leaf-v2-deco.svg');--shape-radius:30px 34px 28px 32px}
.bubble-ice-crystal{--bubble-bg:linear-gradient(145deg,#f7feff,#d5f4fa 48%,#aee1ed);--bubble-fg:#163c50;--bubble-accent:#56a9c1;--shape-tail:url('/assets/bubble-frames/ice-crystal-tail.svg');--shape-deco:url('/assets/bubble-frames/ice-crystal-deco.svg');--shape-radius:26px 31px 22px 29px / 30px 24px 32px 25px}
.bubble-fire-talk{--bubble-bg:linear-gradient(145deg,#5d2230,#802a2d 55%,#b54929);--bubble-fg:#fff8f0;--bubble-accent:#e68149;--shape-tail:url('/assets/bubble-frames/fire-talk-tail.svg');--shape-deco:url('/assets/bubble-frames/fire-talk-deco.svg');--shape-radius:29px 22px 30px 19px / 22px 30px 23px 29px}
/* Same surface, frame, tail and small illustration in picker, lounge, private chat and JETZT. */
:is(.chat-message-bubble,.community-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk){position:relative;isolation:isolate;overflow:visible;background:var(--bubble-bg)!important;background-clip:border-box!important;color:var(--bubble-fg);border:10px solid transparent;border-image-source:var(--shape-frame);border-image-slice:26;border-image-width:10px;border-image-repeat:stretch;border-radius:var(--shape-radius);padding-inline-end:3.4rem;overflow-wrap:anywhere}
:is(.chat-message-bubble,.community-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::after{content:'';position:absolute;bottom:-16px;left:12px;width:34px;height:26px;background:var(--shape-tail) center/contain no-repeat;pointer-events:none}
.chat-message-wrapper.me .bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::after,.community-message.own .community-bubble.bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::after,.bubble-picker-preview .bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::after,.bubble-picker-swatch.bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::after{left:auto!important;right:12px;transform:scaleX(-1)}
:is(.chat-message-bubble,.community-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::before{content:'';position:absolute;top:-20px;right:12px;width:64px;height:44px;background:var(--shape-deco) center/contain no-repeat;pointer-events:none}
.bubble-shape-green-doodle{transform:rotate(-.3deg)}
@media(max-width:400px){.bubble-theme:is(.bubble-shape-glossy,.bubble-shape-green-doodle,.bubble-shape-shimmer,.bubble-shape-spider,.bubble-shape-otter-pop,.bubble-shape-moon-velvet,.bubble-shape-ice-crystal,.bubble-shape-fire-talk)::before{width:48px;height:34px;top:-15px;right:7px}}
/* Shape-only surfaces: the lounge article is layout, not a second bubble. */
.bubble-shape-illustrated{--shape-frame:url('/assets/bubble-frames/otter-outline.svg')}
.bubble-shape-doodle{--shape-frame:url('/assets/bubble-frames/love-doodle.svg')}
.bubble-shape-faceted{--shape-frame:url('/assets/bubble-frames/night-facet.svg')}
.community-message.has-shape,.community-message.has-shape.own{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;min-width:0;overflow:visible}
.community-message.has-shape .community-bubble{display:block;max-width:100%;box-sizing:border-box;color:var(--bubble-fg)}
.community-bubble.bubble-has-shape :is(.community-text,.community-author,time,.community-quote){color:inherit}
/* A border-image paints a rectangular second shell outside the rounded fill. Keep one directly contoured surface; SVG tails and decorations remain. */
:is(.chat-message-bubble,.community-bubble,.moment-comment,.bubble-picker-preview p,.bubble-picker-swatch).bubble-has-shape{box-sizing:border-box;height:auto!important;min-height:0!important;max-height:none!important;min-width:0;overflow:visible!important;border:2px solid var(--bubble-accent)!important;border-image-source:none!important;background-clip:border-box!important;padding:.85rem 1.05rem 1.05rem!important;padding-inline-end:3.4rem!important;flex-shrink:1}
:is(.chat-message-bubble,.community-bubble).bubble-has-shape{margin:.55rem .25rem 1rem}
#chat-section .chat-message-bubble.bubble-has-shape{height:auto!important;min-height:0!important;max-height:none!important;min-width:0!important;padding:.85rem 1.05rem 1.05rem!important;padding-inline-end:3.4rem!important;border:2px solid var(--bubble-accent)!important;border-image-source:none!important;background-clip:border-box!important;overflow:visible!important}
.bubble-picker{margin:1rem 0;padding:1rem;border:1px solid var(--border,#ddd);border-radius:18px;background:var(--surface,#fff)}
.bubble-picker>p{max-width:65ch}.bubble-picker-preview{display:flex;justify-content:flex-end;padding:1rem;min-height:80px;border-radius:16px;background:#f7f7f8}
.bubble-picker-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.65rem;margin:1rem 0;max-height:330px;overflow:auto}
.bubble-picker-option{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:120px;padding:.7rem;border:2px solid transparent;border-radius:14px;background:#f6f6f7;color:#20232a;text-align:center}
.bubble-picker-option[aria-checked="true"]{border-color:#6d548a;box-shadow:0 0 0 2px #6d548a22}.bubble-picker-option:disabled{opacity:.55}.bubble-picker-option small{font-size:.75rem}.bubble-picker-option strong{font-size:.9rem}
@media(max-width:640px){.bubble-picker{padding:.75rem}.bubble-picker-list{grid-template-columns:repeat(2,minmax(0,1fr))}.bubble-picker-option{min-width:0}}