/* static/style.css */
:root{
  --primary:#2b6cb0;
  --bg:#f7fafc;
  --text:#1a202c;
}
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);}

.topbar{
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  padding:12px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.container{max-width:960px;margin:40px auto;padding:0 16px;}

.btn{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
}
.btn:hover{opacity:.9;}
.btn.wide{width:100%;margin-top:24px;}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px;
}
.card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  overflow:hidden;
  cursor:pointer;
  text-align:center;
  transition:transform .15s;
}
.card:hover{transform:translateY(-4px);}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  background:#e2e8f0;
}
.card span{display:block;padding:12px;font-weight:600;}

.chat-frame{max-width:720px;margin:40px auto;padding:0 16px;}
.chat-box{
  height:420px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #e2e8f0;
  padding:12px;
  border-radius:8px;
}
.input-row{display:flex;gap:8px;margin-top:12px;}
.input-row input{
  flex:1;
  padding:10px 12px;
  border:1px solid #cbd5e0;
  border-radius:8px;
}
.message{margin-bottom:10px;}
.message.user{text-align:right;}
.avatar{
  display:block;
  margin:16px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  background:#e2e8f0;
}
.error{color:#e53e3e;text-align:center;margin-top:32px;}