/* Палитра A «Тёплый уют»: фон #181410, поверхности #241E19,
   акцент #E08A5B (терракот), вторичный #C97B9C, текст #F2E9E1 */
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, sans-serif; background: #181410; color: #F2E9E1; }
a { color: inherit; text-decoration: none; }

.hero { text-align: center; padding: 40px 16px 24px; max-width: 640px; margin: 0 auto; }
.hero h1 { font-size: 1.6rem; margin-bottom: 12px; }
.hero p { color: #bfae9f; }

.cards { display: grid; gap: 16px; padding: 16px; max-width: 960px; margin: 0 auto;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { background: #241E19; border-radius: 14px; overflow: hidden;
        transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .25s; }
.card:hover { transform: translateY(-6px) scale(1.02);
              box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
            transition: transform .4s ease; }
.card:hover img { transform: scale(1.06); }
.card h2 { font-size: 1.1rem; padding: 12px 14px 4px; }
.card p { color: #bfae9f; font-size: .9rem; padding: 0 14px 14px; }

.chat-page { display: flex; flex-direction: column; height: 100dvh; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
               background: #241E19; }
.chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-header .back { font-size: 1.4rem; padding: 4px 8px; }
.chat-header small { color: #a08f80; }
.log { flex: 1; overflow-y: auto; padding: 16px; display: flex;
       flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px;
          white-space: pre-wrap; line-height: 1.4; }
.bubble.user { align-self: flex-end; background: #E08A5B; color: #241209; }
.bubble.assistant { align-self: flex-start; background: #2e2620; }
.composer { display: flex; gap: 8px; padding: 10px 14px 16px; background: #241E19;
            position: relative; z-index: 2; }
.composer textarea { flex: 1; resize: none; border: 0; border-radius: 12px;
                     padding: 10px 14px; font: inherit; background: #181410;
                     color: #F2E9E1; }
.composer textarea:focus { outline: 2px solid #E08A5B; }
.composer button { border: 0; border-radius: 12px; padding: 0 18px;
                   background: #E08A5B; color: #241209; font-size: 1.1rem;
                   cursor: pointer; }
.composer button:hover { background: #eb9a6f; }

/* Кот, гуляющий над полем ввода. Чистый CSS, клики сквозь него проходят. */
.cat { position: fixed; bottom: 76px; left: 0; width: 34px; height: 18px;
       pointer-events: none; z-index: 1; opacity: .85;
       animation: cat-stroll 40s linear infinite; }
.cat .body { position: absolute; bottom: 0; left: 4px; width: 22px; height: 10px;
             border-radius: 6px 8px 4px 4px; background: #E08A5B; }
.cat .head { position: absolute; bottom: 5px; left: 20px; width: 11px; height: 10px;
             border-radius: 5px; background: #E08A5B; }
.cat .head::before, .cat .head::after { content: ""; position: absolute; top: -3px;
             border-left: 3px solid transparent; border-right: 3px solid transparent;
             border-bottom: 5px solid #E08A5B; }
.cat .head::before { left: 0; } .cat .head::after { right: 0; }
.cat .tail { position: absolute; bottom: 6px; left: -3px; width: 10px; height: 3px;
             border-radius: 3px; background: #E08A5B; transform-origin: right;
             animation: cat-wag 1.6s ease-in-out infinite; }
.cat .l1, .cat .l2 { position: absolute; bottom: -3px; width: 2.5px; height: 5px;
             border-radius: 2px; background: #E08A5B;
             animation: cat-step .5s ease-in-out infinite alternate; }
.cat .l1 { left: 8px; } .cat .l2 { left: 20px; animation-delay: .25s; }
@keyframes cat-stroll {
  0%   { transform: translateX(8px); }
  49%  { transform: translateX(calc(100vw - 50px)); }
  50%  { transform: translateX(calc(100vw - 50px)) scaleX(-1); }
  100% { transform: translateX(8px) scaleX(-1); }
}
@keyframes cat-wag { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } }
@keyframes cat-step { to { transform: translateY(-1.5px); } }

@media (prefers-reduced-motion: reduce) {
  .cat, .cat * { animation: none; }
  .card, .card img { transition: none; }
}