@import url("../../../assets/interactive-workbench.css");

:root {
  --tool-accent: #16b7a3;
  --tool-accent-strong: #099686;
  --tool-accent-soft: #e9fbf8;
}

.idiom-shell {
  max-width: 980px;
  margin: 0 auto;
}

.idiom-card {
  display: grid;
  gap: 16px;
}

.idiom-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.idiom-chat-shell {
  min-height: 380px;
  padding: 18px 14px;
  border-radius: 22px;
  border: 1px solid #dfe8f2;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.idiom-message {
  display: flex;
}

.idiom-message.is-user {
  justify-content: flex-end;
}

.idiom-bubble {
  max-width: min(76%, 640px);
  padding: 14px 16px;
  border-radius: 18px;
  line-height: 1.8;
  color: #355866;
  background: #eef8ee;
  border: 1px solid #dcefd7;
}

.idiom-message.is-user .idiom-bubble {
  background: #eaf7ff;
  border-color: #d4e8fb;
  color: #2b536f;
}

.idiom-message.is-bot .idiom-bubble {
  background: #eef8ee;
}

.idiom-bubble strong {
  display: block;
  margin-bottom: 4px;
  color: #1d4d57;
}

.idiom-composer {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
}

.idiom-input {
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--tool-border);
  padding: 0 14px;
  font-size: 15px;
  color: #30475f;
  background: #fff;
}

.idiom-input:focus {
  outline: none;
  border-color: #b8d7d2;
  box-shadow: 0 0 0 3px rgba(22, 183, 163, 0.1);
}

.idiom-hint-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff6d3d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.idiom-records-panel {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #dfe8f2;
  background: linear-gradient(180deg, #fbfcfd 0%, #f3f8fa 100%);
}

.idiom-records {
  color: #42606f;
  line-height: 1.9;
}

.idiom-record-item strong {
  color: #173847;
}

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

  .idiom-composer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .idiom-metrics,
  .idiom-composer {
    grid-template-columns: 1fr;
  }

  .idiom-bubble {
    max-width: 100%;
  }
}