/* === RESET === */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
body {
  background: #FAF6EF;
  min-height: 100vh; color: #1F1B16; line-height: 1.55;
  padding: 0; padding-bottom: 60px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === LAYOUT === */
#app { max-width: 480px; margin: 0 auto; padding: 24px 20px; }
header { text-align: left; padding: 32px 0 24px; border-bottom: 1px solid #E5DFD2; }
.h1-row {
  display: flex; align-items: baseline; gap: 12px;
}
.cat-mark {
  width: 96px; height: 44px;
  opacity: 0.85;
  align-self: center;
}
/* Анимации кота (SVG внутри <img> — CSS должен быть на родителе) */
.cat-mark .paw-wave {
  transform-origin: 60px 44px;
  transform-box: fill-box;
  animation: paw-wave 1.6s ease-in-out infinite;
}
.cat-mark .tail {
  transform-origin: 116px 38px;
  transform-box: fill-box;
  animation: tail-sway 3.6s ease-in-out infinite;
}
.cat-mark .ear-l, .cat-mark .ear-r {
  transform-origin: center;
  transform-box: fill-box;
  animation: ear-twitch 5s ease-in-out infinite;
}
.cat-mark .ear-r { animation-delay: 1.4s; }
.cat-mark .body {
  transform-origin: center;
  transform-box: fill-box;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes paw-wave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-22deg); }
}
@keyframes tail-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes ear-twitch {
  0%, 90%, 100% { transform: rotate(0); }
  95%           { transform: rotate(-4deg); }
}
@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-mark .paw-wave,
  .cat-mark .tail,
  .cat-mark .ear-l,
  .cat-mark .ear-r,
  .cat-mark .body { animation: none; }
}
h1 {
  font-size: 32px; font-weight: 400; font-style: italic;
  letter-spacing: -0.02em; color: #1F1B16;
  margin-bottom: 6px;
}
.subtitle { color: #6B6358; font-size: 14px; font-style: italic; }
main { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }

/* === CARDS === */
.card {
  background: #FFFFFF; border: 1px solid #E5DFD2; border-radius: 2px;
  padding: 24px 20px;
}
.card h3 {
  font-size: 15px; font-weight: 600; margin-bottom: 16px; color: #6B6358;
  font-style: italic;
}
.card-compact { padding: 20px; }
.hidden { display: none !important; }

/* === ASK / ANSWER === */
.ask-prompt {
  font-size: 14px; color: #6B6358; font-style: italic;
  margin-bottom: 12px;
}
textarea {
  width: 100%; border: 1px solid #D6CFC0; border-radius: 2px;
  padding: 12px; font-size: 16px; font-family: inherit;
  resize: none; outline: none; transition: border-color 0.2s;
  background: #FAF6EF; color: #1F1B16;
}
textarea:focus { border-color: #B8893A; }
textarea::placeholder { color: #A39A8A; font-style: italic; }

.ask-hint {
  margin-top: 12px; font-size: 12px; color: #A39A8A; font-style: italic;
  text-align: center;
}

/* === BUTTONS === */
.btn-primary {
  width: 100%; background: #1F1B16; color: #FAF6EF;
  border: none; border-radius: 2px; padding: 14px;
  font-size: 15px; font-family: inherit; font-weight: 400;
  margin-top: 12px; cursor: pointer; letter-spacing: 0.02em;
  transition: background 0.15s;
}
.btn-primary:hover { background: #B8893A; }
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { background: #A39A8A; cursor: wait; }

.btn-secondary-input {
  flex: 1; background: #FAF6EF; color: #1F1B16;
  border: 1px solid #D6CFC0; border-radius: 2px; padding: 12px;
  font-size: 14px; font-family: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: block; width: 100%;
}
.btn-secondary-input:hover { border-color: #B8893A; }
.btn-secondary-input:active { background: #F0E9DA; }

.btn-link {
  width: 100%; background: none; color: #A39A8A; border: none;
  font-family: inherit; font-size: 13px; font-style: italic;
  margin-top: 8px; padding: 8px; cursor: pointer;
}
.btn-link:hover { color: #6B6358; }

/* Кнопка остановки записи — яркая, чтобы было видно «идёт запись» */
.btn-secondary-input[id="btn-voice-stop"] {
  background: #8B3A3A;
  color: #FAF6EF;
  border-color: #8B3A3A;
}
.btn-secondary-input[id="btn-voice-stop"]:active {
  background: #6B2828;
}

.input-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.input-buttons .btn-secondary-input { min-width: 100px; }

/* === META / CHIPS === */
.meta-label {
  font-size: 13px; color: #6B6358; font-style: italic;
  margin: 16px 0 10px;
}
.chips-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip {
  background: #FAF6EF; border: 1px solid #D6CFC0; border-radius: 2px;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  color: #1F1B16; cursor: pointer; line-height: 1.3;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: #B8893A; }
.chip.selected {
  background: #1F1B16; color: #FAF6EF; border-color: #1F1B16;
}

.palki-grid, .rules-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.palki-grid .chip { font-size: 12.5px; }

.emotions-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip-emotion {
  font-style: italic; font-size: 13px;
  color: #6B6358;
}
.chip-emotion.selected {
  background: #6B6358; color: #FAF6EF; border-color: #6B6358;
}

/* === ANSWER === */
.answer { background: #FAF6EF; border: 1px solid #D6CFC0; }
.answer-label {
  font-size: 12px; color: #6B6358; font-style: italic;
  margin-bottom: 10px; letter-spacing: 0.05em;
}
.answer-text {
  font-size: 17px; line-height: 1.6; color: #1F1B16;
  font-style: italic;
}

/* === TODAY === */
#today-list { list-style: none; margin: 0; }
#today-list li {
  padding: 12px 0; border-bottom: 1px solid #E5DFD2;
  font-size: 14px; line-height: 1.5;
}
#today-list li:last-child { border-bottom: none; }
#today-list time {
  display: inline-block; min-width: 50px;
  color: #A39A8A; font-size: 12px; font-style: italic;
  margin-right: 8px;
}
.log-text { color: #1F1B16; }
.log-emotion {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; font-size: 11px; font-style: italic;
  color: #6B6358; background: #FAF6EF;
  border: 1px solid #D6CFC0; border-radius: 2px;
}
.log-meta {
  display: block; margin-top: 4px;
  color: #6B6358; font-size: 12px; font-style: italic;
}

/* === MOTIVATION === */
.motivation-text {
  margin-top: 16px; padding: 16px;
  background: #FAF6EF; border: 1px solid #D6CFC0;
  border-radius: 2px;
  font-size: 16px; line-height: 1.6; font-style: italic;
  color: #1F1B16;
  text-align: center;
}

/* === KEY === */
.key-card {
  margin-top: 16px; padding: 16px;
  background: #FAF6EF; border: 1px solid #D6CFC0;
  border-radius: 2px;
}
.key-situation {
  font-size: 14px; line-height: 1.5; color: #1F1B16;
  margin-bottom: 10px;
  font-style: italic;
}
.key-rule {
  font-size: 13px; color: #6B6358;
  padding-top: 10px; border-top: 1px solid #D6CFC0;
  font-style: italic;
}
.key-rule::before { content: "→ "; color: #B8893A; }

/* === ERROR === */
.error {
  color: #8B3A3A; font-size: 13px; font-style: italic;
  text-align: center; padding: 8px;
}

/* === FOOTER === */
footer {
  text-align: center; color: #A39A8A; font-size: 12px;
  padding: 32px 0 16px; font-style: italic;
  border-top: 1px solid #E5DFD2; margin-top: 32px;
}