.udn-sp {
--udn-sp-gap: max(12px, calc(50% - 228px));
position: fixed;
z-index: 45;
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
width: min(300px, calc(100vw - 24px));
padding: 12px 36px 12px 12px;
border: 1px solid rgba(19, 32, 28, 0.08);
border-left: 4px solid var(--udn-sp-accent, #0b6b57);
border-radius: 14px;
background: #fff;
color: #13201c;
font-family: inherit;
line-height: 1.35;
box-shadow: 0 12px 32px rgba(19, 32, 28, 0.16), 0 2px 6px rgba(19, 32, 28, 0.06);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.udn-sp.is-on {
opacity: 1;
transform: none !important;
pointer-events: auto;
}
.udn-sp-tl,
.udn-sp-bl {
left: var(--udn-sp-gap);
transform: translateX(-24px);
}
.udn-sp-tr,
.udn-sp-br {
right: var(--udn-sp-gap);
transform: translateX(24px);
}
.udn-sp-tl,
.udn-sp-tr {
top: 72px;
}
.udn-sp-bl,
.udn-sp-br {
bottom: 92px;
}
body.admin-bar .udn-sp-tl,
body.admin-bar .udn-sp-tr {
top: 104px;
}
.udn-sp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
height: 42px;
border-radius: 50%;
background: color-mix(in srgb, var(--udn-sp-accent, #0b6b57) 14%, #fff);
color: var(--udn-sp-accent, #0b6b57);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
}
.udn-sp-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.udn-sp-name {
overflow: hidden;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.udn-sp-text {
font-size: 13px;
color: #33413c;
}
.udn-sp-text b {
color: var(--udn-sp-accent, #0b6b57);
white-space: nowrap;
font-weight: 700;
}
.udn-sp-meta {
overflow: hidden;
margin-top: 2px;
font-size: 11px;
color: #6b7873;
white-space: nowrap;
text-overflow: ellipsis;
}
.udn-sp-close {
position: absolute;
top: 6px;
right: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #8a9691;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.udn-sp-close:hover {
background: #f1f4f3;
color: #13201c;
}
@media (prefers-reduced-motion: reduce) {
.udn-sp {
transition: opacity 0.2s;
transform: none !important;
}
}