.customer-snapshot-action-slot {
  display:inline-flex
}
.customer-snapshot-trigger {
  white-space:nowrap
}
.customer-snapshot-review-entry {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px
}
.customer-snapshot-review-entry span {
  display:inline-block;
  min-width:16px;
  padding:0 5px;
  border-radius:8px;
  background:#e2e8f0;
  color:#475569;
  font-size:11px;
  line-height:16px;
  text-align:center
}
.customer-snapshot-review-entry.has-pending span {
  background:#dc2626;
  color:#fff
}
.customer-snapshot-modal-open {
  overflow:hidden
}
.customer-snapshot-modal-layer {
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:grid;
  place-items:center;
  padding:20px
}
.customer-snapshot-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(5,28,28,.58);
  backdrop-filter:blur(5px)
}
.customer-snapshot-modal {
  position:relative;
  width:min(720px,100%);
  max-height:min(820px,calc(100dvh - 40px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  background:#fff;
  border:1px solid #d7e7e5;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(4,36,34,.28);
  overflow:hidden
}
.customer-snapshot-modal>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid #e4efed
}
.customer-snapshot-modal>header span {
  color:#0d7772;
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em
}
.customer-snapshot-modal>header h2 {
  margin:3px 0 0;
  font-size:24px
}
.customer-snapshot-modal>header button {
  width:42px;
  height:42px;
  border:0;
  border-radius:13px;
  background:#eef5f4;
  color:#40615e;
  font-size:28px;
  cursor:pointer
}
.customer-snapshot-modal-body {
  padding:20px 22px;
  overflow:auto
}
.customer-snapshot-modal>footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding:15px 22px;
  border-top:1px solid #e4efed;
  background:#fbfdfd
}
.customer-snapshot-modal-feedback {
  margin:0 22px 14px;
  padding:11px 13px;
  border:1px solid #cbdedb;
  border-radius:12px;
  background:#f2f7f6;
  color:#315c58;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere
}
.customer-snapshot-modal-feedback[hidden] {
  display:none
}
.customer-snapshot-modal-feedback.is-progress::before {
  content:'';
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:8px;
  border:2px solid #9bc4bf;
  border-top-color:#0d7772;
  border-radius:50%;
  vertical-align:-2px;
  animation:customer-snapshot-spin .7s linear infinite
}
.customer-snapshot-modal-feedback.is-success {
  border-color:#add9c4;
  background:#eaf8f1;
  color:#17613f
}
.customer-snapshot-modal-feedback.is-error {
  border-color:#efc2c2;
  background:#fff3f3;
  color:#9b2929
}
.customer-snapshot-primary[aria-busy="true"] {
  cursor:wait;
  opacity:.78
}
.customer-snapshot-modal-open .toast {
  z-index:2147483000
}
@keyframes customer-snapshot-spin {
  to { transform:rotate(360deg) }
}
.customer-snapshot-primary,.customer-snapshot-secondary,.customer-snapshot-danger {
  min-height:42px;
  border-radius:12px;
  padding:9px 16px;
  font:800 14px/1 inherit;
  cursor:pointer
}
.customer-snapshot-primary {
  border:1px solid #0d7772;
  background:#0d7772;
  color:#fff
}
.customer-snapshot-secondary {
  border:1px solid #cadfdd;
  background:#fff;
  color:#234d4a
}
.customer-snapshot-danger {
  border:1px solid #f0caca;
  background:#fff5f5;
  color:#a52828
}
.customer-snapshot-lead {
  margin:0 0 18px;
  color:#536e6c
}
.customer-snapshot-callout,.customer-snapshot-state-card {
  border-radius:16px;
  padding:16px;
  background:#eef7f5;
  border:1px solid #cce3df;
  margin-bottom:18px
}
.customer-snapshot-callout.is-danger {
  background:#fff5f5;
  border-color:#f0cccc
}
.customer-snapshot-callout strong,.customer-snapshot-state-card strong {
  display:block;
  font-size:18px
}
.customer-snapshot-callout p,.customer-snapshot-state-card p {
  margin:5px 0 0;
  color:#58706e
}
.customer-snapshot-state-card>span {
  font-size:12px;
  color:#617876
}
.customer-snapshot-state-card.is-ready {
  background:#eaf8f1;
  border-color:#bde2ce
}
.customer-snapshot-form-section h3,.customer-snapshot-preview h3 {
  margin:0;
  font-size:17px
}
.customer-snapshot-form-section>p {
  margin:3px 0 12px;
  color:#687d7b
}
.customer-snapshot-file-list {
  display:grid;
  gap:9px
}
.customer-snapshot-file-list label {
  display:flex;
  gap:11px;
  align-items:center;
  padding:12px;
  border:1px solid #dceae8;
  border-radius:13px;
  background:#fbfdfd;
  cursor:pointer
}
.customer-snapshot-file-list input {
  width:18px;
  height:18px;
  accent-color:#0d7772
}
.customer-snapshot-file-list span {
  display:grid;
  min-width:0
}
.customer-snapshot-file-list strong {
  overflow-wrap:anywhere
}
.customer-snapshot-file-list small {
  color:#718481
}
.customer-snapshot-link {
  display:grid;
  gap:7px
}
.customer-snapshot-link span,.customer-snapshot-reason span {
  font-size:13px;
  font-weight:800;
  color:#466461
}
.customer-snapshot-link input,.customer-snapshot-reason textarea {
  width:100%;
  border:1px solid #cddfdd;
  border-radius:12px;
  padding:12px;
  background:#f8fbfb;
  color:#183b38
}
.customer-snapshot-metrics,.customer-snapshot-counts {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px
}
.customer-snapshot-metrics span,.customer-snapshot-counts span {
  padding:9px 12px;
  border-radius:11px;
  background:#eef5f4;
  color:#526b68
}
.customer-snapshot-empty,.customer-snapshot-loading {
  text-align:center;
  color:#687e7b;
  padding:30px 10px
}
.customer-snapshot-review-list {
  display:grid;
  gap:10px
}
.customer-snapshot-review-list button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  border:1px solid #d9e8e6;
  background:#fbfdfd;
  border-radius:15px;
  padding:14px;
  cursor:pointer
}
.customer-snapshot-review-list button span {
  display:grid;
  gap:3px
}
.customer-snapshot-review-list button strong {
  font-size:16px
}
.customer-snapshot-review-list button small {
  color:#687d7b
}
.customer-snapshot-review-list button>b {
  color:#0d7772
}
.customer-snapshot-list-tail {
  padding:14px 8px 2px;
  color:#718481;
  font-size:12px;
  text-align:center
}
.customer-snapshot-list-tail.is-loading::before {
  content:'';
  display:inline-block;
  width:11px;
  height:11px;
  margin-right:7px;
  border:2px solid #b7d1ce;
  border-top-color:#0d7772;
  border-radius:50%;
  vertical-align:-2px;
  animation:customer-snapshot-spin .7s linear infinite
}
.customer-snapshot-preview section {
  padding:16px 0;
  border-top:1px solid #e3edec
}
.customer-snapshot-preview section>div:not(.customer-snapshot-file-list):not(.customer-snapshot-counts) {
  margin-top:10px
}
.customer-snapshot-preview section p {
  white-space:pre-wrap;
  margin:3px 0;
  color:#536d6a
}
.customer-snapshot-reason {
  display:grid;
  gap:7px;
  margin-top:16px
}
.customer-snapshot-reason textarea {
  min-height:92px;
  resize:vertical
}
@media(max-width:767px) {
  .customer-snapshot-action-slot {
    flex:1
  }
  .customer-snapshot-trigger {
    width:100%
  }
  .customer-snapshot-modal-layer {
    padding:0;
    align-items:end
  }
  .customer-snapshot-modal {
    width:100%;
    max-height:92dvh;
    border-radius:22px 22px 0 0
  }
  .customer-snapshot-modal>header,.customer-snapshot-modal-body,.customer-snapshot-modal>footer {
    padding-left:16px;
    padding-right:16px
  }
  .customer-snapshot-modal-feedback {
    margin-left:16px;
    margin-right:16px
  }
  .customer-snapshot-modal>footer>* {
    flex:1 1 auto
  }
}

.customer-snapshot-action-slot {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.customer-snapshot-inline-status {
  color: #466461;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.customer-snapshot-preview-records {
  display: grid;
  gap: 10px;
}
.customer-snapshot-preview-records article {
  border: 1px solid #dceae8;
  border-radius: 13px;
  background: #fbfdfd;
  padding: 12px;
}
.customer-snapshot-preview-records article p {
  overflow-wrap: anywhere;
}
.customer-snapshot-preview-records article small {
  color: #718481;
}
.customer-snapshot-preview-records article.customer-snapshot-preview-chat {
  display:flex;
  padding:0;
  border:0;
  background:transparent;
}
.customer-snapshot-preview-records article.customer-snapshot-preview-chat.is-outbound {
  justify-content:flex-end;
}
.customer-snapshot-preview-chat>div {
  width:min(78%,680px);
  padding:11px 13px;
  border:1px solid #dceae8;
  border-radius:5px 15px 15px;
  background:#f1f6f5;
}
.customer-snapshot-preview-chat.is-outbound>div {
  border-radius:15px 5px 15px 15px;
  border-color:#c4e5d9;
  background:#dff4ec;
}
.customer-snapshot-preview-chat>div>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.customer-snapshot-preview-chat>div>span b {
  color:#0d7772;
}
.customer-snapshot-preview-chat-note {
  margin: 0 0 8px;
  color: #718481;
  font-size: 13px;
}
.customer-snapshot-preview-chat-window {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-height: min(62vh,560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 4px 8px 4px 0;
}
.customer-snapshot-preview-chat-window .customer-snapshot-preview-chat {
  display: flex;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}
.customer-snapshot-preview-chat-window .customer-snapshot-preview-chat.is-outbound {
  justify-content: flex-end;
}
.customer-snapshot-preview-chat-window::-webkit-scrollbar {
  width: 9px;
}
.customer-snapshot-preview-chat-window::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #a7c6c2;
  background-clip: padding-box;
}
.customer-snapshot-preview-attachment {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(13,119,114,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
  overflow-wrap: anywhere;
}
@media(max-width:767px) {
  .customer-snapshot-preview-chat>div {
    width:88%
  }
}