.mp-reader {
  --mp-reader-green: #00f781;
  --mp-reader-border: #686868;
  --mp-reader-action: #08150e;
  --mp-reader-surface: #1c1c1c;
  --mp-reader-panel: #141414;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem 1.4rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.7rem auto 0;
  color: #eee;
  font: 700 .94rem/1.2 var(--font-body, sans-serif);
  text-align: start;
}

.mp-reader__share, .mp-reader__channels, .mp-reader__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.mp-reader__share { gap: .8rem; }
.mp-reader__share, .mp-reader__actions { flex-wrap: wrap; }

.mp-reader--footer {
  width: 100%;
  margin: 0 auto;
  column-gap: clamp(1.25rem, 2.5vw, 2.75rem);
}

.mp-reader--footer .mp-reader__actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 1fr;
  align-items: stretch;
  max-width: 100%;
}

.mp-reader--footer .mp-reader__ai summary {
  height: 100%;
}

.mp-reader--footer .mp-reader__google,
.mp-reader--footer .mp-reader__ai summary {
  justify-content: center;
  text-align: center;
}

.mp-reader svg { display: block; flex: none; width: 1.15rem; height: 1.15rem; fill: currentColor; }
.mp-reader a, .mp-reader button, .mp-reader summary { color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.mp-reader a:focus-visible, .mp-reader button:focus-visible, .mp-reader summary:focus-visible, .mp-reader textarea:focus-visible {
  outline: 2px solid var(--mp-reader-green);
  outline-offset: 3px;
}

.mp-reader .mp-reader__channel {
  display: grid;
  justify-items: center;
  gap: .26rem;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .75rem;
  white-space: nowrap;
}

.mp-reader__circle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--mp-reader-border);
  border-radius: 50%;
}

.mp-reader__google, .mp-reader__ai summary, .mp-reader__providers a, .mp-reader__prompt {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .42rem .75rem;
  border: 1px solid var(--mp-reader-border);
  border-radius: .55rem;
  background: transparent;
}

.mp-reader .mp-reader__channel:hover, .mp-reader .mp-reader__google:hover, .mp-reader__providers a:hover, .mp-reader__prompt:hover { color: var(--mp-reader-green); }
.mp-reader__channel:hover .mp-reader__circle, .mp-reader .mp-reader__google:hover, .mp-reader__providers a:hover {
  border-color: var(--mp-reader-green);
  background: var(--mp-reader-surface);
}

.mp-reader__ai summary { border-color: var(--mp-reader-green); background: var(--mp-reader-green); color: var(--mp-reader-action); }
.mp-reader__ai summary:hover { filter: brightness(1.12); }
.mp-reader__ai summary::-webkit-details-marker { display: none; }
.mp-reader__ai summary::after {
  content: '';
  width: .42rem;
  height: .42rem;
  margin: -.2rem .08rem 0 .1rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.mp-reader__ai[open] summary::after { margin-block-start: .2rem; transform: rotate(225deg); }

.mp-reader__providers, .mp-reader__feedback {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0;
  bottom: calc(100% + .5rem);
  max-width: 100%;
  border: 1px solid var(--mp-reader-border);
  border-radius: .75rem;
  background: var(--mp-reader-panel);
  box-shadow: 0 .55rem 1.65rem #0008;
}
.mp-reader__providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  width: min(22rem, 100%);
  padding: .6rem;
  font-size: .86rem;
}
.mp-reader__ai:not([open]) .mp-reader__providers { display: none; }
.mp-reader__prompt { grid-column: 1 / -1; border-width: 1px 0 0; border-radius: 0; }
.mp-reader__feedback { z-index: 3; width: max-content; padding: .65rem; }
.mp-reader__feedback:has([role='status']:empty):not(:has(textarea:not([hidden]))) { border: 0; padding: 0; box-shadow: none; }
.mp-reader textarea { width: min(19rem, 100%); margin-top: .45rem; padding: .55rem; background: var(--mp-reader-surface); color: inherit; font: inherit; }
.mp-reader textarea[hidden] { display: none; }

@media (max-width: 34rem) {
  .mp-reader__share { flex-direction: column; gap: .45rem; }
  .mp-reader__channels { flex-wrap: wrap; }
  .mp-reader__actions { gap: .4rem; font-size: .84rem; }

  .mp-reader--footer .mp-reader__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: min(100%, 24rem);
  }

  .mp-reader--footer .mp-footer-news { grid-column: 1 / -1; }
  .mp-reader--footer .mp-footer-news,
  .mp-reader--footer .mp-reader__google,
  .mp-reader--footer .mp-reader__ai summary {
    min-height: 3rem;
    padding-inline: .4rem;
  }
}

@media (max-width: 24rem) {
  .mp-reader--footer .mp-reader__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}