:root {
  color-scheme: light;
  font: 15px Tahoma, Verdana, system-ui, sans-serif;
  color: #262337;
  background: #e9e3f1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: clamp(.65rem, 5vw, 4rem) clamp(.5rem, 3vw, 1.5rem);
  background: radial-gradient(ellipse at top, #f8f3ff, #e3d9ee 85%);
  min-height: 100vh;
}
.messenger {
  max-width: 49rem;
  margin: auto;
  background: #f7f6ee;
  border: 2px solid #7953ab;
  border-radius: 9px 9px 3px 3px;
  overflow: hidden;
  box-shadow: 0 12px 34px #39205733, inset 0 0 0 1px white;
}
.titlebar, .menu-strip {
  color: white;
  background: linear-gradient(#bca4eb, #885cce 53%, #6b3eb3 54%, #8554c4);
  text-shadow: 0 1px 1px #49267d;
}
.titlebar { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; }
h1 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.messenger-icon {
  display: grid;
  place-items: center;
  color: #47387c;
  background: linear-gradient(#fff8a5, #ffba37);
  border: 1px solid #9c6519;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.15rem;
  text-shadow: none;
}
.window-controls { margin-left: auto; white-space: nowrap; font-size: 1.2rem; letter-spacing: .12em; }
.menu-strip {
  padding: .38rem .75rem;
  background: linear-gradient(#774ab8, #a77bdd);
  border-bottom: 1px solid #ae92d5;
  font-size: .85rem;
}
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .85rem .75rem; }
.presence {
  width: .85rem;
  height: .85rem;
  border: 1px solid #c4771d;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #fff5a3, #ffad26 75%);
}
.toolbar-caption { margin-left: auto; color: #655e70; font-size: .8rem; }
.chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  margin: 0 .48rem;
  border: 1px solid #9d98a4;
}
.chat-main { min-width: 0; }
.transcript {
  min-height: 15rem;
  max-height: 22rem;
  overflow: auto;
  background: white;
  box-shadow: inset 1px 1px #dad8df;
  padding: .7rem;
  overflow-wrap: anywhere;
}
.transcript p { margin: 0 0 .65rem; line-height: 1.45; white-space: pre-wrap; }
.transcript strong { color: #593e99; }
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .55rem;
  border-left: 1px solid #9d98a4;
  background: #ebe9e4;
}
.contact small { color: #655e70; }
.avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: .35rem;
  background: linear-gradient(150deg, #d9d2e2 28%, #beb4ce 30%, #d3ccdc);
  border: 1px solid #fff;
}
.avatar::before {
  content: "";
  position: absolute;
  top: 27%;
  left: 23%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  box-shadow: 2.05rem 0 white;
}
.avatar span {
  position: absolute;
  top: 57%;
  left: 25%;
  width: 50%;
  height: 23%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: white;
}
.sender-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .55rem;
  border-block: 1px solid #aaa6b0;
  background: linear-gradient(#fffef8, #eeece4);
}
.sender-row label { white-space: nowrap; font-size: .85rem; font-weight: 700; }
.sender-row small { margin-left: auto; color: #5d566a; white-space: nowrap; }
input, textarea, button { font: inherit; color: inherit; }
input { width: min(100%, 15rem); min-width: 0; padding: .28rem .4rem; border: 1px solid #aaa5af; }
.composer { display: flex; align-items: flex-end; gap: .6rem; padding: .5rem; background: white; }
textarea { display: block; min-width: 0; width: 100%; border: 0; padding: .35rem; resize: vertical; }
button {
  padding: .65rem 1.1rem;
  border: 1px solid #927ab5;
  border-radius: 4px;
  background: linear-gradient(#fcf9ff, #e2d6f6 50%, #cfbce9 51%, #e9def7);
  box-shadow: inset 0 0 0 1px #fff9;
  color: #3e285c;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: linear-gradient(#f9f2ff, #d8c4f5); }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid #7347ac; outline-offset: 1px; }
footer { padding: .55rem .65rem; min-height: 2.3rem; color: #554c62; font-size: .85rem; }
footer p { margin: 0; }
#status[data-error] { color: #a32d35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 520px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .contact { display: none; }
  .transcript { min-height: 12rem; }
  button { padding-inline: .8rem; }
}