/* Index page - fully modular CSS */

:root{
 --bg:#f8f8f8; --surface:#ffffff; --text:#0d0d0d; --text-secondary:#71717a;
 --border:#e4e4e7; --shadow-sm:01px2px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark){
 :root{ --bg:#0d0d0d; --surface:#171717; --text:#ececec; --text-secondary:#a1a1aa; --border:#27272a; --shadow-sm:01px2px rgba(0,0,0,0.25); }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{background:var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;overflow:hidden}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;width:100%}
main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom) +76px)}
.chat{max-width:768px;margin:0 auto;padding:16px20px;display:flex;flex-direction:column;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Welcome section styles (reuse naming used elsewhere for consistency) */
.bored-section{padding:32px16px}
.bored-container{max-width:600px;margin:0 auto;text-align:center;padding-top:20px}
.bored-title{font-size:28px;font-weight:700;color:var(--text);margin-bottom:8px}
.bored-description{font-size:16px;line-height:1.6;color:var(--text-secondary);margin-bottom:16px}