/* dialog.css - Clean version */

/* Container */
.dialog-section {
  background: #fff;
  margin: 0;
  padding: 0;
}

/* Desktop wrapper */
@media (min-width: 768px) {
  .dialog-section {
    margin: 0 24px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .dialog-header {
    padding: 24px 24px 16px;
  }

  .dialog-item {
    padding: 20px 24px;
  }
}

/* Header */
.dialog-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid #e5e5e7;
}

.dialog-header h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

/* List */
.dialog-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Base dialog item */
.dialog-item {
  position: relative;
  padding: 20px 16px;
  border-bottom: 0.5px solid #e5e5e7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease;
  user-select: none;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dialog-item:active {
  background-color: #f2f2f7;
}

@media (hover: hover) {
  .dialog-item:hover {
    background-color: #f9f9fb;
  }
}

.dialog-item.playing {
  background-color: #f2f2f7;
}

/* Vocabulary items (single words) */
.dialog-speaker {
  font-size: 26px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .dialog-speaker {
    font-size: 30px;
    letter-spacing: -0.7px;
  }
}

/* Content wrapper */
.dialog-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dialog-text {
  flex: 1;
  min-width: 0;
}

/* Progressive disclosure for vocabulary */
.dialog-turkish,
.dialog-english {
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dialog-turkish {
  font-size: 19px;
  line-height: 1.4;
  color: #000;
  font-weight: 400;
  letter-spacing: -0.2px;
}

.dialog-english {
  font-size: 16px;
  line-height: 1.35;
  color: rgba(60, 60, 67, 0.6);
  font-weight: 400;
}

@media (min-width: 768px) {
  .dialog-turkish {
    font-size: 21px;
  }

  .dialog-english {
    font-size: 17px;
  }
}

/* Show translations when active */
.dialog-item.show-translation .dialog-turkish {
  height: auto;
  opacity: 1;
  margin-bottom: 8px;
}

.dialog-item.show-translation .dialog-english {
  height: auto;
  opacity: 1;
  padding-bottom: 2px;
}

@media (min-width: 768px) {
  .dialog-item.show-translation .dialog-turkish {
    margin-bottom: 10px;
  }
}

/* Conversation items (full dialogues) */
.conversation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 24px;
  min-height: 72px;
}

.conversation-item .conversation-role {
  flex-shrink: 0;
  margin-right: 16px;
  font-size: 12px; /* Slightly smaller */
  font-weight: 600; /* Less bold */
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888; /* Lighter gray */
  opacity: 0.7;
}

.conversation-item .dialog-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-right: 16px;
}

.conversation-item .dialog-sentence {
  font-size: 26px; /* Match vocabulary size */
  font-weight: 700; /* Match vocabulary weight */
  line-height: 1.15; /* Match vocabulary line-height */
  letter-spacing: -0.5px; /* Match vocabulary letter-spacing */
  color: #000;
}
@media (min-width: 768px) {
  .conversation-item .dialog-sentence {
    font-size: 30px; /* Match desktop vocabulary size */
    letter-spacing: -0.7px;
  }
}

.conversation-item .dialog-english {
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 16px; /* Match vocabulary English */
  color: rgba(60, 60, 67, 0.6);
  font-weight: 400;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .conversation-item .dialog-english {
    font-size: 17px; /* Match desktop vocabulary English */
  }
}

/* Mobile conversation layout */
@media (max-width: 767px) {
  .conversation-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 16px;
  }

  .conversation-item .conversation-role {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .conversation-item .dialog-text {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .conversation-item .dialog-audio-indicator {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static;
    transform: none;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
}
/* Show English when play is pressed */
.conversation-item.show-translation .dialog-english {
  height: auto;
  opacity: 1;
  margin-top: 4px;
}

/* Only add margin when translation is shown */
.conversation-item.show-translation .dialog-sentence {
  margin-bottom: 4px;
}
/* Audio button */
.dialog-audio-indicator {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  flex-shrink: 0;
}

.audio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #059669;
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 9999px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.audio-button .lucide {
  width: 24px;
  height: 24px;
}

.audio-button:hover {
  background-color: #047857;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.audio-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.5), 0 0 0 4px #fff;
}

@media (min-width: 768px) {
  .audio-button {
    width: 56px;
    height: 56px;
  }

  .audio-button .lucide {
    width: 28px;
    height: 28px;
  }
}
/* Grammar Section Typography */

.grammar-section-header {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #000;
}

@media (min-width: 768px) {
  .grammar-section-header {
    font-size: 26px;
    margin-bottom: 24px;
  }
}

.grammar-collapsible-header {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.grammar-text {
  font-size: 17px;
  line-height: 1.5;
  color: #333;
}

.grammar-examples p {
  font-size: 16px;
  line-height: 1.4;
}

.grammar-examples strong {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.2px;
}

.grammar-content {
  padding: 20px;
}

@media (min-width: 768px) {
  .grammar-content {
    padding: 24px;
  }
}

/* Real-World Scenarios - Match dialog section styling */

.scenarios-section {
  background: #fff;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .scenarios-section {
    margin: 0 24px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}

.scenarios-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid #e5e5e7;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

@media (min-width: 768px) {
  .scenarios-header {
    padding: 24px 24px 16px;
  }
}

.scenario-item {
  padding: 20px 16px;
  border-bottom: 0.5px solid #e5e5e7;
}

@media (min-width: 768px) {
  .scenario-item {
    padding: 24px;
  }
}

.scenario-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #000;
  display: flex;
  align-items: center;
}

.scenario-exchange {
  margin-bottom: 16px;
}

.scenario-role {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  margin-bottom: 4px;
}

.scenario-turkish {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  margin-bottom: 4px;
}

.scenario-english {
  font-size: 16px;
  color: rgba(60, 60, 67, 0.6);
  font-weight: 400;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .scenario-turkish {
    font-size: 22px;
  }
}

/* Practice Section - Match dialog section styling */

.practice-section {
  background: #fff;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .practice-section {
    margin: 0 24px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}

.practice-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid #e5e5e7;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.practice-intro {
  padding: 0 16px 12px;
  font-size: 16px;
  color: rgba(60, 60, 67, 0.6);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .practice-header {
    padding: 24px 24px 16px;
  }

  .practice-intro {
    padding: 0 24px 16px;
  }
}

.practice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-item {
  padding: 20px 16px;
  border-bottom: 0.5px solid #e5e5e7;
}

@media (min-width: 768px) {
  .practice-item {
    padding: 24px;
  }
}

.practice-turkish {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .practice-turkish {
    font-size: 24px;
  }
}

.practice-english {
  font-size: 16px;
  color: rgba(60, 60, 67, 0.6);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 16px;
}

.practice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Update button styles to be more subtle */
.practice-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.practice-button-listen {
  background-color: #047857;
  color: white;
}

.practice-button-listen:hover {
  background-color: #047857;
}

.practice-button-record {
  background-color: #6b7280;
  color: white;
}

.practice-button-record:hover {
  background-color: #4b5563;
}

.practice-button-record.recording {
  background-color: #dc2626;
}

.practice-button-play {
  background-color: #047857;
  color: white;
}
/* Numbers Section - Match dialog section styling */

.numbers-section {
  background: #fff;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .numbers-section {
    margin: 0 24px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}

.numbers-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid #e5e5e7;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.numbers-intro {
  padding: 0 16px 12px;
  font-size: 16px;
  color: rgba(60, 60, 67, 0.6);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .numbers-header {
    padding: 24px 24px 16px;
  }

  .numbers-intro {
    padding: 0 24px 16px;
  }
}

.numbers-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbers-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  border-bottom: 0.5px solid #e5e5e7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease;
}

@media (min-width: 768px) {
  .numbers-item {
    padding: 20px 24px;
  }
}

.numbers-item:hover {
  background-color: #f9f9fb;
}

.numbers-icon {
  flex-shrink: 0;
  color: #047857;
}

.numbers-content {
  flex: 1;
}

.numbers-label {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.numbers-turkish {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.numbers-note {
  margin: 20px 16px;
  padding: 16px;
  background-color: #166534;
  border-radius: 12px;
  border: 1px solid #166534;
}

@media (min-width: 768px) {
  .numbers-note {
    margin: 20px 24px;
  }
}

.numbers-note-text {
  font-size: 16px;
  color: #fbfbfb;
  line-height: 1.5;
}

.numbers-note-text strong {
  font-weight: 600;
}
.content-section {
  margin-bottom: 2rem; /* or 3rem for more breathing room */
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb; /* subtle gray line */
}

.content-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Vocabulary list styling */
.vocab-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vocab-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.vocab-item:last-child {
  border-bottom: none;
}

.vocab-content {
  flex: 1;
}

.vocab-term {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}

.vocab-definition {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.vocab-translation {
  color: #374151;
}

.vocab-context {
  font-style: italic;
}