feat(ui): add tab navigation system for desktop and mobile

Desktop (2 tabs):
- Status tab: User Stats + Info Box + Character Thoughts
- Inventory tab: Inventory system (dedicated space)

Mobile (3 tabs):
- Stats tab: User Stats only
- Info tab: Info Box + Character Thoughts
- Inventory tab: Inventory only

Features:
- Created desktop.js module for desktop tab management
- Updated mobile.js to use 3-tab structure (more breathing room on small screens)
- Added CSS styling for desktop tabs (hover states, active indicators)
- Implemented viewport transition handlers (desktop ↔ mobile)
- Tabs replace dividers (cleaner visual separation)
- Character thoughts can now expand to fill vertical space

This resolves the cramped 4-section panel issue by organizing content into logical tabs on both desktop and mobile.

style.css

@@ -4109,6 +4109,81 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     color: white;
 }
 
+/* ============================================
+   DESKTOP TABS SYSTEM
+   ============================================ */
+
+/* Desktop tabs container */
+.rpg-tabs-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    height: 100%;
+    width: 100%;
+}
+
+/* Desktop tab navigation */
+.rpg-tabs-nav {
+    display: flex;
+    gap: 0;
+    background: var(--SmartThemeBlurTintColor);
+    border-bottom: 2px solid var(--SmartThemeBorderColor);
+    margin-bottom: 1rem;
+}
+
+/* Desktop tab button */
+.rpg-tab-btn {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--SmartThemeBodyColor);
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.rpg-tab-btn:hover {
+    background: var(--SmartThemeQuoteColor);
+    color: var(--ac-style-color-matchedText);
+}
+
+.rpg-tab-btn.active {
+    background: var(--SmartThemeQuoteColor);
+    border-bottom-color: var(--ac-style-color-matchedText);
+    color: var(--ac-style-color-matchedText);
+}
+
+.rpg-tab-btn i {
+    font-size: 1.1rem;
+}
+
+/* Desktop tab content */
+.rpg-tab-content {
+    display: none;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 0.5rem;
+    flex: 1;
+}
+
+.rpg-tab-content.active {
+    display: flex;
+}
+
+/* Hide dividers when tabs are active (tabs separate content) */
+.rpg-tabs-container .rpg-divider {
+    display: none;
+}
+
 /* Mobile Responsive Styles */
 @media (max-width: 768px) {
     .rpg-inventory-subtabs {