/* Base layout: desktop and tablet. Mobile overrides load through a media attribute. */
#tgh-contact-dock {
    position: fixed;
    z-index: var(--tgh-dock-z, 900);
    --tgh-dock-collapsed-size: max(44px, var(--tgh-dock-height, 48px));
    top: var(--tgh-dock-top, 85%);
    top: clamp(calc(var(--tgh-dock-half-height, 136px) + var(--tgh-dock-safe-top, 16px)), var(--tgh-dock-top, 85%), calc(100dvh - var(--tgh-dock-half-height, 136px) - 16px));
    right: var(--tgh-dock-side-offset, 18px);
    left: auto;
    width: var(--tgh-dock-width, 176px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--tgh-dock-safe-top, 16px) - 16px);
    max-height: calc(100dvh - var(--tgh-dock-safe-top, 16px) - 16px);
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    font-family: Roboto, Arial, sans-serif;
    font-size: var(--tgh-dock-font-size, 13px);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

#tgh-contact-dock,
#tgh-contact-dock *,
.tgh-contact-dock-spacer {
    box-sizing: border-box;
}

#tgh-contact-dock[data-side="left"] {
    right: auto;
    left: var(--tgh-dock-side-offset, 18px);
}

body.admin-bar #tgh-contact-dock {
    --tgh-dock-safe-top: 48px;
}

#tgh-contact-dock[data-desktop-enabled="0"] {
    display: none;
}

#tgh-contact-dock .tgh-contact-dock__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--tgh-dock-gap, 8px);
    max-height: calc(100vh - var(--tgh-dock-safe-top, 16px) - 16px);
    max-height: calc(100dvh - var(--tgh-dock-safe-top, 16px) - 16px);
    margin: 0;
    padding: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c8d5cf transparent;
    pointer-events: none;
}

#tgh-contact-dock .tgh-contact-dock__item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: var(--tgh-dock-collapsed-size);
    max-width: 100%;
    min-width: 0;
    height: var(--tgh-dock-collapsed-size);
    min-height: var(--tgh-dock-collapsed-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--tgh-dock-item-border-color, #d5b665);
    border-radius: var(--tgh-dock-radius, 14px);
    background: var(--tgh-dock-item-bg, #124d40);
    color: var(--tgh-dock-item-color, #fff);
    box-shadow: 0 3px 12px rgba(15, 48, 39, .10);
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    overflow: hidden;
    pointer-events: auto;
    transition: width .22s ease, background-color .18s ease, color .18s ease;
}

#tgh-contact-dock .tgh-contact-dock__item:visited {
    color: var(--tgh-dock-item-color, #fff);
}

#tgh-contact-dock .tgh-contact-dock__item::before,
#tgh-contact-dock .tgh-contact-dock__item::after {
    content: none;
}

#tgh-contact-dock .tgh-contact-dock__item:hover {
    background: var(--tgh-dock-item-hover-bg, #124d40);
    color: var(--tgh-dock-item-hover-color, #fff);
    text-decoration: none;
}

#tgh-contact-dock .tgh-contact-dock__item:hover,
#tgh-contact-dock .tgh-contact-dock__item:focus-visible {
    width: 100%;
}

#tgh-contact-dock .tgh-contact-dock__item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    text-decoration: none;
}

#tgh-contact-dock .tgh-contact-dock__icon {
    position: absolute;
    top: 50%;
    right: calc((var(--tgh-dock-collapsed-size) - var(--tgh-dock-icon-size, 22px)) / 2 - 1px);
    left: auto;
    display: inline-flex;
    flex: 0 0 var(--tgh-dock-icon-size, 22px);
    align-items: center;
    justify-content: center;
    width: var(--tgh-dock-icon-size, 22px);
    height: var(--tgh-dock-icon-size, 22px);
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: translateY(-50%);
}

#tgh-contact-dock .tgh-contact-dock__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
}

#tgh-contact-dock .tgh-contact-dock__label {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

#tgh-contact-dock .tgh-contact-dock__label--desktop {
    position: absolute;
    right: calc(var(--tgh-dock-collapsed-size) + 3px);
    left: 11px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(8px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    transition: opacity .18s ease, transform .22s ease;
}

#tgh-contact-dock .tgh-contact-dock__item:hover .tgh-contact-dock__label--desktop,
#tgh-contact-dock .tgh-contact-dock__item:focus-visible .tgh-contact-dock__label--desktop {
    opacity: 1;
    transform: translateX(0);
}

#tgh-contact-dock[data-side="left"] .tgh-contact-dock__items {
    align-items: flex-start;
}

#tgh-contact-dock[data-side="left"] .tgh-contact-dock__icon {
    right: auto;
    left: calc((var(--tgh-dock-collapsed-size) - var(--tgh-dock-icon-size, 22px)) / 2 - 1px);
}

#tgh-contact-dock[data-side="left"] .tgh-contact-dock__label--desktop {
    right: 11px;
    left: calc(var(--tgh-dock-collapsed-size) + 3px);
    transform: translateX(-8px);
}

#tgh-contact-dock[data-side="left"] .tgh-contact-dock__item:hover .tgh-contact-dock__label--desktop,
#tgh-contact-dock[data-side="left"] .tgh-contact-dock__item:focus-visible .tgh-contact-dock__label--desktop {
    transform: translateX(0);
}

#tgh-contact-dock .tgh-contact-dock__label--mobile,
#tgh-contact-dock .tgh-contact-dock__item[data-desktop="0"],
.tgh-contact-dock-spacer {
    display: none;
}

#tgh-contact-dock.is-modal-open,
#tgh-contact-dock.is-keyboard-open {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #tgh-contact-dock .tgh-contact-dock__item,
    #tgh-contact-dock .tgh-contact-dock__label--desktop {
        transition: none;
    }
}

@media (max-width: 782px) {
    body.admin-bar #tgh-contact-dock {
        --tgh-dock-safe-top: 62px;
    }
}

@media print {
    #tgh-contact-dock,
    .tgh-contact-dock-spacer {
        display: none !important;
    }
}
