/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  background-color: #ffffff;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container to constrain width on larger screens */
/*
 * Layout container
 * The app container uses responsive widths: on very small devices it fills the
 * available width; as screen size increases, the maximum width grows so that
 * content does not remain fixed at 480px on tablets, laptops and desktops. This
 * makes the layout adaptive across phones, tablets and PCs.
 */
.app-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
  background-color: #ffffff;
  min-height: 100vh;
}

/* Medium screens (tablets, small laptops) */
@media (min-width: 600px) {
  .app-container {
    max-width: 600px;
  }
}

/* Larger laptops */
@media (min-width: 900px) {
  .app-container {
    max-width: 800px;
  }
}

/* Desktops and very large screens */
@media (min-width: 1200px) {
  .app-container {
    max-width: 1000px;
  }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.header .title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
}

.icon-button {
  background: #f2f2f4;
  border: none;
  padding: 8px;
  border-radius: 12px;
  color: #1a1a1a;
  cursor: pointer;
}

.icon-button svg {
  stroke: #333333;
}

/* Tabs navigation */
.tabs {
  display: flex;
  justify-content: space-between;
  margin: 0 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #f3f3f5;
  overflow: hidden;
}

.tabs .tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  color: #666666;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  font-weight: 500;
}

.tabs .tab.active {
  background-color: #000000;
  color: #ffffff;
  font-weight: 600;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  background: #f2f2f4;
  border-radius: 20px;
  margin: 0 16px 16px;
  padding: 8px 12px;
  position: relative; /* allow absolutely positioned clear button */
}

.search-icon {
  stroke: #bbbbbb;
  margin-right: 8px;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #333333;
  outline: none;
  /* Add extra right padding to make room for the clear (x) button */
  padding-right: 24px;
}

/* Clear search button positioned at the right inside the search bar */
.clear-search-btn {
  display: none; /* hidden until there's text */
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: #999999;
  flex-shrink: 0;
}

.clear-search-btn svg {
  stroke: #999999;
  width: 16px;
  height: 16px;
}

/* Search results list */
.search-results {
  margin: 0 16px 16px;
  display: none;
  max-height: 50vh; /* allow scrolling when there are many results */
  overflow-y: auto;
}

.search-result-item {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #111111;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.search-result-item:last-child {
  margin-bottom: 0;
}

/* Accordion styles */
.accordion {
  width: 100%;
}

.accordion-item {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  margin: 0 16px 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  /* Align items at the start so the title sits immediately after the icon.
     We'll push the chevron to the far right via auto margin on the icon later. */
  justify-content: flex-start;
  padding: 16px 20px;
  background: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Push the chevron arrow to the far right within the accordion header */
.accordion-header .chevron {
  margin-left: auto;
}

.accordion-header .icon-wrapper {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-right: 16px;
  flex-shrink: 0;
}

.accordion-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Align text to the start of the container so titles are left‑aligned
     rather than centred. This keeps the text visually aligned with the
     left edge of the icon while still allowing the chevron to sit on
     the far right. */
  align-items: flex-start;
  text-align: left;
}

.accordion-title .name {
  font-size: 17px;
  font-weight: 600;
  color: #111111;
  /* Left align the category name */
  text-align: left;
}

.accordion-title .count {
  font-size: 12px;
  color: #999999;
  margin-top: 2px;
  /* Ensure the count label aligns to the left under the category name */
  text-align: left;
}

.chevron {
  transition: transform 0.3s ease;
  stroke: #bbbbbb;
  width: 22px;
  height: 22px;
}

.accordion-header[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.accordion-panel {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.accordion-panel .question {
  margin-top: 16px;
}

.accordion-panel .question:first-of-type {
  margin-top: 12px;
}

/* Question cards inside accordion panels */
.accordion-panel .question {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px;
}

.accordion-panel .question:first-of-type {
  margin-top: 12px;
}

/* Nested collapsible questions */
.question-item {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  margin-top: 16px;
  overflow: hidden;
}

.question-item:first-child {
  margin-top: 12px;
}

.question-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  border-radius: 16px;
}

.question-header .chevron {
  stroke: #999999;
  transition: transform 0.3s ease;
}

.question-header[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.question-content {
  display: none;
  padding: 0 16px 16px;
  font-size: 14px;
  color: #555555;
}

/* Responsive images inside question content */
.question-content img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 12px;
  display: block;
}

.accordion-panel h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 8px;
}

.accordion-panel p {
  font-size: 14px;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 8px;
}

.accordion-panel ul,
.accordion-panel ol {
  padding-left: 18px;
  margin-bottom: 8px;
}

.accordion-panel li {
  font-size: 14px;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Troubleshooting styles */
.card {
  background: #ffffff;
  border-radius: 20px;
  margin: 0 16px 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 20px 16px;
}

.guide-card {
  text-align: center;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.guide-card .card-title {
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 8px;
}

.guide-card .card-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}

.troubleshoot-steps {
  margin-top: 12px;
}

.troubleshoot-steps li {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
}

.step-index {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Contact row shown at the end of each troubleshoot item */
.help-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border-top: 1px solid #f0f0f0;
  color: #888888;
  font-size: 14px;
}

.help-contact svg {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  stroke: #888888;
}

/* Contact cards */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 16px 16px;
}

.contact-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 16px;
}

.contact-top {
  display: flex;
  align-items: flex-start;
}

.contact-top .icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.contact-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 4px;
}

.contact-info .subtitle {
  font-size: 14px;
  color: #666666;
  margin-bottom: 4px;
}

.contact-info .desc {
  font-size: 13px;
  color: #999999;
  line-height: 1.4;
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  cursor: pointer;
  width: 100%; /* ensure contact buttons occupy the full width of their card for consistent lengths */
}

.contact-btn svg {
  flex-shrink: 0;
}

/* Make inserted images responsive */
.responsive-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 12px;
}

/*
 * Reduce the size of certain images on larger screens.  The .pc-image class is
 * assigned to images that should not span the full width on desktop or tablet
 * screens.  On viewports wider than 768px this rule limits the width of the
 * image to 60% of its container and centers it horizontally.  On smaller
 * screens the image still uses the full width defined by .responsive-img.
 */
@media (min-width: 768px) {
  .pc-image {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide all tab contents by default */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Chat page styles */
.chat-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* leave space for header */
  padding: 0 16px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

.chat-message {
  max-width: 80%;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-message.user {
  background-color: #E6F3FF;
  color: #111111;
  align-self: flex-end;
  border-top-right-radius: 4px;
}
.chat-message.bot {
  background-color: #F5F5F5;
  color: #111111;
  align-self: flex-start;
  border-top-left-radius: 4px;
}

.chat-form {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding: 8px 0;
}

.chat-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #eee;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  margin-right: 8px;
}

.chat-form button {
  background-color: #4285F4;
  color: #ffffff;
  padding: 10px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ===== Feedback Modal Styles ===== */
/* Fullscreen overlay for the feedback modal. It stays hidden until JS sets display:flex */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  padding: 0 16px;
}

/* Container for the feedback modal contents */
.modal {
  background: #ffffff;
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}

.modal-close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #888888;
}

.modal-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.modal-body {
  padding: 20px;
}

.modal-body textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: #333333;
  outline: none;
  min-height: 120px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px 20px;
  gap: 12px;
}

.modal-cancel,
.modal-submit {
  padding: 10px 16px;
  border-radius: 18px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.modal-cancel {
  background: #f2f2f4;
  color: #333333;
}

.modal-submit {
  background: #4285f4;
  color: #ffffff;
}

/* Image upload area inside feedback modal */
.image-upload {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button to trigger image selection. Styled as a dashed box with a plus sign */
.add-image-btn {
  width: 42px;
  height: 42px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: #f9f9f9;
  color: #999999;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.add-image-btn:focus {
  outline: none;
}

.image-status {
  font-size: 12px;
  color: #666666;
}

/* Feedback list page styles */
.feedback-list {
  padding: 16px;
}

.feedback-entry {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.feedback-entry .feedback-time {
  font-size: 12px;
  color: #999999;
  margin-bottom: 8px;
}

.feedback-entry .feedback-text {
  font-size: 14px;
  color: #333333;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.feedback-entry img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 8px;
}

/* ===== Chat message redesign ===== */
/* Wrapper for each chat message that contains an avatar and a message bubble */
.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  max-width: 100%;
  /* Reset padding/background inherited from earlier styles */
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.chat-message .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 4px;
}

.chat-message .message-bubble {
  max-width: 75%;
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.chat-message .message-bubble .sender-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.chat-message .message-bubble .message-text {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-message.user {
  flex-direction: row-reverse;
  align-self: flex-end;
  /* Override older styles: remove background and rounding on the message wrapper */
  background: transparent;
  color: inherit;
  border-radius: 0;
}

.chat-message.user .avatar {
  background-color: #E6F3FF;
  color: #4285f4;
  margin-left: 8px;
  margin-right: 0;
}

.chat-message.user .message-bubble {
  background-color: #E6F3FF;
  color: #111111;
  border-top-right-radius: 4px;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  margin-right: 8px;
}

.chat-message.bot {
  flex-direction: row;
  align-self: flex-start;
  /* Override older styles: remove background and rounding on the message wrapper */
  background: transparent;
  color: inherit;
  border-radius: 0;
}

.chat-message.bot .avatar {
  background-color: #F5F5F5;
  color: #888888;
  margin-right: 8px;
  margin-left: 0;
}

.chat-message.bot .message-bubble {
  background-color: #F5F5F5;
  color: #111111;
  border-top-left-radius: 4px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  margin-left: 8px;
}