/* ============================================================
   ORBIT COMMAND WHEEL (v60) — orbit-pwa/command-wheel.css
   Floating composer tool: a round icon button at the bottom-left
   of the chat box. Hovering / tapping it opens a command grid
   (quick actions + frequent + custom commands) that pops upward
   so it never covers the input. All colors consume the Orbit
   design tokens from style.css, so skins and the dark theme
   apply automatically.
   ============================================================ */

/* The wheel is a flex child of .composer-row: it floats at the
   left end of the input row, vertically centred on the input. */
.command-wheel {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  line-height: 0;
}

/* Elements inside the wheel use the class 'hidden' for open/close
   toggles (the global [hidden] rule handles attribute toggles).
   Scoped here so it can never collide with the rest of the shell. */
.command-wheel .hidden { display: none !important; }

/* Round floating button (44px tap target, same visual language
   as the send button: accent gradient + soft glow). */
.wheel-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-lo, #1f6feb), var(--accent, #58a6ff));
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 14px rgba(31, 111, 235, 0.35);
  transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wheel-btn:hover { filter: brightness(1.12); }
.wheel-btn:active { transform: scale(0.92); }
.wheel-btn:focus-visible { outline: 2px solid var(--accent-hi, #79c0ff); outline-offset: 2px; }

#wheel-icon { display: block; pointer-events: none; }

/* Popover grid — anchored above the button, aligned to its left. */
.wheel-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 340px;
  max-width: min(340px, calc(100vw - 40px));
  background: var(--bg-raise, #161b22);
  border: 1px solid var(--line-strong, #30363d);
  border-radius: var(--radius-l, 16px);
  box-shadow: var(--shadow-pop, 0 12px 30px rgba(1, 4, 9, 0.6));
  padding: 10px;
  z-index: 1500;
  animation: wheelPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: left bottom;
}

@keyframes wheelPop {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wheel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong, #30363d) transparent;
}

.wheel-inner::-webkit-scrollbar { width: 6px; }
.wheel-inner::-webkit-scrollbar-thumb { background: var(--line-strong, #30363d); border-radius: 3px; }

.wheel-section { min-width: 0; }
.wheel-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-4, #6e7681);
  margin: 0 4px 6px;
}

/* 3-across command grid. */
.wheel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.command-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 8px 4px;
  background: var(--bg-active, #21262d);
  border: 1px solid var(--line, #21262d);
  border-radius: var(--radius-m, 12px);
  color: var(--text-2, #b1bac4);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  touch-action: manipulation;
}

.command-item:hover {
  background: var(--bg-hover, #1c2128);
  border-color: var(--accent-line, rgba(88, 166, 255, 0.4));
  color: var(--text, #e6edf3);
}

.command-item:active { transform: scale(0.96); }
.command-item:focus-visible { outline: 2px solid var(--accent-hi, #79c0ff); outline-offset: 1px; }

.command-item .cmd-emoji { font-size: 17px; line-height: 1; }
.command-item .cmd-label {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Empty-state + add row. */
.wheel-empty {
  color: var(--text-4, #6e7681);
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-inset, #010409);
  border: 1px dashed var(--line-strong, #30363d);
  border-radius: var(--radius-m, 12px);
  padding: 8px 10px;
}

.wheel-add-row { display: flex; }

.wheel-add-btn {
  flex: 1;
  min-height: 38px;
  padding: 6px 12px;
  background: var(--bg-active, #21262d);
  border: 1px solid var(--line-strong, #30363d);
  border-radius: 999px;
  color: var(--accent-hi, #79c0ff);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  touch-action: manipulation;
}

.wheel-add-btn:hover { border-color: var(--accent-line, rgba(88, 166, 255, 0.4)); background: var(--bg-hover, #1c2128); }
.wheel-add-btn:focus-visible { outline: 2px solid var(--accent-hi, #79c0ff); outline-offset: 1px; }

/* Add / manage editor (shown inside the popover). */
.wheel-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--line-strong, #30363d);
  padding-top: 10px;
}

.wheel-editor-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-4, #6e7681);
}

.wheel-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #8b949e);
}

.wheel-editor input[type="text"],
.wheel-editor textarea,
.wheel-editor select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong, #30363d);
  border-radius: var(--radius-s, 8px);
  background: var(--bg-inset, #010409);
  color: var(--text, #e6edf3);
  font-family: inherit;
  font-size: 13px;
  color-scheme: dark;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wheel-editor textarea { min-height: 64px; resize: vertical; }
.wheel-editor input[type="text"]:focus,
.wheel-editor textarea:focus,
.wheel-editor select:focus {
  outline: none;
  border-color: var(--accent, #58a6ff);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(88, 166, 255, 0.12));
}

.wheel-editor-row { display: flex; gap: 8px; }
.wheel-editor-row .btn-cancel,
.wheel-editor-row .btn-save {
  flex: 1;
  min-height: 38px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.wheel-editor-row .btn-cancel {
  background: var(--bg-active, #21262d);
  border: 1px solid var(--line-strong, #30363d);
  color: var(--text-2, #b1bac4);
}

.wheel-editor-row .btn-save {
  background: linear-gradient(135deg, var(--accent-lo, #1f6feb), var(--accent, #58a6ff));
  border: none;
  color: #fff;
}

.wheel-editor-row .btn-save:disabled { opacity: 0.45; cursor: not-allowed; }

.wheel-editor-hint { font-size: 10.5px; color: var(--text-4, #6e7681); line-height: 1.45; margin: 0; }

/* Existing custom commands inside the editor. */
.wheel-cmd-list { display: flex; flex-direction: column; gap: 4px; }
.wheel-cmd-list-empty { font-size: 11.5px; color: var(--text-4, #6e7681); }

.wheel-cmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-inset, #010409);
  border: 1px solid var(--line, #21262d);
  border-radius: var(--radius-s, 8px);
  padding: 4px 6px 4px 10px;
}

.wheel-cmd-row button.wheel-cmd-edit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-2, #b1bac4);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
}

.wheel-cmd-row button.wheel-cmd-edit:hover { color: var(--text, #e6edf3); }
.wheel-cmd-row .wheel-cmd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wheel-cmd-del {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-4, #6e7681);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.wheel-cmd-del:hover { background: var(--danger-soft, rgba(248, 81, 73, 0.14)); color: var(--danger, #f85149); }

.wheel-status { font-size: 11px; color: var(--text-3, #8b949e); min-height: 0; }
.wheel-status.err { color: var(--danger, #f85149); }
.wheel-status.ok { color: var(--ok, #3fb950); }

/* ------------------------------------------------------------
   Flatten + Remember — one-click Backup / Deploy / Download
   target chips, one group per action, with a "✅ Last time"
   memory line under each group title. Same design tokens as the
   quick-action grid, so skins and the dark theme apply by default.
   ------------------------------------------------------------ */
.flatten-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.flatten-group {
  background: var(--bg-raise, #161b22);
  border: 1px solid var(--line-strong, #30363d);
  border-radius: var(--radius-m, 12px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.flatten-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.flatten-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2, #b1bac4);
  white-space: nowrap;
}

.flatten-proof {
  font-size: 10.5px;
  color: var(--ok, #3fb950);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flatten-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flatten-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-active, #21262d);
  border: 1px solid var(--line, #21262d);
  border-radius: 999px;
  color: var(--text-3, #8b949e);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.flatten-chip:hover {
  background: var(--bg-hover, #1c2128);
  border-color: var(--accent-line, rgba(88, 166, 255, 0.4));
  color: var(--text, #e6edf3);
}

.flatten-chip:active { transform: scale(0.96); }
.flatten-chip:focus-visible { outline: 2px solid var(--accent-hi, #79c0ff); outline-offset: 1px; }

.flatten-chip.on {
  background: var(--accent-soft, rgba(88, 166, 255, 0.16));
  border-color: var(--accent, #58a6ff);
  color: var(--text, #e6edf3);
}

.flatten-chip .flatten-chip-icon { font-size: 13px; line-height: 1; }