/* =========================================================
   07-components.chat.css
   Chat stream + composer, responsive & mobile-friendly
========================================================= */

.chat-with-bot-container,
.display-bot-memory-container {
  /* height: calc(var(--vh, 1vh) * 100 - var(--topbar-height)); */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 1250px) {
  .chat-with-bot-container,
  .display-bot-memory-container {
    /* height: calc(var(--vh, 1vh) * 100 - (var(--space-5) * 2)); */
    height: 100%;
  }
}

.chat-shell-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.logout-top-button {
  align-self: flex-end;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.logout-top-button:hover { box-shadow: var(--shadow-sm); }

/* .model-selector select {
  width: min(420px, 100%);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
} */

/* Conversation stream */
.full-conversation {
  flex: 1;
  min-height: 0;
  padding: var(--space-4);
  overflow: auto;
  scroll-behavior: smooth;
}

/* Composer pinned at bottom */
.chat-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: calc(var(--space-3) + var(--safe-bottom));
}

/* Composer box */
.input-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.text-row { display: flex; }

.text-input {
  flex: 1;
  min-width: 120px;
  border: 1px solid transparent;
  outline: none;
  padding: 12px 12px;
  font-size: 15px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
}

.text-input:focus-visible {
  border-color: rgba(16, 163, 127, 0.35);
  box-shadow: var(--ring);
}

.button-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.input-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input-icons label,
.icon-button {
  cursor: pointer;
  font-size: 16px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
}

.icon-button {
  background: var(--surface);
}

.send-button{
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background-image: linear-gradient(120deg, #afe5ff, #cfb7ff);
  color: #0f172a;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 650;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  box-shadow: 0 14px 30px rgba(162, 117, 255, 0.25);
}

.send-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(162, 117, 255, 0.30);
}

.send-button:active{
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 600px) {
  .button-row {
    flex-direction: column;
    align-items: stretch;
  }
  .send-button { width: 100%; }
}

/* //////////////////////////////////////////////// */

/* ===== Composer overflow fix (icons + labels never fall outside) ===== */

/* Ensure the composer can shrink without pushing children out */
.chat-container,
.input-box{
  width: 100%;
  max-width: 100%;
}

/* Avoid clipping when things wrap */
.input-box{
  overflow: visible;          /* important */
}

/* Main row that holds icons group + send button */
.button-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* important: allow wrap */
  width: 100%;
}

/* Icons cluster wraps internally instead of spilling out */
.input-icons{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;            /* important */
  min-width: 0;
  flex: 1 1 auto;             /* take remaining space */
}

/* Make each icon/label stable and visible */
.input-icons label,
.input-icons .icon-button{
  flex: 0 0 auto;             /* don't shrink into invisibility */
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Send button stays on same line when possible, wraps below if needed */
.send-button{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Small screens: send becomes full-width and moves below */
@media (max-width: 600px){
  .send-button{
    width: 100%;
  }
}

/* Hide native file inputs completely (removes "No file selected") */
.input-box input[type="file"],
#pdfFile{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep memory panel hidden until explicitly opened */
.display-bot-memory-container {
  display: none;
}

/* //////////////////////////////////// */

/* Model selector – closed state */
.model-selector select{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs);
}

/* Options (works in some browsers; ignored in others) */
.model-selector select option,
.model-selector select optgroup{
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* hide PDF/file (📎) */ .chat-with-bot-container label[for="file-upload"]{display:none!important;}
/* hide Image (🖼️) */ .chat-with-bot-container label[for="image-upload"]{display:none!important;}
/* hide Microphone (🎤) */ .chat-with-bot-container .input-icons .icon-button[aria-label="Record voice"]{display:none!important;}
/* hide Speaker (🔊) */ .chat-with-bot-container .input-icons .icon-button[aria-label="Play response"]{display:none!important;}