/* ==========================================================================
   文件名：portfolio.css (ショウ专属修复版)
   修复说明：
   1. 修复移动端大栏目被顶部固定栏遮挡问题。
   2. 引入 css 行数截断机制，默认状态下标题 1 行，说明文字 2 行（需配合 JS 切换 .expanded 类名）。
   3. 移动端下文字盒子强制全局居中靠下排列。
   4. 彻底清洗硬编码颜色，全部桥接至 theme.css 变量，完美支持暗色/浅色主题切换。
   5. 剔除文件末尾导致解析瘫痪的流浪花括号。
   ========================================================================== */

.portfolio-page .portfolio-scroll {
    overflow-y: auto;
    height: calc(100vh - 60px);
    scroll-behavior: smooth;
}

/* 大栏目包裹器 */
.portfolio-sector {
    width: 100%;
    position: relative;
}

/* 粘性定位的大栏目控制梁 */
.sector-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 桥接变量：完美适配浅色/深色模式的主题切换 */
    background-color: var(--nav-bg); 
    backdrop-filter: blur(10px);
    border-bottom: none; /* 彻底清除分割线 */
    border-left: 4px solid var(--accent-color);
    padding: 16px 40px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.4s ease;
}

.sector-header h2 {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-title);
    letter-spacing: 2px;
}

.toggle-icon {
    font-size: 1.4rem;
    color: var(--text-main);
    transition: transform 0.3s ease;
}

/* 内容折叠舱段 */
.sector-content {
    max-height: 20000px;
    opacity: 1;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    overflow: hidden;
}

/* 收纳状态物理坍缩 */
.portfolio-sector.collapsed .sector-content {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

.portfolio-sector.collapsed .toggle-icon {
    transform: rotate(90deg);
}

/* ==========================================================================
   全屏作品集滑块单元 (解耦并接管底层对齐总线)
   ========================================================================== */
body.portfolio-page .portfolio-scroll .slide-portfolio {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex !important; /* 强制启用弹性盒 */
    box-sizing: border-box;
    border-bottom: none; 
    
    /* 核心修复：强行把容器内所有部件压低到最底端对齐，彻底摧毁 theme.css 顶端锁死 */
    align-items: flex-end !important; 
    
    /* 彻底清洗容器自带的 Padding 内边距，只留 20px 物理安全空隙，确保盒子可以无限贴近死角 */
    padding: 20px !important; 
}

/* 精准定向清除旧 theme.css 的半透明横纵网格线，同时保留图片滤镜层 */
body.portfolio-page .portfolio-scroll .slide-portfolio::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(var(--image-overlay-start), var(--image-overlay-end)) !important;
    background-size: auto !important; 
    z-index: 1;
}

/* 信息内容箱体样式 */
.portfolio-meta-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    /* 修复主题切换：使用主题变量替代原本写死的暗色 rgba */
    background: var(--nav-bg); 
    backdrop-filter: blur(12px);
    border: 1px solid var(--nav-border);
    padding: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer; /* 提示用户此处在移动端可点击展开 */
}

.portfolio-meta-box h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: 1px;
    line-height: 1.3;
    transition: color 0.3s;
}

.portfolio-meta-box p {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.7;
    transition: color 0.3s;
}

/* 工业标签组 */
.item-tech {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tech-tag {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--accent-color);
    padding: 4px 12px;
    border-radius: 2px;
    text-transform: uppercase;
}

/* ==========================================================================
   高级异构权重定位引擎 (通过 margin-beam 精准弹射位置)
   ========================================================================== */

/* 【1. 左下角排版分支】 */
body.portfolio-page .portfolio-scroll .item-left-align {
    justify-content: flex-start !important; /* 水平靠左 */
}
body.portfolio-page .portfolio-scroll .item-left-align .portfolio-meta-box {
    text-align: left !important;
    margin-left: 20px !important;   
    margin-bottom: 20px !important; 
    margin-right: 0 !important;
    margin-top: 0 !important;
}
body.portfolio-page .portfolio-scroll .item-left-align .item-tech {
    justify-content: flex-start !important;
}

/* 【2. 右下角排版分支】 */
body.portfolio-page .portfolio-scroll .item-right-align {
    justify-content: flex-end !important; /* 水平靠右 */
}
body.portfolio-page .portfolio-scroll .item-right-align .portfolio-meta-box {
    text-align: left !important; 
    margin-right: 20px !important;  
    margin-bottom: 20px !important; 
    margin-left: 0 !important;
    margin-top: 0 !important;
}
body.portfolio-page .portfolio-scroll .item-right-align .item-tech {
    justify-content: flex-start !important;
}

/* 页脚重置线 */
.portfolio-page .site-footer {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    z-index: 10;
}

/* ==========================================================================
新增：开发者日志悬浮按钮基础样式与呼吸灯动画
========================================================================== */

.dev-log-btn {
    background: rgba(13, 13, 13, 0.8);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 8px 16px;
    font-family: monospace;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    animation: breathingGlow 3s infinite; /* 绑定工业级呼吸灯动画 */
    z-index: 110;
}

.dev-log-btn:hover {
    background: var(--accent-color);
    color: #000;
    box-shadow: 0 0 25px var(--accent-color);
    animation: none; /* 鼠标悬停时停止呼吸，保持常亮发光状态 */
}

/* 新增：左上角悬浮定位，绝对适配全屏滑动组件 */
.floating-slide-tl {
    position: absolute;
    top: 80px;
    left: 20px;
    z-index: 110; /* 确保组合定位类同步具备高级别物理权重 */
}

/* ==========================================================================
   新增：dev-log-modal 模态框全套工业风样式（默认隐藏）
   ========================================================================== */
/* 全屏背景遮罩层 */
.log-modal-backdrop {
    display: none; /* 默认隐藏，激活时由 JS 切换为 flex 分发 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65); /* 暗化周围环境 */
    backdrop-filter: blur(8px); /* 视口背景毛玻璃微调 */
    z-index: 1000; /* 统治级层级，绝对凌驾于常规组件之上 */
    justify-content: center;
    align-items: center;
}

/* 模态框主窗口 */
.log-modal-window {
    background-color: var(--nav-bg) !important; /* 强制桥接系统背景变量 */
    border: 1px solid var(--nav-border);
    border-radius: 4px;
    width: 90%;
    max-width: 1200px; /* 【尺寸调整核心】：在此修改数值即可调整浮窗宽度，如 900px 或 1000px */
    max-height: 80vh; /* 【尺寸调整核心】：提升高度上限，容纳更多日志流 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px var(--image-overlay-start); /* 动态阴影适配 */
    overflow: hidden;
    animation: machinaSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 注入滑入动画 */
}

/* 头部面板 */
.log-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--nav-border);
    background-color: var(--nav-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-title);
    letter-spacing: 1px;
}

/* 右上角关闭控制探针 */
.log-modal-close {
    background: none;
    border: none;
    color: var(--text-title); /* 提升对比度，防止浅色模式下看不清 */
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.log-modal-close:hover {
    color: #FF3B30; /* 悬停警告色 */
}

/* 管理员操作舱段 */
#admin-log-panel {
    padding: 20px 24px;
    background-color: var(--btn-bg); /* 选用带有深浅色自适应的轻微色块背景 */
    border-bottom: 1px dashed var(--nav-border);
}

#admin-log-panel h4 {
    margin: 0 0 12px 0;
    color: var(--accent-color);
    font-size: 0.9rem;
}

#admin-log-panel input,
#admin-log-panel textarea {
    width: 100%;
    background: var(--nav-bg); /* 输入框背景对齐，防止浅色模式下变成深灰色 */
    border: 1px solid var(--nav-border);
    color: var(--text-main);  /* 确保输入的文本在浅色和深色下皆符合可读性规范 */
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: inherit;
    box-sizing: border-box;
}

/* 新增：Cloudinary 资产一键生成面板浅色模式专项适配 */
.machina-media-injector-dock {
    background: var(--nav-bg) !important; 
    border: 1px dashed var(--nav-border) !important;
}
.machina-media-injector-dock input {
    background: var(--btn-bg) !important;
    color: var(--text-main) !important;
}

#admin-log-panel textarea {
    height: 100px;
    resize: vertical;
}

.admin-action-row {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
  
.admin-btn-submit {
    background: var(--accent-color);
    color: #000;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.admin-btn-cancel {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--nav-border);
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/* 历史数据流回放容器 */
.log-stream-container {
    padding: 24px;
    overflow-y: auto;
    flex-grow: 1;
}

/* ==========================================================================
   新增：机械风格科技感日期选择器及原生浏览器内核日历图标滤镜重绘
   ========================================================================== */
.machina-date-picker {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--nav-border) !important;
    color: var(--accent-color) !important; /* 维持青色高亮色调 */
    font-family: monospace;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: auto !important;      /* 取消拉满行为，自适应内容宽度 */
    max-width: 140px;            /* 限制物理上限，防止挤压左侧标题 */
    text-align: center;
}

.machina-date-picker:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

/* 矩阵变换：利用高饱和度滤镜强行改变系统默认日历探针的颜色，实现视觉风格统一 */
.machina-date-picker::-webkit-calendar-picker-indicator {
    filter: invert(60%) sepia(80%) saturate(2500%) hue-rotate(145deg) brightness(100%) contrast(105%);
    cursor: pointer;
}

/* ==========================================================================
   新增：气泡提示总线布局样式与多媒体缩略图工业外框控制
   ========================================================================== */

/* 提示气泡核心容器位置定义 */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2500; /* 绝对统治级权重，凌驾于所有模态框之上 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-box {
    pointer-events: auto;
    background: var(--nav-bg); /* 气泡背景同样遵循系统变量 */
    border: 1px solid var(--nav-border);
    color: var(--text-title);
    padding: 12px 24px;
    font-family: monospace;
    font-size: 0.85rem;
    border-radius: 4px;
    box-shadow: 0 10px 30px var(--image-overlay-start);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

/* 新增：历史日志流单条记录内的发布时间戳底色适配 */
.log-entry-header div {
    background: var(--btn-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--nav-border);
}

.toast-box.slide-in { transform: translateX(0); }
.toast-box.slide-out { transform: translateX(150%); }
.toast-success { border-left: 4px solid var(--accent-color); color: var(--accent-color); }
.toast-error { border-left: 4px solid #FF3B30; color: #FF3B30; }
.toast-info { border-left: 4px solid #0077FF; color: #0077FF; }

/* 约束核心：Cloudinary 多媒体缩略网格舱段 */
.cloudinary-thumb-frame {
    width: 200px !important;        /* 强制限定初始物理宽度 */
    height: 130px !important;       /* 强制限定初始物理高度 */
    border-radius: 4px;
    border: 1px solid var(--nav-border);
    background: #000;
    object-fit: cover;             /* 等比裁切，防变形错位 */
    cursor: zoom-in;               /* 鼠标悬停显示放大手势 */
    transition: border-color 0.3s, box-shadow 0.3s;
    display: inline-block !important; /* 防止被渲染器强制切断换行 */
    margin: 4px !important;
}

.cloudinary-thumb-frame:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

/* 1. 悬浮日志按钮在浅色模式下的反转：确保在白色背景梁上依然清晰可读 */
.light-theme .dev-log-btn {
    background: var(--nav-bg) !important;
    color: var(--text-title) !important;
    border: 1px solid var(--nav-border) !important;
}

.light-theme .dev-log-btn:hover {
    background: var(--accent-color) !important;
    color: #000 !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 20px var(--accent-color);
}

/* 2. 日志编辑框内部组件适配（日历、多媒体提取按钮、翻译下拉菜单等） */
.light-theme .machina-date-picker {
    background: var(--btn-bg) !important; /* 浅色模式下采用淡灰色底，防止死黑 */
    border: 1px solid var(--nav-border) !important;
    color: var(--text-title) !important; /* 文字颜色反转为深色 */
}

/* 浅色模式下，当日历输入框等组件聚焦时，保持青色高亮呼吸框 */
.light-theme .machina-date-picker:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

/* 3. 资产链接一键生成面板（含 +Image, +Video, +File 按钮）的浅色整体降维 */
.light-theme .machina-media-injector-dock {
    background: var(--btn-bg) !important;
    border: 1px dashed var(--nav-border) !important;
}

.light-theme .machina-media-injector-dock input {
    background: var(--nav-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--nav-border) !important;
}

/* 4. 原生系统日历探针图标滤镜微调：降低高饱和度，使其在浅色环境下不刺眼 */
.light-theme .machina-date-picker::-webkit-calendar-picker-indicator {
    filter: invert(30%) sepia(80%) saturate(1500%) hue-rotate(150deg) brightness(90%) contrast(95%);
}

/* 5. 模态框内部传统按钮（如编辑面板底部的 Cancel 按钮）的自适应 */
.light-theme .admin-btn-cancel {
    background: var(--btn-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--nav-border) !important;
}
.light-theme .admin-btn-cancel:hover {
    background: var(--nav-border) !important;
    color: var(--text-title) !important;
}

/* 6. 单条记录底部的控制按钮（Modify / Delete）在浅色模式下的描边高显 */
.light-theme .log-admin-control-bar button {
    background: var(--nav-bg) !important;
}

/* ==========================================================================
   新增：开发日志正文区域自动换行与边界保护规范
   ========================================================================== */

.log-content {
  white-space: normal !important;      /* 强行粉碎可能从父级继承而来的 nowrap 属性 */
  word-break: break-word !important;   /* 针对中英日混排及超长无空格英文字符、API 路径实施强制折行 */
  word-wrap: break-word !important;    /* 兼容老旧浏览器的边界溢出保护 */
  overflow-wrap: anywhere !important;  /* 终极兜底换行策略，允许在任意字符间断行防止撑破横向容器 */
}

/* 确保 Markdown 解析出的 P 标签同步换行 */
.log-content p {
  white-space: normal !important;
  word-break: break-word !important;
}

/* 自定义线性滑入动画 */
@keyframes machinaSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   自适应与移动端响应式降维调整
   ========================================================================== */
@media (max-width: 1023px) {
    /* 修复问题1：向下移动滚动容器，预留出移动端顶部导航栏的空间，防止被挡 */
    .portfolio-page .portfolio-scroll {
        margin-top: 60px;
        height: calc(100vh - 120px); /* 扣除顶部和底部可能存在的机能栏 */
    }

    .sector-header {
        padding: 12px 20px;
    }
    
    body.portfolio-page .portfolio-scroll .slide-portfolio {
        padding: 20px !important;
        height: calc(100vh - 60px) !important;
        /* 修复问题3：强行控制所有变体的文字盒子在移动端【居中靠下】显示 */
        align-items: flex-end !important; 
        justify-content: center !important; 
    }

    body.portfolio-page .portfolio-scroll .portfolio-meta-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 0 10px 0 !important; /* 抹除电脑端的左右偏移量，自适应拉满屏幕并留出底部安全距 */
        text-align: left !important; 
    }

    /* 修复问题2：移动端未点击状态下，限制标题为固定的 1 行 */
    .portfolio-meta-box h3 {
        font-size: 1.15rem;
        display: -webkit-box !important;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 修复问题2：移动端未点击状态下，限制说明文字最高显示 2 行 */
    .portfolio-meta-box p {
        font-size: 0.85rem;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 修复问题2后续：当通过 JS 给盒子添加 .expanded 类名后，释放行数限制显示完整全文字 */
    .portfolio-meta-box.expanded h3,
    .portfolio-meta-box.expanded p {
        display: block !important;
        overflow: visible;
        text-overflow: clip;
        -webkit-line-clamp: unset;
    }

    .item-tech {
        justify-content: flex-start !important;
    }
}

/* 移动端降维适配：微调悬浮位置，防止与可能存在的汉堡菜单发生物理碰撞 */
@media (max-width: 1023px) {
    .floating-slide-tl {
        top: 60px;
        left: 15px;
    }
}

@keyframes breathingGlow {
    0% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.2); }
}