/* ═══════════════════════════════════════════════════════════
   mobile-layout.css — Mobile responsive overrides
   Only loaded on all devices, but most rules are scoped to:
     @media (pointer: coarse)   → touch screens
     @media (max-width: 640px)  → narrow viewports
   Desktop behaviour is completely unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ── Real viewport height (set by MobileLayout.js) ──────── */
:root {
  --real-vh: 1vh; /* overwritten by JS on touch devices */
}

/* ═══════════════════════════════════════════════════════════
   1. Touch target sizing  (pointer: coarse = touchscreen)
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* Toolbar buttons */
  .tb-btn {
    min-height: 44px;
    padding: 0 12px;
  }

  /* Small icon buttons (search clear / search go) */
  .sm-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .sm-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Panel close button */
  .panel-close {
    width: 44px;
    height: 44px;
  }

  /* Dark-mode toggle */
  #btn-dark {
    width: 44px;
    height: 44px;
  }

  /* Color swatches in node panel */
  .cswatch {
    width: 32px;
    height: 32px;
  }

  /* Delete button in panel footer */
  .btn-del {
    padding: 12px;
    font-size: 14px;
  }

  /* Panel inputs */
  .pi {
    padding: 11px 12px;
    font-size: 14px;
  }
  textarea.pi {
    min-height: 110px;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. :active feedback  (replaces :hover on touch)
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  .tb-btn:active {
    background: rgba(255,255,255,0.09);
    color: #e2e8f0;
  }
  .tb-btn.active:active {
    background: var(--accent);
  }

  .sm-icon-btn:active {
    background: rgba(255,255,255,0.10);
    color: #e2e8f0;
  }
  .sm-go:active {
    background: rgba(99,102,241,0.25);
    color: var(--accent2);
  }

  .panel-close:active {
    background: #f1f5f9;
    color: #1e293b;
  }
  body.dark .panel-close:active {
    background: #1e2138;
    color: #dde1f0;
  }

  .sd-item:active {
    background: #f0f4ff;
  }
  body.dark .sd-item:active {
    background: #1e2138;
  }

  .cswatch:active {
    transform: scale(1.1);
  }

  .btn-del:active {
    background: #fecaca;
  }
  body.dark .btn-del:active {
    background: #3a1a1a;
  }

  .node:active {
    box-shadow: 0 4px 22px rgba(0,0,0,0.17);
    border-color: #cbd5e1;
  }
  body.dark .node:active {
    border-color: #363964;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  }

  .cio-btn-ghost:active {
    background: #f8fafc;
    color: #1e293b;
  }
  .cio-btn-primary:active:not(:disabled) {
    background: #4f46e5;
  }
}

/* ═══════════════════════════════════════════════════════════
   3. Toolbar responsive  (narrow screens)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  #toolbar {
    padding: 0 8px;
    gap: 3px;
    overflow-x: auto;
    /* hide scrollbar visually but keep scrollable */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #toolbar::-webkit-scrollbar { display: none; }

  /* Hide brand name to save space */
  .tb-brand { display: none; }

  /* Shrink separator */
  .tb-sep { margin: 0 2px; }

  /* Narrow buttons — icon + very short label */
  .tb-btn {
    padding: 0 8px;
    font-size: 12px;
    gap: 4px;
  }

  /* Search widget narrower */
  #sm-widget { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════
   4. Side Panel — bottom sheet on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  #panel {
    /* Override right-slide with bottom-slide */
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100% !important;
    height: 65%;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.12);

    /* Reset the translateX animation, use translateY instead */
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  #panel.open {
    transform: translateY(0);
  }

  /* Drag handle indicator */
  .panel-hd::before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
  }
  .panel-hd {
    position: relative;
    padding-top: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   5. InlinePrompt — bottom sheet on touch devices
      Overrides the JS-set left/top inline styles so the
      input is always visible above the soft keyboard.
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  #ip {
    position: fixed !important;
    left:   0    !important;
    right:  0    !important;
    bottom: 0    !important;
    top:    auto !important;
    width:  100% !important;
    z-index: 1000;
  }

  .ip-box {
    min-width: unset;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    border-left:   none;
    border-right:  none;
    padding: 16px 16px 28px;
    gap: 10px;
  }

  .ip-lbl  { font-size: 12px; }
  .ip-in   { font-size: 16px; padding: 11px 12px; } /* 16px prevents iOS zoom-on-focus */
  .ip-hint { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   6. Search dropdown — larger items on touch
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  .sd-item {
    padding: 12px 14px;
  }
  .sd-title { font-size: 14px; }
  .sd-sub   { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   7. CryptoIO Modal — full-width on small screens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  .cio-modal {
    width: calc(100vw - 16px);
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    border-radius: 14px;
  }
  .cio-modal.open { display: flex; }

  @keyframes cio-pop {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
  }

  /* Stack drop-zones vertically */
  .cio-zones {
    flex-direction: column;
    gap: 12px;
  }
  .cio-zone-sep { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   9. Long-press visual indicator on nodes
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  .node.lp-pending {
    /* Subtle pulse during long-press countdown */
    animation: lp-pulse .6s ease forwards;
  }

  @keyframes lp-pulse {
    0%   { box-shadow: var(--node-shadow); }
    60%  { box-shadow: 0 0 0 6px rgba(34,197,94,0.30), var(--node-shadow); }
    100% { box-shadow: 0 0 0 8px rgba(34,197,94,0.45), var(--node-shadow); }
  }
}

/* ═══════════════════════════════════════════════════════════
   10. Status bar — larger text on mobile
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  #status {
    font-size: 13px;
    padding: 8px 18px;
    bottom: 88px; /* lifted above FAB bar */
  }
}