/* Layout */
#app {
  display: flex;
  height: 90vh;
  gap: 18px;
  padding: 18px;
}
/* HAMBURGER ICON */
.hamburger {
  width: 32px;
  height: 26px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 10010;
}
.hamburger span {
  height: 4px;
  background: white;
  border-radius: 4px;
}

#sidebar.open {
  left: 0;
}

.get-started {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#getStartedBtn {
  background: #010314;
  color: #fff;
  border: 2px solid #7241ff;
  border-radius: 100px;
  padding: 16px 34px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 4px 15px #7744ffb2;
}

div#getStarted {
  flex-direction: column;
}

div#getStarted h1 {
  font-size: 54px;
  font-weight: 400;
  color: white;
  max-width: 500px;
  text-align: center;
  margin: 0px;
}
.page-id-3925 header.elementor.elementor-792.elementor-location-header {
  display: none;
}
.page-id-3925 footer.elementor.elementor-819.elementor-location-footer {
  display: none;
}

div#getStarted p {
  font-size: 18px;
}

#getStartedBtn:hover {
  transform: scale(1.05);
}
button#micBtn {
  background: transparent;
}
button#speakerBtn {
  background: transparent;
}
button.rename.small {
  background: transparent;
  padding: 0px;
}
button.del.small {
  background: transparent;
  padding: 0px;
}

aside#sidebar {
  width: 320px;
  background: var(--panel);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.theme-toggle {
  display: none;
}

.composer {
  display: none;
}

.input-row {
  background: white;
  max-width: 100%;
  margin: 0 auto;
  width: 70%;
  border-radius: 100px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  padding: 5px;
}

button#sendBtn {
  background: none;
  padding: 0px;
}

button#newChatBtn {
  background: #0058cc;
  color: white;
  border: 2px solid #ffffff66;
  padding: 16px 28px;
  width: 75%;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
}

main#chatArea {
  background: linear-gradient(180deg, black, #0058cc);
  border-top: 2px solid #664dff;
  border-radius: 16px;
  padding: 50px;
  color: white;
  padding-top: 0px;
  padding-bottom: 0px;
}

textarea#inputBox {
  border: none;
  font-size: 14px;
  color: black;
}

aside#sidebar {
  background: #001229;
  color: white;
}

#chatArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Sidebar top */
.brand {
  margin: 8px 0;
  font-weight: 700;
  font-size: 18px;
}

.controls {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-direction: column;
  margin-top: 10px;
}

.controls input {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e6e9ee;
  background: transparent;
}

input#searchChats {
  width: 100%;
  padding: 14px;
  border-color: #8080807d;
}

input#searchChats {
  margin-top: 10px;
}

/* Chats list */
.chats-list {
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  flex: 1;
}

.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-item:hover {
  background: #0058cc;
}

.chat-title {
  font-weight: 600;
}

.chat-snippet {
  color: white;
  font-size: 13px;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input#searchChats {
  color: white;
}

input#searchChats:focus {
  outline: none;
}

button#clearAllBtn {
  background: #0058cc;
  color: white;
  border: 2px solid #ffffff66;
  padding: 16px 28px;
  width: 75%;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
}

/* Sidebar bottom */
.sidebar-bottom {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  align-items: center;
  justify-content: space-between;
}

/* Main header */
.chat-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.chat-header h2 {
  margin: 0;
}

.chat-header small {
  color: var(--muted);
}

/* Messages area */
.messages-wrap {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.02));
  border-radius: 12px;
  flex: 1;
  overflow: auto;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100px;
  height: 100px;
}

/* Bubbles */
.msg {
  max-width: 75%;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.5;
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.msg.user {
  margin-left: auto;
  background: #feb425;
  color: black;
  border-bottom-right-radius: 6px;
}

.msg.assistant {
  margin-right: auto;
  background: #f1f3f5;
  color: #0b1220;
  border-bottom-left-radius: 6px;
  box-shadow: 0 6px 18px rgba(18, 24, 40, 0.06);
}

/* Typing indicator */
.typing {
  font-style: italic;
  color: var(--muted);
  padding: 8px;
}

/* Composer */
.composer {
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.predefined {
  display: flex;
  gap: 10px;
}

textarea#inputBox:focus {
  outline: none !important;
}

::-webkit-scrollbar {
  width: 10px;
}

div#predefined {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

button.del.small {
  display: flex;
  align-items: center;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0058cc;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0058cc;
}

.preset {
  background: transparent;
  border: 1px solid #eef2f4;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #cacad0;
}

.input-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.input-row textarea {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  resize: none;
  border: 1px solid #e6e9ee;
  min-height: 44px;
  background: var(--panel);
  color: var(--text);
}

.btn {
  padding: 10px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #dfe6ec;
  cursor: pointer;
}

.btn.primary {
  background: var(--accent);
  color: white;
  border: none;
}

.icon {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
}

/* small */
.small {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* responsive */
@media (max-width: 900px) {
  #app {
    padding: 8px;
  }

  .messages {
    margin: 0;
  }

  #chatArea {
    margin: 0;
  }
}

/* highlight for search matches */
.highlight {
  background: linear-gradient(90deg, #fffbcc, #fff0b2);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Danger */
.btn.danger,
.icon.danger {
  color: var(--danger);
  border-color: transparent;
  background: transparent;
}

/* spinning blob */
.logo-blob {
  display: inline-block;
  /* allow transforms */
  will-change: transform;
  /* hint for smoother anim */
  animation: blob-spin 6s linear infinite;
  /* optional: make the SVG rotate around its center reliably */
  transform-origin: 50% 50%;
}

/* slower/softer spin variant you can tweak */
@keyframes blob-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

button#getStartedBtn {
  margin-top: 10px;
}

/* ---------- Predefined Cards (center UI blocks) ---------- */

.predefined-cards {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 30px auto 15px;
  max-width: 900px;
}

.p-card {
  width: 250px;
  padding: 18px;
  background: #fff;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.25s ease;
  text-align: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
}

.p-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(0, 120, 255, 0.45);
}

.p-card span {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}

.p-card h3 {
  font-size: 18px;
  margin: 6px 0;
}

.p-card p {
  font-size: 13px;
  opacity: 0.8;
  color: black;
}

.p-card h3 {
  color: black;
}

/* ---------- Topic Tags Above Input ---------- */
.topic-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
div#predefinedQuestions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.tag {
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: 0.25s;
}

.tag:hover {
  background: #0058cc;
  transform: translateY(-3px);
}
div#predefinedQuestions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
button.btn.secondary {
  background: white;
}

.predefined-cards {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
  padding: 10px;
}
#chatArea {
  position: relative; /* parent needs relative positioning */
}

#predefinedCards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0px;
  padding-top: 0px;
}

.predefined-cards .card {
  flex: 1;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: black;
  align-items: flex-start;
}

.predefined-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.predefined-cards h3 {
  margin: 12px 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.predefined-cards p {
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.4;
}

.predefined-cards .icon {
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eceffe;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mic button animation */
.mic-active svg path {
  stroke: #ff4b5c;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    stroke-width: 1;
  }
  50% {
    stroke-width: 2;
  }
  100% {
    stroke-width: 1;
  }
}

/* SHOW HAMBURGER ONLY ON MOBILE */
@media (max-width: 768px) {
  main#chatArea {
    padding: 10px;
  }
  .input-row {
    width: 100%;
  }

  /* Hide sidebar by default on mobile */
  #sidebar {
    position: fixed;
  }
}

/*MOBILE + TABLET RESPONSIVE */
@media (max-width: 991px) {
  /* Show hamburger menu */
  .hamburger {
    display: flex;
  }
  div#getStarted h1 {
    font-size: 34px;
  }
  /* Collapse sidebar initially */
  aside#sidebar {
    position: fixed;
    top: 0;
    left: -330px; /* hide */
    height: 100vh;
    z-index: 99999;
    transition: left 0.3s ease;
  }

  /* When .open is applied → sidebar shows */
  aside#sidebar.open {
    left: 0;
  }

  /* Main content should take full width */
  #app {
    gap: 0;
    padding: 0;
  }

  main#chatArea {
    padding: 20px;
  }
}

.topics-grid {
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topics-grid .icon-box {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 8px 12px;
}

.topics-grid .icon-box:hover {
  cursor: pointer;
}

.topics-grid h3 {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}

.topics-grid .icon {
  padding: 0px;
}

/* Voice Conversation Mode Styles */
.voice-active {
  background-color: #10a37f !important;
  animation: pulse-voice 2s infinite;
  color: #fff !important;
}

button#speakerBtn {
  display: flex;
  align-items: center;
  gap: 2px;
}

@keyframes pulse-voice {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 163, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 163, 127, 0);
  }
}

.voice-active svg path {
  stroke: #fff !important;
}

.dark .voice-active {
  background-color: #10a37f !important;
}

/* Pause/Continue Button Styles */
.pause-container {
  position: absolute;
  left: 0px;
  top: 155%;
  transform: translateY(-50%);
}

.pause-btn {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 30px;
  padding: 8px 12px;
  color: #fff !important;
}

.pause-btn:hover {
  opacity: 1;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pause-btn svg {
  color: #666;
}

/* Dark theme support */
.dark .pause-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: #444;
}

.dark .pause-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dark .pause-btn svg {
  color: #ccc;
}

/* Message Actions Styles */
.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  transition: opacity 0.2s ease;
}

.action-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff !important;
}

.action-btn:hover {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #201e2d !important;
}

.action-btn svg {
  color: #666;
}

/* Dark theme support */
.dark .action-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: #444;
}

.dark .action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dark .action-btn svg {
  color: #ccc;
}

/* Tooltip Styles */
.tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 1000;
  animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Adjust message positioning for pause button */
.msg.assistant {
  position: relative;
}