/* Dictation-first note field — the mic lives on the note itself */
.dictate-hint { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.note-field { position: relative; }
.note-field textarea { padding-right: 138px; transition: border-color .2s, box-shadow .2s; }
.mic-button { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 0; border-radius: 99px; font: 800 12.5px inherit; letter-spacing: .2px; color: #fff; background: var(--green); cursor: pointer; white-space: nowrap; box-shadow: 0 7px 18px rgba(30,91,76,.28); transition: transform .15s, box-shadow .2s, background .2s; }
.mic-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30,91,76,.34); }
.mic-button:active { transform: translateY(0); }
.mic-button:focus-visible { outline: 3px solid rgba(30,91,76,.35); outline-offset: 2px; }
.mic-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.mic-button[hidden], .listening-badge[hidden] { display: none; }
.mic-button .mic-glyph { font-size: 14px; line-height: 1; }
.mic-button.recording { background: #d6483b; box-shadow: 0 7px 20px rgba(214,72,59,.42); animation: mic-pulse 1.5s ease-in-out infinite; }
.mic-button.recording:focus-visible { outline-color: rgba(214,72,59,.45); }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,72,59,.5), 0 7px 20px rgba(214,72,59,.42); } 50% { box-shadow: 0 0 0 11px rgba(214,72,59,0), 0 7px 20px rgba(214,72,59,.42); } }
/* Strong listening state: the note field glows while we listen */
.note-field.listening textarea { border-color: #d6483b; box-shadow: 0 0 0 3px rgba(214,72,59,.18); }
.listening-badge { position: absolute; left: 15px; bottom: 15px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 99px; background: rgba(214,72,59,.1); border: 1px solid rgba(214,72,59,.28); color: #b23a2e; font: 800 12px inherit; box-shadow: 0 4px 12px rgba(214,72,59,.14); }
.listening-badge .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6483b; animation: dot-pulse 1.1s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
.listening-timer { font: 800 12px ui-monospace, SFMono-Regular, monospace; letter-spacing: .5px; }
/* Voice guidance + privacy note below the field */
.voice-meta { margin-top: 13px; display: grid; gap: 8px; }
.voice-meta p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.voice-meta-status:empty { display: none; }
.transcription-privacy { color: #765b48; }
@media (prefers-reduced-motion: reduce) { .mic-button.recording, .listening-badge .pulse-dot { animation: none; } }
.attached-audio { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; padding: 11px 12px; background: #eef4ef; border-radius: 12px; }
.attached-audio strong { font-size: 11px; }
.attached-audio span { font-size: 10px; color: var(--muted); }
.attached-audio audio { grid-column: 1 / -1; width: 100%; height: 36px; }
.discard-audio { margin-top: 8px; }
.audio-library { margin-bottom: 22px; }
.audio-library > .attached-audio + .attached-audio { margin-top: 10px; }
.social-preview { margin-top: 24px; }
.social-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.social-platforms article { border: 1px solid var(--line); border-radius: 15px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.social-platforms small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.social-platforms button { grid-column: 1 / -1; width: 100%; }
.platform-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--mint); display: grid; place-items: center; font: 700 18px Georgia, serif; }
.share-panel { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.share-panel > strong { font-size: 12px; }
.share-panel > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.share-panel .native-share { justify-self: start; }
.share-fallbacks { display: flex; flex-wrap: wrap; gap: 7px; }
.share-fallbacks .ghost { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 760px) { .social-platforms { grid-template-columns: 1fr; } .share-fallbacks .ghost { flex: 1 1 45%; justify-content: center; } }

/* Muse responsive refinements */
@media (max-width: 1180px) {
  .status-pill { display: none; }
  .top-actions { gap: 8px; }
}
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 216px 1fr; }
  .sidebar { padding-inline: 13px; }
  .brand { margin-inline: 6px; }
  .brand-copy small { font-size: 10px; letter-spacing: .5px; }
  .topbar { align-items: flex-start; gap: 16px; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  body { background: var(--cream); }
  .sidebar { width: 252px; left: -276px; }
  .sidebar.open { left: 0; }
  .topbar { min-height: 88px; padding: 16px 17px; align-items: center; }
  .mobile-menu { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--green); cursor: pointer; }
  .topbar > div:first-of-type { margin-left: 2px; }
  .topbar h1 { max-width: 260px; font-size: clamp(20px, 5.5vw, 25px); }
  .top-actions .secondary { display: none; }
  #language-picker { min-height: 39px; padding-left: 9px; }
  .primary.compact { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 14px; font-size: 20px; line-height: 1; }
  .primary.compact span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .content { padding: 23px 16px 48px; }
  .card { padding: 19px; border-radius: 22px; }
  .hero { padding: 25px 22px; min-height: 220px; }
  .hero h2 { max-width: 90%; font-size: 29px; }
  .hero p { max-width: 90%; }
  .hero::after { right: -125px; }
  .section-head, .page-title-row { align-items: flex-start; gap: 12px; }
  .page-title-row h2 { font-size: 29px; }
  .dog-card { padding: 17px; }
  .dog-avatar { width: 62px; height: 62px; }
  .composer textarea { min-height: 180px; }
  .note-field textarea { padding-right: 18px; padding-top: 64px; }
  .mic-button { left: 13px; right: auto; }
  .composer-actions { gap: 12px; }
  .composer-actions small { max-width: 55%; }
  .week { gap: 8px; }
  .day { padding: 10px; }
}
@media (max-width: 440px) {
  .eyebrow { letter-spacing: 1.2px; }
  .topbar h1 { max-width: 190px; font-size: 19px; }
  #language-picker { width: 55px; padding-right: 5px; }
  .hero h2 { max-width: 100%; font-size: 27px; }
  .hero p { max-width: 100%; }
  .dog-card { gap: 12px; }
  .dog-avatar { width: 54px; height: 54px; font-size: 30px; }
  .week { grid-template-columns: 1fr; }
  .day { min-height: 108px; }
  .composer-actions { align-items: stretch; flex-direction: column; }
  .composer-actions small { max-width: none; }
}