.coffee-scanner {
  border: 3px solid var(--ink);
  background: linear-gradient(135deg, var(--blue) 0 72%, var(--yellow) 72%);
  padding: 18px;
  margin: 18px 0 24px;
  box-shadow: 7px 7px 0 var(--ink);
}

.coffee-scanner-copy {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
}

.coffee-scanner-copy h3 {
  margin: 0 0 5px;
  font-size: 22px;
  letter-spacing: -.6px;
}

.coffee-scanner-copy p {
  margin: 0;
  max-width: 650px;
  font-size: 13px;
  line-height: 1.45;
}

.coffee-scanner-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border: 2px solid var(--ink);
  background: var(--white);
  font-size: 21px;
  font-weight: 900;
  transform: rotate(-2deg);
}

.coffee-intake-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border: 2px solid var(--ink);
  background: var(--white);
}

.coffee-intake-tab {
  min-height: 43px;
  border: 0;
  border-right: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.coffee-intake-tab:last-child { border-right: 0; }
.coffee-intake-tab.active { background: var(--pink); }
.coffee-intake-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }

.coffee-intake-panel {
  padding: 15px 0 0;
}

.coffee-intake-panel[hidden] { display: none !important; }

.coffee-scanner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.coffee-scanner-actions .primary,
.coffee-scanner-actions .secondary { margin: 0; }

.coffee-file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.coffee-file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.coffee-scan-button:disabled,
.coffee-text-button:disabled,
.coffee-audio-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.coffee-scan-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.coffee-scan-previews:empty { display: none; }

.coffee-scan-previews figure {
  position: relative;
  width: 94px;
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 5px;
}

.coffee-scan-previews img {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: cover;
}

.coffee-scan-previews figcaption {
  overflow: hidden;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-scan-previews button,
.coffee-audio-remove {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
  font-weight: 900;
  line-height: 17px;
  cursor: pointer;
}

.coffee-scan-status {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 800;
}

.coffee-scan-status.working::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border: 2px solid var(--ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: coffee-scan-spin .7s linear infinite;
}

.coffee-scan-status.warning { color: #7b1608; }
.coffee-scan-status.ready { color: #083c1a; }
@keyframes coffee-scan-spin { to { transform: rotate(360deg); } }

.coffee-chat-thread {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 11px;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--white) 86%, transparent);
}

.coffee-chat-bubble {
  width: fit-content;
  max-width: 86%;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

.coffee-chat-bubble.user {
  justify-self: end;
  background: var(--yellow);
}

.coffee-chat-bubble.moka { background: var(--pink); }
.coffee-chat-bubble b { display: block; margin-bottom: 2px; font-size: 9px; text-transform: uppercase; }
.coffee-chat-bubble p { margin: 0; font-size: 12px; line-height: 1.4; }

.coffee-text-compose {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.coffee-text-compose textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  padding: 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-transform: none;
}

.coffee-audio-recorder {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  background: var(--white);
}

.coffee-audio-recorder div { display: grid; gap: 2px; }
.coffee-audio-recorder strong { font-size: 13px; }
.coffee-audio-recorder small { font-size: 10px; font-weight: 800; }

.coffee-record-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #d7d7d7;
}

.coffee-audio-recorder.recording .coffee-record-dot {
  background: #ef2b2d;
  animation: coffee-record-pulse 1s ease-in-out infinite;
}

@keyframes coffee-record-pulse { 50% { transform: scale(.65); opacity: .55; } }

.coffee-audio-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  margin-top: 13px;
  padding: 9px;
  border: 2px solid var(--ink);
  background: var(--white);
}

.coffee-audio-preview[hidden] { display: none !important; }
.coffee-audio-player { width: 100%; height: 38px; }
.coffee-audio-name { grid-column: 1 / -1; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.coffee-audio-remove { position: static; }

.coffee-label-notes { grid-column: 1 / -1; }

.coffee-scan-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  border: 3px solid var(--ink);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 11px 11px 0 var(--pink);
}

.coffee-scan-dialog::backdrop { background: rgba(8, 8, 8, .78); }
.coffee-scan-dialog-inner { padding: 25px; }

.coffee-scan-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 15px;
}

.coffee-scan-dialog-head h2 {
  margin: 3px 0 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -1.4px;
}

.coffee-scan-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
}

.coffee-scan-transcript {
  margin: 15px 0 0;
  padding: 11px 13px;
  border: 2px dashed var(--ink);
  background: var(--blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.coffee-scan-summary { margin: 17px 0; font-weight: 800; line-height: 1.45; }
.coffee-scan-results { display: grid; gap: 8px; }

.coffee-scan-result-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 12px;
  cursor: pointer;
}

.coffee-scan-result-row > input {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  width: 21px;
  height: 21px;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--pink);
  cursor: pointer;
}

.coffee-scan-result-row.is-selected {
  background: #fff9bc;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.coffee-scan-result-row:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.coffee-scan-result-main { display: grid; gap: 2px; min-width: 0; }
.coffee-scan-result-label { font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.coffee-scan-result-main strong { overflow-wrap: anywhere; font-size: 17px; }
.coffee-scan-result-main small { font-size: 10px; line-height: 1.35; }
.coffee-scan-current { color: #9b1d4e; font-weight: 900; }
.coffee-scan-evidence { color: var(--muted); }

.coffee-confidence {
  border: 1px solid var(--ink);
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.confidence-high .coffee-confidence { background: #62c370; }
.confidence-medium .coffee-confidence { background: var(--yellow); }
.confidence-low .coffee-confidence { background: #ff9a76; }
.coffee-scan-missing { border-top: 2px dashed var(--ink); padding-top: 13px; font-size: 11px; line-height: 1.45; }
.coffee-scan-empty { border: 2px dashed var(--ink); padding: 20px; text-align: center; font-weight: 800; }

.coffee-scan-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.coffee-scan-dialog-actions button { margin: 0; }

@media (max-width: 620px) {
  .coffee-scanner { padding: 15px; background: var(--blue); box-shadow: 5px 5px 0 var(--ink); }
  .coffee-scanner-copy h3 { font-size: 19px; }
  .coffee-intake-tab { min-height: 47px; font-size: 10px; }
  .coffee-scanner-actions { align-items: stretch; }
  .coffee-scanner-actions .primary,
  .coffee-scanner-actions .secondary { width: 100%; text-align: center; }
  .coffee-chat-bubble { max-width: 94%; }
  .coffee-scan-dialog-inner { padding: 17px; }
  .coffee-scan-dialog-head h2 { font-size: 27px; }
  .coffee-scan-result-row { grid-template-columns: 22px minmax(0, 1fr); }
  .coffee-confidence { grid-column: 2; justify-self: start; }
  .coffee-scan-dialog-actions button { width: 100%; }
}