.oneirokritis-card{
  border:1px solid #e8e6e3;
  background: #fff8f2;
  padding:18px;
  border-radius:8px;
  max-width:720px;
  font-family: 'Asty', system-ui, sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
/* Use theme color tokens where possible. These mirror the theme's accent (#ad8330) and base text colors. */
:root {
  --onei-accent: #ad8330; /* theme gold accent */
  --onei-bg: #ffffff;
  --onei-muted: #f5f3f2;
  --onei-border: #e8e6e3;
  --onei-text: #333333;
}

.oneirokritis-card{
  border:1px solid var(--onei-border);
  background: var(--onei-bg);
  padding:18px;
  border-radius:8px;
  max-width:720px;
  font-family: 'Asty', system-ui, sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  color: var(--onei-text);
  opacity:0;
  transform:translateY(8px);
  animation: onei-fade-in 360ms ease forwards;
}

.oneirokritis-title{
  color:var(--onei-accent);
  margin:0 0 10px 0;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  gap:8px;
}

.oneirokritis-title:before{
  content: '';
  width:20px;
  height:20px;
  display:inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ad8330'><path d='M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z'/></svg>");
  background-size:contain;
  background-repeat:no-repeat;
}

.oneirokritis-dream{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:6px;
  resize:vertical;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.oneirokritis-dream:focus{box-shadow:0 6px 18px rgba(173,131,48,0.12);border-color:var(--onei-accent)}

.oneirokritis-audio-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.oneirokritis-record{
  background:transparent;
  color:var(--onei-accent);
  border:1px solid var(--onei-accent);
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.oneirokritis-record:before{
  content: '';
  width:14px;
  height:14px;
  display:inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ad8330'><path d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3z'/><path d='M19 11a1 1 0 0 0-2 0 5 5 0 0 1-10 0 1 1 0 0 0-2 0 7 7 0 0 0 6 6.92V21a1 1 0 0 0 2 0v-3.08A7 7 0 0 0 19 11z'/></svg>");
  background-size:contain;
  background-repeat:no-repeat;
}

.oneirokritis-recording-indicator{color:#d00;font-weight:600;min-width:80px}

.oneirokritis-submit{
  background:var(--onei-accent);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  margin-top:10px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.oneirokritis-submit:active{transform:translateY(1px)}

/* Place submit on the right with icon */
/* Layout: put audio controls and submit on same horizontal row using grid */
.oneirokritis-inputs{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "label label"
    "textarea textarea"
    "audio submit";
  gap:10px 12px;
}
.oneirokritis-inputs > label{ grid-area: label; }
.oneirokritis-inputs > textarea{ grid-area: textarea; }
.oneirokritis-audio-row{ grid-area: audio; }
.oneirokritis-submit{ grid-area: submit; justify-self: end; display:inline-flex; align-items:center; gap:8px; padding:10px 14px 10px 12px; }
.oneirokritis-submit::before{
  content: '';
  width:16px;
  height:16px;
  display:inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M2 21l21-9L2 3v7l15 2-15 2v7z'/></svg>");
  background-size:contain;
  background-repeat:no-repeat;
}

/* Ensure floats don't collapse the container */
.oneirokritis-inputs::after{
  content: '';
  display: block;
  clear: both;
}

.oneirokritis-submit:hover{ box-shadow: 0 6px 18px rgba(173,131,48,0.18); transform: translateY(-1px); }

/* Inverse hover styles: record fills on hover; submit becomes outline on hover */
.oneirokritis-record:hover{ background:var(--onei-accent); color:#fff; border-color:var(--onei-accent); }
.oneirokritis-submit:hover{ background:transparent; color:var(--onei-accent); border:1px solid var(--onei-accent); }

/* Responsive: stack controls on narrow screens */
@media (max-width: 560px) {
  .oneirokritis-inputs{
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "textarea"
      "audio"
      "submit";
  }
  .oneirokritis-submit{ justify-self: stretch; }
}

.oneirokritis-result{
  margin-top:14px;
  padding:12px;
  background:var(--onei-muted);
  border-radius:6px;
  border:1px solid rgba(173,131,48,0.08);
  opacity:0;
  transform:translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.oneirokritis-result.visible{opacity:1;transform:none}

@keyframes onei-fade-in{
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .oneirokritis-card, .oneirokritis-result { animation:none; transition:none !important; }
}