.brand-logo {
  width: 72px;
  height: 72px;
}

.topbar {
  height: 106px;
}

.hero {
  min-height: calc(100vh - 106px);
}

.ai-concierge {
  padding: 28px;
}

.ai-concierge h2 {
  margin-top: 18px;
}

.ai-concierge > p:not(.assistant-label) {
  margin-top: 0;
}

.ai-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 14px;
}

.ai-quick-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 108px;
  border: 1px solid #3c382f;
  background: #1c1c1c;
  color: #ddd7ca;
  padding: 10px 12px;
  cursor: pointer;
}

.ai-quick-actions button:hover,
.ai-quick-actions button:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
}

.ai-chat {
  height: 238px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #0b0b0b;
  scroll-behavior: smooth;
}

.ai-message {
  max-width: 88%;
  padding: 10px 12px;
  font-size: .9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ai-message.assistant {
  align-self: flex-start;
  background: #1b1a17;
  border-left: 2px solid var(--gold);
  color: #e3ddd1;
}

.ai-message.user {
  align-self: flex-end;
  background: var(--gold);
  color: #17130b;
  font-weight: 600;
}

.ai-message.loading {
  color: var(--muted);
  font-style: italic;
}

.ai-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.ai-form input {
  min-width: 0;
  border: 1px solid #39362f;
  background: #111;
  color: var(--text);
  padding: 12px;
  font-size: 1rem;
}

.ai-form input:focus {
  outline: 1px solid var(--gold);
  border-color: var(--gold);
}

.ai-form button,
.ai-handoff {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #17130b;
  padding: 11px 15px;
  font-weight: 700;
  cursor: pointer;
}

.ai-handoff {
  width: 100%;
  margin-top: 9px;
  background: transparent;
  color: var(--gold-2);
}

.ai-handoff:hover,
.ai-handoff:focus-visible {
  background: rgba(201, 168, 94, .1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .topbar {
    height: 88px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-logo {
    width: 58px;
    height: 58px;
  }

  .brand {
    gap: 9px;
  }

  .brand strong {
    font-size: .7rem;
  }

  .brand small {
    font-size: .52rem;
  }

  .hero {
    min-height: auto;
  }

  .ai-concierge {
    padding: 20px;
  }

  .ai-chat {
    height: 280px;
  }
}