/* AlexandraBot — frontend draft styles (works with Tailwind CDN) */

:root {
  --radius: 18px;
}

html, body {
  height: 100%;
}

.navlink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 0.9rem;
  font-size: 0.95rem;
  color: rgba(26,27,30,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.55);
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.navlink:hover{
  background: rgba(255,255,255,0.80);
}
.navlink.is-active{
  color: rgba(26,27,30,1);
  background: rgba(182,217,90,0.35);
  border-color: rgba(167,201,87,0.35);
}

/* card helpers */
.card{
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.70);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(14, 30, 37, 0.08);
}

.sticker{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* nice scrollbar for chat */
.chat-scroll::-webkit-scrollbar{
  width: 10px;
}
.chat-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}
.chat-scroll::-webkit-scrollbar-track{
  background: transparent;
}

input[type="date"]{
  color-scheme: light;
}

/* small "grain" feel (subtle) */
.grain{
  position: relative;
}
.grain::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}