/* =========================================================
   layout.css — structural positioning: the app shell, header,
   smiley stage, scroll area and composer. Visual styling of
   the things that live inside them (bubbles, chips, file
   cards) is in components.css.
   ========================================================= */

/* ---------- app shell ---------- */
.app{
  max-width:768px;
  width:100%;
  flex:1;
  min-height:0;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* ---------- header ---------- */
.top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:2;
  background:transparent;
  backdrop-filter:blur(2px);
}
.brand{
  font-family:var(--font-mono);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.brand-name{
  font-size:16px;
  font-weight:400;
  color:var(--accent);
}
.brand-version{
  font-size:12px;
  color:var(--accent-soft);
}

/* ---------- smiley ---------- */
#smiley {
  width: min(160px, 160px);
  height: min(160px, 160px);
  position: relative;
  align-self:center;
}
#smiley svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- chat scroll ---------- */
.chat-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:88px 24px 120px; /* top: clears the floating header; bottom: clears the composer */
  display:flex;
  flex-direction:column;
  gap:16px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  position:relative;
}
.chat-scroll::-webkit-scrollbar{
  display:none;
}

/* ---------- composer ---------- */
.composer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  gap:12px;
  align-items:center;
  padding:1px 20px calc(44px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
  backdrop-filter:blur(2px);
  z-index:1;
}
.composer input{
  flex:1;
  border:1px solid var(--accent-soft);
  background:var(--bubble);
  opacity:0.8;
  color:var(--text);
  border-radius:var(--radius-pill);
  padding:12px 16px;
  font-family:var(--font-body);
  font-size:16px;
}
.composer input::placeholder{
  color:var(--muted);
}
.composer input:focus{
  outline:none;
  border-color:var(--accent);
}
.composer button{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}
.composer button svg{
  width:22px;
  height:22px;
  stroke-width:1.5;
}
.composer button:hover{
  background:var(--accent-dim);
}