CT/dist/index.css

/* src/styles.css */
[unread] {
  border-left: 10px solid var(--text-warning);
}
: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-object-view {
  display: none;
}
#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
  overflow: scroll;
  position: absolute;
  padding: 0px;
}
#message-tab:has([showingchattools]) header {
  border-bottom: 1px solid var(--border);
}
#message-tab:has([showingchattools]) .chat-object-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);
}
#message-tab:has([showingchattools]) .thread-view {
  display: flex;
  height: var(--thread-view-height-with-tools);
  top: unset;
  bottom: var(--footer-top-line);
  flex: 1;
}
@media (min-width: 640px) and (max-width: 1400px) {
  main.split:has(#message-tab [showingchattools]) {
    display: flex;
  }
  main.split:has(#message-tab [showingchattools]) #settings-tab {
    display: none;
  }
}
@media (min-width: 640px) {
  #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
    top: var(--header-height);
    bottom: var(--footer-top-line);
  }
  #message-tab:has([showingchattools]) .chat-object-view {
    left: 0px;
    right: var(--thread-view-width-with-tools);
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  #message-tab:has([showingchattools]) .thread-view {
    display: flex;
    left: unset;
    right: 0px;
    height: unset;
    width: var(--thread-view-width-with-tools);
  }
}