/* 小头盔 common.css 域拆分（2026-10-21 整理批二）：原 2684 行单文件按域拆 8 文件，
   _header.blade 按原物理顺序全量引入——层叠语义 100% 等价（行区间连续切分），
   改某域样式不再碰其他域文件。本文件域：弹层域：消息/确认/绑机 Modal/国家区号下拉）*/

/* ===== 消息 Modal ===== */
/* 2026-09-19 用户反馈：消息框加大到 ~800px（min() 自适应小屏不溢出）。
   宽度归 .modal-dialog 管（hc-msg-modal 挂在 content 上管皮肤） */
#hcMsgModal .modal-dialog {
    max-width:min(800px, calc(100vw - 32px));
}

.hc-msg-modal {
    border:none;
    border-radius:var(--hc-radius-lg);
    overflow:hidden;
}

.hc-msg-modal .modal-header {
    background:var(--hc-grad-deep);
    color:var(--hc-on-brand);
    border:none;
    padding:16px 20px;
}

.hc-msg-modal .modal-title {
    font-size:16px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}

.hc-msg-modal .modal-title .ali-icon { font-size:18px; }

.hc-msg-modal .btn-close {
    filter:brightness(0) invert(1);
    opacity:0.7;
}

.hc-msg-modal .modal-body { padding:32px 20px; }

.hc-msg-empty {
    text-align:center;
    color:var(--hc-text-muted);
}

.hc-msg-empty-icon {
    width:56px;
    height:56px;
    margin:0 auto 12px;
    background:var(--hc-bg-alt);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hc-msg-empty-icon .ali-icon,
.hc-msg-empty-icon .hc-emoji {
    font-size:28px;
    color:var(--hc-text-muted);
}

.hc-msg-empty p {
    font-size:14px;
    margin:0;
}

/* 消息中心：工单回复列表（客服已回复待查看） */
.hc-msg-list {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.hc-msg-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--hc-border);
    border-radius:var(--hc-radius);
    text-decoration:none;
    transition:border-color .15s ease, background .15s ease;
}

.hc-msg-item:hover {
    border-color:var(--hc-primary);
    background:var(--hc-bg-alt);
}

.hc-msg-item-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--hc-primary);
    flex-shrink:0;
}

.hc-msg-item-main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hc-msg-item-main b {
    font-size:13.5px;
    font-weight:600;
    color:var(--hc-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hc-msg-item-main time {
    font-size:11px;
    color:var(--hc-text-muted);
}

.hc-msg-item-state {
    flex-shrink:0;
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:var(--hc-radius-full);
    background:var(--hc-primary-50);
    color:var(--hc-primary-dark);
}

/* 查看全部工单（消息弹窗底入口，2026-10-02 双端对称补缺） */
.hc-msg-view-all {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-top:10px;
    padding:9px 0;
    font-size:12.5px;
    font-weight:600;
    color:var(--hc-primary-dark);
    text-decoration:none;
    border-top:1px solid var(--hc-border);
    transition:background .15s;
}

.hc-msg-view-all:hover {
    background:var(--hc-primary-50);
}

/* ===== 通用确认 Modal（退出登录等） ===== */
.hc-confirm-modal {
    border:none;
    border-radius:var(--hc-radius-lg);
    overflow:hidden;
    text-align:center;
}

.hc-confirm-modal .modal-body {
    padding:28px 24px 24px;
    position:relative;
}

.hc-confirm-close {
    position:absolute;
    top:12px;
    right:12px;
    opacity:.35;
}

.hc-confirm-icon {
    width:56px;
    height:56px;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--hc-primary-50);
    display:flex;
    align-items:center;
    justify-content:center;
}

.hc-confirm-icon .ali-icon,
.hc-confirm-icon .hc-emoji {
    font-size:28px;
    line-height:1;
}

.hc-confirm-title {
    font-size:16px;
    font-weight:600;
    color:var(--hc-text);
    margin:0 0 22px;
    line-height:1.5;
}

.hc-confirm-actions {
    display:flex;
    gap:12px;
}

.hc-confirm-btn {
    flex:1;
    height:42px;
    border-radius:var(--hc-radius);
    font-size:14px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--hc-transition);
    border:1px solid var(--hc-border);
}

.hc-confirm-cancel {
    background:var(--hc-surface);
    color:var(--hc-text-secondary);
}

.hc-confirm-cancel:hover {
    background:var(--hc-bg-alt);
    color:var(--hc-text);
}

.hc-confirm-danger {
    background:var(--hc-danger);
    color:var(--hc-on-brand);
    border-color:var(--hc-danger);
}

.hc-confirm-danger:hover {
    background:var(--hc-danger-900);
    color:var(--hc-on-brand);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(225, 29, 72, 0.3);
}

/* 主操作变体（2026-10-20 新人礼包弹窗启用；此前确认弹窗只有 danger/cancel 两档，
   正向主 CTA 一直缺位——品牌渐变 + 悬浮上浮，与 danger 档动效同构） */
.hc-confirm-primary {
    background:var(--hc-grad);
    color:var(--hc-on-brand);
    border:none;
}

.hc-confirm-primary:hover {
    background:var(--hc-grad-hover);
    color:var(--hc-on-brand);
    transform:translateY(-1px);
    box-shadow:var(--hc-shadow-primary);
}

/* 标题下的说明正文（icon+title+text+buttons 四件套；纯 title 弹窗不受影响） */
.hc-confirm-text {
    font-size:14px;
    line-height:1.65;
    color:var(--hc-text-secondary);
    margin:-12px 0 22px;
}

/* ===== 绑定手机号 Modal ===== */
.hc-bind-modal .modal-header {
    border-bottom:1px solid var(--hc-line-9);
    padding:18px 24px;
}
.hc-bind-modal .hc-bind-title {
    font-size:16px;
    font-weight:600;
    color:var(--hc-text);
    display:flex;
    align-items:center;
    gap:8px;
}
.hc-bind-modal .hc-bind-title .ali-icon {
    color:var(--hc-primary);
    font-size:20px;
}
.hc-bind-body {
    padding:24px;
}
.hc-bind-modal-sub {
    font-size:13px;
    color:var(--hc-text-muted);
    margin-bottom:18px;
    text-align:center;
}
.hc-bind-mock-tip {
    background:var(--hc-warning-50);
    border:1px solid var(--hc-warning-300);
    color:var(--hc-warning-800);
    padding:10px 14px;
    border-radius:8px;
    font-size:12px;
    margin-bottom:16px;
    line-height:1.6;
}
.hc-bind-error {
    background:var(--hc-danger-50);
    border:1px solid var(--hc-danger-300);
    color:var(--hc-danger-800);
    padding:10px 14px;
    border-radius:8px;
    font-size:13px;
    margin-bottom:16px;
}
.hc-bind-row {
    display:flex;
    gap:10px;
    margin-bottom:14px;
}
.hc-bind-select {
    flex:0 0 140px;
    padding:11px 10px;
    border:1px solid var(--hc-border);
    border-radius:10px;
    font-size:13px;
    background:var(--hc-bg-3);
    color:var(--hc-text);
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:26px;
}
/* ===== 国家区号自绘下拉（2026-10-16；原生 <select> 弹层 OS 渲染纯白，接管全部视觉） ===== */
.hc-country-dd { position:relative; flex:0 0 140px; }
.hc-country-dd .hc-country-btn {
    display:flex; align-items:center; width:100%;
    text-align:left; cursor:pointer;
    font:inherit; /* 跟随表单字号（auth.css 页内覆写 14.5px/48px 不失真） */
    transition:border-color .15s, box-shadow .15s;
}
.hc-country-dd .hc-country-btn:focus-visible {
    outline:none; border-color:var(--hc-primary);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
.hc-country-dd .hc-country-cur {
    display:inline-flex; align-items:center; gap:6px;
    min-width:0; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hc-country-dd .hc-country-cur em {
    font-style:normal; color:var(--hc-primary); font-weight:700; line-height:1;
    /* 数字字形无降部、体块偏行盒上部（像素实测偏上 2px）——UI 字体度量
       确定，1px 下移与代码徽章（实测 -0.5px）对成一条视觉中线 */
    transform:translateY(1px);
}
/* 国家代码徽章（2026-10-16 二次返工：国旗 emoji 在 Windows 被渲染成字母且
   emoji 字体字形挂在行盒底部——像素实测缩写偏下 1.5px、区号偏上 2px，flex
   居中救不了字体度量。改用 UI 字体大写代码，度量确定、全平台一致） */
.hc-country-dd .hc-country-cur .hc-country-flag {
    font-size:15px; font-weight:800; letter-spacing:.5px; line-height:1;
    color:var(--hc-text);
}
.hc-country-dd .hc-country-panel {
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:1065;
    min-width:100%; width:max-content; max-width:min(300px, calc(100vw - 48px));
    max-height:264px; overflow-y:auto; overscroll-behavior:contain;
    padding:6px; border:1px solid var(--hc-border); border-radius:12px;
    background:var(--hc-surface); box-shadow:0 12px 32px rgba(0,0,0,.22);
}
.hc-country-dd.open .hc-country-panel { display:block; }
.hc-country-dd.open .hc-country-btn { border-color:var(--hc-primary); }
.hc-country-opt {
    display:flex; align-items:center; gap:9px; width:100%;
    padding:9px 12px; border:0; border-radius:8px;
    background:transparent; color:var(--hc-text); font:inherit; font-size:13px;
    text-align:left; cursor:pointer; white-space:nowrap;
}
.hc-country-opt:hover, .hc-country-opt.active { background:var(--hc-primary-50); }
.hc-country-opt.selected { color:var(--hc-primary); font-weight:700; }
.hc-country-opt.selected::after {
    content:"✓"; margin-left:auto; padding-left:12px; font-weight:700; line-height:1;
}
/* 三段同 UI 字体 + line-height:1，字形度量一致，flex 居中即真居中 */
.hc-country-opt .hc-country-flag {
    flex:0 0 34px; font-size:12.5px; font-weight:800; letter-spacing:.5px; line-height:1;
    color:var(--hc-text-2, var(--hc-text));
}
.hc-country-opt .hc-country-dial { flex:0 0 auto; color:var(--hc-primary); font-weight:700; min-width:38px; line-height:1; }
.hc-country-opt .hc-country-name { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; color:var(--hc-text-2, var(--hc-text)); line-height:1.2; }

.hc-bind-input {
    flex:1;
    min-width:0; /* input 内在宽（size 默认 20 字符 ≈221px）阻止 flex 收缩——2026-10-19 窄屏 415px 撑破的元凶 */
    padding:11px 14px;
    border:1px solid var(--hc-border);
    border-radius:10px;
    font-size:14px;
    color:var(--hc-text);
    transition:border-color .15s;
}
.hc-bind-input:focus {
    outline:none;
    border-color:var(--hc-primary);
}
.hc-bind-code-row {
    display:flex;
    gap:10px;
    margin-bottom:18px;
}
.hc-bind-code-input {
    flex:1;
    min-width:0; /* 同 hc-bind-input：防 input 内在宽阻止收缩 */
    padding:11px 14px;
    border:1px solid var(--hc-border);
    border-radius:10px;
    font-size:14px;
    letter-spacing:4px;
    text-align:center;
    color:var(--hc-text);
}
.hc-bind-code-input:focus {
    outline:none;
    border-color:var(--hc-primary);
}
.hc-bind-send-btn {
    flex:0 0 130px;
    padding:11px;
    background:var(--hc-primary-100);
    color:var(--hc-primary);
    border:1px solid var(--hc-primary);
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all .15s;
}
.hc-bind-send-btn:hover:not(:disabled) {
    background:var(--hc-primary);
    color:var(--hc-on-brand);
}
.hc-bind-send-btn:disabled {
    opacity:.5;
    cursor:not-allowed;
}
.hc-bind-submit {
    width:100%;
    padding:12px;
    background:var(--hc-grad);
    color:var(--hc-on-brand);
    border:none;
    border-radius:10px;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
}
.hc-bind-submit:hover:not(:disabled) {
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(124, 58, 237, 0.35);
}
.hc-bind-submit:disabled {
    opacity:.6;
    cursor:not-allowed;
}