/* Attachments follow their parent; focused cards do not enlarge their labels. */
.canvas-extra-anchor{position:absolute;left:0;top:0;pointer-events:none;transform-origin:0 0;transition:transform 460ms cubic-bezier(.2,.8,.22,1.03),translate 300ms;--extra-scale:1;}
.canvas-extra-anchor.is-lifted{transition:none;}
.canvas-extra-widget{position:absolute;pointer-events:none;transform:rotate(var(--extra-angle)) scale(var(--extra-scale));width:max-content;max-width:118px;}
.canvas-extra-bubble{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:0;border:0;color:#252820;font-family:Arial,"PingFang SC",sans-serif;font-size:12px;font-weight:500;line-height:1.2;text-align:left;cursor:pointer;}
.canvas-extra-bubble:before{content:"";position:absolute;inset:-7px;}
.canvas-extra-bubble:focus-visible,.bubble-add:focus-visible,.extra-remove:focus-visible{outline:2px solid #9caca0;outline-offset:4px;}
.canvas-extra-bubble>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
/* Small collage stickers: colored ink/paper, with emoji kept as authored text. */
.sticker-paper{--sticker-paper:#fffdfd;--sticker-ink:#d12978;}
.sticker-rose{--sticker-paper:#ffd5e5;--sticker-ink:#922c59;}
.sticker-butter{--sticker-paper:#fff0a8;--sticker-ink:#65501f;}
.sticker-lilac{--sticker-paper:#e8dcfb;--sticker-ink:#62408b;}
.extra-kind-text .canvas-extra-bubble{max-width:112px;padding:5px 7px;border-radius:3px 5px 4px 2px;background:var(--sticker-paper);color:var(--sticker-ink);font-size:13px;font-weight:650;line-height:1.25;letter-spacing:-.3px;box-shadow:0 2px 5px #33302414;}
/* Frosted audio strip: round play control and delicate white waveform. */
.canvas-extra-widget.extra-kind-audio{max-width:none;}
.extra-kind-audio .extra-audio-bar{width:174px;height:36px;padding:5px 9px 5px 5px;gap:9px;border:1px solid #ffffff22;border-radius:999px;background:#82927fbd;color:#fff;box-shadow:0 3px 8px #26332320,inset 0 1px 1px #ffffff28;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.extra-audio-bar .extra-audio-toggle{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:#ffffff30;overflow:visible;}
.extra-audio-toggle:after{content:"";width:0;height:0;margin-left:2px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid #fff;filter:drop-shadow(0 0 2px #ffffff55);}
.is-playing .extra-audio-toggle:after{width:8px;height:11px;margin:0;border:0;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box;}
.extra-audio-bar .extra-audio-wave{display:flex;flex:1;align-items:center;justify-content:space-between;height:24px;overflow:hidden;min-width:0;}
.extra-audio-wave i{display:block;width:1.5px;flex:none;border-radius:2px;background:#ffffffa6;transition:background 120ms linear;}
.extra-audio-wave i.is-played{background:#fff;}
.extra-kind-audio .extra-audio-message{position:absolute;top:calc(100% + 4px);left:0;width:174px;font-size:9px;line-height:1.4;color:#65715e;background:#ffffffe6;border-radius:5px;padding:4px 6px;}
.extra-audio-message:empty{display:none;}
/* Images and videos are real thumbnail tiles, with a narrow white frame. */
.extra-kind-image .canvas-extra-bubble,.extra-kind-video .canvas-extra-bubble{width:54px;height:58px;padding:3px;border:1px solid #ffffffed;border-radius:13px;background:#fcfdfa;box-shadow:0 4px 9px -4px #2d382b45;overflow:visible;}
.extra-kind-image,.extra-kind-video{isolation:isolate;}
.canvas-extra-widget img,.canvas-extra-widget video{display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;background:#e4e7df;pointer-events:none;}
.extra-kind-video small{position:absolute;right:6px;bottom:6px;font-size:8px;color:white;text-shadow:0 1px 3px #000;}
.canvas-extra-widget .extra-media-error{max-width:54px;font-size:8px;}
.bubble-0{top:13%;left:-9px;--extra-angle:-7deg;transform-origin:left top;}
.bubble-1{top:calc(50% + 18px);right:-8px;--extra-angle:6deg;transform-origin:right center;}
.bubble-2{bottom:-4px;left:13%;--extra-angle:-4deg;transform-origin:left bottom;}
.bubble-0.extra-kind-video,.bubble-0.extra-kind-image{top:5%;left:-12px;--extra-angle:-11deg;}
.bubble-1.extra-kind-text{top:calc(50% + 23px);--extra-angle:4deg;}
.bubble-0.extra-kind-audio{top:16%;left:-9px;--extra-angle:-4deg;}
.bubble-1.extra-kind-audio{top:auto;bottom:14%;right:-5px;--extra-angle:2deg;transform-origin:right bottom;}
.bubble-2.extra-kind-audio{bottom:3%;left:7%;--extra-angle:-2deg;}
.bubble-more{position:absolute;bottom:2px;right:4px;transform:scale(var(--extra-scale));transform-origin:right bottom;min-width:27px;min-height:25px;border-radius:14px;padding:4px 7px;background:#ffffffd9;color:#8c9389;font-size:10px;box-shadow:0 2px 6px #39463212;}
/* Only a small plus in the parent's upper-right corner. */
.bubble-add{position:absolute;right:3px;top:3px;display:none;place-items:center;width:22px;height:22px;padding:4px;pointer-events:auto;transform:scale(var(--extra-scale));transform-origin:right top;border:1px solid #ffffffbb;border-radius:50%;background:#ffffffe0;color:#949a92;box-shadow:0 1px 4px #2c332518;}
.bubble-add:before{content:"";position:absolute;inset:-6px;border-radius:50%;}
.bubble-add svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.canvas-extra-anchor.is-focused .bubble-add{display:grid;}
/* Editing affordance from the reference: pale circular minus, no destructive red. */
.extra-remove{position:absolute;display:none;place-items:center;top:-9px;left:-9px;width:18px;height:18px;padding:0;border-radius:50%;background:#edeFEB;color:#91988d;box-shadow:0 1px 3px #2d382b13;pointer-events:auto;z-index:2;font-size:18px;font-weight:400;line-height:1;}
.extra-remove:before{content:"";position:absolute;inset:-5px;border-radius:50%;}
.extra-remove span{transform:translateY(-1px);}
.is-focused .extra-remove{display:grid;}
.has-focus .canvas-extra-anchor:not(.is-focused){visibility:hidden;}
.is-preview .canvas-extra-bubble{pointer-events:none;}
.extra-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.extra-detail-remove{font-size:11px;color:#858c80;min-height:44px;}
.extra-removed{font-size:11px;color:#8b9484;margin-top:16px;}
.extra-removed summary{cursor:pointer;padding:10px 0;}
.extra-removed>div{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #e1e5de;}
.extra-removed>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.extra-removed button{font-size:11px;min-height:40px;flex:none;color:#4d6250;}
.toast.has-action.show{pointer-events:auto;display:flex;align-items:center;gap:14px;}
.toast button{color:#e1f0d9;text-decoration:underline;text-underline-offset:3px;font-size:12px;padding:8px 4px;margin:-8px -4px;white-space:nowrap;}
.card-video{padding:3px;background:#e8ebe5;}
.card-video video{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;pointer-events:none;}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffffffb0;backdrop-filter:blur(8px);}
.video-play svg{width:15px;height:15px;}
.sheet:has(.extra-target){background:#f5f6f1;}
.extra-target{margin:0 0 17px;color:#8b948b;font-size:12px;line-height:1.5;overflow-wrap:anywhere;}
.extra-target strong{font-weight:500;color:#455447;}
.extra-type-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px;}
.extra-type-picker button{min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#ffffffb8;border:1px solid #fff;border-radius:18px;font-size:11px;color:#536152;box-shadow:0 3px 10px -7px #51664544;}
.extra-type-picker svg,.extra-entry-list svg,.extra-file-picker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.extra-entry-list{max-height:270px;overflow-y:auto;overscroll-behavior:contain;}
.extra-entry-list>button{display:flex;align-items:center;gap:12px;width:100%;min-height:59px;padding:10px 8px;text-align:left;border-bottom:1px solid #dfe4dc;color:#52614f;}
.extra-entry-list>button>span{min-width:0;flex:1;}
.extra-entry-list strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:#333e31;}
.extra-entry-list small{display:block;font-size:10px;color:#96a090;margin-top:3px;}
.extra-entry-list svg{flex:none;width:17px;height:17px;}
.extra-entry-list i{font-style:normal;color:#a2a99d;}
.extra-empty{font-size:12px;color:#929a8e;text-align:center;padding:20px 0;}
.extra-back{min-height:44px;padding:12px 0;margin-top:10px;font-size:12px;color:#687662;}
.extra-detail-title{font-size:16px;font-weight:500;overflow-wrap:anywhere;margin:0 0 12px;}
.extra-detail-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:14px;max-height:280px;overflow-y:auto;color:#3c4938;}
.extra-image,.extra-video,.extra-file-preview img,.extra-file-preview video{display:block;max-width:100%;max-height:290px;object-fit:contain;border-radius:12px;margin:0 auto;background:#e9ede5;}
.extra-audio,.extra-file-preview audio{width:100%;}
.extra-compose input[type=text]{margin-bottom:15px;font-size:14px;}
.extra-compose textarea{min-height:128px;}
.extra-text-styles{border:0;padding:0;margin:14px 0 0;min-width:0;}
.extra-text-styles legend{font-size:11px;color:#8b948b;margin-bottom:6px;}
.extra-text-styles>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.extra-compose .extra-style-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:7px 3px;border:1px solid transparent;border-radius:10px;cursor:pointer;}
.extra-style-choice input{position:absolute;width:1px;height:1px;opacity:0;}
.extra-style-choice>span{padding:3px 10px;border-radius:3px;background:var(--sticker-paper);color:var(--sticker-ink);font-size:17px;font-weight:650;transform:rotate(-4deg);box-shadow:0 2px 4px #33302410;}
.extra-style-choice:nth-child(even)>span{transform:rotate(4deg);}
.extra-style-choice small{font-size:10px;color:#7d877b;font-weight:400;}
.extra-style-choice:has(input:checked){border-color:#aeb9aa;background:#ffffff80;}
.extra-style-choice:has(input:focus-visible){outline:2px solid #7c978a;outline-offset:2px;}
.extra-compose .extra-file-picker{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:66px;margin:3px 0 12px;border:1px dashed #b8c5b2;border-radius:16px;background:#ffffff8c;color:#697a60;font-size:13px;cursor:pointer;}
.extra-file-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.extra-file-picker:focus-within{outline:2px solid #7c978a;outline-offset:2px;}
.extra-file-preview small{display:block;font-size:11px;color:#8a9782;overflow-wrap:anywhere;margin:9px 0;}
.extra-compose .sheet-action:disabled{opacity:.45;cursor:default;}
.extra-record{padding:12px 17px;min-height:44px;border:1px solid #c8d3c1;border-radius:22px;background:#e4ebdf;color:#43563a;font-size:12px;margin-bottom:12px;}
.extra-record-status{font-size:11px;color:#8a9683;margin-left:10px;}
.extra-media-error{display:block;font-size:11px;color:#8d9387;}
@media(prefers-reduced-motion:reduce){.canvas-extra-anchor{transition:none!important;}}

.extra-compose .sheet-footer[hidden]{display:none;}
.extra-save-state{font-size:11px;color:#9f8eaa;line-height:1.5;margin:10px 0 0;}