/* The Feedback tab: "your status", the recurring patterns, the conversations
   and their point cards; the latest conversation under the talk card; the
   "practice" buttons on the cards. */

#analysis-status.loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#issues {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.conversation {
  margin: 0;
  border: 1px solid #8884;
  border-radius: 14px;
  background: #8881;
  padding: 4px 14px 12px;
}

.conversation summary {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-weight: 750;
  list-style: none;
}

.conversation summary::marker,
.conversation summary::-webkit-details-marker {
  display: none;
  content: "";
}

.conversation summary::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  background: center / 28px 28px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fffaf4' stroke='%23423c36' stroke-width='1.3'/%3E%3Cpath d='m11 8 6 6-6 6' fill='none' stroke='%23423c36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: none;
  transition: transform 0.18s ease;
}

.conversation[open] summary::before {
  transform: rotate(90deg);
}

html[dir="rtl"] .conversation:not([open]) summary::before {
  transform: rotate(180deg);
}

.conversation-meta {
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.72;
}

.conversation-issues {
  display: grid;
  gap: 16px;
  padding: 4px 0 8px;
  list-style: none;
  margin: 0;
}

.issue-card {
  border: 1px solid #8884;
  border-radius: 14px;
  padding: 16px;
  background: Canvas;
}

.conversation-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #2563eb40;
  border-radius: 12px;
  background: #3b82f60d;
  line-height: 1.5;
}

.summary-panel {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #2563eb40;
  border-radius: 14px;
  background: #3b82f60d;
}

.summary-panel h2 {
  margin: 0 0 14px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.summary-stat {
  padding: 12px;
  border: 1px solid #2563eb30;
  border-radius: 10px;
  background: Canvas;
}

.summary-stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
  opacity: 0.72;
}

.summary-stat strong {
  display: block;
  font-size: 1.45rem;
}

.summary-focus {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: #2563eb12;
}

.summary-focus span {
  font-size: 0.85rem;
  opacity: 0.72;
}

.summary-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.summary-chip {
  padding: 5px 9px;
  border: 1px solid #8884;
  border-radius: 999px;
  background: Canvas;
  font-size: 0.82rem;
}

.patterns-panel {
  margin: 22px 0 28px;
  padding: 14px 18px;
  border: 1px solid #7c3aed40;
  border-radius: 14px;
  background: #8b5cf610;
}

.patterns-panel summary {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 750;
  font-size: 1.05rem;
  list-style: none;
}

.patterns-panel summary::marker,
.patterns-panel summary::-webkit-details-marker {
  display: none;
  content: "";
}

.patterns-panel summary::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  background: center / 28px 28px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fffaf4' stroke='%23423c36' stroke-width='1.3'/%3E%3Cpath d='m11 8 6 6-6 6' fill='none' stroke='%23423c36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: none;
  transition: transform 0.18s ease;
}

.patterns-panel[open] summary::before {
  transform: rotate(90deg);
}

html[dir="rtl"] .patterns-panel:not([open]) summary::before {
  transform: rotate(180deg);
}

.patterns-intro {
  margin: 10px 0 14px;
  opacity: 0.72;
  font-size: 0.9rem;
}

#patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pattern-card {
  padding: 12px;
  border: 1px solid #8b5cf645;
  border-radius: 10px;
  background: Canvas;
}

.pattern-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 750;
}

.pattern-count {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #8b5cf620;
  color: #6d28d9;
  font-size: 0.78rem;
}

.pattern-description {
  margin: 7px 0;
  font-size: 0.9rem;
  opacity: 0.78;
}

.pattern-example {
  direction: ltr;
  text-align: left;
  font-size: 0.84rem;
  color: #166534;
}

.issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.category {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: #6b728020;
}

.severity {
  font-size: 0.82rem;
  opacity: 0.75;
}

.comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.arrow {
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  opacity: 0.55;
}

@media (prefers-color-scheme: dark) {
  .conversation-note {
    background: #1e3a8a40;
    border-color: #3b82f6;
    color: #dbeafe;
  }
}

@media (min-width: 900px) {
  .saved-issues {
    grid-column: 1 / -1;
  }

  .insights .summary-panel {
    margin-top: 0;
  }

  .insights .summary-grid {
    grid-template-columns: 1fr;
  }

  .insights .patterns-panel {
    margin-bottom: 8px;
  }

  .insights #patterns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }

  #patterns {
    grid-template-columns: 1fr;
  }

  .comparison {
    grid-template-columns: 1fr;
  }

  .arrow {
    transform: rotate(90deg);
    min-height: 20px;
  }
}

.section-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.summary-panel,
.patterns-panel {
  border: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary-panel {
  margin: 0;
  padding: 24px;
  border-radius: 19px 14px 20px 15px;
}

.summary-panel h2 {
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.summary-stat {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--title-wash);
}

.summary-stat:nth-child(2) {
  background: var(--title-wash);
}

.summary-stat span,
.summary-focus span {
  color: var(--muted);
  opacity: 1;
}

.summary-stat strong {
  color: var(--text);
  font-size: 1.7rem;
}

.summary-focus {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px 13px 10px 12px;
  background: var(--title-wash);
}

.summary-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 650;
}

.patterns-panel {
  margin: 16px 0 0;
  padding: 16px 20px;
  border-radius: 15px 11px 16px 12px;
  background: var(--title-wash);
}

.pattern-card {
  border-color: var(--line);
  border-radius: 11px 9px 12px 8px;
  background: var(--surface);
}

.pattern-count {
  border: 1px solid var(--border);
  background: var(--butter);
  color: var(--text);
}

.patterns-panel summary,
.conversation summary {
  border-radius: 10px;
}

.patterns-panel summary:hover,
.conversation summary:hover {
  color: inherit;
}

.saved-issues {
  margin-top: 22px;
  padding-top: 34px;
  border-top: 1.5px solid var(--line);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.section-heading #analysis-status {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

#issues {
  gap: 14px;
}

.conversation {
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 15px 11px 16px 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.conversation:hover {
  background: #fdfbf7;
  box-shadow: 3px 5px 0 rgb(66 60 54 / 14%);
  transform: translateY(-1px) rotate(-0.08deg);
}

.conversation > summary {
  padding: 17px 18px;
  background: var(--title-wash);
}

.conversation[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--title-wash);
}

.conversation-meta {
  color: var(--muted);
  opacity: 1;
}

.conversation-issues {
  gap: 12px;
  padding: 16px;
}

.issue-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--surface-raised);
}

.category {
  border: 1px solid var(--border);
  background: var(--brand-soft);
  color: var(--text);
}

.severity {
  color: var(--muted);
  opacity: 1;
}

/* Importance: three rising bars, filled and colored by how much it matters. */
.severity {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
  /* Bars always rise left to right, like a signal meter, in any language. */
  direction: ltr;
  cursor: help;
}

.severity i {
  width: 4.5px;
  border-radius: 1.5px;
  background: var(--border);
  opacity: 0.55;
}

.severity i:nth-child(1) {
  height: 6px;
}

.severity i:nth-child(2) {
  height: 10px;
}

.severity i:nth-child(3) {
  height: 15px;
}

.severity i.filled {
  background: var(--muted);
  opacity: 1;
}

.severity[data-level="2"] i.filled {
  background: #d9a441;
}

.severity[data-level="3"] i.filled {
  background: #c95f56;
}

.conversation-note {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

@media (min-width: 900px) {
  .insights {
    align-self: stretch;
  }

  .insights .summary-panel {
    height: auto;
  }
}

@media (max-width: 760px) {
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 620px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-stat {
    padding: 12px 8px;
    text-align: center;
  }

  .summary-stat span {
    min-height: 2.4em;
  }

  .summary-focus {
    align-items: start;
    flex-direction: column;
  }

  .conversation > summary {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Calm summary: the practice focus leads, the numbers stay quiet. */
.summary-focus {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--title-wash);
}

.summary-focus strong {
  font-size: 1.35rem;
}

.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
}

.summary-stat,
.summary-stat:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}

.summary-stat span {
  min-height: 0;
  margin: 0;
  font-size: 0.85rem;
}

.summary-stat strong {
  font-size: 1rem;
}

.summary-breakdown {
  gap: 4px 12px;
  margin-top: 6px;
}

.summary-chip {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
}

/* Category breakdown: one bar split by type, with a small legend. */
.summary-breakdown {
  --cat-grammar: #6f9bb5;
  --cat-natural_wording: #5f806c;
  --cat-vocabulary: #d9a441;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.summary-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.summary-bar[hidden] {
  display: none;
}

.summary-bar span {
  min-width: 6px;
}

.summary-bar [data-category="grammar"],
.summary-legend [data-category="grammar"]::before {
  background: var(--cat-grammar);
}

.summary-bar [data-category="natural_wording"],
.summary-legend [data-category="natural_wording"]::before {
  background: var(--cat-natural_wording);
}

.summary-bar [data-category="vocabulary"],
.summary-legend [data-category="vocabulary"]::before {
  background: var(--cat-vocabulary);
}

.summary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.summary-legend .summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.summary-legend .summary-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Newest conversation under the talk card. */
.latest-conversation {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  justify-self: center;
}

.latest-conversation[hidden],
.layout[data-view="feedback"] .latest-conversation {
  display: none;
}

#latest-issues {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#latest-issues[hidden] {
  display: none;
}

.all-conversations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: 16px 12px 15px 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

.all-conversations-text {
  display: grid;
  gap: 2px;
}

.all-conversations-text strong {
  font-size: 1.1rem;
}

#all-conversations-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.all-conversations-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  transition: transform 0.18s ease;
}

.all-conversations-arrow svg {
  width: 20px;
  height: 20px;
}

html[dir="ltr"] .all-conversations-arrow svg {
  transform: scaleX(-1);
}

.all-conversations:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.all-conversations:hover .all-conversations-arrow {
  transform: translateX(-3px);
}

html[dir="ltr"] .all-conversations:hover .all-conversations-arrow {
  transform: translateX(3px);
}

.all-conversations:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.issue-practice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.practice-chip {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--title-wash);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.practice-chip.mastered {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.practice-try {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.practice-try:hover {
  background: var(--accent);
  color: #fff;
}

/* "Practice this conversation", above the conversation's points. */
.practice-conversation {
  display: flex;
  width: fit-content;
  margin: 12px auto 4px;
  padding: 6px 16px;
  font-size: 0.9rem;
}

.pattern-clean {
  margin-top: 6px;
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 650;
}

.latest-title {
  justify-self: start;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.practice-try svg {
  width: 14px;
  height: 14px;
}