/* =========================================================
   Support Hub V2 — support-chat-v2.css
   ========================================================= */

/* ----- Design tokens — font scale & weight ----- */
:root {
  --sh-font-xs:     11px;   /* badges, timestamps */
  --sh-font-sm:     12px;   /* captions, labels, sub text */
  --sh-font-md:     13px;   /* hints, textarea body */
  --sh-font-base:   14px;   /* body copy, buttons */
  --sh-fw-regular:  400;
  --sh-fw-medium:   500;
  --sh-fw-semibold: 600;
  --sh-fw-bold:     700;
  --sh-font-family: 'Poppins', sans-serif;
}

/* ----- Header sector colours (mirrors download_header-sector* in support-chat.css) ----- */
.sh-header-sector1  { background: var(--primary-color); }
.sh-header-sector6  { background: var(--TFC); }
.sh-header-sector7  { background: var(--TLC); }
.sh-header-sector8  { background: var(--TCH); }
.sh-header-sector9  { background: var(--TBI); }
.sh-header-sector10 { background: var(--TE); }
.sh-header-sector11 { background: var(--TCS); }
.sh-header-sector12 { background: var(--TEY); }
.sh-header-sector13 { background: var(--TSW); }
.sh-header-sector14 { background: var(--TC); }
.sh-header-sector15 { background: var(--TAC); }
.sh-header-sector18 { background: var(--TOF); }
.sh-header-sector19 { background: var(--TYP); }
.sh-header-sector20 { background: var(--TWB); }
.sh-header-sector21 { background: var(--TASW); }
.sh-header-sector22 { background: var(--TCSW); }
.sh-header-sector23 { background: var(--TFAC); }
.sh-header-sector24 { background: var(--TGP); }
.sh-header-sector25 { background: var(--TPH); }
.sh-header-sector26 { background: var(--TOP); }
.sh-header-sector27 { background: var(--TDT); }
.sh-header-sector28 { background: var(--TH); }
.sh-header-sector29 { background: var(--TN); }
.sh-header-sector30 { background: var(--TPT); }
.sh-header-sector31 { background: var(--TLM); }
.sh-header-sector32 { background: var(--TEM); }
.sh-header-sector33 { background: var(--TNA); }
.sh-header-sector34 { background: var(--TSN); }
.sh-header-sector35 { background: var(--THC); }

.chat_eng_btn_group{position:fixed;border:none;bottom:100px;right:100px;max-width:48px;width:48px;max-height:48px;height:48px;cursor:pointer;transition:transform 167ms cubic-bezier(0.33,0.00,0.00,1.00);box-sizing:content-box;z-index: 9;}

/* ----- Document view modal — must sit above the widget (z-index: 9999) ----- */
#support-v2-document-view {
  z-index: 10001 !important;
}

/* ----- Trigger button — btn1 (sector icon) and btn2 (close arrow) ----- */
/* These styles were previously in support-chat.css scoped to .chat_eng_user which v2 no longer uses */
.sh-widget {
  position: relative;
}
/* 
.chat_eng_btn1 {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: transform 0.16s linear, opacity 0.08s linear;
  background: none;
  border: none;
}

.chat_eng_btn2 {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transform: rotate(-60deg);
  transition: transform 0.16s linear, opacity 0.08s linear;
  color: #fff;
  background: none;
  border: none;
}

.chat_eng_btn1.chat_eng_add1 {
  opacity: 0;
  transform: rotate(30deg) scale(0);
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.06), 0 2px 32px 0 rgba(0,0,0,0.16);
}

.chat_eng_btn2.chat_eng_add2 {
  opacity: 1;
  transform: rotate(0deg);
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.06), 0 2px 32px 0 rgba(0,0,0,0.16);
} */

/* ----- Modal shell ----- */
.sh-modal {
  position: fixed;
  bottom: 156px;
  right: 70px;
  width: 390px;
  height: 640px;        /* fixed — prevents height jump between animation / content states */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  font-family: var(--sh-font-family);
}

.sh-modal.sh-modal-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ----- Header ----- */
.sh-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  flex-shrink: 0;
}
.sh-widget .chat_eng_btn1{background-color: transparent;border: none;}
.sh-header-avatar {
  width: 50px;
  height: 50px;
  max-width: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sh-header-avatar  .sh-header-avatar-img{width:32px;}

.sh-header-avatar svg {
  display: block;
}

.sh-header-info {
  flex: 1;
  min-width: 0;
}

.sh-header-title {
  color: #fff;
  font-size: 20px;
  font-weight: var(--sh-fw-bold);
  margin: 0 0 3px;
  line-height: 1.2;
}

.sh-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--sh-font-md);
}

.sh-status-dot {
  width: 9px;
  height: 9px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
}

.sh-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: color 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.sh-close-btn i{font-size: 16px;}

.sh-close-btn:hover {
  color: #fff;
}

/* ----- Body ----- */
.sh-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sh-body::-webkit-scrollbar {
  width: 4px;
}

.sh-body::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

/* ----- Typing animation ----- */
.sh-typing-indicator {
  display: flex;
  gap: 5px;
  padding: 8px 2px 16px;
  align-items: center;
  flex-direction: row !important;
}

.sh-typing-indicator span {
  width: 9px;
  height: 9px;
  background: #94a3b8;
  border-radius: 50%;
  animation: sh-bounce 1.2s infinite;
  display: block;
}

.sh-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.sh-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sh-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

/* ----- Component element wrappers — must fill sh-body so flex:1 on sh-section-content works ----- */
support-v2-landing,
support-v2-role-select,
support-v2-whatsapp,
support-v2-help,
support-v2-ticket,
support-v2-resources,
support-v2-ticket-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* min-height: 0; */
}

/* ----- Section content fade-in ----- */
.sh-section-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* allows inner scroll containers to work */
}

/* ----- Greeting card ----- */
.sh-greeting-card {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 16px;
}

.sh-greeting-card strong {
  display: block;
  font-size: 15px;
  font-weight: var(--sh-fw-bold);
  color: #1e293b;
  margin-bottom: 5px;
}

.sh-greeting-card p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ----- Option cards (Landing) — Figma spec ----- */
.sh-option-card {
  display: flex;
  align-items: center;          /* vertically centre icon + text */
  gap: 12px;                    /* Figma: gap 12px */
  padding: 16px 18px;           /* Figma: 16px top/bottom, 18px left/right */
  border-radius: 12px;          /* Figma: 12px */
  min-height: 90.45px;          /* Figma: fixed row height */
  max-height: 90.45px;
  margin-bottom: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.10); /* Figma drop shadow */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.sh-option-card:last-child {
  margin-bottom: 0;
}

.sh-option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.13);
}

.sh-option-card:active {
  transform: translateY(0);
}

.sh-option-icon {
  width: 40px;                  /* Figma: 40×40 */
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: #fff;
}

.sh-option-body {
  flex: 1;
  min-width: 0;
}

.sh-option-body strong {
  display: block;
  font-weight: var(--sh-fw-semibold);
  font-size: var(--sh-font-base);
  line-height: 20px;
  letter-spacing: -0.31px;
  color: #1e293b;
  margin-bottom: 2px;
}

.sh-option-body p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  letter-spacing: -0.15px;
  color: #64748b;
  margin: 0;
}

/* Card colour variants */
.sh-card-whatsapp              { background: #f0fff4; }
.sh-card-whatsapp .sh-option-icon { background: #25a244; }

.sh-card-help                  { background: #f8fafc; }
.sh-card-help .sh-option-icon  { background: #1e3a5f; }

.sh-card-resources                  { background: #f5f3ff; }
.sh-card-resources .sh-option-icon  { background: #7c3aed; }

.sh-card-ticket                  { background: #fff5f5; }
.sh-card-ticket .sh-option-icon  { background: #e53935; }

/* ----- Role select ----- */
.sh-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sh-role-btn {
  padding: 11px 24px;
  border: 2px solid #e2e8f0;
  border-radius: 50px;
  background: #fff;
  color: #1e293b;
  font-size: var(--sh-font-base);
  font-weight: var(--sh-fw-semibold);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  white-space: nowrap;
  font-family: var(--sh-font-family);
}

.sh-role-btn:hover {
  border-color: #4a8fda;
  color: #4a8fda;
}

.sh-role-btn.sh-role-active {
  border-color: #4a8fda;
  background: #4a8fda;
  color: #fff;
}

/* ----- Back button (Figma spec — consistent across all screens) ----- */
.sh-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0 0;
  margin-top: auto;
  align-self: flex-start;
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-base);
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #262626;
  text-decoration: none;
  transition: opacity 0.15s;
  font-family: var(--sh-font-family);
}

.sh-back-btn:hover {
  opacity: 0.7;
  color: #262626;
}

.sh-back-btn i {
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* =========================================================
   Chat bubble — shared across WhatsApp, Help, and any screen
   that uses a chat-style intro message
   ========================================================= */

/* Update base bubble to flex column so multi-line variants work */
.sh-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Two-line variant: bold title + regular subtitle */
.sh-chat-bubble strong {
  font-weight: var(--sh-fw-semibold);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #323232;
}

.sh-chat-bubble span,
.sh-chat-bubble p.sh-bubble-sub {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #64748B;
  margin: 0;
}

/* =========================================================
   Help & FAQs — list screen
   ========================================================= */

/* Search bar */
.sh-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #E0E2E8;
  border-radius: 8px;
  box-shadow: 4px 3px 18px rgba(0, 0, 0, 0.04);
  background: #fff;
  margin-bottom: 14px;
  transition: box-shadow 0.18s, border-color 0.18s;
}

.sh-search-bar:focus-within {
  box-shadow: 4px 3px 12px rgba(0, 0, 0, 0.10);
  border-color: #c8cad2;
}

.sh-search-icon {
  font-size: 19px;
  color: #9496A1;
  flex-shrink: 0;
}

.sh-search-input {
  /* reset Materialize / global input styles */
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  /* own styles */
  flex: 1;
  outline: none;
  background: transparent;
  font-family: inherit !important;
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-base);
  line-height: 21px;
  color: #1e293b;
  min-width: 0;
  box-sizing: border-box !important;
}

.sh-search-input::placeholder {
  color: #9496A1;
}

/* Remove browser default search input clear button */
.sh-search-input::-webkit-search-cancel-button { display: none; }

/* Help list container */
.sh-help-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

/* Individual help item row */
.sh-help-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.sh-help-item:hover {
  border-color: #c8d6e8;
  box-shadow: 0 2px 8px rgba(36, 97, 140, 0.08);
}

/* Left icon container — light blue tint */
.sh-help-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(36, 97, 140, 0.10);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #24618C;
}

/* Text block */
.sh-help-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-help-item-body strong {
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  letter-spacing: -0.3125px;
  color: #101828;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-help-item-body p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  letter-spacing: -0.15px;
  color: #6E6E6E;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right chevron — 20×20 container, icon rendered small inside */
.sh-help-item-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #99A1AF;
  line-height: 1;
}

/* Loading / empty states */
.sh-help-loading,
.sh-help-empty {
  padding: 16px 0;
  text-align: center;
  font-size: var(--sh-font-md);
  color: #94a3b8;
}

/* Load More button */
.sh-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.sh-load-more button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #262626;
  transition: opacity 0.15s;
}

.sh-load-more button:hover { opacity: 0.7; }
.sh-load-more button:disabled { opacity: 0.4; cursor: default; }

.sh-load-more button i {
  font-size: 14px;
}

/* =========================================================
   WhatsApp screen
   ========================================================= */

/* Chat-bubble greeting (bottom-left corner is square = sent-from-left style) */
.sh-chat-bubble {
  background: #EFF3F8;
  border-radius: 16px 16px 16px 0px;
  padding: 12px 16px;
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #323232;
  margin-bottom: 12px;
  align-self: flex-start;
  max-width: 90%;
  /* flex column + gap defined in shared Chat bubble section above */
}

/* White bordered card: button + subtext */
.sh-wa-join-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Green Join WhatsApp Group button */
.sh-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: #10B981;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.18s;
}

.sh-wa-btn:hover {
  background: #059669;
  color: #fff;
  text-decoration: none;
}

.sh-wa-btn i {
  font-size: 16px;
}

/* Subtext below button */
.sh-wa-subtext {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-base);
  line-height: 14px;
  color: #64748B;
  margin: 0;
  text-align: center;
}

/* Pink "Need more help?" card */
.sh-need-help-card {
  background: rgba(237, 69, 69, 0.05);
  border: 1px solid rgba(237, 69, 69, 0.1);
  border-radius: 8px;
  padding: 25px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 4px;
}

/* Red icon container */
.sh-need-help-icon {
  width: 30px;
  height: 30px;
  background: #ED4545;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  box-shadow: 0px 1.5px 3px -1.5px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Text block inside the card */
.sh-need-help-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.sh-need-help-text strong {
  font-weight: var(--sh-fw-semibold);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #323232;
  display: block;
  text-align: center;
}

.sh-need-help-text p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  text-align: center;
  color: #6E6E6E;
  margin: 0;
}

/* Red "Raise a ticket" button */
.sh-raise-ticket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ED4545;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s;
}

.sh-raise-ticket-btn:hover {
  background: #c73333;
}

.sh-raise-ticket-btn i {
  font-size: 15px;
}

/* =========================================================
   FAQ detail screen
   ========================================================= */

/* Blue back button — sits at the top, not bottom */
.sh-faq-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 12px;
  flex-shrink: 0;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #24618C;
  transition: opacity 0.15s;
}

.sh-faq-back-btn:hover { opacity: 0.75; color: #24618C; }

.sh-faq-back-btn i {
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* Inner scrollable area — back button stays above */
.sh-faq-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-faq-detail-body::-webkit-scrollbar { width: 4px; }
.sh-faq-detail-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Title card */
.sh-faq-title-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  flex-shrink: 0;
}

.sh-faq-title-card strong {
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #101828;
  display: block;
}

.sh-faq-title-card p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  color: #6E6E6E;
  margin: 0;
}

/* Video card */
.sh-faq-video {
  background: #101828;
  border-radius: 10px;
  height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.sh-faq-video-icon {
  width: 36px;
  height: 36px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}

/* Article content card */
.sh-faq-content-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  flex-shrink: 0;
}

/* Rendered HTML — section headings */
.sh-faq-content-card h1,
.sh-faq-content-card h2,
.sh-faq-content-card h3,
.sh-faq-content-card h4,
.sh-faq-content-card h5,
.sh-faq-content-card h6 {
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 16px;
  color: #323232;
  margin: 0;
}

/* Rendered HTML — body paragraphs */
.sh-faq-content-card p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  color: #6E6E6E;
  margin: 0;
}

/* Rendered HTML — lists */
.sh-faq-content-card ul,
.sh-faq-content-card ol {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-faq-content-card li {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  color: #6E6E6E;
}

/* Rendered HTML — inline emphasis */
.sh-faq-content-card strong,
.sh-faq-content-card b {
  font-weight: var(--sh-fw-semibold);
  color: #323232;
}

.sh-faq-content-card a {
  color: #24618C;
  text-decoration: underline;
}

/* =========================================================
   Ticket — chat-style multi-step flow
   ========================================================= */

/* Scrollable chat history */
.sh-tk-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

.sh-tk-chat::-webkit-scrollbar { width: 4px; }
.sh-tk-chat::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* ng-repeat wrapper — must be a flex column so align-self works on bubbles inside */
.sh-tk-chat > div {
  display: flex;
  flex-direction: column;
}

/* Bot message — reuses .sh-chat-bubble, pinned left */
.sh-tk-msg-bot {
  align-self: flex-start;
  max-width: 90%;
  margin-bottom: 0 !important;
}

/* User message — right-aligned, shrinks to text width (Figma: light blue ghost pill) */
.sh-tk-msg-user {
  align-self: flex-end;
  background: rgba(14, 128, 198, 0.1);
  border: 1px solid rgba(14, 128, 198, 0.4);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  color: #25312B;
  border-radius: 16px 0px 16px 16px;
  padding: 8px 12px;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  max-width: 80%;
  word-break: break-word;
}

/* In-chat typing indicator (loading next step) */
.sh-tk-typing {
  align-self: flex-start;
  padding: 4px 2px 0;
}

/* Entry step: chat shrinks to content so chips render directly below the welcome message */
.sh-tk-chat--entry {
  flex: none;
  overflow: visible;
}

/* Action chips row — left-aligned (grouped with bot message on the left) */
.sh-tk-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding-top: 4px;
  flex-shrink: 0;
}

/* Pill choice button — Figma: height 36px, border-radius 40px, white bg */
.sh-tk-choice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #262626;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--sh-font-family);
}

.sh-tk-choice-btn:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.18);
}

/* =========================================================
   Ticket — category grid
   ========================================================= */

.sh-tk-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 4px;
  flex-shrink: 0;
  align-content: flex-start;
}

/* =========================================================
   Ticket — form card (contact + query steps)
   ========================================================= */

.sh-tk-form-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  flex-shrink: 0;
  margin-top: 4px;
}

.sh-tk-form-row {
  display: flex;
  gap: 16px;
}

.sh-tk-form-row .sh-tk-form-group {
  flex: 1;
  min-width: 0;
}

.sh-tk-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-tk-form-label {
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-sm);
  line-height: 18px;
  color: #6E6E6E;
}

.sh-req {
  color: #E53030;
}

.sh-tk-form-input {
  border: 1px solid #E0E2E8 !important;
  border-bottom: 1px solid #E0E2E8 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 13px 15px !important;
  height: 40px !important;
  width: 100%;
  border-radius: 8px;
  background: #fff;
  font-family: inherit !important;
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 18px;
  color: #393939;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box !important;
}

.sh-tk-form-input:focus {
  border-color: #4a8fda !important;
}

.sh-tk-form-input::placeholder {
  color: #9496A1;
}

.sh-tk-form-textarea {
  border: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  height: 80px !important;
  width: 100%;
  border-radius: 8px;
  background: #fff;
  font-family: inherit !important;
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-md);
  line-height: 20px;
  color: #1e293b;
  outline: none;
  resize: none;
  transition: border-color 0.15s;
  box-sizing: border-box !important;
}

.sh-tk-form-textarea:focus {
  border-color: #4a8fda !important;
}

.sh-tk-form-textarea::placeholder {
  color: #9496A1;
}

/* Drop zone */
.sh-tk-dropzone {
  border: 1.5px dashed #CBD5E0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.sh-tk-dropzone:hover {
  border-color: #4a8fda;
}

.sh-tk-dropzone-text {
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-md);
  color: #262626;
}

.sh-tk-dropzone-hint {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  color: #9496A1;
}

/* File selected state */
.sh-tk-file-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #f8fafc;
}

.sh-tk-file-selected span {
  flex: 1;
  min-width: 0;
  font-size: var(--sh-font-md);
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-tk-file-selected button {
  background: none;
  border: none;
  cursor: pointer;
  color: #9496A1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 0;
  flex-shrink: 0;
}

/* Inline form error */
.sh-tk-form-error {
  font-size: var(--sh-font-sm);
  color: #E53030;
  margin: 0;
}

/* Form action row (Back + Continue/Submit inside the card) */
.sh-tk-form-actions {
  display: flex;
  gap: 25px;
  margin-top: 9px; /* card gap is 16px + 9px = 25px total separation from fields */
}

.sh-tk-btn-outline {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border: 1px solid rgba(36, 97, 140, 0.3);
  border-radius: 8px;
  background: #fff;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  color: #24618C;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--sh-font-family);
}

.sh-tk-btn-outline:hover {
  border-color: rgba(36, 97, 140, 0.6);
  background: #f4f8fb;
}

.sh-tk-btn-outline i {
  font-size: 15px;
}

.sh-tk-btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: #24618C;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--sh-font-family);
}

.sh-tk-btn-primary:hover {
  background: #1e4f75;
}

.sh-tk-btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.sh-tk-btn-primary i {
  font-size: 15px;
}

/* =========================================================
   Ticket — success screen
   ========================================================= */

.sh-tk-success-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.sh-tk-success-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #fff;
}

.sh-tk-success-icon {
  width: 50px;
  height: 50px;
  background: #15A51B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
}

.sh-tk-success-card strong {
  font-weight: var(--sh-fw-semibold);
  font-size: var(--sh-font-base);
  line-height: 20px;
  color: #323232;
  text-align: center;
}

.sh-tk-success-card p {
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-font-sm);
  line-height: 16px;
  color: #6E6E6E;
  text-align: center;
  margin: 0;
}

/* Book a time slot — centered, not full-width */
.sh-tk-book-btn {
  flex: none !important;
  height: 36px;
  padding: 8px 16px;
}

/* ── Submit button in-line loading dots ───────────────────────────────────── */
.sh-btn-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sh-btn-dots span {
  width: 3px;
  height: 3px;
  background: #EFF3F8;
  border-radius: 50%;
  animation: sh-btn-dot 1s infinite;
}

.sh-btn-dots span:nth-child(2) { animation-delay: 0.2s; }
.sh-btn-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sh-btn-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(-3px); opacity: 0.6; }
}

/* "Back to Support Hub" centered text link */
.sh-tk-back-to-hub {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  color: #24618C;
  text-align: center;
  padding: 4px 0;
  transition: opacity 0.15s;
}

.sh-tk-back-to-hub:hover {
  opacity: 0.75;
}

/* =========================================================
   Resources section
   ========================================================= */

.sh-res-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.sh-res-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-sizing: border-box;
}

.sh-res-item-icon {
  width: 36px;
  height: 36px;
  background: rgba(36, 97, 140, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sh-res-item-title {
  flex: 1;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-base);
  line-height: 20px;
  letter-spacing: -0.3125px;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sh-res-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sh-res-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #323232;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.15s;
}

.sh-res-action-btn:hover {
  color: #24618C;
}

.sh-res-action-copied {
  color: #15A51B !important;
}

/* =========================================================
   Ticket listing section
   ========================================================= */

.sh-tl-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.sh-tl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sh-tl-filter-btn {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid #E0E2E8;
  background: #fff;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-sm);
  line-height: 20px;
  color: #6E6E6E;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sh-tl-filter-btn.active,
.sh-tl-filter-btn:hover {
  background: #24618C;
  border-color: #24618C;
  color: #fff;
}

.sh-section-content .right_action_download .dropdown-content{background-color: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px; min-width: 174px !important; margin-top: 30px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px;}
.sh-section-content .right_action_download .social-icon{gap: 9px;}
.sh-section-content .right_action_download .social-icon a{margin-left: unset;}
.sh-tl-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }

.sh-tl-item {
  display: block;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.sh-tl-item:hover {
  border-color: #c8d6e8;
  box-shadow: 0 2px 8px rgba(36, 97, 140, 0.08);
}

.sh-tl-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sh-tl-item-row-sub {
  margin-top: 4px;
}

.sh-tl-item-id {
  font-weight: var(--sh-fw-semibold);
  font-size: var(--sh-font-sm);
  color: #24618C;
}

.sh-tl-item-subject {
  flex: 1;
  font-weight: var(--sh-fw-medium);
  font-size: var(--sh-font-md);
  line-height: 18px;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-right: 8px;
}

.sh-tl-item-date {
  font-size: var(--sh-font-xs);
  color: #9496A1;
  flex-shrink: 0;
  white-space: nowrap;
}

.sh-tl-badge {
  font-size: var(--sh-font-xs);
  font-weight: var(--sh-fw-medium);
  padding: 2px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}

.sh-tl-badge-open     { background: rgba(36,  97,  140, 0.1); color: #24618C; }
.sh-tl-badge-progress { background: rgba(255, 152,   0, 0.1); color: #E07B00; }
.sh-tl-badge-resolved { background: rgba(21,  165,  27, 0.1); color: #15A51B; }
.sh-tl-badge-reopen   { background: rgba(237,  69,  69, 0.1); color: #ED4545; }

/* =========================================================
   Materialize / global CSS conflict overrides
   Materialize sets button:focus { background-color: #2ab7a9 } at specificity (0,1,1)
   and input[type=*] { box-sizing: content-box } at specificity (0,1,1).
   Authenticated pages neutralise these via * { box-sizing: border-box !important }
   in new_themes/css/style.css, but public pages do not.
   The rules below are scoped to the widget and cover the gap on public pages.
   ========================================================= */

/* Neutralise teal focus background on all widget buttons */
.sh-widget button:focus,
.sh-modal button:focus {
  outline: none;
  background-color: transparent;
}

/* Restore solid backgrounds for buttons that need them (specificity 0,2,0 > 0,1,1) */
.sh-tk-btn-primary:focus     { background-color: #24618C !important; }
.sh-raise-ticket-btn:focus   { background-color: #ED4545; }
.sh-wa-btn:focus             { background-color: #10B981; }
.sh-tl-filter-btn.active:focus { background-color: #24618C; }

/* ----- Responsive ----- */
@media (max-width: 480px) {
  .sh-modal {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 80px;
    height: 75vh;
  }
}