/* === Mobile Adaptive Layout === */
/* Breakpoint: ≤768px phones/tablets, OR landscape phones (height ≤500px on touch) */

@media (max-width: 1200px), (max-height: 500px) and (pointer: coarse) {
  /* Hide desktop-only elements */
  .resizer,
  #bottom-bar {
    display: none !important;
  }

  html {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  body {
    height: 100%;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    padding-bottom: 56px;
  }

  #header {
    flex-shrink: 0;
    padding: 8px 12px;
  }

  #top-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 10px;
    gap: 6px 0;
  }

  .top-bar-left,
  .top-bar-right {
    flex: 0 0 auto;
  }

  .top-bar-left {
    display: block !important;
    overflow: visible;
    min-width: 0;
    max-width: calc(100vw - 70px);
    line-height: 1.5;
    font-size: 0;
    flex: none;
    gap: normal;
  }

  .top-bar-left .top-bar-logo {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: 0 4px 0 0;
    flex-shrink: unset;
  }

  #header-quote {
    font-size: 11px;
    line-height: 1.4;
    vertical-align: middle;
  }

  #share-quote-btn {
    display: inline-flex !important;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .top-bar-center {
    flex: 1 1 100%;
    order: 10;
    max-width: none;
    margin: 0;
  }

  #header-search-wrap {
    width: 100%;
  }

  #app {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0;
    gap: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* === Panel Pages === */
  #left-panel,
  #right-panel {
    position: absolute;
    inset: 0;
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 1;
  }

  #center-panel {
    position: absolute;
    inset: 0;
    flex: none !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0;
    gap: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 1;
  }

  #center-panel .panel-header {
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 4px;
  }

  #center-panel .panel-header-left { gap: 4px; }

  #notebook-date-label { font-size: 12px; }

  .notebook-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    padding: 0;
  }

  #notebook-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #center-panel .resizer[data-resize="goals"] { display: none !important; }

  #goals-section {
    margin: 0;
    overflow: hidden;
  }

  .mobile-notebook-active #goals-section,
  .mobile-calendar-active #goals-section,
  .mobile-editor-active #goals-section { display: none; }

  .mobile-goals-active #goals-section,
  .mobile-goals-active #goals-section.panel-collapsed {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10;
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* Prevent GPU-layer panels from stealing touch events on the goals view */
  .mobile-goals-active #center-panel,
  .mobile-goals-active #left-panel,
  .mobile-goals-active #right-panel {
    pointer-events: none;
  }
  .mobile-goals-active #goals-section,
  .mobile-goals-active #goals-section * {
    pointer-events: auto;
  }

  .mobile-goals-active #left-panel { transform: translateX(-100%); }
  .mobile-goals-active #right-panel { transform: translateX(100%); }

  #goals-container {
    flex: 1 1 0%;
    min-height: 0;
    padding: 8px 12px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    display: flex;
    flex-direction: column;
  }

  #goals-tree { flex: 1 1 auto; padding-bottom: 48px; }
  #goals-section .panel-header { padding: 8px 12px; }

  .panel-header { padding: 8px 12px; }
  .panel-header h2 { font-size: 13px; }

  .panel-scroll {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #calendar-grid { font-size: 12px; }
  .calendar-nav { padding: 6px 8px; }
  .calendar-nav button {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  #right-panel .panel-header { padding: 6px 8px; }
  #mode-tabs { gap: 2px; }
  .mode-tab {
    width: 28px;
    height: 28px;
    padding: 2px;
  }
  .mode-tab-icon {
    width: 16px;
    height: 16px;
  }

  /* === Panel Position States === */
  .mobile-notebook-active #center-panel { transform: translateX(0); z-index: 2; }
  .mobile-notebook-active #left-panel { transform: translateX(-100%); }
  .mobile-notebook-active #right-panel { transform: translateX(100%); }

  .mobile-calendar-active #left-panel { transform: translateX(0); z-index: 2; }
  .mobile-calendar-active #center-panel { transform: translateX(100%); }
  .mobile-calendar-active #right-panel { transform: translateX(200%); }

  .mobile-editor-active #right-panel { transform: translateX(0); z-index: 2; }
  .mobile-editor-active #center-panel { transform: translateX(-100%); }
  .mobile-editor-active #left-panel { transform: translateX(-200%); }

  /* === Mobile Bottom Navigation === */
  #mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    z-index: 1000;
    flex-shrink: 0;
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: color 0.15s;
    padding: 4px 2px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-btn.active { color: var(--accent); background: rgba(233, 69, 96, 0.08); }
  .mobile-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
  }
  .mobile-nav-btn.active .nav-icon { transform: scale(1.15); transition: transform 0.15s; }
  .mobile-nav-btn:active { transform: scale(0.92); transition: transform 0.1s; }
  .mobile-nav-btn .nav-icon { font-size: 20px; line-height: 1; transition: transform 0.15s; }
  .mobile-nav-btn .nav-label { font-size: 10px; line-height: 1; }

  /* === Touch Drag-and-Drop Floating Clone === */
  .mobile-drag-clone {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
    border: 1.5px solid var(--accent, #e94560);
    max-width: 85vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.12s ease, transform 0.12s ease;
    will-change: transform, left, top;
  }
  .mobile-drag-clone.visible {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.03);
  }

  .notebook-line.dragging {
    opacity: 0.35;
    background: var(--bg-tertiary, #f0f0f0);
    border-left: 3px solid var(--accent, #e94560);
    transition: opacity 0.15s ease, background 0.15s ease;
  }

  .mobile-drop-highlight {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: rgba(233, 69, 96, 0.08) !important;
  }

  .mobile-drop-edge-indicator {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.15s;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
  }
  .mobile-drop-edge-indicator.visible { opacity: 1; }

  .mobile-drop-edge-indicator.left-edge,
  .mobile-drop-edge-indicator.right-edge {
    top: 0;
    bottom: 56px;
    width: 48px;
    writing-mode: vertical-lr;
  }
  .mobile-drop-edge-indicator.left-edge { left: 0; }
  .mobile-drop-edge-indicator.right-edge { right: 0; }
  .mobile-drop-edge-indicator.top-edge {
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
  }

  /* === Drag handle — visible 6 dots for easy grab === */
  .drag-handle {
    display: flex !important;
    opacity: 0.5;
    flex-shrink: 0;
    touch-action: none;
    padding: 3px 4px;
  }
  /* Keep desktop 6-dot icons visible */
  .line-checkbox { display: none !important; }
  .brain-btn { display: none !important; }
  .brain-btn { display: none !important; }

  /* Mic button — appears only on focused line (via :focus-within) */

  .notebook-line {
    padding: 6px 4px;
    min-height: 40px;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .line-content[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
    -webkit-touch-callout: default;
    -webkit-user-modify: read-write;
    min-width: 44px;
    min-height: 24px;
    display: block;
  }

  .line-content[contenteditable="true"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .line-star { width: 14px; height: 14px; font-size: 10px; line-height: 14px; }
  .line-number { min-width: 18px; font-size: 10px; padding-top: 3px; }

  /* Menu button — always visible */
  .line-menu-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    font-size: 22px !important;
    line-height: 30px !important;
    background: none;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.7;
  }
  .line-menu-btn:active { opacity: 1; color: var(--accent); }

  /* Add line button */
  #add-line-bottom {
    padding: 12px;
    font-size: 14px;
    min-height: 44px;
  }

  #toolbar-toggle { display: none; }
  #format-toolbar { display: none !important; }

  .mode-content { padding: 8px; }

  .album-toolbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }
  .album-toolbar button,
  .album-toolbar input {
    min-height: 32px;
    min-width: 32px;
  }

  .checklist-item {
    padding: 8px;
    min-height: 40px;
  }
  .checklist-drag-handle { padding: 8px 6px; }

  .goal-item {
    padding: 8px 4px;
    min-height: 40px;
  }

  .goal-title { font-size: 13px; padding: 6px 4px; }
  .goal-checkbox { width: 24px; height: 24px; font-size: 14px; }

  #table-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .auth-container {
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
  }

  #toast-container { bottom: 64px !important; }

  .notebook-line.selected { background: rgba(233, 69, 96, 0.06); }

  body.mobile-swiping,
  body.mobile-dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  #add-line-bottom {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    z-index: 5;
  }

  .goal-linked-indicator {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .mobile-nav-btn .nav-label { font-size: 9px; }
  .mobile-nav-btn .nav-icon { font-size: 18px; }
  #mobile-nav { height: 50px; }
  body { padding-bottom: 50px; }
}