style(studio): chat bar floating with rounded corners, sidebar text larger and more visible

packages/studio/src/components/ChatBar.tsx

@@ -118,7 +118,7 @@ export function ChatBar({ t, sse }: {
     : "Tell InkOS what to do...";
 
   return (
-    <div className="border-t border-border/20 bg-card/60 backdrop-blur-md">
+    <div className="border-t border-border/20 bg-card/60 backdrop-blur-md mx-4 mb-3 rounded-lg">
       {/* Expanded message area */}
       {expanded && messages.length > 0 && (
         <div className="max-w-3xl mx-auto">

packages/studio/src/components/Sidebar.tsx

@@ -39,7 +39,7 @@ export function Sidebar({ nav, activePage, t }: {
       {/* Books section */}
       <div className="flex-1 px-4">
         <div className="px-2 mb-3 flex items-center justify-between">
-          <span className="text-[10px] uppercase tracking-[0.15em] text-muted-foreground/40 font-medium">{t("nav.books")}</span>
+          <span className="text-[11px] uppercase tracking-[0.12em] text-muted-foreground/60 font-medium">{t("nav.books")}</span>
           <button
             onClick={nav.toBookCreate}
             className="w-5 h-5 flex items-center justify-center rounded text-[11px] text-muted-foreground/40 hover:text-primary hover:bg-primary/10 transition-all"
@@ -53,10 +53,10 @@ export function Sidebar({ nav, activePage, t }: {
             <button
               key={book.id}
               onClick={() => nav.toBook(book.id)}
-              className={`w-full text-left px-3 py-2 rounded-md text-[13px] truncate transition-all duration-150 ${
+              className={`w-full text-left px-3 py-2 rounded-md text-sm truncate transition-all duration-150 ${
                 activePage === `book:${book.id}`
                   ? "bg-primary/10 text-primary font-medium"
-                  : "text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                  : "text-foreground/60 hover:text-foreground hover:bg-muted/40"
               }`}
             >
               {book.title}
@@ -64,7 +64,7 @@ export function Sidebar({ nav, activePage, t }: {
           ))}
 
           {(!data?.books || data.books.length === 0) && (
-            <div className="px-3 py-4 text-[11px] text-muted-foreground/30 italic leading-relaxed">
+            <div className="px-3 py-4 text-xs text-muted-foreground/50 italic leading-relaxed">
               {t("dash.noBooks")}
             </div>
           )}
@@ -109,13 +109,13 @@ function SidebarItem({ label, icon, active, onClick, badge, badgeColor }: {
   return (
     <button
       onClick={onClick}
-      className={`w-full text-left px-3 py-2 rounded-md text-[13px] flex items-center gap-2.5 transition-all duration-150 ${
+      className={`w-full text-left px-3 py-2 rounded-md text-sm flex items-center gap-2.5 transition-all duration-150 ${
         active
           ? "bg-secondary text-foreground font-medium"
-          : "text-muted-foreground hover:text-foreground hover:bg-muted/40"
+          : "text-foreground/50 hover:text-foreground hover:bg-muted/40"
       }`}
     >
-      <span className="text-[11px] w-4 text-center opacity-40">{icon}</span>
+      <span className="text-xs w-4 text-center opacity-50">{icon}</span>
       <span className="flex-1">{label}</span>
       {badge && <span className={`text-[9px] ${badgeColor ?? ""}`}>{badge}</span>}
     </button>