/* ===== Portal-style pill buttons for Shabegom Buttons ===== */
/* Use in a button:  class: portal-pill   (optional: portal-accent) */

.markdown-rendered .buttons button.portal-pill,
.markdown-source-view .buttons button.portal-pill {
  /* Layout */
  display: flex;
  align-items: center;
  gap: 0.65rem;

  /* Size */
  width: 100%;
  max-width: 18rem;                 /* tweak */
  min-height: 3.1rem;
  padding: 0.9rem 1rem;

  /* Theme-aware visuals */
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 0.9rem;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 6px 18px var(--background-modifier-box-shadow);

  /* Text */
  font-weight: 600;
  letter-spacing: .1px;
  text-align: left;

  /* Motion */
  transition: transform .06s ease, box-shadow .12s ease,
              background .12s ease, border-color .12s ease;
}

/* Hover/active */
.markdown-rendered .buttons button.portal-pill:hover {
  background: var(--background-secondary-alt, var(--background-secondary));
  border-color: var(--background-modifier-border-hover, var(--background-modifier-border));
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.12),
              0 8px 24px var(--background-modifier-box-shadow);
}
.markdown-rendered .buttons button.portal-pill:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Keyboard focus */
.markdown-rendered .buttons button.portal-pill:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Optional accent variant (CTA) — add `portal-accent` */
.markdown-rendered .buttons button.portal-pill.portal-accent {
  background: color-mix(in oklab, var(--interactive-accent) 20%, var(--background-secondary));
  border-color: color-mix(in oklab, var(--interactive-accent) 40%, var(--background-modifier-border));
  color: var(--text-on-accent, var(--text-normal));
}
.markdown-rendered .buttons button.portal-pill.portal-accent:hover {
  background: color-mix(in oklab, var(--interactive-accent) 28%, var(--background-secondary));
  border-color: color-mix(in oklab, var(--interactive-accent) 50%, var(--background-modifier-border));
}

/* If you include an icon/emoji/img before text, make it neat */
.markdown-rendered .buttons button.portal-pill > svg,
.markdown-rendered .buttons button.portal-pill > img,
.markdown-rendered .buttons button.portal-pill > .button-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  opacity: .95;
}

/* Second line styling (use <small> inside the button label) */
.markdown-rendered .buttons button.portal-pill small {
  display: block;
  margin-top: .15rem;
  font-weight: 500;
  font-size: .85em;
  color: var(--text-muted);
}

/* Optional section label like "Job Search" */
.markdown-rendered .portal-section {
  display: inline-block;
  padding: .35rem .7rem;
  margin: .7rem 0 .4rem;
  font-weight: 800;
  border-radius: .6rem;
  background: var(--background-secondary-alt, var(--background-secondary));
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
}

/* Mobile */
.is-mobile .markdown-rendered .buttons button.portal-pill {
  max-width: 100%;
  padding: 0.85rem 0.95rem;
}