/* =========================================================
   1) ZMIENNE, RESET, BAZA
   ========================================================= */
:root { --bg:#f6f7fb; --card:#fff; --bd:#e6e6e6; --ink:#111; --mut:#6b7280; --pri:#111; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background-image:url("img/bg2.svg"); background-size:cover; background-repeat:no-repeat; background-position:center; color:var(--ink); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; }

/* =========================================================
   2) NAGŁÓWKI I LAYOUT STRONY
   ========================================================= */
.site-head { padding:14px 18px; border-bottom:1px solid var(--bd); background:#fff; position:sticky; top:0; }
.title { font-weight:800; letter-spacing:.2px; }
.hint { font-size:12px; opacity:.8; }
.site-main { padding:10px; }

/* =========================================================
   3) KARTY, FORMULARZE, PRZYCISKI, STANY
   ========================================================= */
.card { background:var(--card); border:1px solid var(--bd); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.05); }
.card .hd { padding:12px 14px; border-bottom:1px solid var(--bd); font-weight:700; }
.card .bd { padding:14px; }
label { display:block; margin:10px 0 6px; font-weight:600; }
input { width:100%; padding:10px; border:1px solid var(--bd); border-radius:8px; outline:none; }
input:focus { border-color:#999; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.btn { margin-top:14px; padding:10px 12px; border-radius:10px; border:1px solid var(--pri); background:var(--pri); color:#fff; cursor:pointer; font-weight:700; }
.err { color:#b00020; margin:8px 0; }
.mut { color:var(--mut); }
.time { margin:0 1em;display:none !important; }

/* =========================================================
   4) DROBNE ELEMENTY CHATU (emoji, badge, mini-przycisk)
   ========================================================= */
.adminChatBubble .msg .emoji { font-size:50px; line-height:1; vertical-align:-0.15em; }
.badge.unread { display:inline-block; min-width:18px; height:18px; padding:0 6px; font-size:12px; line-height:18px; text-align:center; border-radius:999px; background:#e53935; color:#fff; font-weight:700; }
.btn-chat { cursor:pointer; padding:.25rem .6rem; border:1px solid #999; background:#f7f7f7; border-radius:6px; }
.btn-chat:hover { background:#eee; }

/* =========================================================
   5) LISTA WIADOMOŚCI (SCROLL), RZĘDY WIADOMOŚCI
   ========================================================= */
#adminChatBody { padding:10px; overflow-y:auto; background:#fafafa; }
.adminChatMsg { display:flex; margin:6px 10px; }
.adminChatMsg.mine { justify-content:flex-end; }
.adminChatMsg.theirs { justify-content:flex-start; }

/* =========================================================
   6) DYMKI (BUBBLES) – WERSJA BAZOWA (dla dziennych grup itp.)
   ========================================================= */
.adminChatBubble { max-width:78%; padding:0; border-radius:12px; border:1px solid #eee; background:#fff; margin:0 8px; box-sizing:border-box; word-wrap:break-word; overflow-wrap:anywhere; }
.adminChatMsg.mine .adminChatBubble { background:#e8f2ff; border-color:#d6e7ff; }

/* =========================================================
   7) NAGŁÓWEK DYMKA, AVATAR, PRZYCISK ODPOWIEDZI
   ========================================================= */
.adminChatHead { display:flex; align-items:center; gap:8px; font-size:12px; opacity:.9; margin-bottom:6px; line-height:1.1; position:relative; }
.adminChatHead .who { font-weight:600; opacity:.95; }
.adminChatHead .sep { opacity:.6; }
.adminChatReplyBtn { position:absolute; right:0; top:0; transform:translateY(-2px); border:none; background:transparent; cursor:pointer; font-weight:700; font-size:16px; line-height:1; padding:2px 6px; color:#666; }
.adminChatReplyBtn:hover { color:#000; }
.adminChatAvatarInline { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid #ddd; flex:0 0 40px; }
.adminChatAvatarInline.initials { display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#555; background:#000; border-color:#000; font-size:12px; }

/* =========================================================
   8) TREŚĆ WIADOMOŚCI (TEKST, LINKI, CYTATY)
   ========================================================= */
.adminChatBubble .msg { font-size:17px; line-height:1.45; max-width:95%; white-space:pre-wrap; margin:1em; }
.adminChatBubble .msg a { text-decoration:underline; word-break:break-all; }
.adminChatBubble .msg .quote { font-style:italic; color:#666; font-size:14px; line-height:1.35; border-left:3px solid #e5e5e5; padding:6px 8px; margin:6px 0 8px 0; background:rgba(255,255,255,0.3); border-radius:6px; }
.adminChatBubble .msg .quote .meta { display:block; opacity:.85; margin-bottom:4px; }
.adminChatBubble .msg .quote .meta .author { font-weight:600; }

/* =========================================================
   9) PASEK „KTO PISZE…” (TYPING INDICATOR)
   ========================================================= */
.adminTypingItem { display:flex; align-items:center; gap:8px; padding:4px 8px; background:#f6f8fb; border:1px solid #e6edf5; border-radius:10px; }
.adminTypingName { font-weight:600; font-size:12px; }
.adminTypingDots { display:inline-block; min-width:22px; }
.adminTypingDots::after { content:"• • •"; letter-spacing:2px; animation:typingDots 1.2s infinite steps(4); opacity:.9; }
@keyframes typingDots { 0%{content:"•  ";opacity:.3} 25%{content:"• • ";opacity:.6} 50%{content:"• • •";opacity:.9} 75%{content:" • •";opacity:.6} 100%{content:"  •";opacity:.3} }

/* =========================================================
   10) TEXTAREA (POLE WPROWADZANIA)
   ========================================================= */
.adminChatTextarea { box-sizing:border-box; width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:8px; outline:none; background:#fff; font-size:14px; line-height:1.45; color:#111; min-height:48px; max-height:200px; resize:none; overflow:auto; }
.adminChatTextarea:focus { border-color:#999; box-shadow:0 0 0 3px rgba(0,0,0,.04);font-size:20px; }

/* =========================================================
   11) PANEL EMOJI
   ========================================================= */
#adminChatEmojiPanel { position:fixed; display:none; right:84px; bottom:160px; z-index:70000; width:460px; max-height:340px; overflow:auto; background:#000; border:1px solid #222; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:12px; }
#adminChatEmojiPanel .emojis { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
#adminChatEmojiPanel button { background:#111; border:0px solid #000; border-radius:12px; padding:12px 0; cursor:pointer; font-size:44px; line-height:1; }
#adminChatEmojiPanel button:hover { background:#222; }

/* =========================================================
   12) GRUPOWANIE DNI + ARCHIWUM (NAGŁÓWKI DNIA)
   ========================================================= */
#adminChatBody .day-group { margin:10px 0 16px; background:#fff; overflow:hidden; }
#adminChatBody .day-header { position:relative; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:16px; font-weight:700; letter-spacing:.2px; color:#223; background:#f7f7f7; cursor:pointer; user-select:none; }
.day-header .label { display:flex; align-items:center; gap:8px; }
.day-header .caret { display:inline-block; transition:transform .2s ease; width:14px; text-align:center; }
.day-group.collapsed .day-header .caret { transform:rotate(-90deg); }
.day-header .badge { font-size:12px; font-weight:600; opacity:.7; }
#adminChatArchive { display:none; margin-top:6px; padding-top:6px; border-top:1px dashed #e2e2e2; }
#adminChatArchiveBtn { width:100%; margin:8px 0 0; padding:8px 10px; cursor:pointer; border:1px solid #ddd; background:#fff; border-radius:10px; font-weight:600; }
#adminChatArchiveBtn:hover { background:#f7f7f7; }

/* =========================================================
   13) PANEL CZATU – FAB, OKNO, NAGŁÓWEK, STOPKA
   ========================================================= */
.adminChatFab { position:fixed; right:18px; bottom:18px; z-index:9999; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#111; color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.3); font-weight:600; user-select:none; }
.adminChatFabBlink { background:#c00 !important; }
.adminChatPanel { min-height:900px;position:fixed; right:18px; bottom:86px; z-index:30000; width:460px; max-height:50vh; display:none; flex-direction:column; background:#fff; border:1px solid #ddd; border-radius:14px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.25); }
.adminChatDragHandle { padding:10px 12px; font-weight:600; border-bottom:1px solid #eee; background:#f7f7f7; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.adminChatTopControls { display:flex; align-items:center; gap:2em; }
.adminChatVolLabel { font-weight:400; font-size:12px; opacity:.8; }
.adminChatVol { width:90px; }
.adminChatClose { border:none; background:transparent; font-size:18px; cursor:pointer; padding:2px 6px; }
.adminChatBody { padding:10px; overflow-y:auto; flex:1; background:#fafafa; }
.adminChatTypingBar { display:none; padding:6px 10px; border-top:4px dashed #000; background:#fff;border-bottom:4px solid #000;  }
.adminChatTyping { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.adminChatBottomBar { display:flex; gap:8px; padding:10px; border-top:4px solid #000; background:#fff; align-items:flex-end; }
.adminChatEmojiBtn { border:1px solid #ddd; background:#fff; border-radius:8px; padding:6px 8px; cursor:pointer; font-size:22px; line-height:1; }
.adminChatSend { font-size:1.4em;  color:#fff; cursor:pointer;width:70px;background: 0;border: 0; }
.adminChatEmojiPanel { position:fixed; display:none; right:84px; bottom:160px; z-index:70000; width:460px; max-height:340px; overflow:auto; background:#fff; border:1px solid #ddd; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:0; }
.adminEmojiDragHandle { cursor:move; user-select:none; padding:6px 10px; border-bottom:1px solid #eee; background:#f7f7f7; font:600 12px/1.4 system-ui,Arial; border-radius:12px 12px 0 0; }
.adminEmojiInner { padding:12px; }
.adminChatAudioHidden { display:none; }

/* =========================================================
   14) CZARNE DYMKI + BIAŁY TEKST (NADPISANIA DOCELowe)
   ========================================================= */
#adminChatBody .adminChatBubble { max-width:78%; padding:0; border-radius:12px; border:1px solid #000; background:#000; margin:0 8px; box-sizing:border-box; word-wrap:break-word; overflow-wrap:anywhere; }
#adminChatBody .adminChatMsg.mine .adminChatBubble { background:#000; border-color:#000; }
.adminChatHead { color:#fff !important; opacity:1 !important; }
.adminChatHead .who, .adminChatHead .sep, .adminChatHead .time { color:#000 !important; opacity:1 !important; }
.adminChatReplyBtn { color:#ddd !important; }
.adminChatReplyBtn:hover { color:#fff !important; }
.adminChatAvatarInline { background:#000; border:1px solid #000; }
.adminChatAvatarInline.initials { display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#000; background:#000; border-color:#000; font-size:12px; }
.adminChatBubble .msg { font-size:20px; line-height:1.45; max-width:95%; white-space:pre-wrap; color:#fff !important; }
#adminChatBody .adminChatBubble .msg a { color:#fff !important; text-decoration:underline; }
.adminChatBubble .msg q, .adminChatBubble .msg blockquote, .adminChatBubble .msg .quote { font-style:italic; color:#fff !important; }
.adminChatBubble .msg .quote { color:#fff !important; font-size:12px; line-height:1.35; border-left:3px solid rgba(255,255,255,.25); padding:6px 8px; margin:6px 0 8px 0; background:#000; border-radius:6px; }
.adminChatBubble .msg .quote .meta { display:block; margin-bottom:4px; color:#fff; }
.adminChatBubble .msg .quote .meta .author { font-weight:600; }

/* =========================================================
   15) RESPONSYWNOŚĆ (MOBILE < 600px) + SAFE AREA
   ========================================================= */
@media (max-width:600px) { #adminChatPanel { position:fixed !important; inset:0 !important; width:100% !important; max-height:100dvh !important; display:none; flex-direction:column; background:#fff; border:none !important; border-radius:0 !important; box-shadow:none !important; } #adminChatBody { padding:10px; overflow-y:auto; flex:1; background:#fafafa; overscroll-behavior:contain; scroll-behavior:smooth; } #adminChatPanel>div[style*="border-bottom"] { padding:12px !important; gap:8px !important; } #adminChatPanel>div[style*="border-top"] { padding:10px !important; gap:8px !important; align-items:flex-end !important; } #adminChatEmojiPanel { right:0 !important; left:0 !important; bottom:72px !important; width:100% !important; max-height:40vh !important; border-radius:12px 12px 0 0 !important; } .adminChatTextarea { min-height:48px; max-height:40vh; } }
@supports(padding:max(0px)) { @media (max-width:600px) { .adminChatPanel { padding-bottom:calc(env(safe-area-inset-bottom)); } .adminChatFab { right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); } } }

/* =========================================================
   16) FILTRY I TWARDY OVERRIDE UI
   ========================================================= */
#adminChatBody, .adminChatBottomBar, .adminChatEmojiPanel { filter:grayscale(100%) !important; }
#topHeader { display:none !important; }


/* Bąble zawsze pełne, czarne */
#adminChatBody .adminChatBubble,
#adminChatBody .adminChatMsg.mine .adminChatBubble,
#adminChatBody .adminChatMsg.theirs .adminChatBubble{  background:#000 !important;  border-color:#000 !important;  opacity:1 !important;}

/* Teksty w dymkach także bez opacity */
.adminChatHead,#adminChatBody .adminChatBubble .msg{  color:#fff !important;  opacity:1 !important;}

/* Gdyby gdzieś był „pending” z opacity – zabij go globalnie */
.adminChatMsg{ opacity:1 !important; }

/* (opcjonalnie) cytaty wewnątrz dymka bez półprzezroczystości */
.adminChatBubble .msg .quote{  background:#000 !important;  border-left:3px solid rgba(255,255,255,.25);}
.adminChatDeleteBtn{
  position:absolute; left:0; top:0;
  border:none; background:transparent;
  font-size:16px; font-weight:700;
  color:#888; cursor:pointer; padding:2px 6px;
}
.adminChatDeleteBtn:hover{ color:#c00; }

#adminChatHeaderAvatar .adminChatHeaderImg{  width: 24px; height: 24px;  border-radius: 50%;   margin-right: 8px;  vertical-align: middle;}
#adminChatDragHandle { display:flex; align-items:center; gap:8px;justify-content: speace-between; border-bottom:5px solid #000;}
#adminChatDragHandle span { display:flex; align-items:center; gap:8px; }
#adminChatDragHandle img{width:50px;}
#adminChatTodayBadge.adminChatTodayBadge{ order:-1;  display:inline-flex;   align-items:center;   justify-content:center;   width:30px;   height:30px;   display:flex;justify-content:center;align-items:Center;  border-radius:9999px;   background:#000;   color:#fff;   font-size:12px;   line-height:18px;   font-weight:700; } 
#adminChatTodayBadge[hidden] { display:none !important; }
#adminChatDragHandle .arrow{order:-4;}
.adminChatTopControls{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminChatIconBtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff; cursor:pointer;
}
.adminChatIconBtn:hover{ background:#f5f5f5; }

.adminChatSettingsPopup{
  position:absolute; top:38px; right:42px;  /* dostosuj jeśli trzeba */
  z-index:1000;
  min-width:220px; padding:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.adminChatSettingsPopup .row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px;
}
.adminChatSettingsPopup label{ font-size:12px; color:#333; grid-column: 1 / -1; }
.adminChatSettingsPopup input[type="range"]{ width:100%; }
.adminChatSettingsPopup .val{ width:48px; text-align:right; font-variant-numeric: tabular-nums; }


.adminChatIconImg {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
}
.adminChatIconImg:focus { outline: 2px solid #6aa3ff; outline-offset: 2px; }
#adminChatDragHandle .adminChatIconImg{width:100px;}


.adminChatDragHandle{
  display:flex;            /* ważne: w jednej linii */
  align-items:center;
  gap:8px;
  padding:6px 8px;
}

.adminChatTopControls{
  margin-left:auto;        /* wypchnij narzędzia na prawą stronę */
  display:flex;
  align-items:center;
  gap:10px;
}

.adminChatIconImg{
  width:18px; height:18px; /* na wszelki wypadek, żeby stylesheet nie nadpisał */
  display:block;           /* usuń ewentualne “dziury” liniowe */
  cursor:pointer;
  opacity:.95;
}
.adminChatIconImg:hover{ opacity:1; transform:scale(1.03); }

.adminChatTodayBadge{
  min-width:18px; height:18px; line-height:18px;
  border-radius:50%; background:#000; color:#fff;
  font-size:11px; text-align:center; padding:0 6px;
}



/* === CHAT EDITOR – UX === */
.ce-wrap{display:flex;flex-direction:column;gap:12px}
.ce-header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:10px}
.ce-actors{display:flex;align-items:center;gap:12px}
.ce-actor{display:flex;align-items:center;gap:8px}
.ce-actor.sep{width:1px;height:28px;background:#e5e7eb;margin:0 4px}
.ce-avatar{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:800}
.ce-avatar.ce-a{background:#0b79d0}
.ce-avatar.ce-b{background:#10b981}
.ce-actor-name{font-weight:700;display:flex;align-items:center;gap:8px}
.ce-actor-name img{width:100%;}
.ce-name-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid #e5e7eb}

.ce-default-btn{border:1px dashed #cfd3d8;background:#fafafa;border-radius:8px;padding:6px 10px;cursor:pointer}
.ce-default-btn.active{border-color:#111}
.ce-tools{display:flex;align-items:center;gap:10px}
.ce-clear{font-size:7px;}

.ce-columns{display:grid;grid-template-columns:1fr minmax(280px,36%);gap:12px}
.ce-left,.ce-right{background:#fff;border:1px solid var(--bd);border-radius:12px;min-height:200px}
.ce-list{display:flex;flex-direction:column;gap:10px;padding:10px}
.ce-preview-hd{padding:10px;border-bottom:1px solid var(--bd);font-weight:700}
.ce-preview{padding:10px;max-height:60vh;overflow:auto;background:#fafafa}

.ce-row{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;transition:.15s box-shadow,.15s border-color}
.ce-row:hover{border-color:#cfd3d8;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.ce-row.dragging{opacity:.9;border-color:#111;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.ce-row-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ce-handle{cursor:grab;font-size:18px;opacity:.7}
.ce-idx{font-weight:700;color:#555}
.ce-pill{display:inline-flex;overflow:hidden}
.ce-pill input{display:none}
.ce-pill-btn{padding:4px 10px;cursor:pointer;font-weight:700}
.ce-pill-btn.ce-a{background:#e6f2fb}
.ce-pill-btn.ce-b{background:#e7fbf4}
.ce-pill input:checked + .ce-pill-btn{background:#000;color:#fff;}
.ce-delete{margin-left:auto;border:none;background:#ffe7e6;color:#b00020;border:1px solid #ffc9c6;border-radius:8px;padding:4px 8px;cursor:pointer}
.ce-delete:hover{background:#ffd6d3}

.ce-text{width:100%;min-height:70px;resize:vertical;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font:25px/2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:#888;color:#fff;}
.ce-text:focus{border-color:#9aa0a6;box-shadow:0 0 0 3px rgba(0,0,0,.05)}

.ce-file-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;}
.ce-file{display:inline-flex;align-items:center;gap:8px;border:1px dashed #cfd3d8;border-radius:10px;padding:8px 10px;background:#fafafa;cursor:pointer}
.ce-file input{display:none}
.ce-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb}
.ce-current{font-size:12px;color:#333;text-decoration:underline}

.ce-footer{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%);padding:10px 0;display:flex;align-items:center;gap:10px}
.ce-add{background:#fff;color:#111;border-color:#cfd3d8}
.ce-add:hover{background:#f6f7fb}

@media (max-width: 980px){
  .ce-columns{grid-template-columns:1fr}
  .ce-preview{max-height:40vh}
}

/* === UserPicker (HTML w selekcie) === */
.ce-userpicker{position:relative;min-width:260px}
.ce-upick-btn{display:flex;align-items:center;gap:8px;width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.ce-upick-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid #e5e7eb}
.ce-upick-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:8px}
.ce-upick-search{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px}
.ce-upick-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.ce-upick-list li{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}
.ce-upick-list li img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid #e5e7eb}
.ce-upick-list li:hover{background:#f6f7fb}
.ce-preview{ padding:10px; max-height:60vh; overflow:auto; background:#fafafa; }
.ce-preview > #adminChatBody{ padding:0; overflow:visible; background:transparent; }
.ce-write{   border:none;   background:#eef5ff;   color:#0b79d0;   border:1px solid #cfe2ff;   border-radius:8px;   padding:4px 10px;   cursor:pointer;   margin-left:auto; /* dociśnij w prawo, jeśli chcesz */ } 
.ce-write:hover{ background:#e1efff }

.ce-row.is-staged {
  opacity: .5;
  position: relative;
}
.ce-row.is-staged::after {
  content: "📝 do napisania";
  position: absolute;
  top: 6px;
  right: 40px;
  font-size: 12px;
  color: #555;
}

.typingDots::after {
  content: '';
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: dots 1.2s steps(3, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}