/* PINECO Command Center — Mobile Overrides
   Active below 768px. Designed for 360–430px phone screens.
   - Bottom nav bar (thumb-friendly)
   - Single-column layouts
   - Touch targets ≥44px
   - Safe area insets for notched phones
*/

/* iOS safe area support */
@supports (padding: max(0px)) {
  .pc-header {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
}

/* ── Top tab nav (mobile only) ─ */
.pc-bottom-nav {
  display: none;
  position: fixed;
  top: 44px;  /* below fixed header */
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--bg-wall, #0b0f16);
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  z-index: 94;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.pc-bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}
.pc-bottom-nav a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-bottom-nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.15s;
  min-height: 30px;
}
.pc-bottom-nav a .bn-icon {
  font-size: 13px;
  margin-bottom: 0;
}
.pc-bottom-nav a.active {
  color: var(--blue);
  background: rgba(96, 165, 250, 0.12);
  border-bottom: 2px solid var(--blue);
}
.pc-bottom-nav a:active {
  background: rgba(255, 255, 255, 0.05);
}

/* ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Prevent any horizontal overflow at page level */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Hide top nav (we use bottom nav on mobile) */
  .pc-header .pc-nav {
    display: none !important;
  }

  /* Simplify header — logo only, fixed top */
  .pc-header {
    padding: 10px 14px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 95;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    height: 44px;
    box-sizing: border-box;
  }
  /* iOS safe area for fixed header */
  @supports (padding: max(0px)) {
    .pc-header {
      padding-top: max(10px, env(safe-area-inset-top)) !important;
    }
  }
  /* Reserve space for fixed header (44px) + tab nav (~38px) */
  body {
    padding-top: 82px !important;
  }
  .pc-header h1 {
    font-size: 13px !important;
    flex: 1;
  }
  .pc-header .pc-badge {
    font-size: 8px !important;
    padding: 1px 5px !important;
  }
  .pc-header .pc-meta {
    font-size: 9px !important;
    gap: 6px !important;
    margin-left: auto;
    flex-shrink: 0;
  }
  /* Hide all meta info on mobile — only keep the refresh button */
  .pc-header .pc-meta > span {
    display: none !important;
  }
  .pc-header .pc-refresh-btn {
    font-size: 11px !important;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    flex-shrink: 0;
  }
  /* Prevent header content from wrapping */
  .pc-header {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }
  .pc-header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Show top nav bar */
  .pc-bottom-nav { display: block; }

  /* Content padding */
  .main-wrap {
    padding: 10px 12px !important;
  }

  /* ── Dashboard (sample.html) ──────────────────── */
  .alert-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .alert-card {
    padding: 10px 12px !important;
  }
  .alert-card .value { font-size: 22px !important; }
  .alert-card .label { font-size: 9px !important; }
  .alert-card .sub {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .grid, .grid-row2, .grid-row3, .grid-3, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .card {
    padding: 10px 12px !important;
    min-height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .card h2 {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .card h2 .count {
    font-size: 10px !important;
  }
  .grid, .grid-row2, .grid-row3, .grid-3, .grid-2,
  .alert-bar {
    min-width: 0;
    max-width: 100%;
  }

  /* Pipeline: horizontal flex scroll with snap — compact cards */
  .pipeline {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .pipeline::-webkit-scrollbar { height: 5px; }
  .pipeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .pipeline-col {
    scroll-snap-align: start;
    flex: 0 0 72vw;
    min-height: auto !important;
    padding: 6px !important;
    box-sizing: border-box;
  }
  .pipeline-col-title {
    font-size: 9px !important;
    margin-bottom: 5px !important;
    padding: 3px 0 !important;
  }
  .pipeline-col-count {
    font-size: 9px !important;
    padding: 0 5px !important;
  }
  .card-item {
    padding: 5px 7px !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    line-height: 1.25;
  }
  .card-item .title {
    font-size: 10px !important;
    margin-bottom: 1px !important;
  }
  .card-item .deadline {
    font-size: 8px !important;
  }

  /* Approval queue — compact items */
  .approval-list {
    gap: 0 !important;
  }
  .approval-item {
    padding: 6px 8px !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  .approval-item .badge {
    padding: 1px 6px !important;
    font-size: 9px !important;
  }
  .approval-item .name {
    font-size: 11px !important;
  }
  .approval-item .when {
    font-size: 9px !important;
  }
  #approval-pager {
    padding: 6px 8px 0 !important;
    margin-top: 4px !important;
  }

  /* Timeline shrink */
  .timeline-item {
    grid-template-columns: 60px 1fr 45px !important;
    font-size: 10px !important;
  }

  /* Heatmap compact */
  .heatmap-table { font-size: 12px !important; }
  .heatmap-table th, .heatmap-table td { padding: 6px 4px !important; }
  .heatmap-table td { font-size: 13px !important; }

  /* Charts fixed height */
  .chart-wrap-sm {
    height: 200px !important;
  }

  /* Funnel compact */
  .funnel-row { grid-template-columns: 60px 1fr 44px !important; font-size: 11px !important; }
  .funnel-row .f-bar { height: 22px !important; }

  /* KPI grid stays 2×2 */
  .kpi-grid { gap: 8px !important; }
  .kpi-card { padding: 10px 6px !important; }
  .kpi-card .kpi-value { font-size: 22px !important; }

  /* ── Projects (projects.html) ─────────────────── */
  .proj-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .proj-summary .ss-card { padding: 10px !important; }
  .proj-summary .ss-value { font-size: 18px !important; }

  .proj-filters {
    padding: 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }
  .proj-filters .group {
    padding-right: 8px !important;
    border-right: none !important;
    flex-shrink: 0;
  }
  .proj-filters .group + .group { border-left: 1px solid var(--border); padding-left: 8px; }
  .proj-filters button {
    padding: 8px 12px !important;
    font-size: 11px !important;
    min-height: 36px;
  }
  .proj-filters .search-input {
    min-width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
  }
  .proj-filters .counter { display: none; }

  .proj-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .proj-card {
    padding: 12px !important;
    min-height: auto !important;
  }

  /* Project detail */
  .detail-head { padding: 14px !important; }
  .detail-title { font-size: 15px !important; }
  .detail-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .detail-panels { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── Approvals (approvals.html) ───────────────── */
  .ap-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ap-summary .ap-sum-card { padding: 10px 12px !important; }
  .ap-summary .v { font-size: 22px !important; }

  .ap-filters {
    padding: 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }
  .ap-filters .group {
    padding-right: 8px !important;
    border-right: none !important;
    flex-shrink: 0;
  }
  .ap-filters .group + .group { border-left: 1px solid var(--border); padding-left: 8px; }
  .ap-filters button {
    padding: 8px 12px !important;
    font-size: 11px !important;
    min-height: 36px;
  }
  .ap-filters .counter { display: none; }

  .ap-card {
    padding: 12px !important;
    overflow: hidden !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .ap-card * {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .ap-card .ap-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ap-card .ap-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    flex-shrink: 0;
  }
  .ap-card .ap-title-block {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }
  .ap-card .ap-title {
    font-size: 13px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  .ap-card .ap-subtitle {
    font-size: 10px !important;
    flex-wrap: wrap !important;
  }
  .ap-card .ap-subtitle .pill {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .ap-card .ap-body {
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .ap-card .ap-body .row {
    grid-template-columns: 64px 1fr !important;
  }
  .ap-card .ap-body .row .v {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .ap-card .ap-body .full {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .ap-card .ap-badges {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .ap-card .ap-badges .badge {
    white-space: normal !important;
    word-break: keep-all;
  }
  .ap-card .ap-actions {
    flex-direction: column;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .ap-card .ap-comment-input {
    width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
    min-height: 40px;
  }
  .ap-card .ap-btn-action {
    padding: 10px !important;
    font-size: 13px !important;
    min-height: 44px;
    flex: 1;
  }
  .ap-card .ap-actions-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* ── Office (office.html) ─────────────────────── */
  /* Unlock scrolling on mobile */
  .lego-body {
    height: auto !important;
    overflow: visible !important;
    min-height: 100vh;
  }
  .lego-body .main {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }
  /* Keep LEGO office visible — compact height */
  .lego-body .office {
    height: 55vh !important;
    min-height: 340px;
    max-height: 460px;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Scale down characters so they fit compact floor */
  .lego-body .office .lego-char {
    transform: translate(-50%, -80%) scale(0.58);
  }
  .lego-body .office .lego-zone-label {
    font-size: 7px !important;
    padding: 1px 5px !important;
  }
  .lego-body .office .lego-zone {
    border-width: 2px !important;
  }
  .lego-body .office .meeting-table {
    height: 36px !important;
  }
  .lego-body .office .meeting-table::after {
    font-size: 6px !important;
  }

  /* Humans at top row — flip bubble BELOW character to avoid tab overlap */
  .lego-body .lego-char.human .lego-bubble {
    bottom: auto !important;
    top: 100% !important;
    margin-top: 10px;
  }
  .lego-body .lego-char.human .lego-bubble::after {
    top: -12px;
    bottom: auto !important;
    border-top-color: transparent !important;
    border-bottom-color: var(--lego-black) !important;
  }
  .lego-body .lego-char.human .lego-bubble::before {
    top: -7px;
    bottom: auto !important;
    border-top-color: transparent !important;
    border-bottom-color: var(--lego-yellow) !important;
  }
  /* Status variant tails */
  .lego-body .lego-char.human.working .lego-bubble::before {
    border-bottom-color: var(--lego-green, #43a047) !important;
  }
  .lego-body .lego-char.human.thinking .lego-bubble::before {
    border-bottom-color: var(--lego-cyan, #00acc1) !important;
  }
  .lego-body .lego-char.human.error .lego-bubble::before {
    border-bottom-color: var(--lego-red, #e53935) !important;
  }


  /* Collapsible sections (agent list, feed, commands) */
  .pc-collapse {
    background: var(--bg-wall, #0b0f16);
    border-top: 3px solid var(--border);
  }
  .pc-collapse-head {
    background: var(--lego-red, #e53935);
    color: #fff;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    border-bottom: 3px solid var(--lego-black, #263238);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .pc-collapse-head.blue { background: var(--lego-blue, #1e88e5); }
  .pc-collapse-head.green { background: var(--lego-green, #43a047); }
  .pc-collapse-head .pc-caret {
    font-size: 10px;
    transition: transform 0.2s;
  }
  .pc-collapse.collapsed .pc-caret {
    transform: rotate(-90deg);
  }
  .pc-collapse-body {
    max-height: 50vh;
    overflow-y: auto;
    transition: max-height 0.25s ease-out;
  }
  .pc-collapse.collapsed .pc-collapse-body {
    max-height: 0;
    overflow: hidden;
  }

  /* Mobile agent list as collapsible */
  .mobile-agent-list {
    display: block !important;
    background: var(--bg-wall, #0b0f16);
    border-top: 3px solid var(--border);
  }
  .mobile-agent-list > h3 {
    background: var(--lego-green, #43a047) !important;
    color: #fff !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border-bottom: 3px solid var(--lego-black, #263238) !important;
    cursor: pointer !important;
    user-select: none;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .mobile-agent-list > h3::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s;
  }
  .mobile-agent-list.collapsed > h3::after {
    transform: rotate(-90deg);
  }
  #mobile-agent-cards {
    max-height: 50vh;
    overflow-y: auto;
    transition: max-height 0.25s ease-out;
  }
  .mobile-agent-list.collapsed #mobile-agent-cards {
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Side feed — force show as collapsible on mobile */
  .lego-body .side-feed {
    border-left: none !important;
    border-top: 3px solid var(--border) !important;
    height: auto !important;
    display: block !important;
  }
  .lego-body .side-feed > h3 {
    /* Convert to collapsible header */
    background: var(--lego-blue, #1e88e5) !important;
    color: #fff !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border-bottom: 3px solid var(--lego-black, #263238) !important;
    cursor: pointer !important;
    user-select: none;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .lego-body .side-feed > h3::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s;
  }
  .lego-body .side-feed.collapsed > h3::after {
    transform: rotate(-90deg);
  }
  .lego-body .side-feed > .legend,
  .lego-body .side-feed > .feed {
    transition: max-height 0.25s ease-out;
    overflow: hidden;
  }
  .lego-body .side-feed.collapsed > .legend,
  .lego-body .side-feed.collapsed > .feed {
    max-height: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .lego-body .side-feed > .feed {
    max-height: 45vh;
    overflow-y: auto;
  }
  .lego-body .side-commands { display: none !important; }
  .lego-body .side-feed {
    border-left: none !important;
    border-top: none !important;
    height: auto !important;
  }
  .mobile-agent-list {
    display: block !important;
    background: var(--bg-wall);
    padding: 0;
    overflow-y: auto;
  }
  .mobile-agent-list h3 {
    background: var(--lego-red, #e53935);
    color: #fff;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    border-bottom: 3px solid var(--lego-black, #263238);
  }
  .mobile-agent-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .mobile-agent-card:active { background: var(--bg-hover); }
  .mobile-agent-card .m-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-wall);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
  }
  .mobile-agent-card.human .m-avatar { border-color: #4ade80; }
  .mobile-agent-card.ai .m-avatar { border-color: #60a5fa; }
  .mobile-agent-card .m-avatar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-card);
    background: var(--text-dim);
  }
  .mobile-agent-card.working .m-avatar::after { background: #4ade80; }
  .mobile-agent-card.thinking .m-avatar::after { background: #60a5fa; }
  .mobile-agent-card.idle .m-avatar::after { background: #fbbf24; }
  .mobile-agent-card .m-body { flex: 1; min-width: 0; }
  .mobile-agent-card .m-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
  }
  .mobile-agent-card .m-role {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 1px;
  }
  .mobile-agent-card .m-task {
    font-size: 10px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-agent-card.working .m-task { color: #86efac; }
  .mobile-agent-card.thinking .m-task { color: #93c5fd; }
  .mobile-agent-card .m-kind {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 6px;
    margin-right: 3px;
  }
  .mobile-agent-card.human .m-kind { background: #14532d; color: #86efac; }
  .mobile-agent-card.ai .m-kind { background: #1e3a5f; color: #93c5fd; }

  /* Mobile command bar (bottom-docked on office page) */
  .lego-body .command-bar,
  .lego-body .cmd-input-box {
    position: fixed !important;
    bottom: 68px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90;
    border-top: 2px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
  }
}

/* ──  Very small screens (≤360px) ─ */
@media (max-width: 360px) {
  .alert-bar { grid-template-columns: 1fr !important; }
  .pipeline { grid-template-columns: repeat(7, 92vw) !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .pc-bottom-nav a .bn-icon { font-size: 18px; }
  .pc-bottom-nav a { font-size: 9px; }
}

/* Desktop: hide mobile elements */
@media (min-width: 769px) {
  .mobile-agent-list { display: none !important; }
  .pc-bottom-nav { display: none !important; }
}