/* ============================================
    Locus Earth - 悬浮控件 (V6.3)
    玻璃拟态（Glassmorphism）设计
    ============================================ */
/* ---------- 主题变量已统一由 themes.css 提供 ----------
   本文件在 themes.css 之后加载，若在此重复声明 :root 令牌会覆盖全局值
   （包括暗色模式），因此这里不再声明。 */

/* ============================================
   悬浮头部
   ============================================ */
.floating-header {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: var(--z-floating);
    width: calc(100% - 32px);
    max-width: 340px;
    height: 56px;
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-md)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), var(--glass-highlight);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 16px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.logo-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.logo-icon img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.header-version {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.toggle-header-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.toggle-header-btn:hover {
    background: var(--glass-hover);
}

.toggle-header-btn:active {
    transform: scale(0.92);
}

.toggle-header-btn svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-header-btn.rotated svg {
    transform: rotate(180deg);
}

/* ============================================
   可展开面板
   ============================================ */
.expandable-panel {
    position: fixed;
    top: 80px;
    left: 16px;
    /* 悬浮界面层：高于地图工具层（右下角控件、时间轴），
       否则移动端底部托盘展开后会被相机控件盖住 */
    z-index: var(--z-floating);
    width: calc(100% - 32px);
    max-width: 340px;
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), var(--glass-highlight);
    border-radius: var(--radius-md);
    padding: 14px;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, background 0.3s ease;
}

.expandable-panel.expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.panel-handle {
    display: none;
}

/* ---------- 开关行 ---------- */
.panel-row.switches {
    display: flex;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.switch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    flex: 1;
    min-width: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.switch-item:hover {
    background: var(--glass-hover);
}

.switch-item:active {
    transform: scale(0.98);
}

.toggle-switch {
    width: 36px;
    height: 20px;
    background: var(--control-track);
    border-radius: var(--radius-sm);
    position: relative;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--control-thumb);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.switch-item.active .toggle-switch {
    background: var(--highlight-color);
}

.switch-item.active .toggle-switch::after {
    transform: translateX(16px);
}

.switch-item > span {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 功能按钮行 ----------
   两排布局，每排固定 3 个位置（按钮宽 = 1/3 容器宽）。
   用 flex + wrap + justify-content:center 实现：
     · 每行正好容纳 3 个（flex-basis 33.333%），第 4 个自动换到第二行；
     · 第二行只有 2 个时，justify-content:center 让它们整体居中，
       视觉上左右各空半格 —— 比"左对齐留空一格"更平衡。
   不用 grid 是因为 grid 无法优雅处理"末行 2 项居中"（会留下硬空位）。 */
.panel-row.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 0;
    padding: 2px 0;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* 每排 3 个：33.333% 再减一点余量，避免四舍五入后被挤到下一行 */
    flex: 0 0 33.333%;
    max-width: 33.333%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    transition: background 0.2s ease, transform 0.15s ease;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover {
    background: var(--glass-hover);
}

.action-btn:active {
    transform: scale(0.94);
}

.action-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-hover);
    transition: background 0.2s ease, color 0.2s ease;
    color: var(--text-primary);
    flex-shrink: 0;
}

.action-btn:hover .action-icon-wrap {
    background: var(--accent-soft);
    color: var(--accent);
}

.action-btn.active .action-icon-wrap {
    background: var(--accent-medium);
    color: var(--accent);
}

.action-icon-wrap svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-btn > span {
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: var(--text-primary);
}

/* ---------- 高精度建模按钮 ----------
   原先它是一个独立的整行 .hd-btn。现已改为与上面五个功能按钮完全相同的
   .action-btn 结构（见 index.html），并在进入覆盖区时插入到「测量」与
   「设置」之间，因此这里不再需要单独的样式。 */

/* ============================================
   退出谷歌模式按钮
   ============================================ */
.exit-google-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-floating);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--danger-strong);
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.exit-google-btn:hover {
    background: var(--danger-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.exit-google-btn:active {
    transform: translateY(0) scale(0.97);
}

/* ============================================
   响应式适配
   移动端统一断点：600px（全站主断点，不再有 480/385/700 多级阶梯）。
   保留一个 360px 的极窄屏补充档（见文件末尾）。
   若将来重新引入多级断点，必须保持“由宽到窄”书写顺序——
   同权重规则后者覆盖前者，顺序颠倒会让窄屏规则整体失效。
   ============================================ */
/* ---------- 移动端底部托盘（<=600px） ---------- */
@media (max-width: 600px) {
    .floating-header {
        top: 16px;
        left: 16px;
        width: calc(100% - 32px);
        max-width: 340px;
        height: 56px;
        padding: 0 14px 0 16px;
        border-radius: var(--radius-md);
        justify-content: flex-start;
    }

    .floating-header .header-brand {
        display: flex;
    }

    .floating-header .toggle-header-btn {
        display: none;
    }

    .expandable-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        padding: 0 16px 24px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        /* 移动端托盘是全宽面板，直接压在卫星影像上，
           用略强一点的玻璃底以保证按钮文字的对比度 */
        background: var(--glass-bg-strong);
        /* 收起：整块下移，只留第一个子元素（手柄）露在视口内。
           calc() 里的百分比按元素自身高度解析，所以：
             100%           = 面板整高，往下推
             - var(--mobile-bar-h) = 少推手柄那一截，使手柄仍可见
           --drag-y 是拖拽手势期间叠加的实时位移（JS 写入），
           非拖拽时为 0px，不影响常规开合。 */
        transform: translateY(calc(100% - var(--mobile-bar-h) + var(--drag-y, 0px)));
        opacity: 1;
        pointer-events: auto;
        /* 顺滑开合：带轻微过冲的弹性曲线，比原来的 ease 更有"跟手"感。
           时长 0.42s 与 spring 曲线配合，收放都不会显得生硬。 */
        transition: transform 0.42s cubic-bezier(0.22, 1.12, 0.36, 1), background 0.3s ease;
        will-change: transform;
    }

    /* 拖拽进行中：关掉过渡，让面板 1:1 跟随手指，松开后再恢复过渡做吸附动画 */
    .expandable-panel.dragging {
        transition: none !important;
        /* 拖拽时略微加深底，视觉上强调"正在被拉动" */
    }

    .panel-handle {
        width: 100%;
        height: var(--mobile-bar-h);
        padding: 0;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* 允许纵向手势由 JS 接管（阻止浏览器滚动/下拉刷新） */
        touch-action: none;
        /* 手柄区域加大触摸热区，更好抓握 */
        position: relative;
    }

    /* 扩大手柄的隐形触摸热区：上下各外扩 10px，不改变视觉尺寸 */
    .panel-handle::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    .handle-line {
        width: 40px;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--control-track);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    /* 展开态手柄点亮一点，提示"可下滑收起" */
    .expandable-panel.expanded .handle-line {
        background: var(--text-muted);
    }

    .expandable-panel.expanded {
        transform: translateY(var(--drag-y, 0px));
    }

    .panel-row.switches {
        padding: 12px 0;
        margin: 0 0 10px;
        justify-content: center;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .switch-item {
        flex: 0 1 auto;
    }

    .panel-row.actions {
        gap: 6px 0;
    }

    .action-icon-wrap {
        width: 48px;
        height: 48px;
    }

    .exit-google-btn {
        top: 16px;
        right: 16px;
    }
}

@media (max-width: 600px) {
    .floating-header {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        max-width: none;
        height: 52px;
        padding: 0 10px 0 14px;
    }

    /* 面板在 <=600px 已改为底部托盘，这里不再覆盖 .expandable-panel，
       否则会把托盘打回顶部悬浮卡片 */

    .header-title {
        font-size: 14px;
    }

    .header-version {
        font-size: 10px;
    }

    .action-icon-wrap {
        width: 44px;
        height: 44px;
    }

    .action-icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .action-btn > span {
        font-size: 10px;
    }

    .exit-google-btn {
        top: 12px;
        right: 12px;
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* 极窄屏（<361px）：图标再收一档，避免两排按钮溢出 */
@media (max-width: 360px) {
    .action-icon-wrap {
        width: 40px;
        height: 40px;
    }
    .action-icon-wrap svg {
        width: 20px;
        height: 20px;
    }
    .action-btn > span {
        font-size: 9px;
    }
}