.one-view {
  --view-ink: #f2eefb;
  --view-dim: #c5bbd4;
  --view-warm: #ffce98;
  position: relative;
  isolation: isolate;
  padding-block: clamp(55px, 7.5vw, 110px);
  border-block: 1px solid #ddc7ff26;
  background:
    radial-gradient(ellipse at 72% 62%, #5b39334f, transparent 49%),
    linear-gradient(120deg, #0d101a, #151224 65%, #0e0d16);
}

.one-view-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 7vw, 100px);
}

.one-view-copy h2 {
  max-width: 13ch;
  margin-top: 0;
  color: var(--view-ink);
  font-size: clamp(40px, 5.6vw, 82px);
}

.one-view-copy p {
  max-width: 34ch;
  margin-top: 19px;
  color: var(--view-dim);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.6;
}

.one-view-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 465px;
  isolation: isolate;
  place-items: center;
  padding: 36px 16px;
  overflow: hidden;
  border: 1px solid #d6c5ed34;
  border-radius: clamp(17px, 2.7vw, 33px);
  background: radial-gradient(ellipse at 50% 55%, #bd714047 0, #31253c 40%, #10121c 79%);
}

.one-view-stage::before, .one-view-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 64%;
  height: 82%;
  border: 1px solid #ffd2aa23;
  border-radius: 48% 48% 12% 12% / 29% 29% 7% 7%;
  box-shadow: inset 0 0 42px #edb28012, 0 0 32px #0b0a11;
}

.one-view-stage::after {
  width: 78%;
  height: 92%;
  border-color: #d1c0f21e;
}

.one-view-phone {
  width: min(100%, 290px);
  padding: 5px;
  border: 1px solid #e0d4f5a6;
  border-radius: 28px;
  background: linear-gradient(148deg, #776d83, #26222d 36%, #706175 76%, #2b262f);
  box-shadow: 0 22px 60px #080610d4, 0 0 28px #ffce9829, inset 0 1px 1px #fffe;
}

.one-view-screen {
  display: flex;
  flex-direction: column;
  min-height: 363px;
  overflow: hidden;
  border-radius: 23px;
  background: linear-gradient(150deg, #201b2e, #10101b 76%);
}

.one-view-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  padding: 12px 15px;
  border-bottom: 1px solid #d8c8fb2f;
  color: var(--view-ink);
  font-size: .95rem;
}

.one-view-contact span {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #524169;
  color: #f7efff;
  place-items: center;
  font-size: .85rem;
}

.one-view-thread {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 17px 12px;
}

.one-view-bubble {
  max-width: 89%;
  padding: 9px 12px;
  border: 1px solid #c4b0e940;
  border-radius: 12px 12px 12px 3px;
  background: #2c263e;
  color: var(--view-ink);
  font-size: .85rem;
  line-height: 1.35;
}

.one-view-bubble-sent {
  justify-self: end;
  border-radius: 12px 12px 3px 12px;
  background: #473560;
}

.one-view-attachment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 205px);
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid #d9c4ff7a;
  border-radius: 13px 13px 13px 3px;
  background: #403050;
  color: var(--view-ink);
  text-align: left;
  cursor: pointer;
}

.one-view-attachment:hover { border-color: #e7d7ff; background: #4d3962; }
.one-view-attachment:focus-visible, .one-view-close:focus-visible { outline: 2px solid #ebdeff; outline-offset: 3px; }
.one-view-attachment:disabled { opacity: .63; cursor: default; }
.one-view-attachment strong, .one-view-attachment small { display: block; }
.one-view-attachment strong { font-size: .9rem; }
.one-view-attachment small { margin-top: 3px; color: var(--view-dim); font-size: .75rem; line-height: 1.3; }
.one-view-attachment.is-viewed { border-color: #cab5e237; background: #282336; }
.one-view-attachment.is-viewed:hover { border-color: #cab5e28f; }
.one-view-attachment.is-viewed .one-view-arrow { opacity: .55; }
.one-view-badge { display: grid; width: 29px; height: 29px; border: 1px solid #e1c5fdad; border-radius: 50%; place-items: center; color: #ead6ff; font-size: .8rem; }
.one-view-arrow { color: #efddff; }

.one-view-status {
  min-height: 34px;
  margin: 0;
  color: var(--view-warm);
  font-size: .77rem;
  line-height: 1.45;
}

.one-view-demo-note {
  margin: auto 0 0;
  padding: 0 12px 13px;
  color: var(--view-dim);
  text-align: center;
  font-size: .69rem;
}

.one-view-dialog {
  box-sizing: border-box;
  width: min(460px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100% - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid #d9c7ee77;
  border-radius: 17px;
  background: #15111e;
  color: #f5efff;
}

.one-view-dialog::backdrop { background: #07060be6; }
.one-view-dialog-content > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; }
.one-view-dialog-content h3 { margin: 0; font-size: 1.04rem; }
.one-view-dialog-content p { margin-top: 2px; color: #d7cce2; font-size: .78rem; }
.one-view-dialog-content img {
  display: block;
  width: 100%;
  height: min(68vh, 585px);
  height: min(68dvh, 585px);
  object-fit: contain;
  background: #080711;
}

.one-view-close {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #decef66c;
  border-radius: 8px;
  background: #2e243c;
  color: #f8f2ff;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}

.one-view-close:hover { background: #463654; }
.one-view-close span { margin-inline-end: 4px; font-size: 1rem; }

@media (max-width: 720px) {
  .one-view-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .one-view-copy p { margin-top: 13px; }
  .one-view-stage { min-height: 0; padding: 20px 12px; }
  .one-view-phone { width: min(100%, 266px); }
  .one-view-screen { min-height: 326px; }
}