/** * Czat sklepu (dodomku.pl) - warstwa 2.0 * * Nakladka na stare style czatu wkompilowane w style-dodomku.css. * Plik ladowany jest jako OSTATNI w (patrz shop/frontend.php), wiec przy * tej samej specyficznosci wygrywa nad stylami ze style-dodomku.css. * !important uzywane jest tylko tam, gdzie stary arkusz sam go uzywa. * * Czat HiPP (chat-1.0.0.css + shop/showrooms/hipp/chat.php) to osobny widok * i celowo nie jest tu ruszany. */ /* ---------------------------------------------------------- kontener ----- */ /* UWAGA: pozycja i szerokosc kontenera zostaja bez zmian (klasy gridu col-sm-offset-7 col-sm-3 z shop/frontend.php). Nie przesuwamy czatu do prawej krawedzi, bo przy pelnym koszyku zaslanialby przycisk "Podaj adres dostawy" w kolumnie podgladu koszyka. */ #chat-control.chat-control { z-index: 1555; } #chat-control .chat-main-page { float: none; width: 100%; padding: 0; margin: 0; background: #fff; border: none; border-radius: 14px 14px 0 0; box-shadow: 0 -2px 24px rgba(15, 31, 51, 0.18); font-family: Arial, Helvetica, sans-serif; } #chat-control .chat-main-page .chat-form { margin: 0; } /* --------------------------------------------------- przycisk otwierania - */ #chat-control .btn-chat-toggle { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 18px; font-size: 14px; line-height: 1; font-weight: bold; white-space: nowrap; border: none !important; box-shadow: 0 2px 10px rgba(0, 134, 250, 0.35); transition: background 0.2s ease; } #chat-control .btn-chat-toggle:hover, #chat-control .btn-chat-toggle:focus { background: #0071d6 !important; border-color: #0071d6 !important; } #chat-control .btn-chat-toggle:active, #chat-control .btn-chat-toggle:focus { outline: none !important; } /* stan zamkniety - przycisk jest jedynym widocznym elementem czatu */ .chat-control .chat-main-page.not-visible-chat .btn-chat-toggle { font-size: 15px; padding: 0 22px; } #chat-control .chat-top-icon { font-size: 10px; opacity: 0.85; top: 0; } /* licznik nieprzeczytanych wiadomosci */ #chat-control .chat-unread-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e02b2b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; } /* ------------------------------------------------------------- naglowek -- */ #chat-control .chat-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 19px 12px 10px 14px; /* gorny zapas na wystajacy przycisk .btn-chat-toggle */ background: #f6f7f9; border: none; border-bottom: 1px solid #e4e6ea; border-radius: 14px 14px 0 0; text-align: left; } #chat-control .chat-admin-info { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; float: none; width: auto; } #chat-control .chat-admin-photo { width: 36px !important; height: 36px; flex: 0 0 36px; padding: 0; border-radius: 50%; background: #dfe3e8; object-fit: cover; } #chat-control .chat-admin-meta { min-width: 0; line-height: 1.25; } #chat-control .chat-admin-name { margin: 0; color: #1d2429; font-size: 14px; font-weight: bold; text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chat-control .chat-admin-name-desc { display: block; float: none; margin: 0; color: #7b8794; font-size: 12px; } /* zielona kropka = konsultant dostepny */ #chat-control .chat-status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #b0b8c1; vertical-align: middle; } #chat-control .chat-main-page.chat-available .chat-status-dot { background: #37b24d; } #chat-control .close-chat-box { position: static; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; background: none; border: none; border-radius: 50%; color: #7b8794; font-size: 20px; line-height: 26px; text-align: center; } #chat-control .close-chat-box:hover, #chat-control .close-chat-box:focus { background: #e6e9ed; color: #1d2429; outline: none; } /* -------------------------------------------------------- lista rozmowy -- */ #chat-control .chat-panel-body { float: none; width: 100%; max-height: 330px; min-height: 0; padding: 12px 12px 4px 12px; overflow-y: auto; overflow-x: hidden; background: #fff; text-align: left; scrollbar-width: thin; scrollbar-color: #c7ccd3 transparent; } /* pasek przewijania tylko wewnatrz czatu (stary arkusz stylowal go globalnie) */ #chat-control .chat-panel-body::-webkit-scrollbar { width: 6px; background-color: transparent; } #chat-control .chat-panel-body::-webkit-scrollbar-track { box-shadow: none; background-color: transparent; } #chat-control .chat-panel-body::-webkit-scrollbar-thumb { box-shadow: none; border-radius: 3px; background-color: #c7ccd3; } #chat-control ul.chat { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } #chat-control ul.chat li { margin: 0; padding: 0; border: none; } /* --------------------------------------------------------- dymki -------- */ #chat-control .chat-item { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; max-width: 100%; } /* kolejna wiadomosc tego samego autora - ciasniejszy odstep */ #chat-control .chat-item.chat-item-follow { margin-top: 2px; } #chat-control .chat-item-client { flex-direction: row-reverse; } #chat-control .chat-msg-avatar { flex: 0 0 28px; width: 28px; height: 28px; margin-bottom: 2px; border-radius: 50%; background: #dfe3e8 no-repeat center/cover; } #chat-control .chat-item-follow .chat-msg-avatar, #chat-control .chat-item-client .chat-msg-avatar { visibility: hidden; } #chat-control .chat-bubble { position: relative; max-width: 78%; padding: 7px 11px 6px 11px; border-radius: 16px; background: #f0f2f5; color: #1d2429; font-size: 13px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; } #chat-control .chat-item-admin .chat-bubble { border-bottom-left-radius: 5px; } #chat-control .chat-item-admin.chat-item-follow .chat-bubble { border-top-left-radius: 5px; } #chat-control .chat-item-client .chat-bubble { background: #0086fa; color: #fff; border-bottom-right-radius: 5px; } #chat-control .chat-item-client.chat-item-follow .chat-bubble { border-top-right-radius: 5px; } #chat-control .chat-author { display: block; margin-bottom: 2px; color: #0071d6; font-size: 11px; font-weight: bold; } #chat-control .chat-item-client .chat-author { color: rgba(255, 255, 255, 0.85); } #chat-control .chat-text { margin: 0; color: inherit; font-size: 13px; line-height: 1.45; text-align: left; white-space: pre-wrap; } #chat-control .chat-text a { color: #0071d6; text-decoration: underline; } #chat-control .chat-item-client .chat-text a { color: #fff; } #chat-control .chat-time { display: block; margin-top: 2px; color: #8b949e; font-size: 10px; text-align: right; } #chat-control .chat-item-client .chat-time { color: rgba(255, 255, 255, 0.8); } /* --------------------------------------- separator dnia i komunikaty ----- */ #chat-control .chat-day { margin: 12px 0 2px 0; text-align: center; } #chat-control .chat-day span { display: inline-block; padding: 2px 10px; border-radius: 10px; background: #eef0f3; color: #7b8794; font-size: 11px; } #chat-control .chat-system { margin: 10px 0 2px 0; text-align: center; } #chat-control .chat-system span { display: inline-block; max-width: 92%; padding: 5px 12px; border-radius: 12px; background: #fff6e5; color: #8a6216; font-size: 12px; line-height: 1.35; } /* potwierdzenie wyslania - oczekiwanie na pierwsza odpowiedz konsultanta */ #chat-control .chat-waiting { margin: 8px 0 2px 0; text-align: center; } #chat-control .chat-waiting span { display: inline-block; max-width: 92%; padding: 4px 12px; border-radius: 12px; background: #eef0f3; color: #7b8794; font-size: 11px; line-height: 1.35; } /* informacja o godzinach pracy / potwierdzenie wyslania */ #chat-control .chat-offline-info { margin: 0 0 4px 0; padding: 8px 10px; border-radius: 10px; background: #f6f7f9; color: #5b6670; font-size: 12px; line-height: 1.4; text-align: left; } #chat-control .chat-panel-ext-data { margin: 8px 0 4px 0; padding: 0; font-size: 12px; line-height: 1.4; } #chat-control .chat-panel-ext-data.alert-success, #chat-control .chat-panel-ext-data.alert-danger { padding: 8px 10px; border-radius: 10px; } /* ------------------------------------------------------------- stopka ---- */ #chat-control .chat-panel-footer { float: none; clear: both; /* lista wiadomości bywa pływająca (klasy gridu) - stopka musi iść pod nią */ width: 100%; padding: 8px 10px 10px 10px; background: #fff; border: none; border-top: 1px solid #e4e6ea; text-align: left; } #chat-control .chat-panel-footer input[name="chatClient"] { height: 34px; margin-bottom: 6px; padding: 6px 12px; border: 1px solid #d7dbe0; border-radius: 17px; box-shadow: none; font-size: 13px; } #chat-control .chat-input-row { display: flex; align-items: flex-end; gap: 8px; } #chat-control .chat-panel-footer textarea[name="chatMsg"] { flex: 1 1 auto; height: 36px; min-height: 36px; max-height: 110px; padding: 8px 14px; border: 1px solid #d7dbe0; border-radius: 18px; box-shadow: none; resize: none; font-size: 13px; line-height: 18px; overflow-y: auto; } #chat-control .chat-panel-footer textarea[name="chatMsg"]:focus, #chat-control .chat-panel-footer input[name="chatClient"]:focus { border-color: #0086fa; box-shadow: 0 0 0 2px rgba(0, 134, 250, 0.15); outline: none; } #chat-control .chat-panel-footer textarea[name="chatMsg"].has-error { border-color: #e02b2b; box-shadow: 0 0 0 2px rgba(224, 43, 43, 0.15); } #chat-control #btn-msg-submit { flex: 0 0 36px; width: 36px; height: 36px; margin: 0 !important; padding: 0; border: none !important; border-radius: 50% !important; color: #fff; font-size: 14px; line-height: 36px; text-align: center; transition: background 0.2s ease; } #chat-control #btn-msg-submit:hover, #chat-control #btn-msg-submit:focus { background: #0071d6 !important; outline: none; } #chat-control #btn-msg-submit[disabled] { opacity: 0.55; cursor: default; } #chat-control .chat-send-icon { top: 0; } #chat-control .chat-hint { display: block; margin: 5px 2px 0 2px; color: #9aa4af; font-size: 10px; } /* --------------------------------------------------------- male ekrany --- */ @media (max-width: 991px) { #chat-control .chat-panel-body { max-height: 260px; } }