.bh-mariam-v2 {
  --bh-brand: #1E4D61;
  --bh-ink: #172126;
  --bh-muted: rgba(23, 33, 38, .58);
  --bh-soft: rgba(30, 77, 97, .06);
  --bh-soft-2: rgba(30, 77, 97, .11);
  --bh-border: rgba(30, 77, 97, .13);
  --bh-height: 420px;
  position: relative;
  min-height: var(--bh-height);
  padding: clamp(18px, 3vw, 34px);
  color: var(--bh-ink);
  box-sizing: border-box;
}

.bh-mariam-v2 * { box-sizing: border-box; }

.bhm-card {
  position: relative;
  min-height: calc(var(--bh-height) - 40px);
  max-width: 980px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 12%, rgba(30, 77, 97, .08), transparent 34%),
    linear-gradient(135deg, rgba(30,77,97,.045), rgba(255,255,255,.98) 48%, rgba(30,77,97,.035));
  border: 1px solid var(--bh-border);
  box-shadow: 0 18px 55px rgba(13, 35, 44, .12);
  overflow: visible;
  isolation: isolate;
}

.bhm-chat {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  min-height: calc(var(--bh-height) - 40px);
  padding: clamp(22px, 4vw, 38px);
}

.bhm-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(30,77,97,.10);
  box-shadow: 0 6px 16px rgba(13,35,44,.045);
}

.bhm-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bh-brand);
}

.bhm-status {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 50%;
  background: #26c85d;
  box-shadow: 0 0 0 4px rgba(38, 200, 93, .12);
}

.bhm-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 250px;
  transition: opacity .5s ease, transform .5s ease;
}

.bh-mariam-v2.is-exiting .bhm-thread {
  opacity: 0;
  transform: translateY(8px);
}

.bhm-bubble {
  max-width: min(100%, 520px);
  animation: bhmBubbleIn .36s ease both;
}

.bhm-text-bubble {
  padding: 13px 16px;
  border-radius: 22px 22px 22px 7px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(30,77,97,.10);
  box-shadow: 0 8px 22px rgba(13,35,44,.06);
  color: var(--bh-ink);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  white-space: normal;
}

.bhm-letter {
  animation: bhmLetter .16s ease both;
}

.bhm-cursor {
  color: var(--bh-brand);
  font-weight: 700;
  margin-left: 2px;
  animation: bhmPulse .78s ease-in-out infinite;
}

.bhm-attachment-bubble,
.bhm-category-bubble,
.bhm-button-bubble {
  background: transparent;
}

.bhm-attachments {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 78px));
  gap: 8px;
  padding: 8px;
  border-radius: 20px 20px 20px 8px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(30,77,97,.10);
  box-shadow: 0 8px 22px rgba(13,35,44,.055);
}

.bhm-thumb-link {
  display: block;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  animation: bhmThumbIn .34s ease forwards;
  transition: transform .18s ease;
  text-decoration: none !important;
}

.bhm-thumb-link:hover {
  transform: translateY(-1px) scale(1.03);
}

.bhm-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: none;
}

.bhm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--bh-brand);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800;
  box-shadow: 0 11px 24px rgba(30,77,97,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.bhm-cta:hover {
  transform: translateY(-1px);
  filter: brightness(.94);
  box-shadow: 0 14px 30px rgba(30,77,97,.28);
}

.bhm-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 9px;
  max-width: 430px;
}

.bhm-category-card {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(30,77,97,.12);
  box-shadow: 0 7px 18px rgba(13,35,44,.055);
  color: var(--bh-ink) !important;
  text-decoration: none !important;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  animation: bhmThumbIn .34s ease forwards;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bhm-category-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30,77,97,.25);
  box-shadow: 0 12px 26px rgba(13,35,44,.10);
}

.bhm-category-card img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 14px;
}

.bhm-category-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bh-soft);
  color: var(--bh-brand);
  font-size: 28px;
  line-height: 1;
}

@keyframes bhmBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bhmLetter {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bhmThumbIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bhmPulse {
  0%, 100% { opacity: .24; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .bh-mariam-v2 {
    padding: 16px;
  }
  .bhm-card {
    min-height: 560px;
    overflow: hidden;
  }
  .bhm-chat {
    width: 100%;
    padding: 22px;
  }
  .bhm-bubble { max-width: calc(100% - 6px); }
  .bhm-attachments { grid-template-columns: repeat(4, minmax(42px, 1fr)); }
  .bhm-categories { grid-template-columns: 1fr; }
}