* {
  box-sizing: border-box;
}

:root {
  --bg: #efe6d5;
  --paper: rgba(255, 252, 244, .78);
  --paper-solid: #fffaf0;
  --ink: #241b14;
  --muted: rgba(36, 27, 20, .58);
  --line: rgba(72, 46, 28, .12);
  --accent: #8f3f26;
  --accent-dark: #6f2f1e;
  --shadow: 0 28px 90px rgba(53, 32, 16, .18);
  --radius: 28px;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {

  min-height: 100svh;

  color: var(--ink);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:

    radial-gradient(
      circle at 16% 18%,
      rgba(187,83,49,.16),
      transparent 33%
    ),

    radial-gradient(
      circle at 86% 78%,
      rgba(187,83,49,.12),
      transparent 36%
    ),

    radial-gradient(
      circle at 88% 76%,
      rgba(68,103,64,.10),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #f7eddc,
      #e7d6bc
    );

  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(90, 51, 29, .045) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(90, 51, 29, .035) 50%, transparent 51%);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  animation: breathe 16s ease-in-out infinite;
}

.petals{

  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;
}

.petal{

  position:absolute;

  top:-12vh;

  width:16px;
  height:11px;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,245,248,.95),
      rgba(255,182,203,.96) 55%,
      rgba(255,140,170,.92)
    );

  border-radius:
    70% 30% 70% 30%;

  filter:
    blur(.15px);

  opacity:.42;

  box-shadow:
    0 0 10px rgba(255,190,210,.10);

  animation:
    sakuraFloat linear infinite;
}


/* =========================
   ROZMÍSTĚNÍ
========================= */

.p1{
  left:4%;
  animation-duration:14s;
  animation-delay:-2s;
}

.p2{
  left:12%;
  animation-duration:18s;
  animation-delay:-8s;
}

.p3{
  left:20%;
  animation-duration:16s;
  animation-delay:-5s;
}

.p4{
  left:28%;
  animation-duration:22s;
  animation-delay:-11s;
}

.p5{
  left:36%;
  animation-duration:15s;
  animation-delay:-4s;
}

.p6{
  left:44%;
  animation-duration:19s;
  animation-delay:-7s;
}

.p7{
  left:52%;
  animation-duration:17s;
  animation-delay:-13s;
}

.p8{
  left:60%;
  animation-duration:23s;
  animation-delay:-9s;
}

.p9{
  left:68%;
  animation-duration:16s;
  animation-delay:-6s;
}

.p10{
  left:76%;
  animation-duration:20s;
  animation-delay:-10s;
}

.p11{
  left:84%;
  animation-duration:18s;
  animation-delay:-14s;
}

.p12{
  left:92%;
  animation-duration:24s;
  animation-delay:-12s;
}

.p13{ left:6%;  animation-duration:17s; animation-delay:-15s; }
.p14{ left:14%; animation-duration:15s; animation-delay:-5s; }
.p15{ left:24%; animation-duration:21s; animation-delay:-11s; }
.p16{ left:32%; animation-duration:18s; animation-delay:-3s; }
.p17{ left:41%; animation-duration:16s; animation-delay:-7s; }
.p18{ left:49%; animation-duration:22s; animation-delay:-12s; }
.p19{ left:58%; animation-duration:17s; animation-delay:-8s; }
.p20{ left:66%; animation-duration:19s; animation-delay:-13s; }

.p21{ left:74%; animation-duration:15s; animation-delay:-6s; }
.p22{ left:82%; animation-duration:20s; animation-delay:-10s; }
.p23{ left:90%; animation-duration:18s; animation-delay:-14s; }
.p24{ left:96%; animation-duration:24s; animation-delay:-9s; }
/* =========================
   ANIMACE
========================= */

@keyframes sakuraFloat{

  0%{

    transform:
      translate3d(0,-12vh,0)
      rotate(0deg)
      scale(.7);

    opacity:0;
  }

  8%{
    opacity:.82;
  }

  100%{

    transform:
      translate3d(-240px,120vh,0)
      rotate(720deg)
      scale(1.2);

    opacity:0;
  }
}



.ink-symbol {
  position: absolute;
  left: clamp(-55px, 4vw, 70px);
  top: 30%;
  transform: translateY(-50%);
  font-family: "Noto Serif SC", serif;
  font-size: clamp(9rem, 22vw, 24rem);
  line-height: 1;
  color: rgba(76, 34, 21, .09);
  text-shadow:
    0 18px 42px rgba(90, 45, 20, .14),
    2px 2px 0 rgba(255,255,255,.18);
  filter: blur(.2px);
  animation: symbolFloat 13s ease-in-out infinite;
}



/* =========================================
   INK TREE
========================================= */

.ink-tree {

  position:absolute;

  right:160px;

  bottom:40px;

  font-family:
    "Noto Serif SC",
    serif;

  font-size:
    clamp(10rem, 18vw, 18rem);

  line-height:1;

  color:
    rgba(76,34,21,.12);

  text-shadow:

    0 18px 42px rgba(90,45,20,.14),

    2px 2px 0 rgba(255,255,255,.18);

  filter:
    blur(.2px);

  opacity:.88;

  animation:
    symbolFloat 13s ease-in-out infinite;
}





/* =========================================
   APP SHELL
========================================= */

.app-shell {

  position:relative;

  z-index:1;

  min-height:100svh;

  display:grid;

  place-items:center;

  padding:22px;
}

.chat-card {

  width: min(720px, 100%);
  height: min(820px, calc(100svh - 44px));

  display: grid;

  grid-template-rows: auto auto 1fr auto;

  background: transparent;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  border: none;

  box-shadow: none;

  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.hero-phrase{

  margin:0 0 18px;

  font-family:
    "Noto Serif SC",
    serif;

  font-size:1.55rem;

  line-height:1.25;

  color:
    rgba(58,36,22,.82);

  letter-spacing:.02em;

  font-weight:500;

  text-shadow:
    0 2px 18px rgba(90,45,20,.08);
}



.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 2rem);
  letter-spacing: -.04em;
}

.status-dot {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2c9c52;
  box-shadow: 0 0 0 6px rgba(44,156,82,.12);
}

.status-dot.loading {
  background: #c98627;
  box-shadow: 0 0 0 6px rgba(201,134,39,.13);
}

.status-dot.error {
  background: #b83b2e;
  box-shadow: 0 0 0 6px rgba(184,59,46,.12);
}


/* =========================================
   TCM CONTEXT ENGINE
========================================= */

.context-panel{

  padding:
    16px 18px 8px;

  border-bottom:
    1px solid rgba(120,80,50,.07);

  display:flex;
  flex-direction:column;
  gap:13px;

  background:
    linear-gradient(
      180deg,
      rgba(255,250,240,.14),
      rgba(255,248,242,.04)
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.context-group{

  display:grid;
  gap:8px;
}

.context-title{

  font-size:.72rem;
  line-height:1;

  color:
    rgba(58,36,22,.58);

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.context-options{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:10px;

  overflow:visible;

  padding-bottom:2px;
}

.context-options::-webkit-scrollbar{
  display:none;
}

.context-pill{

  flex:0 0 auto;

  min-width:auto;

  min-height:38px;

  padding:0 16px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.20);

  color:
    rgba(46,31,21,.72);

  font-size:.86rem;

  font-weight:700;

  background:
    rgba(255,255,255,.18);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.18),

    0 4px 12px rgba(120,80,50,.03);

  transition:

    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    background .18s ease;
}
.context-pill:hover{

  transform:
    translateY(-1px);

  color:
    rgba(36,27,20,.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 24px rgba(120,80,50,.08),
    0 0 18px rgba(255,255,255,.14);
}

.context-pill.active{

  color:#fff;

  border-color:
    rgba(255,226,232,.32);

  background:

    linear-gradient(
      145deg,
      #d88d99 0%,
      #cf7d8b 34%,
      #bb6171 100%
    );

  box-shadow:

    0 10px 24px rgba(201,109,126,.20),

    0 0 22px rgba(255,190,205,.14),

    inset 0 1px 0 rgba(255,255,255,.18);
}

.messages {

  padding:18px 22px 22px;

  overflow-y:auto;

  scroll-behavior:smooth;
}


/* =========================================
   MESSAGE WRAPPER
========================================= */

.message {

  width:fit-content;

  max-width:min(92%, 560px);

  margin:0 0 18px;

  padding:18px;

  border-radius:32px;

  background:

    linear-gradient(
      180deg,
      rgba(255,250,240,.14),
      rgba(255,248,242,.06)
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:

    0 10px 30px rgba(120,80,50,.03),

    inset 0 1px 0 rgba(255,255,255,.08);

  animation:
    popIn .18s ease-out;
}


/* =========================================
   TEXT
========================================= */

.message p {

  margin:0;

  white-space:pre-wrap;

  font-size:.96rem;

  line-height:1.55;
}


/* =========================================
   AI MESSAGE
========================================= */

.message.ai {

  background:
    rgba(255,255,255,.72);

  border:
    15px solid rgba(255,255,255,.02);

  background-clip:
    padding-box;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-radius:
    24px;

  padding:
    24px 22px;

  color:
    var(--ink);

  box-shadow:

    /* vnitřní světlo */
    inset 0 1px 0 rgba(255,255,255,.28),

    /* glass glow */
    0 0 18px rgba(255,255,255,.09),

    /* jemný mléčný rozptyl */
    0 0 40px rgba(255,255,255,.06),

    /* stín pod objektem */
    0 18px 40px rgba(120,80,50,.06);
}

/* =========================================
   USER MESSAGE
========================================= */

.message.user {

  margin-left:auto;

  background:

    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-dark)
    );

  color:#fff;

  box-shadow:

    0 12px 30px rgba(111,47,30,.19);
}


/* =========================================
   ERROR
========================================= */

.message.error {

  background:
    rgba(184,59,46,.09);

  border:
    1px solid rgba(184,59,46,.15);
}

.typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(36, 27, 20, .45);
  animation: dotPulse 1s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: .14s;
}

.typing span:nth-child(3) {
  animation-delay: .28s;
}

.chat-form {

  display:grid;

  grid-template-columns:1fr;

  gap:14px;

  padding:18px;

  border-top:
    1px solid rgba(120,80,50,.06);

  background:

    linear-gradient(
      180deg,
      rgba(255,250,240,.12),
      rgba(255,248,242,.04)
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-radius:
    28px;

  box-shadow:

    0 -8px 24px rgba(120,80,50,.03),

    inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================
   CHAT ACTIONS
========================================= */

.chat-actions{

  display:grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:16px;

  width:100%;

  align-items:stretch;
}




textarea {
  width: 100%;
  max-height: 132px;
  resize: none;
  border: 1px solid rgba(72, 46, 28, .13);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 15px 16px;
  font: inherit;
  line-height: 1.35;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

textarea:focus {
  border-color: rgba(143,63,38,.38);
  box-shadow:
    0 0 0 4px rgba(143,63,38,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}

button:not(.context-pill) {

  position:relative;

  overflow:hidden;

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:42px;

  padding:0 24px;

  border:1px solid rgba(255,220,228,.22);

  border-radius:22px;

  color:#fff;

  font-weight:700;

  font-size:1rem;

  font-family:inherit;

  cursor:pointer;

  background:

    linear-gradient(
      145deg,
      #d88d99 0%,
      #cf7d8b 32%,
      #c56f7c 68%,
      #b96069 100%
    );

  box-shadow:

    0 10px 24px rgba(201,109,126,.22),

    0 0 18px rgba(255,190,205,.14),

    inset 0 1px 0 rgba(255,255,255,.18);

  transition:

    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

button:not(.context-pill):hover {

  transform:
    translateY(-1px);

  filter:
    brightness(1.06);

  box-shadow:

    0 14px 30px rgba(201,109,126,.28),

    0 0 24px rgba(255,190,205,.18),

    inset 0 1px 0 rgba(255,255,255,.22);
}

button:not(.context-pill):disabled {

  cursor:not-allowed;

  opacity:.58;

  transform:none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.04); opacity: .96; }
}

@keyframes symbolFloat {
  0%, 100% { transform: translateY(-50%) rotate(-2deg); }
  50% { transform: translateY(calc(-50% - 14px)) rotate(1deg); }
}

@keyframes bonsaiFloat {
  0%, 100% { transform: translateY(0) rotate(.5deg); }
  50% { transform: translateY(-10px) rotate(-.6deg); }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(5px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dotPulse {
  0%, 80%, 100% { opacity: .32; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 720px) {
  body {
    overflow: hidden;
    background:
      radial-gradient(circle at 50% -12%, rgba(187,83,49,.18), transparent 38%),
      linear-gradient(135deg, #f5ead8, #e8d7bd);
  }

  .ink-symbol {
    left: 50%;
    top: 13%;
    transform: translateX(-50%);
    font-size: 10rem;
    opacity: .62;
  }

  .bonsai {
    display: none;
  }

  .app-shell {
    padding: 0;
    place-items: stretch;
  }

  .chat-card {
    width: 100%;
    height: 100svh;
    border: 0;
    border-radius: 0;
    background: rgba(255,250,240,.82);
    box-shadow: none;
  }

  .chat-header {
    padding: max(16px, env(safe-area-inset-top)) 18px 14px;
  }

  .context-panel{
    padding: 12px 12px 4px;
    gap:10px;
  }

  .context-pill{
    min-height:36px;
    padding:0 12px;
    font-size:.82rem;
  }

  .messages {
    padding: 14px 14px 10px;
  }

  .message {
    max-width: 94%;
    font-size: .94rem;
  }

  .chat-form {
    grid-template-columns: 1fr;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  }

  textarea {
    border-radius: 17px;
    min-height: 50px;
  }

  button {
    width: 100%;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}