/* Shared geometry and a quiet sand palette, including the composer itself. */
.app.app.app .composer{border-radius:var(--ui-radius,20px)!important;align-items:center;box-shadow:0 3px 15px #00000009;transition:border-color .25s,box-shadow .25s}
.app.app.app .composer:focus-within{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 3px 18px color-mix(in srgb,var(--accent) 10%,transparent)}
.composer-input-shell{position:relative;flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;border-radius:var(--ui-radius,20px)}
.app.app.app .composer-input-shell :is(textarea,input){width:100%;min-width:0;position:relative;background:transparent;margin:0;border-radius:var(--ui-radius,20px)!important}
.composer-placeholder{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;pointer-events:none;padding:0 7px;color:var(--muted);font-size:inherit;mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 10px),transparent)}
.composer-placeholder>span{display:block;width:max-content;white-space:nowrap;animation:composerMarquee 12s linear infinite;will-change:transform}
.composer-placeholder>span>span{display:inline-block;padding-right:68px}
@keyframes composerMarquee{0%,12%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.app.app.app .message-context-menu{border-radius:var(--ui-radius,20px)!important;box-shadow:0 12px 35px #00000025,0 1px 0 color-mix(in srgb,var(--panel) 60%,transparent) inset}
.app.app.app .message-context-actions>button{border-radius:var(--ui-radius,20px)!important;transition:background .18s,color .18s}
.app.app.app .reactions>button{border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.app.app.app .reactions>button.chosen{border-color:color-mix(in srgb,var(--accent) 36%,transparent);background:color-mix(in srgb,var(--accent) 17%,transparent)}
.app.app.app .composer-submit{box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 20%,transparent)}
.app.app.app .message-body{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.composer-placeholder>span{animation:none;transform:none}.placeholder-repeat{display:none}.app.app.app .composer{transition:none}}