/* ========================================
   LDIS 响应式样式
   ======================================== */

/* CSS变量定义 */
:root {
    /* 导航栏尺寸 */
    --header-height: 60px;
    --header-height-mobile: 50px;
    --sidebar-width: 200px;
    --sidebar-width-tablet: 64px;
    --bottom-nav-height: 56px;

    /* 安全区域 */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========================================
   底部导航栏
   ======================================== */
.ldis-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e4e7ed;
}

.ldis-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #909399;
    text-decoration: none;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.ldis-bottom-nav-item i {
    font-size: 22px;
    margin-bottom: 2px;
}

.ldis-bottom-nav-item span {
    font-size: 11px;
}

.ldis-bottom-nav-item.active,
.ldis-bottom-nav-item:active {
    color: #409EFF;
}

/* ========================================
   更多菜单弹出层
   ======================================== */
.ldis-more-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    pointer-events: none;
}

.ldis-more-menu.show {
    display: block;
    pointer-events: auto;
}

.ldis-more-menu-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ldis-more-menu-content {
    position: absolute;
    bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.ldis-more-menu.show .ldis-more-menu-content {
    transform: translateY(0);
}

.ldis-more-menu-item {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    color: #303133;
    text-decoration: none;
}

.ldis-more-menu-item i {
    font-size: 20px;
    margin-right: 12px;
    color: #606266;
}

.ldis-more-menu-item:active {
    background: #f5f7fa;
}

.ldis-more-menu-divider {
    padding: 10px 24px 8px;
    font-size: 12px;
    color: #909399;
    border-top: 1px solid #ebeef5;
    margin-top: 8px;
}

/* ========================================
   平板端样式 (768px - 1024px)
   ======================================== */
@media screen and (max-width: 1024px) {
    /* 侧边栏收窄 */
    .ldis-sidebar {
        width: var(--sidebar-width-tablet);
    }

    .ldis-sidebar .ldis-logo {
        font-size: 14px;
        padding: 0 10px;
    }

    .ldis-menu-item span {
        display: none;
    }

    .ldis-menu-item {
        justify-content: center;
        padding: 0 10px;
    }

    .ldis-menu-item i {
        margin-right: 0;
        font-size: 20px;
    }

    /* 管理员菜单分组标题隐藏 */
    #adminMenuSection > div:first-child {
        display: none;
    }

    /* 内容区域调整 */
    .ldis-content {
        padding: 16px;
    }

    /* 统计卡片2列 */
    .stat-cards .el-col-6,
    .el-row .el-col-6 {
        width: 50% !important;
    }
}

/* ========================================
   手机端样式 (<768px)
   ======================================== */
@media screen and (max-width: 767px) {
    /* 隐藏桌面侧边栏 */
    .ldis-sidebar {
        display: none !important;
    }

    /* 显示底部导航栏 */
    .ldis-bottom-nav {
        display: flex !important;
    }

    /* 主应用容器调整 */
    .ldis-app {
        flex-direction: column;
    }

    /* 调整主内容区域 */
    .ldis-main {
        width: 100%;
    }

    /* 调整内容区padding，底部留出导航栏空间 */
    .ldis-content {
        padding: 12px;
        padding-bottom: calc(70px + var(--safe-area-bottom));
    }

    /* 调整顶部导航栏 */
    .ldis-header {
        height: var(--header-height-mobile);
        padding: 0 12px;
    }

    .ldis-header-title {
        font-size: 14px;
        max-width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ========== 表格响应式 ========== */
    .el-table {
        font-size: 13px;
    }

    /* 隐藏非必要列 */
    .el-table .hide-on-mobile {
        display: none !important;
    }

    .el-table th.hide-on-mobile,
    .el-table td.hide-on-mobile {
        display: none !important;
    }

    /* 操作列缩小 */
    .el-table .el-button--mini {
        padding: 5px 8px;
        font-size: 12px;
    }

    .el-table .el-button--mini + .el-button--mini {
        margin-left: 4px;
    }

    /* ========== 表单响应式 ========== */
    /* 内联表单改为垂直布局 */
    .el-form--inline .el-form-item {
        display: block;
        margin-right: 0;
        margin-bottom: 12px;
        width: 100%;
    }

    .el-form--inline .el-form-item .el-input,
    .el-form--inline .el-form-item .el-select,
    .el-form--inline .el-form-item .el-date-editor {
        width: 100% !important;
    }

    .el-form--inline .el-form-item .el-button {
        width: 100%;
    }

    /* 表单标签调整 */
    .el-form-item__label {
        text-align: left;
        float: none;
        display: block;
        padding-bottom: 4px;
    }

    .el-form-item__content {
        margin-left: 0 !important;
    }

    /* ========== 卡片响应式 ========== */
    .el-card {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .el-card__header {
        padding: 12px 16px;
    }

    .el-card__body {
        padding: 12px 16px;
    }

    /* ========== Element UI 栅格系统响应式 ========== */
    /* 强制覆盖 Element UI 的栅格宽度 - 使用更高优先级 */
    body .el-row,
    .ldis-content .el-row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    /* 所有 el-col 默认全宽 */
    body .el-row > .el-col,
    body .el-row > [class*="el-col-"],
    .ldis-content .el-row > .el-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* 统计卡片 - 2列布局（特殊处理） */
    body .stat-cards,
    .ldis-content .stat-cards {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    body .stat-cards > .el-col,
    body .stat-cards > [class*="el-col-"],
    .ldis-content .stat-cards > .el-col {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
        float: none !important;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-card .el-card__body {
        padding: 10px;
    }

    .stat-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        margin-right: 10px !important;
    }

    .stat-icon i {
        font-size: 20px !important;
    }

    .stat-value {
        font-size: 20px !important;
    }

    .stat-label {
        font-size: 11px !important;
        white-space: nowrap;
    }

    .stat-info {
        min-width: 0;
        overflow: hidden;
    }

    /* Dashboard 页面主内容区域 - 强制上下排列 */
    .dashboard-main-row {
        display: block !important;
    }

    .dashboard-main-row .dashboard-left-col,
    .dashboard-main-row .dashboard-right-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dashboard-main-row .dashboard-right-col {
        margin-top: 12px;
    }

    /* 快捷操作按钮 */
    .quick-actions .el-button {
        font-size: 13px;
    }

    /* ========== 弹窗响应式 ========== */
    .el-dialog {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px auto !important;
        border-radius: 8px !important;
        max-height: calc(100vh - 100px) !important;
        overflow: hidden !important;
    }

    .el-dialog__header {
        padding: 14px 16px !important;
    }

    .el-dialog__body {
        overflow-y: auto !important;
        padding: 16px !important;
        max-height: calc(100vh - 220px) !important;
    }

    .el-dialog__footer {
        padding: 12px 16px !important;
    }

    .el-dialog__footer .el-button {
        min-width: 70px;
    }

    /* 确认框（MessageBox） */
    .el-message-box {
        width: calc(100% - 32px) !important;
        max-width: 400px;
    }

    /* ========== 分页响应式 ========== */
    .el-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .el-pagination .el-pagination__total,
    .el-pagination .el-pagination__sizes,
    .el-pagination .el-pagination__jump {
        display: none;
    }

    .el-pagination .el-pager li {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .el-pagination .btn-prev,
    .el-pagination .btn-next {
        min-width: 32px;
        height: 32px;
    }

    /* ========== 按钮组响应式 ========== */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header .el-button-group,
    .page-header .button-group {
        width: 100%;
        display: flex;
    }

    .page-header .el-button-group .el-button,
    .page-header .button-group .el-button {
        flex: 1;
    }

    /* ========== 卡片头部响应式 ========== */
    /* el-card__header 中标题+按钮的布局 */
    .el-card__header {
        padding: 12px 16px !important;
    }

    .el-card__header .clearfix {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .el-card__header .clearfix > span:first-child {
        font-size: 15px;
        font-weight: 500;
    }

    /* 移除 inline float:right 样式 */
    .el-card__header .clearfix .el-button,
    .el-card__header .clearfix .el-button[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 通用 el-card__header 布局 */
    .el-card__header[class*="clearfix"],
    .el-card__header > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ========== 操作栏响应式 (action-bar) ========== */
    .action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .action-bar > .el-button {
        width: 100%;
    }

    .action-bar > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .action-bar > div > .el-button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .action-bar > div > .el-button span {
        font-size: 13px;
    }

    .action-bar > div > .el-tag {
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

    /* ========== 操作按钮组响应式 (.action-buttons) ========== */
    .action-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .action-buttons > .el-button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* 3个或更多按钮时，让最后一个按钮占满一行 */
    .action-buttons > .el-button:nth-child(n+5) {
        flex: 1 1 100% !important;
    }

    /* ========== 描述列表响应式 ========== */
    .el-descriptions--border .el-descriptions-row {
        display: block;
    }

    .el-descriptions--border .el-descriptions__cell {
        display: block;
        width: 100%;
        padding: 10px 12px;
    }

    .el-descriptions--border .el-descriptions__label {
        width: 100%;
        background: #f5f7fa;
        font-weight: 500;
    }

    .el-descriptions--border .el-descriptions__content {
        width: 100%;
    }

    /* ========== 步骤条响应式 ========== */
    .el-steps--horizontal {
        flex-direction: column;
    }

    .el-steps--horizontal .el-step {
        flex-direction: row;
        margin-bottom: 12px;
    }

    .el-steps--horizontal .el-step__line {
        display: none;
    }

    /* ========== Tabs响应式 ========== */
    .el-tabs__nav {
        width: 100%;
    }

    .el-tabs__item {
        flex: 1;
        text-align: center;
    }

    /* ========== 管理员页面响应式 ========== */
    /* 管理面板统计卡片 - 2列 */
    .admin-dashboard .stat-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .admin-dashboard .stat-card {
        padding: 15px !important;
    }

    .admin-dashboard .stat-card-value {
        font-size: 22px !important;
    }

    .admin-dashboard .stat-card-title {
        font-size: 13px !important;
    }

    /* 管理员表格操作列 */
    .admin-users .el-table .el-button,
    .admin-cases .el-table .el-button,
    .admin-logs .el-table .el-button {
        padding: 5px 8px !important;
        font-size: 12px !important;
    }

    /* ========== 分析页面响应式 ========== */
    .analysis-page {
        padding: 0 !important;
    }

    .analysis-page .report-header {
        padding: 20px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }

    .analysis-page .report-header h1 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .analysis-page .report-meta {
        flex-wrap: wrap !important;
        gap: 12px !important;
        font-size: 13px !important;
    }

    .analysis-page .progress-card,
    .analysis-page .error-card {
        padding: 30px 20px !important;
        border-radius: 8px !important;
    }

    .analysis-page .progress-icon,
    .analysis-page .error-icon {
        font-size: 48px !important;
    }

    .analysis-page .progress-title,
    .analysis-page .error-title {
        font-size: 16px !important;
    }

    .analysis-page .progress-subtitle,
    .analysis-page .error-message {
        font-size: 13px !important;
    }

    .analysis-page .report-card {
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    .analysis-page .report-card-header {
        padding: 12px 16px !important;
    }

    .analysis-page .report-card-header h2 {
        font-size: 15px !important;
    }

    .analysis-page .report-card-body {
        padding: 16px !important;
    }

    .analysis-page .markdown-body {
        font-size: 14px !important;
    }

    .analysis-page .markdown-body h1 {
        font-size: 18px !important;
    }

    .analysis-page .markdown-body h2 {
        font-size: 16px !important;
    }

    .analysis-page .markdown-body h3 {
        font-size: 15px !important;
    }
}

/* ========================================
   认证页面响应式（登录/注册）
   ======================================== */
@media screen and (max-width: 767px) {
    .auth-card {
        width: calc(100% - 32px) !important;
        max-width: 400px;
        padding: 30px 20px !important;
        margin: 16px;
        border-radius: 12px;
    }

    .auth-logo h1,
    .auth-card .logo h1 {
        font-size: 24px;
    }

    .auth-logo p,
    .auth-card .logo p {
        font-size: 13px;
    }

    .auth-button {
        height: 42px;
        font-size: 15px;
    }

    /* 二维码区域 */
    .qr-wrapper,
    .qrcode-wrapper {
        width: 160px !important;
        height: 160px !important;
    }

    #qrcode {
        width: 160px !important;
        height: 160px !important;
    }

    #qrcode canvas,
    #qrcode img {
        width: 160px !important;
        height: 160px !important;
    }

    /* Tab切换 */
    .el-tabs__item {
        font-size: 14px;
        padding: 0 16px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .auth-card {
        width: 400px;
        padding: 35px;
    }
}

/* ========================================
   聊天页面响应式
   ======================================== */
@media screen and (max-width: 767px) {
    /* 聊天容器高度调整 - 使用 dvh 适配移动端 */
    .chat-container {
        height: calc(100vh - var(--header-height-mobile) - var(--bottom-nav-height) - var(--safe-area-bottom));  /* 后备 */
        height: calc(100dvh - var(--header-height-mobile) - var(--bottom-nav-height) - var(--safe-area-bottom)); /* 动态视口 */
    }

    /* 默认隐藏会话侧边栏 */
    .session-sidebar,
    .chat-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 80%;
        max-width: 300px;
        height: 100%;
        z-index: 1001;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        background: #fff;
    }

    .session-sidebar.show,
    .chat-sidebar.show {
        left: 0;
    }

    /* 会话列表遮罩 */
    .session-overlay,
    .chat-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }

    .session-overlay.show,
    .chat-overlay.show {
        display: block;
    }

    /* 聊天主区域全宽 */
    .chat-main {
        width: 100%;
    }

    /* 聊天头部 */
    .chat-header {
        padding: 12px 16px;
    }

    /* 显示菜单按钮 */
    .chat-header-menu-btn {
        display: block !important;
        margin-right: 12px;
        font-size: 20px;
        color: #606266;
        cursor: pointer;
    }

    /* 消息区域 */
    .chat-messages {
        padding: 12px;
    }

    .message-content {
        max-width: 85%;
    }

    .message-bubble {
        padding: 10px 14px;
        font-size: 14px;
    }

    /* 输入区域 */
    .chat-input-area {
        padding: 10px 12px;
        padding-bottom: calc(10px + var(--safe-area-bottom));
    }

    /* 欢迎页面 */
    .welcome-container {
        padding: 30px 20px;
    }

    .welcome-icon {
        font-size: 48px;
    }

    .welcome-title {
        font-size: 20px;
    }
}

/* ========================================
   工具类
   ======================================== */
/* 隐藏类 */
@media screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* 仅在移动端显示 */
@media screen and (min-width: 768px) {
    .show-on-mobile-only {
        display: none !important;
    }
}