/* ============================================================
   Command Palette  (CMD+K / CTRL+K)
   ------------------------------------------------------------
   A floating, modal-ish overlay for fuzzy-searching every section,
   every common action, and global navigation. Designed to feel
   familiar to Linear/Raycast/Notion users.

   z-index policy:
     10040 backdrop
     10041 panel

   Lives above the drawer and section settings popup so opening the palette
   reads naturally, BUT we close the palette before executing actions
   so they never compete for focus.
   ============================================================ */

.cmdp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.cmdp-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cmdp-panel {
  position: fixed;
  z-index: 10041;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(85vh - 30px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 20, 24, 0.98), rgba(14, 14, 17, 0.98));
  color: #f3f3f5;
  box-shadow:
    0 30px 80px -28px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(var(--accent-rgb, 225 29 72), 0.18);
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cmdp-panel.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Search row ---- */
.cmdp-search-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cmdp-search-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.cmdp-search-icon svg { width: 18px; height: 18px; }
.cmdp-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1.3;
  font-family: inherit;
  padding: 2px 0;
}
.cmdp-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.cmdp-esc {
  flex-shrink: 0;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
  font-family: inherit;
}

/* ---- Result list ---- */
.cmdp-list {
  flex: 1;
  min-height: 80px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.cmdp-list::-webkit-scrollbar { width: 8px; }
.cmdp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.cmdp-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13.5px;
}

.cmdp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.cmdp-row + .cmdp-row { margin-top: 1px; }
.cmdp-row:hover { background: rgba(255, 255, 255, 0.03); }
.cmdp-row.is-selected {
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb, 225 29 72), 0.14), rgba(var(--accent-rgb, 225 29 72), 0.04)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb, 225 29 72), 0.85);
}

.cmdp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
}
.cmdp-icon svg { width: 15px; height: 15px; }
.cmdp-row.is-selected .cmdp-icon {
  background: rgba(var(--accent-rgb, 225 29 72), 0.18);
  color: rgba(255, 255, 255, 0.9);
}

.cmdp-text { flex: 1; min-width: 0; }
.cmdp-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #f3f3f5;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdp-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Footer kbd hints ---- */
.cmdp-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.015);
}
.cmdp-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin: 0 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.65);
}
.cmdp-footer kbd:first-child { margin-left: 0; }