/* Основа LiveChatik: шрифт, сбросы и поверхности. Общие отступы подключаются после неё, интерфейс — после отступов. */

:root { --chat-viewport-height: 100vh; --chat-viewport-top: 0px; --clr-action: rgb(70, 135, 215); --clr-text-dark2: #707070; --clr-text-dark3: #606060; --clr-back-dark1: #1C1C1C; --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)); }

@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, select, button { background: var(--clr-back-light); font: inherit; line-height: 1; }
textarea { background: var(--clr-back-light); font: inherit; line-height: 1; }

input, textarea, select { background: var(--clr-back-dark); }

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; }

#chat-birth-date:not(:disabled) {
    color: var(--clr-text-light);
    -webkit-text-fill-color: var(--clr-text-light);
}

#chat-birth-date[data-ch-birth-date-has-value="false"]::-webkit-datetime-edit {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

#chat-personal [data-ch-birth-date-clear] {
    flex: 0 0 auto;
    background: transparent;
}
button { border-radius: 3px; gap: 0.25rem; cursor: pointer; }

/* Hover feedback in lists follows the current pointer input, including hybrid devices. */
button:hover:where(:not([data-ch-dlg-id])),
:where(:root:not([data-ch-touch-input]) [data-ch-dlg-list]) 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; }

.xbold      { font-weight:800; }

.semibold   { font-weight:600; }

.i, .italic, .em { font-style:italic; font-variation-settings:"ital" 1; }

.dark       { color: var(--clr-text-dark); }
.dark2      { color: var(--clr-text-dark2); }
.dark3      { color: var(--clr-text-dark3); }

.bknorm     { background: var(--clr-back); }

.bkdark1    { background: var(--clr-back-dark1); }
.bkdark2    { background: var(--clr-back-dark2); }

.maxw90 { max-width: 90%; }
.grow1 { flex: 1 1 auto; }
.shrink0 { flex-shrink: 0; }
.minw0 { min-width: 0; }

/* Surfaces pinned within their parent. */
.sticky-overlap {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 1.6rem;
    pointer-events: none;
}

/* Rounded filled surfaces and unframed symbols. */
.rounded-fill {
    min-width: 0;
    padding: 0.1rem;
    border-radius: 1.4rem;
    background: var(--clr-back-blue);
    box-shadow: 0 0 0 1px var(--clr-border);
}

.translucent-dark {
    background: color-mix(in srgb, var(--clr-back-dark2) 80%, transparent);
}

.bare-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--clr-text-light2);
    font-size: 1.5rem;
}

.bare-icon.small {
    width: 1.8rem;
    height: 1.8rem;
}

.round-fill {
    border-radius: 50%;
    background: var(--clr-back-light2);
}

button.bare-icon:hover {
    background: transparent;
    color: var(--clr-action);
}

button.bare-icon.round-fill:hover {
    background: var(--clr-action);
    color: var(--clr-text-light2);
}

button.bare-icon:disabled {
    cursor: default;
}

button.bare-icon:disabled:hover {
    color: var(--clr-text-light2);
}

.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; }

.pad3  { padding: 3rem; }
.hpad3 { padding-left: 3rem; padding-right: 3rem; }
.vpad3 { padding-top: 3rem; padding-bottom: 3rem; }
.tpad3 { padding-top: 3rem; }
.bpad3 { padding-bottom: 3rem; }
.rpad3 { padding-right: 3rem; }
.lpad3 { padding-left: 3rem; }
.mar3  { margin: 3rem; }
.hmar3 { margin-left: 3rem; margin-right: 3rem; }
.vmar3 { margin-top: 3rem; margin-bottom: 3rem; }
.tmar3 { margin-top: 3rem; }
.bmar3 { margin-bottom: 3rem; }
.rmar3 { margin-right: 3rem; }
.lmar3 { margin-left: 3rem; }

.pad25  { padding: 25rem; }
.hpad25 { padding-left: 25rem; padding-right: 25rem; }
.vpad25 { padding-top: 25rem; padding-bottom: 25rem; }
.tpad25 { padding-top: 25rem; }
.bpad25 { padding-bottom: 25rem; }
.rpad25 { padding-right: 25rem; }
.lpad25 { padding-left: 25rem; }
.mar25  { margin: 25rem; }
.hmar25 { margin-left: 25rem; margin-right: 25rem; }
.vmar25 { margin-top: 25rem; margin-bottom: 25rem; }
.tmar25 { margin-top: 25rem; }
.bmar25 { margin-bottom: 25rem; }
.rmar25 { margin-right: 25rem; }
.lmar25 { margin-left: 25rem; }

.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; }

.bmar01 { margin-bottom: 0.1rem; }
.rmar01 { margin-right: 0.1rem; }
.lmar01 { margin-left: 0.1rem; }