/* SiraAI avatar component */

.sira-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
    box-shadow: 0 0 0 1px rgba(180, 160, 230, 0.18), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.sira-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sira-avatar-initials {
    color: #1A1530;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* In nav: clickable */
.nav-avatar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(245, 240, 255, 0.85);
    font: 500 13px/1 'Inter', system-ui, sans-serif;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    transition: background 180ms ease;
}
.nav-avatar-link:hover { background: rgba(180, 160, 230, 0.12); color: #fff; }
.nav-avatar-link .sira-avatar { box-shadow: 0 0 0 2px rgba(180, 160, 230, 0.32); }

/* Settings page avatar block */
.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 4px 0 8px;
    flex-wrap: wrap;
}
.settings-avatar-large {
    --size: 96px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    background: rgba(180, 160, 230, 0.16);
    box-shadow: 0 0 0 3px rgba(180, 160, 230, 0.22), 0 14px 30px -10px rgba(0, 0, 0, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.settings-avatar-large > .sira-avatar {
    width: 100% !important;
    height: 100% !important;
    box-shadow: none;
}
.settings-avatar-large > .sira-avatar.sira-avatar-initials {
    font-size: 38px;
}

.settings-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-avatar-actions .row {
    display: flex;
    gap: 8px;
}
.settings-avatar-input {
    display: none;
}
.settings-avatar-help {
    font-size: 12px;
    color: var(--dim, rgba(245, 240, 255, 0.5));
    margin: 4px 0 0;
}