Improve phone

frontend/src/styles.css

@@ -503,7 +503,18 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .lesson-asset-actions button {
   padding: 0.6rem 0.8rem;
 }
-.lesson-asset-view img {
+.lesson-asset-open {
+  min-height: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0;
+  background: transparent;
+  color: #14213d;
+  border: none;
+}
+.lesson-asset-open img {
   width: 100%;
   min-height: 0;
   flex: 1 1 auto;
@@ -512,6 +523,43 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border-radius: 14px;
   background: white;
 }
+.lesson-asset-open span {
+  display: none;
+  color: #2563eb;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+.asset-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: #f5f7fb;
+}
+.asset-fullscreen-bar,
+.asset-fullscreen-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.asset-fullscreen-stage {
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid #dbeafe;
+  border-radius: 16px;
+  background: white;
+}
+.asset-fullscreen-stage img {
+  display: block;
+  width: max(100%, 980px);
+  height: auto;
+  min-height: 100%;
+  object-fit: contain;
+}
 .lesson-bubble {
   min-height: 68px;
 }
@@ -746,21 +794,50 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   }
 
   .teacher-transcript {
-    max-height: 3.1rem;
-    font-size: 1rem;
+    max-height: 2.7rem;
+    font-size: 0.95rem;
   }
 
   .lesson-display-head,
   .lesson-asset-toolbar {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 0.4rem;
+    align-items: center;
+    flex-direction: row;
+    gap: 0.5rem;
   }
 
   .lesson-asset-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .lesson-asset-actions button {
+    padding: 0.45rem 0.55rem;
+    font-size: 0.86rem;
+  }
+
+  .lesson-asset-toolbar strong {
+    font-size: 0.95rem;
+  }
+
+  .lesson-asset-open span {
+    display: block;
+  }
+
+  .lesson-asset-open img {
+    max-height: 24dvh;
+  }
+
+  .asset-fullscreen {
+    padding: 0.5rem;
+  }
+
+  .asset-fullscreen-stage img {
+    width: max(100%, 1120px);
+  }
+
+  .asset-fullscreen-controls {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
   }
 
   .lesson-composer {