.sui-art{display:block;flex:0 0 88px;width:88px;height:88px;background-image:url('/assets/sui/character-sheet.png');background-repeat:no-repeat;background-color:#fff;border-radius:18px}
.sui-guide{background-size:451.765% 310.303%;background-position:65.217% 3.602%}
.sui-thanks{background-size:512% 310.303%;background-position:96.278% 3.602%}
.sui-companion,.sui-feedback{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line,#dce5ec);border-radius:18px;padding:12px;margin:12px 0;color:var(--ai-d,#102b4b)}
.sui-companion p,.sui-feedback p{margin:4px 0 0;line-height:1.6;font-size:14px;overflow-wrap:anywhere}
.sui-feedback>div{min-width:0;flex:1}.sui-feedback b{font-size:15px;line-height:1.5}
.sui-feedback>button{flex:0 0 44px;align-self:flex-start;min-height:44px;border:1px solid var(--line);border-radius:50%;background:white;color:inherit;font-size:22px}
.sui-feedback .sui-art{animation:sui-hello .45s ease-out}
@keyframes sui-hello{from{transform:translateY(5px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sui-feedback .sui-art{animation:none}}
@media(max-width:360px){.sui-feedback{gap:8px;padding:8px}.sui-feedback .sui-art{flex-basis:64px;width:64px;height:64px}}

/* 記録の案内はグラフを圧迫しない小さなサイズにする。 */
.record-companion .sui-art{width:64px;height:64px;flex-basis:64px}
.record-companion .sui-companion{padding:8px 10px;gap:10px}