:root{
    --milk:#F7F5EF; --graphite:#202321; --lime:#C7F36B; --grey:#D9DAD4; --deep:#31513A;
    /* ---- семантические переменные темы: светлая тема (значения по умолчанию) ---- */
    --surface:#F7F5EF;      /* фон карточки/полей ввода/попапов */
    --text:#202321;         /* основной текст на --surface */
    --muted:#8b8f85;        /* приглушённый текст (лейблы, подписи) */
    --muted2:#a9ad9f;       /* ещё более приглушённый текст (хинты) */
    --panel-bg:#EFEDE3;     /* вспомогательная панель (конструктор бланка) */
  }
  [data-theme="dark"]{
    --grey:#454A3D;         /* бордеры/разделители/фон чипов на тёмной поверхности */
    --surface:#26291F;      /* фон карточки/полей ввода/попапов в тёмной теме */
    --text:#EFEDE0;         /* основной текст на --surface в тёмной теме */
    --muted:#9BA08E;
    --muted2:#7C8070;
    --panel-bg:#2F3327;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ height:100%; }
  body{
    font-family:'Manrope', sans-serif; background:var(--graphite); color:var(--graphite);
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:20px; position:relative; overflow-x:hidden; overflow-y:auto;
  }
  /* экраны логина/регистрации — короткие, поэтому центрируем по вертикали;
     остальные (авторизованные) экраны остаются прижатыми к верху, т.к. их
     контент может быть длинным и скроллиться */
  body.auth-screen{ justify-content:center; }
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(560px circle at 12% 8%, rgba(199,243,107,.16), transparent 60%),
      radial-gradient(480px circle at 90% 85%, rgba(49,81,58,.55), transparent 65%),
      radial-gradient(700px circle at 100% 0%, rgba(199,243,107,.08), transparent 55%);
  }
  body::after{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' width='400' height='200'%3E%3Cpath d='M4 150C60 90 140 190 200 110C260 30 340 130 396 60' stroke='%23C7F36B' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.18'/%3E%3C/svg%3E");
    background-repeat:repeat; background-size:400px 200px;
  }
  .card{
    width:100%; max-width:420px; background:var(--surface); color:var(--text); border-radius:24px; overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5); position:relative; z-index:1;
  }
  .bar{
    background:var(--graphite); color:var(--milk); padding:16px 20px;
    font-family:'Golos Text'; font-weight:700; font-size:14px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:nowrap; gap:8px;
  }
  .bar .status{ font-family:'Manrope'; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; flex-shrink:0; }
  .bar-title-btn{
    background:none; border:none; padding:0; margin:0; color:var(--milk); cursor:pointer;
    font-family:'Golos Text'; font-weight:700; font-size:14px; -webkit-tap-highlight-color:transparent;
    flex-shrink:0;
  }
  .bar-title-btn:active{ opacity:.7; }
  .theme-toggle-btn{
    width:26px; height:26px; border-radius:50%; background:none; border:1.5px solid var(--lime);
    color:var(--lime); display:flex; align-items:center; justify-content:center; cursor:pointer;
    padding:0; flex-shrink:0; -webkit-tap-highlight-color:transparent;
  }
  .theme-toggle-btn:active{ background:var(--lime); color:var(--graphite); }
  .theme-toggle-btn svg{ width:14px; height:14px; }
  .bar-profile-btn{
    width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--graphite);
    border:none; display:none; align-items:center; justify-content:center; font-weight:800; font-size:12px;
    cursor:pointer; padding:0; flex-shrink:0; font-family:'Manrope'; position:relative;
  }
  .bar-profile-btn-inner{
    width:100%; height:100%; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .bar-profile-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* точка "в сети" на аватарке в шапке (как в мессенджерах), вместо текстовой
     плашки "онлайн" — цвет фирменный лайм, а не фиолетовый как в Телеграме */
  .profile-online-dot{
    position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%;
    background:var(--lime); border:2px solid var(--graphite); display:none;
  }
  .profile-online-dot.visible{ display:block; }
  .bar-icons-right{
    margin-left:auto; flex-wrap:nowrap; flex-shrink:1; min-width:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
  }
  .bar-icons-right::-webkit-scrollbar{ display:none; }
  .bar-templates-btn{
    width:26px; height:26px; border-radius:50%; background:transparent; color:var(--lime);
    border:1.5px solid var(--lime); display:none; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden; padding:0; flex-shrink:0; -webkit-tap-highlight-color:transparent;
  }
  .bar-templates-btn:active{ background:var(--lime); }
  #navChatBtn{ position:relative; overflow:visible; }
  .chat-badge{
    position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; padding:0 3px;
    background:#e0483e; color:#fff; border-radius:999px; font-size:9px; font-weight:800;
    align-items:center; justify-content:center; line-height:1; font-family:'Manrope';
    border:1.5px solid var(--graphite);
  }
  .bar-templates-btn:active svg{ stroke:var(--graphite); }
  .bar-templates-btn svg{ width:15px; height:15px; }
  .avatar-upload-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .avatar-preview{
    width:72px; height:72px; border-radius:50%; background:var(--grey); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    font-weight:800; font-size:22px; color:var(--text); font-family:'Golos Text'; cursor:pointer;
  }
  .avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
  .status.online{ background:var(--lime); color:var(--graphite); }
  .status.offline{ background:#7a4b4b; color:#fff; }
  .status.blocked{ background:#a03e3e; color:#fff; }
  .body{ padding:22px; display:flex; flex-direction:column; gap:16px; }
  label.field-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; margin-bottom:6px;}
  input, select{
    width:100%; border:2px solid var(--grey); background:var(--surface); border-radius:12px;
    padding:12px 13px; font-weight:700; font-size:15px; color:var(--text); outline:none;
    margin-bottom:12px;
  }
  input:focus, select:focus{ border-color:var(--deep); }
  .calc-box{ background:var(--graphite); color:var(--milk); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center;}
  .calc-box b{ font-family:'Golos Text'; color:var(--lime); font-size:19px; }
  .sig-wrap{ border:2px dashed var(--grey); border-radius:14px; position:relative; }
  /* ---------- голосовой ввод (кнопка-микрофон поверх текстового поля) ---------- */
  .text-input-wrap{ position:relative; }
  .text-input-wrap input{ padding-right:44px; }
  .voice-input-btn{
    position:absolute; right:6px; top:0; height:100%; width:34px; border:none; background:none;
    font-size:17px; cursor:pointer; color:var(--muted); display:none; align-items:center; justify-content:center;
    margin:0; padding:0;
  }
  .voice-input-btn.listening{ color:#a03e3e; }
  @keyframes voicePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
  .voice-input-btn.listening{ animation:voicePulse 1s infinite; }
  canvas{ width:100%; height:100px; display:block; touch-action:none; border-radius:12px; }
  /* поле-рисунок (эскиз/план) — та же механика, что подпись, но область в разы
     больше и с лёгкой сеткой-подложкой для ориентира (как на бумажных бланках) */
  .sketch-wrap{
    border:2px dashed var(--grey); border-radius:14px; position:relative; margin-bottom:12px;
    background-image: linear-gradient(var(--grey) 1px, transparent 1px), linear-gradient(90deg, var(--grey) 1px, transparent 1px);
    background-size: 24px 24px; background-color:var(--surface);
  }
  .sketch-wrap canvas{ height:320px; }
  .checkbox-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .checkbox-row input[type="checkbox"]{ width:auto; margin:0; flex-shrink:0; }
  .checkbox-row label{ font-size:14px; font-weight:700; color:var(--text); margin:0; }
  .btn{
    background:var(--graphite); color:var(--lime); border:none; border-radius:14px; padding:15px;
    font-family:'Golos Text'; font-weight:700; font-size:13px; cursor:pointer; width:100%;
  }
  .btn:disabled{ opacity:.5; }
  .btn-ghost{ background:none; border:none; color:var(--muted); text-decoration:underline; font-family:'Manrope'; font-weight:700; font-size:12px; padding:6px; width:auto; }
  .msg{ font-size:13px; color:var(--muted); text-align:center; padding:20px 0; }
  .queue-note{ font-size:11px; color:var(--muted2); text-align:center; }
  .err{ color:#a03e3e; font-size:12px; font-weight:700; }
  .ok{ color:var(--deep); font-size:12px; font-weight:700; }
  .agent-row{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--grey); font-size:13px;
  }
  .agent-row:last-child{ border-bottom:none; }
  .agent-row .who{ display:flex; flex-direction:column; gap:2px; overflow:hidden; }
  .agent-row .name{ font-weight:800; color:var(--text); }
  .agent-row .email{ color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .agent-card{ padding:14px 0; border-bottom:1px solid var(--grey); -webkit-tap-highlight-color:transparent; }
  .agent-card *{ -webkit-tap-highlight-color:transparent; }
  .agent-card:last-child{ border-bottom:none; }
  .agent-card-top{ display:flex; align-items:center; gap:10px; }
  .agent-card-top .who{ display:flex; flex-direction:column; gap:2px; overflow:hidden; flex:1; min-width:0; }
  .agent-card-top .name{ font-weight:800; color:var(--text); font-size:14px; }
  .agent-phone{ color:var(--text); font-size:13px; font-weight:700; text-decoration:none; width:fit-content; }
  .agent-phone:active{ opacity:.6; }
  .agent-card-messengers{ display:flex; gap:8px; margin:10px 0 2px 54px; flex-wrap:wrap; }
  .msg-icon-btn{
    width:40px; height:40px; border-radius:50%; color:#fff;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  .msg-icon-btn:active{ filter:brightness(0.9); }
  .agent-card-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px; }
  .badge{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; text-transform:uppercase; white-space:nowrap; }
  .badge.admin{ background:var(--graphite); color:var(--lime); }
  .badge.agent{ background:var(--grey); color:var(--text); }
  .badge.inactive{ background:#e3d3d3; color:#a03e3e; }
  .mini-btn{
    background:none; border:1px solid var(--grey); border-radius:8px; padding:5px 9px;
    font-size:11px; font-weight:800; color:var(--text); cursor:pointer; white-space:nowrap;
  }
  .mini-btn.danger{ border-color:#a03e3e; color:#a03e3e; }
  .result-box{
    background:var(--lime); color:var(--graphite); border-radius:14px; padding:16px;
    font-size:13px; line-height:1.6; font-weight:700; margin-top:14px;
  }
  .result-box .pass{
    font-family:'Golos Text'; font-size:16px; background:var(--graphite); color:var(--lime);
    display:inline-block; padding:4px 10px; border-radius:8px; margin-top:4px; letter-spacing:.03em;
    user-select:all;
  }
  .result-box.err{ background:#e3d3d3; color:#a03e3e; }
  .copy-btn{
    background:var(--graphite); color:var(--lime); border:none; border-radius:8px;
    padding:4px 10px; font-size:12px; font-weight:800; cursor:pointer; margin-left:8px;
  }
  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
    align-items:center; justify-content:center; padding:24px; z-index:1000;
  }
  .modal-box{
    background:var(--surface); border-radius:20px; padding:22px; max-width:380px; width:100%;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  }
  .modal-box p{ font-size:14px; line-height:1.5; color:var(--text); margin-bottom:18px; font-weight:700; }
  .modal-actions{ display:flex; gap:10px; }
  .modal-actions button{
    flex:1; border:none; border-radius:12px; padding:13px; font-family:'Golos Text';
    font-weight:700; font-size:12px; cursor:pointer;
  }
  .modal-actions .m-cancel{ background:var(--grey); color:var(--text); }
  .modal-actions .m-danger{ background:#a03e3e; color:#fff; }
  .section-title{ font-family:'Golos Text'; font-weight:700; font-size:13px; margin-top:4px; margin-bottom:8px; color:var(--text); }
  /* заголовки категорий в библиотеке — крупнее обычного section-title и с
     акцентным фоном, чтобы не сливаться с жирными названиями бланков внутри */
  .lib-category-title{
    font-family:'Golos Text'; font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--graphite); background:var(--lime); display:inline-block;
    padding:8px 18px; border-radius:10px; margin-top:30px; margin-bottom:14px;
  }
  .lib-category-title:first-child{ margin-top:4px; }
  .hint{ font-size:11px; color:var(--muted2); line-height:1.5; }
  .stat-line{ font-size:12px; color:var(--muted); }
  .addr-field-wrap{ position:relative; }
  .addr-suggestions{
    position:absolute; left:0; right:0; top:100%; margin-top:-8px; z-index:20;
    background:var(--surface); border:2px solid var(--grey); border-radius:0 0 12px 12px;
    max-height:180px; overflow-y:auto; box-shadow:0 12px 20px -8px rgba(0,0,0,.25);
  }
  .addr-suggestions div{ padding:10px 13px; font-size:13px; font-weight:600; cursor:pointer; border-bottom:1px solid var(--grey); }
  .addr-suggestions div:last-child{ border-bottom:none; }
  .addr-suggestions div:active{ background:var(--grey); }
  .addr-map{ border:2px solid var(--grey); }
  .addr-map-hint{ font-size:10px; color:var(--muted2); text-align:center; margin-top:4px; }
  .field-row{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--grey); font-size:13px;
  }
  .field-row:last-child{ border-bottom:none; }
  .field-row .who{ display:flex; flex-direction:column; gap:2px; overflow:hidden; }
  .field-row .flabel{ font-weight:800; color:var(--text); }
  .field-row .fid{ color:var(--muted); font-size:11px; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .type-badge{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; text-transform:uppercase; white-space:nowrap; background:var(--grey); color:var(--text); }
  .field-actions{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  .builder-panel{ background:var(--panel-bg); border:2px solid var(--grey); border-radius:14px; padding:14px; margin:10px 0; }
  .step-card{ background:var(--surface); border:2px solid var(--grey); border-radius:12px; padding:12px; margin-bottom:10px; }
  .step-card .fake-select{ margin-bottom:8px; }
  .option-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  .option-row input{ margin-bottom:0; }
  .id-chip{
    display:inline-block; background:var(--grey); color:var(--text); border:none; border-radius:8px;
    padding:5px 9px; font-size:11px; font-weight:800; font-family:monospace; cursor:pointer; margin:0 6px 6px 0;
  }
  textarea.fe-formula{
    width:100%; border:2px solid var(--grey); background:var(--surface); border-radius:12px;
    padding:12px 13px; font-weight:700; font-size:15px; color:var(--text); outline:none;
    margin-bottom:8px; font-family:monospace; resize:vertical;
  }
  /* ---------- фирменный "фейковый select" — заменяет системный <select> ---------- */
  .fake-select{
    width:100%; border:2px solid var(--grey); background:var(--surface); border-radius:12px;
    padding:12px 13px; font-weight:700; font-size:15px; color:var(--text); outline:none;
    margin-bottom:12px; display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; font-family:'Manrope'; text-align:left;
  }
  .fake-select:active{ border-color:var(--deep); }
  .fake-select-arrow{ color:var(--muted); font-size:12px; }
  /* ---------- фирменный попап выбора из списка (замена системного попапа select) ---------- */
  .picker-list{ display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; margin-bottom:14px; }
  .picker-row{
    text-align:left; background:var(--surface); border:2px solid var(--grey); border-radius:12px;
    padding:13px 15px; font-family:'Manrope'; font-weight:800; font-size:14px; color:var(--text);
    cursor:pointer; width:100%;
  }
  .picker-row:active{ background:var(--grey); }
  .picker-row-active{ border-color:var(--deep); background:var(--panel-bg); }
  .picker-title{ font-size:14px; line-height:1.5; color:var(--text); margin-bottom:14px; font-weight:700; font-family:'Golos Text'; }
  /* ---------- карточка бланка на экране выбора бланка (агент, несколько бланков) ---------- */
  .tpl-pick-row{
    display:block; width:100%; text-align:left; background:var(--surface); border:2px solid var(--grey);
    border-radius:14px; padding:14px 15px; margin-bottom:10px; font-family:'Manrope'; font-weight:800;
    font-size:14px; color:var(--text); cursor:pointer;
  }
  .tpl-pick-row:active{ background:var(--grey); }
  .tpl-pick-count{ display:block; font-size:11px; font-weight:700; color:var(--muted); margin-top:2px; }
  /* ---------- обёртка "показать клиенту" рядом с карточкой бланка ---------- */
  .tpl-pick-row-wrap{ display:flex; align-items:stretch; gap:8px; margin-bottom:10px; }
  .tpl-pick-row-wrap .tpl-pick-row{ flex:1; margin-bottom:0; }
  .tpl-qr-btn{
    flex-shrink:0; width:48px; border:2px solid var(--grey); background:var(--surface);
    border-radius:14px; font-size:18px; cursor:pointer; color:var(--text);
  }
  .tpl-qr-btn:active{ background:var(--grey); }
  /* ---------- тарифная матрица (pricing_matrix) ---------- */
  .pm-scroll{ overflow-x:auto; border:2px solid var(--grey); border-radius:12px; margin-bottom:6px; }
  .pm-table{ border-collapse:collapse; width:100%; font-size:12px; }
  .pm-table th, .pm-table td{ border-bottom:1px solid var(--grey); border-right:1px solid var(--grey); padding:8px 10px; white-space:nowrap; text-align:center; }
  .pm-table th:first-child, .pm-table td:first-child{ text-align:left; font-weight:800; }
  .pm-table thead th{ background:var(--graphite); color:var(--milk); font-family:'Golos Text'; font-weight:700; font-size:11px; }
  .pm-cell{ cursor:pointer; font-weight:800; color:var(--text); }
  .pm-cell:active{ background:var(--grey); }
  .pm-cell-selected{ background:var(--lime) !important; color:var(--graphite); }
  .pm-cell-empty{ color:var(--muted2); cursor:default; }
  .pm-table-edit td{ padding:4px; }
  .pm-table-edit input[type="number"]{ margin-bottom:0; padding:6px 8px; font-size:12px; border-width:1px; }
  /* ---------- фото-вложения (тип поля photo) ---------- */
  .photo-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
  .photo-thumb{ position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden; border:2px solid var(--grey); }
  .photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-thumb-del{ position:absolute; top:2px; right:2px; background:var(--graphite); color:var(--milk); border:none; border-radius:50%; width:20px; height:20px; font-size:11px; line-height:1; cursor:pointer; }
  /* ---------- дашборд админа ---------- */
  .dash-presets{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .dash-preset-btn{
    background:var(--surface); border:2px solid var(--grey); border-radius:10px; padding:8px 12px;
    font-size:11px; font-weight:800; color:var(--text); cursor:pointer;
  }
  .dash-preset-btn.active{ background:var(--graphite); color:var(--lime); border-color:var(--graphite); }
  .dash-range{ display:flex; gap:8px; align-items:center; margin-bottom:4px; }
  .dash-range input[type="date"]{ margin-bottom:0; padding:10px; font-size:13px; }
  .dash-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
  .dash-card{ background:var(--graphite); color:var(--milk); border-radius:14px; padding:13px 14px; }
  .dash-card .dcv{ font-family:'Golos Text'; color:var(--lime); font-size:20px; font-weight:700; line-height:1.2; }
  .dash-card .dcl{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#a9ad9f; margin-top:2px; }
  .dash-table{ width:100%; border-collapse:collapse; font-size:12px; margin-bottom:6px; }
  .dash-table th, .dash-table td{ border-bottom:1px solid var(--grey); padding:8px 6px; text-align:left; }
  .dash-table th{ font-size:10px; text-transform:uppercase; color:var(--muted); font-weight:800; }
  .dash-table td:last-child, .dash-table th:last-child{ text-align:right; }
  .dash-empty{ font-size:12px; color:var(--muted2); padding:10px 0; }
  /* ---------- лого компании (оформление PDF) ---------- */
  .logo-preview-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .logo-preview{
    width:64px; height:64px; border-radius:12px; border:2px solid var(--grey);
    background:
      linear-gradient(45deg, #e3e3dc 25%, transparent 25%), linear-gradient(-45deg, #e3e3dc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #e3e3dc 75%), linear-gradient(-45deg, transparent 75%, #e3e3dc 75%);
    background-size:12px 12px; background-position:0 0, 0 6px, 6px -6px, -6px 0;
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  }
  .logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
  .logo-preview-empty{ font-size:10px; color:var(--muted2); text-align:center; padding:4px; }

  /* ---------- общий чат компании ---------- */
  /* .card переходит в режим "чат" (класс chat-mode вешается/снимается из chat.js
     в openChat()/leaveChat()) — тянется на весь доступный экран, .body/.chat-wrap
     идут через flex:1, так что chat-wrap всегда доходит ровно до низа карточки,
     без хардкода в vh/px, который не совпадал на разных устройствах. */
  .card.chat-mode{
    display:flex; flex-direction:column;
    height:calc(100vh - 40px); /* 40px = верх+низ padding у body (20px+20px) */
    max-height:760px;
  }
  .card.chat-mode .body{
    flex:1; display:flex; flex-direction:column; overflow:hidden;
    padding:22px 22px 0; /* низ без паддинга — chat-wrap сам доходит до края карточки */
  }
  .chat-wrap{ display:flex; flex-direction:column; flex:1; min-height:0; margin:0 -22px 0; }
  .chat-header-row{ display:flex; align-items:center; justify-content:space-between; padding:0 20px 12px; }
  .chat-title{ font-family:'Golos Text'; font-weight:700; font-size:16px; color:var(--text); }
  .chat-body{
    flex:1; overflow-y:auto; padding:14px 20px; position:relative;
    background-color:var(--panel-bg);
    background-image:url("w_chat_white.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }
  [data-theme="dark"] .chat-body{
    background-image:url("w_chat_dark.png");
  }
  .chat-day-sep{ text-align:center; margin:14px 0 10px; }
  .chat-day-sep span{
    display:inline-block; background:var(--surface); color:var(--muted); font-size:10px; font-weight:800;
    text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px;
  }
  .chat-msg-row{ display:flex; gap:8px; margin-bottom:10px; align-items:flex-end; }
  .chat-msg-row.mine{ flex-direction:row-reverse; }
  .chat-msg-avatar{
    width:28px; height:28px; border-radius:50%; background:var(--grey); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--text);
    overflow:hidden;
  }
  .chat-msg-avatar img{ width:100%; height:100%; object-fit:cover; }
  .chat-msg-bubble{ max-width:74%; background:var(--surface); border-radius:14px 14px 14px 4px; padding:9px 12px; transition:opacity .15s; }
  .chat-msg-row.mine .chat-msg-bubble{ background:var(--lime); color:var(--graphite); border-radius:14px 14px 4px 14px; }
  .chat-msg-row.pressing .chat-msg-bubble{ opacity:.55; }
  .chat-msg-sender{ font-size:11px; font-weight:800; color:var(--deep); margin-bottom:2px; }
  .chat-msg-row.mine .chat-msg-sender{ display:none; }
  .chat-msg-text{ font-size:14px; font-weight:600; line-height:1.4; color:var(--text); white-space:pre-wrap; word-break:break-word; }
  .chat-msg-row.mine .chat-msg-text{ color:var(--graphite); }
  .chat-msg-time{ font-size:10px; color:var(--muted2); margin-top:3px; text-align:right; }
  .chat-msg-row.mine .chat-msg-time{ color:rgba(32,35,33,.55); }
  .chat-msg-image{ display:block; max-width:100%; border-radius:10px; margin-bottom:6px; cursor:pointer; }
  .chat-msg-file{
    display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.06); border-radius:10px;
    padding:8px 10px; margin-bottom:6px; text-decoration:none; color:inherit; font-size:12px; font-weight:700;
  }
  .chat-empty{ font-size:13px; color:var(--muted); text-align:center; padding:30px 0; }
  .chat-input-bar{ display:flex; align-items:flex-end; gap:8px; padding:12px 20px; background:var(--surface); border-top:2px solid var(--grey); }
  .chat-attach-btn{
    width:38px; height:38px; border-radius:50%; border:none; background:var(--grey); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .chat-attach-btn:active{ background:var(--lime); }
  .chat-text-input{
    flex:1; border:2px solid var(--grey); background:var(--surface); border-radius:18px;
    padding:9px 14px; font-weight:600; font-size:14px; color:var(--text); outline:none;
    resize:none; max-height:100px; font-family:'Manrope';
  }
  .chat-send-btn{
    width:38px; height:38px; border-radius:50%; border:none; background:var(--graphite); color:var(--lime);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .chat-send-btn:disabled{ opacity:.4; }
  .chat-pending-chip{ font-size:11px; color:var(--muted); padding:4px 20px 0; }

  /* ============================================================
     ДЕСКТОП (широкий экран, например админ за компьютером в офисе).
     Ниже 1100px ширины окна — всё как было (телефон/планшет не трогаем).
     Сама карточка расширяется почти на весь экран, но НЕ всё её содержимое
     растягивается пропорционально: поля ввода, кнопки, подпись и т.п.
     нарочно остаются компактными и центрированными — 1300px-широкая кнопка
     или строка ввода читается и нажимается хуже, чем обычная. А вот списки,
     таблицы и карточки метрик дашборда, наоборот, используют освободившееся
     место — там больше ширины действительно помогает. ============================================================ */
  @media (min-width: 1100px){
    body{ padding:40px; }
    .card{ max-width:1400px; border-radius:28px; }
    .body{ padding:36px 56px; }

    input, select, .fake-select, textarea.fe-formula{ max-width:560px; }
    .btn{ max-width:340px; }
    .sig-wrap, canvas, .sketch-wrap{ max-width:560px; }
    .calc-box, .result-box{ max-width:560px; }

    /* карточки метрик дашборда — сами подбирают число колонок под ширину,
       вместо фиксированных двух колонок как на телефоне */
    .dash-cards{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }

    /* общий чат — тоже не растягиваем сообщения на всю ширину широкой карточки */
    .chat-msg-bubble{ max-width:480px; }
    .card.chat-mode{ height:calc(100vh - 80px); max-height:900px; } /* 80px = новый padding body (40+40) */
  }
  /* совсем большие мониторы (2K/ultrawide) — даём карточке чуть больше места */
  @media (min-width: 1700px){
    .card{ max-width:1600px; }
  }

/* ---------- тост (флаг присутствия) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: #202321; color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s;
  z-index: 9999; max-width: 90vw; text-align: center; cursor: pointer;
}
.toast.toast-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- подсказки о повторном адресе ---------- */
.addr-matches { margin-bottom: 12px; }
.addr-match-btn {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border, #e3e5df);
  background: transparent; font-size: 13px; color: inherit; cursor: pointer;
}

/* ---------- рейтинг недели ---------- */
.lb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lb-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: var(--card-alt, #f3f4ef); flex-wrap: wrap;
}
.lb-row-me { outline: 2px solid var(--lime, #d7f24a); }
.lb-rank { font-weight: 800; min-width: 24px; }
.lb-name { font-weight: 700; margin-right: auto; }
.lb-count, .lb-avg, .lb-clean { font-size: 12px; color: #8b8f85; }

/* ==================== ОНБОРДИНГ (onboarding.js) ==================== */
.onb-slide-dots{ display:flex; justify-content:center; gap:6px; margin:2px 0 16px; }
.onb-dot{ width:7px; height:7px; border-radius:50%; background:var(--grey); }
.onb-dot.active{ background:var(--graphite); }

/* Подсветка кнопки, на которую сейчас указывает тур: лёгкое затемнение вокруг
   через box-shadow с огромным spread — без отдельного затемняющего div поверх
   экрана. */
.onb-highlight{
  position:relative; z-index:1002; border-radius:10px;
  box-shadow:0 0 0 4px var(--lime), 0 0 0 9999px rgba(0,0,0,.45);
}

.onb-coach{
  position:fixed; z-index:1003; max-width:260px;
  background:var(--surface); border-radius:14px; padding:14px 16px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.5);
}
.onb-coach::before{
  content:''; position:absolute; left:var(--onb-arrow-left, 20px);
  width:12px; height:12px; background:var(--surface); transform:rotate(45deg);
}
.onb-coach.onb-arrow-up::before{ top:-6px; }
.onb-coach.onb-arrow-down::before{ bottom:-6px; }
.onb-coach p{ font-size:13px; line-height:1.4; color:var(--text); margin:0 0 10px; font-weight:700; }
.onb-coach-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.onb-coach-step{ font-size:11px; color:var(--muted2); }
.onb-coach-next{
  background:var(--graphite); color:var(--lime); border:none; border-radius:10px;
  padding:8px 14px; font-family:'Golos Text'; font-weight:700; font-size:12px; cursor:pointer;
}
.onb-coach-skip{ background:none; border:none; color:var(--muted); text-decoration:underline; font-size:11px; cursor:pointer; padding:4px; margin-right:4px; }