.smart-query-field { grid-column: 1 / -1; }

.smart-query-field input {
  width: 100%;
  min-height: 58px;
  font-size: 1.05rem;
}

.smart-examples,
#smart-tags,
#smart-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.smart-examples button,
#smart-tags button,
.smart-context-tag {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #abc4d2;
  border-radius: 12px;
  background: #fff;
  color: #12425c;
  font: inherit;
}

.smart-examples button,
#smart-tags button { cursor: pointer; }

.smart-context-tag {
  display: inline-flex;
  align-items: center;
  background: #edf6fa;
}

.smart-intent {
  margin: 32px 0 18px;
  padding: 24px;
  border: 1px solid #d5e3eb;
  border-radius: 18px;
  background: #f7fbfd;
}

.smart-message {
  margin: 10px 0;
  padding: 14px 16px;
  border-left: 4px solid #4f819b;
  border-radius: 8px;
  background: #edf6fa;
}

.smart-message.warning {
  border-color: #ba8431;
  background: #fff8e9;
}

.smart-message.error {
  border-color: #b33b3b;
  background: #fff0f0;
}

.smart-group { margin: 28px 0; }

.smart-group-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}

.smart-count {
  display: inline-flex;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dbeaf2;
  color: #123d55;
  font-weight: 700;
}

.smart-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  margin: 14px 0;
  padding: 20px;
  border: 1px solid #d5e3eb;
  border-radius: 18px;
  background: #fff;
}

.smart-card.uncertain { border-color: #d7b56d; }
.smart-card.partial { border-color: #d7b56d; }
.smart-card.alternatives { border-color: #cf7777; }
.smart-card.conflict { border-color: #cf7777; }
.smart-card h3 { margin: 0 0 10px; }

.smart-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.smart-card p { overflow-wrap: anywhere; }

.smart-card-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-radius: 12px;
  background: #f7fafc;
}

.smart-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
}

.smart-card-media small {
  color: #5b7180;
  font-size: 12px;
  text-align: center;
}

.smart-card-body { min-width: 0; }

.smart-status-label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
}

.smart-status-label.confirmed { color: #226b50; }
.smart-status-label.uncertain { color: #8a6417; }
.smart-status-label.partial { color: #8a6417; }
.smart-status-label.alternatives { color: #9c2e2e; }
#smart-clarification fieldset { border: 1px solid #abc4d2; border-radius: 14px; padding: 20px; margin: 20px 0; min-width: 0; }
#smart-clarification legend { font-weight: 700; max-width: 100%; }
#smart-clarification button { margin: 4px; white-space: normal; min-height: 44px; }
#smart-clarification button[aria-pressed="true"] { background: #12425c; color: #fff; }
[hidden] { display: none !important; }
.smart-status-label.conflict { color: #9c2e2e; }
.smart-alt-control { margin: 18px 0; }
.smart-footnote { margin: 36px 0; }

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #007dba;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .smart-card { grid-template-columns: 1fr; }
  .smart-card-media {
    justify-self: center;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 600px) {
  .smart-intent,
  .smart-card { padding: 16px; }
  .smart-card .actions > * {
    width: 100%;
    text-align: center;
  }
  .smart-query-field input { min-height: 64px; }
}