/* Stylesheet for the starcheep-conversation-panel plugin. Every rule lives
 * here, never inline, so the webapp survives a future CSP hardening. Colors
 * come from the Converse theme variables (with sober fallbacks); the modal is
 * rendered inside converse-root and inherits them, along with the scoped
 * Bootstrap components (.nav, .form-check, .alert, .btn). */

/* The .conversejs prefix is required: the compiled Bootstrap rule is
 * ".conversejs .modal-dialog" (specificity 0,2,0) and would override an
 * unprefixed "starcheep-conversation-panel .modal-dialog" (0,1,1). */
.conversejs starcheep-conversation-panel .modal-dialog {
    max-width: 46rem;
}

.starcheep-panel__tabs {
    margin-bottom: 0.5rem;
}

.starcheep-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.starcheep-panel__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
}

/* Native <progress>: the Bootstrap bar needs an inline width, forbidden here. */
.starcheep-panel__progress-bar {
    flex: 1;
    height: 0.5rem;
}

.starcheep-panel__progress-label {
    font-size: var(--font-size-small, 12px);
    color: var(--subdued-color, #767676);
    white-space: nowrap;
}

.starcheep-panel__status {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--subdued-color, #767676);
}

/* Rows are sized outright: a grid item is stretched to its row, which cancels
   any aspect-ratio asked of the cell and flattens it into a strip. */
.starcheep-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    grid-auto-rows: 7rem;
    align-content: start;
    gap: 0.5rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.starcheep-panel__placeholder {
    display: block;
    height: 100%;
    border: 1px dashed var(--subdued-color, #767676);
    border-radius: var(--chatbox-border-radius, 4px);
    opacity: 0.3;
}

.starcheep-panel__cell {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: var(--chatbox-border-radius, 4px);
    text-decoration: none;
}

.starcheep-panel__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bare <svg> escapes Converse's `.fa svg` fill rule: size and colour are set
   here so the button matches its neighbours in the toolbar. */
.starcheep-panel__toolbar-icon {
    width: 1em;
    height: 1em;
    fill: var(--chat-color, #578ea9);
}

/* The tile sits underneath the video still and shows through whenever the
   browser never paints a frame: the cell is never left blank. */
.starcheep-panel__poster {
    position: relative;
    display: block;
    height: 100%;
}

.starcheep-panel__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--foreground-color, #383a42);
    border-radius: inherit;
    pointer-events: none;
}

.starcheep-panel__play {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    display: flex;
    padding: 0.25rem;
    border-radius: 50%;
    background: var(--background-color, #fff);
    color: var(--foreground-color, #383a42);
    opacity: 0.85;
}

/* Full page and fixed: the media adapts to the frame, never the reverse, so
   stepping from a portrait to a landscape shot leaves the frame still. */
/* Selectors deliberately carry #converse-modals: upstream caps every modal body
   at 75vh with a 2em bottom margin, and sets a top margin plus a narrow width
   from sm upwards, all through stronger selectors than a bare class. Height is
   taken from the viewport rather than from an ancestor chain, one link without
   a definite height being enough to collapse the panel onto its content. The
   dynamic unit follows the mobile browser bars as they retract. */
#converse-modals .modal .modal-dialog.starcheep-panel__dialog {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
}

/* The whole chain has to be a column of flex items: without it the body keeps
   an automatic height and the grid, told to fill it, collapses instead. */
#converse-modals .modal .starcheep-panel__dialog .modal-content {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    border: 0;
    border-radius: 0;
}

#converse-modals .modal .starcheep-panel__dialog .modal-header {
    flex: 0 0 auto;
}

/* max-height and margin-bottom undone, padding trimmed: every pixel spared
   goes to the media. */
#converse-modals .modal .starcheep-panel__dialog .modal-body {
    display: flex;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 0;
    padding: 0.5rem;
    overflow: hidden;
}

#converse-modals .modal .starcheep-panel__dialog .starcheep-panel {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
}

.starcheep-panel__tabs,
.starcheep-panel__toolbar,
.starcheep-panel__progress {
    flex: 0 0 auto;
}

.starcheep-panel__viewer {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

.starcheep-panel__viewer-head {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.starcheep-panel__viewer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-small, 12px);
}

.starcheep-panel__viewer-date {
    flex: 0 0 auto;
    color: var(--subdued-color, #767676);
    font-size: var(--font-size-tiny, 10px);
}

/* The holder is the node kept across renders. Its height has to be definite,
   otherwise the limit the media sets against it means nothing and the picture
   spills over the controls below. */
.starcheep-panel__media {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.starcheep-panel__viewer .starcheep-panel__media converse-audio-player {
    width: 100%;
}

/* The stage holds the whole free height; the media is contained inside it. */
.starcheep-panel__stage {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.starcheep-panel__steps {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: 1rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.starcheep-panel__step {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.25rem 1.5rem;
    border: 1px solid var(--subdued-color, #767676);
    border-radius: var(--chatbox-border-radius, 4px);
    color: var(--foreground-color, #383a42);
}

.starcheep-panel__step[disabled] {
    opacity: 0.35;
}

.starcheep-panel__viewer video,
.starcheep-panel__viewer-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.starcheep-panel__viewer figure {
    display: flex;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.starcheep-panel__viewer converse-audio-player {
    width: 100%;
}

.starcheep-panel__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 100%;
    padding: 0.5rem;
    background: var(--background-color, #fff);
    border: 1px solid var(--subdued-color, #767676);
    border-radius: inherit;
    color: var(--foreground-color, #383a42);
}

.starcheep-panel__tile-icon {
    font-size: 1.5em;
}

.starcheep-panel__tile-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--font-size-small, 12px);
    word-break: break-word;
    text-align: center;
}

.starcheep-panel__tile-date {
    font-size: var(--font-size-tiny, 10px);
    color: var(--subdued-color, #767676);
}

.starcheep-panel__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.1rem 0.3rem;
    font-size: var(--font-size-tiny, 10px);
    color: var(--subdued-color, #767676);
    background: var(--background-color, #fff);
    border: 1px solid var(--subdued-color, #767676);
    border-radius: var(--button-border-radius, 5px);
}

.starcheep-panel__links {
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.starcheep-panel__link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--subdued-color, #767676);
}

.starcheep-panel__link-host {
    font-weight: 600;
}

.starcheep-panel__link-url {
    color: var(--link-color, #2779aa);
    font-size: var(--font-size-small, 12px);
    word-break: break-all;
}

.starcheep-panel__link-date {
    font-size: var(--font-size-tiny, 10px);
    color: var(--subdued-color, #767676);
}

.starcheep-panel__cell:focus-visible,
.starcheep-panel__link-url:focus-visible {
    outline: 2px solid var(--focus-color, #2779aa);
}