/* Gachiakuta.eu Horizon — amélioration progressive, sans modifier la charte existante. */
:root {
  --kione-motion-factor: 1;
  --kione-smart-surface: #ffffff;
  --kione-smart-border: rgba(35, 43, 74, .14);
}
@supports (color: color-mix(in srgb, white 50%, black)) {
  :root {
    --kione-smart-surface: color-mix(in srgb, #fff 96%, #eef2ff);
    --kione-smart-border: color-mix(in srgb, currentColor 14%, transparent);
  }
}

html[data-performance-mode="eco"] *,
html[data-performance-mode="eco"] *::before,
html[data-performance-mode="eco"] *::after {
  scroll-behavior: auto !important;
}
html[data-performance-mode="eco"] .panel,
html[data-performance-mode="eco"] .book-card,
html[data-performance-mode="eco"] .dialog {
  backdrop-filter: none !important;
  filter: none !important;
}

.search { position: relative; }
.smart-command-button {
  min-width: 58px;
  padding-inline: 10px;
  font-size: .72rem;
  white-space: nowrap;
  opacity: .72;
}
.smart-command-button:hover,
.smart-command-button:focus-visible { opacity: 1; }

.kione-smart-results {
  position: absolute;
  z-index: 80;
  inset: calc(100% + 8px) 0 auto 0;
  max-height: min(56vh, 430px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--kione-smart-border);
  border-radius: 16px;
  background: var(--kione-smart-surface);
  box-shadow: 0 18px 50px rgba(20, 26, 55, .18);
}
.kione-smart-result {
  width: 100%;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}
.kione-smart-result span { font-size: .78rem; opacity: .7; }
.kione-smart-result:hover,
.kione-smart-result.selected,
.kione-smart-result:focus-visible { background: rgba(53, 78, 220, .09); }
.kione-smart-empty { padding: 10px 12px; margin: 0; }

.kione-palette-backdrop {
  position: fixed;
  z-index: 10000;
  inset: 0;
  padding: max(6vh, 28px) 18px 18px;
  background: rgba(16, 21, 43, .48);
  backdrop-filter: blur(10px);
}
.kione-palette-backdrop[hidden] { display: none !important; }
.kione-palette {
  width: min(720px, 100%);
  max-height: min(82vh, 720px);
  margin: 0 auto;
  padding: 18px;
  border-radius: 24px;
  background: var(--kione-smart-surface);
  box-shadow: 0 32px 90px rgba(8, 12, 32, .32);
  overflow: auto;
}
.kione-palette header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.kione-palette h2 { margin: 3px 0 0; }
.kione-palette-input {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
  margin-bottom: 10px;
}
.kione-palette-results { display: grid; gap: 4px; }
body.palette-open { overflow: hidden; }

.kione-continuity {
  position: fixed;
  z-index: 9500;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 68px));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--kione-smart-border);
  border-radius: 18px;
  background: var(--kione-smart-surface);
  box-shadow: 0 18px 50px rgba(20, 26, 55, .18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity calc(180ms * var(--kione-motion-factor)) ease, transform calc(180ms * var(--kione-motion-factor)) ease;
}
.kione-continuity.visible { opacity: 1; transform: translateY(0); }
.kione-continuity > span { flex: 1; font-weight: 650; }

html[data-pointer="coarse"] .kione-smart-result { min-height: 52px; }

@media (max-width: 860px) {
  .smart-command-button { display: none; }
  .kione-smart-results { position: fixed; inset: 72px 12px auto 12px; max-height: 56vh; }
  .kione-palette-backdrop { padding-top: max(18px, env(safe-area-inset-top)); }
  .kione-palette { border-radius: 20px; max-height: 92vh; }
  .kione-continuity { left: 12px; right: 12px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 68px)); }
}

@media (prefers-reduced-motion: reduce) {
  .kione-continuity { transition: none; }
  .kione-palette-backdrop { backdrop-filter: none; }
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-block: 10px 18px;
}
.diagnostic-grid .mini-card { min-height: 150px; }
@media (max-width: 760px) {
  .diagnostic-grid { grid-template-columns: 1fr; }
}