/* ══════════════════════════════════════════════════════════════
   TACKIT — Mobile-first responsive & touch-friendly overrides
   Breakpoints: 640px (phone), 768px (tablet)
   Touch targets: minimum 44×44 px per WCAG 2.5.5 / Apple HIG
══════════════════════════════════════════════════════════════ */

/* ── Prevent iOS text inflation ──────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

/* ── Remove tap highlight on interactive board elements ──── */
.board,
.note,
.btn-vote,
.btn-delete,
.btn-add,
.btn-host,
.cp-btn,
.btn-welcome-dismiss,
.btn-primary {
  -webkit-tap-highlight-color: transparent;
}

/* ── Prevent the board canvas from triggering browser
   pan/zoom — our JS handles all gestures ─────────────────── */
.board {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   GATE SCREEN — join / login / register
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #gate {
    align-items: flex-start;
    padding: 1rem 0.75rem;
    padding-top: 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gate-card {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 12px;
  }

  .gate-title { font-size: 1.4rem; }

  /* 16 px minimum prevents iOS auto-zoom on input focus */
  .field-group input[type="text"],
  .field-group input[type="email"],
  .field-group input[type="password"],
  .field-group input[type="url"],
  .invite-code-input {
    font-size: 1rem;      /* 16 px */
    padding: 0.75rem 1rem;
    min-height: 48px;
  }

  .btn-primary,
  .btn-danger {
    min-height: 52px;
    font-size: 1.05rem;
    border-radius: 10px;
  }

  .gate-auth-links {
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.9;
  }

  /* Segmented control: full-height touch targets */
  .seg-btn { min-height: 48px; font-size: 1rem; }

  /* Setup invite-code box: stack on mobile */
  .invite-code-box {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .btn-copy-invite,
  .btn-regen-invite { min-height: 44px; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .toolbar {
    height: auto;
    min-height: 52px;
    padding: 6px 8px;
    gap: 5px;
    /* Horizontally scrollable so every button is reachable */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }

  /* Compress left section */
  .board-topic {
    max-width: 90px;
    font-size: 0.8rem;
  }
  .company-logo {
    height: 20px;
    max-width: 72px;
  }

  /* De-prioritised items: hidden to reduce toolbar clutter */
  .note-count-badge { display: none !important; }
  .zoom-controls    { display: none !important; } /* pinch-to-zoom replaces this */
  .online-indicator { display: none !important; }
  .user-chip        { display: none !important; }
  .cohost-badge     { display: none !important; }

  /* Bigger touch targets for every toolbar button */
  .btn-host,
  .btn-leave,
  .btn-text-tool,
  .btn-draw-tool {
    height: 40px;
    padding: 0 10px;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .btn-add {
    height: 40px;
    padding: 0 14px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  /* Larger colour swatches */
  .color-picker {
    padding: 0.3rem 0.65rem;
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .cp-btn {
    width: 26px;
    height: 26px;
  }
}

/* On very narrow screens collapse non-critical host buttons */
@media (max-width: 400px) {
  /* Hide text labels on secondary host buttons, keep them tappable */
  #btnParticipants,
  #btnExport,
  #btnEmbed {
    font-size: 0;       /* hide text */
    padding: 0;
    width: 40px;
    min-width: 40px;
  }
  /* Show only the emoji icon (first character of button text) */
  #btnParticipants::first-line,
  #btnExport::first-line,
  #btnEmbed::first-line {
    font-size: 0.82rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   NOTE CARDS
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .note {
    /* Fluid width: comfortable on phone without being too wide */
    width: clamp(190px, 72vw, 230px);
  }

  .note-header {
    padding: 0.45rem 0.5rem;
    gap: 0.35rem;
  }

  /* Drag handle: large enough to grab easily */
  .note-drag-handle {
    font-size: 1.15rem;
    padding: 4px 6px;
    min-width: 32px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
  }

  /* Vote button: 44 px minimum touch height */
  .btn-vote {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.78rem;
  }

  /* Delete button: 32×32 visible, tap area covered by min-height */
  .btn-delete {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  /* Note body: 16 px prevents iOS keyboard zoom on focus */
  .note-body {
    font-size: 1rem;    /* 16 px */
    min-height: 90px;
    padding: 0.7rem 0.75rem;
    line-height: 1.5;
  }
}

/* ══════════════════════════════════════════════════════════════
   MODALS — slide up from bottom on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    width: 100%;
    animation: mobileSlideUp 0.28s cubic-bezier(0.32, 1, 0.32, 1) both;
  }

  @keyframes mobileSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* All modal variants: full width */
  .modal-wide,
  .modal-embed,
  .modal-share,
  .modal-queue {
    max-width: 100%;
  }

  .modal-header { padding: 0.85rem 1rem; }

  /* Bigger close button */
  .modal-x {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .modal-body {
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer: wrap buttons so they each get enough width */
  .modal-footer {
    padding: 0.75rem 1rem 1.25rem; /* extra bottom padding for home bar */
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .modal-footer .btn-copy,
  .modal-footer .btn-secondary {
    flex: 1 1 80px;
    min-height: 48px;
    text-align: center;
    justify-content: center;
  }

  /* Data tables: scroll horizontally inside modal */
  .data-table {
    font-size: 0.78rem;
    min-width: 480px;
  }
  /* Wrap the table in a scrollable container */
  .modal-body > .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHARE MODAL — mobile layout
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .share-url-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .share-url-text {
    font-size: 0.82rem;
  }
  .share-copy-url-btn {
    min-height: 44px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  .share-social {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .share-soc-btn {
    flex: 1 1 80px;
    min-height: 48px;
  }
  .share-message {
    font-size: 1rem; /* 16 px — prevent iOS zoom */
  }
}

/* ══════════════════════════════════════════════════════════════
   MODERATION QUEUE MODAL
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .queue-layout {
    flex-direction: column !important;
  }
  .queue-list {
    max-height: 160px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid #1e1e40;
  }
  .queue-detail { padding: 0.75rem !important; }

  .btn-queue-approve,
  .btn-queue-reject,
  .btn-queue-skip {
    flex: 1;
    min-height: 48px;
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   WELCOME TOOLTIP
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .welcome-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .welcome-card {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.25rem 2rem; /* extra bottom for home bar */
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn-welcome-dismiss {
    min-height: 52px;
    font-size: 1rem;
    border-radius: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   BOARD WATERMARK — scale down on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .board-watermark {
    font-size: 28px;
    bottom: 8px;
    right: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDING PAGE — additional mobile improvements
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .lp-headline {
    font-size: 2rem;
    line-height: 1.18;
  }
  .lp-subheadline { font-size: 1rem; }

  .lp-hero-ctas { flex-direction: column; }

  .lp-btn {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .lp-nav-cta {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
  }

  .lp-board-mock {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH-ONLY CURSOR RESETS
   (hover cursors are meaningless on touch devices)
══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  .board,
  .note-drag-handle,
  .board.panning { cursor: default; }
}

/* ══════════════════════════════════════════════════════════════
   PORTRAIT MOBILE TOP BAR
   Replaces the desktop toolbar on phones / small tablets held
   in portrait orientation (≤768 px wide).
   Gate screen (z-index 9999) and modals sit above it safely.
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  /* ── Hide the desktop toolbar ─────────────────────────────── */
  .toolbar { display: none; }

  /* ── Show the mobile top bar ──────────────────────────────── */
  #mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: #ffffff;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    z-index: 200;
  }

  /* ── Brand zone ───────────────────────────────────────────── */
  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .brand-dot {
    width: 14px;
    height: 14px;
    background: #2bbc84;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .mobile-brand-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1a1a1a;
    user-select: none;
  }

  /* ── Actions zone ─────────────────────────────────────────── */
  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Shared button base */
  .mobile-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    border-radius: 7px;
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    white-space: nowrap;
  }

  /* Share: text label + icon — horizontal padding */
  .mobile-tb-share { padding: 0 8px; }

  /* Help & overflow: icon-only — fixed square */
  .mobile-tb-icon {
    width: 28px;
    padding: 0;
  }

  .mobile-tb-btn:active {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* ── Push board content below the fixed top bar ───────────── */
  /* toolbar is hidden so board would fill 100 vh; offset it so
     content starts below the 52 px bar (box-sizing:border-box
     means padding is included inside height: 100 vh).          */
  #app { padding-top: 52px; }

  /* ══════════════════════════════════════════════════════════
     FLOATING BOTTOM RAIL
     Pill-shaped toolbar centred at the bottom of the viewport.
     Handles device safe-area (home indicator on modern iPhones)
     via env(safe-area-inset-bottom).
  ══════════════════════════════════════════════════════════ */

  #mobile-rail {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.10);
    border-radius: 28px;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  }

  /* ── Colour dots ─────────────────────────────────────────── */
  .rail-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--dot-color);
    border: none;
    padding: 0;
    transition: box-shadow 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }

  .rail-dot:active { transform: scale(0.88); }

  /* Active state: white inner ring + colour outer ring */
  .rail-dot.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--dot-color);
  }

  /* ── Vertical divider ────────────────────────────────────── */
  .rail-divider {
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.10);
    margin: 0 2px;
    flex-shrink: 0;
  }

  /* ── Pan / cursor tool ───────────────────────────────────── */
  .rail-tool {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    color: #374151;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }

  .rail-tool:active { background: #e5e5e5; }

  /* ── Primary FAB ─────────────────────────────────────────── */
  .rail-fab {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e53e3e;
    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
  }

  .rail-fab:active {
    background: #c53030;
    transform: scale(0.92);
  }

  @media (prefers-reduced-motion: reduce) {
    .rail-dot,
    .rail-fab { transition: none; }
  }

}