/* TempMy Inbox Pages (rebuilt) */
/* Scoped to .tmx-* to avoid affecting other pages. */

/* TEMPMY_INBOX_APP_MODE_V1 — dedicated inbox pages (/inbox, /user/my-inbox)
   should feel like a focused app screen, not a continuation of the
   homepage. Hide the marketing trust-badges strip here only (it stays on
   the homepage, scoped via the existing body.tm-mode-inbox page class set
   in layouts/user.blade.php) and tighten the header-to-card gap so the
   inbox/messages start higher on first load. */
body.tm-saas.tm-mode-inbox .tm-trust-strip {
  display: none !important;
}

body.tm-saas.tm-mode-inbox .tmx-inbox {
  padding-top: 8px;
}

@media (max-width: 575.98px) {
  body.tm-saas.tm-mode-inbox .tmx-inbox {
    padding-top: 6px;
  }

  body.tm-saas.tm-mode-inbox .tmx-inbox-app__top {
    padding-top: 10px;
  }
}

/* The empty-state's "Copy address"/"Refresh" buttons duplicate the
   Current-email card's Copy/Refresh directly above — same target, same
   action. Hide them (not the JS bindings) so the card stays the single
   source of truth for those controls, and tighten the now-lighter empty
   state so it reads as compact/professional instead of a second panel. */
body.tm-saas.tm-mode-inbox #tmMessagesEmpty .tmx-empty__actions {
  display: none !important;
}

/* Messages-card icon refresh duplicates the labeled Refresh button in the
   Current-email card above (same #tmMessagesUrl fetch) — keep only the
   labeled one as the single visible refresh action on /inbox. JS binding
   stays intact, just visually hidden. */
body.tm-saas.tm-mode-inbox #tmRefreshBtn2 {
  display: none !important;
}

body.tm-saas.tm-mode-inbox #tmMessagesEmpty {
  padding: 18px 16px !important;
}

/* The rule above (!important, 2 classes) was beating the mobile-only
   protective bottom padding meant to keep this card clear of the fixed
   bottom nav (also !important, but only 1 class on body) — same property,
   so specificity decided it regardless of media query, leaving the empty
   state only 18px clear instead of the intended ~32px. Restore it here at
   higher specificity so mobile gets real clearance again. */
@media (max-width: 575.98px) {
  body.tm-saas.tm-mode-inbox #tmMessagesEmpty {
    padding-bottom: 32px !important;
  }

  /* Messages list (non-empty state) had no bottom-nav-aware clearance at
     all on /inbox — the last message card could sit flush against the
     fixed nav. */
  body.tm-saas.tm-mode-inbox .tmx-card--messages .tmx-card__body {
    padding-bottom: 32px;
  }
}

body.tm-saas.tm-mode-inbox #tmMessagesEmpty .tmx-empty__icon {
  margin-bottom: 4px;
}

body.tm-saas.tm-mode-inbox #tmMessagesEmpty .tmx-empty__hint {
  margin-top: 6px;
}

#tm-toast-container{
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
#tm-toast-container .tmx-toast{ pointer-events: auto; }

/* Secondary: keep toasts (e.g. "Copied!") clear of the fixed bottom nav. */
@media (max-width: 767.98px) {
  #tm-toast-container {
    bottom: calc(var(--tm-fixed-nav-reserve, var(--tm-mobile-nav-reserve, 92px)) + env(safe-area-inset-bottom));
  }
}

:dir(rtl) #tm-toast-container{
  left: auto;
  right: 16px;
  align-items: flex-end;
}

/* Force LTR rendering for emails/domains inside RTL UI */
.tmx-ltr{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.tmx-inbox{
  padding: 18px 0 54px;
}

.tmx-inbox-app{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  /* No overflow:hidden here — it would clip the ⋯ / account dropdown menus.
     The header band below rounds its own top corners to match instead. */
}

.tmx-inbox-app__top{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(var(--tm-primary-rgb,37,99,235), .10);
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.tmx-inbox-app__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
}

.tmx-inbox-app__meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tmx-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
  font-size: 12px;
  line-height: 1;
}
.tmx-pill__label{ opacity: .75; }
.tmx-pill__value{ font-weight: 800; }

.tmx-inbox-grid{
  display: grid;
  gap: 14px;
  padding: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 992px){
  .tmx-inbox-app.is-free .tmx-inbox-grid{
    grid-template-columns: 1fr 1.35fr;
    align-items: start;
  }
  .tmx-inbox-app.is-pro .tmx-inbox-grid{
    grid-template-columns: 320px 1fr 1.35fr;
    align-items: start;
  }
}

.tmx-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  /* No overflow:hidden — it would clip the ⋯ dropdown menu inside .tmx-card--controls.
     .tmx-card__head rounds its own top corners to match instead. */
}

/* TEMPMY_INBOX_FLAT_HIERARCHY_V1 — Messages is a plain header+list section, not a second elevated card */
.tmx-card--messages{
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tmx-card--messages .tmx-card__head{
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.tmx-card--messages .tmx-card__body{
  padding: 14px 0 0;
}

.tmx-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.tmx-card__title{
  font-weight: 800;
  font-size: 14px;
}

.tmx-card__meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.tmx-card__body{
  padding: 12px;
}

.tmx-email-field{ width: 100%; }

.tmx-email-input{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* This field renders empty server-side wherever no session mailbox exists
   yet (always true on the homepage hero) until the client-side generator
   call resolves and fills it in. Show a shimmer instead of a plain blank
   box so it reads as "loading", not broken — matches the message-list
   skeleton's tmx-shimmer language used elsewhere on this same component. */
.tmx-email-input:placeholder-shown{
  color: transparent;
  background: linear-gradient(90deg,
    rgba(0,0,0,.05) 25%,
    rgba(0,0,0,.10) 37%,
    rgba(0,0,0,.05) 63%);
  background-size: 400% 100%;
  animation: tmx-shimmer-bg 1.4s ease-in-out infinite;
}

@keyframes tmx-shimmer-bg{
  0%{ background-position: 100% 0; }
  100%{ background-position: 0 0; }
}

.tmx-actions,
.tmx-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tmx-toolbar{ align-items: center; }

.tmx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.05);
  color: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
}

.tmx-btn i{ font-size: 14px; }

.tmx-btn--primary{
  background: var(--tm-primary, var(--color1,#2563EB));
  color: var(--tm-on-primary, #111);
  border-color: rgba(0,0,0,.08);
}

.tmx-btn--ghost{
  background: #fff;
  border-color: rgba(0,0,0,.12);
}

.tmx-btn--danger{
  background: #fff;
  border-color: rgba(220,53,69,.55);
  color: #dc3545;
}

.tmx-btn--block{
  width: 100%;
  justify-content: center;
}

.tmx-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Loading state (used by refresh buttons while fetching) */
.tmx-btn.is-loading{
  opacity: .85;
  pointer-events: none;
}
.tmx-btn.is-loading::after{
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.22);
  border-top-color: rgba(0,0,0,.65);
  display: inline-block;
  animation: tmx-spin .7s linear infinite;
}
.tmx-btn--primary.is-loading::after{
  border-color: rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.9);
}

@keyframes tmx-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.tmx-select,
.tmx-input{
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.tmx-input{ width: 140px; }

.tmx-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  position: relative;
  cursor: pointer;
}

.tmx-toggle input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tmx-toggle__ui{
  width: 36px;
  height: 20px;
  border-radius: 14px;
  background: rgba(0,0,0,.14);
  position: relative;
  flex-shrink: 0;
}

.tmx-toggle__ui:after{
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.tmx-toggle input:checked + .tmx-toggle__ui{
  background: rgba(var(--tm-primary-rgb,37,99,235), .65);
}
.tmx-toggle input:checked + .tmx-toggle__ui:after{
  transform: translateX(16px);
}

.tmx-toggle__label{
  font-size: 13px;
  font-weight: 700;
}

.tmx-status{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.6);
  min-height: 16px;
}

/* Idle most of the time (only briefly holds "Refreshing…"/"Retrying…" text) —
   collapse to zero height instead of reserving a permanent empty box. */
.tmx-status:empty{
  margin-top: 0;
  min-height: 0;
}

/* TEMPMY_INBOX_SIMPLIFIED_UTILITY_V1 — copy-first card: microcopy, compact refresh row, More-actions disclosure */

/* Copy is the only action left in this row; let it own the full row instead of a leftover 5/2-col grid track */
body.tm-saas .tmx-thumbzone .tmx-actions{
  grid-template-columns: 1fr;
}

/* New inbox creation already lives in the bottom nav at this width; avoid duplicating it inside More actions */
@media (max-width: 767.98px){
  body.tm-saas #tmNewEmailBtn{
    display: none;
  }
}

.tmx-microcopy{
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: rgba(0,0,0,.55);
  line-height: 1.4;
}

.tmx-refresh-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.tmx-refresh-status{
  font-size: 12.5px;
  color: rgba(0,0,0,.55);
  font-weight: 600;
}

/* TEMPMY_HOMEPAGE_COMPACT_PREVIEW_V1 — homepage proof-of-life preview caps at 3
   messages / 2 skeleton rows; the dedicated /inbox page is unaffected. */
.tmx-card--messages--compact .tmx-message-list .tmx-msg:nth-child(n+4){
  display: none;
}

.tmx-card--messages--compact .tmx-skeleton .tmx-skel-row:nth-child(n+3){
  display: none;
}

/* Cancel the dashed illustrated card for the small homepage empty state —
   keeps it to two short lines instead of a second "full inbox" looking card.
   !important needed: tm-saas-polish.blade.php sets the dashed-card look with
   !important too. */
body.tm-saas .tmx-empty.tmx-empty--compact{
  border: 0 !important;
  background: none !important;
  padding: 6px 0 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}

.tmx-empty.tmx-empty--compact .tmx-empty__text{
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* TEMPMY_INBOX_MORE_MENU_V1 — "More actions" as an anchored ⋯ dropdown instead of a flat button stack */
.tmx-menu{
  margin-top: 10px;
}

.tmx-menu__trigger{
  width: 38px;
  padding: 0;
  flex: 0 0 auto;
}

/* Hidden by default (desktop keeps the compact icon-only circle); mobile
   turns these on to make the trigger read as a clear "More actions" row. */
.tmx-menu__triggerLabel,
.tmx-menu__chevron{
  display: none;
}

/* .tmx-menu__panel is the element Bootstrap/Popper actually positions (incl. auto-flip when the
   viewport runs out of room below) — it stays visually bare so Popper's inline position transform
   is never fighting our own. All visible chrome + the open animation live on .tmx-menu__panelInner. */
.tmx-menu__panel{
  display: block; /* override Bootstrap's display:none — panel must stay in the layout for Popper to size/flip it */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  z-index: 1060;
}

/* A generic `body.tm-saas .dropdown-menu` rule (tm-bundle.css) has equal
   specificity to .tmx-menu__panel and also sets border + box-shadow, so it
   can win the cascade and paint a floating bordered/shadowed box under this
   panel even while it's fully closed (the panel itself stays in the layout
   for Popper; see above). Same selector shape, loaded later, wins the tie
   back to bare/invisible. */
body.tm-saas .tmx-menu__panel{
  border: 0;
  box-shadow: none;
}

.tmx-menu__panelInner{
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.96);
  transform-origin: top right;
}

.tmx-menu__panel.show .tmx-menu__panelInner{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference){
  .tmx-menu__panelInner{
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
}

.tmx-menu__item{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  color: inherit;
}

.tmx-menu__item:hover,
.tmx-menu__item:focus{
  background: rgba(0,0,0,.05);
}

.tmx-menu__item--danger{
  color: #dc3545;
}

.tmx-menu__item--danger:hover,
.tmx-menu__item--danger:focus{
  background: rgba(220,53,69,.08);
}

.tmx-menu__setting{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 4px;
}

.tmx-toggle--menu,
.tmx-select--menu,
.tmx-input--menu{
  height: 38px;
  font-size: 13px;
}

.tmx-alert{
  border: 1px solid rgba(220,53,69,.35);
  background: rgba(220,53,69,.06);
  color: #b02a37;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.tmx-alert__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tmx-alert__msg{
  flex: 1;
  font-weight: 800;
}

.tmx-alert__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(176,42,55,.92);
}

.tmx-btn--sm{
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
}

.tmx-skeleton{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.tmx-skel-row{
  height: 56px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

.tmx-skel-row:after{
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: rgba(255,255,255,.45);
  transform: skewX(-20deg);
  animation: tmx-shimmer 1.1s infinite;
}

@keyframes tmx-shimmer{
  0%{ left: -40%; }
  100%{ left: 120%; }
}

.tmx-message-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tmx-msg{
  display: block;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.tmx-msg:hover{ background: rgba(0,0,0,.02); }

.tmx-msg__from{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 2px;
}

.tmx-msg__subject{
  font-size: 13px;
  color: rgba(0,0,0,.75);
}

.tmx-msg__meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tmx-msg__dot{ opacity: .55; }

.tmx-msg__badge{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 14px;
  background: rgba(var(--tm-primary-rgb,37,99,235), .18);
  color: rgba(0,0,0,.78);
  font-weight: 800;
}

:dir(rtl) .tmx-msg__badge{
  right: auto;
  left: 10px;
}

.tmx-msg.is-new{
  border-color: rgba(var(--tm-primary-rgb,37,99,235), .55);
}

/* Focus rings (match global theme) */
.tmx-btn:focus-visible,
.tmx-email-input:focus-visible,
.tmx-select:focus-visible,
.tmx-input:focus-visible{
  outline: none;
  box-shadow: var(--tm-ring, 0 0 0 .2rem rgba(37,99,235,.22));
}
.tmx-toggle:focus-within{
  box-shadow: var(--tm-ring, 0 0 0 .2rem rgba(37,99,235,.22));
}

.tmx-empty{
  text-align: center;
  padding: 16px 10px;
  color: rgba(0,0,0,.6);
}

.tmx-empty__sub{
  margin-top: 6px;
  font-size: 13px;
}

.tmx-empty__address{
  font-weight: 900;
  color: rgba(0,0,0,.78);
  word-break: break-all;
}

.tmx-empty__actions{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tmx-empty__hint{
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.tmx-empty__icon{
  font-size: 20px;
  margin-bottom: 8px;
  opacity: .7;
}

.tmx-inbox-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tmx-inbox-list__item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
}

.tmx-inbox-list__item.is-active{
  border-color: rgba(var(--color1-rgb,37,99,235), .55);
}

.tmx-inbox-list__email{
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmx-inbox-list__actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* P5 — Pro inbox management (search / quick switch / badges) */
.tmx-inbox-search{
  width: 100%;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 12px;
  font-size: 13px;
  background: #fff;
}

.tmx-inbox-search:focus{
  outline: none;
  border-color: rgba(var(--color1-rgb,37,99,235), .55);
  box-shadow: 0 0 0 4px rgba(var(--color1-rgb,37,99,235), .18);
}

.tmx-open-inbox-form{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.tmx-inbox-list__mainBtn{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: start;
  cursor: pointer;
}

.tmx-inbox-list__mainBtn:disabled{
  cursor: default;
  opacity: .9;
}

.tmx-inbox-list__mainBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--color1-rgb,37,99,235), .18);
  border-radius: 12px;
}

.tmx-inbox-list__sub{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tmx-badge{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.72);
}

.tmx-badge--premium{
  border-color: rgba(var(--color1-rgb,37,99,235), .55);
  background: rgba(var(--color1-rgb,37,99,235), .14);
}

.tmx-inbox-list__expires{
  font-size: 11px;
  color: rgba(0,0,0,.55);
}

.tmx-pro-switch{
  margin-bottom: 10px;
}

@media (min-width: 992px){
  /* Sidebar exists on desktop; keep the switcher for mobile/tablet only */
  .tmx-pro-switch{ display: none; }
}

.tmx-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 12px 0;
}

.tmx-muted{
  color: rgba(0,0,0,.55);
  font-size: 12px;
}

#tmProInboxNoResults{
  margin-top: 8px;
  text-align: center;
}

.tmx-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.03);
}

.tmx-field{ margin-bottom: 10px; }
.tmx-label{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.65);
}

/* Toast */
.tmx-toast{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.85);
  color: #fff;
  margin-top: 10px;
  max-width: 420px;
}

.tmx-toast__msg{ font-size: 13px; }
.tmx-toast__close{
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tmx-toast--success{ background: rgba(25,135,84,.92); }
.tmx-toast--error{ background: rgba(220,53,69,.92); }
.tmx-toast--info{ background: rgba(13,110,253,.92); }

/* Mobile */
@media (max-width: 575.98px){
  .tmx-inbox-app__top{ align-items: flex-start; }

  /* Actions: reduce scrolling while keeping Delete safe */
  .tmx-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tmx-actions .tmx-btn{ width: 100%; }
  .tmx-actions .tmx-btn--primary{ grid-column: 1 / -1; }
  .tmx-actions .tmx-btn--danger{ grid-column: 1 / -1; }

  /* Toolbar stays stacked for clarity */
  .tmx-toolbar .tmx-btn,
  .tmx-toolbar .tmx-toggle,
  .tmx-toolbar .tmx-select,
  .tmx-toolbar .tmx-input{ width: 100%; }
  .tmx-toolbar{ align-items: stretch; }
}


/* TEMPMY_MESSAGE_SEARCH_LITE_V1 */
.tmx-message-search {
  margin: 0 0 14px 0;
}

.tmx-message-search__row {
  position: relative;
  display: flex;
  align-items: center;
}

.tmx-message-search__input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  padding: 10px 42px 10px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.tmx-message-search__input:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.tmx-message-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tmx-message-search__meta {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}


/* TEMPMY_SHARE_EMAIL_LITE_V1 */
#tmShareEmailBtn {
  white-space: nowrap;
}

@media (max-width: 575px) {
  #tmShareEmailBtn {
    width: 100%;
    justify-content: center;
  }
}


/* TEMPMY_INBOX_POLISH_V1 */
body.tm-saas .tmx-inbox {
    padding: 10px 0 34px;
}

body.tm-saas.tm-mode-inbox .tmx-inbox {
    padding-top: 8px;
}

body.tm-saas .tmx-inbox-app {
    max-width: 1120px;
    margin: 0 auto;
}

body.tm-saas .tmx-inbox-app__top {
    margin-bottom: 14px;
    padding: 0 2px;
}

body.tm-saas .tmx-inbox-app__title {
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.03em;
    color: var(--tm-text, #0f172a);
}

body.tm-saas .tmx-inbox-app__title i {
    color: var(--color1, #16a34a);
}

body.tm-saas .tmx-pill {
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

body.tm-saas .tmx-card {
    border-radius: 24px;
    border: 1px solid rgba(15,23,42,.10);
    background:
        radial-gradient(circle at 0% 0%, rgba(22,163,74,.055), transparent 38%),
        #fff;
    box-shadow: 0 18px 44px rgba(15,23,42,.075);
    /* No overflow:hidden — it would clip the ⋯ dropdown menu. .tmx-card__head
       rounds its own top corners to match instead. */
}

/* Messages stays a plain section even in the SaaS theme — no second elevated card */
body.tm-saas .tmx-card--messages {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

body.tm-saas .tmx-card--messages .tmx-card__head {
    padding: 0 0 12px;
    background: transparent;
}

body.tm-saas .tmx-card--messages .tmx-card__body {
    padding: 14px 0 0;
}

body.tm-saas .tmx-card__head {
    padding: 16px 18px;
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(15,23,42,.08);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

body.tm-saas .tmx-card__title {
    font-weight: 950;
    letter-spacing: -0.02em;
}

body.tm-saas .tmx-card__body {
    padding: 18px;
}

body.tm-saas .tmx-email-field {
    position: relative;
}

body.tm-saas .tmx-email-input {
    min-height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(248,250,252,.94);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    font-weight: 850;
    letter-spacing: -0.01em;
    color: #0f172a;
}

body.tm-saas .tmx-email-input:focus {
    border-color: rgba(22,163,74,.42);
    box-shadow: 0 0 0 4px rgba(22,163,74,.14);
}

body.tm-saas .tmx-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

body.tm-saas .tmx-btn {
    min-height: 46px;
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
    box-shadow: none;
}

body.tm-saas .tmx-btn--primary {
    background: var(--color1, #16a34a);
    border-color: var(--color1, #16a34a);
    color: #fff;
}

body.tm-saas .tmx-btn--primary:hover {
    filter: brightness(.97);
}

body.tm-saas .tmx-btn--ghost {
    background: #fff;
    border-color: rgba(15,23,42,.12);
    color: rgba(15,23,42,.84);
}

body.tm-saas .tmx-btn--ghost:hover {
    background: rgba(15,23,42,.035);
    border-color: rgba(15,23,42,.18);
}

body.tm-saas .tmx-btn--danger {
    background: rgba(220,38,38,.08);
    border-color: rgba(220,38,38,.18);
    color: #b91c1c;
}

body.tm-saas .tmx-btn--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

body.tm-saas .tmx-toolbar {
    margin-top: 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(15,23,42,.025);
}

body.tm-saas .tmx-toggle {
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
}

body.tm-saas .tmx-select,
body.tm-saas .tmx-input {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
}

body.tm-saas .tmx-status {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(15,23,42,.66);
}

body.tm-saas .tmx-message-search {
    margin-bottom: 12px;
}

body.tm-saas .tmx-message-search__input {
    min-height: 46px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.12);
}

body.tm-saas .tmx-message-list {
    display: grid;
    gap: 10px;
}

body.tm-saas .tmx-empty {
    border-radius: 22px;
    border: 1px dashed rgba(15,23,42,.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(22,163,74,.08), transparent 42%),
        rgba(248,250,252,.9);
    padding: 28px 18px;
}

body.tm-saas .tmx-empty__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    margin: 0 auto 12px;
    background: #fff;
    color: var(--color1, #16a34a);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

body.tm-saas .tmx-empty__text {
    font-weight: 950;
    letter-spacing: -0.02em;
}

body.tm-saas .tmx-empty__address {
    display: inline-flex;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    font-weight: 850;
}

body.tm-saas .tmx-alert {
    border-radius: 18px;
    border: 1px solid rgba(220,38,38,.18);
    background: rgba(220,38,38,.065);
}

@media (max-width: 991.98px) {
    body.tm-saas .tmx-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.tm-saas .tmx-actions .tmx-btn--primary,
    body.tm-saas .tmx-actions .tmx-btn--danger {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    body.tm-saas .tmx-inbox {
        padding: 6px 0 22px;
    }

    body.tm-saas .tmx-inbox-app__top {
        gap: 10px;
    }

    body.tm-saas .tmx-inbox-app__title {
        font-size: 19px;
    }

    body.tm-saas .tmx-inbox-app__meta {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.tm-saas .tmx-pill {
        justify-content: center;
    }

    body.tm-saas .tmx-card {
        border-radius: 20px;
    }

    body.tm-saas .tmx-card__head {
        padding: 14px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    body.tm-saas .tmx-card__body {
        padding: 14px;
    }

    body.tm-saas .tmx-email-input {
        min-height: 52px;
        font-size: 14px;
    }

    body.tm-saas .tmx-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.tm-saas .tmx-actions .tmx-btn {
        min-height: 44px;
        padding-inline: 10px;
    }

    body.tm-saas .tmx-actions .tmx-btn span {
        font-size: 13px;
    }

    body.tm-saas .tmx-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    body.tm-saas .tmx-toolbar .tmx-btn,
    body.tm-saas .tmx-toolbar .tmx-select,
    body.tm-saas .tmx-toolbar .tmx-input,
    body.tm-saas .tmx-toolbar .tmx-toggle {
        width: 100%;
    }

    body.tm-saas .tmx-empty {
        padding: 22px 14px;
    }

    body.tm-saas .tmx-empty__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* TEMPMY_BLUE_CYAN_ROOT_FINAL_V1 — canonical copy lives in tm-brand-refresh.css,
   loaded on every page; duplicate removed here during token consolidation. */

.tm-cookie__msg a,
.tm-cookie a,
.tm-cookie__btn--ghost,
.tm-cookie__btn--outline:hover {
  color: #2563EB !important;
}

.tm-cookie__btn--primary {
  background: linear-gradient(135deg, #2563EB, #06B6D4) !important;
  color: #ffffff !important;
}

.tm-price-currency,
.tm-pricing-card .fa-check,
.tm-pricing-card i,
.pricing .fa-check,
.pricing i.fa-check,
.fa-star,
.fa-bolt,
.fa-gem {
  color: #2563EB !important;
}

.tm-change-result__title,
.tm-premium-domains__badge,
.tmx-actions a[href*="change"],
.tmx-actions a[href*="change"] i,
.tmx-actions a[href*="change"] span {
  color: #2563EB !important;
}

/* TEMPMY_INBOX_ACTION_HIERARCHY_V1 — Delete/Share are tertiary, not primary CTAs */
body.tm-saas #tmDeleteMailboxBtn {
  background: rgba(220, 38, 38, .06) !important;
  border-color: rgba(220, 38, 38, .22) !important;
  color: #b91c1c !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body.tm-saas #tmDeleteMailboxBtn:hover {
  background: rgba(220, 38, 38, .1) !important;
}

body.tm-saas #tmShareEmailBtn {
  font-weight: 600;
  opacity: .85;
}

body.tm-saas #tmShareEmailBtn:hover {
  opacity: 1;
}

/* TEMPMY_INBOX_MOBILE_ERGONOMICS_V1 — thumb-zone grouping + state polish (mobile only) */
@media (max-width: 575.98px) {
  body.tm-saas .tmx-card--controls .tmx-card__head {
    padding: 10px 12px;
  }

  body.tm-saas .tmx-card--controls .tmx-card__body {
    padding: 10px 12px;
  }

  body.tm-saas .tmx-inbox-grid {
    gap: 10px;
  }

  /* Clear separation from the Current-email card so Messages doesn't read
     as overlapping/too close beneath it. */
  body.tm-saas .tmx-card--messages {
    margin-top: 6px;
  }

  /* Messages title must never collide with the refresh icon — give the title
     room to shrink/ellipsis instead of pushing into the button (long
     translations, narrow screens). */
  body.tm-saas .tmx-card--messages .tmx-card__head {
    gap: 8px;
  }

  body.tm-saas .tmx-card--messages .tmx-card__title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tm-saas .tmx-card--messages .tmx-card__meta {
    flex: 0 0 auto;
  }

  /* TEMPMY_INBOX_STATUS_DEDUPE_V1 — #tmInboxStatus duplicated the inline
     auto-refresh status next to Refresh (and the button's own spinner) with a
     second standalone "Refreshing…" line under More actions. Visually hide it
     (Bootstrap's .sr-only technique, not display:none) so aria-live="polite"
     keeps announcing to screen readers while sighted users only see the one
     inline status beside Refresh. */
  body.tm-saas #tmInboxStatus {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Flat: Copy/status/Refresh/⋯ sit directly in the Current-email card with spacing only — no nested sub-card */
  body.tm-saas .tmx-thumbzone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
  }

  /* Refresh ("check inbox") reads as a strong secondary action */
  body.tm-saas .tmx-thumbzone #tmRefreshBtn {
    min-height: 42px;
    background: #fff;
    border-color: rgba(37, 99, 235, .35);
    color: #2563EB;
    font-weight: 900;
  }

  /* TEMPMY_INBOX_MORE_MENU_MOBILE_FIX_V1 — on real devices the Popper-positioned
     dropdown rendered as a tiny floating circle plus an empty/transparent panel.
     On mobile we drop Popper positioning entirely and turn the menu into a plain
     full-width disclosure that reflows inline: collapsed has zero footprint
     (display:none), expanded shows the real items in normal flow. Bootstrap's
     dropdown.js still drives .show / aria-expanded — only the visual mechanics change. */
  body.tm-saas .tmx-menu {
    margin-top: 0;
    width: 100%;
  }

  body.tm-saas .tmx-menu__trigger {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    justify-content: space-between;
  }

  body.tm-saas .tmx-menu__triggerLabel {
    display: inline;
    font-size: 13px;
  }

  body.tm-saas .tmx-menu__chevron {
    display: inline-block;
    font-size: 12px;
    transition: transform .15s ease;
  }

  body.tm-saas .tmx-menu__trigger[aria-expanded="true"] .tmx-menu__chevron {
    transform: rotate(180deg);
  }

  body.tm-saas .tmx-menu__panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: none;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 4px;
    /* Lets scrollIntoView() (triggered on expand, see tm-inbox.js) land the panel
       above the fixed bottom nav / iOS Safari bottom bar instead of flush behind it. */
    scroll-margin-bottom: calc(var(--tm-fixed-nav-reserve, var(--tm-mobile-nav-reserve, 92px)) + env(safe-area-inset-bottom) + 12px);
  }

  body.tm-saas .tmx-menu__panel.show {
    display: block;
  }

  body.tm-saas .tmx-menu__panelInner {
    width: 100%;
    transform-origin: top;
  }

  /* TEMPMY_INBOX_MORE_MENU_COMPACT_V1 — keep the expanded panel short: Change/Share
     share one row and Delete reads as a smaller, lighter secondary/destructive
     affordance instead of a full-height row, so the whole disclosure is shorter
     and less likely to push auto-refresh under the fixed nav in the first place. */
  body.tm-saas .tmx-menu__panelInner .tmx-menu__item {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  body.tm-saas .tmx-menu__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.tm-saas .tmx-menu__row .tmx-menu__item {
    justify-content: center;
    text-align: center;
  }

  body.tm-saas .tmx-menu__panelInner .dropdown-divider {
    margin: 4px 0;
  }

  body.tm-saas .tmx-menu__item--danger {
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    opacity: .9;
  }

  /* Auto-refresh settings inside the ⋯ menu: compact 2-up row instead of stacked full-width rows */
  body.tm-saas .tmx-menu__setting {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.tm-saas .tmx-menu__setting #tmPwaInstallBtn,
  body.tm-saas .tmx-menu__setting #tmAutoRefreshCustom {
    grid-column: 1 / -1;
  }

  body.tm-saas .tmx-menu__setting .tmx-toggle,
  body.tm-saas .tmx-menu__setting #tmAutoRefreshInterval {
    min-height: 40px;
    font-size: 13px;
    width: 100%;
  }

  /* Empty / loading / error state presentation; extra bottom padding keeps
     the empty-state hint clear of the fixed bottom nav / mobile browser bar. */
  body.tm-saas #tmMessagesEmpty {
    padding: 18px 14px 24px;
  }

  body.tm-saas #tmMessagesEmpty .tmx-empty__address {
    font-size: 13px;
    word-break: break-all;
  }

  body.tm-saas #tmMessagesSkeleton .tmx-skel-row {
    height: 52px;
  }

  body.tm-saas #tmMessagesError {
    font-size: 13px;
  }

  body.tm-saas #tmMessagesError .tmx-alert__row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.tm-saas #tmMessagesRetryBtn {
    width: 100%;
    justify-content: center;
  }
}

/* TEMPMY_INBOX_MOBILE_MERGE_V1 — collapse Current-email + Messages into one
   flat panel on mobile: the outer .tmx-inbox-app shell becomes the only
   visible card boundary, email + Copy share a row, and the empty-state
   illustration shrinks to just an icon + text so the screen reads as one
   short, scannable panel.
   Note: tm-saas-polish.blade.php applies global `!important` border/shadow/
   radius to the shared `.tmx-card` base class (and forces `.tmx-actions`
   into a single-column grid at <=767.98px), which silently defeated this
   block's earlier non-!important rules — confirmed via Playwright/CDP cascade
   trace. The class-specific selectors below + matching !important are
   required to actually win against that global stylesheet. */
@media (max-width: 575.98px) {
  /* Drop the inner card chrome from Current-email so it stops reading as a
     second elevated card nested inside the outer app shell. */
  body.tm-saas .tmx-card--controls {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tm-saas .tmx-card--controls .tmx-card__head {
    padding: 0 0 8px;
    background: transparent;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    border-radius: 0;
  }

  body.tm-saas .tmx-card--controls .tmx-card__body {
    padding: 10px 0 0;
  }

  /* Messages already renders without its own header card, but the same
     global !important rule re-adds a border/shadow to it too — strip that
     so it stays flush with Current-email inside one panel. */
  body.tm-saas .tmx-card--messages {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Email gets its own full-width row so the full address is never squeezed
     against the Copy button — a shared row with text-overflow:ellipsis was
     visually truncating real addresses. Copy sits on its own row below. */
  body.tm-saas .tmx-email-copy {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  body.tm-saas .tmx-email-copy .tmx-email-field {
    width: 100%;
    min-width: 0;
  }

  body.tm-saas .tmx-email-copy .tmx-actions {
    display: flex !important;
    width: 100%;
    margin-top: 0;
  }

  body.tm-saas .tmx-email-copy .tmx-actions .tmx-btn {
    width: 100% !important;
  }

  body.tm-saas .tmx-email-copy #tmCopyEmailBtn {
    width: 100% !important;
    min-height: 44px;
    font-size: 14px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  /* Empty state: drop the large SVG illustration, keep icon + text + hint */
  body.tm-saas #tmMessagesEmpty .tm-illustration--empty {
    display: none;
  }

  body.tm-saas #tmMessagesEmpty {
    padding: 12px 12px 18px;
  }
}



/* TEMPMY_INBOX_DESIGN_SYSTEM_V1 */
body.tm-saas .tmx-inbox-app{
  border-radius:var(--tm-ds-radius-lg,22px);
  border:1px solid rgba(37,99,235,.13);
  background:#fff;
  box-shadow:var(--tm-ds-shadow-sm,0 10px 24px rgba(15,23,42,.07));
}

body.tm-saas .tmx-inbox-app__top{
  padding:10px 12px;
  border-bottom:1px solid rgba(37,99,235,.12);
  background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(6,182,212,.08));
  border-top-left-radius:var(--tm-ds-radius-lg,22px);
  border-top-right-radius:var(--tm-ds-radius-lg,22px);
}

body.tm-saas .tmx-inbox-app__title{
  color:var(--tm-ds-text,#0F172A);
  font-weight:950;
  letter-spacing:0;
}

body.tm-saas .tmx-pill,
body.tm-saas .tmx-chip,
body.tm-saas .tmx-badge{
  border:1px solid rgba(37,99,235,.14);
  border-radius:var(--tm-ds-pill,999px);
  background:rgba(37,99,235,.07);
  color:#1E40AF;
  font-weight:850;
}

body.tm-saas .tmx-card{
  border-radius:var(--tm-ds-radius-lg,22px);
  border:1px solid var(--tm-ds-border,rgba(15,23,42,.10));
  background:#fff;
  box-shadow:var(--tm-ds-shadow-sm,0 10px 24px rgba(15,23,42,.07));
}

body.tm-saas .tmx-card__head{
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  border-top-left-radius:var(--tm-ds-radius-lg,24px);
  border-top-right-radius:var(--tm-ds-radius-lg,24px);
}

body.tm-saas .tmx-card__title{font-size:15px;font-weight:950;letter-spacing:0;}
body.tm-saas .tmx-card__body{padding:11px;}

@media (min-width:768px){
  body.tm-saas .tmx-card__body{
    padding:14px;
  }

  body.tm-saas .tmx-email-copy{
    display:flex;
    align-items:stretch;
    gap:10px;
  }

  body.tm-saas .tmx-email-copy .tmx-email-field{
    flex:1 1 auto;
    min-width:0;
  }

  body.tm-saas .tmx-email-copy .tmx-actions{
    display:flex;
    flex:0 0 auto;
    margin-top:0;
  }

  body.tm-saas .tmx-email-copy #tmCopyEmailBtn{
    width:auto;
    min-width:150px;
    padding-inline:18px;
  }

  body.tm-saas .tmx-home-open-row,
  body.tm-saas .tmx-refresh-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  body.tm-saas .tmx-home-open-row .tmx-btn,
  body.tm-saas .tmx-refresh-row .tmx-btn{
    width:auto;
  }
}

body.tm-saas .tmx-email-input,
body.tm-saas .tmx-select,
body.tm-saas .tmx-input,
body.tm-saas .tmx-inbox-search,
body.tm-saas .tmx-message-search__input{
  border-radius:var(--tm-ds-radius-md,18px);
  border:1px solid var(--tm-ds-border,rgba(15,23,42,.10));
  background:#fff;
  color:var(--tm-ds-text,#0F172A);
  box-shadow:var(--tm-ds-shadow-xs,0 1px 2px rgba(15,23,42,.04));
}

body.tm-saas .tmx-email-input{
  min-height:44px;
  font-size:15px;
  border-color:rgba(37,99,235,.20);
  background:linear-gradient(180deg,#fff,#F8FAFC);
}

body.tm-saas .tmx-btn{
  border-radius:var(--tm-ds-pill,999px);
  min-height:42px;
  font-weight:900;
  letter-spacing:0;
}

body.tm-saas .tmx-btn--primary{
  border-color:transparent;
  background:var(--tm-ds-gradient,linear-gradient(135deg,#2563EB,#06B6D4));
  color:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.20);
}

body.tm-saas .tmx-btn--ghost{
  border-color:var(--tm-ds-border,rgba(15,23,42,.10));
  background:#fff;
  color:var(--tm-ds-text,#0F172A);
}

body.tm-saas .tmx-empty{
  border-radius:var(--tm-ds-radius-lg,22px);
  border:1px dashed rgba(37,99,235,.22);
  background:linear-gradient(180deg,rgba(37,99,235,.045),rgba(6,182,212,.035));
  box-shadow:none;
}

@media (max-width:767.98px){
  body.tm-saas .tmx-inbox{padding-bottom:calc(var(--tm-fixed-nav-reserve, var(--tm-mobile-nav-reserve,92px)) + env(safe-area-inset-bottom));}
  body.tm-saas .tmx-inbox-app{border-radius:18px;}
  body.tm-saas .tmx-inbox-app__top{border-top-left-radius:18px;border-top-right-radius:18px;padding:10px 12px;}
  body.tm-saas .tmx-card__body{padding:10px;}
  body.tm-saas .tmx-email-copy #tmCopyEmailBtn{min-height:44px;}
}
/* TEMPMY_FLATTEN_BATCH_1_INBOX_DESKTOP */
@media (min-width:768px){
  body.tm-saas .tmx-card--controls,
  body.tm-saas .tmx-card--messages{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.tm-saas .tmx-card--controls .tmx-card__head,
  body.tm-saas .tmx-card--messages .tmx-card__head{
    padding:0 0 10px;
    border-bottom:1px solid rgba(15,23,42,.07);
    border-radius:0 !important;
    background:transparent !important;
  }

  body.tm-saas .tmx-card--controls .tmx-card__body,
  body.tm-saas .tmx-card--messages .tmx-card__body{
    padding:12px 0 0;
  }

  body.tm-saas .tmx-card--messages{
    margin-top:2px;
  }

  body.tm-saas .tmx-empty{
    border-color:rgba(15,23,42,.10);
    background:rgba(248,250,252,.58);
  }
}
/* TEMPMY_REPAIR_BATCH_1_INBOX */
@media (min-width:768px){
  body.tm-saas .tmx-inbox-app{
    padding-bottom:18px;
  }

  body.tm-saas .tmx-inbox-grid{
    gap:22px;
  }

  body.tm-saas .tmx-card--controls .tmx-card__body,
  body.tm-saas .tmx-card--messages .tmx-card__body{
    padding-top:14px;
  }

  body.tm-saas .tmx-email-copy{
    gap:12px;
  }

  body.tm-saas .tmx-email-copy .tmx-actions{
    flex:0 1 auto;
  }

  body.tm-saas .tmx-email-copy #tmCopyEmailBtn{
    min-width:132px;
    padding-inline:16px;
    white-space:nowrap;
  }

  body.tm-saas .tmx-email-input{
    min-height:48px;
    font-size:15.5px;
  }

  body.tm-saas .tmx-home-open-row,
  body.tm-saas .tmx-refresh-row{
    gap:10px;
    margin-top:12px;
  }
}

/* TEMPMY_URGENT_REPAIR_INBOX_DESKTOP_WIDTH_V1 */
@media (min-width:1200px){
  body.tm-saas.tm-mode-inbox .tmx-inbox-app{
    max-width:1240px;
  }

  body.tm-saas.tm-mode-inbox .tmx-inbox-app.is-free .tmx-inbox-grid{
    grid-template-columns:minmax(500px, .95fr) minmax(0, 1.25fr);
  }

  body.tm-saas.tm-mode-inbox .tmx-inbox-app.is-pro .tmx-inbox-grid{
    grid-template-columns:300px minmax(440px, .9fr) minmax(0, 1.25fr);
  }
}

/* TEMPMY_PRODUCT_UI_REPAIR_20260625 */
body.tm-saas .tmx-inbox-app{
  box-shadow:0 12px 34px rgba(15,23,42,.08) !important;
}

body.tm-saas .tmx-email-input{
  border-radius:14px;
  background:#fff;
}
body.tm-saas .tmx-btn{border-radius:14px;}
@media (min-width:768px){
  body.tm-saas.tm-mode-inbox .tmx-inbox{padding-top:12px;}
  body.tm-saas.tm-mode-inbox .tmx-inbox-app{padding-bottom:20px;}
  body.tm-saas.tm-mode-inbox .tmx-inbox-grid{gap:24px;}
}
@media (max-width:575.98px){
  body.tm-saas .tmx-inbox-app__meta{gap:6px;}
  body.tm-saas .tmx-pill{padding:5px 8px;font-size:11px;}
  body.tm-saas .tmx-card--controls .tmx-card__body{padding-top:8px;}
  body.tm-saas .tmx-email-input{min-height:50px;font-size:14.5px;}
  body.tm-saas .tmx-home-open-row .tmx-btn,
  body.tm-saas .tmx-refresh-row .tmx-btn{min-height:42px;}
}
@media (min-width:576px) and (max-width:767.98px){
  body.tm-saas .tmx-email-copy #tmCopyEmailBtn{width:100% !important;}
}

/* TEMPMY_FULL_VISUAL_REPAIR_20260626 */
body.tm-saas .tmx-inbox{
  padding-top:14px;
}

body.tm-saas .tmx-inbox-app{
  border-color:rgba(15,23,42,.09) !important;
  background:#fff !important;
  box-shadow:0 10px 30px rgba(15,23,42,.06) !important;
}

body.tm-saas .tmx-inbox-app__top{
  background:linear-gradient(180deg,rgba(239,246,255,.82),rgba(255,255,255,.96));
  border-bottom-color:rgba(15,23,42,.075);
}

body.tm-saas .tmx-inbox-app__title{
  color:#0f172a;
}

body.tm-saas .tmx-pill{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color:#475569;
}

body.tm-saas .tmx-pill__value{
  color:#0f172a;
}

body.tm-saas .tmx-card{
  border-color:rgba(15,23,42,.085);
}

body.tm-saas .tmx-card__meta,
body.tm-saas .tmx-status,
body.tm-saas .tmx-microcopy,
body.tm-saas .tmx-refresh-status,
body.tm-saas .tmx-empty,
body.tm-saas .tmx-empty__sub,
body.tm-saas .tmx-empty__hint,
body.tm-saas .tmx-msg__meta{
  color:#475569 !important;
}

body.tm-saas .tmx-email-input{
  min-height:50px;
  border-radius: 14px;
  color:#0f172a;
}

body.tm-saas .tmx-btn{
  min-height:44px;
  border-radius: 14px;
}

body.tm-saas .tmx-btn--primary{
  color:#fff !important;
}

body.tm-saas .tmx-menu__panelInner{
  border-color:rgba(15,23,42,.10);
  box-shadow:0 18px 42px rgba(15,23,42,.14);
}

body.tm-saas .tmx-menu__item{
  min-height:42px;
}

body.tm-saas .tmx-msg{
  border-color:rgba(15,23,42,.085);
  box-shadow:0 1px 2px rgba(15,23,42,.035);
}

body.tm-saas .tmx-empty{
  border-color:rgba(37,99,235,.18);
}

@media (min-width:768px){
  body.tm-saas.tm-mode-inbox .tmx-inbox{
    padding-top:16px;
    padding-bottom:62px;
  }

  body.tm-saas .tmx-inbox-grid{
    padding:18px;
  }
}

@media (max-width:767.98px){
  body.tm-saas .tmx-inbox{
    padding-top:8px;
    padding-bottom:calc(var(--tm-fixed-nav-reserve, var(--tm-mobile-nav-reserve,92px)) + 24px + env(safe-area-inset-bottom));
  }

  body.tm-saas .tmx-inbox-app{
    border-radius:18px;
    box-shadow:0 6px 18px rgba(15,23,42,.055) !important;
  }

  body.tm-saas .tmx-inbox-grid{
    padding:10px;
    gap:10px;
  }

  body.tm-saas .tmx-inbox-app__top{
    align-items:flex-start;
    gap:8px;
  }

  body.tm-saas .tmx-inbox-app__meta{
    width:100%;
  }

  body.tm-saas .tmx-card__head{
    padding:11px 10px;
  }

  body.tm-saas .tmx-card__body{
    padding:10px;
  }

  body.tm-saas .tmx-actions,
  body.tm-saas .tmx-toolbar,
  body.tm-saas .tmx-refresh-row,
  body.tm-saas .tmx-home-open-row{
    gap:8px;
  }

  body.tm-saas .tmx-actions .tmx-btn,
  body.tm-saas .tmx-toolbar .tmx-btn{
    flex:1 1 auto;
  }

  body.tm-saas .tmx-empty{
    padding:18px 12px !important;
  }
}