<template>
    <div class="mine-page">
        <div v-show="!showSubPage" class="mine-page-main">
            <header class="page-header">
                <div class="page-title">{{ t('我的') }}</div>
            </header>
            <section class="card profile-card">
                <div class="profile-main">
                    <div class="avatar" aria-hidden="true">
                        <img v-if="staffAvatar" class="avatar-image" :src="staffAvatar" alt="" />
                        <svg v-else viewBox="0 0 24 24" class="avatar-icon">
                            <path
                                d="M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5Zm0 2c-4.418 0-8 2.91-8 6.5 0 .828.672 1.5 1.5 1.5h13c.828 0 1.5-.672 1.5-1.5C20 16.91 16.418 14 12 14Z" />
                        </svg>
                    </div>
                    <div class="profile-info">
                        <div class="profile-top-row">
                            <div class="profile-name">{{ staffName }}</div>
                            <t-popover :visible="visible" placement="bottom-right" theme="light" trigger="click"
                                :show-arrow="false" @visible-change="handleVisibleChange">
                                <template #triggerElement>
                                    <div class="status-trigger">
                                        <span class="status-dot status-trigger-dot"
                                            :style="{ background: currentStatus.color }"></span>
                                        <span class="status-trigger-text">{{ currentStatus.label }}</span>
                                        <img class="status-trigger-icon" :src="selectDownIcon" alt="" />
                                    </div>
                                </template>
                                <template #content>
                                    <div class="custom__list">
                                        <template v-for="option in statusOptions" :key="option.key">
                                            <t-popover v-if="option.value === 'rest' && option.showArrow"
                                                :visible="restReasonPopupVisible" placement="right-top" theme="light"
                                                trigger="manual" :show-arrow="false">
                                                <template #triggerElement>
                                                    <div class="status-option-wrapper">
                                                        <button type="button" class="status-option"
                                                            :class="{ 'status-option--active': option.selected }"
                                                            @click="handleStatusSelect(option)">
                                                            <span class="status-dot"
                                                                :style="{ background: option.color }"></span>
                                                            <span class="status-option-text">{{ option.label }}</span>
                                                            <span class="status-option-arrow">&gt;</span>
                                                        </button>
                                                    </div>
                                                </template>
                                                <template #content>
                                                    <div class="custom__list rest-reason-list">
                                                        <button v-for="reasonItem in enabledRestReasonList"
                                                            :key="reasonItem.name" type="button"
                                                            class="status-option rest-reason-option"
                                                            :class="{ 'status-option--active': isRestReasonSelected(reasonItem.name) }"
                                                            @click="handleRestReasonSelect(reasonItem.name)">
                                                            <span class="status-option-text">{{ reasonItem.name
                                                            }}</span>
                                                        </button>
                                                    </div>
                                                </template>
                                            </t-popover>
                                            <button v-else type="button" class="status-option"
                                                :class="{ 'status-option--active': option.selected }"
                                                @click="handleStatusSelect(option)">
                                                <span class="status-dot" :style="{ background: option.color }"></span>
                                                <span class="status-option-text">{{ option.label }}</span>
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </t-popover>
                        </div>
                        <div v-if="skillGroupText" class="profile-skill-groups">{{ skillGroupText }}</div>
                    </div>
                </div>
            </section>

            <section class="card info-card">
                <div class="info-row" v-for="item in infoItems" :key="item.key">
                    <div class="info-content"
                        :class="{ 'info-content--editing': item.key === 'receptionLimit' && isEditingReceptionLimit }">
                        <span class="info-label">{{ item.label }}</span>
                        <div v-if="item.key === 'receptionLimit' && isEditingReceptionLimit"
                            class="reception-limit-editor">
                            <input ref="receptionLimitInputRef" v-model="receptionLimitDraft"
                                class="reception-limit-input" type="text" inputmode="numeric" maxlength="3"
                                :placeholder="t('请输入')" @input="handleReceptionLimitInput"
                                @keydown.enter.prevent="handleReceptionLimitSave" />
                        </div>
                        <span v-else class="info-value">{{ item.value }}</span>
                    </div>
                    <div v-if="item.key === 'receptionLimit' && isEditingReceptionLimit" class="info-action-group">
                        <span v-if="item.unit" class="info-unit">{{ item.unit }}</span>
                        <button type="button" class="text-action-button" @click="handleReceptionLimitCancel">{{ t('取消')
                        }}</button>
                        <button type="button" class="text-action-button text-action-button--primary"
                            :disabled="isUpdatingReceptionLimit" @click="handleReceptionLimitSave">
                            {{ t('完成') }}
                        </button>
                    </div>
                    <div v-else-if="item.unit || item.actionIcon" class="info-action-group">
                        <span v-if="item.unit" class="info-unit">{{ item.unit }}</span>
                        <button v-if="item.actionIcon" type="button" class="icon-action-button" :aria-label="t('修改信息')"
                            @click="handleInfoAction(item)">
                            <img :src="item.actionIcon" alt="" />
                        </button>
                    </div>
                </div>
            </section>

            <section class="card action-card">
                <button type="button" class="action-row" v-for="action in actions" :key="action.label"
                    @click="handleActionClick(action)">
                    <div class="action-left">
                        <img class="action-icon" :src="action.icon" alt="" />
                        <span class="action-text">{{ action.label }}</span>
                    </div>
                </button>
            </section>
        </div>

        <t-dialog class="confirm-dialog" v-model:visible="isShowDialog" :close-on-overlay-click="true"
            :confirm-btn="null" :cancel-btn="null" @confirm="onConfirm" @cancel="onCancel">
            <template #middle>
                <div class="logout-dialog-content">
                    <div class="logout-dialog-text">{{ t('确认要退出当前账号吗？') }}</div>
                    <div class="logout-dialog-actions">
                        <button type="button" class="logout-dialog-button logout-dialog-button--cancel"
                            @click="onCancel">
                            {{ t('取消') }}
                        </button>
                        <button type="button" class="logout-dialog-button logout-dialog-button--confirm"
                            @click="onConfirm">
                            {{ t('确认退出') }}
                        </button>
                    </div>
                </div>
            </template>
        </t-dialog>

        <router-view />
    </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance, { StoreName } from '@tencentcloud/ai-desk-core';
import toast from '../../../utils/toast';
import modifyPasswordIcon from './modifyPassword.svg';
import modifyTelIcon from './modifyTel.svg';
import logoutIcon from './logout.svg';
import selectDownIcon from '../SessionsList/components/SessionToolbar/selectDown.svg';

type StatusOption = {
    key: string;
    value: 'free' | 'notReady' | 'rest' | 'offline';
    label: string;
    color: string;
    selected: boolean;
    showArrow?: boolean;
};

type RestReasonItem = {
    name: string;
    state: string;
};

type SkillGroupNameMap = Record<string, string>;

type ConnectionState = 'disconnected' | 'connected' | 'connecting' | 'reconnecting';
type UserStatus = 'offline' | 'free' | 'busy' | 'rest' | 'countdown' | 'arrange' | 'notReady';
type LogicStatus = 'ready' | 'notReady' | 'rest' | 'afterCallWork' | 'offline' | '';

type InfoItem = {
    key: string;
    label: string;
    value: string;
    unit?: string;
    actionIcon?: string;
    path?: string;
};

type ActionItem = {
    key: string;
    label: string;
    icon: string;
    path?: string;
};

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const visible = ref(false);
const isShowDialog = ref(false);
const restReasonPopupVisible = ref(false);
const status = ref<UserStatus>('offline');
const logicStatus = ref<LogicStatus>('');
const reason = ref('');
const staffName = ref('');
const userId = ref('');
const mobile = ref('');
const staffAvatar = ref('');
const skillGroupIds = ref<string[]>([]);
const connectionState = ref<ConnectionState>('disconnected');
const restReasonList = ref<RestReasonItem[]>([]);
const skillGroupNameMap = ref<SkillGroupNameMap>({});
const receptionLimit = ref<number | null>(null);
const receptionLimitDraft = ref('');
const isEditingReceptionLimit = ref(false);
const isUpdatingReceptionLimit = ref(false);
const enableModifySelfReceptionLimit = ref(0);
const receptionLimitInputRef = ref<HTMLInputElement | null>(null);

const actions = computed<ActionItem[]>(() => [
    { key: 'changePassword', label: t('修改密码'), icon: modifyPasswordIcon, path: '/mobileDesk/mine/changePassword' },
    { key: 'logout', label: t('退出登录'), icon: logoutIcon },
]);

onMounted(async () => {
    await loadSkillGroupList();
    AIDeskCoreInstance.coreStore.watch(StoreName.USERINFO, {
        status: onStatusUpdated,
        logicStatus: onLogicStatusUpdated,
        reason: onReasonUpdated,
        staffAvatar: onStaffAvatarUpdated,
        nickname: onNicknameUpdated,
        connectionState: onConnectionStateUpdated,
        skillGroupId: onSkillGroupIdUpdated,
        userId: onUserIdUpdated,
        mobile: onMobileUpdated,
    });
    AIDeskCoreInstance.coreStore.watch(StoreName.APP_SETTING, {
        restReasonList: onRestReasonListUpdated,
        enableModifySelfReceptionLimit: onEnableModifySelfReceptionLimitUpdated,
    });
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.USERINFO, {
        status: onStatusUpdated,
        logicStatus: onLogicStatusUpdated,
        reason: onReasonUpdated,
        staffAvatar: onStaffAvatarUpdated,
        nickname: onNicknameUpdated,
        connectionState: onConnectionStateUpdated,
        skillGroupId: onSkillGroupIdUpdated,
        userId: onUserIdUpdated,
        mobile: onMobileUpdated,
    });
    AIDeskCoreInstance.coreStore.unwatch(StoreName.APP_SETTING, {
        restReasonList: onRestReasonListUpdated,
        enableModifySelfReceptionLimit: onEnableModifySelfReceptionLimitUpdated,
    });
});

const showSubPage = computed(() => route.path !== '/mobileDesk/mine');

const enabledRestReasonList = computed(() => {
    return restReasonList.value.filter((item) => item.state === '1');
});

const isFreeSelected = computed(() => {
    return status.value === 'free' && logicStatus.value === 'ready';
});

const isNotReadySelected = computed(() => {
    return status.value === 'busy'
        ? logicStatus.value === 'notReady'
        : status.value === 'notReady';
});

const isRestSelected = computed(() => {
    return status.value === 'busy'
        ? logicStatus.value === 'rest'
        : status.value === 'rest';
});

const statusOptions = computed<StatusOption[]>(() => {
    if (connectionState.value === 'connected') {
        return [
            {
                key: 'free',
                value: 'free',
                label: t('示闲'),
                color: '#00B42A',
                selected: isFreeSelected.value,
            },
            {
                key: 'notReady',
                value: 'notReady',
                label: t('示忙'),
                color: '#E54545',
                selected: isNotReadySelected.value,
            },
            {
                key: 'rest',
                value: 'rest',
                label: t('小休'),
                color: '#FF7D00',
                selected: isRestSelected.value,
                showArrow: enabledRestReasonList.value.length > 0,
            },
            {
                key: 'offline',
                value: 'offline',
                label: t('下线'),
                color: '#A5A9B0',
                selected: status.value === 'offline',
            },
        ];
    }

    if (connectionState.value === 'disconnected') {
        return [
            {
                key: 'online',
                value: 'free',
                label: t('上线'),
                color: '#00B42A',
                selected: false,
            },
            {
                key: 'offline',
                value: 'offline',
                label: t('下线'),
                color: '#A5A9B0',
                selected: status.value === 'offline',
            },
        ];
    }

    return [];
});

const currentStatus = computed(() => {
    if (connectionState.value === 'disconnected') {
        return {
            label: t('下线'),
            color: '#A5A9B0',
        };
    }

    if (isRestSelected.value) {
        return {
            label: t('小休'),
            color: '#FF7D00',
        };
    }

    if (isNotReadySelected.value) {
        return {
            label: t('示忙'),
            color: '#E54545',
        };
    }

    if (isFreeSelected.value) {
        return {
            label: t('示闲'),
            color: '#00B42A',
        };
    }

    return {
        label: t('下线'),
        color: '#A5A9B0',
    };
});

const skillGroupText = computed(() => {
    return skillGroupIds.value
        .map((skillGroupId) => skillGroupNameMap.value[String(skillGroupId)] || '')
        .filter(Boolean)
        .join('、');
});

const infoItems = computed<InfoItem[]>(() => [
    { key: 'name', label: t('姓名'), value: staffName.value },
    { key: 'email', label: t('邮箱'), value: userId.value },
    { key: 'skillGroup', label: t('技能组'), value: skillGroupText.value },
    { key: 'role', label: t('角色'), value: t('在线客服') },
    ...(enableModifySelfReceptionLimit.value === 1 ? [{
        key: 'receptionLimit',
        label: t('接待上限'),
        value: receptionLimit.value === null ? '--' : String(receptionLimit.value),
        unit: t('人'),
        actionIcon: modifyTelIcon,
    }] : []),
    {
        key: 'mobile',
        label: t('手机号'),
        value: mobile.value || '--',
        // actionIcon: modifyTelIcon,
        // path: '/mobileDesk/mine/changePhone',
    },
]);

const loadSkillGroupList = async () => {
    try {
        const res = await AIDeskCoreInstance.sessionService.getSkillGroupList({
            skillGroupType: 1,
        });
        const list = res.skillGroupList ?? [];
        skillGroupNameMap.value = list.reduce((map, item) => {
            map[String(item.skillGroupId)] = item.skillGroupName;
            return map;
        }, {} as SkillGroupNameMap);
    } catch (e) {
        console.error('loadSkillGroupList error', e);
    }
};

const loadSeatReceptionLimit = async () => {
    try {
        const limit = await AIDeskCoreInstance.userInfoService.getSeatReceptionLimit();
        receptionLimit.value = typeof limit === 'number' && limit >= 0 ? limit : 0;
    } catch (e) {
        console.error('loadSeatReceptionLimit error', e);
        receptionLimit.value = null;
    }
};

const onStatusUpdated = (newStatus: UserStatus) => {
    status.value = newStatus ?? 'offline';
};

const onLogicStatusUpdated = (newLogicStatus: LogicStatus) => {
    logicStatus.value = newLogicStatus ?? '';
};

const onReasonUpdated = (newReason: string) => {
    reason.value = newReason ?? '';
};

const onNicknameUpdated = (newNickname: string) => {
    staffName.value = newNickname || '--';
};

const onStaffAvatarUpdated = (newStaffAvatar: string) => {
    staffAvatar.value = newStaffAvatar ?? '';
};

const onConnectionStateUpdated = (newConnectionState: ConnectionState) => {
    connectionState.value = newConnectionState ?? 'disconnected';
};

const onRestReasonListUpdated = (newRestReasonList: RestReasonItem[]) => {
    restReasonList.value = Array.isArray(newRestReasonList) ? newRestReasonList : [];
};

const onEnableModifySelfReceptionLimitUpdated = (value: number) => {
    const wasEnabled = enableModifySelfReceptionLimit.value === 1;
    enableModifySelfReceptionLimit.value = value ?? 0;
    if (!wasEnabled && enableModifySelfReceptionLimit.value === 1) {
        void loadSeatReceptionLimit();
    }
    if (enableModifySelfReceptionLimit.value !== 1) {
        isEditingReceptionLimit.value = false;
    }
};

const onSkillGroupIdUpdated = (newSkillGroupId: string[]) => {
    skillGroupIds.value = Array.isArray(newSkillGroupId) ? newSkillGroupId : [];
};

const onUserIdUpdated = (newUserId: string) => {
    userId.value = newUserId ?? '';
};

const onMobileUpdated = (newMobile: string) => {
    mobile.value = newMobile;
};

const handleVisibleChange = (value: boolean) => {
    visible.value = value;
    if (!value) {
        restReasonPopupVisible.value = false;
    }
};

const handleSetStatus = (nextStatus: 'offline' | 'free' | 'rest' | 'notReady', restReason?: string) => {
    AIDeskCoreInstance.userInfoService.setStatus({
        status: nextStatus,
        restReason,
    });
};

const handleStatusSelect = (selectedStatus: StatusOption) => {
    if (selectedStatus.value === 'rest' && enabledRestReasonList.value.length > 0) {
        restReasonPopupVisible.value = !restReasonPopupVisible.value;
        return;
    }

    if (selectedStatus.key === 'online') {
        AIDeskCoreInstance.userInfoService.online();
        restReasonPopupVisible.value = false;
        visible.value = false;
        return;
    }

    if (selectedStatus.value === 'offline') {
        AIDeskCoreInstance.userInfoService.offline();
        restReasonPopupVisible.value = false;
        visible.value = false;
        return;
    }

    handleSetStatus(selectedStatus.value);
    restReasonPopupVisible.value = false;
    visible.value = false;
};

const handleRestReasonSelect = (restReason: string) => {
    handleSetStatus('rest', restReason);
    restReasonPopupVisible.value = false;
    visible.value = false;
};

const isRestReasonSelected = (restReasonName: string) => {
    return isRestSelected.value && reason.value === restReasonName;
};

const handleReceptionLimitInput = (event: Event) => {
    const target = event.target as HTMLInputElement;
    const nextValue = target.value.replace(/\D/g, '').slice(0, 3);
    receptionLimitDraft.value = nextValue;
    target.value = nextValue;
};

const handleReceptionLimitCancel = () => {
    receptionLimitDraft.value = receptionLimit.value === null ? '' : String(receptionLimit.value);
    isEditingReceptionLimit.value = false;
};

const handleReceptionLimitSave = async () => {
    if (isUpdatingReceptionLimit.value) {
        return;
    }

    const trimmedValue = receptionLimitDraft.value.trim();
    if (trimmedValue === '') {
        toast.warn(t('请输入接待上限'));
        return;
    }

    const nextLimit = Number(trimmedValue);
    if (!Number.isInteger(nextLimit) || nextLimit < 0 || nextLimit > 999) {
        toast.warn(t('接待上限范围为0-999'));
        return;
    }

    try {
        isUpdatingReceptionLimit.value = true;
        await AIDeskCoreInstance.userInfoService.updateSeatReceptionLimit(nextLimit);
        receptionLimit.value = nextLimit;
        isEditingReceptionLimit.value = false;
        toast.success(t('修改后约3分钟生效'));
    } catch (e) {
        console.error('updateSeatReceptionLimit error', e);
        toast.error(t('接待上限修改失败'));
    } finally {
        isUpdatingReceptionLimit.value = false;
    }
};

const handleInfoAction = async (item: InfoItem) => {
    if (item.key === 'receptionLimit') {
        receptionLimitDraft.value = receptionLimit.value === null ? '' : String(receptionLimit.value);
        isEditingReceptionLimit.value = true;
        await nextTick();
        receptionLimitInputRef.value?.focus();
        receptionLimitInputRef.value?.select();
        return;
    }

    if (!item.path) {
        return;
    }

    if (item.path === '/mobileDesk/mine/changePhone') {
        router.push({
            path: item.path,
            query: {
                originalPhoneNumber: mobile.value || '',
            },
        });
        return;
    }

    router.push(item.path);
};

const handleActionClick = (action: ActionItem) => {
    if (action.key === 'logout') {
        isShowDialog.value = true;
        return;
    }

    if (!action.path) {
        return;
    }

    router.push(action.path);
};

const onCancel = () => {
    isShowDialog.value = false;
};

const onConfirm = () => {
    isShowDialog.value = false;
    router.replace('/login').then(() => {
        AIDeskCoreInstance.destroy();
    });
};
</script>

<style scoped>
.mine-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

.mine-page-main {
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.page-header {
    height: 56px;
    margin: -16px -16px 12px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #fff;
    box-sizing: border-box;
}

.page-title {
    color: #1d2129;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgb(15 23 42 / 6%);
}

.card+.card {
    margin-top: 12px;
}

.profile-card {
    padding: 18px 16px;
}

.profile-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f3ff 0%, #d7e8ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-icon {
    width: 26px;
    height: 26px;
    fill: #1d2129;
}

.profile-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-top-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-name {
    min-width: 0;
    flex: 1;
    color: #1d2129;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-skill-groups {
    min-width: 0;
    color: #86909c;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-trigger {
    min-width: 88px;
    max-width: 100%;
    height: 26px;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1d2129;
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.status-trigger-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-trigger-text {
    max-width: 120px;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-trigger-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.custom__list {
    width: max-content;
    padding: 0;
    border-radius: 12px;
    background: #fff;
}

.custom__list> :deep(.t-popup__reference) {
    display: block;
    width: 100%;
}

.status-option-wrapper {
    display: block;
    width: 100%;
}

.status-option {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #000;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: none;
    border-radius: 6px;
    margin-bottom: 2px;
}

.status-option:last-child {
    margin-bottom: 0;
}

.status-option:hover,
.status-option:active {
    background: #fff;
}

.status-option--active {
    background: #f0f2f7ff !important;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-option-text {
    flex: 0 0 auto;
    color: #000;
    line-height: 20px;
    text-align: left;
}

.status-option-arrow {
    margin-left: auto;
    color: #86909c;
    font-size: 14px;
    line-height: 1;
}

.rest-reason-list {
    max-height: 240px;
    overflow-y: auto;
}

.rest-reason-option {
    width: 100%;
    padding: 0 14px;
}

.info-card {
    padding: 0 16px;
}

.info-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #f2f3f5;
}

.info-row:last-child {
    border-bottom: none;
}

.info-content {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
}

.info-label {
    width: 56px;
    flex-shrink: 0;
    color: #86909c;
    font-size: 14px;
    line-height: 22px;
}

.info-value {
    min-width: 0;
    color: #1d2129;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
}

.info-content--editing {
    grid-template-columns: 56px minmax(0, 1fr);
}

.reception-limit-editor {
    min-width: 0;
}

.reception-limit-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dcdfe5;
    border-radius: 8px;
    box-sizing: border-box;
    color: #1d2129;
    font-size: 15px;
    line-height: 22px;
    background: #fff;
    outline: none;
}

.reception-limit-input:focus {
    border-color: #0052d9;
}

.info-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.info-unit {
    color: #86909c;
    font-size: 14px;
    line-height: 22px;
}

.text-action-button {
    padding: 0;
    border: none;
    background: transparent;
    color: #86909c;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
}

.text-action-button--primary {
    color: #0052d9;
}

.text-action-button:disabled {
    color: #c9cdd4;
    cursor: not-allowed;
}

.icon-action-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E6E9F0;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.icon-action-button img {
    width: 12px;
    height: 12px;
    display: block;
}

.action-card {
    padding: 0 16px;
}

.action-row {
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #f2f3f5;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.action-row:last-child {
    border-bottom: none;
}

.action-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.action-text {
    color: #1d2129;
    font-size: 15px;
    line-height: 22px;
}

.logout-dialog-content {
    padding: 16px 16px 0;
}

.logout-dialog-text {
    color: #1d2129;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
}

.logout-dialog-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.logout-dialog-button {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}

.logout-dialog-button--cancel {
    background: #F0F2F7;
    color: #000;
}

.logout-dialog-button--confirm {
    background: #000;
    color: #fff;
}
</style>