/* The container that holds the summary stats */
#commentsSummaryBox {
	display: none;
	margin: 1.25rem auto;
	max-width: 1000px;
	padding: 0 12px;
  }

/* Results header (metrics + charts) */
.tt-results{
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
	padding: 14px;
	text-align: left;
}

.tt-results-top{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tt-metrics{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1 1 auto;
}

.tt-metric{
	background: #fafafa;
	border: 1px solid #efefef;
	border-radius: 12px;
	padding: 9px 10px;
	min-width: 130px;
	line-height: 1.1;
}

.tt-metric-label{
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7280;
}

.tt-metric-value{
	margin-top: 6px;
	font-size: 18px;
	font-weight: 650;
	color: #111;
	font-variant-numeric: tabular-nums;
}

.tt-metric-sub{
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
}

.tt-actions{
	display: flex;
	align-items: center;
	gap: 8px;
}

.tt-btn{
	appearance: none;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #111;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tt-btn:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.10);
	border-color: #cfcfcf;
}

.tt-btn:active{ transform: translateY(0); }

/* Insights carousel */
.tt-insights{
	position: relative;
	margin-top: 12px;
}

.tt-insights-track{
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 2px 4px 10px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Let users scroll freely (no forced snapping) */
	scroll-snap-type: none;

	/* Edge fade is applied dynamically via JS classes */
	--tt-fade: 44px;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Dynamic edge fades: only fade where there's more content to scroll */
.tt-insights-track.is-scrollable.at-middle{
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tt-fade), #000 calc(100% - var(--tt-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--tt-fade), #000 calc(100% - var(--tt-fade)), transparent 100%);
}
.tt-insights-track.is-scrollable.at-start{
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--tt-fade)), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--tt-fade)), transparent 100%);
}
.tt-insights-track.is-scrollable.at-end{
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tt-fade), #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--tt-fade), #000 100%);
}

.tt-insights-track::-webkit-scrollbar{ height: 8px; }
.tt-insights-track::-webkit-scrollbar-track{ background: #f1f1f1; border-radius: 999px; }
.tt-insights-track::-webkit-scrollbar-thumb{ background: #cfcfcf; border-radius: 999px; }

.tt-insight-card{
	flex: 0 0 330px;
	background: #fff;
	border: 1px solid #efefef;
	border-radius: 14px;
	padding: 12px;
	scroll-snap-align: none;
}

.tt-insight-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.tt-insight-title{
	font-weight: 650;
	font-size: 13px;
	color: #111;
}

.tt-insight-sub{
	font-size: 11px;
	color: #6b7280;
	white-space: nowrap;
}

.tt-dist-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 140px 44px;
	gap: 10px;
	align-items: center;
	margin: 6px 0;
}

.tt-dist-label{
	font-size: 12px;
	color: #111;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tt-bar{
	height: 8px;
	background: #e7e7e7;
	border-radius: 999px;
	overflow: hidden;
}

.tt-bar > span{
	display: block;
	height: 100%;
	border-radius: 999px;
}

.tt-dist-val{
	font-size: 12px;
	color: #6b7280;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tt-hours{
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 64px;
	margin-top: 6px;
}

.tt-hour{
	width: 8px;
	border-radius: 3px 3px 0 0;
}

.tt-insights-nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid #d9d9d9;
	background: #fff;
	box-shadow: 0 8px 18px rgba(0,0,0,0.12);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tt-insights-nav:hover{ border-color: #cfcfcf; }

.tt-insights-nav svg{ width: 18px; height: 18px; fill: #444; }

.tt-insights-nav.prev{ left: 6px; }
.tt-insights-nav.next{ right: 6px; }

@media (max-width: 560px){
	.tt-metric{ min-width: 46%; }
	.tt-insight-card{ flex-basis: 86%; }
}

/* Error card */
.tt-alert{
	background: #fff;
	border: 1px solid #efefef;
	border-left: 4px solid #f26d6d;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
	padding: 14px;
	place-self: center;
    min-width: 50%;
    place-content: center;
    justify-content: center;
}

.tt-alert-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tt-alert-code{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 10px;
	color: #fff;
}

.tt-alert-msg{
	margin-top: 8px;
	font-size: 14px;
	color: #111;
}
  
  /* A "stats-widget single-box" is a white box with border, radius, shadow, etc. */
  .stats-widget.single-box {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1.5em;
	max-width: fit-content;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
  }
  
  /* Title: "Found 123 Comments" */
  .stats-title {
	font-weight: 600;
	font-size: 1.25rem;
	color: #444;
	margin-bottom: 0.4em;
  }
  
  /* Subtitle: "in 3 channels, 5 videos" */
  .stats-subtitle {
	font-size: 0.85rem;
	color: #888;
	margin-bottom: 1em;
  }
  
  /* The big number if you wanted it separate; 
	 in this design, it's just part of stats-title. 
	 But we keep .stats-number for reference. 
  */
  .stats-number {
	font-size: 2rem;
	font-weight: 700;
	color: #222;
  }
  
  /* Container for the 2 small buttons */
  .stats-actions {
	display: flex;
	gap: 1em;
	justify-content: center;
  }
  
  /* Buttons for channels/videos */
  .details-btn {
	background-color: #007acc;
	color: #fff;
	border: none;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
  }
  
  .details-btn:hover {
	background-color: #005b9a;
  }

  .stats-button {
	background-color: #f57418;
	color: #fff;
	border: none;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
  }

  .stats-button:hover {
	background-color: #e36912;
  }

  /* Buttons for download json */
  .details-btn-json {
	background-color: #529d42;
	color: #fff;
	border: none;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: background-color 0.3s
  }
  
  .details-btn-json:hover {
	background-color: #438535;
  }
  
  /* ====================== MODAL STYLES ====================== */

  /* ====================== MODAL BACKDROP ====================== */
.modal-backdrop {
	display: none; /* remains hidden by default, shown by JS */
	position: fixed;
	z-index: 9999;
	left: 0; 
	top: 0;
	width: 100%; 
	height: 100%;
	
	/* A subtle semi-transparent black overlay */
	background-color: rgba(0, 0, 0, 0.35);
  
	/* Adds a blurred background effect behind the modal (modern browsers) */
	backdrop-filter: blur(6px);
  }
  
  /* ====================== MODAL BOX ====================== */
  .modal-box {
	position: relative;
	max-width: 600px;    /* slightly wider for more comfortable reading */
	width: 90%;
	margin: 5% auto;
	padding: 1.5em 2em;
	max-height: 90vh;      /* so it never exceeds the viewport height */
	overflow-y: auto;      /* enables scrolling if charts exceed height */
	
	/* Subtle gradient background or plain white; pick whichever suits you */
	background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
	
	border-radius: 10px;
	
	/* Elevated look */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  
	/* Fade/slide-in animation */
	animation: fadeInUp 0.3s ease forwards;
  }
  /* Keyframes for modal "pop/fade in" animation */
@keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(30px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
/* ====================== MODAL CLOSE BUTTON ====================== */
.modal-close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 1.8rem;
	color: #888;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
	line-height: 1;
  }
  .modal-close-btn:hover {
	color: #444;
  }
  
/* ====================== MODAL TITLE ====================== */
.modal-title {
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1em;
	color: #333;
  }
  /* ====================== MODAL LIST WRAPPER ====================== */
.modal-list {
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 0.8em 1em;
  }
  
  /* If you want custom scrollbar styles (Chrome/Safari/Edge) */
  .modal-list::-webkit-scrollbar {
	width: 8px;
  }
  .modal-list::-webkit-scrollbar-track {
	background: #f1f1f1;
  }
  .modal-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
  }
  .modal-list::-webkit-scrollbar-thumb:hover {
	background: #bbb;
  }
  
/* ====================== MODAL LIST CONTENT ====================== */
.modal-list ul {
	list-style: none; 
	margin: 0; 
	padding: 0;
  }
  .modal-list li {
	position: relative;
	margin-bottom: 0.8em;
	padding-left: 1.5em;
  }
  
  /* Colored bullet dot instead of a standard list marker */
  .modal-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #007acc;
  }
  
  /* Link styling */
  .modal-list a {
	color: #007acc;
	text-decoration: none;
	transition: color 0.2s ease;
  }
  .modal-list a:hover {
	color: #005b9a;
	text-decoration: underline;
  }

/* A basic reset for label + input alignment */
.modal-list label {
	display: inline-flex;
	align-items: center;
  }
  
  /* Style the checkboxes more “modern” (only works fully on Chrome/Edge/Safari). 
	 For a universal approach, you'd need custom elements or JavaScript. 
  */
  .channel-checkbox, .video-checkbox {
	appearance: none;
	width: 18px;
	height: 18px;
	margin-right: 0.5em;
	border: 2px solid #ccc;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
  }
  .channel-checkbox:checked,
  .video-checkbox:checked {
	background-color: #007acc; /* fill color when checked */
	border-color: #007acc;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M2 6.8L5.5 10l6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 50% 52%;
  }
  
  /* "Select All" Buttons */
  .select-all-channels-btn, .select-all-videos-btn {
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	color: #333;
	padding: 0.3em 0.8em;
	border-radius: 5px;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease;
  }
  .select-all-channels-btn:hover,
  .select-all-videos-btn:hover {
	background-color: #e5e5e5;
  }

  .reply-loading-spinner {
	display: flex;
	justify-content: center;
	margin: 3em 0 0 0;
  }
  .three-balls.three-balls-small .ball{
	width: 10px;
    height: 10px;
    margin: 0 2px;
  }
  .three-balls.three-balls-small {
	width:6px;
  }
  .reply-ytc:hover {
	border-left-color: #ffa936!important;
  }

/* Hours card header helpers */
.tt-insight-head-hours{
	align-items: center;
}

.tt-insight-head-left{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Timezone selector (acts like a small button that opens a list) */
.tt-tz-select{
	appearance: none;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	padding: 6px 28px 6px 10px;
	font-size: 11px;
	font-weight: 650;
	color: #111;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.tt-tz-select:hover{
	border-color: #cfcfcf;
	box-shadow: 0 6px 14px rgba(0,0,0,0.06);
	transform: translateY(-1px);
}

.tt-tz-select:active{
	transform: translateY(0);
}

.tt-tz-select:focus{
	outline: none;
	border-color: #4a90e2;
	box-shadow: 0 0 0 3px rgba(74,144,226,0.18);
}

/* Nicer hover + animations for the mini charts */
.tt-bar > span{
	transition: width 260ms ease;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.tt-dist-row{
	border-radius: 10px;
	padding: 2px 4px;
	transition: background 120ms ease;
}

.tt-dist-row:hover{
	background: rgba(0,0,0,0.03);
}

.tt-hours{
	position: relative;
	padding-bottom: 2px;
}

.tt-hours::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #e5e7eb;
}

.tt-hour{
	background: #3e89cb;
	opacity: 0.92;
	transition: transform 120ms ease, opacity 120ms ease;
}

.tt-hour:hover{
	transform: translateY(-1px);
	opacity: 1;
}

.tt-hours-empty{
	font-size: 12px;
	color: #6b7280;
	padding: 10px 2px;
}

/* Tooltip (shows values on hover/focus) */
.tt-dist-row[data-tip],
.tt-hour[data-tip]{
	position: relative;
}

.tt-dist-row[data-tip]::after,
.tt-hour[data-tip]::after{
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(6px);
	background: rgba(17,17,17,0.92);
	color: #fff;
	font-size: 11px;
	padding: 6px 8px;
	border-radius: 10px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease, transform 120ms ease;
	z-index: 5;
	box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}

.tt-dist-row[data-tip]::before,
.tt-hour[data-tip]::before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: calc(100% + 4px);
	transform: translateX(-50%) translateY(6px);
	border: 6px solid transparent;
	border-top-color: rgba(17,17,17,0.92);
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease, transform 120ms ease;
	z-index: 5;
}

.tt-dist-row:hover::after,
.tt-dist-row:focus::after,
.tt-dist-row:hover::before,
.tt-dist-row:focus::before,
.tt-hour:hover::after,
.tt-hour:focus::after,
.tt-hour:hover::before,
.tt-hour:focus::before{
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.tt-dist-row:focus,
.tt-hour:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(74,144,226,0.18);
}