:root {
 --bg: #f7f7f7;
 --text: #171717;
 --app-drawer-width: 240px;
 
 --summary-dialog-pane-margin: 16px;
 --summary-dialog-pane-marginminder: 8px;
 --splitterkleur: #777776;
}

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: Inter, Arial, sans-serif;
 color: var(--text);
 background: #fff;
 padding-top: 137px;
 overflow-y: scroll;
}

body.is-remote-library {
 background: #F4E9D8;
}

body.is-remote-library .fixed-header {
 background: #F4E9D8;
}

body.is-remote-library .app-drawer {
 background: #F4E9D8;
}

.fixed-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000;
 background: #fff;
}

.topbar {
 display: flex;
 align-items: center;
 gap: 18px;
 padding: 16px 22px; 
}

.brand {
 display: flex;
 align-items: center;
 gap: 4px;
 min-width: 230px;
 font-size: 19.5px;
 font-weight: 700;
 line-height: 1;
 cursor:pointer;
}

.brand-text {
 font-family: "Special Gothic Condensed One", sans-serif;
 font-size:1.6em;
}

.logo {
 width: 46px;
 height: 46px;
 display: grid;
 place-items: center;
 flex-shrink: 0;
 color: #fff;
 position: relative;
}

.logo-tv {
 position: absolute;
 inset: 0;
 width: 46px;
 height: 46px;
}

.material-symbols-outlined {
 font-size: 22px;
 line-height: 1;
 font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
 position: relative;
 z-index: 1;
}

.search-group {
 display: flex;
 align-items: center;
 flex: 1;
 gap: 16px;
}

.input-wrap {
 display: flex;
 align-items: center;
 
 border-radius: 999px;
 border:solid 1px silver;
 overflow: hidden;
 min-height: 40px;
 flex: 1;
}

.search-group .url-input-wrap {
 flex: 2.2;
}

.search-group .input-wrap:last-of-type {
 flex: 3;
}

.remote-library-notice {
 display: none;
 flex: 1;
 min-height: 40px;
 border-radius: 999px;
 border: solid 1px #efcfac;
 background: #fff3e3;
 color: #9a5d23;
 align-items: center;
 padding: 0 20px;
 font-size: 16px;
 font-weight: 600;
}

body.is-remote-library .url-input-wrap {
 display: none;
}

body.is-remote-library .remote-library-notice {
 display: flex;
}

.input-wrap input {
 border: 0;
 background: transparent;
 width: 100%;
 padding: 0 20px;
 font-size: 16px; 
 color: rgb(23, 23, 23);
 outline: none; 
}

.input-icon {
 width: 58px;
 height: 50px;
 display: grid;
 place-items: center;
 color: #7a6a6a;
 border-left: 1px solid #d7d1d1;
 flex-shrink: 0;
}

.input-icon:first-child {
 border-left: 0;
}

.topbar-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-left: 6px;
}

.settings,
.data-library,
.favorite-filter,
.show-unread-filter,
.chat-history-filter,
.open-latest,
.chat-toggle,
.view-toggle__button {
 color: #5b4c4c;
 width: 38px;
 height: 38px;
 display: grid;
 place-items: center;
 flex-shrink: 0;
 border: 0;
 background: transparent;
 border-radius: 10px;
 cursor: pointer;
}

.settings:focus,
.settings:focus-visible,
.data-library:focus,
.data-library:focus-visible,
.favorite-filter:focus,
.favorite-filter:focus-visible,
.show-unread-filter:focus,
.show-unread-filter:focus-visible,
.chat-history-filter:focus,
.chat-history-filter:focus-visible,
.open-latest:focus,
.open-latest:focus-visible,
.chat-toggle:focus,
.chat-toggle:focus-visible,
.view-toggle__button:focus,
.view-toggle__button:focus-visible {
 outline: none;
 box-shadow: none;
}

.chat-toggle.is-active,
.view-toggle__button.is-active {
 background: #efefef;
 color: #171717;
}

#youtube-search-button {
 position: relative;
}

.youtube-search-shortcut-badge {
 position: absolute;
 right: -1px;
 bottom: -1px;
 width: 11px;
 height: 12px; 
 color: #5b4c4c;
 background: #fff;
 border:solid 1px #5b4c4c;
 font-size: 9px;
 font-weight: 700; 
 text-align: center;
 pointer-events: none;
}

.view-toggle {
 display: flex;
 align-items: center;
 gap: 4px;
 flex-shrink: 0;
}

.chips {
 display: flex;
 gap: 10px;
 font-size:0.8em;
 padding: 13px 22px 8px calc(var(--app-drawer-width) + 22px);
 overflow-x: auto;
}

.video-count {
 margin: 0;
 padding: 0 22px 13px calc(var(--app-drawer-width) + 22px);
 font-size: 12px;
 color: #6a6a6a;
 margin-top:5px;
}

.video-pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 0 22px 22px calc(var(--app-drawer-width) + 22px);
}

.video-pagination__button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 border: 0;
 border-radius: 10px;
 background: #dcdcdc;
 color: #202020;
 cursor: pointer;
}

.video-pagination__button:disabled {
 opacity: 0.4;
 cursor: default;
}

.video-pagination__status {
 margin: 0;
 font-size: 12px;
 color: #6a6a6a;
 min-width: 100px;
 text-align: center;
}

.app-drawer {
 position: fixed;
 top: 78px;
 left: 0;
 bottom: 0;
 width: var(--app-drawer-width);
 background: #fff;
 z-index: 1001;
 overflow-y: auto;
 padding: 14px 12px 22px;
}

.app-drawer__section + .app-drawer__section {
 margin-top: 18px;
}

.app-drawer__title {
 margin: 0 0 8px;
 font-size: 14px;
 line-height: 1.3;
}

.app-drawer__empty {
 margin: 0;
 color: #6a6a6a;
 font-size: 13px;
 line-height: 1.4;
}

.app-drawer__top-list,
.app-drawer__all-list,
.app-drawer__category-list {
 margin: 0;
 padding: 0;
}

.app-drawer__top-list {
 padding-left: 18px;
}

.app-drawer__all-list,
.app-drawer__category-list {
 list-style: none;
 display: grid;
 gap: 6px;
 padding-left: 18px;
}

.app-drawer__top-item {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: baseline;
 gap: 8px;
 font-size: 13px;
 line-height: 1.35;
}

.app-drawer__top-item + .app-drawer__top-item {
 margin-top: 5px;
}

.app-drawer__keyword,
.app-drawer__keyword-category,
.app-drawer__author {
 width: 100%;
 border: 0;
 background: transparent;
 padding: 0;
 color: #1c1c1c;
 text-align: left;
 cursor: pointer;
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: baseline;
 gap: 8px;
}

.app-drawer__keyword:focus-visible,
.app-drawer__keyword-category:focus-visible,
.app-drawer__author:focus-visible {
 outline: 2px solid #0eab34;
 outline-offset: 2px;
 border-radius: 6px;
}

.app-drawer__word,
.app-drawer__all-item,
.app-drawer__category-item {
 color: #1c1c1c;
 word-break: break-word;
}

.app-drawer__count {
 color: #6a6a6a;
 font-size: 12px;
}

.app-drawer__all-item,
.app-drawer__category-item {
 font-size: 13px;
 line-height: 1.3;
}

.app-drawer__all-item .app-drawer__keyword {
 grid-template-columns: 1fr;
}

.chip {
 border: 0;
 background: #dcdcdc;
 color: #202020;
 border-radius: 8px;
 padding: 8px 12px;
 font-size: 15.5px;
 line-height: 1;
 white-space: nowrap;
}

.chip.active {
 background: #000;
 color: #fff;
}

.chip-keyword-active {
 background: #171717;
 color: #fff;
}

.chip-reset-filters {
 background: #efefef;
 color: #1c1c1c;
}

.content-layout {
 display: flex;
 align-items: stretch;
 gap: 22px;
 padding: 34px 22px 34px calc(var(--app-drawer-width) + 22px);
}

.chat-panel {
 width: 600px;
 min-width: 600px;
 height: calc(100vh - 210px);
 border-radius: 14px;
 border: 1px solid #ececec;
 background: #fff;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.chat-panel[hidden] {
 display: none;
}

.chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.chat-message {
 margin: 0;
 border-radius: 10px;
 padding: 10px 12px;
 line-height: 1.35;
 font-size: 14px;
 white-space: pre-wrap;
}

.chat-message--question {
 background: #f3f3f3;
 align-self: flex-end;
}

.chat-message--answer {
 background: #f8f1e8;
 align-self: flex-start;
}

.chat-form {
 position: sticky;
 bottom: 0;
 display: flex;
 gap: 8px;
 padding: 12px;
 border-top: 1px solid #ececec;
 background: #fff;
}

.chat-input {
 flex: 1;
 min-width: 0;
 border: 1px solid #d7d1d1;
 border-radius: 10px;
 padding: 8px 10px;
 font-size: 14px;
}

.chat-send {
 border: 0;
 border-radius: 10px;
 background: #171717;
 color: #fff;
 padding: 8px 12px;
 font-size: 14px;
 cursor: pointer;
}

.chat-send:disabled,
.chat-input:disabled {
 opacity: 0.65;
 cursor: not-allowed;
}

.grid {
 flex: 1;
 min-width: 0;
 padding: 0;
}

body.is-list-view .grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}

body.is-text-view .grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
}

body.is-grid-view .grid {
 display: grid;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 gap: 20px 24px;
}

.card {
 min-width: 0;
 cursor: pointer;
 display: grid;
 border: 1px solid #ececec;
 border-radius: 14px;
 background: #fff;
}

body.is-list-view .card,
body.is-text-view .card {
 grid-template-columns: 160px minmax(0, 1fr) auto;
 gap: 16px;
 align-items: start;
 padding: 16px 18px;
}

body.is-text-view .card {
 grid-template-columns: minmax(0, 1fr);
}

body.is-grid-view .card {
 grid-template-columns: minmax(0, 1fr);
 grid-template-rows: auto auto;
 gap: 0;
 align-items: stretch;
 justify-items: stretch;
 border: 0;
 border-radius: 0;
 padding: 0;
 background: transparent;
}

.card[hidden] {
 display: none;
}

.card:focus-visible {
 outline: 2px solid #0eab34;
 outline-offset: 2px;
}

.thumb-wrap {
 position: relative;
 border-radius: 10px;
 overflow: hidden;
 aspect-ratio: 16 / 9;
 background: #111;
}

body.is-grid-view .thumb-wrap {
 position: relative;
 width: 100%;
 border-radius: 16px;
 aspect-ratio: 16 / 9;
}

.thumb-wrap img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: filter 160ms ease;
}

body.is-grid-view .thumb-wrap img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.thumb-wrap img.is-processing { 
 filter: brightness(92%) contrast(41%) grayscale(100%) opacity(100%);
}

.card-status {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 flex-wrap: wrap;
 max-width: 240px;
}

.retry-button {
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1b1b1b;
 padding: 8px 14px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}

body.is-grid-view .retry-button {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
}

body.is-list-view .retry-button {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
}

body.is-text-view .retry-button {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
}

.duration {
 background: #1c1c1c;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
 border-radius: 6px;
 padding: 6px 8px;
}

body.is-grid-view .duration,
body.is-list-view .duration {
 position: absolute;
 right: 8px;
 bottom: 8px;
 z-index: 2;
}

body.is-text-view .duration {
 display: none;
}

.duration:empty {
 display: none;
}

.badge {
 color: #fff;
 font-size: 11px;
 font-weight: 700;
 border-radius: 6px;
 padding: 6px 10px;
 line-height: 1;
}

body.is-grid-view .badge,
body.is-list-view .badge {
 position: absolute;
 left: 8px;
 bottom: 8px;
 z-index: 2;
}

body.is-text-view .badge {
 position: static;
 left: auto;
 bottom: auto;
 z-index: auto;
 display: inline-flex;
 margin: 8px 0 0;
 align-self: flex-start;
}

.badge.is-red {
 background: #e10000;
}

.badge.is-green {
 background: #0eab34;
}

body.is-list-view .card:has(.badge.is-green) {
 background: #e8f7ea;
}

.badge.is-yellow {
 background: #FFD800;
 color:rgb(32,32,32);
}

.badge--list-inline {
 position: static !important;
 left: auto !important;
 bottom: auto !important;
 z-index: auto !important;
 display: inline-flex;
 margin: 8px 0 0;
 align-self: flex-start;
}

.favorite-indicator {
 width: 34px;
 height: 34px;
 border-radius: 999px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffffff;
 opacity: 0;
 pointer-events: none;
 transition: opacity 140ms ease;
}

body.is-grid-view .favorite-indicator,
body.is-list-view .favorite-indicator {
 position: absolute;
 left: 8px;
 top: 8px;
 z-index: 2;
 background: rgba(0, 0, 0, 0.55);
}

.chat-history-indicator {
 width: 34px;
 height: 34px;
 border-radius: 999px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ff1111;
 pointer-events: none;
}

body.is-grid-view .chat-history-indicator,
body.is-list-view .chat-history-indicator {
 position: absolute;
 right: 8px;
 top: 8px;
 z-index: 2;
 background: rgba(0, 0, 0, 0.55);
}

body.is-text-view .chat-history-indicator {
 display: none;
}

.chat-history-indicator .material-symbols-outlined {
 font-size: 28px;
 padding-top: 2px;
 font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

body.is-text-view .favorite-indicator {
 position: static;
 left: auto;
 top: auto;
 z-index: auto;
 background: transparent;
 width: auto;
 height: auto;
 border-radius: 0;
 justify-content: flex-start;
}

.favorite-indicator .material-symbols-outlined {
 font-size: 28px;
 padding-top:2px;
}

.favorite-indicator.is-active {
 opacity: 1;
 color: #ff1111;
}

.favorite-indicator.is-active .material-symbols-outlined {
 font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.title {
 margin: 0 0 6px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.2;
}

body.is-grid-view .title {
 margin: 12px 0 6px;
 font-size: 16px;
 line-height: 1.16;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.meta {
 margin: 0;
 color: #7a5454;
 font-size: 12px;
 line-height: 1.2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.summary-excerpt {
 margin: 10px 0 0;
 color: #2d2d2d;
 font-size: 14px;
 line-height: 1.45;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.summary-excerpt:empty {
 display: none;
}

body.is-grid-view .summary-excerpt {
 display: none;
}

body.is-text-view .thumb-wrap {
 display: none;
}

.summary-dialog[hidden] {
 display: none;
}

.summary-dialog {
 position: fixed;
 inset: 0;
 z-index: 2000;
}

.summary-dialog__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
}

.summary-dialog__panel {
 position: relative;
 max-width: 1500px;
 width: min(98vw, 1500px);
 height: 92vh; /* HIER */
 margin: 4vh auto 0;
 background: #fff;
 border-radius: 14px;
 padding: 22px;
 overflow: hidden;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
 display: flex;
 align-items: stretch;
 gap: 0;
}

.summary-dialog__left {
 min-width: 0;
 min-height: 0;
 height: 100%;
 display: flex;
 flex-direction: column;
 flex: 1 1 calc(100% - 16px - 450px - (var(--summary-dialog-pane-margin) * 2));
 margin-right: var(--summary-dialog-pane-marginminder);
}

.summary-dialog__splitter {
 width: 16px;
 flex: 0 0 16px;
 cursor: col-resize;
 position: relative;
 touch-action: none; 
}

.summary-dialog__splitter::before,
.summary-dialog__splitter::after {
 content: '';
 position: absolute;
 top: 0;
 bottom: 0;
 width: 1px;
 background:var(--splitterkleur);
}

.summary-dialog__splitter::before {
 left: 5px;
}

.summary-dialog__splitter::after {
 right: 5px;
}

.summary-dialog__splitter-dots {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 color: var(--splitterkleur);
 font-size: 12px;
 line-height: 1;
 letter-spacing: 0;
 writing-mode: vertical-rl;
 text-orientation: upright;
 user-select: none;
 pointer-events: none;
}

.summary-dialog.is-resizing,
.summary-dialog.is-resizing * {
 cursor: col-resize;
 user-select: none;
}

.summary-dialog__right {
 width: calc(450px - var(--summary-dialog-pane-margin));
 min-width: 0;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 flex: 0 0 calc(450px - var(--summary-dialog-pane-margin));
 margin-left: var(--summary-dialog-pane-margin);
}

.summary-dialog__tabs {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 flex-shrink: 0;
}

.summary-dialog__tab {
 border: 0;
 border-radius: 10px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 10px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.summary-dialog__tab.is-active {
 background: #171717;
 color: #fff;
}

.summary-dialog__tab:focus-visible {
 outline: 2px solid #0eab34;
 outline-offset: 2px;
}

.summary-dialog__tab-panels {
 flex: 1;
 min-height: 0;
 margin-top: 12px;
}

.summary-dialog__tab-panel {
 display: none;
 min-height: 0;
}

.summary-dialog__tab-panel.is-active {
 display: flex;
 flex-direction: column;
 height: 100%;
 min-height: 0;
}

.summary-dialog__author-title {
 margin: 0;
 font-size: 16px;
 line-height: 1.2;
}

.summary-dialog__author-link {
 color: inherit;
 text-decoration: underline;
}

.summary-dialog__author-link[aria-disabled="true"] {
 text-decoration: none;
 pointer-events: none;
}

.summary-dialog__author-link:focus-visible {
 outline: 2px solid #0eab34;
 outline-offset: 2px;
 border-radius: 4px;
}

.summary-dialog__author-status {
 margin: 10px 0 0;
 font-size: 14px;
 color: #666;
 flex-shrink: 0;
}

.summary-dialog__author-list {
 list-style: none;
 margin: 10px 0 0;
 padding: 0 6px 0 0;
 display: grid;
 gap: 10px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 align-content: start;
}

.summary-dialog__author-item {
 margin: 0;
}

.summary-dialog__author-button {
 width: 100%;
 border: 1px solid #ececec;
 border-radius: 12px;
 background: #fff;
 color: #1c1c1c;
 padding: 10px;
 text-align: left;
 cursor: pointer;
}

.summary-dialog__author-button:focus-visible {
 outline: 2px solid #0eab34;
 outline-offset: 2px;
}

.summary-dialog__author-item-title {
 margin: 0;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.3;
}

.summary-dialog__author-item-meta {
 margin: 6px 0 0;
 font-size: 12px;
 color: #7a5454;
 line-height: 1.3;
}

.summary-dialog__chat-messages {
 flex: 1;
 min-height: 0;
 overflow: auto;
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 0 6px 0 0;
}

.summary-dialog__chat-form {
 display: flex;
 gap: 8px;
 margin-top: 10px;
 margin-bottom: 20px;
}

.summary-dialog__chat-input {
 flex: 1;
 min-width: 0;
 margin-left: 2px;
 border: 1px solid #d7d1d1;
 border-radius: 10px;
 padding: 8px 10px;
 font-size: 14px;
}

.summary-dialog__chat-send {
 border: 0;
 border-radius: 999px;
 background: #171717;
 color: #fff;
 padding: 8px 14px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.summary-dialog__chat-send:disabled,
.summary-dialog__chat-input:disabled {
 opacity: 0.65;
 cursor: not-allowed;
}

.summary-dialog__chat-message {
 margin: 0;
 border-radius: 10px;
 padding: 10px 12px;
 line-height: 1.35;
 font-size: 16px;
 white-space: pre-wrap;
}

.summary-dialog__chat-message--question {
 background: #f3f3f3;
 align-self: flex-end;
}

.summary-dialog__chat-message--answer {
 background: #f8f1e8;
 align-self: flex-start;
}

.summary-dialog__actions {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 14px;
 margin-top: auto;
 width: 100%;
 order: 3;
}

.summary-dialog__favorite {
 position: absolute;
 left: 0;
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #7a7a7a;
 padding: 8px 14px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 width: 100%;
 max-width: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
}


.summary-dialog__block {
 position: absolute;
 left: 116px;
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #7a7a7a;
 padding: 8px 14px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 width: auto;
 max-width: none;
 display: flex;
 align-items: center;
 justify-content: center;
}

.summary-dialog__block:hover,
.summary-dialog__block:focus-visible {
 color: #8f1d1d;
}

.summary-dialog__block:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}


.summary-dialog__favorite.is-active {
 color: #e10000;
}

.summary-dialog__favorite.is-active .material-symbols-outlined {
 font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.summary-dialog__close {
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 14px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 width: 100%;
 max-width: 100px;
 display: block;
}

.summary-dialog__right-actions {
 position: absolute;
 right: 0;
 display: flex;
 align-items: center;
 gap: 10px;
}


.summary-dialog__upload,
.summary-dialog__transcript,
.summary-dialog__transcript-view,
.summary-dialog__youtube,
.summary-dialog__delete {
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 14px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 width: 100%;
 max-width: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
}


.summary-dialog__title {
 margin: 0 0 10px;
 font-size: 22px;
 line-height: 1.2;
 display: flex;
 align-items: center;
 gap: 8px;
}

.summary-dialog__duration-alert {
 display: inline-flex;
 align-items: center;
 color: #e10000;
}

.summary-dialog__duration-alert[hidden] {
 display: none;
}

.summary-dialog__duration-alert .material-symbols-outlined {
 font-size: 22px;
}

.summary-dialog__title-text {
 min-width: 0;
}

.summary-dialog__content {
 margin: 0;
 color: #2d2d2d;
 line-height: 1.45;
 font-size: 16px;
 overflow: auto;
 padding-right: 6px;
 flex: 1;
 min-height: 0; 
 margin-bottom:18px;
}

.summary-dialog__content p,
.summary-dialog__content ul,
.summary-dialog__content ol {
 margin: 0 0 12px;
}

.summary-dialog__content ul,
.summary-dialog__content ol {
 padding-left: 20px;
}

.summary-dialog__content > :last-child {
 margin-bottom: 0;
}

.summary-dialog__upload-feedback {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin: 14px 0 0;
}

.summary-dialog__upload-feedback[hidden] {
 display: none;
}

.summary-dialog__upload-spinner {
 width: 34px;
 height: 34px;
 border-radius: 999px;
 border: 3px solid #e5e5e5;
 border-top-color: #171717;
 animation: summary-dialog-upload-spin 0.9s linear infinite;
}

.summary-dialog__upload-text {
 margin: 0;
 font-size: 14px;
 font-weight: 600;
 color: #2d2d2d;
}

.summary-dialog__upload-feedback.is-success .summary-dialog__upload-spinner {
 display: none;
}

.summary-dialog__upload-feedback.is-success .summary-dialog__upload-text {
 color: #0eab34;
}

@keyframes summary-dialog-upload-spin {
 to {
  transform: rotate(360deg);
 }
}

.summary-dialog__model {
 margin: 10px 0 0;
 text-align: center;
 font-size: 12px;
 color: #666;
 order: 4;
}

.transcript-dialog[hidden] {
 display: none;
}

.transcript-dialog {
 position: fixed;
 inset: 0;
 z-index: 2200;
}

.transcript-dialog__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
}

.transcript-dialog__panel {
 position: relative;
 width: min(96vw, 1200px);
 height: 96vh;
 margin: 2vh auto 0;
 background: #fff;
 border-radius: 14px;
 padding: 22px;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.transcript-dialog__title {
 margin: 0;
 font-size: 22px;
 line-height: 1.2;
}

.transcript-dialog__content {
 flex: 1;
 min-height: 0;
 overflow: auto;
 color: #2d2d2d;
 line-height: 1.45;
 font-size: 16px;
 padding-right: 6px;
}

.transcript-dialog__content p {
 margin: 0 0 12px;
}

.transcript-dialog__content > :last-child {
 margin-bottom: 0;
}

.transcript-dialog__actions {
 display: flex;
 justify-content: center;
}

.transcript-dialog__close {
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 16px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.data-library-dialog[hidden] {
 display: none;
}

.data-library-dialog {
 position: fixed;
 inset: 0;
 z-index: 2100;
}

.data-library-dialog__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
}

.data-library-dialog__panel {
 position: relative;
 max-width: 420px;
 width: min(92vw, 420px);
 margin: 10vh auto 0;
 background: #fff;
 border-radius: 14px;
 padding: 22px;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.data-library-dialog__title {
 margin: 0;
 font-size: 22px;
 line-height: 1.2;
}

.data-library-dialog__options {
 display: grid;
 gap: 10px;
}

.data-library-dialog__option {
 display: flex;
 align-items: center;
 gap: 8px;
 color: #171717;
 font-size: 15px;
}

.data-library-dialog__option input[type="radio"] {
 margin: 0;
}

.data-library-dialog__close {
 align-self: center;
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 16px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.settings-dialog[hidden] {
 display: none;
}

.settings-dialog {
 position: fixed;
 inset: 0;
 z-index: 2100;
}

.settings-dialog__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
}

.settings-dialog__panel {
 position: relative;
 max-width: 760px;
 width: min(92vw, 760px);
 max-height: 84vh;
 margin: 4vh auto 0;
 background: #fff;
 border-radius: 14px;
 padding: 22px;
 overflow: auto;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.settings-dialog__title {
 margin: 0;
 font-size: 22px;
 line-height: 1.2;
}

.settings-dialog__content {
 overflow: auto;
}

.settings-dialog__empty {
 margin: 0;
 color: #4b4b4b;
}

.settings-dialog__list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 12px;
}

.settings-dialog__item {
 display: grid;
 gap: 6px;
}

.settings-dialog__label {
 font-size: 12px;
 font-weight: 700;
 color: #4b4b4b;
}

.settings-dialog__value {
 width: 100%;
 border: 1px solid #d7d1d1;
 border-radius: 10px;
 background: #f8f8f8;
 color: #171717;
 padding: 9px 12px;
 font-size: 14px;
}

.settings-dialog__close {
 align-self: center;
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 16px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.youtube-search-dialog[hidden] {
 display: none;
}

.youtube-search-dialog {
 position: fixed;
 inset: 0;
 z-index: 2100;
}

.youtube-search-dialog__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
}

.youtube-search-dialog__panel {
 position: relative;
 width: 60vw;
 height: 90vh;
 margin: 5vh auto 0;
 background: #fff;
 border-radius: 14px;
 padding: 22px;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.youtube-search-dialog__title {
 margin: 0;
 font-size: 22px;
 line-height: 1.2;
}

.youtube-search-dialog__content {
 flex: 1;
 min-height: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.youtube-search-dialog__search-row {
 display: flex;
 gap: 10px;
 align-items: center;
}

.youtube-search-dialog__status {
 margin: 0;
 color: #666;
 font-size: 13px;
 line-height: 1.3;
}

.youtube-search-dialog__input-wrap {
 flex: 1;
}

.youtube-search-dialog__search-button,
.youtube-search-dialog__more,
.youtube-search-dialog__close {
 border: 0;
 border-radius: 999px;
 background: #efefef;
 color: #1c1c1c;
 padding: 8px 16px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.youtube-search-dialog__results {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 10px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 align-content: start;
}

.youtube-search-result {
 border: 1px solid #ececec;
 border-radius: 12px;
 background: #fff;
 padding: 12px;
 display: grid;
 grid-template-columns: 180px minmax(0, 1fr) auto auto;
 gap: 12px;
 align-items: start;
}

.youtube-search-result__thumb {
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 border-radius: 10px;
 background: #111;
}

.youtube-search-result__main {
 min-width: 0;
}

.youtube-search-result__title {
 margin: 0;
 font-size: 17px;
 line-height: 1.25;
}

.youtube-search-result__summary {
 margin: 8px 0 0;
 color: #2d2d2d;
 font-size: 14px;
 line-height: 1.35;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.youtube-search-result__meta {
 margin: 8px 0 0;
 color: #7a5454;
 font-size: 12px;
 line-height: 1.3;
}


.youtube-search-result__download {
 align-self: center;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 color: #1c1c1c;
 font-size: 14px;
 cursor: pointer;
 user-select: none;
 border: 0;
 background: transparent;
 padding: 0;
}

.youtube-search-result__download-icon {
 font-size: 34px;
 line-height: 1;
 color: #5b4c4c;
}

.youtube-search-result__download-text {
 font-size: 10px;
 line-height: 1.1;
}

.youtube-search-result__youtube {
 align-self: center;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 border: 0;
 background: transparent;
 color: #1c1c1c;
 cursor: pointer;
 padding: 0;
}

.youtube-search-result__youtube-icon {
 font-size: 34px;
 line-height: 1;
 color: #5b4c4c;
}

.youtube-search-result__youtube-text {
 font-size: 10px;
 line-height: 1.1;
}

.youtube-search-dialog__actions {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
}

.youtube-search-dialog__more {
 position: absolute;
 left: 0;
}

@media (max-width: 1800px) {
 .brand { font-size: 16px; }
 .input-wrap { min-height: 44px; }
 .input-wrap input { font-size: 14px; }
 .chip { font-size: 13px; }
 .title { font-size: 16px; }
 .meta { font-size: 12px; }
 .duration, .badge { font-size: 9px; }
}

@media (max-width: 1200px) {
 body { padding-top: 164px; }
 .topbar { flex-wrap: wrap; }
 .search-group { flex: 1 1 100%; }
 .chips {
  padding-left: 22px;
 }
 .video-count {
  padding-left: 22px;
 }
 .video-pagination {
  padding-left: 22px;
 }
 .app-drawer {
  display: none;
 }
 .content-layout {
  flex-direction: column;
  padding: 22px;
 }
 .chat-panel {
  width: auto;
  min-width: 0;
  min-height: 240px;
  height: auto;
 }
 .youtube-search-dialog__panel {
  width: calc(100% - 24px);
  margin: 4vh 12px 0;
 }
 .transcript-dialog__panel {
  width: calc(100% - 24px);
  height: 96vh;
  margin: 2vh 12px 0;
 }
 .youtube-search-result {
  grid-template-columns: 140px minmax(0, 1fr) auto auto;
 }
 body.is-grid-view .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 body.is-text-view .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 body { padding-top: 184px; }
 body.is-list-view .grid,
 body.is-grid-view .grid,
 body.is-text-view .grid {
  grid-template-columns: 1fr;
 }
 body.is-list-view .card {
  grid-template-columns: 120px minmax(0, 1fr);
 }
 body.is-list-view .card-status {
  grid-column: 1 / -1;
  justify-content: flex-start;
  max-width: none;
 }
 .youtube-search-dialog__search-row {
  flex-direction: column;
  align-items: stretch;
 }
 .youtube-search-result {
  grid-template-columns: 1fr;
 }
 .youtube-search-result__download {
  justify-content: center;
 }
 .youtube-search-result__youtube {
  justify-content: center;
 }
 .summary-dialog__panel {
  margin: 4vh 12px 0;
  max-width: calc(100% - 24px);
  width: calc(100% - 24px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
 }
 .summary-dialog__splitter,
 .summary-dialog__right {
  display: none;
 }
 .summary-dialog__left {
  width: 100%;
  flex: 1 1 auto;
 }
 .summary-dialog__content {
  flex: 1;
  min-height: 0;
 }
 .transcript-dialog__panel {
  height: 96vh;
  margin: 2vh 12px 0;
 }
}
.show-unread-filter .material-symbols-outlined {font-size:2em;}