/* ---------------------------------------------------
   Mojoe Agent – ChatGPT-style layout (desktop + mobile)
   Works with the existing index.html markup + agent.js wiring.

   Key fixes:
   - Styles match your actual HTML classes (agent-hero-title, agent-empty, etc.)
   - Mobile-friendly sizing (readable text, more room for chat)
   - No horizontal overflow; attachments preview becomes a horizontal strip on mobile
--------------------------------------------------- */

/* =========================
   Container + header
========================= */

.panel.agent-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* critical for nested flex scrolling */

  /*
    IMPORTANT: Keep the chat composer visible.
    Without a viewport height cap, the panel grows forever as messages increase,
    and the user has to scroll the whole page to reach the input.
    This constrains the Agent panel to the viewport and makes only the history
    area scroll.
  */
  height: calc(100dvh - 170px);
  max-height: calc(100dvh - 170px);
  overflow: hidden;
}

@media (max-width: 760px) {
  .panel.agent-panel {
    height: calc(100dvh - 140px);
    max-height: calc(100dvh - 140px);
  }
}

.agent-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 2px 2px 8px;
  color: var(--sub);
}

.agent-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(51, 65, 110, 0.9);
  background: rgba(8, 12, 28, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.agent-model-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

#agentModelSelect {
  border: none;
  outline: none;
  background: transparent;
  color: #f9fafb;
  font-size: 13px;
  padding: 2px 22px 2px 6px; /* room for the chevron */
  appearance: none;
  max-width: min(420px, 70vw);
}

/* Dark option list */
#agentModelSelect option {
  background-color: #020617;
  color: #e5e7eb;
}

/* =========================
   Empty state (ChatGPT home)
========================= */

#agentEmptyState.agent-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 18px 12px;
}

.agent-hero-title {
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.agent-hero-hint {
  margin: 0;
  max-width: 720px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sub);
  opacity: 0.92;
}

.agent-hero-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(760px, 100%);
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(48, 57, 102, 0.95);
  background: rgba(9, 13, 28, 0.92);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

#agentHeroInput.agent-hero-input {
  flex: 1;
  border: 1px solid rgba(48, 57, 102, 0.7);
  background: rgba(2, 6, 23, 0.2);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  color: #fff;
  font-size: 14px;
}

#agentHeroInput::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

#agentHeroSend.agent-hero-send {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #fb37a0, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #020617;
}

#agentHeroSend:active {
  transform: translateY(1px);
}

/* =========================
   Chat shell
========================= */

#agentChatShell.agent-as-frame {
  flex: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(51, 65, 110, 0.95);
  background: radial-gradient(
      circle at 0 0,
      rgba(251, 113, 133, 0.12),
      rgba(15, 23, 42, 0.98)
    );
  overflow: hidden; /* internal scroll only */
}

#agentHistory.agent-chat-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 10px;
  overscroll-behavior: contain;
}

.agent-chat-bottom {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(48, 57, 102, 0.6);
  background: rgba(6, 10, 22, 0.75);
}

/* =========================
   Chat messages
========================= */

.agent-chat-message {
  max-width: 920px;
  margin: 0 auto 10px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(48, 57, 102, 0.95);
  background: rgba(9, 13, 28, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.agent-chat-message.from-user {
  margin-left: auto;
  margin-right: 0;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(251, 113, 133, 0.28),
      rgba(56, 189, 248, 0.26)
    ),
    rgba(9, 13, 28, 0.96);
  border-color: rgba(129, 140, 248, 0.85);
}

.agent-chat-message.from-agent {
  margin-left: 0;
  margin-right: auto;
  background: rgba(8, 12, 28, 0.96);
  border-color: rgba(51, 65, 110, 0.85);
}

.agent-chat-who {
  font-size: 11px;
  color: var(--sub);
  opacity: 0.9;
  margin-bottom: 4px;
}

.agent-chat-text {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* =========================
   Attachment thumbnails
========================= */

#agentImagePreview.agent-image-preview {
  max-width: 920px;
  margin: 0 auto 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-image-chip {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(48, 57, 102, 0.9);
  background: rgba(12, 18, 40, 0.95);
  position: relative;
}

.agent-image-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-attach-remove {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
}

.agent-attach-remove:active {
  transform: scale(0.96);
}

/* Sent-in-bubble thumbs */
.agent-chat-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.agent-chat-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(48, 57, 102, 0.9);
  background: rgba(12, 18, 40, 0.95);
}

/* =========================
   Input bar
========================= */

.agent-input-bar {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(9, 13, 28, 0.92);
  border: 1px solid rgba(48, 57, 102, 1);
}

#agentAttachBtn.agent-attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.8);
  background: rgba(15, 23, 42, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(148, 163, 184, 0.95);
  cursor: pointer;
}

/* Hide the native file input */
#agentFileInput.agent-file-input {
  display: none;
}

#agentInput.agent-input {
  flex: 1;
  min-height: 44px;
  max-height: 180px;
  border: 1px solid rgba(48, 57, 102, 0.7);
  background: rgba(2, 6, 23, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
}

#agentInput::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

/* Circular send button with arrow (hides button text) */
#agentSendBtn.agent-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #fb37a0, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0; /* hide text */
  color: transparent;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

#agentSendBtn::before {
  content: "↑";
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: #020617;
}

.agent-input-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--sub);
  opacity: 0.85;
}

/* =========================
   Scrollbar (chat only)
========================= */

#agentHistory::-webkit-scrollbar {
  width: 8px;
}

#agentHistory::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.8);
}

#agentHistory::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 999px;
}

#agentHistory::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* Utility: ensure hidden always works */
.hidden { display: none !important; }

/* =========================
   Mobile
========================= */

@media (max-width: 680px) {
  .panel.agent-panel {
    gap: 10px;
  }

  .agent-top-row {
    padding: 0 0 6px;
  }

  .agent-model-pill {
    width: 100%;
    justify-content: space-between;
  }

  #agentModelSelect {
    max-width: 100%;
  }

  #agentEmptyState.agent-empty {
    padding: 18px 10px;
    align-items: stretch;
    text-align: left;
    justify-content: flex-start;
  }

  .agent-hero-title {
    font-size: 18px;
    line-height: 1.2;
  }

  .agent-hero-input-row {
    width: 100%;
    border-radius: 16px;
    padding: 10px;
  }

  #agentHeroInput.agent-hero-input {
    font-size: 14px;
    padding: 10px 12px;
  }

  #agentHeroSend.agent-hero-send {
    width: 42px;
    height: 42px;
  }

  /* Give the chat a predictable size on mobile (more room than before) */
  #agentChatShell.agent-as-frame {
    min-height: 65dvh;
  }

  #agentHistory.agent-chat-history {
    padding: 10px 10px 8px;
  }

  .agent-chat-message {
    max-width: 100%;
    margin: 0 0 10px;
    border-radius: 16px;
  }

  .agent-chat-text {
    font-size: 14px;
    line-height: 1.45;
  }

  /* Attachments become a horizontal strip (saves vertical space) */
  #agentImagePreview.agent-image-preview {
    max-width: 100%;
    margin: 0 0 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  #agentImagePreview::-webkit-scrollbar {
    height: 6px;
  }

  #agentImagePreview::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
  }

  .agent-image-chip {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  .agent-input-bar {
    max-width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
    gap: 10px;
  }

  #agentAttachBtn.agent-attach-btn {
    width: 38px;
    height: 38px;
  }

  #agentSendBtn.agent-send-btn {
    width: 42px;
    height: 42px;
  }

  #agentInput.agent-input {
    font-size: 14px;
    min-height: 42px;
    max-height: 220px;
  }
}