/* Carissima chat widget — self-contained, brand-styled. Namespaced under .crsm-chat. */
.crsm-chat {
  --crsm-sage: #6B705C;
  --crsm-cream: #E9DCC9;
  --crsm-dark: #242321;
  --crsm-white: #FFFFFF;
  --crsm-user: #6B705C;
  --crsm-bot: #F3F1EC;
  --crsm-radius: 18px;
  position: fixed;
  right: 28px;
  bottom: 92px; /* clears the full-width Founding 30 sticky bar at the bottom */
  z-index: 2147483000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
}

.crsm-chat__nudge {
  position: relative;
  background: var(--crsm-dark);
  color: var(--crsm-cream);
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(36, 35, 33, 0.28);
}
.crsm-chat__nudge-close {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 21px;
  height: 21px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--crsm-dark);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.crsm-chat--open .crsm-chat__nudge,
.crsm-chat--nudge-off .crsm-chat__nudge { display: none; }

.crsm-chat__bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--crsm-sage);
  color: var(--crsm-cream);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(36, 35, 33, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.crsm-chat__bubble:hover { transform: scale(1.06); }
.crsm-chat__bubble svg { width: 28px; height: 28px; }

.crsm-chat__panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 370px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--crsm-white);
  border-radius: var(--crsm-radius);
  box-shadow: 0 16px 48px rgba(36, 35, 33, 0.32);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.crsm-chat--open .crsm-chat__panel { display: flex; }
.crsm-chat--open .crsm-chat__bubble { display: none; }

.crsm-chat__header {
  background: var(--crsm-dark);
  color: var(--crsm-cream);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crsm-chat__title { font-weight: 600; font-size: 15px; }
.crsm-chat__subtitle { font-size: 12px; opacity: 0.75; color: var(--crsm-white); }
.crsm-chat__head-actions { display: flex; align-items: center; gap: 6px; }
.crsm-chat__talk {
  background: rgba(233, 220, 201, 0.16);
  border: 1px solid rgba(233, 220, 201, 0.5);
  color: var(--crsm-cream);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.crsm-chat__talk:hover { background: rgba(233, 220, 201, 0.28); }
.crsm-chat__close {
  background: transparent;
  border: none;
  color: var(--crsm-cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.crsm-chat__sys {
  align-self: center;
  max-width: 90%;
  color: #8a857b;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 4px 8px;
}

.crsm-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--crsm-white);
}
.crsm-chat__msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.crsm-chat__msg--bot { align-self: flex-start; background: var(--crsm-bot); color: var(--crsm-dark); border-bottom-left-radius: 4px; }
.crsm-chat__msg--user { align-self: flex-end; background: var(--crsm-user); color: var(--crsm-white); border-bottom-right-radius: 4px; }
.crsm-chat__msg a { color: inherit; text-decoration: underline; }

.crsm-chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.crsm-chat__typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crsm-sage);
  opacity: 0.5; animation: crsm-bounce 1.2s infinite ease-in-out;
}
.crsm-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.crsm-chat__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes crsm-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } }

.crsm-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ECE9E2; background: var(--crsm-white); }
.crsm-chat__input {
  flex: 1; resize: none; border: 1px solid #D9D5CC; border-radius: 20px;
  padding: 9px 14px; font: inherit; max-height: 96px; outline: none;
}
.crsm-chat__input:focus { border-color: var(--crsm-sage); }
.crsm-chat__send {
  border: none; background: var(--crsm-sage); color: var(--crsm-cream);
  border-radius: 50%; width: 40px; height: 40px; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.crsm-chat__send:disabled { opacity: 0.45; cursor: default; }
.crsm-chat__send svg { width: 18px; height: 18px; }
.crsm-chat__consent { font-size: 11px; color: #8A857B; text-align: center; padding: 0 12px 10px; background: var(--crsm-white); }

/* On phones the floating panel is too tall for short viewports (header gets cut off the top).
   Make it a near-fullscreen sheet anchored to the viewport so the header is always visible. */
@media (max-width: 480px) {
  .crsm-chat__panel {
    position: fixed;
    top: 10px;
    right: 8px;
    bottom: 10px;
    left: 8px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
  }
}