/* Babel Mesh Chat: the same page with the Babel palette (mint on off-black, as the website), and the mirror
   image of what app.css writes with a physical side, for the languages written from right to left. */
:root { --accent: #19c9a3; --accent-ink: #04231c; --accent-text: #0a7a64; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-text: #3ee0b8; } }
:root[data-theme="dark"] { --accent-text: #3ee0b8; }
.brand .grow { flex: 1; }
.langsel { max-width: 12em; }

[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--accent); }
[dir="rtl"] .side { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .conv .title { text-align: right; }
[dir="rtl"] .bubble ul, [dir="rtl"] .bubble ol { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .bubble blockquote { border-left: 0; border-right: 3px solid var(--line); }
[dir="rtl"] .bubble th, [dir="rtl"] .bubble td { text-align: right; }
[dir="rtl"] .bubble .thought-text { padding-left: 0; padding-right: 10px; border-left: 0; border-right: 2px solid var(--line); }
/* code, the key, and the address fields read from the left in every language */
[dir="rtl"] .bubble pre, [dir="rtl"] .codeblock, [dir="rtl"] code, [dir="rtl"] input[type="password"], [dir="rtl"] input[type="search"].key { direction: ltr; text-align: left; }
@media (max-width: 800px) {
  [dir="rtl"] .side { inset: 0 0 0 auto; transform: translateX(100%); }
  [dir="rtl"] .shell.open .side { transform: none; }
}