.bot-avatar{display:inline-block;position:relative;flex:0 0 auto;vertical-align:middle;overflow:hidden;width:76px;height:76px;isolation:isolate}
.bot-avatar.bot-avatar-portrait{border-radius:22px;background:linear-gradient(150deg,#f4efe6,#e5e4de);border:1px solid #d5d8d2}
.bot-avatar.bot-avatar-portrait img{position:absolute;width:175%;height:auto;max-width:none;max-height:none;left:-37.5%;top:0;object-fit:contain;border:0;border-radius:0;background:none;mix-blend-mode:normal;filter:none}
.bot-avatar.bot-avatar-full{width:100%;height:170px}
.bot-avatar.bot-avatar-full img{position:absolute;left:50%;transform:translateX(-50%);width:auto;height:100%;max-width:none;object-fit:contain;object-position:center bottom;border:0;background:none;mix-blend-mode:normal}
.mascot-settings{display:block!important}
.mascot-settings form{max-width:none}
.mascot-settings>p{max-width:720px}
.avatar-picker{border:0;padding:0;margin:24px 0;min-width:0}
.avatar-picker legend{font-weight:700;margin-bottom:14px}
.avatar-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:16px 10px 14px;border:2px solid #d8ded8;border-radius:20px;background:#f2f0e9;color:#273b37;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.avatar-option input{position:absolute;top:12px;left:12px;width:20px;height:20px;accent-color:#285e4a;z-index:1;margin:0}
.avatar-option:has(input:checked){border-color:#285e4a;background:#e6eee4;box-shadow:0 0 0 1px #285e4a}
.avatar-option:focus-within{outline:3px solid #d48d44;outline-offset:3px}
.avatar-option strong{font-size:16px;margin-top:8px}
.avatar-option small{color:#53635d;font-size:12px;line-height:1.4}
.avatar-selected{position:absolute;right:10px;top:10px;width:25px;height:25px;border-radius:50%;color:#fff;background:#285e4a;display:none;align-items:center;justify-content:center}
.avatar-option:has(input:checked) .avatar-selected{display:flex}
.avatar-follow{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 0 16px;cursor:pointer}
.avatar-follow input,.avatar-upload input[type=radio]{width:20px;height:20px;flex:0 0 20px;accent-color:#285e4a}
.avatar-upload{margin:20px 0;padding:14px 0;border-top:1px solid #d8ded8}
.avatar-upload summary{cursor:pointer;font-weight:600}
.avatar-upload label{margin-top:15px}
.chat-partner,.training-avatar{display:flex;align-items:center;gap:12px;min-width:0}
.chat-partner h2{margin:0 0 4px}
.chat-partner>div>span,.training-avatar>span{font-size:13px;color:#52625b;overflow-wrap:anywhere}
.chat-partner .bot-avatar{width:58px;height:58px;border-radius:17px}
.training-avatar{margin:14px 0}
.practice-intro-head .bot-avatar{width:72px;height:72px}
.learning-reward .bot-avatar{width:90px;height:90px}
.character-card .bot-avatar{width:100px;height:100px}
.persona-art img,.stage img,.growth-next>img,.fox-help img{mix-blend-mode:normal!important;background:none!important;object-fit:contain}
.persona-art img{height:240px;width:210px;border-radius:0}
.stage img{height:190px;width:160px;border-radius:0}
.growth-next>img{width:200px;height:240px;border-radius:0}
.preview-stage .bot-avatar{width:96px;height:96px}
.fox-help img{border-radius:0}
@media(max-width:700px){.avatar-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.avatar-option{padding:12px 8px}.bot-avatar.bot-avatar-full{height:145px}.avatar-option strong{font-size:14px}.chat-partner{gap:9px}.chat-partner .bot-avatar{width:48px;height:48px}.panel-head:has(.chat-partner){gap:8px;align-items:center}.chat-partner h2{font-size:18px}.mascot-settings .avatar-picker{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.avatar-option{transition:none}}