modified: css/styles.css

	modified:   index.html

Author: Sushegaad

css/styles.css

@@ -309,7 +309,7 @@ input[type=range].vibe::-webkit-slider-thumb:hover {
 textarea.draft {
   width: 100%; min-height: 42vh; resize: none; border: none; outline: none;
   background: var(--bg); color: var(--text-1);
-  font-family: inherit; font-size: 17px; line-height: 1.8; font-weight: 450;
+  font-family: inherit; font-size: 14px; line-height: 1.8; font-weight: 450;
   padding: 20px 24px; overflow-y: auto;
   /* fill parent flex container */
   flex: 1;
@@ -356,7 +356,7 @@ textarea.draft::placeholder { color: var(--text-3); line-height: 1.9; font-weigh
 .heatmap-layer {
   display: none;
   width: 100%; min-height: 42vh;
-  padding: 20px 24px; font-family: inherit; font-size: 17px; line-height: 1.8;
+  padding: 20px 24px; font-family: inherit; font-size: 14px; line-height: 1.8;
   color: var(--text-1); white-space: pre-wrap; word-wrap: break-word;
   background: var(--bg);
 }
@@ -439,7 +439,7 @@ textarea.draft::placeholder { color: var(--text-3); line-height: 1.9; font-weigh
 }
 .var-card-name { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
 .var-card-tag  { font-size: 11px; color: var(--text-2); }
-.var-text      { font-size: 17px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; font-weight: 420; }
+.var-text      { font-size: 14px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; font-weight: 420; }
 
 /* ── Empty State ─────────────────────────────────────────── */
 .empty {
@@ -491,13 +491,32 @@ body.dark .loading-mask { background: rgba(12,14,20,0.85); }
   border-left: 1px solid var(--border);
 }
 
-/* Collapsed: zero width, invisible */
+/* Collapsed: narrow 32px strip — button stays visible for re-expanding */
 .pane-coaching.collapsed {
-  width: 0 !important;
-  border-left: none;
+  width: 32px !important;
+  border-left: 1px solid var(--border);
+}
+
+/* When collapsed, hide everything except the toggle button */
+.pane-coaching.collapsed .pane-title,
+.pane-coaching.collapsed #scorePreview,
+.pane-coaching.collapsed .why-body {
+  display: none !important;
+}
+.pane-coaching.collapsed .pane-head {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: none;
+  height: 100%;
+}
+.pane-coaching.collapsed .pane-actions {
+  width: 100%;
+  justify-content: center;
 }
 
-/* Collapse toggle button arrow direction */
+/* Collapse/expand toggle button */
 .coach-collapse-btn { font-size: 11px; }
 
 /* Why-panel body — always visible (no open/close toggle needed) */
@@ -723,6 +742,20 @@ select.form-sel option { background: var(--surface); color: var(--text-1); }
   .pane-coaching.collapsed {
     width: 100% !important;
     height: 44px !important; /* show header only */
+    border-left: none;
+  }
+  /* On mobile, restore all header children when collapsed (height-based, not width-based) */
+  .pane-coaching.collapsed .pane-title,
+  .pane-coaching.collapsed #scorePreview {
+    display: flex !important;
+  }
+  .pane-coaching.collapsed .pane-head {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    height: auto;
+    border-bottom: 1px solid var(--border);
   }
 
   /* Show expand icon pointing down on mobile (panel stacks below) */
@@ -784,8 +817,8 @@ select.form-sel option { background: var(--surface); color: var(--text-1); }
 
   /* Input pane: min-height reduced for phone */
   .pane-input { min-height: 200px; }
-  textarea.draft { font-size: 15px; min-height: 160px; }
-  .heatmap-layer { font-size: 15px; min-height: 160px; }
+  textarea.draft { font-size: 13px; min-height: 160px; }
+  .heatmap-layer { font-size: 13px; min-height: 160px; }
 
   /* Pane head: tighter */
   .pane-head { padding: 8px 12px; }
@@ -814,7 +847,7 @@ select.form-sel option { background: var(--surface); color: var(--text-1); }
   .var-tab   { font-size: 9px; white-space: nowrap; }
 
   /* Output text: slightly smaller */
-  .var-text { font-size: 15px; }
+  .var-text { font-size: 13px; }
 
   /* Score cards: smaller */
   .score-card { min-width: 76px; padding: 8px 10px; }

index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="google-site-verification" content="ngS8wu36B4P3ZyQBK7Q8rlwMd53-rFN55y8IFsFVApw" />
   <title>ClearVoice — AI Communication Coach</title>
   <meta name="description" content="AI-powered writing coach with tone heatmap, 3-variation rewrites, and coaching insights. Powered by Claude or GPT-4.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -430,10 +431,12 @@ <h3>Ready to Elevate Your Writing</h3>
 function toggleCoachPanel() {
   const panel   = document.getElementById('whyPanel');
   const btn     = document.getElementById('coachCollapseBtn');
-  const divider = document.getElementById('outputDivider');
   const collapsed = panel.classList.toggle('collapsed');
-  if (btn) { btn.textContent = collapsed ? '▶' : '◀'; btn.title = collapsed ? 'Expand coaching panel' : 'Collapse coaching panel'; }
-  if (divider) divider.style.display = collapsed ? 'none' : '';
+  if (btn) {
+    btn.textContent = collapsed ? '▶' : '◀';
+    btn.title = collapsed ? 'Expand coaching panel' : 'Collapse coaching panel';
+  }
+  // Keep divider visible so user can see the boundary of the collapsed strip
 }
 </script>