/* Hábeis Chat — sidebar shell + flyout + temas */

:root,
html[data-hc-theme='light'] {
  --hc-shell-ink: #0f1b33;
  --hc-shell-muted: #5b6b86;
  --hc-shell-line: rgba(215, 224, 239, 0.9);
  --hc-shell-hover: rgba(31, 79, 214, 0.1);
  --hc-shell-brand: #1f4fd6;
  --hc-flyout-bg: #ffffff;
  --hc-flyout-ink: #0f1b33;
  --hc-flyout-muted: #5b6b86;
  --hc-flyout-line: #d7e0ef;
  --hc-flyout-hover: #eef3fb;
  --hc-flyout-shadow: 0 16px 40px rgba(15, 27, 51, 0.14);
}

html[data-hc-theme='dark'],
body.dark {
  --hc-shell-ink: #edf0f0;
  --hc-shell-muted: #b0b4ba;
  --hc-shell-line: #26262a;
  --hc-shell-hover: rgba(39, 129, 246, 0.2);
  --hc-shell-brand: #2781f6;
  --hc-flyout-bg: #1d1e24;
  --hc-flyout-ink: #edf0f0;
  --hc-flyout-muted: #b0b4ba;
  --hc-flyout-line: #26262a;
  --hc-flyout-hover: rgba(39, 129, 246, 0.18);
  --hc-flyout-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* —— Header (expandido: logo + nome + recolher) —— */
.hc-rail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  flex-shrink: 0;
}

.hc-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.hc-rail-logo-link {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.hc-rail-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px;
  object-fit: contain;
  display: block !important;
}

.hc-brand-name {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.03em;
  color: var(--hc-shell-ink);
  white-space: nowrap;
  line-height: 1.1;
}

/* botões ghost — sem caixinha */
.hc-icon-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--hc-shell-muted);
  cursor: pointer;
  display: inline-grid !important;
  place-items: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.hc-icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.hc-icon-btn:hover {
  background: var(--hc-shell-hover) !important;
  color: var(--hc-shell-brand);
}

.hc-rail-toggle {
  margin-left: auto;
}

/* tema no rodapé, junto do perfil */
.hc-shell-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 10px 8px;
  flex-shrink: 0;
}

aside.h-screen.flex.flex-col .hc-native-brand-row {
  display: none !important;
}

/* —— Modo rail —— */
body.hc-sidebar-rail aside.h-screen.flex.flex-col {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  max-width: 4.5rem !important;
}

body.hc-sidebar-rail .hc-rail-header {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 8px;
}

body.hc-sidebar-rail .hc-rail-brand {
  flex: none;
  justify-content: center;
}

body.hc-sidebar-rail .hc-brand-name {
  display: none !important;
}

body.hc-sidebar-rail .hc-rail-logo-link,
body.hc-sidebar-rail .hc-rail-logo {
  width: 32px !important;
  height: 32px !important;
}

/* no rail: só o chevron expandir, discreto sob o logo */
body.hc-sidebar-rail .hc-rail-toggle {
  margin-left: 0;
  width: 28px;
  height: 24px;
  color: var(--hc-shell-muted);
  opacity: 0.75;
}
body.hc-sidebar-rail .hc-rail-toggle:hover {
  opacity: 1;
}

body.hc-sidebar-rail .hc-shell-tools {
  justify-content: center;
  padding: 6px 4px 10px;
  order: 10; /* perto do rodapé se o aside for flex column */
}

body.hc-sidebar-rail aside > section:first-of-type {
  display: none !important;
}

body.hc-sidebar-rail aside nav .flex-1.truncate,
body.hc-sidebar-rail aside nav span.text-sm.font-medium.leading-5.flex-grow,
body.hc-sidebar-rail aside nav .i-lucide-chevron-up,
body.hc-sidebar-rail aside nav .i-lucide-chevron-down {
  display: none !important;
}

body.hc-sidebar-rail aside nav a,
body.hc-sidebar-rail aside nav [role='button'] {
  justify-content: center !important;
  max-width: none !important;
  padding-left: 0.45rem !important;
  padding-right: 0.45rem !important;
}

body.hc-sidebar-rail aside nav li.child-item,
body.hc-sidebar-rail aside nav .child-item,
body.hc-sidebar-rail aside nav ul.sidebar-group-children {
  display: none !important;
}

body.hc-sidebar-rail aside nav li.hc-flyout-open > [role='button'],
body.hc-sidebar-rail aside nav li.hc-flyout-open > a {
  background: var(--hc-shell-hover) !important;
  border-radius: 8px;
}

body.hc-sidebar-rail aside nav {
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}

body.hc-sidebar-rail aside > section:last-child {
  justify-content: center !important;
}
body.hc-sidebar-rail aside > section:last-child .flex-grow,
body.hc-sidebar-rail aside > section:last-child .truncate {
  display: none !important;
}

/* —— Flyout —— */
.hc-nav-flyout {
  position: fixed;
  z-index: 99999;
  min-width: 196px;
  max-width: 280px;
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--hc-flyout-line);
  background: var(--hc-flyout-bg);
  box-shadow: var(--hc-flyout-shadow);
  color: var(--hc-flyout-ink);
  font-family: inherit;
  animation: hc-flyout-in 120ms ease-out;
}

.hc-nav-flyout[hidden] {
  display: none !important;
}

@keyframes hc-flyout-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hc-nav-flyout-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-flyout-muted);
  padding: 4px 10px 8px;
}

.hc-nav-flyout-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--hc-flyout-ink) !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-nav-flyout-link:hover {
  background: var(--hc-flyout-hover);
  color: var(--hc-shell-brand) !important;
}