/* Rovitek на компьютере (широкий экран) — как WhatsApp Web 2025.
   На телефоне эти блоки скрыты, работает вид iPhone (ios.css). */
.rail, .dk-head { display: none; }

@media (min-width: 900px) {
  :root {
    --wa-green: #1daa61;
    --wa-green-2: #25d366;
    --wa-panel: #ffffff;
    --wa-rail: #f7f5f3;
    --wa-line: #e9edef;
    --wa-text: #111b21;
    --wa-text-2: #667781;
    --wa-icon: #54656f;
    --wa-hover: #f7f5f3;
    --wa-sel: #f0ede9;
    --wa-search: #f0f2f5;
    --wa-bg: #f7f5f3;
    --wa-chat-bg: #efeae2;
    --wa-out: #d9fdd3;
    --wa-in: #ffffff;
    --wa-meta: #667781;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --wa-panel: #111b21; --wa-rail: #1d1f1f; --wa-line: #222d34; --wa-text: #e9edef; --wa-text-2: #8696a0;
      --wa-icon: #aebac1; --wa-hover: #202c33; --wa-sel: #2a3942; --wa-search: #202c33; --wa-bg: #161717;
      --wa-chat-bg: #0b141a; --wa-out: #005c4b; --wa-in: #202c33; --wa-meta: rgba(233, 237, 239, .6);
    }
  }

  body { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }

  /* ---------- колонка значков ---------- */
  .rail {
    display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 64px; height: 100%;
    padding: 12px 0 14px; background: var(--wa-rail); border-right: 1px solid var(--wa-line);
  }
  .rail-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--wa-icon); }
  .rail-btn svg.i { width: 24px; height: 24px; }
  .rail-btn:hover { background: rgba(0, 0, 0, .05); }
  .rail-btn.on { background: rgba(0, 0, 0, .08); color: var(--wa-text); }
  @media (prefers-color-scheme: dark) { .rail-btn:hover { background: rgba(255,255,255,.06); } .rail-btn.on { background: rgba(255,255,255,.1); } }
  .rail-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--wa-green-2);
    color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--wa-rail); }
  .rail-me .me-ava { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #dfe5e7; display: grid; place-items: center; color: #fff; }
  .rail-me .me-ava img { width: 100%; height: 100%; object-fit: cover; }
  .rail-me .me-ava svg.i { width: 22px; height: 22px; }

  /* ---------- список чатов ---------- */
  .side { width: 30%; min-width: 340px; max-width: 560px; flex: none; background: var(--wa-panel); border-right: 1px solid var(--wa-line); }
  .side .ios-top, .side .large-title, .tabbar { display: none !important; }
  .scroll.has-tabbar::after { height: 0; }
  .dk-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 10px 20px; min-height: 64px; flex: none; }
  .dk-title { flex: 1; font-size: 22px; font-weight: 700; color: var(--wa-text); }
  .dk-title.brand { color: var(--wa-green); }
  .dk-head .icon-btn { width: 40px; height: 40px; color: var(--wa-icon); }
  .dk-head .icon-btn:hover { background: rgba(0,0,0,.05); }
  .dk-plus { width: 40px; height: 40px; border-radius: 50%; background: var(--wa-green); color: #fff; display: grid; place-items: center; flex: none; }
  .dk-plus svg.i { width: 24px; height: 24px; }
  .dk-plus:hover { filter: brightness(1.05); }

  .side .search { margin: 2px 16px 10px; height: 40px; border-radius: 20px; background: var(--wa-search); padding: 0 16px; gap: 14px; color: var(--wa-icon); }
  .side .search svg.i { width: 20px; height: 20px; }
  .side .search input { font-size: 15px; color: var(--wa-text); }
  .side .search input::placeholder { color: var(--wa-text-2); }
  .side .chips { padding: 0 16px 8px; gap: 8px; }
  .side .chip { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--wa-line); background: transparent; color: var(--wa-text-2); font-size: 14.5px; font-weight: 500; }
  .side .chip:hover { background: var(--wa-hover); }
  .side .chip.on { background: var(--wa-out); border-color: transparent; color: #0a6d36; }
  @media (prefers-color-scheme: dark) { .side .chip.on { background: #103529; color: #d8fdd2; } }
  .side .chip .cn { font-weight: 400; }

  /* строки как в новом WhatsApp Web: без линий, выбранный/наведённый чат — скруглённая плашка */
  .side .row { min-height: 72px; margin: 0 8px; padding: 0 0 0 12px; gap: 13px; cursor: pointer; border-radius: 12px; transition: background .12s; }
  .side .row:hover { background: var(--wa-hover); }
  .side .row.sel, .side .row.sel:hover { background: var(--wa-sel); }
  .side .row .body, .side .row:last-child .body { min-height: 72px; padding: 10px 14px 10px 0; border-bottom: 0; }
  .side .row .ava { width: 49px; height: 49px; }
  .side .row .name { font-size: 17px; font-weight: 400; color: var(--wa-text); }
  .side .row .time { font-size: 12px; color: var(--wa-text-2); }
  .side .row .time.unread { color: var(--wa-green-2); }
  .side .row .prev { font-size: 14px; line-height: 20px; color: var(--wa-text-2); -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
  .side .row .prev .who { color: var(--wa-text-2); }
  .side .row .prev svg.i { width: 16px; height: 16px; }
  .side .row .sub { font-size: 14px; }
  .side .badge { min-width: 20px; height: 20px; font-size: 12px; background: var(--wa-green-2); }
  .side .section-title { font-size: 16px; color: var(--wa-green); padding: 20px 20px 10px; }
  .side .page-head { min-height: 64px; padding: 12px 12px 8px; }
  .side .page-head .t { text-align: left; font-size: 19px; font-weight: 500; }
  .side .item { margin-left: 0; padding: 14px 20px; border-bottom: 1px solid var(--wa-line); }
  .side .item:hover { background: var(--wa-hover); }

  /* ---------- правая панель: приветствие ---------- */
  .empty-main { background: var(--wa-bg); border-bottom: 0; gap: 26px; }
  .welcome-card { width: 460px; max-width: 90%; background: var(--wa-panel); border-radius: 24px; padding: 34px 32px 26px; text-align: center;
    box-shadow: 0 1px 3px rgba(11, 20, 26, .06); display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .welcome-ill { width: 150px; height: 104px; border-radius: 18px; background: linear-gradient(135deg, #e7f8ec, #d9fdd3); display: grid; place-items: center; margin-bottom: 10px; }
  @media (prefers-color-scheme: dark) { .welcome-ill { background: linear-gradient(135deg, #103529, #0b2a20); } }
  .welcome-ill img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 16px rgba(29, 170, 97, .3); }
  .welcome-card h2 { margin: 0; font-size: 26px; font-weight: 500; color: var(--wa-text); }
  .welcome-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 20px; color: var(--wa-text-2); }
  .welcome-link { background: #d9fdd3; color: #0a6d36; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 18px; }
  @media (prefers-color-scheme: dark) { .welcome-link { background: #103529; color: #d8fdd2; } }
  .welcome-acts { display: flex; gap: 30px; }
  .welcome-acts button { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; color: var(--wa-text); }
  .welcome-acts button span { width: 64px; height: 64px; border-radius: 50%; background: var(--wa-panel); display: grid; place-items: center; color: var(--wa-icon);
    box-shadow: 0 1px 3px rgba(11, 20, 26, .08); transition: background .15s; }
  .welcome-acts button:hover span { background: var(--wa-hover); }

  /* ---------- окно чата ---------- */
  .chat { background: var(--wa-chat-bg); }
  .chat-head {
    position: relative; inset: auto; z-index: 3; min-height: 64px; padding: 10px 16px; gap: 14px;
    background: var(--wa-panel); border-bottom: 1px solid var(--wa-line);
  }
  .chat-head::before { display: none; }
  .back-pill { display: none !important; }
  .chat-head .who .ava { width: 40px; height: 40px; }
  .chat-head .who .n { font-size: 16px; font-weight: 500; color: var(--wa-text); }
  .chat-head .who .s { font-size: 13px; color: var(--wa-text-2); }
  .call-pill { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 4px; }
  .call-pill button { width: 40px; height: 40px; border-radius: 50%; color: var(--wa-icon); }
  .call-pill button:hover { background: rgba(0,0,0,.05); }
  .msgs { padding: 14px 0 8px; }
  .m { padding: 0 6%; }
  .day { top: 8px; font-size: 12.5px; font-weight: 400; color: var(--wa-text-2); background: var(--wa-panel); border-radius: 8px; padding: 5px 12px; }
  .conn { top: 72px; }

  /* пузыри как в WhatsApp Web: скругление 8, хвостик вверху у первого в серии */
  .bubble { border-radius: 8px; padding: 6px 8px 8px 9px; font-size: 14.2px; line-height: 19px; max-width: 65%; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
  .m .bubble, .m.out .bubble { background: var(--wa-in); }
  .m.out .bubble { background: var(--wa-out); }
  .m.last .bubble, .m.out.last .bubble { border-radius: 8px; }
  .m.last .bubble::after { display: none; }
  .m.first .bubble { border-top-left-radius: 0; }
  .m.out.first .bubble { border-top-left-radius: 8px; border-top-right-radius: 0; }
  .m.first .bubble::before, .m.out.first .bubble::before {
    display: block; content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .m.out.first .bubble::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .m.first { margin-top: 12px; }
  .m.last { margin-bottom: 0; }
  .bubble .meta { font-size: 11px; color: var(--wa-meta) !important; bottom: 3px; right: 7px; }
  .bubble .meta-pad { width: 46px; }
  .m.out .bubble .meta-pad { width: 66px; }
  .bubble .txt.big { font-size: 40px; }
  .bubble .author { font-size: 12.8px; }
  .bubble.media { padding: 3px; border-radius: 8px; }
  .bubble.media .photo { border-radius: 6px; }
  .callmsg .ct { font-size: 14.5px; font-weight: 500; }
  .callmsg .cs { font-size: 13px; }
  .callmsg .ci { width: 40px; height: 40px; }

  /* поле ввода — белая «таблетка» как в WhatsApp Web */
  .composer { padding: 8px 16px 14px; background: none; gap: 8px; align-items: center; }
  .composer .plain-btn[aria-label="Камера"] { display: none; }
  .composer .plain-btn { color: var(--wa-icon); width: 42px; height: 42px; border-radius: 50%; }
  .composer .plain-btn:hover { background: rgba(0,0,0,.05); }
  .composer .field { border-radius: 24px; box-shadow: 0 1px 2px rgba(11, 20, 26, .08); background: var(--wa-panel); }
  .composer .field .row-in { min-height: 48px; padding: 0 6px 0 4px; }
  .composer textarea { font-size: 15px; padding: 13px 8px 13px 14px; color: var(--wa-text); }
  .composer textarea::placeholder { color: var(--wa-text-2); }
  .composer .field .icon-btn { color: var(--wa-icon); width: 40px; height: 40px; align-self: center; }
  .send-btn { width: 48px; height: 48px; background: var(--wa-green); }
  .emoji-panel { margin: 0 16px 10px; border-radius: 16px; border: 1px solid var(--wa-line); height: 300px; }

  /* страницы инфо/профиля справа */
  .main .page { background: var(--wa-panel); }
}