/* =============================================
       Responsive
       ============================================= */

    /* --- Tablet (max 900px) --- */
    @media (max-width: 900px) {
      .project-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
      .project-dashboard { grid-template-columns: 1fr 1fr; }
      .detail-header { padding: 0.35rem 0.75rem; gap: 0.75rem; }
      .detail-actions .btn span { display: none; }
      .explorer-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
      .file-viewer-backdrop { padding: 1rem; }
      .file-viewer { max-width: 100%; }
    }

    /* --- Mobile (max 768px) --- */
    @media (max-width: 768px) {
      .topbar { padding: 0.3rem 0.5rem; gap: 0.4rem; }
      .topbar-brand { font-size: 0.85rem; }
      .topbar-brand span { display: none; }
      .topbar-search { max-width: 180px; }
      .topbar-actions { gap: 0.4rem; }
      .home-container { padding: 0.75rem; }
      .project-grid { grid-template-columns: 1fr; gap: 0.75rem; }
      .project-tile { padding: 1rem 1rem 1rem 1.25rem; }
      .notes-grid { grid-template-columns: 1fr; }
      .detail-header { flex-wrap: wrap; padding: 0.3rem 0.5rem; gap: 0.5rem; }
      .detail-title-group { order: 2; flex-basis: 100%; }
      .detail-project-name { font-size: 1rem; }
      .detail-actions { order: 1; margin-left: auto; }
      .detail-body { flex-direction: column; }
      .project-dashboard { grid-template-columns: 1fr; padding: 0.75rem; gap: 0.75rem; }
      .chat-toolbar { flex-wrap: wrap; padding: 0.4rem 0.5rem; }
      .explorer-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
      .explorer-tile { padding: 0.75rem; }
      .file-viewer-backdrop { padding: 0.5rem; }
      .file-viewer-code { font-size: 0.72rem; padding: 0.5rem; }
      .file-viewer-lineno { width: 36px; padding-right: 0.5rem; }
      .modal { padding: 1.25rem; max-width: 95vw; }
      .system-stats-card { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
      .sys-stat-value { font-size: 1.1rem; }
      .blockers-panel { margin-bottom: 10px; }
      .blockers-header { padding: 12px; font-size: 0.9rem; }
      .blocker-card { padding: 12px; gap: 8px; }
      .blocker-title { font-size: 0.88rem; }
      .blocker-desc { font-size: 0.8rem; }
      .blocker-meta { font-size: 0.75rem; gap: 6px; }
      .blocker-actions { gap: 8px; }
      .blocker-actions button { padding: 8px 14px; font-size: 0.78rem; min-height: 36px; }
      .verify-dot { width: 10px; height: 10px; }
      .emma-toggle-btn .emma-topbar-name { display: none; }
      .emma-panel { top: 45px; height: calc(100vh - 45px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 45px - env(safe-area-inset-bottom, 0px)); }
      .emma-panel .emma-resize-handle { display: none; }
      .emma-panel-header { padding: 0.5rem 0.75rem; }
      .emma-header-actions button { width: 32px; height: 32px; }
      .emma-header-actions .emma-model-badge { display: none !important; }
      .emma-header-actions #emma-model { display: none; }
      .emma-header-actions #emma-fullscreen-btn { display: none; }
      /* Tab strip: pills on tablet */
      .emma-tab-strip { padding: 5px 8px; gap: 4px; }
      .emma-tab-browser { font-size: 0.7rem; padding: 3px 8px; }
      .emma-tab-browser .tab-close { opacity: 0.7; width: 18px; height: 18px; font-size: 0.7rem; }
      .emma-tab-browser .tab-stage-dot { width: 6px; height: 6px; }
      .tab-stage-label { font-size: 0.45rem; padding: 0 3px; }
      .tab-agents-row { display: none; }
      .tab-agent-dot { width: 5px; height: 5px; }
      .emma-tab-browser .tab-count { font-size: 0.45rem; padding: 0 3px; }
    }

    /* --- Small phone (max 480px) --- */
    @media (max-width: 480px) {
      .topbar { padding: 0.25rem 0.4rem; }
      .topbar-search { display: none; }
      .topbar-actions { gap: 0.25rem; }
      .btn.btn-ghost { width: 32px; height: 32px; padding: 0; }
      .btn.btn-ghost svg { width: 16px; height: 16px; }
      .autopilot-toggle-btn { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
      .autopilot-toggle-btn .autopilot-topbar-label { display: none; }
      #btn-new-project { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
      #hub-app-switcher button span { display: none; }
      .emma-toggle-btn { padding: 0.15rem 0.4rem; }
      .emma-toggle-btn .emma-topbar-name { display: none; }
      .emma-toggle-btn .emma-topbar-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
      .home-container { padding: 0.5rem; }
      .project-grid { gap: 0.5rem; }
      .project-tile { padding: 0.65rem 0.7rem 0.65rem 0.9rem; min-height: auto; }
      .tile-name { font-size: 0.88rem; }
      .tile-desc { font-size: 0.72rem; -webkit-line-clamp: 1; }
      .tile-meta { font-size: 0.65rem; gap: 0.4rem; }
      .tile-icon { font-size: 1.1rem; width: 28px; }
      .detail-header { padding: 0.5rem; }
      .detail-project-name { font-size: 0.95rem; }
      .back-btn { width: 32px; height: 32px; }
      .project-dashboard { padding: 0.5rem; gap: 0.5rem; }
      .app-tile { padding: 0.75rem; }
      .chat-toolbar select { font-size: 0.72rem; padding: 0.2rem 0.35rem; }
      .chat-input-area textarea { font-size: 0.85rem; }
      .explorer-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
      .file-viewer-backdrop { padding: 0; }
      .file-viewer { border-radius: 0; }
      .modal { padding: 1rem; border-radius: var(--radius-md); }
      .modal-title { font-size: 1rem; }
      .system-stats-card { grid-template-columns: 1fr; }
      .blocker-card { flex-direction: column; gap: 4px; padding: 12px 10px; }
      .blocker-icon { width: auto; }
      .blocker-actions { width: 100%; }
      .blocker-actions button { flex: 1; text-align: center; padding: 10px 8px; font-size: 0.8rem; min-height: 40px; }
      .emma-panel-header { padding: 0.4rem 0.5rem; gap: 0.35rem; }
      .emma-avatar { width: 28px; height: 28px; font-size: 0.75rem; }
      .emma-header-name { font-size: 0.8rem; }
      .emma-header-actions .emma-model-badge { display: none !important; }
      .emma-header-actions #emma-model { display: none; }
      .emma-header-actions #emma-fullscreen-btn { display: none; }
      /* Tab strip: pills on phone */
      .emma-tab-strip { padding: 4px 5px; gap: 3px; }
      .emma-tab-browser { flex: 1 1 0; min-width: 70px; font-size: 0.58rem; padding: 4px 8px; }
      .emma-tab-browser .tab-stage-dot { width: 5px; height: 5px; }
      .emma-tab-browser .tab-close { opacity: 0.75; width: 20px; height: 20px; font-size: 0.8rem; }
      .emma-tab-browser .tab-count { font-size: 0.42rem; padding: 0 3px; }
      .tab-stage-label { display: none; }
      .tab-agents-row { display: none; }
      .effort-badge { display: none; }
      .emma-profile-card { padding: 0.75rem; }
      .emma-todo-bar { max-height: 100px; }
      /* Orchestrator compact */
      .orch-view { padding: 0.6rem 0.7rem; font-size: 0.72rem; }
      .orch-title { font-size: 0.95rem; }
      .orch-task-card { padding: 0.35rem 0.4rem; }
      .orch-stage-badge { font-size: 0.55rem; padding: 0.05rem 0.25rem; }
    }

    /* Touch-friendly tap targets */
    @media (pointer: coarse) {
      button, .btn, .project-tile, .explorer-tile, .back-btn, .emma-header-actions button {
        min-height: 44px;
        min-width: 44px;
      }
      .emma-header-actions button { width: 36px; height: 36px; }
      select, input, textarea { min-height: 44px; }
      .chat-input-area textarea { min-height: 48px; }
      .blocker-actions button { min-height: 44px; min-width: 44px; padding: 8px 14px; }
      .blockers-header { min-height: 44px; }
    }

    /* =============================================
       Confirm Dialog
       ============================================= */
    .confirm-body {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
      line-height: 1.5;
    }

    .confirm-warning {
      font-size: 0.8rem;
      color: var(--amber);
      padding: 0.5rem 0.75rem;
      background: rgba(245,158,11,0.08);
      border-radius: var(--radius-sm);
      margin-top: 0.5rem;
    }

    /* =============================================
       Loading skeleton
       ============================================= */
    .skeleton {
      background: linear-gradient(90deg, rgba(22,25,42,0.75) 25%, rgba(28,32,55,0.7) 37%, rgba(139,92,246,0.08) 50%, rgba(28,32,55,0.7) 63%, rgba(22,25,42,0.75) 75%);
      background-size: 300% 100%;
      animation: skeleton-shimmer 1.8s ease-in-out infinite;
      border-radius: var(--radius-sm);
    }

    @keyframes skeleton-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* =============================================
       Inline edit
       ============================================= */
    .inline-edit {
      background: var(--bg-input);
      border: 1px solid var(--indigo);
      border-radius: var(--radius-sm);
      padding: 0.25rem 0.5rem;
      color: var(--text-primary);
      font-size: inherit;
      font-family: inherit;
      outline: none;
      width: 100%;
    }

    /* =============================================
       Dashboard Widget Grid
       ============================================= */
    .dash-widgets {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 0.6rem;
      margin-top: 0.75rem;
    }
    .dash-widget {
      background: linear-gradient(160deg, rgba(19,19,22,0.9), rgba(14,14,16,0.85));
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 0.7rem 0.85rem;
      position: relative;
      overflow: hidden;
      transition: border-color 200ms ease, transform 200ms ease;
    }
    .dash-widget:hover { border-color: var(--border-light); transform: translateY(-1px); }
    .dash-widget.widget-md { grid-column: span 2; }
    .dash-widget.widget-lg { grid-column: span 3; }
    .dash-widget-title {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .dash-widget-title .widget-icon { font-size: 0.75rem; }
    .dash-widget-body { font-size: 0.78rem; color: var(--text-primary); }
    .dash-widget-value {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.2;
      font-variation-settings: "opsz" 144, "SOFT" 40;
    }
    .dash-widget-sub {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
    }
    .dash-widget-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .dash-widget-bar {
      height: 3px;
      background: var(--bg-primary);
      border-radius: 2px;
      margin-top: 0.3rem;
      overflow: hidden;
    }
    .dash-widget-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width var(--transition-normal);
      box-shadow: 0 0 4px currentColor;
    }

    /* Widget add button */
    .dash-widget-add {
      background: transparent;
      border: 1px dashed var(--border-color);
      border-radius: var(--radius-sm);
      padding: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      color: var(--text-muted);
      font-size: 0.7rem;
      transition: all var(--transition-fast);
      min-height: 60px;
    }
    .dash-widget-add:hover {
      border-color: var(--indigo-light);
      color: var(--indigo-light);
      background: rgba(124,58,237,0.05);
    }
    .dash-widget-add svg { width: 14px; height: 14px; }

    .dash-widget { position: relative; }
    .dash-widget-rm {
      position: absolute; top: 4px; right: 4px;
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(255,255,255,0.06); border: none;
      color: var(--text-muted); font-size: 13px; line-height: 1;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.15s;
    }
    .dash-widget:hover .dash-widget-rm { opacity: 1; }
    .dash-widget-rm:hover { background: var(--rose); color: #fff; }

    /* Widget picker modal */
    .widget-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 0.5rem;
      max-height: 50vh;
      overflow-y: auto;
      padding: 0.5rem 0;
    }
    .widget-picker-item {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      padding: 0.6rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      text-align: center;
    }
    .widget-picker-item:hover {
      border-color: var(--indigo-light);
      background: rgba(124,58,237,0.08);
    }
    .widget-picker-item.already-added {
      opacity: 0.4;
      pointer-events: none;
    }
    .widget-picker-item .wp-icon { font-size: 1.3rem; margin-bottom: 0.25rem; }
    .widget-picker-item .wp-name { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
    .widget-picker-item .wp-size { font-size: 0.6rem; color: var(--text-muted); margin-top: 0.15rem; }

    @media (max-width: 600px) {
      .dash-widgets { grid-template-columns: 1fr 1fr; }
      .dash-widget.widget-md { grid-column: span 2; }
      .dash-widget.widget-lg { grid-column: 1 / -1; }
    }

    /* Keep legacy system-stats-card working as fallback */
    .system-stats-card {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
      padding: 1rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .sys-stat {
      text-align: center;
    }

    .sys-stat-label {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }

    .sys-stat-value {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .sys-stat-detail {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
    }

    .sys-stat-bar {
      height: 4px;
      background: var(--bg-primary);
      border-radius: 2px;
      margin-top: 0.35rem;
      overflow: hidden;
    }

    .sys-stat-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width var(--transition-normal);
      box-shadow: 0 0 6px currentColor;
    }

    @media (max-width: 600px) {
      .system-stats-card { grid-template-columns: 1fr; }
    }

    /* =============================================
       Dashboard Tiles Section
       ============================================= */
    .dash-tiles-section {
      margin-top: 1.5rem;
    }

    .dash-tiles-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem;
    }

    .dash-tiles-row {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding-bottom: 0.5rem;
    }

    .dash-tile {
      position: relative;
      flex: 0 0 auto;
      min-width: 200px;
      max-width: 280px;
      padding: 1rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .dash-tile:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); }

    .dash-tile-title {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }

    .dash-tile-close {
      position: absolute;
      top: 0.4rem;
      right: 0.4rem;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--text-muted);
      border-radius: 4px;
      opacity: 0;
      transition: opacity var(--transition-fast);
    }
    .dash-tile:hover .dash-tile-close { opacity: 1; }
    .dash-tile-close:hover { background: rgba(255,255,255,0.08); color: var(--rose); }
    .dash-tile-close svg { width: 12px; height: 12px; fill: currentColor; }

    .dash-tile-reorder {
      position: absolute;
      top: 0.4rem;
      right: 1.6rem;
      display: flex;
      gap: 1px;
      opacity: 0;
      transition: opacity var(--transition-fast);
    }
    .dash-tile:hover .dash-tile-reorder { opacity: 1; }

    .dash-tile-reorder button {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--text-muted);
      border-radius: 3px;
    }
    .dash-tile-reorder button:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
    .dash-tile-reorder button svg { width: 10px; height: 10px; fill: currentColor; }

    .dash-tile-link {
      display: block;
      color: var(--indigo-light);
      font-size: 0.85rem;
      text-decoration: none;
      word-break: break-all;
    }
    .dash-tile-link:hover { text-decoration: underline; }

    .dash-tile-note-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .dash-tile-activity-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.2rem 0;
      font-size: 0.8rem;
    }

    .dash-tile-activity-name {
      color: var(--text-primary);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }

    .dash-tile-activity-time {
      color: var(--text-muted);
      font-size: 0.7rem;
      flex-shrink: 0;
      margin-left: 0.5rem;
    }

    .file-row.is-file { cursor: pointer; }
    .file-row.is-file:hover { background: rgba(99,102,241,0.05); }

    /* =============================================
       Project Tile Stats
       ============================================= */
    .tile-stats {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.35rem;
      font-size: 0.7rem;
      color: var(--text-muted);
    }

    .tile-stats-item {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
    }

    .tile-stats-item svg { width: 10px; height: 10px; fill: currentColor; }

    /* =============================================
       Settings Modal
       ============================================= */
    .settings-field {
      margin-bottom: 1rem;
    }

    .settings-field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 0.3rem;
    }

    .settings-field select {
      width: 100%;
    }

    .tile-size-toggle {
      display: flex;
      gap: 0.5rem;
    }

    .tile-size-btn {
      flex: 1;
      padding: 0.5rem;
      text-align: center;
      background: var(--bg-input);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      color: var(--text-secondary);
      font-size: 0.8rem;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .tile-size-btn.active {
      border-color: var(--indigo);
      color: var(--indigo-light);
      background: rgba(124,58,237,0.1);
      box-shadow: 0 0 8px rgba(124,58,237,0.15);
    }

    .tile-size-btn:hover { border-color: var(--border-light); }

    /* Grid size variants */
    .project-grid.grid-small { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .project-grid.grid-medium { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .project-grid.grid-large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

    /* Widget Settings Modal */
    .widget-setting-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      border-bottom: 1px solid var(--border-color);
    }
    .widget-setting-item:last-child { border-bottom: none; }
    .widget-setting-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
    }
    .widget-setting-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .widget-setting-title {
      font-weight: 600;
      color: var(--text-primary);
    }
    .widget-setting-desc {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
  
    /* Collapsed navigation: when app is expanded, merge bars into breadcrumb */
    .detail-container.app-active .detail-header {
      display: none;
    }
    .detail-container.app-active .app-expanded-bar {
      padding: 0.3rem 1rem;
      gap: 0.5rem;
    }
    .app-breadcrumb {
      display: none;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-right: auto;
    }
    .app-breadcrumb a {
      color: var(--text-muted);
      text-decoration: none;
      cursor: pointer;
      transition: color var(--transition-fast);
    }
    .app-breadcrumb a:hover {
      color: var(--text-primary);
      text-decoration: none;
    }
    .app-breadcrumb .bc-sep {
      font-size: 0.65rem;
      opacity: 0.5;
    }
    .app-breadcrumb .bc-current {
      color: var(--text-primary);
      font-weight: 600;
    }
    .detail-container.app-active .app-breadcrumb {
      display: flex;
    }
    .detail-container.app-active .app-expanded-title {
      display: none;
    }

  
    /* Topbar breadcrumb trail - shown when inside a project */
    .topbar-breadcrumb {
      display: none;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      min-width: 0;
    }
    .topbar-breadcrumb .tbc-sep {
      font-size: 0.65rem;
      opacity: 0.4;
      flex-shrink: 0;
    }
    .topbar-breadcrumb .tbc-link {
      color: var(--text-secondary);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color var(--transition-fast);
    }
    .topbar-breadcrumb .tbc-link:hover {
      color: var(--text-primary);
    }
    .topbar-breadcrumb .tbc-current {
      color: var(--text-primary);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* When in a project: show breadcrumb, hide search */
    body.in-project .topbar-breadcrumb {
      display: flex;
    }
    body.in-project .topbar-search {
      display: none;
    }
    /* When in a project: hide brand text so breadcrumb owns the "Project Hub" label — avoids duplication */
    body.in-project .topbar-brand span {
      display: none;
    }
    /* Make topbar-brand clickable look */
    body.in-project .topbar-brand {
      opacity: 0.8;
      transition: opacity var(--transition-fast);
    }
    body.in-project .topbar-brand:hover {
      opacity: 1;
    }

    /* When app is expanded inside a project: hide detail-header AND app-expanded-bar entirely,
       the breadcrumb in the topbar handles all navigation */
    body.in-project.in-app .detail-header {
      display: none;
    }
    body.in-project.in-app .app-expanded-bar {
      display: none;
    }
    /* Prevent page scroll when app preview is open */
    body.in-app,
    html:has(body.in-app) {
      overflow: hidden;
      height: 100vh;
      height: 100dvh;
    }
    /* Preview iframe: position fixed below topbar — bypasses flex chain issues on mobile */
    body.in-project.in-app .panel-preview.active {
      position: fixed;
      top: var(--topbar-h, 45px);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
    }

    /* Todo tile delete button - show on row hover */
    .app-tile-body div[style*="flex-direction:column"] > div:hover > span:last-child {
      opacity: 1 !important;
    }

  
/* One-tap re-authentication alert (Command Center) */
.cc-reauth-alert{
  margin: 12px 0;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(239,68,68,0.08));
  border: 2px solid rgba(248,113,113,0.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: reauthPulse 1.5s ease-in-out infinite;
  text-align: center;
}
@keyframes reauthPulse {
  0%, 100% { border-color: rgba(248,113,113,0.5); box-shadow: 0 0 0 rgba(248,113,113,0); }
  50%      { border-color: rgba(248,113,113,1);   box-shadow: 0 0 24px rgba(248,113,113,0.6); }
}
.cc-reauth-title  { font-size: 0.85rem; font-weight: 800; color: #fecaca; margin-bottom: 6px; }
.cc-reauth-detail { font-size: 0.7rem;  color: #fca5a5;  margin-bottom: 12px; }
.cc-reauth-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 10px;
  background: #ef4444;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
}
.cc-reauth-btn:active { transform: scale(0.96); }
.cc-reauth-input {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(248,113,113,0.4);
  background: rgba(0,0,0,0.2);
  color: #fecaca;
  margin-bottom: 10px;
  font-family: monospace;
  font-size: 0.8rem;
  box-sizing: border-box;
}