.chat-web-shell * {
  box-sizing:border-box
}
.chat-web-page {
  margin:0;
  height:100%;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-sans)
}
.chat-web-shell button,.chat-web-shell textarea {
  font:inherit
}
.chat-web-shell button,.chat-web-shell a,.chat-web-shell textarea {
  touch-action:manipulation
}
.chat-web-shell button {
  cursor:pointer
}
.chat-web-shell button:disabled {
  cursor:default;
  opacity:.5
}
.chat-web-shell [hidden] {
  display:none!important
}
.chat-web-shell :focus-visible {
  outline:2px solid hsl(var(--ring));
  outline-offset:4px
}
#app,.chat-web-shell {
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-sans);
  height:100%;
  height:var(--chat-viewport-height, 100dvh);
  display:flex;
  flex-direction:column
}
.chat-header {
  height:68px;
  flex-shrink:0;
  background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-lg)
}
.brand {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--kivi-text-card-title)
}
.brand-mark {
  display:block;
  width:21px;
  height:32px;
  flex-shrink:0
}
.menu-wrap {
  position:relative
}
.menu-toggle {
  background:none;
  border:0;
  color:inherit;
  font-size:var(--kivi-text-card-title);
  width:44px;
  height:44px;
  display:grid;
  place-items:center
}
.menu {
  position:absolute;
  right:0;
  top:100%;
  min-width:230px;
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  padding:var(--space-2xs);
  z-index:5;
  box-shadow:0 6px 24px hsl(var(--foreground)/.12)
}
.chat-web-shell .menu button {
  display:block;
  width:100%;
  border:0;
  background:none;
  text-align:left;
  color:hsl(var(--foreground));
  padding:var(--space-sm);
  border-radius:var(--radius)
}
.chat-web-shell .menu button:hover {
  background:hsl(var(--muted))
}
.chat-main {
  width:100%;
  max-width:760px;
  min-height:0;
  margin:0 auto;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--space-lg);
  scroll-behavior:smooth
}
.welcome {
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-bottom:var(--space-2xl)
}
.chat-web-shell h1 {
  font-family:var(--font-heading);
  font-size:var(--kivi-text-display-sm);
  line-height:1.3;
  margin:0 0 var(--space-md);
  font-weight:600
}
.welcome p {
  max-width:420px;
  color:hsl(var(--muted-foreground));
  line-height:1.6;
  margin:0
}
.thread-title {
  font-family:var(--font-heading);
  font-size:var(--kivi-text-section-title);
  text-align:center;
  margin:var(--space-xs) 0 var(--space-xl)
}
.message {
  max-width:90%;
  width:fit-content;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius)*1.6);
  background:hsl(var(--card));
  padding:var(--space-sm) var(--space-md);
  margin:0 0 var(--space-lg);
  overflow-wrap:anywhere;
  line-height:1.55;
  white-space:pre-wrap
}
.message.user {
  margin-left:auto
}
.message.assistant {
  animation:chat-arrive 180ms ease-out
}
.message strong {
  display:block;
  margin-bottom:var(--space-3xs)
}
.message p {
  margin:0
}
.message ul {
  margin:var(--space-2xs) 0 0;
  padding-left:var(--space-lg)
}
.chat-web-shell a {
  color:inherit;
  text-underline-offset:3px;
  font-weight:600
}
.loading {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  margin:var(--space-md) 0 var(--space-lg);
  padding:var(--space-xs) var(--space-sm)
}
.loading .brand-mark {
  animation:chat-breathe 1.4s ease-in-out infinite
}
.composer-area {
  flex-shrink:0;
  width:100%;
  max-width:760px;
  margin:auto;
  padding:var(--space-sm) var(--space-lg) max(var(--space-lg),env(safe-area-inset-bottom));
  background:hsl(var(--background))
}
.composer {
  display:flex;
  align-items:flex-end;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius)*1.6);
  background:hsl(var(--card));
  padding:var(--space-2xs);
  gap:var(--space-xs)
}
.chat-web-shell textarea {
  display:block;
  flex:1;
  min-width:0;
  max-height:144px;
  resize:none;
  border:0;
  background:transparent;
  color:inherit;
  line-height:1.5;
  padding:var(--space-xs);
  outline-offset:0
}
.composer:focus-within {
  outline:2px solid hsl(var(--ring));
  outline-offset:3px
}
.chat-web-shell textarea:focus-visible {
  outline:none
}
.chat-web-shell textarea::placeholder {
  color:hsl(var(--muted-foreground))
}
.send {
  display:grid;
  place-items:center;
  height:44px;
  width:44px;
  flex-shrink:0;
  border:0;
  border-radius:var(--radius);
  background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
  font-size:var(--kivi-text-card-title)
}
.send:hover {
  filter:brightness(1.15)
}
.error {
  line-height:1.5;
  padding:var(--space-xs) 0
}
.retry {
  background:hsl(var(--card));
  color:inherit;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  padding:var(--space-xs) var(--space-md);
  margin-left:var(--space-xs)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
@keyframes chat-breathe {
  0%,100% {
    opacity:.55;
    transform:scale(.9)
  }
  50% {
    opacity:1;
    transform:scale(1.08)
  }
}
@keyframes chat-arrive {
  from {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1280px) {
  .chat-header {
    padding-left:var(--space-xl);
    padding-right:var(--space-xl)
  }
  .chat-main {
    padding-top:var(--space-xl)
  }
}
@media(max-width:480px) {
  .chat-header {
    height:60px;
    padding:0 var(--space-md)
  }
  .chat-main {
    padding:var(--space-lg) var(--space-md)
  }
  .composer-area {
    padding-left:var(--space-sm);
    padding-right:var(--space-sm)
  }
  .chat-web-shell h1 {
    font-size:var(--kivi-text-page-title)
  }
  .message {
    max-width:94%
  }
}
@media(prefers-reduced-motion:reduce) {
  .chat-web-shell *,.chat-web-shell *::before,.chat-web-shell *::after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
  }
}