Add responsive design for phone and tablet screens

frontend/src/components/DevMenu.js

@@ -82,6 +82,12 @@ export default function DevMenu({
             >
               Freeform persona input
             </button>
+            <button disabled={!hasChat} className="dev-panel-download-item" onClick={() => { onDownloadChatTxt(); setOpen(false); }}>
+              Download chat as .txt
+            </button>
+            <button disabled={!hasChat} className="dev-panel-download-item" onClick={() => { onDownloadChatMd(); setOpen(false); }}>
+              Download chat as .md
+            </button>
             <button disabled={!hasApiLog} onClick={() => { onDownloadApiLog(); setOpen(false); }}>
               Download full API history
             </button>

frontend/src/styles/components.css

@@ -312,11 +312,7 @@
   resize: vertical;
 }
 
-@media (max-width: 900px) {
-  .persona-panels {
-    grid-template-columns: 1fr;
-  }
-}
+/* responsive rules consolidated below */
 
 /* ── Chat Area ─────────────────────────────────────────────────── */
 
@@ -386,12 +382,14 @@
 }
 
 .message-bubble {
-  max-width: 520px;
+  max-width: min(520px, 85%);
   padding: 12px 16px;
   border-radius: 16px;
   font-size: 14px;
   line-height: 1.6;
   box-shadow: var(--shadow-sm);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .message-bubble.bubble-a {
@@ -647,6 +645,10 @@
   font-style: italic;
 }
 
+.dev-panel-download-item {
+  display: none !important;
+}
+
 
 /* ── Orchestrator sub-menu ─────────────────────────────────────── */
 
@@ -776,15 +778,7 @@
   color: var(--text-muted);
 }
 
-@media (max-width: 600px) {
-  .dev-sub-panel {
-    right: 0;
-    top: 100%;
-    margin-right: 0;
-    margin-top: 4px;
-    width: 260px;
-  }
-}
+/* responsive rules consolidated below */
 
 /* ── Status / Loading ──────────────────────────────────────────── */
 
@@ -867,3 +861,158 @@
 .auth-login:hover {
   color: var(--text-primary);
 }
+
+/* ══════════════════════════════════════════════════════════════════
+   RESPONSIVE BREAKPOINTS
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ── Tablet (<900px) ──────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .persona-panels {
+    grid-template-columns: 1fr;
+  }
+  .persona-field textarea {
+    min-height: 60px;
+  }
+  .persona-field textarea.tall {
+    min-height: 80px;
+  }
+  .freeform-textarea {
+    min-height: 160px;
+  }
+  .accordion-header {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  .accordion-body.open {
+    padding: 12px 16px 16px;
+  }
+  .chat-controls {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .chat-controls input {
+    flex-basis: 100%;
+    font-size: 13px;
+  }
+  .message-row {
+    gap: 8px;
+  }
+  .avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+
+/* ── Small tablet / large phone (<600px) ──────────────────────── */
+@media (max-width: 600px) {
+  .dev-download-btns {
+    display: none;
+  }
+  .dev-panel-download-item {
+    display: block !important;
+  }
+  .dev-sub-panel {
+    right: 0;
+    top: 100%;
+    margin-right: 0;
+    margin-top: 4px;
+    width: min(280px, calc(100vw - 24px));
+  }
+  .dev-panel {
+    min-width: 200px;
+  }
+  .auth-badge {
+    font-size: 11px;
+    padding: 3px 6px;
+    gap: 4px;
+  }
+  .auth-remaining {
+    display: none;
+  }
+}
+
+/* ── Phone (<480px) ───────────────────────────────────────────── */
+@media (max-width: 480px) {
+  .persona-panels {
+    gap: 12px;
+  }
+  .persona-panel {
+    gap: 8px;
+  }
+  .persona-panel-header {
+    font-size: 13px;
+    padding-bottom: 6px;
+  }
+  .persona-field label {
+    font-size: 11px;
+  }
+  .persona-field input,
+  .persona-field textarea {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+  .persona-field textarea {
+    min-height: 50px;
+  }
+  .persona-field textarea.tall {
+    min-height: 60px;
+  }
+  .freeform-textarea {
+    min-height: 120px;
+  }
+  .accordion {
+    border-radius: 8px;
+    margin-bottom: 10px;
+  }
+  .accordion-header {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+  .accordion-body.open {
+    padding: 10px 12px 14px;
+  }
+  .chat-controls {
+    gap: 6px;
+    padding: 8px 0;
+  }
+  .btn-primary,
+  .btn-secondary,
+  .btn-stop {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+  .message-bubble {
+    padding: 10px 12px;
+    font-size: 13px;
+    border-radius: 12px;
+  }
+  .message-row {
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+  .avatar {
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
+  }
+  .system-message {
+    font-size: 13px;
+    padding: 8px;
+  }
+  .system-message.end-of-chat {
+    font-size: 14px;
+    padding: 14px;
+  }
+  .btn-sm {
+    padding: 5px 8px;
+    font-size: 11px;
+  }
+  .btn-ghost {
+    font-size: 12px;
+  }
+  .auth-badge {
+    display: none;
+  }
+}

frontend/src/styles/layout.css

@@ -1,7 +1,8 @@
 .app {
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .app-header {
@@ -12,8 +13,7 @@
   background: var(--card-bg);
   border-bottom: 1px solid var(--border-primary);
   box-shadow: var(--shadow-sm);
-  position: sticky;
-  top: 0;
+  flex-shrink: 0;
   z-index: 100;
   backdrop-filter: blur(12px);
 }
@@ -22,6 +22,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  min-width: 0;
 }
 
 .app-title {
@@ -31,12 +32,14 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  white-space: nowrap;
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .icon-btn {
@@ -61,6 +64,7 @@
 .app-main {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -76,31 +80,67 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  max-height: calc(100vh - 57px);
 }
 
 .content {
   flex: 1;
+  min-height: 0;
   padding: 20px 24px;
   overflow-y: auto;
-  max-height: calc(100vh - 57px);
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
+/* ── Tablet: stack sidebar above content ──────────────────────── */
 @media (max-width: 900px) {
+  .app {
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+  .app-header {
+    padding: 10px 16px;
+  }
   .app-main {
     flex-direction: column;
+    overflow: visible;
   }
   .sidebar {
     width: 100%;
     min-width: auto;
-    max-height: none;
+    max-height: 200px;
     border-right: none;
     border-bottom: 1px solid var(--border-primary);
   }
   .content {
-    max-height: none;
+    padding: 16px;
+    min-height: 0;
+    flex: 1;
+  }
+}
+
+/* ── Phone ────────────────────────────────────────────────────── */
+@media (max-width: 480px) {
+  .app-header {
+    padding: 8px 12px;
+    gap: 4px;
+  }
+  .app-title {
+    font-size: 15px;
+  }
+  .header-right {
+    gap: 4px;
+  }
+  .icon-btn {
+    width: 32px;
+    height: 32px;
+  }
+  .sidebar {
+    max-height: 160px;
+    padding: 8px;
+  }
+  .content {
+    padding: 12px;
   }
 }