/**
 * Renon AI Chat Widget v2.7.0 - CSS
 * 主题 header 登录按钮 + 会员登录/注册弹窗 + 右下角 AI 对话
 */

/* ================================================================
   主题 header 中已登录用户区
   ================================================================ */

/* 已登录容器（在 .menu_top_right_item 内部，与 Login 同级） */
.renon-user-area {
    position: relative;
    display: flex;
    align-items: center;
}

/* 用户名触发按钮 — 继承 .menu_top_right a 的样式 */
.renon-user-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.4rem;
    user-select: none;
}

.renon-user-trigger i {
    margin-right: 0.6rem;
    font-size: var(--font-14);
}

.renon-user-trigger i:last-child {
    margin-right: 0;
    margin-left: 0.2rem;
    font-size: var(--font-12);
}

/* 用户名文字 */
#renon-display-name {
    font-size: var(--font-16);
}

/* 用户头像（登录成功后替换默认图标） */
.renon-user-trigger img.renon-user-avatar-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

/* 下拉菜单 */
.renon-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    min-width: 12rem;
    background: var(--bg-black);
    border: 0.1rem solid rgba(255,255,255,0.15);
    border-radius: 0.4rem;
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.5);
    z-index: 1200;
    padding: 0.4rem 0;
}

.renon-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.6rem;
    color: var(--font-white-color);
    font-size: var(--font-14);
    white-space: nowrap;
    transition: background 0.2s ease;
}

.renon-dropdown-menu a:hover {
    background: rgba(255,255,255,0.08);
    color: var(--font-active-color);
}

/* ================================================================
   右下角 AI 对话按钮
   ================================================================ */

.renon-chat-bubble {
    position: fixed;
    bottom: 14.5rem;
    right: .8rem;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: var(--font-active-color, #5ab546);
    color: #fff;
    box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
}

.renon-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 0.6rem 2rem rgba(0,0,0,0.35);
}

.renon-chat-bubble svg {
    width: 2.6rem;
    height: 2.6rem;
}

/* ================================================================
   对话窗口
   ================================================================ */

.renon-chat-window {
    position: fixed;
    bottom: 21rem;
    right: 1rem;
    width: 40rem;
    height: 60rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 16rem);
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 0.8rem 3rem rgba(0,0,0,0.2);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 窗口标题栏（可拖动） */
.renon-chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem;
    height: 4.8rem;
    min-height: 4.8rem;
    background: var(--font-active-color, #5ab546);
    color: #fff;
    flex-shrink: 0;
    font-size: 1.5rem;
    cursor: move;
    user-select: none;
    touch-action: none;
}

/* 最大化状态 */
.renon-chat-window.maximized {
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}

.renon-chat-window-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
}

.renon-chat-window-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.renon-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    transition: background 0.2s ease;
    padding: 0;
}

.renon-btn-icon:hover {
    background: rgba(255,255,255,0.2);
}

.renon-btn-icon svg {
    display: block;
}

/* iframe 容器 */
.renon-chat-window-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

#renon-chat-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* iframe 加载动画：覆盖在 iframe 上方，加载完成后由 JS 移除 .is-active */
.renon-chat-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 2;
}

.renon-chat-loading.is-active {
    display: flex;
}

.renon-chat-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.renon-chat-spinner {
    width: 2.8rem;
    height: 2.8rem;
    border: .2rem solid rgba(0, 0, 0, .08);
    border-top-color: #5ab546;
    border-radius: 50%;
    animation: renon-chat-spin .8s linear infinite;
}

.renon-chat-loading-text {
    font-size: 1.2rem;
    color: #999;
}

@keyframes renon-chat-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================================================
   登录弹窗内样式
   ================================================================ */

/* 无标题弹窗：顶部为登录/注册双 Tab，左右留白承载表单 */
.renon-login-popup {
    padding: 1rem 2rem 1.6rem;
    /* 小屏/注册表单内容超高时弹窗内部滚动，避免超出视口 */
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

/* 字段标签：位于输入框上方 */
.renon-field-label {
    display: block;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #333;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-left: 0.1rem;
    font-weight: bold;
}

.renon-login-popup .layui-form-item {
    margin-bottom: 2rem;
    width: 100%;
}

.renon-login-popup .layui-input-block {
    margin-left: 0;
    width: 100%;
}

.renon-login-popup .layui-input {
    height: 4rem;
    line-height: 4rem;
    font-size: 1.4rem;
    width: 100%;
    box-sizing: border-box;
}

/* 输入框 + 图标容器 */
.renon-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.renon-input-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

/* layui lay-affix 生成的裹层也需要 100% 宽度 */
.renon-login-popup .layui-input-wrap ,.renon-login-popup .layui-form-select{
    width: 100% !important;
}

.renon-login-popup .layui-input.renon-input-with-icon ,.renon-login-popup .layui-form-select .layui-input{
    padding-left: 3.6rem;
}

/* 登录按钮 */
.renon-login-popup #renon-login-submit {
    background-color: #5ab546;
    border-color: #5ab546;
}

.renon-login-popup #renon-login-submit:hover {
    background-color: #4a9a38;
    border-color: #4a9a38;
}

/* ================================================================
   会员登录 / 会员注册 Tabs
   ================================================================ */

/* 登录/注册并排置于弹窗顶部 */
.renon-auth-tabs .layui-tab-title {
    display: flex;
    border-bottom: 0.1rem solid #eee;
    margin-bottom: 3rem;
}

.renon-auth-tabs .layui-tab-title li {
    flex: 1;
    text-align: center;
    font-size: 1.6rem;
    color: #666;
    padding: 0 0 1.2rem;
    margin-right: 0;
    font-weight: bold;
}

.renon-auth-tabs .layui-tab-title li.layui-this {
    color: #5ab546;
    font-weight: 600;
    position: relative;
}

.renon-auth-tabs .layui-tab-title .layui-this:after {
    background-color: #5ab546;
    height: 0.2rem;
    bottom: 0;
    top: auto;
}

.renon-auth-tabs .layui-tab-content {
    padding: 0;
}

/* 注册：发送验证码按钮 */
#renon-send-code {
    height: 4rem;
    flex-shrink: 0;
    white-space: nowrap;
    background-color: #5ab546;
    border-color: #5ab546;
}

#renon-send-code:hover {
    background-color: #4a9a38;
    border-color: #4a9a38;
}

#renon-send-code.layui-btn-disabled,
#renon-send-code[disabled] {
    background-color: #a9d6a2;
    border-color: #a9d6a2;
    color: #fff;
}

/* 注册按钮 */
.renon-login-popup #renon-register-submit {
    background-color: #5ab546;
    border-color: #5ab546;
}

.renon-login-popup #renon-register-submit:hover {
    background-color: #4a9a38;
    border-color: #4a9a38;
}

/* 验证码输入框 + 发送验证码按钮同一行时，输入框自适应宽度 */
.renon-login-popup .renon-reg-code-row .renon-input-wrap {
    flex: 1;
    min-width: 0;
}

/* ================================================================
   注册 Country 下拉（Choices.js 可搜索 + 国旗）
   ================================================================ */
.renon-login-popup .renon-country-wrap .choices {
    margin-bottom: 0;
    font-size: 1.4rem;
    width: 100%;
    flex: 1;
    min-width: 0;
}

/* 组件默认 inner 样式与项目输入框统一（左侧留出图标位置） */
.renon-login-popup .renon-country-wrap .choices__inner {
    min-height: 4rem;
    padding-left: 3.8rem;
    padding-right: 3rem;
    padding-top: 0;
    background-color: #fff;
    border: 0.1rem solid #e2e2e2;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
}

.renon-login-popup .renon-country-wrap .choices__inner:hover {
    border-color: #5ab546;
}

.renon-login-popup .renon-country-wrap .choices.is-focused .choices__inner {
    border-color: #5ab546;
    box-shadow: none;
}

/* 选中项（inner 左侧单行显示） */
.renon-login-popup .renon-country-wrap .choices__list--single {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
}

.renon-login-popup .renon-country-wrap .choices__list--single .choices__item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

/* 未选择国家时的占位提示（Select country）显示为浅灰 */
.renon-login-popup .renon-country-wrap .choices__list--single .choices__item.choices__placeholder,
.renon-login-popup .renon-country-wrap .choices__list--single .choices__item[data-value=""] {
    color: #999;
    font-weight: normal;
}

/* 国旗图片：下拉选项与选中项共用 */
.renon-login-popup .renon-country-wrap .renon-country-flag {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 0.8rem;
}

.renon-login-popup .renon-country-wrap .renon-country-flag img {
    width: 2rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: 0.2rem;
    vertical-align: middle;
}

/* 下拉列表：默认箭头隐藏，改为显示在输入框右侧的图标 */
.renon-login-popup .renon-country-wrap .choices[data-type*='select-one'] .choices__inner {
    padding-bottom: 0;
}

.renon-login-popup .renon-country-wrap .choices[data-type*='select-one']:after {
    right: 1.2rem;
    border-width: 0.5rem;
    border-color: #999 transparent transparent transparent;
}

.renon-login-popup .renon-country-wrap .choices[data-type*='select-one'].is-open:after {
    border-color: transparent transparent #999 transparent;
}

/* 搜索框（下拉顶部）与选项列表：
   样式绑定到 .renon-country-dd（JS 初始化时给面板添加的标记类）。
   面板保持在弹窗内向上弹出（Choices.js 交互事件绑定在 .choices 容器上，不能移出容器），
   打开时由 JS 按弹窗可见区限制列表高度，避免被 .renon-login-popup 的
   overflow-y:auto 裁掉顶部（等效 lay-append-to="body" 的可用性目标） */
.choices__list--dropdown.renon-country-dd {
    /* 向上弹出：面板浮在触发器上方（bottom:100%），与触发器留 0.2rem 间距 */
    top: auto;
    bottom: calc(100% + 0.2rem);
    border: 0.1rem solid #e2e2e2;
    border-radius: 0.2rem;
    font-size: 1.4rem;
    /* 弹窗内：盖住其上方的表单元素（只提升面板本身，避免压住输入框左侧图标） */
    z-index: 50;
}

.choices__list--dropdown.renon-country-dd .choices__list {
    max-height: 30rem;
}

.choices__list--dropdown.renon-country-dd .choices__input {
    font-size: 1.4rem;
}

.choices__list--dropdown.renon-country-dd .choices__item {
    display: flex;
    align-items: center;
}

/* 鼠标悬停/键盘上下移动选中选项：灰色高亮
   （:hover 为纯 CSS 兜底，不依赖 Choices.js 的 is-highlighted 类；键盘高亮仍走该类） */
.choices__list--dropdown.renon-country-dd .choices__item--selectable.is-highlighted,
.choices__list--dropdown.renon-country-dd .choices__item--selectable:hover {
    background-color: #f0f0f0;
}

.choices__list--dropdown.renon-country-dd .choices__item--selectable {
    padding-right: 1.2rem;
}

/* 组件无搜索结果提示 */
.choices__list--dropdown.renon-country-dd .choices__item--disabled {
    display: flex;
    align-items: center;
    opacity: 0.5;
}

/* ================================================================
   响应式
   ================================================================ */

@media (max-width: 480px) {
    .renon-chat-window {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .renon-chat-bubble {
        bottom: 1.6rem;
        right: 1.6rem;
        width: 4.8rem;
        height: 4.8rem;
    }

    .renon-dropdown-menu {
        right: -1rem;
    }
}

/* ================================================================
   登录弹窗验证码加载中：自绘 spinner（不依赖 layui 图标字体）
   ================================================================ */
.renon-captcha-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid #d8d8d8;
    border-top-color: #666;
    border-radius: 50%;
    flex-shrink: 0;
    animation: renon-captcha-spin 0.8s linear infinite;
}

@keyframes renon-captcha-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}