/* =====================================================
   AI Assistant
   ===================================================== */

.ai-control {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: 20px;
}

/* #ai-input {
  width: 280px;

  height: 36px;

  padding: 0 12px;

  border: 1px solid #555;

  border-radius: 6px;

  background: #1a1d21;

  color: white;

  outline: none;
} */

#ai-input {
  width: min(500px, 40vw);

  height: 36px;

  padding: 0 12px;

  border: 1px solid #555;

  border-radius: 6px;

  background: #1a1d21;

  color: white;

  outline: none;
}

#ai-input:focus {
  border-color: #888;
}

#ai-ask-button {
  height: 36px;

  padding: 0 16px;

  border: none;

  border-radius: 6px;

  cursor: pointer;
}

#ai-ask-button:disabled {
  opacity: 0.5;

  cursor: wait;
}

/* =====================================================
   Overlay
   ===================================================== */

.ai-overlay {
  position: absolute;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;

  pointer-events: none;
}

/* =====================================================
   AI Window
   ===================================================== */

.ai-window {
  width: min(700px, 90%);

  max-height: 80%;

  display: flex;

  flex-direction: column;

  background: #171a1f;

  color: white;

  border: 1px solid #444;

  border-radius: 12px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  overflow: hidden;

  pointer-events: auto;
}

/* =====================================================
   Header
   ===================================================== */

.ai-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: #20242a;

  border-bottom: 1px solid #444;

  font-weight: bold;
}

#ai-close-button {
  width: 30px;

  height: 30px;

  border: none;

  background: transparent;

  color: white;

  font-size: 24px;

  cursor: pointer;
}

/* =====================================================
   Question
   ===================================================== */

.ai-question {
  padding: 14px 18px;

  background: #1d2127;

  border-bottom: 1px solid #333;

  font-weight: bold;
}

/* =====================================================
   Response
   ===================================================== */

.ai-response {
  padding: 20px;

  overflow-y: auto;

  line-height: 1.6;

  white-space: pre-wrap;
}

/* =====================================================
   Hidden
   ===================================================== */

.hidden {
  display: none !important;
}

/* =====================================================
   Small screens
   ===================================================== */

@media (max-width: 700px) {
  .ai-control {
    margin-left: 5px;
  }

  #ai-input {
    width: 180px;
  }
}