/* Telegram proportions and Liquid Glass controls; appearance remains personal. */
:root{--ink:#000;--ui-font:Montserrat,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--message-text:#000;--message-size:16px;--text-backdrop:transparent;--glass-highlight:#fff9}
body,input,textarea,select,button,.chat-layout{font-family:var(--ui-font)}
/* Управляющие элементы: заливка одним цветом и радиус по размеру. Прежде здесь
   лежало стекло с градиентом и подсветкой по краям — поверх уже плоских кнопок
   из plpanel.css оно возвращало им блеск, а радиус 18px делал пилюлю из всего,
   от кнопки до строки поиска. */
:is(button,.button,.icon-button,.nav-item,.account-name){border-radius:10px;border:1px solid color-mix(in srgb,var(--border) 68%,transparent);background:var(--surface);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1),opacity .15s cubic-bezier(.22,1,.36,1);color:var(--ink)}
:is(button,.button,.icon-button):hover:not(:disabled){transform:none;background:var(--surface-hover)}
:is(button,.button,.icon-button):active{transform:none;opacity:.85}
.button.primary,.chat-layout #chat-send-form .primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.button.primary:hover:not(:disabled),.chat-layout #chat-send-form .primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 88%,#000)}
.button.danger,.danger-text{color:var(--bad-ink)}
.sidebar{background:color-mix(in srgb,var(--surface) 92%,transparent);border-right:1px solid var(--border);backdrop-filter:blur(24px);color:var(--ink)}
.sidebar :is(.brand,.brand-sub,.nav-heading,.nav-item,.user-bar strong,.connection-card strong){color:var(--ink)}
.sidebar .nav-item.selected{background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--ink);border-color:color-mix(in srgb,var(--accent) 25%,var(--border))}
.sidebar :is(.navigation,.panel-control-row,.connection-card,.user-bar){color:var(--muted)}
/* Подписи состояния и роли задают цвет сами (styles.css), поэтому наследование
   от .sidebar до них не доходит: на светлой подложке #8995a7 / #939eaf давали
   контраст 2.9 и 2.5. Приводим их к общему приглушённому цвету темы. */
.sidebar :is(.connection-card,.user-bar) div>span{color:var(--muted)}
.sidebar .connection-card{background:var(--surface-soft)}
.sidebar :is(.panel-control,.panel-control-row>.icon-button){color:var(--ink)}
.sidebar .control-hint{color:var(--muted)}
/* Круг и обрезка остаются здесь; тон плитки задаёт раздел аватарок в
   desktop.css по идентификатору собеседника. Прежний общий градиент
   #5ab4f1 → #4384dd красил все аватарки одинаково и с !important не пускал
   палитру — строки списка диалогов перестали отличаться друг от друга. */
.avatar,.chat-layout .avatar,.user-avatar{border-radius:50%!important;color:#fff;font-weight:600;overflow:hidden}
.user-avatar{background:linear-gradient(140deg,#5ab4f1,#4384dd)}
.avatar img{border-radius:50%}.account-cell{gap:14px}.account-cell .avatar{width:48px;height:48px;min-width:48px}.account-name{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;font-size:16px;font-weight:600}
.account-sub{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.reputation-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;white-space:nowrap;font-weight:600;color:#087ee5;opacity:1}.reputation-badge>span:first-child{font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .reputation-badge{color:#59afff}
.chat-sidebar>.search-box{flex:0 0 auto!important;height:44px;min-height:44px;max-height:44px;display:flex;align-items:center;margin:12px 12px 8px;padding:0 13px;gap:9px;border:0;border-radius:24px;box-shadow:none;background:var(--surface-soft)}
.chat-sidebar>.search-box input{min-height:0;height:42px;padding:0;border:0;box-shadow:none;background:transparent;flex:1;min-width:0;font-size:15px;color:var(--ink)}
/* Пилюля поиска здесь — флекс-строка, а поле внутри неё без отступа слева
   (правило выше). Общая иконка позиционируется абсолютно (layout.css), из-за
   чего текст начинался от края пилюли и наезжал на лупу. В этой раскладке
   возвращаем значок в поток: место под него отводит сам флекс, а не padding. */
.chat-sidebar>.search-box>[data-icon]{position:static;transform:none;flex:0 0 20px;width:20px;height:20px}
.chat-sidebar>.search-box>[data-icon]>svg{width:20px;height:20px}
.chat-sidebar>#dialog-list{flex:1;min-height:0;overflow:auto}
.chat-layout .dialog-item{border:0;background:transparent;box-shadow:none;backdrop-filter:none;border-radius:12px;min-height:76px;align-items:center}
.chat-layout .dialog-item.selected{background:color-mix(in srgb,var(--telegram-blue) 16%,var(--surface));color:var(--ink)}
.chat-layout .dialog-item.selected :is(.dialog-copy p,.muted,small,time){color:var(--muted)}
.dialog-name,.chat-layout .dialog-copy strong.dialog-name,.chat-layout #chat-heading strong.dialog-name{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}.dialog-name>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.dialog-name .reputation-badge{font-size:12px;gap:7px}
.chat-layout .dialog-item .dialog-copy{min-width:0}.chat-layout .dialog-item p{color:var(--muted)}
.chat-layout .message-bubble{color:var(--message-text,var(--ink));background:var(--message-incoming,var(--surface));font-family:var(--ui-font)}
.chat-layout .message-bubble.own{background:var(--message-outgoing,var(--chat-outgoing));color:#fff}
.chat-layout .message-bubble p{font-size:var(--message-size);font-family:var(--ui-font);background:var(--text-backdrop);border-radius:5px;color:inherit}
.chat-layout .message-bubble.system{color:var(--muted);background:var(--surface-soft)}
.custom-text :is(.main p,.main label,.main input,.main textarea,.main select,.main h1,.main h2,.main h3,.main strong){color:var(--ink)}
.custom-text :is(.main .notice,.main .field-hint,.main .cell-meta){color:var(--ink-secondary)}
.custom-text .main p{background:var(--text-backdrop);border-radius:5px}
.custom-text .chat-layout .message-bubble p{color:var(--message-text,var(--ink))}
.appearance-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.appearance-colors input[type=color]{width:100%;height:42px;padding:4px}
.manual-boost-price{font-size:18px;font-weight:600}.simple-stock-summary{display:flex;gap:14px;flex-wrap:wrap}.simple-stock-record{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:720px){.reputation-badge{font-size:12px}.chat-layout #chat-heading .dialog-name{font-size:14px}.chat-layout #chat-heading .reputation-badge{font-size:11px}.chat-layout .message-bubble p{font-size:var(--message-size)}.appearance-colors{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){:is(button,.button,.icon-button,.nav-item){transition:none;backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not(backdrop-filter:blur(1px)){:is(button,.button,.icon-button,.nav-item){background:var(--surface)}}

:root[data-theme="dark"]:not(.custom-text){--message-text:var(--ink);--glass-highlight:#ffffff20}
.chat-layout .message-bubble.own :is(p,a){color:#fff}
.chat-layout .chat-thread[data-incoming-color] .message-bubble:not(.own):not(.system){color:var(--chat-incoming-text)}
.chat-layout .chat-thread[data-incoming-color] .message-bubble:not(.own):not(.system) :is(p,a,time){color:var(--chat-incoming-text)}
.account-profile{display:inline-flex;align-items:baseline;gap:7px;min-width:0;max-width:100%}.account-profile>.account-username{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-profile>.reputation-badge{flex-shrink:0}
.chat-layout .dialog-item{margin:3px 8px}