/* ══════════════════════════════════════════════════════════════
   MOBILE NATIVE ENHANCEMENTS - IsonAI test.html
   Marker: MOBILE_NATIVE_V1
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL: overscroll kill (no pull-to-refresh) ── */
html, body { overscroll-behavior: none; }

/* ── Sidebar: backdrop blur overlay ── */
.sb-ov.show {
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  background: rgba(0,0,0,0.45) !important;
}

/* ── Splash screen - SPLASH_REDESIGN_V2 (clean, no tacky gradient) ── */
#nativeSplash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at 50% 40%, #14151a 0%, #09090b 70%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: opacity 0.5s ease;
  animation: splashFadeIn 0.4s ease both;
}
#nativeSplash.fade-out { opacity: 0; pointer-events: none; }
#nativeSplash .splash-icon {
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  position: relative;
  animation: splashBreath 2.4s ease-in-out infinite;
}
#nativeSplash .splash-icon::before {
  content: '';
  position: absolute; inset: -40px;
  background: radial-gradient(circle, rgba(154,137,104,0.22) 0%, rgba(212,132,90,0.08) 35%, rgba(154,137,104,0) 70%);
  z-index: -1;
  pointer-events: none;
  animation: splashGlow 3s ease-in-out infinite;
}
#nativeSplash .splash-icon img {
  width: 100% !important; height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 0 24px rgba(154,137,104,0.55)) drop-shadow(0 0 8px rgba(212,132,90,0.4));
}
#nativeSplash .splash-title {
  font-family: var(--font-d); font-size: 28px; font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #E8B48B 0%, #9A8968 50%, #A89878 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: splashRise 0.6s 0.1s ease both;
}
#nativeSplash .splash-sub {
  font-size: 12px; color: var(--tx-3); margin-top: 8px;
  letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 500; opacity: 0.7;
  animation: splashRise 0.6s 0.2s ease both;
}
@keyframes splashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes splashBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes splashGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes splashRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#nativeSplash .splash-sub { opacity: 0; }
#nativeSplash .splash-sub { animation: splashRise 0.6s 0.2s ease forwards; }

/* ── Skeleton shimmer ── */
.skeleton-msg { display: flex; gap: 12px; margin-bottom: 20px; padding: 0 16px; }
.skeleton-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-3); flex-shrink: 0;
}
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 400px 100%;
  animation: shimmerAnim 1.6s ease-in-out infinite;
}
@keyframes shimmerAnim {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton-wrap { padding: 20px 0; }
.skeleton-wrap.hide { display: none; }

@media (max-width: 768px) {

  /* ── Touch targets: minimum 44px ── */
  .top-menu, .top-ico, .top-btn, .sb-btn,
  .send-btn, .input-tools button, .scroll-fab {
    min-width: 44px; min-height: 44px;
  }

  /* ── Hide scrollbars on mobile ── */
  .msg-wrap::-webkit-scrollbar,
  .sb-list::-webkit-scrollbar,
  .chips-row::-webkit-scrollbar,
  .followup-area::-webkit-scrollbar {
    display: none;
  }
  .msg-wrap, .sb-list, .chips-row, .followup-area {
    scrollbar-width: none;
  }

  /* ── Followup chips: horizontal scroll on mobile ── */
  .followup-area {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }

  /* ── Sidebar: smoother transition (no !important - JS sets 'none' during swipe tracking) ── */
  .sb:not(.swiping) {
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .sb-ov:not(.swiping) {
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  }

  /* ── Bottom sheet ── */
  #mobileSheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--bg-2);
    border-radius: 18px 18px 0 0;
    z-index: 600;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-height: 70dvh;
    overflow-y: auto;
  }
  #mobileSheet.open { transform: translateY(0); }
  #mobileSheet .sheet-handle {
    display: flex; justify-content: center; padding: 12px 0 8px;
    cursor: grab;
  }
  #mobileSheet .sheet-handle:active { cursor: grabbing; }
  #mobileSheet .sheet-handle:active .sheet-bar { background: var(--tx-4); width: 48px; }
  #mobileSheet .sheet-bar {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--bg-4); transition: width .15s, background .15s;
  }
  #mobileSheet .sheet-body { padding: 4px 20px 24px; }
  #mobileSheet .sheet-title {
    font-size: 16px; font-weight: 600; margin-bottom: 12px;
    color: var(--tx);
  }
  #mobileSheet .sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 10px; border-radius: 12px;
    font-size: 14px; color: var(--tx);
    cursor: pointer; transition: background 0.15s;
    border: none; background: none; width: 100%;
    font-family: var(--font-b); text-align: left;
  }
  #mobileSheet .sheet-item:hover,
  #mobileSheet .sheet-item:active { background: var(--bg-3); }
  #mobileSheet .sheet-item.danger { color: var(--red); }
  #mobileSheet .sheet-item.active { color: var(--ac); }
  #mobileSheet .sheet-item.active svg { stroke: var(--ac) !important; }
  #mobileSheet .sheet-item svg {
    width: 20px; height: 20px; flex-shrink: 0;
    stroke-width: 1.8; stroke-linecap: round; fill: none;
  }

  #mobileSheetBackdrop {
    position: fixed; inset: 0; z-index: 599;
    background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  #mobileSheetBackdrop.show { opacity: 1; pointer-events: auto; }

  /* ── Message entrance animation ── */
  .msg { animation: msgSlideIn 0.25s ease both; }
  @keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Input area: smoother transitions ── */
  .input-area {
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
                bottom 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  }

  /* ── Stream resume banner ── */
  #streamResumeBanner {
    display: none; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px;
    background: var(--ac-dim); border-radius: 10px;
    margin: 8px 16px; font-size: 13px; color: var(--ac);
    font-weight: 500; animation: fadeUp 0.3s ease;
    cursor: pointer;
  }
  #streamResumeBanner.show { display: flex; }
  #streamResumeBanner svg { width: 16px; height: 16px; flex-shrink: 0; }
}

/* ── Hide Share + Settings from topbar on mobile (in bottom sheet) ── */
@media (max-width: 768px) {
  .top-right .top-btn,
  .top-right .top-ico[onclick*="openSettings"] {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE NATIVE V2 - Pull-refresh, Offline, Longpress, Swipe-reply, Pinch-zoom
   Marker: MOBILE_NATIVE_V2
   ══════════════════════════════════════════════════════════════ */

/* ── Pull-to-refresh ── */
#pullRefreshIndicator {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden;
  transition: height 0.25s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
#pullRefreshIndicator .ptr-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--bg-4);
  border-top-color: var(--ac);
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
}
#pullRefreshIndicator.pulling .ptr-spinner { opacity: 1; }
#pullRefreshIndicator.refreshing .ptr-spinner {
  opacity: 1; animation: ptrSpin 0.7s linear infinite;
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ── Offline banner ── */
#offlineBanner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--red-dim);
  border-bottom: 1px solid var(--red);
  color: var(--red); font-size: 13px; font-weight: 500;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
#offlineBanner.show { transform: translateY(0); }
#offlineBanner svg { width: 16px; height: 16px; flex-shrink: 0; }
#onlineToast {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-60px);
  z-index: 9001;
  padding: 8px 20px; border-radius: 20px;
  background: var(--green-dim); border: 1px solid var(--green);
  color: var(--green); font-size: 13px; font-weight: 500;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
#onlineToast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {

  /* ── Long-press: suppress text selection on messages during hold ── */
  .msg.lp-active { user-select: none; -webkit-user-select: none; }
  /* MOBILE_NO_LP_SCALE_V1 - removed transform:scale(0.97) on long-press; user disliked the "mendelep" press dent.
     Haptic vibration + bottom sheet are enough feedback. */

  /* ── Swipe-to-reply indicator (DISABLED) ── */
  /* 
  .msg { position: relative; }
  .msg .swipe-reply-icon {
    position: absolute; right: -36px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ac-dim); color: var(--ac);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
  }
  .msg.swiping .swipe-reply-icon { opacity: 1; }

  /* ── Reply quote bar ── */
  #replyQuoteBar {
    display: none; align-items: center; gap: 10px;
    padding: 8px 14px; margin: 0;
    background: var(--bg-2); border-left: 3px solid var(--ac);
    border-radius: 0 8px 8px 0;
    font-size: 12px; color: var(--tx-2); line-height: 1.4;
    max-height: 60px; overflow: hidden;
  }
  #replyQuoteBar.show { display: flex; }
  #replyQuoteBar .rq-text { flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #replyQuoteBar .rq-close {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--tx-3); cursor: pointer;
  }
  #replyQuoteBar .rq-close:hover { background: var(--bg-3); }
  */

  /* ── Pinch-to-zoom overlay ── */
  #pinchZoomOverlay {
    position: fixed; inset: 0; z-index: 8000;
    background: rgba(0,0,0,0.85);
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  #pinchZoomOverlay.show { display: flex; }
  #pinchZoomOverlay img {
    max-width: 95vw; max-height: 90vh; object-fit: contain;
    border-radius: 8px; touch-action: pinch-zoom;
    transition: transform 0.2s ease;
  }
  #pinchZoomOverlay .pz-close {
    position: absolute; top: 16px; right: 16px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer;
  }
}
/* ══════════════════════════════════════════════════════════════
   MOBILE UX V3 - Slim topbar, model badge, dropdown, research, cleanup
   Marker: MOBILE_UX_V3
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Slim topbar: 38px ── */
  .topbar { height: calc(40px + var(--safe-t)) !important; min-height: calc(40px + var(--safe-t)) !important; padding-top: var(--safe-t) !important; align-items: center !important; }
  .topbar .top-menu,
  .topbar .top-ico {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
  }
  .topbar .top-menu svg,
  .topbar .top-ico svg { width: 16px !important; height: 16px !important; }
  .top-right { align-items: center !important; }

  /* ── Hide ALL top-right children except badge + three-dot ── */
  .top-right > * { display: none !important; }
  .top-right > #mobModelBadge { display: flex !important; }
  .mn.hide-model-sel .top-right > #mobModelBadge,
  .mn.hide-model-sel #mobModelDd { display: none !important; }
  .top-right > [data-v3-dots] { display: flex !important; }

  /* ── Hide model pill from input bar ── */
  .mode-wrap { display: none !important; }

  /* ── Kill pull-to-refresh ── */
  #pullRefreshIndicator { display: none !important; }

  /* ── Force hide pinch-zoom close button (leaks through display:none parent) ── */
  #pinchZoomOverlay:not(.show) { visibility: hidden !important; }

  /* ── Hide old research banner ── */
  #researchBanner.research-banner { display: none !important; }

  /* ── Model badge ── */
  #mobModelBadge {
    display: flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px;
    background: var(--bg-3); cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--tx-2);
    line-height: 24px; height: 24px; max-height: 24px;
    flex-shrink: 0; overflow: hidden;
    margin-top: auto; margin-bottom: auto;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none;
  }
  #mobModelBadge:active { background: var(--bg-4); }
  #mobModelBadge .badge-sub {
    font-size: 9px; font-weight: 500;
    color: var(--amber, #f59e0b);
    display: flex; margin-left: 2px;
    line-height: 24px;
  }
  #mobModelBadge.thinking .badge-sub { display: flex; align-items: center; }
  #mobModelBadge.thinking {
    background: rgba(245,158,11,0.15);
    color: var(--amber, #f59e0b);
  }
  #mobModelBadge .badge-chev {
    width: 10px; height: 10px; opacity: 0.5;
    transition: transform 0.2s;
  }
  #mobModelBadge.open .badge-chev { transform: rotate(180deg); }

  /* ── Dropdown ── */
  #mobModelDd {
    position: fixed; z-index: 700;
    background: var(--bg-2); border: 1px solid var(--bg-4);
    border-radius: 12px; padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    min-width: 180px;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
  }
  #mobModelDd.open {
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }
  #mobModelDd .dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px; color: var(--tx); cursor: pointer;
    border: none; background: none; width: 100%;
    font-family: var(--font-b); text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  #mobModelDd .dd-item:active { background: var(--bg-3); }
  #mobModelDd .dd-item.active { font-weight: 600; }
  #mobModelDd .dd-item.disabled { opacity: 0.35; }
  /* ── Colored dot indicator ── */
  #mobModelDd .dd-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; background: var(--bg-4);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  #mobModelDd .dd-item.active .dd-dot {
    transform: scale(1.25);
  }
  #mobModelDd .dd-item[data-model="lyt"] .dd-dot { background: var(--lyt); }
  #mobModelDd .dd-item[data-model="omni"] .dd-dot { background: var(--omni); }
  #mobModelDd .dd-item[data-model="adaptive"] .dd-dot { background: var(--adaptive); }
  #mobModelDd .dd-item.active[data-model="lyt"] .dd-dot { box-shadow: 0 0 8px var(--lyt-dim); }
  #mobModelDd .dd-item.active[data-model="omni"] .dd-dot { box-shadow: 0 0 8px var(--omni-dim); }
  #mobModelDd .dd-item.active[data-model="adaptive"] .dd-dot { box-shadow: 0 0 8px var(--adaptive-dim); }
  /* ── Active item tinted bg ── */
  #mobModelDd .dd-item.active[data-model="lyt"] { background: var(--lyt-dim); color: var(--lyt); }
  #mobModelDd .dd-item.active[data-model="omni"] { background: var(--omni-dim); color: var(--omni); }
  #mobModelDd .dd-item.active[data-model="adaptive"] { background: var(--adaptive-dim); color: var(--adaptive); }
  #mobModelDd .dd-check { display: none; }
  #mobModelDd .dd-tag {
    font-size: 10px; padding: 1px 6px; border-radius: 4px;
    margin-left: auto;
  }
  #mobModelDd .dd-item[data-model="lyt"] .dd-tag { background: var(--lyt-dim); color: var(--lyt); }
  #mobModelDd .dd-item[data-model="omni"] .dd-tag { background: var(--omni-dim); color: var(--omni); }
  #mobModelDd .dd-item[data-model="adaptive"] .dd-tag { background: var(--adaptive-dim); color: var(--adaptive); }
  #mobModelDd .dd-item.disabled .dd-tag { background: var(--bg-4); color: var(--tx-3); }
  #mobModelDd .dd-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  #mobModelDd .dd-label { font-size: 13px; }
  #mobModelDd .dd-desc { font-size: 10px; color: var(--tx-3); font-weight: 400; line-height: 1.2; }
  #mobModelDd .dd-div { height: 1px; background: var(--bg-4); margin: 4px 8px; }
  #mobModelDd .dd-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px; color: var(--tx); cursor: pointer;
    border: none; background: none; width: 100%;
    font-family: var(--font-b); text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  #mobModelDd .dd-toggle:active { background: var(--bg-3); }
  /* MOBILE_DEEP_THINK_PARITY_V1 - label+desc stack matches desktop ext-think-section */
  #mobModelDd .dd-toggle-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
  #mobModelDd .dd-toggle-label { font-size: 13px; font-weight: 700; color: var(--tx); }
  #mobModelDd .dd-toggle-desc { font-size: 10px; color: var(--tx-3); font-weight: 400; line-height: 1.2; }
  #mobModelDd .mini-tgl {
    width: 36px; height: 20px; border-radius: 10px;
    background: var(--bg-4); position: relative;
    transition: background 0.2s; flex-shrink: 0;
  }
  #mobModelDd .mini-tgl::after {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
    transition: transform 0.2s;
  }
  #mobModelDd .mini-tgl.on { background: var(--amber, #f59e0b); }
  #mobModelDd .mini-tgl.on::after { transform: translateX(16px); }
  #mobModelDd .dd-reason { padding: 8px 10px 10px; }
  #mobModelDd .dd-reason-seg {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 3px;
    margin-top: 7px; padding: 3px; border: 1px solid var(--brd);
    border-radius: 8px; background: var(--bg-1);
  }
  #mobModelDd .dd-reason-seg button {
    padding: 6px 4px; border-radius: 5px; color: var(--tx-3);
    font-size: 11px; font-weight: 700;
  }
  #mobModelDd .dd-reason-seg button.on { color: var(--tx); background: var(--bg-3); }
  /* ── Dropdown backdrop (transparent, just catches taps) ── */
  #mobDdBd {
    position: fixed; inset: 0; z-index: 699;
    background: transparent; display: none;
  }
  #mobDdBd.show { display: block; }

  /* ── Research mode topbar ── */
  .topbar.research-active {
    background: rgba(245,158,11,0.12) !important;
  }
  .topbar .research-lbl {
    display: none; font-size: 12px; font-weight: 600;
    color: var(--amber, #f59e0b); align-items: center; gap: 6px;
    white-space: nowrap; margin-left: 4px; margin-right: auto;
  }
  .topbar.research-active .research-lbl { display: flex; }
  .research-lbl .res-exit {
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    background: rgba(245,158,11,0.2); color: var(--amber, #f59e0b);
    cursor: pointer; border: none; font-weight: 600;
    font-family: var(--font-b);
    -webkit-tap-highlight-color: transparent;
  }
  .research-lbl .res-exit:active { background: rgba(245,158,11,0.35); }

  /* ── Guest banner: below topbar, not overlapping ── */
  .guest-banner.show {
    position: absolute; top: calc(40px + var(--safe-t)); left: 0; right: 0;
    z-index: 9; padding: 6px 12px; font-size: .75rem;
  }
}