/* Laraguppy Send Button – Pink with Black Text */
.at-sendmsg {
    background-color: #ff69b4 !important; /* pink */
    border: 1px solid #000 !important;    /* black border */
    color: #000 !important;               /* BLACK text */
    padding: 8px 14px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
}

/* Make sure the icon is also black */
.at-sendmsg i {
    color: #000 !important;
}

/* Hover effect */
.at-sendmsg:hover {
    background-color: #ff85c1 !important;
}
/* ================================
   GLOBAL FONT OVERRIDE – ROBOTO
   ================================ */
html, body,
body * {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* Protect icons */
i, svg {
  font-family: inherit !important;
}

/* Messenger empty conversation text */
.at-empty-conversation_info span {
    font-size: 17px !important;   /* change size here */
    line-height: 1.6 !important;
    color: #000 !important;   /* BLACK */
}

/* Messenger welcome title (optional, if needed) */
.at-empty-conversation_info h3 {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #000 !important;   /* BLACK */
}


/* Verify Email heading ONLY */
.am-description + h2,
.am-description ~ h2 {
    font-size: 20px !important;
}

/* Email verification description text */
.am-description {
    font-size: 14px !important;   /* change size here */
    line-height: 1.6 !important;
    color: #000 !important;   /* black */
}
/* Hide session filter tabs but keep Clear Filters */
.am-searchfilter_tabslist {
    display: none !important;
}
/* Remove bg & border ONLY for My Upcoming Bookings tab */
.am-userperinfo_tab li.am-upcoming-only a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Optional: keep text clean and readable */
.am-userperinfo_tab li.am-upcoming-only a {
    color: #000 !important;
    font-weight: 600;
}

/* REMOVE the "1" ONLY for this tab (works for marker + counters + pseudo content) */
.am-userperinfo_tab li.am-upcoming-only {
  list-style: none !important;
}

.am-userperinfo_tab li.am-upcoming-only::marker {
  content: "" !important;
}

/* If theme uses counters or pseudo-elements to print "1" */
.am-userperinfo_tab li.am-upcoming-only::before,
.am-userperinfo_tab li.am-upcoming-only::after,
.am-userperinfo_tab li.am-upcoming-only a::before,
.am-userperinfo_tab li.am-upcoming-only a::after {
  content: "" !important;
  display: none !important;
}

/* If UL itself is using a counter style */
.am-userperinfo_tab {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* --- FIX: Stop Laraguppy threads infinite loading --- */
#private_thread_list.conversation-list{
  max-height: 70vh !important;
  overflow-y: auto !important;
}
#private_thread_list .at-userbar_loader{
  display: none !important;
}
#private_thread_list .at-emptyconver{
  display: none !important;
}

:root{
  --ps-purple:#6C4CF6;
  --ps-text:#0f172a;
  --ps-muted:#64748b;
  --ps-line:#e5e7eb;
  --ps-soft:#eef2f7;
}

/* Background */
.ps-hero{
  min-height:100vh;
  padding:40px 16px 60px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:
    radial-gradient(1000px 380px at 85% 10%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(900px 360px at 10% 0%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(135deg, #5b50ff 0%, #7b59ff 40%, #b06cff 100%);
  position:relative;
  overflow:hidden;
}
.ps-hero::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-120px;
  height:260px;
  background:#fff;
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
}

.ps-container{
  width:min(980px,100%);
  position:relative;
  z-index:2;
}

.ps-card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 18px 55px rgba(2,6,23,.18);
  overflow:hidden;
}

.ps-head{
  padding:42px 42px 28px;
  background:var(--ps-soft);
  text-align:center;
}
.ps-head h1{
  margin:0 0 10px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ps-text);
}
.ps-head p{
  margin:0 auto;
  max-width:680px;
  color:#334155;
  line-height:1.75;
  font-size:15px;
}

.ps-body{
  padding:34px 42px 42px;
  background:#fff;
}

.ps-divider{ height:1px; background:var(--ps-line); margin-bottom:18px; }

.ps-success{
  background:#d1e7dd;
  color:#0f5132;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  margin-bottom:14px;
}

.ps-stepmeta{
  display:flex;
  gap:10px;
  align-items:baseline;
  margin-bottom:14px;
}
.ps-count{ color:var(--ps-muted); font-weight:800; font-size:18px; }
.ps-title{ color:var(--ps-text); font-size:18px; font-weight:900; }

.ps-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin-top:12px;
}
.ps-field{ display:flex; flex-direction:column; gap:8px; }
.ps-field label{ font-size:13px; color:var(--ps-muted); font-weight:800; }

.ps-input{
  height:46px;
  border:1px solid var(--ps-line);
  border-radius:10px;
  padding:0 14px;
  outline:none;
  font-size:14px;
  background:#fff;
}
.ps-input:focus{
  border-color: rgba(108,76,246,.65);
  box-shadow:0 0 0 4px rgba(108,76,246,.14);
}

.ps-textarea{
  border:1px solid var(--ps-line);
  border-radius:10px;
  padding:12px 14px;
  outline:none;
  font-size:14px;
}
.ps-textarea:focus{
  border-color: rgba(108,76,246,.65);
  box-shadow:0 0 0 4px rgba(108,76,246,.14);
}

.ps-row{
  grid-column:1/-1;
  display:flex;
  gap:18px;
  align-items:center;
}
.ps-radioWrap{ display:flex; gap:16px; align-items:center; }
.ps-radio{ display:flex; gap:8px; align-items:center; font-weight:700; color:#334155; }

.ps-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:14px;
  color:#334155;
  font-weight:700;
}
.ps-check a{ color:var(--ps-purple); text-decoration:none; }
.ps-check a:hover{ text-decoration:underline; }

.ps-err{ color:#dc3545; margin-top:2px; font-weight:700; font-size:13px; }

.ps-review{
  background:#f1f5f9;
  border:1px solid var(--ps-line);
  border-radius:12px;
  padding:14px;
  color:#334155;
  line-height:1.7;
}
.ps-reviewSmall{ margin-top:8px; font-size:13px; color:var(--ps-muted); }

.ps-actions{
  margin-top:26px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.ps-btn{
  border:0;
  border-radius:10px;
  height:44px;
  padding:0 22px;
  font-weight:900;
  cursor:pointer;
}
.ps-btn-secondary{ background:#eef2f7; color:#0f172a; }
.ps-btn-primary{ background:var(--ps-purple); color:#fff; box-shadow:0 12px 25px rgba(108,76,246,.25); }

@media (max-width:820px){
  .ps-head{ padding:28px 18px 18px; }
  .ps-body{ padding:22px 18px 22px; }
  .ps-grid{ grid-template-columns:1fr; }
  .ps-row{ flex-direction:column; align-items:stretch; }
  .ps-actions{ justify-content:stretch; }
  .ps-btn{ width:100%; }
}

/* ================================
   Tutor Request Page - White BG
   Pink Buttons + Black Border/Text
   Black input borders
   ================================ */

/* Tutor request page background white */
body:has(.am-tutor-request),
body:has(.tutor-request),
body:has([wire\\:id]) {
  background: #fff !important;
}

/* Make the request wizard section white */
.am-tutor-request,
.tutor-request,
.am-main,
main {
  background: #fff !important;
}

/* ✅ Tutor Request page ONLY - pink buttons */
.ps-hero button,
.ps-hero a.am-btn,
.ps-hero .am-btn,
.ps-hero input[type="submit"] {
  background: #ff4da6 !important;   /* pink */
  color: #000 !important;           /* black text */
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* Hover - Tutor Request ONLY */
.ps-hero button:hover,
.ps-hero a.am-btn:hover,
.ps-hero .am-btn:hover,
.ps-hero input[type="submit"]:hover {
  background: #ff4da6 !important;
  opacity: 0.92 !important;
}
/* ✅ Tutor Request ONLY - black borders */
.ps-hero input,
.ps-hero select,
.ps-hero textarea {
  border: 1px solid #000 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Focus border stays black */
input:focus,
select:focus,
textarea:focus {
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* ✅ Tutor Request Wizard: remove purple bg and make white */
.ps-hero,
.ps-container,
.ps-card,
.ps-body {
  background: #fff !important;
}

/* If the purple is from a gradient/background-image */
.ps-hero {
  background-image: none !important;
}

/* Optional: make whole page white */
html, body {
  background: #fff !important;
}

/* ✅ Remove shadow from Tutor Request form box */
.ps-card {
  box-shadow: none !important;
}

/* Extra safety */
.ps-container,
.ps-body,
.ps-head {
  box-shadow: none !important;
}
/* ✅ Remove shadow + gray title background from Tutor Request form */
.ps-card {
  box-shadow: none !important;
}

/* Title area (gray background) */
.ps-head {
  background: #fff !important;
  box-shadow: none !important;
}

/* Just in case inner title wrapper has bg */
.ps-head * {
  background: transparent !important;
}


/* ✅ ONLY Find Tutors filters: remove border of select2 search field */
.am-find-tutors-area .am-searchfilter_wrap .select2-search__field,
.am-find-tutors-area .am-searchfilter_wrap .select2-container--open .select2-search__field,
.am-find-tutors-area .am-searchfilter_wrap .select2-container--focus .select2-search__field {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Keep main select2 border stable (ONLY Find Tutors filters) */
.am-find-tutors-area .am-searchfilter_wrap .select2-container--default .select2-selection--single,
.am-find-tutors-area .am-searchfilter_wrap .select2-container--default.select2-container--open .select2-selection--single,
.am-find-tutors-area .am-searchfilter_wrap .select2-container--default.select2-container--focus .select2-selection--single {
  box-shadow: none !important;
}
/* ✅ Request tutor page: ensure header avatar shows */
.ps-hero ~ header .am-header_user_menu img,
.ps-hero header .am-header_user_menu img,
header .am-header_user_menu img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  height: auto !important;
}

/* In case a rule is hiding figure */
header .am-header_user_menu figure {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If any global rule is removing images on that page */
.ps-hero img { 
  filter: none !important;
}


/* ✅ Request Tutor page: make all text normal except title */
.ps-hero .ps-head p,
.ps-hero .ps-title,
.ps-hero label,
.ps-hero .ps-field label,
.ps-hero .ps-stepmeta,
.ps-hero .ps-check label{
    font-weight: 400 !important;
}

/* ✅ Keep title bold */
.ps-hero .ps-head h1{
    font-weight: 700 !important;
}


/* MOBILE ONLY: Pink circle + 3 white bars -> X when open */
@media (max-width: 1199.98px) {

  /* kill any theme's old icon/bg */
  .am-navbar-toggler,
  .am-navbar-toggler::before,
  .am-navbar-toggler::after{
    background: transparent !important;
    content: none !important;
  }

  .am-navbar-toggler{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* the clickable button */
  .am-navbar-toggler .navbar-toggler{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;

    background: #de5285 !important;   /* pink circle */
    background-image: none !important; /* remove bootstrap icon */
    box-shadow: none !important;

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* remove anything inside the button that theme might inject */
  .am-navbar-toggler .navbar-toggler *{
    display: none !important;
  }

  /* 3 bars = default state */
  .am-navbar-toggler .navbar-toggler::before,
  .am-navbar-toggler .navbar-toggler::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 22px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    transform: translateX(-50%) !important;
    transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease !important;
  }

  /* top bar */
  .am-navbar-toggler .navbar-toggler::before{
    top: 14px !important;
  }

  /* bottom bar */
  .am-navbar-toggler .navbar-toggler::after{
    bottom: 14px !important;
  }

  /* middle bar (use a real element via background) */
  .am-navbar-toggler .navbar-toggler{
    background-image: linear-gradient(#fff, #fff) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 3px !important;
    transition: background-size .2s ease !important;
  }

  /* OPEN STATE = X  (only when aria-expanded="true") */
  .am-navbar-toggler .navbar-toggler[aria-expanded="true"]{
    background-size: 0 0 !important; /* hide middle bar */
  }

  .am-navbar-toggler .navbar-toggler[aria-expanded="true"]::before{
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .am-navbar-toggler .navbar-toggler[aria-expanded="true"]::after{
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}
/* Book session button */
button.am-booksession,
.am-booksession{
  background: #ff4d88 !important;
  color: #ffffff !important;
  border: none !important;
}
.cus-notication {
  font-size: 12px;
  border-radius: 10px;
  padding: 12px;
  background-color: transparent; /* or remove the line */
}
/* Hide Laraguppy global contact list for trust protection */
a:has(i.laraguppy-users) {
  display: none !important;
}










/* =========================================
   Profile Tabs – FINAL (ACTIVE FIX)
   ========================================= */

/* Center tab content */
.am-userperinfo_tab li {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tab link layout */
.am-userperinfo_tab li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: transparent; /* reset */
}

/* Remove icon-font circle everywhere */
.am-userperinfo_tab i.am-icon-check-circle06 {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =====================
   TAB STATES
   ===================== */

/* Completed tab (mint) */
.am-userperinfo_tab li.tab-complete a {
  background: #addfad !important;
  border-radius: 10px;
  color: #1f2937;
  font-weight: 600;
}

/* ACTIVE tab (LIGHT GRAY) — THIS WAS MISSING */
.am-userperinfo_tab li.am-active a {
background: #fbcfe8 !important;  /* soft light pink */
  opacity: 1 !important;
  border-radius: 10px;  border-radius: 10px;
  color: #111827;
  font-weight: 600;
}

/* If active + completed → active wins */
.am-userperinfo_tab li.tab-complete.am-active a {
  background: #f1f1f1 !important;
}

/* show ✓ on ALL completed tabs (including active) */
.am-userperinfo_tab li.tab-complete a::before {
  content: "✓";
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* =====================
   LOCKED TAB
   ===================== */

.am-userperinfo_tab li.tab-disabled a {
  background: #f3f3f3 !important;
  border-radius: 10px;
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
  color: #888;
}
/* Tutor calendar – session card background */
.am-session-monthly-tooltip {
    background-color: #eaf7ee !important; /* very light green */
}
/* Tutor bookings tab – make ONLY active "upcoming" tab white */
.am-upcoming-only.am-active {
    background-color: #ffffff !important;
}

/* ONLY the active "My upcoming bookings" tab should be white */
li.am-upcoming-only.am-active > a,
li.am-upcoming-only.am-active > a:link,
li.am-upcoming-only.am-active > a:visited {
  background: #fff !important;
  background-color: #fff !important;
}

/* In case the theme paints the LI itself */
li.am-upcoming-only.am-active {
  background: #fff !important;
  background-color: #fff !important;
}

/* If theme uses pseudo-elements for active background */
li.am-upcoming-only.am-active::before,
li.am-upcoming-only.am-active::after,
li.am-upcoming-only.am-active > a::before,
li.am-upcoming-only.am-active > a::after {
  background: transparent !important;
  background-color: transparent !important;
}


/* ================================
   SESSION DETAIL MODAL: smaller image + smaller modal
   ================================ */

/* 1) Make the whole modal narrower */
#session-detail .modal-dialog{
  max-width: 760px !important;   /* <-- shrink overall modal */
}

/* 2) Reduce Bootstrap modal padding so it doesn't look wide */
#session-detail .modal-body{
  padding: 16px !important;
}

/* 3) Control the two columns layout */
#session-detail .am-session-detail{
  display: flex !important;
  gap: 16px !important;
}

/* 4) Left sidebar width */
#session-detail .am-session-detail_sidebar{
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
}

/* 5) Right side should NOT be allowed to be too wide */
#session-detail .am-session-detail-modal_body{
  flex: 1 1 auto !important;
  max-width: 420px !important;     /* <-- key: right column width */
  padding: 0 !important;
}

/* 6) Make the right image smaller */
#session-detail .am-session-detail-modal_body > figure{
  width: 100% !important;
  max-width: 360px !important;     /* <-- key: image width */
  height: 170px !important;        /* <-- key: image height */
  margin: 0 auto 12px auto !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #e5e7eb !important;
  display: block !important;
}

#session-detail .am-session-detail-modal_body > figure > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile: stack layout */
@media (max-width: 768px){
  #session-detail .modal-dialog{ max-width: 95% !important; }
  #session-detail .am-session-detail{ flex-direction: column !important; }
  #session-detail .am-session-detail_sidebar{
    width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important;
  }
  #session-detail .am-session-detail-modal_body{ max-width: 100% !important; }
  #session-detail .am-session-detail-modal_body > figure{ max-width: 100% !important; height: 150px !important; }
}
/* ================================
   CENTER IMAGE + TEXT IN RIGHT COLUMN
   ================================ */

#session-detail .am-session-detail-modal_body{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;        /* horizontal center */
    justify-content: center !important;    /* vertical center */
    text-align: center !important;
}
#session-detail .am-session-detail-modal_body > figure{
  background-image: url("https://prosikshya.com/storage/optionbuilder/uploads/831802-01-2026_0849amprosikshya.png") !important;

  background-size: contain !important;      /* ✅ shows full image */
  background-position: center !important;
  background-repeat: no-repeat !important;

  height: 220px !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  background-color: #f3f4f6 !important;     /* fills empty space nicely */
}

#session-detail .am-session-detail-modal_body > figure > img{
  display: none !important;
}
/* Stack content and control order */
#session-detail .am-session-detail-modal_body{
    display: flex !important;
    flex-direction: column !important;
}

/* Slightly stretch the first (left) column – subtle */
#session-detail .am-session-detail_sidebar{
    flex: 0 0 300px !important;   /* 👈 small increase */
    max-width: 300px !important;
}
#session-detail .am-session-detail_sidebar .am-icon-book-1{
    display: none !important;
}
/* Pink background for the session header block */
#session-detail .am-session-detail_sidebar .am-session-detail_content{
    background-color: #ffcff1 !important;  /* dark pink */
    border-radius: 12px !important;
    padding: 12px 14px !important;
}

/* Default image for session detail modal (no crop) */
#session-detail .am-session-detail-modal_body > figure{
  background-image: url("https://prosikshya.com/storage/optionbuilder/uploads/157202-02-2026_0603pmprosikshya.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #e5e7eb !important;
  height: 220px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

#session-detail .am-session-detail-modal_body > figure > img{
  display: none !important;
}

/* Booking modal – Private / Group session tabs (stronger light green) */
.nav-pills.am-booking-tabs .nav-link.active,
.nav-pills.am-booking-tabs .show > .nav-link {
    background-color: #b8e6c2 !important; /* stronger light green */
    color: #155f3a !important;            /* deeper green text */
}
.am-viewdetail {
    background-color: #ffffff !important; /* white background */
    border: 1px solid #000000 !important;  /* black border */
    color: #000000 !important;             /* black text */
}

.am-viewdetail:hover {
    background-color: #ffffff !important; /* stay white on hover */
    border-color: #000000 !important;
    color: #000000 !important;
}
/* Hide book icon in session detail header */
.am-session-detail .am-session-detail_content .am-icon-book-1 {
    display: none !important;
}

/* Space above Book session button */
.am-session-detail .am-session-detail_sidebar_footer {
    margin-top: 12px;
}
/* Light green background for session header (level + subject) */
.am-session-detail_content {
    background-color: #e9f6ee !important;
    border-radius: 8px !important;
}



/* =========================================================
   SESSION DETAIL MODAL — shrink whole modal to content width
   and center it (only this modal)
   ========================================================= */

/* 1) Shrink the modal dialog to fit the content */
.modal-dialog:has(.am-session-detail) {
    max-width: none !important;     /* remove Bootstrap max-width */
    width: max-content !important;  /* hug left+right columns */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2) Prevent modal-content from stretching wide */
.modal-dialog:has(.am-session-detail) .modal-content {
    width: max-content !important;
    display: inline-block !important;
}

/* 3) Center modal body contents (sometimes needed) */
.modal-dialog:has(.am-session-detail) .modal-body {
    display: flex !important;
    justify-content: center !important;
    padding-right: 0 !important;    /* remove right padding gap */
}

/* 4) Ensure your internal layout doesn't force extra width */
.modal-dialog:has(.am-session-detail) .am-session-detail {
    display: flex !important;
    width: auto !important;
}

/* 5) Right column fixed readable width (controls overall modal width) */
.modal-dialog:has(.am-session-detail) .am-session-detail-modal_body .am-session-content {
    width: 520px !important;        /* 👈 adjust this to change whole modal width */
    max-width: 520px !important;
}

/* Optional: keep right content centered inside its column */
.modal-dialog:has(.am-session-detail) .am-session-detail-modal_body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Hide the tick icon before the review tips header */
.am-reviews-tips .am-review-tips-heading span {
    display: none !important;
}

/* Fix cramped chat textarea */
.at-replay_input {
    width: 100%;
    min-height: 80px;

    padding: 14px 16px !important; /* Space inside box */

    font-size: 14px;
    line-height: 1.7; /* Space between lines */

    border: 1px solid #d1d5db;
    border-radius: 10px;

    box-sizing: border-box;

    background-color: #fff;
    outline: none;

    resize: vertical;
}

/* Extra safety: if wrapper is tight */
.at-replay_input-container,
.at-replay_input-wrapper,
.chat-input-box {
    padding: 8px 10px;
}
.am-login-right_title .am-description:last-of-type {
    display: none;
}
.am-white-btn {
    border: 2px solid #000 !important;
}
.am-login-right_title h3 {
    display: none;
}
.am-session-detail-modal_body > figure {
    display: none !important;
}
/* Hide the image */
#session-detail .am-session-detail-modal_body > figure {
    display: none !important;
}

/* Reset forced centering layout */
#session-detail .am-session-detail-modal_body {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    max-width: 100% !important;
    width: 100% !important;

    height: auto !important;
    overflow-y: auto !important;
}

/* Make content full width */
#session-detail .am-session-detail-modal_body > .am-session-content {
    width: 100% !important;
    max-width: 100% !important;

    text-align: left !important;
}
.am-session-content {
    display: -webkit-box;
    -webkit-line-clamp: 5;   /* ~100 words ≈ 5–6 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.am-mission-button .am-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px !important;
    padding: 10px 24px; /* optional: makes it look nicer */
}

.am-mission-button .am-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

.am-mission-button {
    margin-top: 2em;
}