img.emoji { height: 1em; width: 1em; vertical-align: -0.1em; margin: 0 0.1em; } .post-video-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; } /* quirks mode fixes for php app (no ) */ .chat * { line-height: inherit; box-sizing: border-box; } .chat textarea { box-shadow: unset; } .chat .post-video-youtube { --scale: 0.5; position: relative; padding-bottom: calc(56.25% * var(--scale)); padding-top: initial; width: calc(100% * var(--scale)); } .chat-widget { position: fixed; right: 22px; bottom: 18px; z-index: 10000; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; font-family: 'Open Sans', sans-serif; } .chat-widget__toggle { position: relative; display: flex; align-items: center; gap: 9px; min-width: 112px; padding: 12px 18px; border: 0; border-radius: 24px; background: #493b38; color: #fff; box-shadow: 0 5px 22px rgba(0, 0, 0, .25); cursor: pointer; font-size: 15px; font-weight: 700; touch-action: manipulation; } .chat-widget__unread { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border: 2px solid #fff; border-radius: 12px; background: #ed1c24; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .chat-widget__unread[hidden] { display: none !important; } .chat-widget__icon { width: 21px; height: 21px; flex: 0 0 21px; fill: currentColor; } .chat-widget__panel { position: relative; display: none; width: min(410px, calc(100vw - 28px)); padding: 0 !important; border: 0 !important; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 8px 35px rgba(0, 0, 0, .3); box-sizing: border-box; } .chat-widget__panel::before { position: absolute; top: 0; right: 0; left: 0; z-index: 5; height: 22px; border-radius: 15px 15px 0 0; background: linear-gradient(to bottom, #fff 15%, rgba(255, 255, 255, 0)); content: ''; pointer-events: none; } #chat-widget-chat, #chat-widget-chat .chat, #chat-widget-chat [id^="chat-widget-messages"] { max-width: 100%; overflow-x: hidden !important; } .chat-widget--open .chat-widget__panel { display: block; } #chat-widget-chat > .chat { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #chat-widget-chat .s { border: 0 !important; border-width: 0 !important; outline: 0 !important; } #chat-widget-chat [data-message-id] { position: relative; display: flow-root !important; height: auto !important; max-height: none !important; min-height: 42px; margin: 8px 10px 24px 58px; padding: 11px 14px !important; border: 0 !important; border-radius: 20px !important; background: #efeee9 !important; color: #353535; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4; overflow: visible; } #chat-widget-chat [data-message-id] > *, #chat-widget-chat [data-message-id] > * > * { height: auto !important; max-height: none !important; font-family: Arial, Helvetica, sans-serif !important; line-height: 1.4 !important; } #chat-widget-chat [data-message-id] div:not(.chat-widget__message-date), #chat-widget-chat [data-message-id] span:not(.chat-widget__message-date):not(.chat-message-meta) { position: static !important; display: inline !important; float: none !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; vertical-align: baseline !important; flex: none !important; } #chat-widget-chat [data-message-id] > * { flex-wrap: wrap !important; } .chat-message-meta { display: none !important; } .chat-widget-client { display: grid !important; grid-template-rows: minmax(0, 1fr) auto; height: min(84vh, 780px); min-height: 360px; overflow: hidden; background: #fff; } .chat-widget-messages { grid-row: 1; height: auto; max-height: none; min-height: 0; padding: 12px 10px 4px; overflow-x: hidden; overflow-y: scroll !important; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .chat-widget-comment { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; font-family: Arial, Helvetica, sans-serif; } .chat-widget-date-separator { display: flex; align-items: center; gap: 8px; margin: 10px 2px 12px; color: #888581; font: 12px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; } .chat-widget-date-separator::before, .chat-widget-date-separator::after { flex: 1 1 auto; height: 1px; background: #c7c4bf; content: ''; } .chat-widget-comment__avatar { flex: 0 0 40px; width: 40px; height: 40px; padding: 2px; overflow: hidden; box-sizing: border-box; border: 2px solid #e2dfda; border-radius: 50%; background: #fff; } .chat-widget-comment__avatar.profile-success { border-color: #76baff !important; } .chat-widget-comment__avatar.profile-success-orange { border-color: #d96d00 !important; } .chat-widget-comment__avatar.profile-success-green { border-color: #7fc568 !important; } .chat-widget-comment__avatar.profile-success-red { border-color: #ff0000 !important; } .chat-widget-comment__avatar img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; border: 0 !important; border-radius: 50%; object-fit: cover; } .chat-widget-comment__body { flex: 1 1 auto; min-width: 0; } .chat-widget-comment__bubble { position: relative; min-height: 40px; padding: 10px 12px; box-sizing: border-box; border-radius: 20px; background: #efeee9; color: #353535; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; } .chat-widget-comment__bubble--has-actions { padding-right: 38px; } .chat-widget-comment__bubble strong { margin-right: 5px; font-weight: 700; } .chat-widget-comment__text, .chat-widget-comment__text emoji-text { display: inline; } .chat-widget-comment__text img.emoji { width: 1em !important; height: 1em !important; max-width: 1em !important; vertical-align: -.1em; } .chat-widget-comment__date { display: block; margin: 2px 0 0 10px; color: #353535; font-size: 10px; line-height: 13px; } .chat-widget-comment__actions { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; gap: 9px; transform: translateY(-50%); transition: opacity .15s ease, visibility .15s ease; } @media (hover: hover) and (pointer: fine) { .chat-widget-comment__actions { visibility: hidden; opacity: 0; pointer-events: none; } .chat-widget-comment__bubble:hover .chat-widget-comment__actions, .chat-widget-comment__bubble:focus-within .chat-widget-comment__actions { visibility: visible; opacity: 1; pointer-events: auto; } } .chat-widget-comment__delete { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 2px; border: 0; background: transparent; cursor: pointer; } .chat-widget-comment__delete img { display: block; width: 14px !important; height: 14px !important; max-width: none !important; } .chat-widget-form { display: flex; grid-row: 2; align-items: flex-end; gap: 8px; flex: 0 0 auto; padding: 10px 12px 12px; border-top: 1px solid #e2dfda; background: #fff; } .chat-widget-form textarea { flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 100px; padding: 10px 14px; box-sizing: border-box; resize: none !important; overflow-y: hidden !important; scrollbar-width: none; border: 1px solid #e2dfda; border-radius: 22px; outline: none; font: 14px Arial, Helvetica, sans-serif; margin-bottom:0px; } .chat-widget-form textarea::-webkit-scrollbar { display: none; } .chat-widget-form button { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 42px; } .chat-widget-form button img { display: block; width: 27px !important; height: 27px !important; max-width: none !important; margin: auto; object-fit: contain; } #chat-widget-chat .chat-widget__avatar { position: absolute; top: 0; left: -50px; display: block; width: 40px !important; height: 40px !important; padding: 2px; overflow: hidden; box-sizing: border-box; border: 2px solid #d46500; border-radius: 50%; background: #fff; } #chat-widget-chat .chat-widget__avatar img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; border-radius: 50%; object-fit: cover; } #chat-widget-chat [data-message-id] emoji-text { display: inline; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.4; overflow-wrap: anywhere; } #chat-widget-chat [data-message-id] img.emoji { display: inline-block !important; width: 1em !important; height: 1em !important; max-width: 1em !important; margin: 0 .1em !important; padding: 0 !important; vertical-align: -.1em !important; } #chat-widget-chat .chat-widget__nickname { color: #353535 !important; font-weight: 700 !important; margin-right: 5px !important; } #chat-widget-chat .chat-widget__nickname-bracket { display: none !important; } #chat-widget-chat .chat-widget__message-date { position: absolute !important; bottom: -18px; left: 10px; color: #353535 !important; font-size: 10px !important; font-weight: 400 !important; line-height: 14px !important; white-space: nowrap; } #chat-widget-chat [data-message-id] button { background: transparent; } #chat-widget-chat .chat > div { height: min(70vh, 610px) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; outline: 0 !important; } @media (max-width: 600px) { .chat-widget { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); } .chat-widget__toggle { min-height: 48px; margin-left: auto; } .chat-widget--open { top: max(6px, env(safe-area-inset-top)); bottom: max(6px, env(safe-area-inset-bottom)); } .chat-widget__panel { width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 12px; } .chat-widget__panel::before { border-radius: 12px 12px 0 0; } .chat-widget--open .chat-widget__panel { height: calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none; } .chat-widget--open #chat-widget-chat { height: 100%; min-height: 0; overflow: hidden; } .chat-widget-client { height: 100% !important; min-height: 0 !important; max-height: 100%; } .chat-widget-comment__avatar { flex-basis: 36px; width: 36px; height: 36px; } #chat-widget-chat .chat > div { height: min(58dvh, 520px) !important; min-height: min(360px, calc(100dvh - 80px)) !important; } #chat-widget-chat textarea, #chat-widget-chat input { font-size: 16px !important; } #chat-widget-chat [data-message-id] { margin-left: 52px; padding: 10px 12px !important; } #chat-widget-chat .chat-widget__avatar { left: -44px; width: 36px; height: 36px; } } @media (max-height: 520px) { .chat-widget--open { top: max(6px, env(safe-area-inset-top)); bottom: max(6px, env(safe-area-inset-bottom)); } .chat-widget--open .chat-widget__panel { height: calc(100% - 58px); max-height: none; } #chat-widget-chat { height: 100% !important; } #chat-widget-chat .chat, #chat-widget-chat .chat > div { height: 100% !important; min-height: 0 !important; } }