:root {
    color-scheme: dark;
    --chat-viewport-height: 100vh;
    --chat-viewport-top: 0px;

    --clr-white: #e0e0e0;
    --clr-black: #1e1e1e;
    --clr-blue: steelblue;
    --clr-green: mediumseagreen;
    --clr-orange: lightsalmon;

    --clr-text-light2: #e0e0e0;
    --clr-text-light: #d0d0d0;
    --clr-text: #c0c0c0;
    --clr-text-mid: #a0a0a0;
    --clr-text-dark: #808080;
    --clr-text-dark2: #707070;
    --clr-text-dark3: #606060;
    --clr-text-menu: var(--clr-text);

    --clr-back-light3: #6b6b6b;
    --clr-back-light2: #4b4b4b;
    --clr-back-light: #3b3b3b;
    --clr-back-menu: var(--clr-back-light);
    --clr-back: #2b2b2b;
    --clr-back-darker: #282828;
    --clr-back-dark: #222222;
    --clr-back-dark1: #1C1C1C;
    --clr-back-dark2: #181818;
    --clr-back-active: color-mix(in srgb, var(--clr-back-light) 96%, var(--clr-blue));
    --clr-back-blue: color-mix(in srgb, var(--clr-back-light) 96%, var(--clr-blue));
    --clr-back-blue-dark: color-mix(in srgb, var(--clr-back) 96%, var(--clr-blue));

    --clr-border-static: #555;
    --clr-border: #4e4e4e;
    --clr-border-light: #666;
    --clr-border-hover: #6e6e6e;
    --clr-border-focus: #808080;
}

@font-face {
    font-family: "Nunito";
    src: url("/static/lib/fonts/Nunito-all.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--clr-back);
    color: var(--clr-text);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-synthesis: none;
    overflow: hidden;
}

h1, h2, h3, h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

input,
textarea,
select,
button {
    border: none !important;
    outline: none !important;
    border-radius: 3px;
    background: var(--clr-back-light);
    color: var(--clr-text-light);
    font: inherit;
    line-height: 1;
}

input,
textarea,
select {
    padding: 0.45rem 0.55rem;
    background: var(--clr-back-dark);
    box-shadow: 0 0 0 1px var(--clr-border);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    color: var(--clr-text-dark);
    background-color: var(--clr-back-darker);
}

textarea {
    display: block;
    line-height: 1.25;
    resize: none;
    overflow-y: hidden;
}

button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 1px;
    padding: 4px 8px;
    box-shadow: 0 0 0 1px var(--clr-border);
    cursor: pointer;
    transition: box-shadow 0.1s ease;
}

button:hover {
    background: var(--clr-back-light2);
    color: var(--clr-text-light2);
    box-shadow: 0 0 0 1px var(--clr-border-hover);
}

button.icon { padding: 4px 5px; }
a.btn.icon { padding: 4px 5px; }

.dframe {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--clr-border);
}

.hidden,
[hidden] {
    display: none !important;
}

.noborder {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.boxborder,
.boxsize {
    box-sizing: border-box;
}

.vcenter-items {
    display: inline-flex;
    align-items: center;
}

.nowrap,
.nobreak {
    white-space: nowrap;
}

.wrap {
    white-space: normal;
}

.ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pointer {
    cursor: pointer;
}

.row { display: flex; align-items: center; }
.row.inline { display: inline-flex; }
.row.wrap, .row.wrp { flex-wrap: wrap; }
.row.l, .row.left    { justify-content: flex-start; }
.row.r, .row.right   { justify-content: flex-end; }
.row.c, .row.center  { justify-content: center; }
.row.j, .row.justify { justify-content: space-between; }
.row.e, .row.evenly  { justify-content: space-evenly; }
.row.t, .row.top     { align-items: flex-start; }
.row.b, .row.bottom  { align-items: flex-end; }
.row.cg3  { column-gap: 3rem; }
.row.cg25 { column-gap: 2.5rem; }
.row.cg2  { column-gap: 2rem; }
.row.cg15 { column-gap: 1.5rem; }
.row.cg1  { column-gap: 1rem; }
.row.cg07 { column-gap: 0.7rem; }
.row.cg05 { column-gap: 0.5rem; }
.row.cg04 { column-gap: 0.4rem; }
.row.cg03 { column-gap: 0.3rem; }
.row.cg02 { column-gap: 0.2rem; }
.row.cg01 { column-gap: 0.1rem; }
.row.g1,  .row.gap1   { gap: 1rem; }
.row.g07, .row.gap07  { gap: 0.7rem; }
.row.g05, .row.gap05  { gap: 0.5rem; }
.row.g04, .row.gap04  { gap: 0.4rem; }
.row.g03, .row.gap03  { gap: 0.3rem; }
.row.g02, .row.gap02  { gap: 0.2rem; }
.row.g01, .row.gap01  { gap: 0.1rem; }

.col { display: flex; flex-direction: column; }
.col.inline { display: inline-flex; }
.col.wrap, .col.wrp { flex-wrap: wrap; }
.col.l, .col.left    { align-items: flex-start; }
.col.r, .col.right   { align-items: flex-end; }
.col.c, .col.center  { align-items: center; }
.col.j, .col.justify { justify-content: space-between; }
.col.e, .col.evenly  { justify-content: space-evenly; }
.col.t,   .col.top    { justify-content: flex-start; }
.col.b,   .col.bottom { justify-content: flex-end; }
.col.eq > *, .col.equal > * { flex: 1 1 0; }
.col.rg3   { row-gap: 3rem; }
.col.rg25  { row-gap: 2.5rem; }
.col.rg2   { row-gap: 2rem; }
.col.rg15  { row-gap: 1.5rem; }
.col.rg1   { row-gap: 1rem; }
.col.rg07  { row-gap: 0.7rem; }
.col.rg05  { row-gap: 0.5rem; }
.col.rg04  { row-gap: 0.4rem; }
.col.rg03  { row-gap: 0.3rem; }
.col.rg02  { row-gap: 0.2rem; }
.col.rg01  { row-gap: 0.1rem; }
.col.rg0   { row-gap: 0; }
.col.g1,  .col.gap1   { gap: 1rem; }
.col.g07, .col.gap07  { gap: 0.7rem; }
.col.g05, .col.gap05  { gap: 0.5rem; }
.col.g04, .col.gap04  { gap: 0.4rem; }
.col.g03, .col.gap03  { gap: 0.3rem; }
.col.g02, .col.gap02  { gap: 0.2rem; }
.col.g01, .col.gap01  { gap: 0.1rem; }
.col.g0,  .col.gap0   { gap: 0; }

.huge    { font-size: xx-large; }
.xxlarge { font-size: xx-large; }
.xlarge  { font-size: x-large; }
.large   { font-size: large; }
.larger  { font-size: larger; }
.medium  { font-size: medium; }
.small   { font-size: small; }
.smaller { font-size: smaller; }
.xsmall  { font-size: x-small; }
.xxsmall { font-size: xx-small; }
.sz90    { font-size: 90%; }
.sz85    { font-size: 85%; }
.sz80    { font-size: 80%; }
.sz75    { font-size: 75%; }
.sz70    { font-size: 70%; }
.xbold      { font-weight:800; }
.bold       { font-weight:bold; }
.bolder     { font-weight:bolder; }
.semibold   { font-weight:600; }
.normal     { font-weight:normal; }
.nobold     { font-weight:initial; }
.thin       { font-weight:lighter; }
.i, .italic, .em { font-style:italic; font-variation-settings:"ital" 1; }

.orange     { color: orange; }
.red        { color: darkred; }
.blue       { color: steelblue; }
.lightgreen { color: mediumseagreen; }
.green      { color: green; }
.darkgreen  { color: darkgreen; }
.gray       { color: darkgray; }
.dark       { color: var(--clr-text-dark); }
.dark2      { color: var(--clr-text-dark2); }
.dark3      { color: var(--clr-text-dark3); }
.black      { color: black; }
.bkblack0   { background: black; }
.bkblack    { background: var(--clr-black); }
.bknorm     { background: var(--clr-back); }
.bkdarker   { background: var(--clr-back-darker); }
.bkdark     { background: var(--clr-back-dark); }
.bkdark1    { background: var(--clr-back-dark1); }
.bkdark2    { background: var(--clr-back-dark2); }
.bklight    { background: var(--clr-back-light); }

.opac10 { opacity: 10%; }
.opac20 { opacity: 20%; }
.opac30 { opacity: 30%; }
.opac40 { opacity: 40%; }
.opac50 { opacity: 50%; }
.opac60 { opacity: 60%; }
.opac70 { opacity: 70%; }
.opac80 { opacity: 80%; }
.opac90 { opacity: 90%; }
.opac100 { opacity: 100%; }

.w100 { width: 100%; }
.maxw90 { max-width: 90%; }
.grow1 { flex: 1 1 auto; }

.scroll {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border-light) transparent;
}

.scroll::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

.scroll::-webkit-scrollbar-thumb {
    background: var(--clr-border-light);
    border-radius: 1rem;
}

.scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mar0 { margin: 0; }
.line1  { line-height: 1; }
.line09 { line-height: 0.9; }
.line08 { line-height: 0.8; }
.left       { text-align: left; }
.right      { text-align: right; }
.hcenter    { text-align: center; }

.pad2  { padding: 2rem; }
.hpad2 { padding-left: 2rem; padding-right: 2rem; }
.vpad2 { padding-top: 2rem; padding-bottom: 2rem; }
.tpad2 { padding-top: 2rem; }
.bpad2 { padding-bottom: 2rem; }
.rpad2 { padding-right: 2rem; }
.lpad2 { padding-left: 2rem; }
.mar2  { margin: 2rem; }
.hmar2 { margin-left: 2rem; margin-right: 2rem; }
.vmar2 { margin-top: 2rem; margin-bottom: 2rem; }
.tmar2 { margin-top: 2rem; }
.bmar2 { margin-bottom: 2rem; }
.rmar2 { margin-right: 2rem; }
.lmar2 { margin-left: 2rem; }

.pad1  { padding: 1rem; }
.hpad1 { padding-left: 1rem; padding-right: 1rem; }
.vpad1 { padding-top: 1rem; padding-bottom: 1rem; }
.tpad1 { padding-top: 1rem; }
.bpad1 { padding-bottom: 1rem; }
.rpad1 { padding-right: 1rem; }
.lpad1 { padding-left: 1rem; }
.mar1  { margin: 1rem; }
.hmar1 { margin-left: 1rem; margin-right: 1rem; }
.vmar1 { margin-top: 1rem; margin-bottom: 1rem; }
.tmar1 { margin-top: 1rem; }
.bmar1 { margin-bottom: 1rem; }
.rmar1 { margin-right: 1rem; }
.lmar1 { margin-left: 1rem; }

.pad07  { padding: 0.7rem; }
.hpad07 { padding-left: 0.7rem; padding-right: 0.7rem; }
.vpad07 { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.tpad07 { padding-top: 0.7rem; }
.bpad07 { padding-bottom: 0.7rem; }
.rpad07 { padding-right: 0.7rem; }
.lpad07 { padding-left: 0.7rem; }
.mar07  { margin: 0.7rem; }
.hmar07 { margin-left: 0.7rem; margin-right: 0.7rem; }
.vmar07 { margin-top: 0.7rem; margin-bottom: 0.7rem; }
.tmar07 { margin-top: 0.7rem; }
.bmar07 { margin-bottom: 0.7rem; }
.rmar07 { margin-right: 0.7rem; }
.lmar07 { margin-left: 0.7rem; }

.pad05  { padding: 0.5rem; }
.hpad05 { padding-left: 0.5rem; padding-right: 0.5rem; }
.vpad05 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.tpad05 { padding-top: 0.5rem; }
.bpad05 { padding-bottom: 0.5rem; }
.rpad05 { padding-right: 0.5rem; }
.lpad05 { padding-left: 0.5rem; }
.mar05  { margin: 0.5rem; }
.hmar05 { margin-left: 0.5rem; margin-right: 0.5rem; }
.vmar05 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.tmar05 { margin-top: 0.5rem; }
.bmar05 { margin-bottom: 0.5rem; }
.rmar05 { margin-right: 0.5rem; }
.lmar05 { margin-left: 0.5rem; }

.pad04  { padding: 0.4rem; }
.hpad04 { padding-left: 0.4rem; padding-right: 0.4rem; }
.vpad04 { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.tpad04 { padding-top: 0.4rem; }
.bpad04 { padding-bottom: 0.4rem; }
.rpad04 { padding-right: 0.4rem; }
.lpad04 { padding-left: 0.4rem; }
.mar04  { margin: 0.4rem; }
.hmar04 { margin-left: 0.4rem; margin-right: 0.4rem; }
.vmar04 { margin-top: 0.4rem; margin-bottom: 0.4rem; }
.tmar04 { margin-top: 0.4rem; }
.bmar04 { margin-bottom: 0.4rem; }
.rmar04 { margin-right: 0.4rem; }
.lmar04 { margin-left: 0.4rem; }

.pad03  { padding: 0.3rem; }
.hpad03 { padding-left: 0.3rem; padding-right: 0.3rem; }
.vpad03 { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.tpad03 { padding-top: 0.3rem; }
.bpad03 { padding-bottom: 0.3rem; }
.rpad03 { padding-right: 0.3rem; }
.lpad03 { padding-left: 0.3rem; }
.mar03  { margin: 0.3rem; }
.hmar03 { margin-left: 0.3rem; margin-right: 0.3rem; }
.vmar03 { margin-top: 0.3rem; margin-bottom: 0.3rem; }
.tmar03 { margin-top: 0.3rem; }
.bmar03 { margin-bottom: 0.3rem; }
.rmar03 { margin-right: 0.3rem; }
.lmar03 { margin-left: 0.3rem; }

.pad02  { padding: 0.2rem; }
.hpad02 { padding-left: 0.2rem; padding-right: 0.2rem; }
.vpad02 { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.tpad02 { padding-top: 0.2rem; }
.bpad02 { padding-bottom: 0.2rem; }
.rpad02 { padding-right: 0.2rem; }
.lpad02 { padding-left: 0.2rem; }
.mar02  { margin: 0.2rem; }
.hmar02 { margin-left: 0.2rem; margin-right: 0.2rem; }
.vmar02 { margin-top: 0.2rem; margin-bottom: 0.2rem; }
.tmar02 { margin-top: 0.2rem; }
.bmar02 { margin-bottom: 0.2rem; }
.rmar02 { margin-right: 0.2rem; }
.lmar02 { margin-left: 0.2rem; }

.pad01  { padding: 0.1rem; }
.hpad01 { padding-left: 0.1rem; padding-right: 0.1rem; }
.vpad01 { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.tpad01 { padding-top: 0.1rem; }
.bpad01 { padding-bottom: 0.1rem; }
.rpad01 { padding-right: 0.1rem; }
.lpad01 { padding-left: 0.1rem; }
.mar01  { margin: 0.1rem; }
.hmar01 { margin-left: 0.1rem; margin-right: 0.1rem; }
.vmar01 { margin-top: 0.1rem; margin-bottom: 0.1rem; }
.tmar01 { margin-top: 0.1rem; }
.bmar01 { margin-bottom: 0.1rem; }
.rmar01 { margin-right: 0.1rem; }
.lmar01 { margin-left: 0.1rem; }

[data-ch-search-results] [role="option"][aria-selected="true"] {
    background: var(--clr-back-light);
    color: var(--clr-text-light2);
    box-shadow: 0 0 0 1px var(--clr-border-focus);
}

[data-ch-dlg-list] button,
[data-ch-search-results] button {
    position: relative;
    overflow: visible;
}

[data-ch-dlg-list] button[data-ch-dlg-current="true"] {
    background: var(--clr-back-active);
    color: var(--clr-text-light2);
}

[data-ch-dlg-list] button[data-ch-dlg-draft="true"]::before,
[data-ch-search-results] button[data-ch-dlg-draft="true"]::before {
    content: "*";
    position: absolute;
    top: 0.1rem;
    right: 0.25rem;
    color: var(--clr-text-mid);
    line-height: 1;
}

[data-ch-search-box] {
    position: relative;
    min-width: 0;
}

[data-ch-search-box] input {
    padding-right: 1.8rem;
}

[data-ch-search-box] button {
    position: absolute;
    top: 50%;
    right: 0.15rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0.2rem;
    background: transparent;
    box-shadow: none;
    color: var(--clr-text-mid);
}

[data-ch-search-box] button:hover {
    background: transparent;
    box-shadow: none;
    color: var(--clr-text-light2);
}

[data-ch-messages] {
    padding-top: 0.8rem;
}

.msg {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.1rem;
    line-height: 1.2;
}

.msg.out {
    justify-content: flex-end;
}

.msg.in {
    justify-content: flex-start;
}

.msg > * {
    position: relative;
    max-width: 90%;
    padding: 0.1rem 0.4rem;
    border-radius: 0.7rem;
    background: var(--clr-back-darker);
    box-shadow: 0 0 0 1px var(--clr-border);
    white-space: normal;
    font-size: smaller;
    font-weight: lighter;
}

.msg-flash {
    animation: msg-flash 4s ease-in-out;
}

@keyframes msg-flash {
    0% { background: transparent; }
    25% { background: var(--clr-back-blue-dark); }
    100% { background: transparent; }
}

.msg.out > *,
.msg.in > * {
    padding: 0.2rem 0.5rem;
    font-size: inherit;
    font-weight: inherit;
    color: var(--clr-text-light);
}

.msg.out > * {
    border-bottom-right-radius: 0;
    background: var(--clr-back-blue);
}

.msg.in > * {
    border-bottom-left-radius: 0;
}

.msg.service > * {
    padding: 0.25rem 0.4rem;
    background: var(--clr-back-darker);
    border: none;
    box-shadow: none;
    color: var(--clr-text-dark);
    font-size: smaller;
    font-weight: lighter;
}

.msg-reply {
    margin-bottom: 0.2rem;
    padding-bottom: 0.15rem;
    color: var(--clr-text-mid);
    font-size: 80%;
    line-height: 1.1;
    box-shadow: 0 1px 0 0 var(--clr-border);
}

.msg-head {
    font-weight: bolder;
    margin-bottom: 0.2rem;
    color: var(--clr-text-dark);
    color: var(--clr-blue);
}

.msg-body {
    font-weight: 250;
    white-space: pre-line;
}

/* ch-user-card: compact virtual user details */
.ch-user-card {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0.5rem;
}

.ch-user-card > div {
    grid-column: 1 / -1;
}

.ch-user-card > span:nth-of-type(odd) {
    color: var(--clr-text-dark);
}

.msg-time {
    display: block;
    margin-top: 0.15rem;
    color: var(--clr-text-dark);
    font-size: 65%;
    font-weight: lighter;
    line-height: 0.8;
    text-align: right;
}

.msg-act {
    position: absolute;
    top: 0;
    right: 0.35rem;
    transform: translateY(-70%);
    display: none;
    column-gap: 0.15rem;
    z-index: 2;
}

.msg-act button {
    margin: 0;
    padding: 0.15rem 0.25rem;
    background: var(--clr-back-light);
    color: var(--clr-text-mid);
    box-shadow: 0 0 0 1px var(--clr-border);
    font-size: 85%;
    line-height: 1;
}

.msg:hover .msg-act,
.msg-act:focus-within {
    display: inline-flex;
}

.msg-act button:hover {
    color: var(--clr-text-light2);
    background: var(--clr-back-light2);
}

.msg.in .msg-act {
    right: auto;
    left: max(0.35rem, calc(100% - 3.8rem));
}

.msg-menu {
    position: absolute;
    top: calc(100% + 0.15rem);
    right: 0;
    display: flex;
    flex-direction: column;
    row-gap: 0.1rem;
    min-width: max-content;
    padding: 0.25rem;
    background: var(--clr-back-dark);
    box-shadow: 0 0 0 1px var(--clr-border);
    z-index: 3;
}

.msg.in .msg-menu {
    right: auto;
    left: 0;
}

.msg-menu button {
    justify-content: flex-start;
    width: 100%;
    column-gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: transparent;
    box-shadow: none;
    font-size: 95%;
    text-align: left;
}

.msg-menu button:disabled {
    color: var(--clr-text-dark);
    cursor: default;
}

[data-ch-reply] {
    flex: 0 0 auto;
    color: var(--clr-text-mid);
    font-size: smaller;
}

[data-ch-frame] {
    overflow: hidden;
    min-height: 0;
}

[data-ch] {
    min-height: 0;
}

[data-ch-ios-prompt] {
    flex: 0 0 auto;
    color: var(--clr-text-light);
    line-height: 1.2;
}

[data-ch-ios-prompt] button {
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0.05em 0.35em;
    border-radius: 1em;
    background: var(--clr-blue);
    color: var(--clr-text-light2);
    font-size: 75%;
    line-height: 1.1;
}

.msg-div {
    align-self: stretch;
    color: var(--clr-text-mid);
    font-size: 75%;
    font-weight: lighter;
    line-height: 1;
    text-align: center;
}

.panel-head {
    flex: 0 0 calc(2.4em + 0.8rem);
    height: calc(2.4em + 0.8rem);
    min-height: calc(2.4em + 0.8rem);
    max-height: calc(2.4em + 0.8rem);
    line-height: 1.2;
    overflow: visible;
    position: relative;
    z-index: 4;
    background: var(--clr-back-darker);
}

[data-ch-title] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-ch-back],
[data-ch-close] {
    display: inline-flex;
    padding: 10px;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}
button[data-ch-close] {
    color: var(--clr-text-mid);
    font-weight: lighter;
}

[data-ch-back]:hover:not(:disabled):not(:focus):not(:focus-within),
[data-ch-close]:hover:not(:disabled):not(:focus):not(:focus-within) {
    background: var(--clr-back-light2);
    box-shadow: none;
    color: inherit;
}

#chat-body-grid {
    position: fixed;
    top: var(--chat-viewport-top);
    left: 0;
    right: 0;
    height: var(--chat-viewport-height);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
}

#chat-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.4rem 0.7rem;
    background: var(--clr-back-menu);
    border-bottom: 1px dotted var(--clr-border-focus);
    color: var(--clr-text-menu);
}

#chat-header h1 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 650;
}

#chat-header button {
    padding: 10px;
    border-radius: 10px;
    box-shadow: none;
    font-size: large;
}

#chat-header button:hover:not(:disabled):not(:focus):not(:focus-within) {
    box-shadow: none;
}

/* ch-account-menu: shared Chatik account dropdown */
.ch-account-menu {
    position: relative;
    flex: 0 0 auto;
}

.ch-account-menu > button {
    min-height: 2.4em;
    background: transparent;
}

.ch-account-menu-wide > button:hover {
    background: var(--clr-back-light2);
    color: var(--clr-text-light2);
}

.ch-account-menu-popup {
    position: absolute;
    top: calc(100% + 0.2rem);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: max-content;
    padding: 0.25rem;
    background: var(--clr-back-dark);
    box-shadow: 0 0 0 1px var(--clr-border);
    z-index: 10;
}

.ch-account-menu-popup a,
.ch-account-menu-popup form > button {
    display: flex;
    align-items: center;
    column-gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-radius: 3px;
    color: var(--clr-text-light);
    text-decoration: none;
}

.ch-account-menu-popup form {
    margin: 0;
}

.ch-account-menu-popup form > button {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
}

.ch-account-menu-popup a:hover,
.ch-account-menu-popup form > button:hover {
    background: var(--clr-back-light2);
    color: var(--clr-text-light2);
}

.ch-account-menu-popup i,
.ch-account-menu-popup img {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
}

.ch-account-menu-popup hr {
    width: 100%;
    margin: 0.2rem 0;
    border: 0;
    border-top: 1px solid var(--clr-border);
}

#chat-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#chat-auth > form,
#chat-auth > .col {
    width: min(100%, 30rem);
}

#chat-invites input[type="email"] {
    flex: 1 1 18rem;
}

#chat-personal {
    min-height: 0;
    overflow: hidden;
}

.chat-shell {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    height: 100%;
    min-height: 0;
    background: var(--clr-back-dark1);
}

.chat-shell > * {
    min-width: 0;
    min-height: 0;
}

.chat-pane {
    display: flex;
    flex-direction: column;
}

.chat-dlglist {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--clr-back-dark);
}

.chat-dlglist button {
    box-shadow: none;
}

.chat-list-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background: var(--clr-back-dark1);
}

.chat-tabs {
    display: flex;
    flex-direction: column;
    width: 1.8rem;
    background: var(--clr-back-dark1);
}

.chat-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 1.8rem;
    min-height: 0;
    padding: 0.5rem;
    border: 0;
    border-radius: 0 9px 9px 0;
    box-shadow: none;
    background: var(--clr-back-dark);
    color: var(--clr-text-mid);
    font-size: smaller;
    font-weight: 400;
    line-height: 1;
}

.chat-tabs i {
    display: inline-block;
    line-height: 1;
    transform: rotate(90deg);
}

.chat-tabs button[data-ch-tab-current="true"] {
    background: var(--clr-back-active);
    color: var(--clr-text-light2);
}

.chat-tabs button:disabled {
    opacity: 0.35;
}

@media (max-width: 600px) {
    #chat-body-grid {
        grid-template-rows: 1fr;
    }

    #chat-header {
        display: none;
    }

    #chat-main {
        padding: 0;
    }

    [data-ch-ios-prompt] {
        flex-wrap: wrap;
    }

    .chat-shell {
        grid-template-columns: minmax(0, 1fr);
        font-size: larger;
    }

    .chat-tabs, 
    .chat-tabs button {
        width: 2.5rem;
    }

    [data-ch]:not([data-ch-view="chat"]) [data-ch-pane],
    [data-ch][data-ch-view="chat"] [data-ch-list-pane] {
        display: none;
    }

    [data-ch-list-pane],
    [data-ch-pane] {
        height: 100%;
    }

    [data-ch-close] {
        display: none !important;
    }
}

@media (min-width: 600px) {
    #chat-body-grid {
        grid-template-rows: auto 1fr;
    }

    #chat-header {
        display: grid;
    }

    .ch-account-menu-mobile {
        display: none;
    }

    .chat-shell {
        grid-template-columns: minmax(20ch, min(40ch, 35%)) minmax(0, 1fr);
    }

    [data-ch-pane] [data-ch-back] {
        display: none;
    }
}