/* TS-523 brand bar — styled like the plugin's own navbar (application.css). */

:root
{
    --brand-bar-height: 32px;
}

#plugin_window.with-brand-bar
{
    bottom: var(--brand-bar-height);
    /* Fixed modals and masks fill the plugin, not the frame under the bar. */
    contain: layout;
}

/* application.css sizes these from the frame height; take the bar off it. */
#plugin_window.with-brand-bar .view_container .geotag_container
{
    height: calc(100dvh - 48px - var(--brand-bar-height));
}

#plugin_window.with-brand-bar .is-view .is-content-view.preview,
#plugin_window.with-brand-bar .view_container#_plugin_connect .is-view .is-content-view,
#plugin_window.with-brand-bar .view_container#_plugin_acknowledgements .is-view .is-content-view
{
    height: calc((100vh - var(--brand-bar-height)) * 0.75);
}

.tsg-brand-bar
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--brand-bar-height);
    box-sizing: border-box;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: var(--llbg);
    border-top: 1px solid #ccc7;

    font-size: 12px;
    line-height: 1;
    color: var(--t-secondary);
    white-space: nowrap;
}

.tsg-brand-bar a
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.tsg-brand-bar a:hover span
{
    text-decoration: underline;
}

.tsg-brand-bar img
{
    height: 18px;
}

.tsg-brand-bar strong,
.tsg-brand-bar a.tsg-brand-bar-app
{
    color: var(--tsgreen);
    font-weight: 500;
}

.tsg-brand-bar-dot
{
    color: var(--t-medium);
}