/**
 * 子比子主题 - 邮箱后缀选择器（共享组件样式）
 *
 * 注册（email-suffix）与登录（login-mode）共用同一套视觉：
 *   - 触发区没有边框/背景，只有灰色文字 + 小三角 + 一条细分隔线；
 *   - 面板是独立卡片（挂在 body 上、position:fixed），不会被弹窗裁剪；
 *   - 颜色全部引用父主题 CSS 变量，自动跟随夜间模式。
 */

/* 给后缀选择器让出位置，避免前缀文字被压在按钮下面。
 * 特异性 0-3-0，高于父主题 .sign .line-form-input（0-2-0）与
 * .line-form-input（0-1-0），无需 !important。 */
.line-form input.line-form-input.zic-email-prefix {
    padding-right: 132px;
}

/* 宽度由内容自然撑开（见 JS 的 fitTrigger），上限由 max-width 兜底：
 * 极长后缀最多占输入框 62%，保证前缀还有地方输入。 */
.zic-es {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 62%;
    display: flex;
    align-items: center;
    padding-left: 8px;
    white-space: nowrap;
    z-index: 2;
}

/* 与左侧输入区之间的细分隔线 */
.zic-es::before {
    content: "";
    width: 1px;
    height: 14px;
    margin-right: 8px;
    background: var(--main-border-color, rgba(0, 0, 0, 0.12));
}

.zic-es-trigger {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-2-color, #999);
    font-size: 14px;
    /* ⚠️ 不能用 line-height:1：字体不同时字形高度会略大于 1em，
     *    配合 .zic-es-value 的 overflow:hidden 会把文字下半截裁掉。 */
    line-height: 1.6;
    cursor: pointer;
    outline: none;
    transition: color 0.2s, background 0.2s;
}

.zic-es-trigger:hover,
.zic-es.is-open .zic-es-trigger {
    color: var(--focus-color, #3ca5f6);
    background: rgba(128, 128, 128, 0.1);
}

.zic-es-value.is-placeholder {
    opacity: 0.85;
}

/* 已选中：触发器文字直接用主题高亮色（日夜间自动跟随），
 * 一眼区分「还没选」和「已选」，不再依赖悬停才变色。 */
.zic-es-value:not(.is-placeholder) {
    color: var(--theme-color, var(--focus-color, #3ca5f6));
}

/* 不再写死 max-width：宽度由 JS 按文本实测并动态调整输入框 padding-right
 * （旧版 96/104px 会把 @protonmail.com 这类长域名截断成省略号）。
 * ellipsis 仅作极端情况兜底；完整值始终在 trigger 的 title 上。
 * 行高必须留足，否则 overflow:hidden 会裁切字形（下方被“拦腰截断”）。 */
.zic-es-value {
    display: block;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zic-es-caret {
    width: 0;
    height: 0;
    margin-left: 5px;
    margin-top: 1px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s;
}

.zic-es.is-open .zic-es-caret {
    transform: rotate(180deg);
}

/* 下拉面板：挂在 body 上，fixed 定位，由 JS 计算位置。
 * 宽度由 JS 按最长选项自适应（见 email-suffix.js / login-mode.js 的 placeMenu），
 * 因此横向永不溢出 —— overflow-x:hidden 只是双保险。
 * 纵向滚动条自绘成 4px 细圆角条：系统默认滚动条在夜间模式下是
 * 白底黑箭头，裸露在暗色面板上极其刺眼（用户实测吐槽）。 */
.zic-es-menu {
    position: fixed;
    z-index: 2000;
    display: none;
    box-sizing: border-box;
    min-width: 132px;
    max-width: calc(100vw - 16px);
    max-height: 264px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3px;
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, rgba(0, 0, 0, 0.08));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.zic-es-menu::-webkit-scrollbar {
    width: 4px;
}

.zic-es-menu::-webkit-scrollbar-track {
    background: transparent;
}

.zic-es-menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.35);
}

.zic-es-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.55);
}

/* 左右内边距从 14px 收到 10px：与触发器的留白对齐，不再显得四周空荡。
 * 超长域名用 ellipsis 省略（完整值在 title 上），绝不撑宽面板。 */
.zic-es-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--main-color, #333);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.zic-es-item:hover {
    background: rgba(128, 128, 128, 0.12);
}

/* 选中态：只用主题色文字高亮（跟随用户自定义主题色，日夜间自动切换）。
 * 不再加任何附加装饰：
 *   · 无 ✓ 对钩（float:right 白占右侧宽度，是把长域名挤出面板的帮凶）；
 *   · 无高亮背景色块（选中项已直接显示在上方触发器上，再加色块反而噪杂）；
 *   · 无左侧竖条（用户明确：有高亮就够了，不要花里胡哨）；
 *   · 刻意不加粗：粗体会把 @protonmail.com 这类长域名撑宽约 20%，
 *     在「面板宽度 = 触发器宽度」的约束下会被 ellipsis 截掉尾巴。 */
.zic-es-item.is-active {
    color: var(--theme-color, var(--focus-color, #3ca5f6));
}

@media (max-width: 479px) {
    .line-form input.line-form-input.zic-email-prefix {
        padding-right: 118px;
    }

    .zic-es-value {
        max-width: 88px;
    }

    .zic-es-trigger {
        font-size: 13px;
    }
}