html.voice-memory-modal-open,
body.voice-memory-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.voice-memory-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(24px, 4vh, 40px);
  overflow: hidden;
  background: rgba(31, 28, 24, .56);
  backdrop-filter: blur(10px);
}

.voice-memory-modal.hidden,
.voice-memory-modal .hidden {
  display: none !important;
}

.voice-memory-shell {
  position: relative;
  width: min(1160px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(380px, .9fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(221, 211, 195, .7);
  border-radius: 26px;
  background: #faf7f0;
  box-shadow: 0 30px 80px rgba(35, 29, 20, .18);
}

.voice-memory-close {
  position: absolute;
  right: 18px;
  top: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 247, 240, .9);
  color: #4b463e;
  font-size: 26px;
  cursor: pointer;
}

.voice-memory-preview {
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f0e6;
}

.voice-memory-brand {
  flex: 0 0 auto;
}

.voice-memory-brand span {
  font-size: 11px;
  letter-spacing: 4px;
  color: #978a78;
}

.voice-memory-brand h2 {
  margin: 9px 0 2px;
  font-family: "Songti SC", serif;
  font-size: 34px;
  color: #3d392f;
}

.voice-memory-brand p {
  margin: 0;
  color: #827767;
  font-size: 14px;
}

.voice-memory-art {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-top: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #101522;
  box-shadow: 0 18px 45px rgba(49, 42, 31, .14);
}

.voice-memory-art > img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voice-memory-art > img.visible {
  display: block;
}

.voice-memory-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #aaa59d;
}

.voice-memory-empty i {
  display: block;
  width: 5px;
  border-radius: 4px;
  background: #d8c08a;
}

.voice-memory-empty i:nth-child(1),
.voice-memory-empty i:nth-child(6) { height: 36px; }
.voice-memory-empty i:nth-child(2),
.voice-memory-empty i:nth-child(5) { height: 90px; }
.voice-memory-empty i:nth-child(3),
.voice-memory-empty i:nth-child(4) { height: 150px; }

.voice-memory-empty span {
  position: absolute;
  bottom: 52px;
  font-size: 13px;
}

.voice-memory-preview-tabs {
  flex: 0 0 auto;
  display: flex;
  align-self: center;
  margin-top: 12px;
  padding: 3px;
  border: 1px solid #ddd3c3;
  border-radius: 18px;
}

.voice-memory-preview-tabs button {
  height: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #817666;
}

.voice-memory-preview-tabs button.active {
  background: #687257;
  color: #fffaf1;
}

.voice-memory-control {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #faf7f0;
}

.voice-memory-control-header {
  min-width: 0;
  padding: 34px 58px 18px 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(112, 96, 72, .12);
  color: #625b50;
  font-size: 14px;
}

.voice-memory-control-header span {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c0b9ad;
}

.voice-memory-control-header span.ready {
  background: #71805f;
  box-shadow: 0 0 0 5px rgba(113, 128, 95, .1);
}

.voice-memory-scroll-content {
  min-width: 0;
  min-height: 0;
  padding: 18px 42px 26px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(112, 96, 72, .36) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.voice-memory-scroll-content::-webkit-scrollbar { width: 8px; }
.voice-memory-scroll-content::-webkit-scrollbar-track { background: transparent; }
.voice-memory-scroll-content::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(112, 96, 72, .3); }

.voice-memory-phone {
  padding: 20px;
  text-align: center;
  border: 1px solid #ddd3c3;
  border-radius: 18px;
  background: #f5f0e6;
}

.voice-memory-phone h3 {
  margin: 0;
  color: #3d392f;
  font-family: "Songti SC", serif;
  font-size: 22px;
}

.voice-memory-phone p {
  margin: 8px auto 14px;
  max-width: 330px;
  color: #8a7f6d;
  font-size: 12px;
  line-height: 1.6;
}

.voice-memory-code {
  position: relative;
  width: 140px;
  height: 140px;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.voice-memory-code img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voice-memory-code em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #f7f4ed;
  color: #978a78;
  font-size: 12px;
  font-style: normal;
}

.voice-memory-phone small {
  display: block;
  margin-top: 10px;
  color: #978a78;
}

.voice-memory-form {
  margin-top: 18px;
}

.voice-memory-form label {
  display: block;
  margin-top: 12px;
  color: #786e5e;
  font-size: 12px;
}

.voice-memory-form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #ddd3c3;
  border-radius: 10px;
  background: #fffdf8;
  color: #3d392f;
  outline: none;
}

.voice-memory-form input:focus {
  border-color: #687257;
  box-shadow: 0 0 0 3px rgba(104, 114, 87, .08);
}

.voice-memory-templates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.voice-memory-templates button {
  min-width: 0;
  padding: 14px;
  text-align: left;
  border: 1px solid #ddd3c3;
  border-radius: 13px;
  background: transparent;
  color: #3d392f;
}

.voice-memory-templates button.active {
  border-color: #687257;
  background: #eef0e6;
  box-shadow: 0 7px 18px rgba(74, 62, 44, .05);
}

.voice-memory-templates span,
.voice-memory-templates strong,
.voice-memory-templates small { display: block; }
.voice-memory-templates span { color: #978a78; font-size: 9px; letter-spacing: 2px; }
.voice-memory-templates strong { margin-top: 6px; font-size: 15px; }
.voice-memory-templates small { margin-top: 4px; color: #978a78; font-size: 10px; }

.voice-memory-photo-upload {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #ddd3c3;
  border-radius: 13px;
  background: #fffaf3;
}

.voice-memory-photo-upload.hidden { display: none; }

.voice-memory-photo-upload > button {
  height: 42px;
  border: 1px solid #bfae96;
  border-radius: 10px;
  background: #f6efe3;
  color: #4d4034;
  font-weight: 600;
  cursor: pointer;
}

.voice-memory-photo-upload > button:hover:not(:disabled) { background: #eee4d5; }
.voice-memory-photo-upload > button:disabled { color: #aaa095; cursor: wait; }

.voice-memory-photo-state {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #8b7c69;
  font-size: 10px;
  line-height: 1.45;
}

.voice-memory-photo-state img {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  object-fit: cover;
}

.voice-memory-photo-state img.visible { display: block; }

.voice-memory-actions {
  position: relative;
  z-index: 3;
  min-width: 0;
  flex: 0 0 auto;
  padding: 12px 42px 18px;
  border-top: 1px solid rgba(112, 96, 72, .12);
  background: rgba(250, 247, 240, .98);
  box-shadow: 0 -12px 28px rgba(55, 45, 31, .05);
}

.voice-memory-actions .voice-memory-error {
  min-height: 0;
  margin: 0 0 8px;
}

.voice-memory-action-buttons {
  display: grid;
  grid-template-columns: minmax(110px, .42fr) minmax(190px, 1fr);
  gap: 10px;
}

.voice-memory-save,
.voice-memory-frame {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.voice-memory-save {
  border: 1px solid #cfc5b5;
  background: #fffdf8;
  color: #645c50;
}

.voice-memory-save:hover:not(:disabled) {
  border-color: #9f927f;
  background: #f5f0e6;
}

.voice-memory-frame {
  border: 0;
  background: #3f4938;
  color: #faf7f0;
}

.voice-memory-frame:hover:not(:disabled) { background: #4b5742; }
.voice-memory-save:focus-visible,
.voice-memory-frame:focus-visible { outline: 2px solid rgba(104, 114, 87, .45); outline-offset: 3px; }
.voice-memory-save:disabled { border-color: #ded8ce; background: #f3f0ea; color: #aaa398; cursor: default; }
.voice-memory-frame:disabled { background: #cbc7bd; cursor: not-allowed; }

.voice-memory-actions > small {
  display: block;
  margin-top: 7px;
  text-align: center;
  color: #978a78;
  font-size: 11px;
}

.voice-memory-error {
  min-height: 18px;
  margin: 12px 0;
  color: #a24f3f;
  font-size: 12px;
}

@media (max-height: 820px) and (min-width: 901px) {
  .voice-memory-preview { padding: 26px 32px; }
  .voice-memory-brand h2 { margin-top: 5px; font-size: 29px; }
  .voice-memory-art { margin-top: 14px; }
  .voice-memory-control-header { padding-top: 22px; padding-bottom: 14px; }
  .voice-memory-scroll-content { padding-top: 14px; padding-bottom: 18px; }
  .voice-memory-scroll-content::-webkit-scrollbar { width: 8px; }
.voice-memory-scroll-content::-webkit-scrollbar-track { background: transparent; }
.voice-memory-scroll-content::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(112, 96, 72, .3); }

.voice-memory-phone { padding: 14px 18px; }
  .voice-memory-phone p { margin: 5px auto 9px; }
  .voice-memory-code { width: 112px; height: 112px; }
  .voice-memory-form { margin-top: 12px; }
  .voice-memory-form label { margin-top: 9px; }
  .voice-memory-templates { margin-top: 13px; }
  .voice-memory-actions { padding-top: 10px; padding-bottom: 12px; }
}

@media (max-width: 900px) {
  .voice-memory-modal { padding: 24px; }
  .voice-memory-shell {
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    grid-template-columns: minmax(0, 1fr);
  }
  .voice-memory-preview { display: none; }
  .voice-memory-control-header { padding: 28px 58px 16px 24px; }
  .voice-memory-scroll-content { padding: 16px 24px 22px; }
  .voice-memory-actions { padding: 10px 24px 16px; }
  .voice-memory-photo-upload { grid-template-columns: minmax(0, 1fr); }
}

.voice-memory-code #voiceMemoryCodeRetry {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 14px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d8c8b0;
  border-radius: 999px;
  background: #fffaf1;
  color: #6b4b32;
  font: inherit;
  cursor: pointer;
}