.hazel-pine-calls-host {
  box-sizing: border-box;
  color: #171717;
  font: 1rem/1.45 Tahoma, Verdana, Arial, sans-serif;
}

.hazel-pine-calls,
.hazel-pine-calls * {
  box-sizing: border-box;
}

.hazel-pine-calls {
  width: min(100%, 36rem);
  max-height: min(84vh, 44rem);
  margin: 0 auto;
  overflow: auto;
  border: 2px solid #171717;
  border-radius: .45rem;
  color: #171717;
  background: #eee5cf;
  box-shadow: 8px 9px 0 rgb(0 0 0 / .22);
}

.hazel-pine-calls__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .62rem .72rem;
  color: #fff;
  background: linear-gradient(90deg, #12276d, #235bc2);
}

.hazel-pine-calls__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .42rem;
  min-width: 0;
}

.hazel-pine-calls__header h2 {
  margin: 0;
  color: inherit;
  font: 700 1rem/1.2 Tahoma, Verdana, sans-serif;
}

.hazel-pine-calls__dialogue {
  display: inline-block;
  padding: .08rem .3rem;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: 999px;
  color: #fff;
  background: rgb(0 0 0 / .18);
  font: 700 .62rem/1.2 Tahoma, Verdana, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hazel-pine-calls__header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .4rem;
}

.hazel-pine-calls button {
  min-height: 2.35rem;
  padding: .42rem .7rem;
  border: 2px outset #f3f3f3;
  border-radius: 2px;
  color: #111;
  background: #ddd;
  font: 700 .86rem/1.2 Tahoma, Verdana, sans-serif;
  cursor: pointer;
}

.hazel-pine-calls button:hover {
  background: #f5f5f5;
}

.hazel-pine-calls button:focus-visible {
  outline: 3px solid #ffcf33;
  outline-offset: 2px;
}

.hazel-pine-calls__header button {
  min-height: 1.9rem;
  padding: .24rem .5rem;
  font-size: .76rem;
}

.hazel-pine-calls__hangup {
  color: #fff !important;
  border-color: #e58b98 #670a19 #670a19 #e58b98 !important;
  background: #9d1730 !important;
}

.hazel-pine-calls__hangup:hover {
  background: #bd2340 !important;
}

.hazel-pine-calls__note {
  margin: 0;
  padding: .48rem .78rem;
  border-bottom: 1px solid #a79a7a;
  color: #453f32;
  background: #fff9df;
  font-size: .74rem;
}

.hazel-pine-calls__intro {
  margin: 0;
  padding: .8rem .85rem .3rem;
  color: #34302a;
  font-weight: 700;
}

.hazel-pine-calls__contacts {
  display: grid;
  gap: .65rem;
  padding: .55rem .8rem .9rem;
}

.hazel-pine-calls .hazel-pine-calls__contact {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 4.25rem;
  padding: .6rem;
  text-align: left;
  border: 1px solid #625b50;
  border-radius: .2rem;
  background: #fff;
  box-shadow: 2px 2px 0 rgb(0 0 0 / .12);
}

.hazel-pine-calls .hazel-pine-calls__contact:hover {
  border-color: #163e9e;
  background: #f7f9ff;
}

.hazel-pine-calls__avatar {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 2px solid #17214d;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #e66391, #5b3c9b);
  font: 800 1.2rem/1 Tahoma, Verdana, sans-serif;
}

.hazel-pine-calls__contact:nth-child(2) .hazel-pine-calls__avatar {
  background: linear-gradient(145deg, #4a9d98, #2d4f91);
}

.hazel-pine-calls__contact-copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

.hazel-pine-calls__contact-name {
  color: #17214d;
  font-size: .96rem;
}

.hazel-pine-calls__context,
.hazel-pine-calls__topics {
  display: block;
  color: #4c473f;
  font-weight: 400;
}

.hazel-pine-calls__context {
  font-size: .72rem;
}

.hazel-pine-calls__topics {
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hazel-pine-calls__call-word {
  padding: .18rem .38rem;
  border: 1px solid #163e9e;
  border-radius: 2px;
  color: #fff;
  background: #235bc2;
  font-size: .68rem;
  text-transform: uppercase;
}

.hazel-pine-calls__callbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .8rem 0;
}

.hazel-pine-calls__connection {
  color: #4e493f;
  font-size: .72rem;
  font-weight: 700;
}

.hazel-pine-calls__connection::before {
  content: '';
  display: inline-block;
  width: .52rem;
  height: .52rem;
  margin-right: .34rem;
  border: 1px solid #164d25;
  border-radius: 50%;
  vertical-align: -.03rem;
  background: #42a657;
}

.hazel-pine-calls__phonebook {
  min-height: 1.85rem !important;
  padding: .22rem .48rem !important;
  font-size: .74rem !important;
}

.hazel-pine-calls__log {
  min-height: 12rem;
  max-height: 20rem;
  margin: .65rem .8rem;
  padding: .78rem;
  overflow: auto;
  border: 1px inset #777;
  color: #131313;
  background: #fff;
}

.hazel-pine-calls__line {
  margin: 0 0 .74rem;
}

.hazel-pine-calls__line:last-child {
  margin-bottom: 0;
}

.hazel-pine-calls__line--system {
  color: #5d574d;
  font-size: .78rem;
  font-style: italic;
}

.hazel-pine-calls__line--you strong {
  color: #163e9e;
}

.hazel-pine-calls__line--friend strong {
  color: #8b204b;
}

.hazel-pine-calls__prompt {
  min-height: 1.4em;
  margin: 0;
  padding: 0 .85rem .4rem;
  color: #34302a;
  font-weight: 700;
}

.hazel-pine-calls__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  padding: .72rem .85rem .9rem;
  border-top: 1px solid #b8aa8b;
  background: #d8ccb3;
}

.hazel-pine-calls .hazel-pine-calls__choice {
  width: 100%;
  min-height: 2.8rem;
  text-align: left;
}

.hazel-pine-calls .hazel-pine-calls__choice--primary {
  color: #fff;
  border-color: #5f83d4 #071d58 #071d58 #5f83d4;
  background: #163e9e;
}

.hazel-pine-calls .hazel-pine-calls__choice--primary:hover {
  background: #2458c8;
}

.hazel-pine-calls__choices > :only-child,
.hazel-pine-calls__choices > :nth-last-child(3):first-child {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .hazel-pine-calls__header {
    align-items: flex-start;
  }

  .hazel-pine-calls__header-actions {
    flex-direction: column-reverse;
  }

  .hazel-pine-calls__choices {
    grid-template-columns: 1fr;
  }

  .hazel-pine-calls__choices > * {
    grid-column: auto !important;
  }

  .hazel-pine-calls .hazel-pine-calls__contact {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .hazel-pine-calls__call-word {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hazel-pine-calls *,
  .hazel-pine-calls *::before,
  .hazel-pine-calls *::after {
    scroll-behavior: auto !important;
  }
}