/* AIpen comprehensive styles */
:root{ --brand:#0066cc; --bg:#f6f8fb; --muted:#6c757d; }
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background:var(--bg); color:#0f1720; margin:0;}
.logo{height:36px}
.card{border-radius:12px}
.sidebar{background:#fff}
#chatArea{ height: calc(100vh - 260px); overflow:auto; padding:1rem; background:linear-gradient(180deg,#f8fafc,#ffffff); }
@media (max-width:767px){ #chatArea{ height: calc(100vh - 200px); } #inputBar{ position: fixed; left:0; right:0; bottom:0; z-index:1050; padding:0.8rem; border-top:1px solid #e9ecef; } #chatAreaWrap{ padding-bottom:120px; } }
.message{ margin-bottom:1rem; display:flex; gap:0.75rem; align-items:flex-end; }
.message.user{ justify-content:flex-end }
.bubble{ max-width:85%; padding:12px 14px; border-radius:12px; line-height:1.4; word-break:break-word; white-space:pre-wrap; }
.message.user .bubble{ background: linear-gradient(90deg,var(--brand),#0056a3); color:white; border-bottom-right-radius:4px; }
.message.ai .bubble{ background:#f1f5f9; color:#0b1220; border-bottom-left-radius:4px; }
.meta{ font-size:0.85rem; color:var(--muted); margin-bottom:6px; }
.typing-dots{ display:inline-block }
.typing-dots span{ display:inline-block; width:.45rem; height:.45rem; margin:.08rem; border-radius:50%; opacity:.35; background:#333; animation:blink 1s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.12s } .typing-dots span:nth-child(3){ animation-delay:.24s }
@keyframes blink{0%{opacity:.25}50%{opacity:1}100%{opacity:.25} }
.controls{ display:flex; gap:6px; margin-top:6px; }
.small-muted{ font-size:0.85rem; color:var(--muted); }