/* ============================================================
   自定义头像框
   ------------------------------------------------------------
   框是紧跟在头像 <img> 后面的一层覆盖图，尺寸按头像的百分比算，
   这样 35px 的输入框头像和 45px 的消息头像用同一套缩放与偏移。
   覆盖层 pointer-events: none，头像原有的点击 / 右键不受影响。
   ============================================================ */

/* 头像本身是 <img>，绝对定位的框不会以它为参照（img 不能当包含块）。
   所以在头像外面套一层 .af-host：尺寸跟着头像走，框相对这一层定位。 */
.af-host {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    vertical-align: top;
}

/* 角色列表是横向 flex，包一层后头像原来的右边距要留在盒子上，
   否则名字会贴到头像上。 */
.af-host-friend {
    margin-right: 12px;
    align-self: center;
}
.af-host-friend > img.friend-avatar { margin-right: 0; }

img.af-frame {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 0;
    background: none;
    border: 0;
}

/* ---------- 设置面板里的预览 ---------- */

.af-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.af-preview-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.af-stage {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background:
        linear-gradient(45deg, #2a2d36 25%, transparent 25%),
        linear-gradient(-45deg, #2a2d36 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2d36 75%),
        linear-gradient(-45deg, transparent 75%, #2a2d36 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    background-color: #23262e;
    border: 1px solid #444;
    display: grid;
    place-items: center;
}

.af-stage .af-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #3a3d47;
}

/* 预览里的头像也包一层 .af-host，让框的百分比基准 = 头像本身（64px），
   和聊天里的真实头像完全一致。之前框直接以 96px 的 .af-stage 为定位基准，
   同一个滑杆值在预览里会明显偏大、偏外 —— 表现为「实际刚好套住、预览套不住」。 */
.af-stage .af-host {
    display: block;
    width: 64px;
    height: 64px;
}

.af-stage .af-frame {
    position: absolute;
    z-index: 2;
}

.af-preview-hint {
    margin: 0;
    max-width: 140px;
    text-align: center;
    font-size: 0.75em;
    color: #888;
}

.af-controls { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.af-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85em;
    margin-bottom: 4px;
}

.af-row output { color: #e6c78a; font-size: 0.95em; }

.af-row input[type="range"] { width: 100%; accent-color: #e6c78a; }

.af-url-line { display: flex; gap: 8px; align-items: center; }
.af-url-line input { flex: 1; min-width: 0; }

.af-btn-line { display: flex; gap: 8px; flex-wrap: wrap; }
.af-btn-line .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }

.af-status { margin: 0; font-size: 0.78em; color: #9a9da6; }

@media (max-width: 560px) {
    .af-layout { gap: 12px; }
    .af-preview-col { flex-direction: row; width: 100%; }
    .af-preview-hint { max-width: none; text-align: left; }
}