/* ═══════════════════════════════════════════════════════
   mobile.css — ChatDLM Mobile Experience
   WeUI-inspired · PC 端零影响
   ═══════════════════════════════════════════════════════ */

:root {
  --m-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --m-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --m-sheet-radius: 16px 16px 0 0;
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-nav-h: 56px;
  --m-touch: 44px;
}

@media (max-width: 768px) {

  /* ═══ GRID ═══ */
  .app-shell,
  .app-shell.left-collapsed,
  .app-shell.right-collapsed,
  .app-shell.left-collapsed.right-collapsed,
  .app-shell.logged-out,
  .app-shell.logged-out.left-collapsed {
    grid-template-columns: 1fr !important;
    grid-template-rows: 0px 1fr !important;
  }

  /* ═══ HEADER — HIDDEN ═══ */
  .header-brand { display:none!important }
  .brand-content { display:none!important }
  .header-center { display:none!important }
  .header-right-zone { display:none!important }
  .resize-handle { display:none!important }

  /* Login button override — show in top bar when logged out */
  .app-shell.logged-out .header-right-zone {
    display: flex !important;
    position: fixed !important;
    top: 0; right: 0;
    z-index: 800 !important;
    padding: 10px 14px !important;
    background: transparent !important;
  }
  .app-shell.logged-out .header-right-zone .notif-btn,
  .app-shell.logged-out .header-right-zone .msg-btn,
  .app-shell.logged-out .header-right-zone .avatar-wrap,
  .app-shell.logged-out .header-right-zone #toggleRight,
  .app-shell.logged-out .header-right-zone #toggleLeft {
    display: none !important;
  }

  /* ═══ MAIN ═══ */
  .app-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    padding: 0 16px 80px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ═══ LEFT SIDEBAR — HIDDEN (replaced by Discover page) ═══ */
  .app-sidebar { display: none !important }

  /* ═══ RIGHT PANEL — HIDDEN ═══ */
  .app-right { display: none !important }
  .right-item { min-height: var(--m-touch) !important; padding: 12px !important }

  /* ═══ BOTTOM SHEETS — WeUI ActionSheet ═══ */
  .avatar-dropdown, .notif-dropdown, .msg-dropdown {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; max-height: 75vh !important;
    border-radius: var(--m-sheet-radius) !important;
    transform: translateY(100%) !important;
    transition: transform .38s var(--m-spring) !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 32px rgb(0 0 0 / .2) !important;
    z-index: 800 !important;
  }
  /* Drag handle */
  .avatar-dropdown::before, .notif-dropdown::before, .msg-dropdown::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--ae-text-3); border-radius: 2px;
    margin: 10px auto 4px; opacity: .5; flex-shrink: 0;
  }
  .avatar-dropdown.visible, .notif-dropdown.visible, .msg-dropdown.visible {
    display: flex !important; transform: translateY(0) !important;
  }
  .av-item { min-height: var(--m-touch) !important; padding: 12px 16px !important; font-size: 1rem !important }
  .notif-item, .msg-item { padding: 14px 18px !important; min-height: var(--m-touch) !important }

  /* ═══ ADD MENU — BOTTOM SHEET ═══ */
  .add-popover {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; border-radius: var(--m-sheet-radius) !important;
    flex-direction: column !important; max-height: 70vh !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 32px rgb(0 0 0 / .2) !important;
    z-index: 800 !important; padding: 0 !important;
  }
  .add-popover.visible { display: flex !important }
  .add-popover::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--ae-text-3); border-radius: 2px;
    margin: 10px auto 4px; opacity: .5; flex-shrink: 0;
  }
  .add-menu-main { padding: 4px 0 !important }
  .add-item { min-height: var(--m-touch) !important; padding: 12px 20px !important; font-size: 1rem !important }
  .add-sub { border-left: none !important; border-top: 1px solid var(--ae-glass-border); padding: 4px 0 !important }
  .add-sub-item { min-height: var(--m-touch) !important; padding: 12px 20px !important; font-size: 1rem !important }

  /* ═══ AGENT — BOTTOM SHEET ═══ */
  .agent-popover {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; border-radius: var(--m-sheet-radius) !important;
    box-shadow: 0 -8px 32px rgb(0 0 0 / .2) !important;
    z-index: 800 !important; padding: 0 !important;
    max-height: 70vh !important; overflow-y: auto !important;
  }
  .agent-popover.visible { display: block !important }
  .agent-popover::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--ae-text-3); border-radius: 2px;
    margin: 10px auto 4px; opacity: .5;
  }
  .agent-popover .av-item { min-height: var(--m-touch) !important; padding: 12px 20px !important; font-size: 1rem !important }
  .agent-toggle { min-height: var(--m-touch) !important; padding: 12px 20px !important; font-size: 1rem !important }

  /* ═══ SETTINGS — FULL SCREEN ═══ */
  .settings-modal-bg { padding: 0 !important; align-items: stretch !important }
  .settings-modal { width: 100% !important; max-width: 100% !important; height: 100% !important; border-radius: 0 !important; flex-direction: column !important }
  .settings-sidebar { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid var(--ae-glass-border); padding: 10px 8px !important; gap: 4px !important; flex-shrink: 0 !important; -webkit-overflow-scrolling: touch }
  .settings-sidebar-title { display: none !important }
  .settings-nav-item { white-space: nowrap; padding: 8px 16px !important; font-size: 0.875rem !important; flex-shrink: 0; min-height: 36px !important }
  .settings-nav-item i { display: none !important }
  .settings-content-head { padding: 16px 16px 0 !important }
  .settings-content-body { padding: 16px !important; -webkit-overflow-scrolling: touch }
  .set-theme-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important }
  .set-font-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important }
  .set-field-row { min-height: var(--m-touch) !important; padding: 14px 0 !important }
  .set-row { min-height: var(--m-touch) !important; padding: 8px 0 !important }

  /* ═══ CONNECTOR — FULL SCREEN ═══ */
  .conn-modal { width: 100% !important; max-width: 100% !important; height: 100vh !important; border-radius: 0 !important }
  .conn-grid { grid-template-columns: 1fr !important }
  .conn-tabs { padding: 12px 16px 0 !important; flex-wrap: wrap !important; gap: 0 !important }
  .conn-tab { min-height: 40px !important; font-size: 0.875rem !important }
  .conn-search { width: 100% !important; margin: 8px 0 4px !important }
  .conn-search input { width: 100% !important }
  .conn-card { min-height: var(--m-touch) !important; padding: 14px !important }
  .conn-row { min-height: var(--m-touch) !important }

  /* ═══ SEARCH MODAL — FULL SCREEN ═══ */
  .search-modal-bg { padding-top: 0 !important }
  .search-modal { width: 100% !important; max-width: 100% !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important }
  .search-modal-input { font-size: 1rem !important; min-height: var(--m-touch) !important }
  .sh-item { min-height: var(--m-touch) !important; padding: 14px 20px !important }

  /* ═══ HOME ═══ */
  .home-wrap { padding: 0 16px !important; padding-top: 10vh !important }
  .home-logo { font-size: 1.875rem !important; margin-bottom: 20px !important }
  .search-input { font-size: 1rem !important; padding: 14px 16px 4px !important }
  .search-toolbar { flex-wrap: wrap !important; height: auto !important; padding: 6px 8px !important; gap: 4px !important }
  .search-toolbar-btn { width: 32px !important; height: 32px !important; font-size: 0.875rem !important }
  .aigc-expand { width: 32px !important; height: 32px !important; padding-left: 8px !important }
  .aigc-expand:hover { width: 32px !important }
  .aigc-detect-btn, .aigc-reduce-btn, .geo-rank-btn, .geo-index-btn { display: none !important }
  .aigc-label { display: none !important }
  .search-toolbar-right { gap: 2px !important }
  .search-expand-btn { display: none !important }
  .geo-tag-bar { padding: 0 12px 6px !important }
  .geo-tag { min-height: 32px !important }
  .geo-tag-input { font-size: 0.8125rem !important; min-width: 80px !important; min-height: 32px !important }
  .search-dropdown { border-radius: 0 0 14px 14px !important }
  .dropdown-item { min-height: var(--m-touch) !important; padding: 12px 20px !important; font-size: 1rem !important }

  /* ═══ CARDS ═══ */
  .card-grid, .card-grid.overview { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important }
  .stats-row { gap: 8px !important; flex-wrap: wrap !important }
  .stat-glass { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; padding: 12px 14px !important }
  .page-head { margin-bottom: 20px !important }
  .page-head-text h2 { font-size: 1.125rem !important }
  .glass-card { padding: 14px !important }

  /* ═══ NOTIFICATION PAGE — WeUI Cell ═══ */
  .notif-page-head { gap: 12px !important }
  .notif-page-title { font-size: 1.125rem !important }
  .notif-search-bar { min-height: var(--m-touch) !important }
  .notif-search-input { font-size: 1rem !important }
  .notif-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch }
  .notif-tab { padding: 12px 16px !important; font-size: 0.875rem !important; white-space: nowrap; flex-shrink: 0; min-height: var(--m-touch) !important }
  .notif-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important }
  .notif-toolbar-btn { min-height: 36px !important; padding: 8px 16px !important }
  .nf-item { padding: 14px 16px !important; gap: 12px !important; min-height: 60px !important; border-bottom: 1px solid var(--ae-glass-border) !important; border-radius: 0 !important; margin-bottom: 0 !important }
  .nf-item:last-child { border-bottom: none !important }
  .nf-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; border-radius: 50% !important }
  .nf-title { font-size: 0.875rem !important }
  .nf-desc { font-size: 0.75rem !important; margin-top: 2px !important }
  .nf-action-btn { opacity: 1 !important; pointer-events: auto !important }

  /* ═══ MESSAGE PAGE — WeUI Cell ═══ */
  .msg-page-head { gap: 12px !important }
  .msg-page-title { font-size: 1.125rem !important }
  .msg-search-bar { min-height: var(--m-touch) !important }
  .msg-search-input { font-size: 1rem !important }
  .msg-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch }
  .msg-tab { padding: 12px 16px !important; font-size: 0.875rem !important; white-space: nowrap; flex-shrink: 0; min-height: var(--m-touch) !important }
  .msg-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important }
  .msg-toolbar-btn { min-height: 36px !important; padding: 8px 16px !important }
  .mf-item { padding: 14px 16px !important; gap: 12px !important; min-height: 64px !important; border-bottom: 1px solid var(--ae-glass-border) !important; border-radius: 0 !important; margin-bottom: 0 !important }
  .mf-item:last-child { border-bottom: none !important }
  .mf-avatar { width: 44px !important; height: 44px !important; font-size: 1rem !important }
  .mf-name { font-size: 0.875rem !important }
  .mf-preview { font-size: 0.8125rem !important }
  .mf-actions { opacity: 1 !important; pointer-events: auto !important; position: static !important; margin-top: 6px !important }

  /* ═══ LOGIN ═══ */
  .app-shell.logged-out { grid-template-columns: auto 0px 1fr 0px auto !important }
  .login-btn { font-size: 0.875rem !important; padding: 8px 20px !important; min-height: 40px !important }

  /* ═══ TOAST — WeUI ═══ */
  .weui-toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgb(0 0 0 / .76); color: #fff; padding: 16px 24px; border-radius: 12px;
    font-size: 0.875rem; font-weight: 500; z-index: 9999; pointer-events: none; text-align: center;
    min-width: 120px; max-width: 200px;
    animation: toastIn .25s var(--m-ease), toastOut .25s var(--m-ease) 1.2s forwards;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .weui-toast i { display: block; font-size: 2.25rem; margin-bottom: 8px }
  @keyframes toastIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.85) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }
  @keyframes toastOut { from { opacity: 1; transform: translate(-50%,-50%) scale(1) } to { opacity: 0; transform: translate(-50%,-50%) scale(.85) } }

  /* ═══ GLOBAL ═══ */
  * { -webkit-tap-highlight-color: transparent }
  input, textarea, select { font-size: 1rem !important }

  /* ═══ BOTTOM NAV ═══ */
  .mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; height: var(--m-nav-h);
    background: var(--ae-sidebar-bg); border-top: 1px solid var(--ae-glass-border);
    display: flex; align-items: center; justify-content: space-around; z-index: 500;
    padding: 0 4px; padding-bottom: var(--m-safe-bottom);
    backdrop-filter: blur(var(--ae-blur)); -webkit-backdrop-filter: blur(var(--ae-blur));
  }
  .mob-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 0; color: var(--ae-text-3); text-decoration: none;
    font-size: 0.625rem !important; font-weight: 500; flex: 1; transition: color .15s;
    position: relative; min-height: var(--m-touch);
  }
  .mob-nav-item i { font-size: 1.25rem !important; line-height: 1 }
  .mob-nav-item.active { color: var(--ae-text-1) }
  .mob-nav-item:active { opacity: .7 }
  .mob-nav-item .mob-badge {
    position: absolute; top: 4px; right: calc(50% - 16px);
    width: 6px; height: 6px; border-radius: 50%; background: var(--ae-red, #F45D5D);
  }
  .app-shell.logged-out ~ .mobile-bottom-nav { display: none !important }

  /* Bottom nav stays visible above sidebar when open */
  .app-shell.left-collapsed ~ .mobile-bottom-nav {
    z-index: 800 !important;
  }

  /* ═══════════════════════════════════
     SHARED — WeChat Style Cells
     Used by both "发现" and "我的" pages
     ═══════════════════════════════════ */

  /* Page title — fixed in header bar, same as login .tab (14px/600) */
  .discover-header,
  .me-page-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--ae-header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ae-text-1);
    background: var(--ae-sidebar-bg);
    z-index: 100;
    border-bottom: 1px solid var(--ae-glass-border);
  }
  /* Push page content below fixed header */
  .me-page {
    padding: 0 !important;
    padding-top: var(--ae-header-h) !important;
    margin: 0 -16px -80px;
  }

  /* Sub-page back button (left side of header) */
  .mob-subpage-back {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--ae-text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
  }

  /* Section group label (WeChat style: 账号, 通用, etc.) */
  .me-section-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ae-text-3);
    padding: 24px 20px 8px;
  }

  /* Profile card */
  .me-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 20px 20px;
    background: var(--ae-sidebar-bg);
  }
  .me-avatar {
    width: 56px; height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
  }
  .me-profile-info {
    flex: 1; min-width: 0;
  }
  .me-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ae-text-1);
    margin-bottom: 3px;
  }
  .me-email {
    font-size: 0.75rem;
    color: var(--ae-text-3);
  }
  .me-upgrade-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1.5px solid var(--ae-text-3);
    background: transparent;
    color: var(--ae-text-1);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }

  /* Section (group of cells) */
  .me-section {
    background: var(--ae-sidebar-bg);
    margin-top: 8px;
  }
  .me-section:first-child,
  .discover-header + .me-section,
  .me-profile + .me-section {
    margin-top: 0;
  }

  /* Cell row */
  .me-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 20px;
    cursor: pointer;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .me-cell:active {
    background: var(--ae-glass-bg-hover);
  }
  .me-cell-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--ae-text-3);
    flex-shrink: 0;
  }
  .me-cell-label {
    flex: 1;
    font-size: 1rem;
    color: var(--ae-text-1);
  }
  .me-cell-value {
    font-size: 0.875rem;
    color: var(--ae-text-3);
    margin-right: 2px;
  }
  .me-cell-arrow {
    font-size: 0.625rem;
    color: var(--ae-text-3);
    opacity: .5;
    flex-shrink: 0;
  }

  /* Cell divider line (indented, WeChat style) */
  .me-cell-line {
    height: 1px;
    background: var(--ae-glass-border);
    margin-left: 54px;
    margin-right: 0;
  }

  /* Expandable options (theme/lang) */
  .me-theme-options,
  .me-lang-options,
  .me-expand-opts {
    display: none;
    background: var(--ae-glass-bg);
  }
  .me-theme-options.visible,
  .me-lang-options.visible,
  .me-expand-opts.visible {
    display: block;
  }
  .me-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 20px 0 54px;
    font-size: 0.875rem;
    color: var(--ae-text-2);
    cursor: pointer;
    border-bottom: 1px solid var(--ae-glass-border);
    -webkit-tap-highlight-color: transparent;
  }
  .me-opt:last-child {
    border-bottom: none;
  }
  .me-opt:active {
    background: var(--ae-glass-bg-hover);
  }
  .me-opt i {
    font-size: 0.8125rem;
    color: var(--ae-accent);
    opacity: 0;
  }
  .me-opt.me-opt-active {
    color: var(--ae-text-1);
  }
  .me-opt.me-opt-active i {
    opacity: 1;
  }

  /* Logout button */
  .me-logout-section {
    margin-top: 8px !important;
  }
  .me-logout-btn {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #F45D5D;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .me-logout-btn:active {
    background: var(--ae-glass-bg-hover);
  }

  /* Footer text */
  .me-footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--ae-text-3);
    padding: 32px 0 80px;
    opacity: .5;
  }

}

/* ═══ DESKTOP SAFETY ═══ */
@media (min-width: 769px) {
  .mobile-bottom-nav, .weui-toast { display: none !important }
  .me-page { display: none !important }
}