@charset "UTF-8";
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 Here we are getting some Peertube variables (see _variables.scss in Peertube source code):
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
.peertube-plugin-livechat-experimental,
.peertube-plugin-livechat-warning {
  color: orange;
}

.peertube-plugin-livechat-error {
  color: red;
}

.peertube-plugin-livechat-error-message {
  /* display an error block (page not found, ...) */
  display: block;
  font-size: 20px;
  padding-top: 50px;
  text-align: center;
  width: 100%;
}

.peertube-plugin-livechat-container .peertube-plugin-livechat-error-message {
  max-width: 30vw;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
livechat-dynamic-table-form {
  display: block;
  margin-bottom: 3rem;
}
livechat-dynamic-table-form table {
  table-layout: fixed;
  text-align: center;
}
livechat-dynamic-table-form table tr {
  border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-dynamic-table-form table td,
livechat-dynamic-table-form table th {
  word-wrap: break-word;
  vertical-align: top;
  padding: 5px 7px;
}
livechat-dynamic-table-form table td:last-child {
  vertical-align: middle;
  min-width: 28px;
}
livechat-dynamic-table-form table td:last-child > input:not([type=checkbox]),
livechat-dynamic-table-form table td:last-child textarea {
  min-width: 150px;
}
livechat-dynamic-table-form table tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-dynamic-table-form table .livechat-dynamic-table-form-description-header {
  font-size: small;
  font-weight: lighter;
}
livechat-dynamic-table-form .dynamic-table-add-row-cell {
  text-align: left;
}
livechat-dynamic-table-form .dynamic-table-add-row {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-green);
}
livechat-dynamic-table-form .dynamic-table-add-row, livechat-dynamic-table-form .dynamic-table-add-row:active, livechat-dynamic-table-form .dynamic-table-add-row:focus {
  color: #fff;
  background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-dynamic-table-form .dynamic-table-add-row:focus, livechat-dynamic-table-form .dynamic-table-add-row.focus-visible {
  box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-dynamic-table-form .dynamic-table-add-row:hover {
  color: #fff;
  background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-dynamic-table-form .dynamic-table-add-row[disabled], livechat-dynamic-table-form .dynamic-table-add-row.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-orange);
}
livechat-dynamic-table-form .dynamic-table-remove-row, livechat-dynamic-table-form .dynamic-table-remove-row:active, livechat-dynamic-table-form .dynamic-table-remove-row:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row:focus, livechat-dynamic-table-form .dynamic-table-remove-row.focus-visible {
  box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-dynamic-table-form .dynamic-table-remove-row:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row[disabled], livechat-dynamic-table-form .dynamic-table-remove-row.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-error {
  color: red;
  display: block;
  padding: 50px;
  text-align: center;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-help-button a {
  height: 18px !important;
  margin: 2px !important;
  padding: 1px !important;
  vertical-align: middle;
}
livechat-help-button svg {
  display: block;
  height: auto;
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-image-file-input img {
  cursor: pointer;
  max-height: 3em !important;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-share-chat {
  display: block;
  text-align: start;
}
livechat-share-chat > * {
  margin-top: 10px;
}
livechat-share-chat .sub-menu-entry {
  cursor: pointer;
}
livechat-share-chat .livechat-shareurl-copy {
  display: flex;
  flex-wrap: wrap;
}
livechat-share-chat .livechat-shareurl-copy button {
  white-space: nowrap;
}
livechat-share-chat .livechat-shareurl-copy input {
  flex-grow: 2;
  width: auto !important;
}
livechat-share-chat .livechat-shareurl-block {
  height: 300px;
  overflow-y: scroll;
}
livechat-share-chat .livechat-shareurl-options input[type=checkbox],
livechat-share-chat .livechat-shareurl-options input[type=radio] {
  margin-right: 20px;
}
livechat-share-chat .livechat-shareurl-options label {
  display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions {
  margin-left: 40px;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions > * {
  display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions.livechat-shareurl-suboptions-disabled label {
  /* stylelint-disable-next-line custom-property-pattern */
  color: var(--fg-400, var(--greyForegroundColor));
}
livechat-share-chat .livechat-shareurl-protocol {
  display: flex;
  flex-flow: row wrap;
  column-gap: 30px;
}
livechat-share-chat .livechat-shareurl-protocol input[type=radio] {
  margin-right: 10px;
}
livechat-share-chat .livechat-shareurl-tips {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-spinner,
.livechat-spinner {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
livechat-spinner div,
.livechat-spinner div {
  width: 48px;
  height: 48px;
  margin: 20px;
  /* stylelint-disable-next-line custom-property-pattern */
  border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important;
  /* stylelint-disable-next-line custom-property-pattern */
  border-bottom-color: var(--primary, var(--mainColor)) !important;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: livechatrotating 1s linear infinite;
}
@keyframes livechatrotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-tags-input {
  --tag-padding-vertical: 3px;
  --tag-padding-horizontal: 6px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 320px;
  /* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input .livechat-tags-container {
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
livechat-tags-input input {
  flex: 1;
  border: none;
  padding: 0;
  color: inherit;
  background-color: inherit;
  width: 100%;
  /* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input input:focus {
  outline: transparent;
}
livechat-tags-input .livechat-tags,
livechat-tags-input .livechat-tags-searched {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--tag-padding-vertical) 0;
  max-height: 150px;
  overflow-y: auto;
  transition-property: height, margin;
  transition-duration: 0.3s;
}
@supports (scrollbar-width: auto) {
  livechat-tags-input .livechat-tags,
  livechat-tags-input .livechat-tags-searched {
    scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
    scrollbar-width: thin;
  }
}
livechat-tags-input .livechat-tags-container,
livechat-tags-input .livechat-tags-searched {
  border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
}
livechat-tags-input .livechat-tags-container.livechat-empty,
livechat-tags-input .livechat-tags-searched.livechat-empty {
  height: 0;
  margin: 0;
  border: none;
}
livechat-tags-input .livechat-tags-searched::after {
  content: "🔍";
  flex-grow: 1;
  text-align: right;
}
livechat-tags-input .livechat-tags-searched.livechat-empty::after {
  display: none;
}
livechat-tags-input .livechat-tag,
livechat-tags-input .livechat-tag-searched {
  width: auto;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 var(--tag-padding-horizontal);
  font-size: 14px;
  list-style: none;
  border-radius: 3px;
  margin: 0 3px 3px 0;
  transition: 0.3s filter;
}
livechat-tags-input .livechat-tag .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close {
  display: block;
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  font-size: 10px;
  margin-left: var(--tag-padding-horizontal);
  color: var(--primary, var(--mainColor));
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
livechat-tags-input .livechat-tag .livechat-tag-close::before,
livechat-tags-input .livechat-tag-searched .livechat-tag-close::before {
  content: "✕";
}
livechat-tags-input .livechat-tag, livechat-tags-input .livechat-tag:active, livechat-tags-input .livechat-tag:focus,
livechat-tags-input .livechat-tag-searched,
livechat-tags-input .livechat-tag-searched:active,
livechat-tags-input .livechat-tag-searched:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag .livechat-tag-close, livechat-tags-input .livechat-tag:active .livechat-tag-close, livechat-tags-input .livechat-tag:focus .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:active .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:focus .livechat-tag-close {
  color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag:hover,
livechat-tags-input .livechat-tag-searched:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag:hover .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:hover .livechat-tag-close {
  color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag[disabled], livechat-tags-input .livechat-tag.disabled,
livechat-tags-input .livechat-tag-searched[disabled],
livechat-tags-input .livechat-tag-searched.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag[disabled] .livechat-tag-close, livechat-tags-input .livechat-tag.disabled .livechat-tag-close,
livechat-tags-input .livechat-tag-searched[disabled] .livechat-tag-close,
livechat-tags-input .livechat-tag-searched.disabled .livechat-tag-close {
  color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag .livechat-tag-name,
livechat-tags-input .livechat-tag-searched .livechat-tag-name {
  margin-top: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 250px;
}
livechat-tags-input .livechat-tags.livechat-unfocused .livechat-tag {
  filter: opacity(50%) grayscale(80%);
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-token-list table {
  width: 100%;
  table-layout: fixed;
  text-align: center;
}
livechat-token-list table tr {
  border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-token-list table td,
livechat-token-list table th {
  word-wrap: break-word;
  vertical-align: top;
  padding: 5px 7px;
}
livechat-token-list table td:last-child {
  vertical-align: middle;
  min-width: 28px;
}
livechat-token-list table td:last-child > input:not([type=checkbox]),
livechat-token-list table td:last-child textarea {
  min-width: 150px;
}
livechat-token-list table tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-token-list table tr th:first-child,
livechat-token-list table tr th:last-child {
  width: 50px;
}
livechat-token-list table label {
  font-weight: inherit;
}
livechat-token-list .livechat-create-token {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-green);
}
livechat-token-list .livechat-create-token, livechat-token-list .livechat-create-token:active, livechat-token-list .livechat-create-token:focus {
  color: #fff;
  background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-token-list .livechat-create-token:focus, livechat-token-list .livechat-create-token.focus-visible {
  box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-token-list .livechat-create-token:hover {
  color: #fff;
  background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-token-list .livechat-create-token[disabled], livechat-token-list .livechat-create-token.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-token-list .livechat-revoke-token {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-orange);
}
livechat-token-list .livechat-revoke-token, livechat-token-list .livechat-revoke-token:active, livechat-token-list .livechat-revoke-token:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-token-list .livechat-revoke-token:focus, livechat-token-list .livechat-revoke-token.focus-visible {
  box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-token-list .livechat-revoke-token:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-token-list .livechat-revoke-token[disabled], livechat-token-list .livechat-revoke-token.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
#peertube-plugin-livechat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#peertube-plugin-livechat-container .chatroom .box-flyout .chatroom-body .occupants {
  min-width: min(200px, 50%);
}

/* Note: livechat-viewer-mode-content (the form where anonymous users can
    choose nickname or log in with external account), can be something like
    ~180px height (at time of writing).
    We must ensure that the px height limit for converse-muc and converse-root is
    always higher than livechat-viewer-mode-content max size.
  Note: We also must ensure that when the user has choosen its nickname, and there is an
    ongoing poll, the user can see the chat when the poll is folded.
*/
#peertube-plugin-livechat-container converse-root {
  display: block;
  border: 1px solid black;
  min-height: max(30vh, 300px);
  height: 100%;
  min-width: min(400px, 25vw);
}
#peertube-plugin-livechat-container converse-root converse-muc {
  min-height: max(30vh, 300px);
}
@media screen and (orientation: portrait) and (width <= 767px) {
  #peertube-plugin-livechat-container converse-root {
    /* On small screen, and when portrait mode, we are giving the chat more vertical space.
        It should go under the video.
     */
    min-height: max(50vh, 300px);
  }
  #peertube-plugin-livechat-container converse-root converse-muc {
    min-height: max(50vh, 300px);
  }
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
.peertube-plugin-livechat-buttons,
.livechat-mini-muc-bar-buttons {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  padding-right: 12px !important;
}

.peertube-plugin-livechat-button {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 36px !important;
  margin: 5px !important;
  padding: 2px !important;
}
.peertube-plugin-livechat-button svg {
  height: auto;
}

.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button,
.livechat-mini-muc-bar-buttons .peertube-plugin-livechat-button {
  height: 18px !important;
  margin: 2px !important;
  padding: 1px !important;
}

.peertube-plugin-livechat-buttons-cloned {
  display: none;
}

[peertube-plugin-livechat-state=initializing] {
  display: none;
}

[peertube-plugin-livechat-state=open] .peertube-plugin-livechat-button-open {
  display: none;
}

[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-promote,
[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-close {
  display: none;
}

[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-secondary {
  border-radius: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border-left: 1px solid currentcolor;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-last-secondary {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: 0 !important;
  border-left: 1px solid currentcolor;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-channel-tabs {
  display: block;
  /* See Peertube sub-menu-h1 mixin */
  margin-bottom: 30px;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-configuration-section-header {
  margin-top: 3rem;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
  These are styles to apply for the channel configuration pages.
*/
.peertube-plugin-livechat-configuration {
  /* Channel configuration page */
  /* Channel selection page */
}
.peertube-plugin-livechat-configuration h1 {
  padding-top: 40px;
  /* See Peertube sub-menu-h1 mixin */
  font-size: 1.3rem;
  border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
  padding-bottom: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info {
  /* stylelint-disable-next-line value-keyword-case */
  color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:first-child {
  /* See Peertube .video-channel-display-name */
  font-weight: 600;
  font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:not(:first-child) {
  /* See Peertube .video-channel-name */
  margin-left: 5px;
  font-size: 14px;
  color: #777272;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel h2 {
  text-transform: uppercase;
  color: var(--primary, var(--mainColor));
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy {
  line-height: 19px;
  padding: 4px 13px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button.disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset] {
  background-color: var(--bg-secondary-400, var(--greyBackgroundColor));
  color: var(--fg-400, var(--greyForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
  color: var(--fg-400, var(--greyForegroundColor));
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
  cursor: default;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels {
  list-style-type: none;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
  align-items: center;
  gap: 15px;
  /* See Peertube row-blocks mixin, used in video-channel */
  display: flex;
  min-height: 130px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  /* stylelint-disable-next-line value-keyword-case */
  border-bottom: 1px solid var(--inputBorderColor);
}
@media screen and (max-width: 800px) {
  .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar {
  /* See Peertube CSS, class avatar and avatar-80 */
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.channel {
  border-radius: 5px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial {
  /* See Peertube actor-avatar.component.scss */
  background-color: #3c2109;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--initialFontSize);
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial.gray {
  background-color: #939393;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info {
  flex-grow: 1;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a {
  /* See Peertube .video-channel-names */
  width: fit-content;
  display: flex;
  align-items: baseline;
  /* stylelint-disable-next-line value-keyword-case */
  color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:active {
  text-decoration: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus:not(.focus-visible) {
  outline: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:first-child {
  /* See Peertube .video-channel-display-name */
  font-weight: 600;
  font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:not(:first-child) {
  /* See Peertube .video-channel-name */
  margin-left: 5px;
  font-size: 14px;
  color: #777272;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-sn {
  width: 30%;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-file {
  width: 65%;
}
.peertube-plugin-livechat-configuration .peertube-plugin-livechat-configuration-actions {
  margin-bottom: 1rem;
  text-align: right;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
.peertube-plugin-livechat-admin-firewall h1 {
  padding-top: 40px;
  /* See Peertube sub-menu-h1 mixin */
  font-size: 1.3rem;
  border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
  padding-bottom: 15px;
}
.peertube-plugin-livechat-admin-firewall textarea[name^=_content_] {
  min-height: 10rem;
}
.peertube-plugin-livechat-admin-firewall input[type=submit],
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
  line-height: 19px;
  padding: 4px 13px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
}
.peertube-plugin-livechat-admin-firewall input[type=submit], .peertube-plugin-livechat-admin-firewall input[type=submit]:active, .peertube-plugin-livechat-admin-firewall input[type=submit].active, .peertube-plugin-livechat-admin-firewall input[type=submit]:focus,
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=submit]:active,
.peertube-plugin-livechat-admin-firewall button[type=submit].active,
.peertube-plugin-livechat-admin-firewall button[type=submit]:focus {
  color: var(--on-primary, #fff);
  background-color: var(--primary, var(--mainColor));
  border: 1px solid var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit]:hover,
.peertube-plugin-livechat-admin-firewall button[type=submit]:hover {
  color: var(--on-primary, #fff);
  background-color: var(--primary-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit][disabled],
.peertube-plugin-livechat-admin-firewall button[type=submit][disabled] {
  pointer-events: none;
  opacity: 0.6;
}
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
  color: var(--fg, var(--mainForegroundColor));
  background-color: transparent;
  border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important;
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:active, .peertube-plugin-livechat-admin-firewall input[type=reset].active, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus-visible,
.peertube-plugin-livechat-admin-firewall button[type=reset]:active,
.peertube-plugin-livechat-admin-firewall button[type=reset].active,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus-visible {
  color: var(--fg, var(--mainForegroundColor));
  background-color: var(--bg-secondary-500, var(--inputBorderColor));
  border-color: var(--bg-secondary-500, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:hover,
.peertube-plugin-livechat-admin-firewall button[type=reset]:hover {
  color: var(--fg, var(--mainForegroundColor));
  background-color: var(--bg-secondary-450, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset][disabled],
.peertube-plugin-livechat-admin-firewall button[type=reset][disabled] {
  pointer-events: none;
  opacity: 0.8;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-name {
  width: 25%;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-content {
  width: 65%;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
table.peertube-plugin-livechat-prosody-list-rooms {
  border: 1px solid black;
  margin: 5px 0;
}

table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) {
  background-color: #eee;
}

table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
  background-color: #fff;
}

table.peertube-plugin-livechat-prosody-list-rooms th {
  /* stylelint-disable-next-line custom-property-pattern */
  background-color: var(--fg-400, var(--mainHoverColor));
  border: 1px solid black;
  /* stylelint-disable-next-line custom-property-pattern */
  color: var(--mainBackgroundColor);
  padding: 4px 5px;
}

table.peertube-plugin-livechat-prosody-list-rooms td {
  border: 1px solid #555;
  color: black;
  padding: 4px 5px;
}

/*# sourceMappingURL=style.css.map */
/* OpenTube plugin pages. Colors come from PeerTube's CSS variables so the
   pages follow whichever theme the instance runs, including the OpenTube
   fork's dark lime default. */

.opentube-page {
  /* Wide, because the things on these pages are charts and tables and they get
     better with room. 1200px was a reading measure applied to a dashboard: on
     a large monitor it left most of the screen empty beside a column of
     panels squeezed into a third of it.

     Still capped rather than full-bleed — past this the panel grid starts
     stretching individual cards into shapes nothing was designed at. Prose
     inside keeps its own measure via .opentube-lead. */
  max-width: 2800px;
}

.opentube-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 8px 0 18px; }
.opentube-heading h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 400; letter-spacing: -0.03em; }
.opentube-eyebrow { margin: 0; color: var(--primary); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.opentube-lead { color: var(--fg-300, inherit); max-width: 70ch; }
.opentube-h2 { margin: 28px 0 12px; font-size: 1.15rem; }
.opentube-status { color: var(--fg-300, inherit); margin: 10px 0; }
.opentube-error { padding: 14px 16px; border-radius: 9px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); }
.opentube-footnote { margin-top: 14px; color: var(--fg-300, inherit); font-size: 0.85em; }

/* Discover */
.opentube-chips { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.opentube-chips::-webkit-scrollbar { display: none; }
.opentube-chip { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 7px 13px; font-weight: 600; color: var(--fg); background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); cursor: pointer; }
.opentube-chip.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-select { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--input-border-color, currentColor); background: var(--input-bg, transparent); color: var(--fg); }
.opentube-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 16px; }
.opentube-card { min-width: 0; }
.opentube-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); }
.opentube-thumb img { width: 100%; height: 100%; object-fit: cover; }
.opentube-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font-weight: 600; line-height: 1.3; color: var(--fg); text-decoration: none; }
.opentube-card-meta { margin-top: 4px; color: var(--fg-300, inherit); font-size: 0.85em; }
.opentube-card-channel { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-width: 0; }
.opentube-card-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
/* Stand-in for a channel with no picture: the initial on a flat ground, sized
   identically so the row does not reflow when a picture is added later. */
.opentube-card-avatar-blank { display: flex; align-items: center; justify-content: center; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); color: var(--fg-300, inherit); font-size: 0.7rem; font-weight: 700; }
.opentube-card-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-300, inherit); font-size: 0.85em; text-decoration: none; }
.opentube-card-channel-name:hover { color: var(--fg); }
.opentube-card-reason { margin-top: 3px; color: var(--primary); font-size: 0.8em; }

/* Algorithm list */
.opentube-algo-list { display: grid; gap: 10px; }
.opentube-algo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-algo.selected { outline: 2px solid var(--primary); }
.opentube-algo-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opentube-algo-desc { color: var(--fg-300, inherit); font-size: 0.9em; }
.opentube-algo-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.opentube-tag { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-tag.active { background: var(--primary); color: var(--on-primary, #111); }
.opentube-button { border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 600; cursor: pointer; background: var(--primary); color: var(--on-primary, #111); }
.opentube-button.ghost { background: transparent; color: var(--fg); outline: 1px solid var(--bg-secondary-450, currentColor); }

/* Why section */
.opentube-why-video { padding: 12px 0; border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-why-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.opentube-why-score { color: var(--fg-300, inherit); font-size: 0.8em; margin: 2px 0 6px; }
.opentube-term { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin: 3px 0; font-size: 0.85em; }
.opentube-term-name { color: var(--fg-300, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-term-track { height: 8px; border-radius: 4px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); overflow: hidden; }
.opentube-term-bar { height: 100%; border-radius: 4px; background: var(--primary); }
.opentube-term-bar.negative { background: var(--red, #c0392b); }
.opentube-term-value { text-align: right; font-variant-numeric: tabular-nums; }
.opentube-preview-note { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--primary); color: var(--on-primary, #111); font-weight: 600; }

/* Editor */
.opentube-editor { display: grid; gap: 18px; padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.1)); }
.opentube-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 22px; }
.opentube-field { display: grid; gap: 4px; font-size: 0.85em; }
.opentube-field-label { display: flex; justify-content: space-between; color: var(--fg-300, inherit); }
.opentube-readout { font-variant-numeric: tabular-nums; color: var(--fg); }
.opentube-editor-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.opentube-input { flex: 1 1 220px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--input-border-color, currentColor); background: var(--input-bg, transparent); color: var(--fg); }
.opentube-checkbox { display: flex; align-items: center; gap: 6px; }

/* Studio */
.opentube-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.opentube-stat { padding: 14px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-stat-label { color: var(--fg-300, inherit); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; }
.opentube-table-wrap { overflow-x: auto; }
.opentube-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.opentube-table th { text-align: left; padding: 8px 10px; color: var(--fg-300, inherit); font-weight: 600; border-bottom: 2px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); font-variant-numeric: tabular-nums; }
.opentube-td-title a { color: var(--fg); font-weight: 600; text-decoration: none; }
.opentube-td-title { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Studio charts and panels */
.opentube-heading-actions { display: flex; gap: 10px; align-items: center; }
.opentube-stat-sub { margin-top: 3px; color: var(--primary); font-size: 0.75em; font-variant-numeric: tabular-nums; }
.opentube-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 4px 0 18px; }
/* On a very wide monitor two panels stretched across the whole width is not
   using the space, it is diluting it — a chart three thousand pixels wide is
   harder to read, not easier. Past this the side column splits in two and the
   extra room becomes another panel instead of more panel. */
@media (min-width: 2200px) { .opentube-panels { grid-template-columns: 2fr 1fr 1fr; } }
.opentube-panels:has(> :only-child) { grid-template-columns: 1fr; }
/* Cards are usually rendered straight into the page as siblings, where there
   is no grid gap to separate them — consecutive ones shared an edge and read
   as one long block rather than as separate cards. Spacing belongs on the card
   for that reason, and is dropped again inside .opentube-panels, which has its
   own gap and would otherwise double it. */
.opentube-panel { padding: 14px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); min-width: 0; margin-bottom: 12px; }
.opentube-panels > .opentube-panel { margin-bottom: 0; }
.opentube-panel.wide { grid-column: auto; }
.opentube-panel-title { font-weight: 700; margin-bottom: 2px; }
.opentube-panel-big { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-panel-sub { color: var(--fg-300, inherit); font-size: 0.8em; margin-bottom: 8px; }
.opentube-panel-axis { display: flex; justify-content: space-between; color: var(--fg-300, inherit); font-size: 0.72em; margin-top: 4px; }
.opentube-chart { width: 100%; height: auto; display: block; }
.opentube-chart-line { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.opentube-chart-area { fill: var(--primary); opacity: 0.16; }
.opentube-bar { fill: var(--primary); }
.opentube-bar.empty { fill: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); }
.opentube-row-link { cursor: pointer; }
.opentube-row-link:hover td { background: var(--bg-secondary-400, rgba(128, 128, 128, 0.1)); }
@media (max-width: 900px) { .opentube-panels { grid-template-columns: 1fr; } }

/* Studio tabs and the Earn tab */
.opentube-tabs { display: flex; gap: 18px; margin: -4px 0 16px; border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-tab { border: 0; background: transparent; padding: 8px 2px; font-weight: 600; color: var(--fg-300, inherit); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.opentube-tab.active { color: var(--fg); border-bottom-color: var(--primary); }
.opentube-earn-card { padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); margin-bottom: 14px; }
.opentube-earn-card .opentube-panel { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18)); }
.opentube-earn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.opentube-earn-name { font-weight: 700; font-size: 1.05em; }
.opentube-earn-handle { color: var(--fg-300, inherit); font-size: 0.85em; }
.opentube-earn-note { color: var(--fg-300, inherit); margin: 6px 0 12px; }
/* A pill has a rounded outline drawn around a single run of text; letting it
   wrap breaks the shape into two half-pills and the state becomes unreadable.
   Better for the cell to scroll than for the badge to come apart. */
.opentube-badge { flex: 0 0 auto; white-space: nowrap; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-badge.approved { background: var(--primary); color: var(--on-primary, #111); }
.opentube-badge.pending { background: transparent; outline: 1px solid var(--primary); color: var(--primary); }
.opentube-badge.revoked, .opentube-badge.rejected { background: var(--red, #c0392b); color: #fff; }
.opentube-code { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 12px; border-radius: 9px; background: var(--bg, rgba(0, 0, 0, 0.25)); outline: 1px dashed var(--bg-secondary-450, rgba(128, 128, 128, 0.45)); }
.opentube-code code { flex: 1; overflow-x: auto; white-space: nowrap; user-select: all; font-variant-ligatures: none; }

/* Premium */
.opentube-join-panel { max-width: 640px; padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); margin: 4px 0 10px; }
.opentube-join-title { font-weight: 700; margin-bottom: 4px; }
.opentube-thumb-premium { position: relative; }
.opentube-premium-flag { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--primary); color: var(--on-primary, #111); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.opentube-premium-panel { margin-bottom: 18px; }

/* Watch-page lock overlay */
.opentube-premium-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, 0.82); }
.opentube-premium-overlay-inner { display: grid; gap: 10px; justify-items: center; max-width: 440px; padding: 24px; color: #fff; }
.opentube-premium-overlay-title { font-family: Georgia, serif; font-size: 1.5rem; letter-spacing: -0.02em; }
.opentube-premium-overlay-text { margin: 0; color: rgba(255, 255, 255, 0.8); }
.opentube-premium-overlay-hint { margin: 4px 0 0; font-size: 0.85em; color: rgba(255, 255, 255, 0.65); }
.opentube-premium-overlay-hint a { color: var(--primary, #9ce200); }
.opentube-premium-overlay .opentube-button { text-decoration: none; }

/* Interactive chart chrome */
.opentube-chart-wrap { position: relative; }
.opentube-grid-line { stroke: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); stroke-dasharray: 2 4; }
.opentube-tick { fill: var(--fg-300, #999); font-size: 10.5px; }
.opentube-crosshair { stroke: var(--fg-300, #999); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.opentube-dot { fill: var(--primary); pointer-events: none; }
.opentube-tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--bg, #111); outline: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.4)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 0.78em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opentube-tip div:first-child { color: var(--fg-300, inherit); }

/* Reach funnel and key moments */
.opentube-funnel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.opentube-funnel-step { padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18)); min-width: 88px; }
.opentube-funnel-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-funnel-label { color: var(--fg-300, inherit); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.07em; }
.opentube-funnel-arrow { color: var(--primary); font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.opentube-moments { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.opentube-moment-chip { font-size: 0.75em; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-callout { color: var(--primary); font-weight: 600; margin: 6px 0 8px; }
.opentube-panel-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.opentube-ministat-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-ministat-label { color: var(--fg-300, inherit); font-size: 0.72em; }

/* Source bars */
.opentube-barlist { display: grid; gap: 6px; margin-top: 8px; }
.opentube-barrow { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 10px; font-size: 0.85em; }
.opentube-barrow-label { color: var(--fg-300, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-barrow-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Comparison line and publish markers on charts */
.opentube-chart-line2 { fill: none; stroke: var(--fg-300, #999); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.75; vector-effect: non-scaling-stroke; }
.opentube-marker { fill: var(--primary); stroke: var(--bg, #111); stroke-width: 1; }

/* When-viewers-watch heatmap */
.opentube-heatmap { display: grid; grid-template-columns: 36px repeat(24, 1fr); gap: 2px; align-items: center; margin-top: 8px; }
.opentube-heatmap-cell { display: block; aspect-ratio: 1 / 1; min-width: 5px; border-radius: 2px; background: var(--primary); }
.opentube-heatmap-hour, .opentube-heatmap-day { font-size: 0.65em; color: var(--fg-300, inherit); }
.opentube-heatmap-day { padding-right: 4px; }

/* Subscribed vs not */
.opentube-split-bar { height: 14px; border-radius: 7px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); overflow: hidden; margin: 10px 0 6px; }
.opentube-split-fill { height: 100%; background: var(--primary); }

/* Explore tab */
.opentube-explore-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.opentube-metrics { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9em; }
.opentube-share { color: var(--fg-300, inherit); font-size: 0.78em; }
.opentube-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.opentube-panels.thirds { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .opentube-panels.thirds { grid-template-columns: 1fr; } }

/* Feed tuning: topic tree, muted words, reference channels */
.opentube-tune-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--fg-300, inherit); font-size: 0.9em; }
.opentube-tune-hidden { padding: 2px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); font-weight: 600; cursor: help; }
.opentube-tune-side { display: grid; gap: 12px; align-content: start; }
.opentube-panel-note { color: var(--fg-300, inherit); font-size: 0.82em; margin: 4px 0 10px; }
.opentube-tune-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

.opentube-topic-tree { max-height: 460px; overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; }
.opentube-topic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; }
.opentube-topic:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.16)); }
.opentube-topic.has-stance.blocked { box-shadow: inset 3px 0 0 var(--red, #d9534f); }
.opentube-topic.has-stance.less { box-shadow: inset 3px 0 0 var(--fg-300, #999); }
.opentube-topic.has-stance.more,
.opentube-topic.has-stance.loved { box-shadow: inset 3px 0 0 var(--primary); }
.opentube-topic-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.9em; }
.opentube-topic-count { color: var(--fg-300, inherit); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.opentube-caret { flex: 0 0 auto; width: 18px; height: 18px; border: 0; padding: 0; border-radius: 5px; background: transparent; color: var(--fg-300, inherit); cursor: pointer; transition: transform 0.12s ease-in-out; }
.opentube-caret.open { transform: rotate(90deg); }
.opentube-caret.placeholder { cursor: default; }

.opentube-stances { display: flex; gap: 3px; flex: 0 0 auto; }
.opentube-stance { border: 0; border-radius: 6px; padding: 3px 8px; font-size: 0.72em; font-weight: 600; cursor: pointer; color: var(--fg-300, inherit); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-stance:hover:not(:disabled) { color: var(--fg); }
.opentube-stance:disabled { cursor: not-allowed; opacity: 0.5; }
.opentube-stance.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-stance.active.blocked { background: var(--red, #d9534f); color: #fff; }
.opentube-stance.active.less { background: var(--fg-300, #999); color: var(--bg, #111); }

.opentube-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.opentube-chip-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 0.82em; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-chip-tag.blocked { box-shadow: inset 0 0 0 1px var(--red, #d9534f); }
.opentube-chip-tag.like { box-shadow: inset 0 0 0 1px var(--primary); }
.opentube-chip-role { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-300, inherit); }
.opentube-chip-x { border: 0; width: 18px; height: 18px; border-radius: 50%; line-height: 1; cursor: pointer; color: var(--fg); background: var(--bg-secondary-500, rgba(128, 128, 128, 0.35)); }

/* Who your subscription supports */
.opentube-support-list { display: grid; gap: 6px; max-width: 720px; }
.opentube-support-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-support-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.opentube-support-share { font-variant-numeric: tabular-nums; color: var(--fg-300, inherit); min-width: 3.5ch; text-align: right; }
.opentube-support-controls { display: flex; gap: 3px; }
@media (max-width: 560px) { .opentube-support-row { grid-template-columns: 1fr auto; } .opentube-support-controls { grid-column: 1 / 3; } }

/* Your Premium modal */
.opentube-modal-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.65); }
.opentube-modal { width: min(520px, 100%); max-height: 85vh; overflow-y: auto; padding: 24px 26px; border-radius: 14px; background: var(--bg-secondary-400, #1b1b1b); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.opentube-modal-title { margin: 0 0 14px; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; }
.opentube-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.opentube-benefit { display: grid; gap: 2px; padding-left: 20px; position: relative; }
.opentube-benefit::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; }
.opentube-benefit-title { font-weight: 600; }
.opentube-benefit-detail { color: var(--fg-300, inherit); font-size: 0.87em; line-height: 1.45; }
.opentube-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.opentube-modal-actions .opentube-button { text-decoration: none; display: inline-flex; align-items: center; }

/* Checkout method picker */
.opentube-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.opentube-method { border: 0; border-radius: 9px; padding: 8px 16px; font-weight: 600; cursor: pointer; color: var(--fg); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-method.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-method.unavailable { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }

/* Tier and payment-method choice */
.opentube-choice-label { font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-300, inherit); margin: 14px 0 6px; }
.opentube-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.opentube-tier { position: relative; display: grid; gap: 1px; min-width: 116px; padding: 12px 14px; border: 0; border-radius: 11px; text-align: left; cursor: pointer; color: var(--fg); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-tier.active { outline: 2px solid var(--primary); background: var(--bg-secondary-500, rgba(128, 128, 128, 0.3)); }
.opentube-tier-flag { position: absolute; top: -8px; right: 8px; font-size: 0.6em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--on-primary, #111); background: var(--primary); }
.opentube-tier-label { font-weight: 600; font-size: 0.9em; }
.opentube-tier-price { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-tier-rate { font-size: 0.75em; color: var(--fg-300, inherit); font-variant-numeric: tabular-nums; }

/* Admin members list */
.opentube-admin-members { display: grid; gap: 6px; margin-top: 8px; }
.opentube-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.16)); }
.opentube-admin-row.expired { opacity: 0.55; }
.opentube-admin-who { display: grid; gap: 1px; min-width: 0; }
.opentube-admin-handle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-admin-meta { font-size: 0.78em; color: var(--fg-300, inherit); }
.opentube-admin-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* Decided applications are reference, not work: set off from the live queue so
   the eye does not read one long undifferentiated list of people. */
/* A count of work waiting on the operator, carried on the tab itself so it is
   visible without opening it. Sized off the chip's own text so it stays put
   when the strip wraps. */
.opentube-chip-count {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--primary); color: var(--on-primary, #111);
  font-size: 0.78em; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.opentube-chip.active .opentube-chip-count { background: var(--on-primary, #fff); color: var(--primary); }

/* The two disclosures sit together under the queue; wrapping them keeps the
   pair on one row until the page is genuinely too narrow for it. */
.opentube-disclosures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.opentube-archive { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--bg-secondary-450, currentColor); }

/* Operations console */
.opentube-field-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 12px 0; }
.opentube-field-row .opentube-choice-label { display: grid; gap: 5px; }
.opentube-audit-detail { display: block; max-width: 34ch; overflow-x: auto; white-space: nowrap; font-size: 0.85em; color: var(--fg-300, inherit); }
/* An armed button has to look different from the one you meant to press once. */
.opentube-button.opentube-armed { background: var(--red, #d9534f); color: #fff; }

/* Why this video is here — the quality gate's own evidence, on the watch page.
   Collapsed by default so it explains itself only to whoever asks. */
.opentube-quality { margin: 18px 0 0; border: 1px solid var(--greyForegroundColor, #33352e); border-radius: 10px; }
.opentube-quality summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.opentube-quality[open] summary { border-bottom: 1px solid var(--greyForegroundColor, #33352e); }
.opentube-quality-score { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--mainColor, #c7f36b); color: #12130f; font-size: 12px; font-variant-numeric: tabular-nums; }
.opentube-quality-verdict { margin: 12px 14px 0; font-size: 14px; }
.opentube-quality-note { margin: 6px 14px 0; opacity: .75; font-size: 13px; }
.opentube-quality-table { width: calc(100% - 28px); margin: 12px 14px; border-collapse: collapse; font-size: 13px; }
.opentube-quality-table th { width: 42%; padding: 7px 10px 7px 0; text-align: left; font-weight: 600; vertical-align: top; }
.opentube-quality-table th small { display: block; margin-top: 3px; opacity: .7; font-weight: 400; font-size: 11.5px; line-height: 1.45; }
.opentube-quality-table td { padding: 7px 6px; vertical-align: top; }
.opentube-quality-num { text-align: right; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opentube-quality-bar { height: 6px; min-width: 60px; overflow: hidden; border-radius: 3px; background: rgba(127, 127, 127, .25); }
.opentube-quality-bar span { display: block; height: 100%; background: var(--mainColor, #c7f36b); }
.opentube-quality-retention { margin: 0 14px 13px; opacity: .7; font-size: 12px; }

/* The advanced half of the algorithm page: weights, explanations, the editor.
   Collapsed by default, because picking an algorithm is the whole job for most
   people and a page that opens on sliders reads as homework. */
.opentube-advanced {
  margin-top: 28px;
  border: 1px solid var(--greyForegroundColor, #33352e);
  border-radius: 12px;
}

.opentube-advanced > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

/* The default triangle sits oddly against a flex summary, so it is replaced by
   one that rotates with the open state. */
.opentube-advanced > summary::-webkit-details-marker { display: none; }

.opentube-advanced > summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .6;
  transition: transform 150ms ease;
}

.opentube-advanced[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.opentube-advanced[open] > summary {
  border-bottom: 1px solid var(--greyForegroundColor, #33352e);
  border-radius: 12px 12px 0 0;
}

.opentube-advanced > summary:focus-visible {
  outline: 2px solid var(--mainColor, #c7f36b);
  outline-offset: 2px;
}

.opentube-advanced-label { font-weight: 600; font-size: 15px; }
.opentube-advanced-hint { opacity: .65; font-size: 13px; }
.opentube-advanced-body { padding: 4px 18px 18px; }

/* The first heading inside sits right under the summary rule; it does not need
   its usual top margin as well. */
.opentube-advanced-body > .opentube-h2:first-child { margin-top: 16px; }

@media (max-width: 600px) {
  .opentube-advanced-hint { display: none; }
}

/* Moderation page.
   The queue is a working surface: rows of allegations against named channels,
   each needing a decision. So the actions sit on the row rather than behind a
   menu, and the form that blocks something nobody reported yet sits under the
   list rather than on a page of its own. */
.opentube-form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.opentube-form-row > * { flex: 1 1 200px; min-width: 0; }
.opentube-input { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--input-border-color, currentColor); background: var(--input-bg, transparent); color: var(--fg); }
.opentube-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.opentube-check input { flex: none; }
/* Wraps rather than overflowing: a host block can carry three buttons, and on
   a narrow screen a row of actions that scrolls sideways is a row of actions
   nobody finds. */
.opentube-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.opentube-row-actions .opentube-button { padding: 5px 10px; font-size: 0.85em; }

/* The reach panel's two groups.
   Kept visually separate because they count different populations — one is
   our own feed, the other is every view however it arrived. Running them
   together as a single row is what made the old funnel imply a drop-off that
   never happened. */
.opentube-reach-group { margin-bottom: 18px; }
.opentube-reach-group:last-of-type { margin-bottom: 8px; }
.opentube-reach-group .opentube-panel-sub { margin-bottom: 8px; }

/* Organizations */
.opentube-muted { color: var(--fg-300, #999); }
.opentube-org-request { padding: 12px 0; border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-org-request:last-child { border-bottom: none; }
.opentube-org-request ul { margin: 8px 0; padding-left: 20px; }
.opentube-org-request .opentube-button { margin-right: 8px; }
.opentube-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 20px; max-width: 480px; }
/* .opentube-input carries flex: 1 1 220px for the row layouts it grew up in.
   In a column container that basis becomes HEIGHT, and every text field
   renders as a 220px slab. Children of a stack size to their content. */
.opentube-stack > * { flex: 0 0 auto; }
.opentube-stack .opentube-input, .opentube-stack .opentube-select { width: 100%; box-sizing: border-box; }
.opentube-panel h4 { margin: 20px 0 6px; }

.opentube-profile-message { display: inline-flex; align-items: center; margin-left: 10px; }
.opentube-profile-message-note { font-size: 0.85em; max-width: 320px; }

/* ---------------------------------------------------------------------------
   Messages
   Two panes: who you are talking to, and what was said. The page fills the
   viewport rather than stacking cards, because a conversation is a place you
   sit in, not a document you scroll past.
   --------------------------------------------------------------------------- */
.opentube-chat-page { max-width: 1500px; }
.opentube-chat {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 160px);
  min-height: 460px;
  border: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-secondary-400, rgba(128, 128, 128, 0.07));
}

/* Conversation list */
.opentube-chat-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
}
.opentube-chat-tabs { display: flex; gap: 4px; padding: 10px; flex: 0 0 auto; }
.opentube-chat-tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--fg-300, #999); font-weight: 600; font-size: 0.9em;
}
.opentube-chat-tab:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.14)); }
.opentube-chat-tab.active { background: var(--bg-secondary-500, rgba(128, 128, 128, 0.24)); color: var(--fg); }
.opentube-chat-tab-count {
  background: var(--primary); color: var(--on-primary, #111);
  border-radius: 999px; padding: 0 6px; font-size: 0.75em; font-weight: 700;
}
.opentube-chat-rows { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.opentube-chat-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: transparent; color: var(--fg); cursor: pointer;
}
.opentube-chat-row:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.12)); }
.opentube-chat-row.active { background: var(--bg-secondary-500, rgba(128, 128, 128, 0.22)); }
.opentube-chat-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opentube-chat-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.opentube-chat-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-chat-row.unread .opentube-chat-row-name { font-weight: 800; }
.opentube-chat-row-time { flex: 0 0 auto; font-size: 0.72em; color: var(--fg-300, #999); }
.opentube-chat-row-preview {
  font-size: 0.85em; color: var(--fg-300, #999);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opentube-chat-row-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); }
.opentube-chat-empty-list { padding: 20px 14px; color: var(--fg-300, #999); font-size: 0.9em; }
.opentube-chat-new {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 10px;
  border-top: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
}
.opentube-chat-new .opentube-input { flex: 1 1 auto; min-width: 0; }

/* Avatars */
.opentube-chat-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.opentube-chat-msg .opentube-chat-avatar { width: 32px; height: 32px; font-size: 0.85em; }
.opentube-chat-header .opentube-chat-avatar { width: 36px; height: 36px; }

/* Thread pane */
.opentube-chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.opentube-chat-header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
}
.opentube-chat-header-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.opentube-chat-context { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-300, #999); }
.opentube-chat-action {
  flex: 0 0 auto; border: none; background: transparent; color: var(--fg-300, #999);
  cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: 0.85em;
}
.opentube-chat-action:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.16)); color: var(--fg); }
.opentube-chat-back { display: none; }

.opentube-chat-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 16px; }
.opentube-chat-day { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; }
.opentube-chat-day span {
  font-size: 0.72em; color: var(--fg-300, #999); text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); padding: 3px 10px; border-radius: 999px;
}
.opentube-chat-msg { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.opentube-chat-msg.grouped { margin-bottom: 3px; }
.opentube-chat-msg.mine { flex-direction: row-reverse; }
.opentube-chat-msg-spacer { flex: 0 0 auto; width: 32px; }
.opentube-chat-bubble {
  max-width: min(560px, 72%);
  background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18));
  border-radius: 14px; padding: 8px 12px;
}
.opentube-chat-msg.mine .opentube-chat-bubble { background: var(--primary); color: var(--on-primary, #111); }
.opentube-chat-msg-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.opentube-chat-msg-who { font-weight: 700; font-size: 0.82em; }
.opentube-chat-msg-time { font-size: 0.72em; opacity: 0.7; }
.opentube-chat-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.opentube-chat-blank-thread, .opentube-chat-blank { color: var(--fg-300, #999); }
.opentube-chat-blank { margin: auto; max-width: 420px; text-align: center; padding: 24px; }
.opentube-chat-blank h3 { margin-bottom: 8px; color: var(--fg); }

.opentube-chat-request-bar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-size: 0.85em; color: var(--fg-300, #999);
  border-top: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
}
.opentube-chat-request-actions { display: flex; gap: 8px; }

.opentube-chat-composer {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px;
  border-top: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
}
.opentube-chat-composer-input {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 160px;
  padding: 10px 12px; border-radius: 12px; line-height: 1.45;
  border: 1px solid var(--input-border-color, currentColor);
  background: var(--input-bg, transparent); color: var(--fg); font: inherit;
}

/* One pane at a time on a narrow screen. */
@media (max-width: 900px) {
  .opentube-chat { grid-template-columns: 1fr; height: calc(100vh - 130px); }
  .opentube-chat-pane { display: none; }
  .opentube-chat.thread-open .opentube-chat-list { display: none; }
  .opentube-chat.thread-open .opentube-chat-pane { display: flex; }
  .opentube-chat-back {
    display: inline-flex; border: none; background: transparent; color: var(--fg);
    font-size: 1.2em; cursor: pointer; padding: 4px 8px;
  }
}
/* The identity you are wearing, above the tabs: switching it switches inbox,
   so it belongs where you change context rather than where you compose. */
.opentube-chat-identity {
  flex: 0 0 auto; padding: 10px 10px 0;
}
.opentube-chat-identity .opentube-select { width: 100%; font-weight: 600; }
.opentube-chat-as { display: block; font-size: 0.78em; color: var(--fg-300, #999); margin-bottom: 6px; }
.opentube-chat-new { flex-direction: column; align-items: stretch; }
.opentube-chat-new-row { display: flex; gap: 8px; }
.opentube-chat-new-row .opentube-input { flex: 1 1 auto; min-width: 0; }

/* Picking a person, and looking one up */
.opentube-picker { position: relative; flex: 1 1 auto; min-width: 0; }
.opentube-picker .opentube-input { width: 100%; box-sizing: border-box; }
.opentube-picker-menu {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; bottom: calc(100% + 4px);
  background: var(--bg-secondary-500, #222); border: 1px solid var(--bg-secondary-450, rgba(128,128,128,0.35));
  border-radius: 10px; overflow: hidden; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.opentube-picker-menu.open { display: block; }
.opentube-picker-option {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--fg); cursor: pointer; padding: 7px 10px;
}
.opentube-picker-option:hover { background: var(--bg-secondary-450, rgba(128,128,128,0.2)); }
.opentube-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.opentube-person-text { display: flex; flex-direction: column; min-width: 0; }
.opentube-person-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-person-handle { font-size: 0.78em; color: var(--fg-300, #999); }

/* In a stack the menu drops downward — there is room below there. */
.opentube-stack .opentube-picker-menu { bottom: auto; top: calc(100% + 4px); }

.opentube-chat-who { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; }
.opentube-chat-who-text { cursor: pointer; }

.opentube-profile-card {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.opentube-profile-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--bg-secondary-500, #1c1c1c); border-radius: 14px; padding: 24px; min-width: 260px; max-width: 90vw;
  border: 1px solid var(--bg-secondary-450, rgba(128,128,128,0.3));
}
.opentube-profile-inner h3 { margin: 0; }
.opentube-profile-inner .opentube-button { width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; }

/* The pane was running to the edge of the window. */
.opentube-chat-page { padding-inline: 16px; box-sizing: border-box; }

/* The platform's vouching, one mark for people and brands alike. */
.opentube-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px;
  border-radius: 999px; background: var(--primary); color: var(--on-primary, #111);
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* Brand and agency sign-up */
.opentube-orgsignup .opentube-stack { max-width: 560px; }
.opentube-orgsignup textarea.opentube-input { width: 100%; box-sizing: border-box; }
.opentube-steps { margin: 8px 0 0; padding-left: 20px; color: var(--fg-300, #999); }
.opentube-steps li { margin-bottom: 6px; }
.opentube-report-inner { align-items: stretch; text-align: left; min-width: min(420px, 90vw); }
.opentube-report-inner .opentube-stack { max-width: none; }
.opentube-report-inner textarea.opentube-input { width: 100%; box-sizing: border-box; }

/* Sponsorships */
.opentube-deal {
  padding: 14px 0;
  border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.2));
}
.opentube-deal:last-child { border-bottom: none; }
.opentube-deal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.opentube-deal-org { color: var(--fg-300, #999); }
.opentube-deal-amount { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1em; }
.opentube-deal-terms { margin: 6px 0; white-space: pre-wrap; }
.opentube-deal-meta { margin: 0; font-size: 0.82em; color: var(--fg-300, #999); }
.opentube-deal-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); color: var(--fg);
}
.opentube-deal-status.accepted, .opentube-deal-status.settled { background: var(--primary); color: var(--on-primary, #111); }
.opentube-deal-status.declined, .opentube-deal-status.withdrawn { opacity: 0.7; }
.opentube-deal-actions { display: flex; gap: 8px; margin-top: 10px; }
.opentube-deal-link { display: inline-block; margin-top: 8px; font-size: 0.85em; }

/* The shelf of organizations */
.opentube-org-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.opentube-org-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 18px; min-height: 140px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25));
  border-radius: 14px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.08)); color: var(--fg);
}
.opentube-org-card:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18)); }
.opentube-org-card-name { font-size: 1.15rem; font-weight: 700; }
.opentube-org-card-type { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-300, #999); }
.opentube-org-card-meta { font-size: 0.85em; color: var(--fg-300, #999); }
.opentube-org-card-role { margin-top: auto; font-size: 0.78em; color: var(--fg-300, #999); }
.opentube-org-card-new { align-items: center; justify-content: center; border-style: dashed; }
.opentube-org-card-plus { font-size: 2.2rem; line-height: 1; color: var(--fg-300, #999); }
.opentube-back-link { color: var(--primary); text-decoration: none; }
.opentube-metrics-inner { min-width: min(620px, 92vw); align-items: stretch; text-align: left; }
.opentube-metrics-inner .opentube-panels { margin-bottom: 12px; }

/* Contracts */
.opentube-contract { padding: 12px 0; }
.opentube-contract-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.opentube-contract-terms { margin: 8px 0; padding-left: 20px; }
.opentube-contract-terms li { margin-bottom: 6px; line-height: 1.5; }
.opentube-contract-manual { color: var(--fg-300, #999); font-size: 0.85em; }
.opentube-contract-builder { margin: 8px 0; }
.opentube-contract-clause { padding: 8px 0; border-bottom: 1px solid var(--bg-secondary-450, rgba(128,128,128,0.15)); }
.opentube-contract-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-left: 24px; }
.opentube-contract-fields .opentube-input { flex: 1 1 140px; min-width: 0; }
.opentube-deal-terms-state { color: var(--fg-300, #999); }