add basic layout

dist/index.css

@@ -2,3 +2,66 @@
 [unread] {
   border-left: 10px solid var(--text-warn);
 }
+:root {
+  --thread-view-height-with-tools: 8rem;
+  --thread-view-width-with-tools: 20rem;
+  --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
+}
+#message-tab {
+  flex-direction: column;
+}
+.message-tab-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.chat-tool-view {
+  display: none;
+}
+[showingchattools] :is(.thread-view, .chat-tool-view) {
+  overflow: scroll;
+  position: absolute;
+  padding: 0px;
+}
+[showingchattools] header {
+  border-bottom: 1px solid var(--border);
+}
+[showingchattools] .chat-tool-view {
+  display: flex;
+  top: var(--header-height);
+  bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line));
+  border-bottom: 1px solid var(--border);
+}
+[showingchattools] .thread-view {
+  display: flex;
+  height: var(--thread-view-height-with-tools);
+  top: unset;
+  bottom: var(--footer-top-line);
+  flex: 1;
+}
+@media (max-height: 700px) and (min-width: 640px) {
+  main.split:has([showingchattools]) {
+    display: flex;
+  }
+  main.split:has([showingchattools]) #settings-tab {
+    display: none;
+  }
+}
+@media (min-width: 1400px) or ((max-height: 700px) and (min-width: 640px)) {
+  [showingchattools] :is(.thread-view, .chat-tool-view) {
+    top: var(--header-height);
+    bottom: var(--footer-top-line);
+  }
+  [showingchattools] .chat-tool-view {
+    left: 0px;
+    right: var(--thread-view-width-with-tools);
+    border-bottom: none;
+    border-right: 1px solid var(--border);
+  }
+  [showingchattools] .thread-view {
+    display: flex;
+    left: unset;
+    right: 0px;
+    height: unset;
+    width: var(--thread-view-width-with-tools);
+  }
+}