/* Эмодзи рисуются шрифтом Twemoji (одинаково на всех системах); остальной текст — системным шрифтом */
  @font-face { font-family:Twemoji; src:url(twemoji.woff2) format('woff2'); font-display:swap;
    unicode-range:U+00A9, U+00AE, U+200D, U+203C, U+2049, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF; }
  :root { --bg:#f1f3f5; --panel:#fff; --line:#e6e8eb; --text:#1d2129; --muted:#7a808a; --accent:#0f9d76; --accent-text:#fff;
    --mine:#e3f7d0; --theirs:#fff; --hover:#f2f4f6; --chat-bg:#dfe9dc; --chat-pattern:rgba(15,157,118,.07); --shadow:0 1px 1.5px rgba(0,0,0,.13); }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#14161a; --panel:#1c1f24; --line:#2a2e35; --text:#e6e8eb; --muted:#8b919b; --accent:#2fc493; --accent-text:#0b1f18;
      --mine:#1f5141; --theirs:#262a31; --hover:#242830; --chat-bg:#0f1714; --chat-pattern:rgba(47,196,147,.05); --shadow:0 1px 1.5px rgba(0,0,0,.4); }
  }
  * { box-sizing:border-box; }
  /* Размер текста: все шрифты в rem. На широких мониторах базовый размер растёт сам; в настройках его можно задать вручную */
  html { font-size:100%; }
  @media (min-width:1800px) { html { font-size:112.5%; } }
  @media (min-width:2400px) { html { font-size:125%; } }
  body { margin:0; font:0.9375rem/1.4 Twemoji, system-ui, sans-serif; background:var(--bg); color:var(--text); height:100vh; }
  button, input, textarea { font:inherit; color:inherit; }
  button { cursor:pointer; border:0; border-radius:10px; padding:8px 14px; background:var(--accent); color:var(--accent-text); transition:background .15s, color .15s; }
  button.ghost { background:transparent; color:var(--muted); padding:6px 8px; }
  button.ghost:hover { background:var(--hover); color:var(--text); }
  .icon { width:1.25em; height:1.25em; flex-shrink:0; vertical-align:-.25em; }
  .icon-btn { width:2.5rem; height:2.5rem; padding:0; border-radius:50%; display:inline-grid; place-items:center; }
  input, textarea { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); outline:none; }
  input:focus, textarea:focus { border-color:var(--accent); }
  .hidden { display:none !important; }
  .err { color:#e5484d; min-height:1.4em; font-size:0.8125rem; }

  /* стартовая страница (она же экран входа) */
  #login { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:0 20px;
    background:radial-gradient(1200px 500px at 50% -10%, rgba(15,157,118,.16), transparent 70%), var(--bg); }
  #login > * { width:100%; max-width:1040px; }
  .land-nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; }
  .brand .logo { width:2.2rem; height:2.2rem; border-radius:22%; }
  .hero { text-align:center; padding:7vh 0 5vh; }
  .hero h1 { font-size:clamp(2rem, 4.5vw, 3.4rem); line-height:1.1; margin:0 auto 18px; max-width:760px; letter-spacing:-.02em; }
  .hero .lead { font-size:1.15rem; color:var(--muted); max-width:640px; margin:0 auto 32px; }
  #auth { max-width:340px; margin:0 auto; }
  #oauthBtns { display:flex; flex-direction:column; gap:10px; }
  button.oauth { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; font-size:1rem; font-weight:600; border-radius:12px;
    background:var(--panel); color:var(--text); box-shadow:var(--shadow), 0 0 0 1px var(--line) inset; }
  button.oauth:hover { box-shadow:0 4px 14px rgba(0,0,0,.12), 0 0 0 1px var(--accent) inset; }
  button.oauth .mark { width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.9rem; color:#fff; }
  button.oauth.google .mark { background:#4285f4; } button.oauth.yandex .mark { background:#fc3f1d; } button.oauth.mailru .mark { background:#005ff9; }
  .fine { font-size:.8125rem; color:var(--muted); margin:14px 0 0; }
  .features { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; padding:3vh 0; }
  .feature { background:var(--panel); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
  .feature > .icon { width:2.6rem; height:2.6rem; padding:.55rem; border-radius:12px; background:rgba(15,157,118,.12); color:var(--accent); }
  .feature h3 { margin:14px 0 6px; font-size:1.05rem; }
  .feature p { margin:0; color:var(--muted); font-size:.9rem; }
  .steps { text-align:center; padding:5vh 0; }
  .steps h2 { margin:0 0 18px; }
  .steps ol { list-style:none; padding:0; margin:0 auto 26px; display:grid; gap:10px; max-width:460px; counter-reset:s; text-align:left; }
  .steps li { counter-increment:s; display:flex; gap:12px; align-items:center; background:var(--panel); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); }
  .steps li::before { content:counter(s); width:1.8rem; height:1.8rem; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
    background:var(--accent); color:var(--accent-text); font-weight:700; }
  .steps > button { padding:12px 28px; font-size:1rem; font-weight:600; border-radius:12px; }
  .land-foot { text-align:center; color:var(--muted); font-size:.8125rem; padding:24px 0 32px; }

  #app { display:flex; height:100vh; }
  #side { width:320px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; }
  #side header { display:flex; align-items:center; gap:2px; padding:8px 8px 8px 14px; }
  #side header .me { flex:1; font-size:0.8125rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #search { margin:8px 12px; width:auto; border-radius:20px; background:var(--bg); border-color:transparent; padding:8px 16px; }
  #search:focus { background:var(--panel); border-color:var(--accent); }
  #list { flex:1; overflow-y:auto; }
  .chat-item { display:flex; gap:12px; padding:8px 10px; margin:0 6px; border-radius:12px; cursor:pointer; align-items:center; }
  .chat-item:hover { background:var(--hover); }
  .chat-item.active { background:var(--accent); color:var(--accent-text); }
  .chat-item.active .sub { color:inherit; opacity:.85; }
  .chat-item.active .badge { background:var(--accent-text); color:var(--accent); }
  .avatar { width:3rem; height:3rem; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-weight:600; font-size:1.05rem;
    background-image:linear-gradient(rgba(255,255,255,.18), rgba(0,0,0,.08)); }
  .chat-item .name { font-weight:600; }
  .chat-item .info { flex:1; min-width:0; }
  .chat-item .name, .chat-item .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-item .sub { font-size:0.8125rem; color:var(--muted); }
  .badge { background:var(--accent); color:var(--accent-text); border-radius:10px; font-size:0.75rem; font-weight:600; padding:1px 7px; min-width:1.5em; text-align:center; }

  #main { flex:1; display:flex; flex-direction:column; min-width:0; }
  #main header { display:flex; align-items:center; gap:6px; padding:8px 12px 8px 16px; background:var(--panel); border-bottom:1px solid var(--line); min-height:61px; }
  #main header .avatar { width:2.6rem; height:2.6rem; margin-right:6px; }
  #peerName { font-weight:600; }
  #main header .title { flex:1; min-width:0; }
  #main header .title div:last-child { font-size:0.8125rem; color:var(--muted); }
  #back { display:none; }
  /* лента: фон с лёгким узором, сообщения — «пузыри» со скруглённым краем со стороны отправителя */
  #msgs { flex:1; overflow-y:auto; padding:16px max(16px, calc((100% - 860px) / 2)); display:flex; flex-direction:column; gap:4px;
    background-color:var(--chat-bg); background-image:radial-gradient(var(--chat-pattern) 1.5px, transparent 1.6px); background-size:22px 22px; }
  body.msgs-edges #msgs { padding-left:16px; padding-right:16px; }
  .msg { max-width:70%; padding:7px 11px 6px; border-radius:16px 16px 16px 6px; background:var(--theirs); box-shadow:var(--shadow);
    white-space:pre-wrap; word-wrap:break-word; align-self:flex-start; position:relative; }
  .msg.mine { background:var(--mine); border-radius:16px 16px 6px 16px; align-self:flex-end; }
  .msg .meta { font-size:0.6875rem; color:var(--muted); margin-top:2px; text-align:right; display:flex; justify-content:flex-end; align-items:center; gap:3px; }
  .msg .subj { font-size:0.75rem; color:var(--muted); font-weight:600; margin-bottom:2px; }
  .day { align-self:center; font-size:0.75rem; color:#fff; background:rgba(0,0,0,.28); padding:3px 10px; border-radius:12px; margin:10px 0; }
  #empty { margin:auto; color:var(--muted); text-align:center; }
  #composer { display:flex; gap:6px; align-items:flex-end; padding:8px 12px; background:var(--panel); border-top:1px solid var(--line); }
  #composer textarea { resize:none; height:42px; max-height:160px; border-radius:21px; padding:10px 16px; background:var(--bg); border-color:transparent; }
  #composer textarea:focus { background:var(--panel); border-color:var(--accent); }
  button.send { width:2.6rem; height:2.6rem; padding:0; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }

  @media (max-width:700px) {
    #side { width:100%; }
    #app.open #side { display:none; }
    #app:not(.open) #main { display:none; }
    #back { display:inline-block; }
    .msg { max-width:88%; }
  }

  #encInfo { padding:0 16px; font-size:0.75rem; color:var(--muted); }
  #encInfo .banner { margin:4px 0; padding:6px 10px; border-radius:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  #encInfo .banner:empty { display:none; }
  #encInfo .banner.warn { background:#fff3cd; color:#664d03; }
  #encInfo .banner.danger { background:#f8d7da; color:#842029; }
  #encInfo .banner.ok { color:#1a7f37; }
  #encInfo .banner button { padding:3px 10px; font-size:0.75rem; }
  @media (prefers-color-scheme: dark) { #encInfo .banner.warn { background:#3d3310; color:#ffda6a; } #encInfo .banner.danger { background:#3c1d21; color:#ea868f; } #encInfo .banner.ok { color:#56d364; } }
  .msg.bad { opacity:.75; font-style:italic; border-style:dashed; }

#pending { display:flex; flex-wrap:wrap; gap:6px; padding:6px 16px 0; background:var(--panel); border-top:1px solid var(--line); }
#pending .chip { display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:2px 6px 2px 10px; font-size:0.75rem; }
#pending .chip button { padding:0 4px; background:transparent; color:var(--muted); }
.file { margin-top:4px; }
.file .thumb { max-width:260px; max-height:260px; border-radius:10px; display:block; cursor:zoom-in; }
.file button.chip { background:transparent; color:var(--accent); padding:2px 0; text-align:left; }
.file .note { font-size:0.75rem; color:var(--muted); }

#tabs { display:flex; gap:4px; margin:0 12px; padding:3px; background:var(--bg); border-radius:12px; }
#tabs button { flex:1; border-radius:9px; background:transparent; color:var(--muted); padding:6px 0; font-weight:500; }
#tabs button.active { background:var(--panel); color:var(--text); box-shadow:var(--shadow); }

.msg.html { max-width:min(760px, 96%); width:100%; white-space:normal; padding:6px; }
.mailframe { width:100%; min-height:60px; border:0; border-radius:8px; background:#fff; display:block; }
.mailhtml .note { font-size:0.75rem; color:var(--muted); padding:4px 4px 0; }

dialog#settings { border:0; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25); background:var(--panel); color:var(--text); padding:20px 24px; max-width:420px; }
dialog#settings::backdrop { background:rgba(0,0,0,.4); }
dialog#settings h2 { margin:0 0 12px; font-size:1.125rem; }
dialog#settings label { display:flex; gap:10px; align-items:center; margin:10px 0; cursor:pointer; }
dialog#settings input, dialog#settings select { width:auto; }
dialog#settings .hint { font-size:0.75rem; color:var(--muted); margin:6px 0 14px; }

.day.sys { font-style:italic; background:transparent; }
.msg .sender { font-size:0.75rem; font-weight:600; color:var(--accent); margin-bottom:2px; }
/* действия с сообщением появляются при наведении (на сенсорных экранах видны всегда) */
.msg .actions { display:flex; gap:2px; margin-top:4px; }
@media (hover:hover) {
  .msg .actions { position:absolute; top:-16px; right:8px; margin:0; padding:2px; background:var(--panel); border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.18);
    opacity:0; pointer-events:none; transition:opacity .15s; z-index:2; white-space:nowrap; }
  .msg:hover .actions, .msg:focus-within .actions { opacity:1; pointer-events:auto; }
  .msg:not(.mine) .actions { right:auto; left:8px; }
}
.msg .actions .chip { background:transparent; color:var(--muted); padding:2px 6px; border-radius:8px; font-size:0.75rem; display:inline-flex; align-items:center; gap:4px; }
.msg .actions .chip:hover { background:rgba(127,127,127,.15); color:var(--accent); }
#main { position:relative; }
#thread { position:absolute; right:0; top:61px; bottom:0; width:min(380px, 100%); background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; z-index:5; }
#thread > header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); min-height:0; }
#threadMsgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:6px; }
#threadForm { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
#threadForm textarea { resize:none; height:42px; }
dialog#groupDlg { border:0; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25); background:var(--panel); color:var(--text); padding:20px 24px; width:min(460px, 92vw); }
dialog#groupDlg::backdrop { background:rgba(0,0,0,.4); }
dialog#groupDlg h2 { margin:0 0 12px; font-size:1.125rem; }
dialog#groupDlg label.col { display:flex; flex-direction:column; gap:4px; margin:10px 0; font-size:0.8125rem; color:var(--muted); }
dialog#groupDlg .row { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
#gMembers { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
#gMembers .chip { display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:2px 6px 2px 10px; font-size:0.75rem; }
#gMembers .chip.removed { opacity:.4; text-decoration:line-through; }
#gMembers .chip button { padding:0 4px; background:transparent; color:var(--muted); }

.msg.md { white-space:normal; }
.md > :first-child { margin-top:0; } .md > :last-child { margin-bottom:0; }
.md p { margin:0 0 6px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin:8px 0 4px; line-height:1.25; }
.md h1 { font-size:1.35em; } .md h2 { font-size:1.2em; } .md h3 { font-size:1.08em; } .md h4, .md h5, .md h6 { font-size:1em; }
.md ul, .md ol { margin:0 0 6px; padding-left:22px; } .md li.task { list-style:none; margin-left:-18px; } .md li.task input { margin-right:6px; }
.md blockquote { margin:0 0 6px; padding:2px 10px; border-left:3px solid var(--line); color:var(--muted); }
.md code { font-family:ui-monospace, Consolas, monospace; font-size:.9em; background:rgba(127,127,127,.18); padding:1px 5px; border-radius:5px; }
.md pre { margin:0 0 6px; padding:8px 10px; background:rgba(127,127,127,.15); border-radius:8px; overflow-x:auto; white-space:pre; }
.md pre code { background:transparent; padding:0; }
.md hr { border:0; border-top:1px solid var(--line); margin:8px 0; }
.md a { color:var(--accent); word-break:break-all; }
.md table { border-collapse:collapse; margin:0 0 6px; display:block; overflow-x:auto; }
.md th, .md td { border:1px solid var(--line); padding:3px 8px; } .md th { background:rgba(127,127,127,.12); }

button.older { align-self:center; background:transparent; color:var(--accent); border:1px solid var(--line); padding:4px 12px; font-size:0.8125rem; }
.msg.deleted { opacity:.6; font-style:italic; }
.msg.mentioned { box-shadow:0 0 0 2px rgba(255,170,0,.55); }
.msg.flash { animation:flash 2.4s ease-out; }
@keyframes flash { 0%,60% { box-shadow:0 0 0 3px var(--accent); } 100% { box-shadow:none; } }
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.reactions .react { background:rgba(127,127,127,.12); color:var(--text); border:0; border-radius:12px; padding:2px 8px; font-size:0.8125rem; }
.reactions .react.mine { background:var(--accent); color:var(--accent-text); }
.mention { color:var(--accent); font-weight:600; } .mention.me { background:rgba(255,170,0,.3); border-radius:4px; padding:0 2px; }
#chatSearchBar { display:flex; align-items:center; gap:10px; padding:6px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
#chatSearchBar input { flex:1; } #chatSearchCount { font-size:0.75rem; color:var(--muted); white-space:nowrap; }
#replyBar > .icon, #editBar > .icon { color:var(--accent); }
#replyBar { padding:6px 16px; font-size:0.8125rem; background:var(--panel, #eef3fb); color:var(--text); display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); }
#replyBar span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg .tick { display:inline-flex; opacity:.7; } .msg .tick .icon { width:1.1em; height:1.1em; }
.msg .tick.read { color:var(--accent); opacity:1; }
#editBar { padding:6px 16px; font-size:0.8125rem; background:#fff3cd; color:#664d03; display:flex; align-items:center; gap:10px; }
#mentions { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:8px; margin:0 16px; max-width:320px; overflow:hidden; }
#mentions button { background:transparent; color:var(--text); text-align:left; border-radius:0; padding:6px 10px; }
#mentions button:hover { background:var(--bg); }
.search-head { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:0.8125rem; color:var(--muted); border-bottom:1px solid var(--line); }
.search-item .snippet { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }