*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Aptos', 'Roboto', 'Arial', sans-serif;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(#282828, #4d4d4d);
    color: #333;
    height: 100vh;
    overflow-x: hidden;
}

body.bg-image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/webp-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

header {
    background-color: var(--dark-accent-color, var(--accent-color, #17496F)); /* or #517793 */
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header a{
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}
header a:hover{text-decoration:underline;}

a { color: var(--accent-color, #17496F); }
html.dark-mode a{ color:#fff; font-weight:normal; }
html.dark-mode header a{color:#fff;font-weight:normal;}

h3 {
    margin-top: 2em;
}

input:not([type=checkbox]), select, textarea {
    display: block;
    font-size: 1.1em;
    padding: 0.5em 0.75em;
    margin: 0.5em 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    color:#111;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.product-page input:not([type=checkbox]),
.product-page select,
.product-page textarea,
.settings-page input:not([type=checkbox]),
.settings-page select,
.settings-page textarea,
.cube-settings input:not([type=checkbox]),
.cube-settings select,
.cube-settings textarea,
.core-config input:not([type=checkbox]),
.core-config select,
.core-config textarea,
.ecco-config input:not([type=checkbox]),
.ecco-config select,
.ecco-config textarea,
.prism-config input:not([type=checkbox]),
.prism-config select,
.prism-config textarea,
.teams-config input:not([type=checkbox]),
.teams-config select,
.teams-config textarea,
.pvf-card input,
.pvf-card textarea {
    max-width: 100%;
}

.product-page .form-grid > *,
.settings-page .form-grid > *,
.cube-settings .form-grid > *,
.cube-softphone .form-grid > *,
.core-config .form-grid > *,
.ecco-config .form-grid > *,
.prism-config .form-grid > *,
.teams-config .form-grid > *,
.tenant-add-user .form-grid > * {
    min-width: 0;
}

html.dark-mode input:not([type=checkbox]),
html.dark-mode select,
html.dark-mode textarea {
    background:#333;
    border-color:#555;
    color:#fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* wider inputs for the login screen */
.login-form input:not([type=checkbox]),
.login-form select{
    width:100%;
    margin:0.75em 0;
}

.login-screen{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
    background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0)), url('images/webp-bg.jpg') no-repeat center center fixed;
}
.demo-link{
    position:absolute;
    top:10px;
    right:10px;
    padding:0.5em 1em;
    background:linear-gradient(#A9C33F,#7C922D);
    border:none;
    border-radius:4px;
    color:#fff;
    font-weight:bold;
    font-size:0.95em;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
#particles-js{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    z-index:0;
}
.login-box{
    position:relative;
    z-index:1;
    text-align:center;
    width:460px;
    max-width:min(92vw, 460px);
    padding:2.5em 3.2em 3em;
    background:rgba(0,0,0,0.78);
    border-radius:8px;
    box-shadow:0 20px 40px rgba(0,0,0,0.8);
    backdrop-filter:blur(4px);
    color:#fff;
}
.setup-welcome-box{
    background:linear-gradient(160deg, rgba(46,64,79,0.68), rgba(25,35,46,0.64));
    border:1px solid rgba(170,205,235,0.28);
    box-shadow:0 26px 54px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
}

.login-box input:not([type=checkbox]),
.login-box select{
    background:#333;
    border:1px solid #555;
    color:#fff;
}

.login-box input::placeholder{
    color:#bbb;
}

.login-box input.login-user-readonly{
    background:#1b1b1b;
    border-color:#6a6a6a;
    color:#d0d0d0;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);
    opacity:0.96;
}

.db-error{
    margin:0 0 1em 0;
    padding:0.5em 1em;
    background:#fee;
    color:#900;
    border:1px solid #900;
    border-radius:4px;
    text-align:left;
  font-size:0.78em;
}
.login-title{
    margin:0 0 0.5em 0;
    color:#fff;
    font-size:2.5em;
    font-weight:bold;
    opacity:0;
    animation: loginDown 0.6s forwards;
}
.login-form{
    opacity:0;
    animation: loginUp 0.6s forwards;
    margin:1em auto 0;
}

.setup-actions{
    display:flex;
    justify-content:space-between;
    gap:1em;
    margin-top:1em;
}
.setup-actions button{
    flex:1;
    background:var(--accent-color,#17496F);
    color:#fff;
    border:none;
    padding:0.5em 0;
    border-radius:4px;
    cursor:pointer;
}
.setup-msg{margin-top:0.5em;}

.setup-intro{
    margin-bottom:1em;
    text-align:left;
  font-size:0.78em;
}

.setup-field{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:0.75em;
}

.setup-field span{
    color:#fff;
    font-weight:bold;
    margin-bottom:0.25em;
}

.setup-field small{
    font-size:0.8em;
    color:#ddd;
}
.setup-field-toggle{
    border:1px solid rgba(255,255,255,0.14);
    border-radius:10px;
    padding:0.9em 1.05em;
    background:rgba(255,255,255,0.05);
    margin-bottom:0.8em;
    display:grid;
    grid-template-columns: auto 1fr;
    gap:0.4em 0.95em;
    align-items:center;
}
.setup-field-toggle input[type=checkbox]{
    width:24px;
    height:24px;
    accent-color:var(--accent-color,#17496F);
    margin:0 0.5em;
    cursor:pointer;
    grid-column:1;
    grid-row:1;
}
.setup-field-toggle span{font-size:1.02em;line-height:1.25;grid-column:2;grid-row:1;}
.setup-field-toggle small{font-size:0.9em;line-height:1.5;grid-column:2;grid-row:2;opacity:0.95;display:block;}
.setup-warning{color:#ffd58a !important; font-weight:600;}

@keyframes loginDown{
  from{transform:translateY(-40px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
@keyframes loginUp{
  from{transform:translateY(40px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

button,
input[type=submit] {
    font-size: 1.1em;
    background: var(--accent-color, #A9C33F);
    color: #fff;
    padding: 0.4em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.2s;
    margin: 0.1em 0.2em 0.1em 0;
}
button:hover,
input[type=submit]:hover {
    filter: brightness(1.15);
}

#switchLang {
    font-size: 0.7em;
    padding: 0.2em 0.6em;
}

.product-content input:not([type=checkbox]):focus,
.product-content select:focus,
.product-content textarea:focus{
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(23,73,111,0.2);
    outline:none;
}

html.dark-mode .product-content input:not([type=checkbox]):focus,
html.dark-mode .product-content select:focus,
html.dark-mode .product-content textarea:focus{
    box-shadow: 0 0 0 2px rgba(23,73,111,0.4);
}

input[type=checkbox] {
    height:20px;
    width:20px;
    min-width:20px;
    max-width:20px;
    flex: 0 0 20px;
    accent-color: var(--accent-color, #A9C33F);
    margin:0.1em 0 0;
}

.checkbox-label{
    background:none;
    padding:0.3em 0;
    margin-right:0;
    line-height:1.4em;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0.55em;
    width:100%;
    color:#333;
    text-align:left;
}

html.dark-mode .checkbox-label{
    color:#fff;
}

.privacy-page button{
    background:var(--accent-color,#17496F);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:0.5em 1em;
    margin-top:1em;
    cursor:pointer;
}

label:not(.checkbox-label) {
    display: block;
    margin: 0.5em 0 0.2em;
    font-weight: normal;
    font-size: 0.9em;
    color: #333;
    text-align: left;
}

html.dark-mode label:not(.checkbox-label) {
    color: #fff;
}



.hamburger-menu {
    position: relative;	
}

.hamburger-menu>i {
    float:left; 
	cursor: pointer; 
	margin-right: 0.6em; padding:0.15em; 
	font-size:1.5em;
}

.demo-items {
    display: none;
    position: absolute;
    top: 60px; /* Adjust as needed based on the size of your menu icon */
    left: 0;
    width: 70%; /* Adjust width as per your design requirements */    
    z-index: 1000; /* Ensures the menu is above other content */
}

.demo-items>span {
    display: block;
	width: 100%;
	margin: 0.3em 0;
	font-size: 1.4em;
    padding: 0.7em 1em;
    text-decoration: none;
    color: white;
    background-color: rgba(55, 55, 55, 0.97); /* Slight transparency */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Optional: adds a shadow for depth */
	border-radius: 0.2em;
}

.desc { font-size: 1.2em; line-height: 1.6em; }

.demo-items>.menu-icon {
    cursor: pointer;
    z-index: 1001; /* Ensures the icon is above the menu */
}

.demo-items label {
	font-size:0.7em;
}

#top-icons { text-align: right; padding-right:1em; }

#top-icons>span {
    margin-left: 20px;
    color: white;
    text-decoration: none;
        cursor: pointer;
}
#top-icons .header-lang-menu{
    position:relative;
    display:inline-block;
}
#top-icons .header-lang-menu .sidebar-home-submenu{
    left:auto;
    right:0;
    top:28px;
}
#top-icons .header-lang-menu.open .sidebar-home-submenu{
    display:block;
}
#toggleDark i{color:#fff;font-size:18px;}

@media (min-width:768px){
    #top-icons .menu-icon i{margin-right:5px;}
}

main {
        display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10vh 1vh;
}

header>div { width:auto; }

.header-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.lt-icon-mobile{display:none;width:30px;height:30px;}

#logo { display:inline-block; }

#logo>img { height: 2em; float:left; }

#logo>h1 { display:block;font-size:2em;font-weight:500;float:left;padding-left:0.3em;margin:0; }

#header-hint {display:inline-block;margin-left:0.5em;padding:0.1em 0.4em;font-size:0.82em;background:linear-gradient(45deg,#ccffcc,#ccf0ff);color:#000;border:1px solid #fff;border-radius:4px;opacity:0;transition:opacity 0.3s;}
#header-hint.show{opacity:1;}

#loginBtn {
    background:#17496F !important;
    border:1px solid rgba(255,255,255,0.22);
}
#loginBtn:hover {
    filter:brightness(1.12);
}

.tool-icon {
    --icon-accent: #4dc3ff;
    --icon-bg-light: linear-gradient(180deg, rgba(232, 244, 255, 0.34) 0%, rgba(209, 231, 248, 0.26) 100%);
    --icon-bg-dark: linear-gradient(180deg, rgba(40, 76, 100, 0.34) 0%, rgba(24, 52, 73, 0.28) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--icon-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-top: 2px solid var(--icon-accent);
    border-radius: 14px;
    color: #eaf6ff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    padding: 0.8rem 0.8rem 0.7rem;
    margin: 1vh;
    text-align: center;
    width: 192px;
    min-height: 192px;
    cursor: pointer;
    animation: introAnimation 0.6s ease-out forwards;
    opacity: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tool-icon.tool-icon-cube { --icon-accent: #f4d94a; }
.tool-icon.tool-icon-prism { --icon-accent: #62d66f; }
.tool-icon.tool-icon-ecco { --icon-accent: #39c7ff; }
.tool-icon.tool-icon-core { --icon-accent: #ffb24b; }
.tool-icon.tool-icon-teams { --icon-accent: #9fa6ff; }

.tool-icon.lite {
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgb(189, 200, 209, 0.3) 40%);
}

.tool-icon>img {
    width: auto;
    height: 75px;
    object-fit: contain;
    margin-top: 2px;
    transition: transform 0.2s ease-in-out;
}

.tool-icon>div {
    margin-top: 0.45rem;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--icon-accent);
    white-space: nowrap;
}

.tool-icon>div>img {
    height: 3.3vh;
}

.tool-icon>span {
    margin-top: auto;
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem;
    margin-right: -0.8rem;
    padding: 0.55rem 0.45rem 0.2rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    min-height: 2.9em;
    font-size: 0.8rem;
    line-height: 1.25;
    display: block;
    color:#d9e8f5;
}

html.dark-mode .tool-icon{
    background: var(--icon-bg-dark);
    color:#eef8ff;
}
html.dark-mode .tool-icon>span{color:#d7e8f6;}
html.dark-mode .tool-icon>div{color:var(--icon-accent);}


footer {
    background-color: #333;
	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: center;
    padding: 1em;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}


/* Additional Styles */

#details-area {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px #000000;
    height: 200px;
    display: flex; /* changed to flex */
    z-index:111;
}

#details-image {
    flex: 1; /* takes half of the parent width */ 
	background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative; /* changed to relative */
}

#details-content {
    flex: 1; /* takes half of the parent width */
    position: relative;
    color: #ffffff; /* Example text color */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    font-size: 1em;
    padding: 2em 5em;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow:auto;
}
		
#details-linkbox {
	margin-top:3em;
	display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust as needed */
    justify-content: space-around; 
	text-shadow: none;
	margin-bottom: 2em;
}

#details-linkbox>span {
	font-size:4em;
}

.link-button {
    flex: 1 0 calc(50% - 50px); /* Assumes you want 2 buttons in a row */
    box-sizing: border-box; /* To include padding and border in element's width */
    background-color: #ffffff;
    color: #000000;
    font-weight: normal;
    padding: 20px 10px;
    font-size: 1.1em;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    overflow: hidden; /* To handle long text */
    text-overflow: ellipsis; /* To handle long text */
    white-space: nowrap; /* To handle long text */
}

.link-button:hover {
    background-color: var(--accent-color, #A9C33F);
    color: #fff;
}

html.dark-mode .link-button {
    color: #000;
    font-weight: normal;
}
html.dark-mode .link-button:hover {
    color: #fff;
}

.tool-icon small {
    display:block;
    font-size:0.9vh;
    margin-top:0.3vh;
    color:#333;
}

.link-button.disabled {
        background-color: #ddd;
        color: #888;
        cursor: default;
}

.tool-icon.disabled{
    filter: grayscale(100%);
}
.sidebar-item.disabled img,
.sidebar-item.disabled i{
    filter:grayscale(100%);
    opacity:0.5;
}
.sidebar-item.disabled:hover{background:none;}

.link-button.done {
	background: #666 url('./images/done-w.png') no-repeat left center;
	background-size: 2em;
	color: #bbb;
	border: 1px solid #aaa;
}

#product-title {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em; /* change as needed */
    text-align: center;
    padding: 0;
    margin: 0;
	z-index: 2; /* to ensure it stays above the overlay */
    color: #FFF;
}

#close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
	color: #fff;
    background-color: #555;
    border: 1px solid #777;
    padding: 5px 10px;
    border-radius: 5px;
}

#close-button:hover {
    background-color: #999;
}


/* Animations & mobile */

.demo-items>span:hover, .link-button:not(.disabled):hover {
	transform: scale(1.03);
    transition: transform 0.3s ease-in-out;
}

.tool-icon:hover {
    background: var(--icon-bg-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
    border-color: rgba(255,255,255,0.28);
}
html.dark-mode .tool-icon:hover {
    background: var(--icon-bg-light);
}
.tool-icon:hover>img {
    transform: scale(1.06);
}

@media (max-width: 767px) {
    .tool-icon {
        width: 168px;
        min-height: 176px;
    }
    .tool-icon>div {
        font-size: 1.7rem;
    }
}

@keyframes introAnimation {
  0% {
    transform: translateY(90px) scale(0.2); /* Starts 20px below the final position */
	opacity: 0;
  }
  80% {
    transform: translateY(-20px) scale(1.1); /* Ends at the final position */
	opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
        opacity: 1;
  }
}

#details-area {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px #000000;
    height: 50%;
    z-index:111;
}


@media (max-width: 767px) { /* Adjust max-width as per your design’s breakpoint for mobile devices */
    #details-image.hide-on-mobile {
        display: none;
    }	
	.link-button {
        flex: 1 0 calc(99% - 50px);
    }
}

@media (max-width: 1100px) {
	.link-button {
        flex: 1 0 calc(99% - 50px);
    }
	.demo-items { width: 100%; }
}

@media (min-width: 1500px) {
        .link-button {
                flex: 1 0 calc(33% - 50px);
        }
}



/* Sidebar styles */
.app-body {
    display: flex;
    min-height: calc(100vh - 120px);
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(#282828, #4d4d4d);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    z-index: 1000;
    overflow: visible;
}

.sidebar-item {
    position: relative;
    text-align: center;
    padding: 15px 0;
    width: 100%;
    margin:0;
    cursor: pointer;
    border-radius:4px;
    color: #fff;
    text-decoration: none;
}

.sidebar-home-submenu{
    display:none;
    position:absolute;
    left:100%;
    top:6px;
    min-width:150px;
    background:rgba(28,28,28,0.96);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:8px;
    overflow:hidden;
    z-index:1200;
}
.sidebar-item:hover .sidebar-home-submenu{display:block;}
.sidebar-home-submenu-item{
    padding:8px 10px;
    font-size:13px;
    text-align:left;
    white-space:nowrap;
}
.sidebar-home-submenu-item:hover{background:var(--accent-color,#17496F);}

.sidebar.expanded .sidebar-home-submenu{
    left:calc(100% - 6px);
    top:8px;
}

.sidebar-item.active,
.sidebar-item:hover {
    background-color: var(--accent-color, #17496F);
    color: #fff;
    text-decoration: none;
}

.sidebar-item:link,
.sidebar-item:visited,
.sidebar-item:hover,
.sidebar-item:active {
    color: #fff;
    text-decoration: none;
}

.sidebar-item i {
    font-size: 20px;
    display: block;
    color: #fff;
}

.sidebar-item img {
    width: 30px;
    /* allow natural height for proper proportions */
    display: block;
    margin: 0 auto;
}

.sidebar-item span {
    font-size: 0.7em;
    display: block;
}
.sidebar-item small {
    display: none;
}
.sidebar-toggle {
    width:100%;
    text-align:center;
    padding:15px 0;
    margin-bottom:0;
    cursor:pointer;
}
.sidebar-arrow{display:none;}
.sidebar.expanded .sidebar-arrow{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    background:var(--accent-color,#17496F);
    color:#fff;
    width:20px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px 0 0 4px;
    cursor:pointer;
    z-index:1100;
}
.sidebar-toggle i{
    font-size:24px;
    color:#fff;
}
.one-icon {
    width:30px;
    height:30px;
}
.sidebar.expanded {
    width:220px;
    align-items:flex-start;
}
.sidebar.expanded .sidebar-item {
    text-align:left !important;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    box-sizing:border-box;
}
.sidebar.expanded .sidebar-toggle {
    text-align:left;
    padding-left:10px;
}
.sidebar.expanded .sidebar-item span {
    display:block;
    font-size:1em;
    font-weight:bold;
}
.sidebar.expanded .sidebar-item small {
    display:block;
    font-size:0.7em;
    color:#ddd;
    text-align:left;
  font-size:0.78em;
}
.sidebar.expanded .sidebar-item img,
.sidebar.expanded .sidebar-item i{
    margin:0 8px 0 0;
    display:inline-block;
    width:25px;
    text-align:center;
}
.sidebar-extra{
    display:none;
    margin-top:auto;
    width:100%;
}
.sidebar.expanded .sidebar-extra{
    display:block;
}
.sidebar-info{
    padding:20px 15px;
    font-size:0.82em;
    line-height:1.6;
    color:#fff;
}
.sidebar-info i{
    width:18px;
    display:inline-block;
    text-align:center;
    margin-right:4px;
}
.sidebar-info a{color:#fff; text-decoration:none;}

header {
    margin-left: 80px;
    position: sticky;
    top: 0;
    z-index: 200;
}
.phone-docked header{
    /* header remains fixed */
}

header.expanded {
    margin-left:220px;
}
.phone-docked header.expanded{
    /* header remains fixed */
}

.page-content {
    margin-left: 80px;
    width: calc(100% - 80px);
    padding: 0;
    flex: 1;
    overflow-x: auto;
    position: relative;
}
.phone-docked .page-content{
    margin-right:330px;
    width: calc(100% - 80px - 330px);
}

.page-content.expanded {
    margin-left:220px;
    width: calc(100% - 220px);
    overflow-x: auto;
}
.phone-docked .page-content.expanded{
    margin-right:330px;
    width: calc(100% - 220px - 330px);
}

.product-content {
    background: #ffffff;
    margin: 0 0 0 1px;
    border-radius: 0;
    padding: 3em;
    width: calc(100% - 1px);
    min-height: calc(100vh - 160px);
    box-sizing: border-box;
    overflow-x: auto;
}

.product-container.cube .product-content {
    background: radial-gradient(circle at center, rgba(215,173,42,0.15), rgba(215,173,42,0) 70%), #ffffff;
}
.product-container.ecco .product-content {
    background: radial-gradient(circle at center, rgba(64,170,255,0.15), rgba(64,170,255,0) 70%), #ffffff;
}
.product-container.core .product-content {
    background: radial-gradient(circle at center, rgba(255,167,90,0.15), rgba(255,167,90,0) 70%), #ffffff;
}
.product-container.prism .product-content {
    background: radial-gradient(circle at center, rgba(44,155,97,0.15), rgba(44,155,97,0) 70%), #ffffff;
}
.product-container.teams .product-content {
    background: radial-gradient(circle at center, rgba(132,100,166,0.15), rgba(132,100,166,0) 70%), #ffffff;
}

.product-content > * {
    margin-bottom: 1em;
}
.product-content h2{
    margin-top:1.2em;
    margin-bottom:1.2em;
}
.product-content h2:first-child{
    margin-top:0;
}

.product-content.iframe-page {
    padding: 0;
}

.product-content.iframe-page > * {
    margin-bottom: 0;
}

.product-content section {
    padding: 0 0 2em 2em;
}

.cube-widget-builder .pin-widget {
    display: none;
}

.ai-data-tab {
    height: calc(100vh - 160px);
}

.ai-data-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.add-keyword {
    padding: 0.7em 1.2em;
    margin: 0 0 1em 0;
    font-size: 1em;
}

.floating-icons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}
.phone-docked .floating-icons{right:350px;}

.floating-btn {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    color: var(--dark-accent-color,#17496F);
}

.softphone-window,
.chat-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    overflow:hidden;
}
.softphone-window{
    width: 330px;
    height: 480px;
    min-width: 330px;
    min-height: 480px;
}
.softphone-window.docked{
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    width: 330px;
    height: auto;
    border-radius: 0;
    border:none;
    border-left:1px solid #888;
}
.chat-window.docked{
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    width: 330px;
    height: auto;
    border-radius: 0;
    border:none;
    border-left:1px solid #888;
}
.softphone-window.hidden{
    display:none;
}
.chat-window{
    width: 300px;
    height: 330px;
    min-width: 250px;
    min-height: 250px;
    --accent-color:#1D3C5A;
}
.softphone-window .ui-resizable-se,
.chat-window .ui-resizable-se{
    width:14px;
    height:14px;
    background:#ccc;
    border:1px solid #888;
    border-radius:4px;
    position:absolute;
    right:2px;
    bottom:2px;
    cursor:se-resize;
    display:flex;
    align-items:center;
    justify-content:center;
}
html.dark-mode .softphone-window .ui-resizable-se,
html.dark-mode .chat-window .ui-resizable-se{
    background:#555;
    border-color:#777;
}
.softphone-window .ui-resizable-se::after,
.chat-window .ui-resizable-se::after{
    content:'';
    width:0;
    height:0;
    border-style:solid;
    border-width:0 0 8px 8px;
    border-color:transparent transparent #666 transparent;
}
html.dark-mode .softphone-window .ui-resizable-se::after,
html.dark-mode .chat-window .ui-resizable-se::after{
    border-color:transparent transparent #ddd transparent;
}
.softphone-header, .chat-header {
    background: #17496F;
    color: #fff;
    padding: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}
.softphone-header .pin-btn{margin-right:6px;cursor:pointer;}
.softphone-header span:last-child, .chat-header .chat-controls span:last-child {
    cursor: pointer;
}
.chat-header .chat-title{display:flex;align-items:center;}
.chat-header .chat-title .config-btn{margin-left:5px;cursor:pointer;font-weight:normal;font-size:0.85em;}
.chat-header .chat-controls{display:flex;align-items:center;}
.chat-header .chat-controls .pin-btn{margin-right:6px;cursor:pointer;}
.softphone-body, .chat-body {
    padding: 1em 0.5em;
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
}
.softphone-body.has-url{background:#fff;}
html.dark-mode .softphone-body.has-url{background:#fff;}
.softphone-body input[type=text]{
    width:100%;
    box-sizing:border-box;
}
.chat-message{margin:1em 0.5em;}
.chat-message.bot{
    color:#fff;
    background:var(--accent-color);
    padding:0.5em;
    border-radius:0 10px 10px 10px;
    width:80%;
}
.chat-message.user{text-align:right;}
.chat-input{
    display:flex;
    gap:6px;
    margin-top:0.5em;
}
.chat-input textarea{
    flex:1 1 auto;
    padding:4px 6px;
    box-sizing:border-box;
    min-width:0;
    height:3.5em;
    font-size:0.95em;
    line-height:1.2;
    font-family:sans-serif;
    resize:none;
}
.chat-input button{
    flex:0 0 15%;
    background:none;
    border:1px solid #ccc;
    border-radius:4px;
    padding:4px 6px;
    cursor:pointer;
    color:inherit;
}
html.dark-mode .chat-input button{
    border-color:#555;
}
.chat-messages{
    flex:1;
    overflow-y:auto;
    min-height:0;
}
html.dark-mode .chat-input button{
    border-color:#555;
}
.phone-actions{
    display:flex;
    gap:8px;
    margin-top:0.5em;
}
.phone-actions button{
    flex:1;
    height:2em;
    border:none;
    border-radius:4px;
    cursor:pointer;
    color:#fff;
}
.phone-actions button.green{background:#4caf50;}
.phone-actions button.red{background:#d33;}

html.dark-mode .phone-actions button.green{background:#2e7d32;}
html.dark-mode .phone-actions button.red{background:#a22;}

.softphone-window.vibrating {
    animation: ring 0.6s linear infinite;
}

@keyframes ring {
    0% { transform: translate(0); }
    10% { transform: translate(-2px, 2px); }
    20% { transform: translate(2px, -2px); }
    30% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(0); }
    100% { transform: translate(0); }
}

.phone-overlay {
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.8);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    z-index:10;
}
.phone-overlay .incoming-info {
    text-align:center;
}
.phone-overlay .incoming-info h2 {
    margin:0.2em 0;
}
.phone-overlay .dial-info{
    text-align:center;
}
.phone-overlay .dial-info h2{
    margin:0.2em 0;
}

.status-row{
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:0.5em;
}
.status-row .status-indicator{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #888;
    flex:none;
}
.status-row select{
    flex:1;
}
.status-indicator.available{background:#4caf50;}
.status-indicator.away{background:orange;}
.status-indicator.dnd{background:#d33;}

.page-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-header h2 {
    margin: 0;
    flex: 0 0 auto;
}
.page-header input,
.page-header button {
    width: auto;
    flex: 0 0 auto;
    display: inline-block;
}

.product-page {
    flex: 1 1 600px;
}

.product-page h2 {
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(45deg, #99ff99, #9999ff, #99ffff, #ffff99, #dd7400) 1;
}
.prism-inboxes-page h3,
.ai-flow-pipeline-box h3{
    padding-bottom:0.35em;
    border-bottom:1px solid transparent;
    border-image: linear-gradient(45deg, #99ff99, #9999ff, #99ffff, #ffff99, #dd7400) 1;
}

hr.gradient {
    margin: 2em 0;
    border: none;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(45deg, #99ff99, #9999ff, #99ffff, #ffff99, #dd7400) 1;
}
.explore-desc{margin-bottom:1em;font-size:0.82em;color:#555;}
html.dark-mode .explore-desc{color:#fff;}

.full-page > * {
    flex: 0 0 100%;
}

.product-page ul {
    list-style: none;
    padding: 0;
    margin-top: 1em;
}

.product-page li {
    margin: 0.7em 0;
}

.product-page a {
    color: var(--accent-color, #A9C33F);
    text-decoration: none;
}

.product-page a:hover {
    text-decoration: underline;
}

/* Product layout */
.product-container {
    display: flex;
    height: 100%;
}

.product-sidebar {
    position: fixed;
    top: 60px;
    left: 80px;
    height: calc(100vh - 60px);
    width: 180px;
    background: #262626;
    color: #fff;
    border-right: 1px solid #444;
    padding-top: 20px;
    font-size: 0.9em;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 150;
}

.product-container .product-content {
    margin-left: 180px;
    width: calc(100% - 180px);
}

.product-sidebar-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    display:flex;
    align-items:center;
    gap:8px;
}

.product-sidebar-item.active,
.product-sidebar-item:hover {
    background: rgba(255,255,255,0.1);
}
.product-sidebar-item.disabled{
    color: rgba(255,255,255,0.45);
    background: rgba(0,0,0,0.28);
    cursor: not-allowed;
    pointer-events: none;
}
.product-sidebar-item.disabled i,
.product-sidebar-item.disabled span{
    opacity: 0.55;
}

.product-mobile-select{display:none;padding:10px;background:#262626;}
.product-mobile-select select{width:100%;padding:6px;border-radius:4px;background:#fff;color:#000;}

.widget-actions{display:flex;gap:10px;margin:5px 0 20px;}
.widget-loading{padding:20px;text-align:center;}
.custom-widget-wrap{flex:1 1 300px;max-width:500px;display:flex;flex-direction:column;align-items:stretch;}
.custom-widget-wrap .widget-actions{justify-content:center;}

.cube-dashboard,
.core-dashboard,
.prism-dashboard,
.ecco-dashboard,
.teams-dashboard {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:flex-start;
    justify-content:center;
}

.cube-dashboard .chart {
    display: flex;
    align-items: flex-end;
    height: 250px;
    margin: 20px 0;
}

.dashboard-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content:center;
}

.dashboard-item {
    flex: 1 1 315px;
    max-width: 515px;
    min-width: 0;
    background: rgba(255,255,255,0.3);
    border:1px solid #e9e9e9;
    border-radius: 8px;
    padding: 1em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 6px;
    display:flex;
    flex-direction:column;
    height:286px;
    overflow:hidden;
    position:relative;
}

.dashboard-item:hover{
    overflow:visible;
    z-index:30;
}

.dashboard-item h3{
    margin-top:0;
    position:relative;
    z-index:99;
    display:inline-block;
    width:75%;
    color:inherit;
}

.monthly-charts{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.monthly-charts canvas{
    flex:1 1 300px;
    display:block;
    width:100%;
    max-width:400px;
    height:auto;
}

.pie-chart{display:flex;align-items:center;}
.pie-chart canvas{
    display:block;
    width:210px;
    height:210px;
    max-width:210px;
    max-height:210px;
}
.pie-legend{list-style:none;margin-left:10px;padding:0;font-size:0.82em;}
.pie-legend li{display:flex;align-items:center;margin-bottom:4px;}
.pie-legend span{display:inline-block;width:12px;height:12px;margin-right:6px;}

.live-panel{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:8px;
    padding:10px;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    font-size:1em;
    color:#333;
    position:relative;
}

.live-indicators{
    position:absolute;
    bottom:4px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    gap:6px;
}
.live-indicators span{
    width:20px;
    height:4px;
    background:#ddd;
    border-radius:2px;
    cursor:pointer;
}
.live-indicators span.active{
    background:var(--accent-color,#17496F);
}

.handled-box{
    text-align:center;
    margin-top:auto;
}
.handled-bar{width:100%;height:8px;background:#ddd;border-radius:4px;overflow:hidden;margin-bottom:4px;}
.handled-bar div{height:100%;background:green;}
.big-percent{
    font-size:3.5em;
    margin:0.3em 0;
}
.metric-compare{display:flex;text-align:center;width:100%;gap:0.4em;align-items:stretch;}
.metric-box{flex:1;padding:0.5em;display:flex;flex-direction:column;justify-content:space-between;min-height:130px;}
.metric-label{font-size:0.82em;line-height:1.25;min-height:2.3em;display:flex;align-items:flex-end;justify-content:center;}
.metric-value{font-size:2.4em;font-weight:bold;margin:0.2em 0;word-break:break-word;min-height:1.4em;display:flex;align-items:center;justify-content:center;}
.metric-value.small{font-size:1.2em;}
.metric-sub{font-size:0.82em;color:#666;line-height:1.25;min-height:1.3em;}
.metric-compare.kpi-grid2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0;
}
.metric-compare.kpi-grid2 .metric-box{
    min-height:105px;
    padding:0.55em;
}
.metric-compare.kpi-grid2 .metric-label{
    font-size:0.76em;
    min-height:2.1em;
}
.metric-compare.kpi-grid2 .metric-value{
    font-size:1.7em;
    min-height:1.2em;
    margin:0.12em 0;
}
.metric-compare.kpi-grid2 .metric-sub{
    font-size:0.76em;
}
@media (max-width: 640px){
    .metric-compare.kpi-grid2{
        grid-template-columns:1fr;
    }
}
.handled-meta{
    display:flex;
    justify-content:center;
    gap:10px;
    font-size:0.95em;
    line-height:1.2;
}

.live-row{display:flex;align-items:center;gap:8px;}

.live-row img{width:30px;height:30px;border-radius:50%;}
.status-ind{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;}
.status-online{background:green;}
.status-away{background:orange;}
.status-offline{background:red;}
.agent-img{width:30px;height:30px;border-radius:50%;margin-right:6px;}

.ai-panel{
    background:#fff;
    border-radius:8px;
    padding:10px;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    gap:4px;
    color:#333;
    font-size:0.82em;
}
.ai-panel .ai-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.ai-panel .ai-main{flex-direction:column;align-items:flex-start;gap:4px;}
.ai-panel .ai-icons{display:flex;gap:6px;}
.ai-panel .ai-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:aiFade 0.5s ease;}
.ai-panel .ai-icon.ai-prod{background:#eee;border:none;}
.ai-panel .ai-icon.ai-prod img{width:24px;height:24px;}
.ai-panel .ai-icon.ai-free{background:#eee;color:#17496F;}
.ai-panel .ai-icon.ai-free i{font-size:16px;}
@keyframes aiFade{from{opacity:0;}to{opacity:1;}}
.ai-panel .ai-bar{flex:1;height:6px;background:#ddd;border-radius:3px;overflow:hidden;}
.ai-panel .ai-bar div{height:100%;background:var(--accent-color,#17496F);}
.ai-panel .ok{color:green;}
.ai-panel .bad{color:red;}

.team-status-table{max-height:200px;overflow-y:auto;}
.teams-overview{display:flex;flex-wrap:wrap;gap:20px;}
.team-table{flex:1 1 280px;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;}
.team-table caption{background:var(--accent-color,#17496F);color:#fff;font-weight:bold;padding:0.5em;text-align:left;}
.team-table th,.team-table td{padding:5px 7px;border-bottom:1px solid #ddd;font-size:0.82em;}
.team-table tbody tr:nth-child(even){background:#f7f7f7;}
.team-table img.agent-img{margin-right:6px;vertical-align:middle;}
.team-table td a{color:var(--accent-color,#17496F);text-decoration:none;}
.team-table td a:hover{text-decoration:underline;}
html.dark-mode .team-table{background:#333;color:#eee;}
html.dark-mode .team-table caption{background:#444;color:#fff;}
html.dark-mode .team-table th,html.dark-mode .team-table td{border-color:#555;}
html.dark-mode .team-table tbody tr:nth-child(even){background:#2b2b2b;}
.details-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.details-panel{
    background:#fff;
    border-radius:8px;
    padding:2em;
    max-width:800px;
    width:90%;
    color:#000;
    position:relative;
    background-size:cover;
    background-position:center;
}

.details-panel h2{margin-top:0;}

.details-close{
    position:absolute;
    top:10px;
    right:10px;
    font-size:1.5em;
    cursor:pointer;
    background:none;
    border:none;
    color:#fff;
}

.details-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:1em;
}

.cube-dashboard .chart.small {
    height: 100px;
}

.cube-dashboard .bar {
    flex: 1;
    margin: 0 5px;
    background: var(--accent-color, #17496F);
}

.cube-dashboard .bar:nth-child(odd) {
    opacity: 0.8;
}

.cube-dashboard table {
    width: 100%;
    border-collapse: collapse;
}

.cube-dashboard th,
.cube-dashboard td {
    border: 1px solid #ccc;
    padding: 5px 10px;
}

.cube-settings input:not([type=checkbox]),
.cube-settings select,
.core-config input:not([type=checkbox]),
.core-config select,
.ecco-config input:not([type=checkbox]),
.ecco-config select,
.ecco-config textarea,
.prism-config input:not([type=checkbox]),
.prism-config select,
.teams-config input:not([type=checkbox]),
.teams-config select {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1em;
}


.cube-settings .form-grid,
.cube-softphone .form-grid,
.settings-page .form-grid,
.core-config .form-grid,
.ecco-config .form-grid,
.prism-config .form-grid,
.teams-config .form-grid,
.tenant-add-user .form-grid{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:1em;
}

.cube-settings section,
.settings-page section,
.cube-softphone section,
.core-config section,
.ecco-config section,
.prism-config section,
.teams-config section,
.tenant-add-user section {
    margin: 0;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
    border-radius: 10px;
    border: 1px solid #d2dbe5;
    border-left: 3px solid var(--accent-color);
    box-shadow: 0 6px 14px rgba(22, 34, 48, 0.08);
    flex: 1 1 360px;
}

.cube-settings .form-grid label,
.cube-softphone .form-grid label,
.settings-page .form-grid label,
.core-config .form-grid label,
.ecco-config .form-grid label,
.prism-config .form-grid label,
.teams-config .form-grid label,
.tenant-add-user .form-grid label{
    margin-top:1.2em;
}


.ecco-config .agent-assist-trigger-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ecco-config .agent-assist-trigger-grid .trigger-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ecco-config .agent-assist-trigger-grid input:not([type=checkbox]),
.ecco-config .agent-assist-trigger-grid select {
    max-width: 100%;
}

.ecco-config .agent-assist-trigger-grid .trigger-column > h3 {
    margin: 0 0 0.25em;
}

@media (max-width: 900px) {
    .ecco-config .agent-assist-trigger-grid {
        grid-template-columns: 1fr;
    }
}

.settings-page input:not([type=checkbox]),
.profile-page input:not([type=checkbox]) {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1em;
    padding: 0.5em;
}

.settings-page button,
.profile-page button,
.cube-softphone button,
.cube-settings button {
    background: var(--accent-color, #A9C33F);
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* ECCO dashboard */
.topic-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topic-list li {
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 16px;
    font-size:0.95em;
    line-height:1.2;
    color: #000;
}

.queue-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.queue-table th, .queue-table td {
    border: 1px solid #ccc;
    padding: 5px 10px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 0.9em;
}
.users-table th, .users-table td {
    border: 1px solid #ccc;
    padding: 4px 8px;
}
html.dark-mode .users-table th {
    background:#444;
    color:#fff;
}
html.dark-mode .users-table td {
    border-color:#555;
}

.product-page table,
table.stats, .queue-table, .users-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25em 0;
    font-size: 0.9em;
    background:rgba(246,246,246,0.5);
    border:1px solid #dedede;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

@media (max-width: 767px) {
    table.stats, .queue-table, .users-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

table.stats th, table.stats td, .queue-table th, .queue-table td, .users-table th, .users-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
}
table.stats td, .queue-table td, .users-table td{
    background:rgba(249,249,249,0.5);
}
table.stats tbody tr:nth-child(even) td,
.queue-table tbody tr:nth-child(even) td,
.users-table tbody tr:nth-child(even) td{
    background:rgba(243,243,243,0.5);
}
table.stats tbody tr:hover td,
.queue-table tbody tr:hover td,
.users-table tbody tr:hover td{
    background:rgba(235,235,235,0.5);
}

table.stats td:first-child a{
    color:var(--accent-color,#17496F);
    font-weight:bold;
    text-decoration:underline;
}

html.dark-mode table.stats td:first-child a{
    color:#fff;
}

table.stats td a{
    color:var(--accent-color,#17496F);
    text-decoration:underline;
    cursor:pointer;
}

html.dark-mode table.stats td a{
    color:#fff;
}

table.stats td a:hover{
    text-decoration:none;
}

table.stats th {
    background: var(--accent-color, #17496F);
    color: #fff;
    text-align: left;
}
html.dark-mode .product-page table,
html.dark-mode table.stats,
html.dark-mode .queue-table,
html.dark-mode .users-table{
    background:rgba(36,36,36,0.5);
    border-color:#3a3a3a;
    box-shadow:0 2px 12px rgba(0,0,0,0.35);
}
html.dark-mode table.stats td,
html.dark-mode .queue-table td,
html.dark-mode .users-table td{
    background:rgba(44,44,44,0.5);
}
html.dark-mode table.stats tbody tr:nth-child(even) td,
html.dark-mode .queue-table tbody tr:nth-child(even) td,
html.dark-mode .users-table tbody tr:nth-child(even) td{
    background:rgba(50,50,50,0.5);
}
html.dark-mode table.stats tbody tr:hover td,
html.dark-mode .queue-table tbody tr:hover td,
html.dark-mode .users-table tbody tr:hover td{
    background:rgba(58,58,58,0.5);
}

.about-page ul {
    margin: 0 0 1em 1em;
}

html.dark-mode .product-content{
    background:#2a2a2a;
    color:#eee;
}
html.dark-mode .product-content section{
    background:#3a3a3a;
}
html.dark-mode .cube-settings section,
html.dark-mode .settings-page section,
html.dark-mode .cube-softphone section,
html.dark-mode .core-config section,
html.dark-mode .ecco-config section,
html.dark-mode .teams-config section,
html.dark-mode .tenant-add-user section{
    background: linear-gradient(180deg, #3a424d 0%, #343b46 100%);
    border-color:#4f5d6d;
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
html.dark-mode .prism-config section{
    background:transparent;
    border-color:#4f5d6d;
    box-shadow:none;
}
html.dark-mode .product-content input:not([type=checkbox]),
html.dark-mode .product-content select,
html.dark-mode .product-content textarea{
    background:#333;
    color:#fff;
    border-color:#666;
}

html.dark-mode .product-container.cube .product-content{
    background: radial-gradient(circle at center, rgba(208,154,0,0.2), rgba(208,154,0,0) 70%), #2a2a2a;
}
html.dark-mode .product-container.ecco .product-content{
    background: radial-gradient(circle at center, rgba(1,96,167,0.2), rgba(1,96,167,0) 70%), #2a2a2a;
}
html.dark-mode .product-container.core .product-content{
    background: radial-gradient(circle at center, rgba(172,106,74,0.2), rgba(172,106,74,0) 70%), #2a2a2a;
}
html.dark-mode .product-container.prism .product-content{
    background: radial-gradient(circle at center, rgba(8,101,74,0.2), rgba(8,101,74,0) 70%), #2a2a2a;
}
html.dark-mode .product-container.teams .product-content{
    background: radial-gradient(circle at center, rgba(104,72,136,0.2), rgba(104,72,136,0) 70%), #2a2a2a;
}
html.dark-mode .dashboard-item{
    background:rgba(50,50,50,0.5);
    color:#fff;
    border-color:#444;
}
html.dark-mode .live-panel{
    background:#111;
    color:#fff;
}
html.dark-mode .topic-list li{
    background:#444;
    color:#000;
}
html.dark-mode .live-indicators span{
    background:#666;
}
html.dark-mode .live-indicators span.active{
    background:var(--accent-color,#17496F);
}

html.dark-mode .ai-panel{
    background:#111;
    color:#fff;
}
html.dark-mode .ai-panel .ai-bar{background:#333;}

html.dark-mode .handled-bar{background:#444;}
html.dark-mode .handled-bar div{background:green;}

.pin-widget{
    position:absolute;
    top:6px;
    right:6px;
    cursor:pointer;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    border-radius:50%;
    background:#fff;
    color:#888;
    transition:background 0.2s,color 0.2s;
}
.pin-widget.active{
    background-color:color-mix(in srgb,var(--accent-color) 50%,transparent);
    color:#fff;
}

html.dark-mode .softphone-window,
html.dark-mode .chat-window{
    background:#333;
    color:#fff;
    border-color:#555;
}

.prod-widget-icon{width:24px;height:24px;padding:2px;object-fit:contain;cursor:pointer;}
.prod-widget-icons{position:absolute;top:4px;right:4px;display:flex;gap:4px;z-index:2;}
.prod-widget-icons .prod-widget-icon{position:static;}
.prod-widget-icons .unlink-icon,
.prod-widget-icons .drag-handle,
.prod-widget-icons .link-icon{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:#fff;
    background-color:color-mix(in srgb,var(--accent-color) 50%,transparent);
    border:none;
    border-radius:50%;
    box-sizing:border-box;
}
.drag-link-helper{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:color-mix(in srgb,var(--accent-color) 50%,transparent);
    border-radius:50%;
}
.drag-link-helper .fa-link{color:#fff;font-size:24px;}
.prod-widget-icons .drag-handle,
.prod-widget-icons .link-icon{cursor:move;}
.prod-widget-icons .unlink-icon{cursor:pointer;}

.dashboard-item.merge-ok{background:linear-gradient(135deg,#a8ff78,#78ffd6);box-shadow:0 0 15px var(--accent-color,#17496F);border:3px solid var(--accent-color,#17496F);}
.dashboard-item.merge-no{background:#bbb;opacity:0.4;border:3px solid #999;}
.prod-widget-icon:hover{animation:icon-wiggle 0.6s ease-in-out;}
.dashboard-item.merge-anim{animation:blob-pop 0.6s ease;}
.dashboard-item.unlink-anim{animation:blob-split 0.4s ease;}
.dashboard-item.merge-anim .prod-widget-icon{animation:icon-pop 0.6s ease;}
.prod-widget-icon.pulse{animation:pulse 1s ease-in-out infinite;}
@keyframes blob-pop{0%{transform:scale(1);}30%{transform:scale(0.7);}60%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes blob-split{0%{transform:scale(1);}50%{transform:scale(0.95);}100%{transform:scale(1);}}
@keyframes icon-pop{0%{transform:scale(1);}50%{transform:scale(1.5);}100%{transform:scale(1);}}
@keyframes icon-wiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(8deg);}75%{transform:rotate(-8deg);}}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}

.main-dashboard{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
    margin:0 30px;
    width:100%;
    padding-bottom:2em;
}

.reorder-toggle{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    margin:0 0 1.5em;
}
.main-dashboard .no-widgets{
    color:#fff;
    width:100%;
    text-align:center;
}
.main-dashboard .dashboard-item{
    flex: 1 1 420px;
    max-width:545px;
    background:rgba(255,255,255,0.85);
}
html.dark-mode .main-dashboard .dashboard-item{
    background:rgba(50,50,50,0.85);
}
.widget-placeholder{
    background:rgba(255,255,255,0.5);
    border:2px dashed #ccc;
    border-radius:8px;
    height:286px;
    margin:6px;
}
.home-view-toggle{
    position:absolute;
    top:20px;
    left:0;
    right:0;
    text-align:center;
    z-index:5;
}
.home-view-toggle .toggle{
    display:inline-flex;
    align-items:center;
    background:#333;
    color:#fff;
    border:2px solid #fff;
    border-radius:20px;
    overflow:hidden;
    font-size:0.95em;
    line-height:1.2;
}
.home-view-toggle .toggle span{
    padding:6px 12px;
    cursor:pointer;
}
.home-view-toggle .toggle span.active{
    background:#fff;
    color:#000;
    border-radius:12px;
}
.icon-view{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    width:100%;
}

.ai-agents-page{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;height:100%;}
.ai-agents-box{max-width:1200px;width:100%;padding:16px;border:1px solid #d7e3f0;border-radius:14px;background:rgba(255,255,255,0.78);display:flex;gap:14px;align-items:stretch;}
.ai-agents-inner{flex:0 0 80%;max-width:80%;padding:0.8em;border-radius:12px;background:transparent;}
.scaling-controls{padding:1em;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,0.5);border-radius:12px;}
.ai-agents-box .scaling-controls{flex:0 0 20%;max-width:20%;height:auto;}
html.dark-mode .scaling-controls{background:rgba(0,0,0,0.5);}
.ai-agents-page .pillar-roof{font-weight:bold;font-size:1.25em;color:#1b3f61;border-bottom:2px solid #d7e3f0;margin-bottom:10px;width:100%;text-align:center;padding:6px 0;}
.ai-agents-page .pillars{display:flex;gap:14px;justify-content:center;align-items:flex-end;width:100%;margin-bottom:14px;flex:1;}
.ai-agents-page .pillar{flex:1;min-width:90px;height:240px;border-radius:6px 6px 0 0;display:flex;flex-wrap:wrap-reverse;align-content:flex-start;justify-content:center;gap:6px;padding:6px;overflow:hidden;}
.ai-agents-page .waiting-area{width:100%;min-height:72px;border-top:1px solid #d7e3f0;padding:10px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;background:transparent;color:#000;text-align:center;}
.ai-agents-page .waiting-area .ai-info{width:100%;margin-bottom:10px;font-size:0.85em;}
.ai-agents-page .ai-info{color:#000;}
html.dark-mode .ai-agents-page .ai-info{color:#fff;}
.agent-icon{width:40px;height:40px;border-radius:50%;background:#000;border:2px solid #fff;display:flex;align-items:center;justify-content:center;}
.agent-icon.main{background:#fff;border-color:#000;}
.agent-icon img{width:24px;height:24px;}
.agent-icon i{color:#fff;font-size:24px;}
html.dark-mode .ai-agents-box{background:rgba(31,40,50,0.72);border-color:#3c4d60;}
html.dark-mode .ai-agents-page .pillar-roof{border-bottom-color:#3c4d60;color:#e8f1fb;}
html.dark-mode .ai-agents-page .waiting-area{border-top-color:#3c4d60;background:transparent;color:#fff;}
.factor-input{width:100%;margin-top:10px;text-align:center;}
.product-factors{width:100%;margin-top:4px;font-size:0.85em;display:flex;flex-direction:column;align-items:flex-start;}
.product-label{margin:2px 0;display:flex;align-items:center;gap:6px;text-align:left;line-height:1.3;}
.product-label input{margin:0 4px;display:inline-block;}
.product-factors input{width:50px;border-radius:3px;color:#fff;border:none;padding:2px 4px;}
.resource-stats{width:100%;max-width:700px;display:flex;justify-content:space-between;margin-top:10px;font-size:0.82em;position:relative;}
.resource-stats .stat{flex:1;text-align:center;position:relative;padding:10px 0;}
.resource-stats .bg-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3em;opacity:0.15;pointer-events:none;}
html.dark-mode .resource-stats .stat{color:#fff;}

.agent-icon.appear-bottom{animation:appearFromBottom 0.3s ease-out;}
.agent-icon.appear-top{animation:appearFromTop 0.3s ease-out;}
.agent-icon.leave-up{animation:disappearUp 0.3s ease-in forwards;}
.agent-icon.leave-down{animation:disappearDown 0.3s ease-in forwards;}

@keyframes appearFromBottom{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes appearFromTop{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes disappearUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-20px);}}
@keyframes disappearDown{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(20px);}}


.ai-flow-pipeline-box{
  flex:1 1 100%;
  max-width:1200px;
  margin-bottom:18px;
  background:linear-gradient(135deg,rgba(246,249,255,0.68) 0%, rgba(238,248,244,0.62) 55%, rgba(245,243,255,0.68) 100%);
  color:#1f2b3d;
  border-radius:18px;
  padding:16px 18px;
  border:1px solid rgba(91,115,148,0.24);
  box-shadow:0 16px 34px rgba(22,45,78,0.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html.dark-mode .ai-flow-pipeline-box{
  background:linear-gradient(135deg,rgba(27,34,54,0.68) 0%, rgba(22,44,42,0.62) 55%, rgba(31,33,65,0.68) 100%);
  color:#f4f7ff;
  border-color:rgba(190,210,255,0.22);
  box-shadow:0 18px 40px rgba(2,8,20,0.5);
}
.ai-flow-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.ai-flow-actions{display:flex;gap:10px;flex-wrap:wrap;}
.ai-flow-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#17496F;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  border:1px solid rgba(255,255,255,0.3);
  transition:filter .2s ease;
}
.ai-flow-link-btn:hover{filter:brightness(1.12);}
.ai-deflection-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(180px,1fr));
  gap:10px;
}
.ai-deflection-card{
  border:1px solid #d7e3f0;
  border-radius:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.8);
}
.ai-deflection-card small{display:block;color:#5e6f82;margin-bottom:4px}
.ai-deflection-card strong{font-size:1.05rem;color:#1b3f61}
html.dark-mode .ai-deflection-card{background:rgba(31,40,50,0.72);border-color:#3c4d60}
html.dark-mode .ai-deflection-card small{color:#b5c3d1}
html.dark-mode .ai-deflection-card strong{color:#e8f1fb}
.ai-flow-group-title{margin:14px 0 6px 0;}
.ai-flow-group-title img{width:18px;height:18px;vertical-align:-3px;margin-right:6px;}
.ai-flow-group-separator,.ai-section-separator{border:none;border-top:1px solid rgba(0,0,0,0.14);margin:12px 0;}
html.dark-mode .ai-flow-group-separator,html.dark-mode .ai-section-separator{border-top-color:rgba(255,255,255,0.24);}
.ai-section-separator{margin:16px auto 22px auto;width:90%;}
.ai-flow-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(120,140,170,0.2);
}
html.dark-mode .ai-flow-row{
  background:rgba(255,255,255,0.04);
  border-color:rgba(220,230,255,0.12);
}
.ai-flow-row.inactive{opacity:0.6;filter:grayscale(0.5);}
.ai-flow-label{width:220px;display:flex;flex-direction:column;}
.ai-flow-label small{opacity:.8;}
.ai-flow-inactive-hint{color:#5e6e85;font-style:italic;}
html.dark-mode .ai-flow-inactive-hint{color:#cfd6e6;}
.ai-flow-track-wrap{flex:1;display:flex;gap:12px;align-items:stretch;}
.ai-flow-phase{flex:1;min-width:120px;border:1px solid rgba(170,185,220,0.28);border-radius:10px;padding:4px 6px;background:rgba(255,255,255,0.25);}
html.dark-mode .ai-flow-phase{border-color:rgba(230,240,255,0.2);background:rgba(255,255,255,0.06);}
.ai-flow-phase.long{flex:2;}
.ai-flow-phase.waiting{background:rgba(255,225,125,0.18);}
.ai-flow-phase.processing{background:rgba(130,210,250,0.20);}
.ai-flow-phase.routed{background:rgba(176,123,255,0.24);}
.ai-flow-phase.completed{background:rgba(86,181,121,0.24);}
.ai-flow-outcomes{flex:1;display:flex;flex-direction:column;gap:8px;}
.ai-flow-stage-title{font-size:11px;font-weight:700;opacity:.9;margin-bottom:4px;}
.ai-flow-stack{display:flex;flex-wrap:wrap;min-height:22px;align-items:center;padding-left:6px;overflow:hidden;}
.ai-flow-token{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(22,33,52,.55);margin-left:-4px;animation:flowTokenMove 4.1s ease-out both;}
html.dark-mode .ai-flow-token{box-shadow:0 0 0 2px rgba(255,255,255,.45);}
.ai-flow-token:first-child{margin-left:0;}
.ai-flow-token.call,.ai-flow-token.email,.ai-flow-token.outcome-routed,.ai-flow-token.outcome-completed{background:#fff;}
.ai-flow-endpoints{min-width:180px;font-size:12px;display:flex;flex-direction:column;gap:2px;justify-content:center;color:#1f2b3d;}
html.dark-mode .ai-flow-endpoints{color:#f4f7ff;}

@keyframes flowTokenMove{
  0%{opacity:0;transform:translateX(-18px) scale(.9);}
  20%{opacity:1;transform:translateX(0) scale(1);}
  85%{opacity:1;transform:translateX(16px) scale(1);}
  100%{opacity:.65;transform:translateX(24px) scale(.96);}
}

.inactive-flow-row td{background:rgba(160,160,160,0.15);color:#999;}

.mobile-menu-button{display:none;margin-left:10px;color:#fff;cursor:pointer;}

@media (max-width:767px){
    .mobile-menu-button{display:inline-block;}
    .lt-icon-mobile{display:inline-block;margin-left:1vh;}
    #logo{display:none;}
    .sidebar{display:none;}
    .sidebar.expanded{display:flex;width:100%;height:100%;position:fixed;left:0;top:0;overflow-y:auto;}
    header, header.expanded, .page-content, .page-content.expanded{
        margin-left:0;
        width:100%;
    }
    main{padding:8vh 1vh;}
    .product-container{flex-direction:column;}
    .product-sidebar{display:none;}
    .product-container .product-content{margin-left:0;width:100%;}
    .product-mobile-select{display:block;}
    .menu-icon a{display:none;}
    .menu-icon span:not(.notif-badge){display:none;}
}

.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;}
.modal-content{position:relative;background:#fff;padding:2em;border-radius:6px;max-width:600px;max-height:80vh;overflow:auto;color:#000;}
.modal-content pre{background:#f5f5f5;padding:1em;max-height:400px;overflow:auto;white-space:pre-wrap;}
.modal-content mark{background:yellow;color:#000;}
.modal-close{position:absolute;top:0.5em;right:0.5em;background:transparent;border:none;font-size:1.2em;cursor:pointer;color:#000;}
html.dark-mode .modal-content{background:#333;color:#fff;}
html.dark-mode .modal-content pre{background:#555;}
html.dark-mode .modal-close{color:#fff;}
.interaction-log-modal{max-width:960px;width:min(960px,92vw);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,0.18);}
.interaction-log-table th{width:250px;}
.interaction-log-table td,.interaction-log-table th{vertical-align:top;}
.interaction-log-quickgrid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:0.5em;margin:0.5em 0 0.8em;}
.interaction-log-quickcell{border:1px solid #d8e3ef;border-radius:8px;padding:0.45em 0.6em;background:rgba(64,112,158,0.06);}
.interaction-log-quicklabel{font-size:0.78em;opacity:0.75;}
.interaction-log-quickvalue{font-size:1.05em;font-weight:700;}
html.dark-mode .interaction-log-modal{background:#2a3038;color:#f2f6fb;}
html.dark-mode .interaction-log-quickcell{border-color:#4d5f73;background:rgba(255,255,255,0.05);}

.profile-links{margin-top:1em;}
.profile-links a{color:var(--accent-color);}
.settings-tabs{display:flex;gap:1em;margin-bottom:2.5em;}
.settings-tabs span{cursor:pointer;padding:0.3em 0.8em;border-radius:6px;background:#eee;color:#000;}
.settings-tabs span.active{background:var(--accent-color);color:#fff;}
.settings-tabs button{cursor:pointer;padding:0.35em 0.9em;border-radius:6px;border:1px solid transparent;background:#1e5f94;color:#fff;}
.settings-tabs button.active{background:var(--accent-color);color:#fff;}
.settings-tabs span,
.settings-tabs button,
.report-modal-tabs button{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.topics-main-tabs{
  gap:0.4em;
  border-bottom:1px solid #cfd9e5;
  padding-bottom:0;
}
.topics-main-tabs button{
  margin-bottom:-1px;
  border:1px solid #2a5f8c;
  border-bottom:1px solid #2a5f8c;
}
.topics-main-tabs button.active{
  background:#fff;
  color:#184468;
  border-color:#cfd9e5;
  border-bottom-color:#fff;
  font-weight:700;
}
html.dark-mode .topics-main-tabs{
  border-bottom-color:#53677a;
}
html.dark-mode .topics-main-tabs button.active{
  background:#23303b;
  color:#fff;
  border-color:#53677a;
  border-bottom-color:#23303b;
}
html.dark-mode .settings-tabs span{background:#444;color:#ccc;}
html.dark-mode .settings-tabs span.active{background:#fff;color:#222;}
.user-mgmt-subtabs button.active{background:#fff;color:#000;border-color:#c9ced8;}
html.dark-mode .user-mgmt-subtabs button.active{background:#fff;color:#000;border-color:#dbe0ea;}
.tenant-form input,.tenant-add-user input,.tenant-add-user select{display:block;margin:0.5em 0;width:90%;}
.tenant-form button,.tenant-add-user button{margin-top:0.5em;}

.table-scroll{overflow-x:auto;}
.tenant-table{border-collapse:collapse;margin-bottom:1em;min-width:700px;width:max-content;}
.tenant-table th,.tenant-table td{border:1px solid #ccc;padding:4px;text-align:center;white-space:nowrap;}
.lic-cell{min-width:110px;}
.lic-input{display:block;width:110px;font-size:0.8em;margin:2px auto;}
.link-edit{border:1px solid #ccc;padding:1em;margin:1em 0;background:rgba(255,255,255,0.8);}
html.dark-mode .link-edit{background:rgba(0,0,0,0.5);color:#fff;}
.link-edit label{display:block;margin:0.5em 0;}
.link-row{display:flex;align-items:center;gap:0.5em;margin:0.5em 0;}
.link-row input[type=text]{flex:1;}
.link-row .checkbox-label{display:flex;align-items:center;margin:0;}
.link-row .drag-handle{cursor:grab;color:#999;user-select:none;}
.link-row .drag-handle:active{cursor:grabbing;}
.link-row input[readonly]{background:#eee;color:#666;}
html.dark-mode .link-row input[readonly]{background:#555;color:#aaa;}
.tenants-workspace .tenants-subtitle{margin-top:-0.35em;opacity:0.8;}
.tenants-header-row{display:flex;justify-content:space-between;align-items:center;gap:1em;}
.tenant-select-table tbody tr{cursor:pointer;transition:background 0.2s;}
.tenant-select-table tbody tr:hover{background:rgba(23,73,111,0.08);}
.tenant-select-table tbody tr.is-selected{background:rgba(23,73,111,0.16);font-weight:600;}
html.dark-mode .tenant-select-table tbody tr:hover{background:rgba(255,255,255,0.08);}
html.dark-mode .tenant-select-table tbody tr.is-selected{background:rgba(255,255,255,0.16);}
.tenant-select-table{border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(16,35,60,0.08);}
.tenant-select-table th{background:#f3f7fc;font-weight:700;}
.tenant-select-table td,.tenant-select-table th{padding:8px 10px;}
html.dark-mode .tenant-select-table th{background:#223042;}
.tenant-actions-cell{display:flex;gap:0.45em;justify-content:center;}
.tenant-actions-cell button{padding:4px 10px;border-radius:6px;border:1px solid #9db2c7;background:#fff;color:#17496F;cursor:pointer;font-weight:600;}
.tenant-actions-cell button:hover{background:#f3f8ff;}
html.dark-mode .tenant-actions-cell button{background:#1d2a39;border-color:#5f748a;color:#e8eef6;}
html.dark-mode .tenant-actions-cell button:hover{background:#23364a;}
.tenants-inner-tabs{margin-top:1.2em;}
.tenant-license-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.75em;margin:1em 0;}
.tenant-license-card{border:1px solid #d6d6d6;border-radius:10px;padding:0.7em;background:#fff;}
html.dark-mode .tenant-license-card{background:#2d2d2d;border-color:#555;}
.tenant-license-card .lic-input{width:100%;min-width:0;font-size:0.9em;}
.tenants-workspace .link-edit input[type=text],.tenants-workspace .link-edit input[type=number]{width:min(560px,100%);min-width:0;}
.tenants-workspace .link-edit .link-row input[type=text]{width:auto;min-width:160px;flex:1 1 220px;}
.login-form button,
.login-form input[type=submit]{
    background:#17496F;
    color:#fff;
    border:1px solid rgba(255,255,255,0.22);
}
.login-form button:hover,
.login-form input[type=submit]:hover{
    filter:brightness(1.12);
}
.login-form .login-password-hidden{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.core-connector-region{border:1px solid #ccd8e4;border-radius:10px;padding:1em;margin-bottom:1em;background:rgba(23,73,111,0.04);}
html.dark-mode .core-connector-region{border-color:#4f5f72;background:rgba(255,255,255,0.04);}


/* Notification panel */
.notification-bell{
    position:relative;
    cursor:pointer;
}
.notif-badge{
    position:absolute;
    top:-4px;right:-4px;
    background:red;
    color:#fff;
    font-size:0.7em;
    padding:2px 5px;
    border-radius:50%;
}
.notif-panel{
    position:fixed;
    top:0;right:-320px;bottom:0;
    width:300px;
    background:rgba(255,255,255,0.8);
    color:#000;
    box-shadow:-2px 0 8px rgba(0,0,0,0.3);
    z-index:1000;
    transition:right 0.3s;
    display:flex;flex-direction:column;
}
.notif-panel.open{right:0;}
.notif-panel .notif-header{
    background:var(--dark-accent-color,#17496F);
    color:#fff;
    padding:0.8em;
    display:flex;justify-content:space-between;align-items:center;
}
.notif-panel .notif-header span:first-child{
    position:relative;
    font-weight:700;
    letter-spacing:0.02em;
    padding-bottom:5px;
}
.notif-panel .notif-header span:first-child::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    border-radius:99px;
    background:linear-gradient(90deg,#84d8ff 0%,#b8ffe7 50%,#ffe6a6 100%);
}
.notif-panel .notif-body{
    flex:1;
    overflow-y:auto;
    padding:0.65em;
    background:linear-gradient(180deg,rgba(17,69,108,0.06),rgba(17,69,108,0.01));
}
.notif-item{
    padding:0.6em 0.7em;
    border:1px solid rgba(23,73,111,0.12);
    border-radius:10px;
    margin-bottom:0.5em;
    background:rgba(255,255,255,0.9);
    box-shadow:0 2px 8px rgba(14,35,58,0.06);
}
.notif-item.animate-in{
    animation:notif-panel-enter 0.45s ease;
}
.notif-item-text{white-space:pre-line;line-height:1.35;}
.notif-item.unread{background:#f0f8ff;}
html.dark-mode .notif-panel{background:rgba(51,51,51,0.8);color:#fff;}
html.dark-mode .notif-panel .notif-header{background:#222;}
html.dark-mode .notif-panel .notif-body{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));}
html.dark-mode .notif-item{background:rgba(35,49,64,0.86);border-color:rgba(152,181,205,0.2);box-shadow:0 2px 10px rgba(0,0,0,0.25);}
html.dark-mode .notif-item.unread{background:#444;}
.notif-toast-stack{
    position:fixed;
    top:64px;
    right:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:1300;
    pointer-events:none;
    max-width:min(420px, calc(100vw - 32px));
}
.notif-toast-item{
    border:1px solid rgba(20, 73, 109, 0.18);
    background:rgba(255,255,255,0.96);
    color:#17496f;
    box-shadow:0 12px 28px rgba(0,0,0,0.16);
    border-radius:10px;
    padding:10px 14px;
    font-size:0.84em;
    font-weight:600;
    line-height:1.4;
    white-space:pre-line;
    pointer-events:auto;
    cursor:pointer;
}
html.dark-mode .notif-toast-item{
    background:rgba(26,34,45,0.95);
    color:#d7e8f7;
    border-color:rgba(143,177,205,0.35);
    box-shadow:0 12px 26px rgba(0,0,0,0.35);
}
@keyframes notif-panel-enter{
    0%{transform:translateY(-8px);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
}
.kw-products label{margin-right:1em;display:inline-flex;align-items:center;}
.kw-products img{margin:0 0.35em;}
.agent-assist-follow-up-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;}
.agent-assist-follow-up-label{font-size:12px;color:#4a5973;}
.agent-assist-add-follow-up{
  background:#163a70;
  color:#fff;
  border:1px solid #163a70;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  padding:3px 10px;
  margin-left:auto;
}
.agent-assist-follow-up-pill{
  background:#fff;
  color:#163a70;
  border:1px solid #c8d4ea;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  padding:3px 10px;
}
.topic-keyword-list{
    display:flex;
    flex-direction:column;
    gap:0.45em;
    width:100%;
    max-width:100%;
}
.topic-keyword-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(260px,1fr));
    gap:0.9em;
    width:100%;
    max-width:980px;
}
.topic-keyword-col{
    display:flex;
    flex-direction:column;
    gap:0.35em;
}
.topic-keyword-fieldset{
    border:1px solid #d6e1ea;
    border-radius:8px;
    padding:0.55em 0.7em 0.7em;
    min-width:0;
    margin:1.45em 0;
}
.topic-keyword-fieldset legend{
    font-size:0.82em;
    font-weight:600;
    color:#385067;
    padding:0 0.25em;
}
.topic-keyword-row{
    display:flex;
    align-items:center;
    gap:0.45em;
    flex-wrap:wrap;
}
.topic-keyword-row input[type="text"],
.topic-keyword-row input:not([type]){
    min-width:220px;
}
.topic-regex-hint{
    font-size:0.86em;
    color:#54657a;
}
html.dark-mode .topic-regex-hint{
    color:#b0c3d6;
}
html.dark-mode .topic-keyword-fieldset{
    border-color:#455b70;
    background:#233342;
}
html.dark-mode .topic-keyword-fieldset legend{
    color:#b9d5ee;
}
@media (max-width: 900px){
    .topic-keyword-columns{
        grid-template-columns:1fr;
    }
}

.simulator-tab button{
    margin:0.5em 0.5em 0.5em 0;
    padding:0.5em 1em;
}


.tenant-settings-layout section button[type="submit"]{
    margin-top: 0.6em;
}

.tenant-settings-layout .simulator-tab .sim-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:0.5em;
}

.tenant-api-page section{
    margin: 0 0 1em;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
    border-radius: 10px;
    border: 1px solid #d2dbe5;
    border-left: 3px solid var(--accent-color);
}

.tenant-api-key-actions{
    display:flex;
    align-items:center;
    gap:0.7em;
    flex-wrap:wrap;
}

.tenant-api-key-actions code{
    padding:0.4em 0.6em;
    border-radius:6px;
    background:#edf2f8;
    border:1px solid #ced9e5;
}

html.dark-mode .tenant-api-page section{
    background: #1c2c3b;
    border-color:#3a536b;
}

html.dark-mode .tenant-api-key-actions code{
    background:#13202d;
    border-color:#3a536b;
    color:#dce9f6;
}

.report-filters label{
    margin-right:0.5em;
}
.report-filters input{
    margin-right:1em;
}
.report-channels{
    margin:1em 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.5em 1em;
}
.report-channels button{
    margin-left:auto;
}
.report-zoom-controls{
    margin:0.35em 0 0.7em;
    padding:0.55em 0.7em;
    border:1px solid #d6e1ea;
    border-radius:8px;
    background:#f6f9fc;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.8em;
    flex-wrap:wrap;
}
.report-zoom-info{
    font-size:0.95em;
}
.report-zoom-steps{
    color:#4b5c70;
    margin-left:0.3em;
}
.report-zoom-btn{
    font-weight:600;
    padding:0.42em 0.85em;
}
.report-zoom-btn:disabled{
    opacity:0.55;
    cursor:not-allowed;
}
.report-modal-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:0.45em;
    margin:0.4em 0 0.7em;
}
.report-modal-tabs button.active{
    background:#0a7f3f;
    color:#fff;
    border-color:#0a7f3f;
}
html.dark-mode .report-modal-tabs button.active{
    background:#2aa55f;
    border-color:#2aa55f;
    color:#fff;
}
.report-layout{
    display:flex;
    flex-wrap:wrap;
    gap:1em;
    align-items:flex-start;
}
.report-col{flex:1 1 250px;display:flex;flex-direction:column;gap:0.5em;align-items:flex-start;}
.report-col>input,.report-col>select{width:80%;}
.report-actions{display:flex;gap:0.5em;flex-wrap:wrap;}
.report-right{flex:1 1 300px;display:flex;justify-content:flex-start;align-items:stretch;position:relative;}
.pie-container{position:relative;display:inline-block;}
.report-right canvas{display:block;}
.report-topic-cloud{width:100%;max-width:420px;min-height:180px;border:1px solid #d6e1ea;border-radius:10px;background:#f8fbfe;padding:0.6em 0.7em;}
.report-topic-cloud h4{margin:0 0 0.45em 0;font-size:0.95em;}
.report-topic-cloud-list{display:flex;flex-wrap:wrap;gap:0.35em 0.45em;align-items:flex-start;}
.report-topic-cloud-item{border:none;background:transparent;color:#17496F;cursor:pointer;padding:0.1em 0.2em;line-height:1.2;border-radius:5px;}
.report-topic-cloud-item:hover{background:rgba(23,73,111,0.12);}
.report-topic-cloud-item.active{background:#17496F;color:#fff;}
.report-topic-cloud-empty{font-size:0.88em;color:#5f6f7f;}
.report-visual-row{display:flex;align-items:flex-start;gap:0.8em;flex-wrap:nowrap;}
.report-visual-row .chart-container{flex:1 1 auto;min-width:0;}
.report-donut-side{flex:0 0 220px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding-top:0;gap:0.45em;}
.report-zoom-controls-side{margin:0;padding:0.45em 0.55em;width:100%;box-sizing:border-box;}
.report-detail{
    margin-top:1em;
}

.report-subset-panel{
    margin:0.6em 0 1em;
    border:1px solid #dbe5ef;
    border-radius:8px;
    padding:0.65em 0.8em;
    background:#f8fbfe;
}
.report-subset-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.5em;
}
.report-subset-hint{
    color:#4b5c70;
    font-size:0.86em;
    margin-right:0.4em;
}
.report-subset-controls select{
    min-width:130px;
}
.report-subset-headline{
    display:flex;
    justify-content:space-between;
    gap:0.8em;
    flex-wrap:wrap;
    margin:0.55em 0 0.35em;
    font-weight:600;
}
.report-subset-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
    gap:0.6em;
}
.report-subset-card{
    border:1px solid #d3dfeb;
    border-radius:8px;
    background:#fff;
    padding:0.5em 0.6em;
}
.report-subset-title{
    font-size:0.92em;
    font-weight:600;
    margin-bottom:0.2em;
}
.report-subset-main{
    font-size:1.25em;
    font-weight:700;
    margin-bottom:0.25em;
}
.report-subset-meta{
    font-size:0.86em;
    line-height:1.35;
}

.report-chart{
    width:100%;
    max-width:none;
    height:410px;
    max-height:410px;
    min-height:410px;
    display:block;
    margin-bottom:1em;
    background:#fff;
}

@media (max-width:600px){
    .report-chart{
        height:240px;
        max-height:240px;
        max-width:100%;
    }
}

html.dark-mode .report-chart{
    background:#222;
}
html.dark-mode .report-subset-panel{
    border-color:#3e4a58;
    background:#1f242a;
}
html.dark-mode .report-subset-card{
    border-color:#495564;
    background:#20272f;
}
html.dark-mode .report-subset-hint{
    color:#b1c4d7;
}
html.dark-mode .report-zoom-controls{
    border-color:#3e4a58;
    background:#1f242a;
}
html.dark-mode .report-zoom-steps{
    color:#b1c4d7;
}

@media (max-width: 1200px){
  .report-visual-row{
    flex-wrap:wrap;
  }
  .report-donut-side{
    flex:1 1 100%;
    justify-content:flex-start;
    padding-top:0;
  }
}

html.dark-mode .report-topic-cloud{
  border-color:#3e4a58;
  background:#1f242a;
}
html.dark-mode .report-topic-cloud-item{
  color:#b8d8f2;
}
html.dark-mode .report-topic-cloud-item:hover{
  background:rgba(184,216,242,0.14);
}
html.dark-mode .report-topic-cloud-item.active{
  background:#2f84ba;
  color:#fff;
}
html.dark-mode .report-topic-cloud-empty{
  color:#b1c4d7;
}

.chart-container{position:relative;display:block;}
.chart-loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.7);pointer-events:none;}
html.dark-mode .chart-loading{background:rgba(0,0,0,0.5);}
.page-nav-loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.35);backdrop-filter:blur(1px);z-index:30;pointer-events:all;}
html.dark-mode .page-nav-loading{background:rgba(0,0,0,0.35);}
.spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,0.2);border-top-color:var(--accent-color,#17496F);border-radius:50%;animation:spin 1s linear infinite;}

.topics-classification-box{
  border:1px solid #d7e3f0;
  border-radius:12px;
  padding:0.8em;
  margin:0.8em 0;
  background:#fbfdff;
}
.topics-explorer-cockpit{
  background:#fbfdff;
}
html.dark-mode .topics-explorer-cockpit{
  background:#2a3440 !important;
  border-color:#4b5d70 !important;
}
html.dark-mode .topics-classification-box{
  background:#2a3440;
  border-color:#4b5d70;
}
.topics-mini-trend{
  display:flex;
  align-items:flex-end;
  gap:6px;
  min-height:92px;
  margin:0.4em 0;
}
.topics-mini-trend-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:0.72em;
  color:#4a6075;
}
.topics-mini-trend-bar{
  width:12px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#79bcff,#2d78bf);
}
.topics-health-graph{
  border:1px solid #d7e3f0;
  border-radius:10px;
  background:#fbfdff;
  padding:1em 1.1em;
  margin:0 0 1.2em 0;
}
.topics-health-graph-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:0.5em;
  gap:0.8em;
}
.topics-health-graph-head h3{
  margin:0;
}
.topics-health-graph-head span{
  font-size:0.85em;
  opacity:0.75;
}
.topics-health-chart-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.5em;
  font-size:0.9em;
  color:#486079;
}
.topics-health-chart-controls button{
  border:1px solid #cddded;
  background:#f5f9ff;
  border-radius:7px;
  padding:0.35em 0.7em;
  cursor:pointer;
  color:#173a59;
  font-weight:600;
}
.topics-health-chart-container{
  height:280px;
  width:100%;
}
.topics-health-line-chart{
  width:100% !important;
  height:100% !important;
  display:block;
}
html.dark-mode .topics-health-graph{
  background:#2a3440;
  border-color:#4b5d70;
}
html.dark-mode .topics-health-chart-controls{
  color:#b8cce0;
}
html.dark-mode .topics-health-chart-controls button{
  border-color:#56708a;
  background:#2d3f51;
  color:#e4f0ff;
}
.topics-gradient-border{
  --topic-gradient-border-width:1px;
  position:relative;
  border:var(--topic-gradient-border-width) solid rgba(138, 165, 192, 0.45);
}
.topics-gradient-border::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--topic-gradient-border-width) - 1px);
  border-radius:inherit;
  padding:var(--topic-gradient-border-width);
  background:linear-gradient(45deg,#ff99ff,#99ff99,#9999ff,#99ffff,#ffff99);
  background-size:180% 180%;
  background-position:0% 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
}
html.dark-mode .topics-gradient-border{
  border-color:rgba(117, 145, 173, 0.55);
}
.topics-gradient-border.topics-highlight-border-active::before{
  animation:topics-highlight-gradient-shift 1s ease-in-out;
}
@keyframes topics-highlight-gradient-shift{
  0%{background-position:0% 50%; opacity:1;}
  33%{background-position:12% 52%; opacity:1;}
  66%{background-position:24% 48%; opacity:1;}
  100%{background-position:36% 50%; opacity:0;}
}
@keyframes spin{to{transform:rotate(360deg);}}
#page-loading{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:9999;}
#page-loading .spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,0.2);border-top-color:#fff;}

/* Prism document pages */
.document-list{width:100%;border-collapse:collapse;}
.document-list th,.document-list td{padding:8px;border-bottom:1px solid #ccc;text-align:left;}
.document-list tbody tr:hover{background:#f5f5f5;cursor:pointer;}
html.dark-mode .document-list tbody tr:hover{background:#333;}
.document-list img{width:24px;margin-right:8px;vertical-align:middle;}
.unified-dark-header-table thead th{
  background: color-mix(in srgb, var(--accent-color, #17496F) 70%, transparent);
  color: #fff;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(34, 66, 94, 0.55);
}
html.dark-mode .unified-dark-header-table thead th{
  background: color-mix(in srgb, var(--accent-color, #17496F) 70%, transparent);
}
.prism-doc-classes-table tbody td{
  background: transparent !important;
}
.doc-actions button{background:none;border:none;color:var(--accent-color,#17496F);cursor:pointer;margin-right:6px;}
.doc-actions button:last-child{margin-right:0;}

.doc-name-link{background:none;border:none;color:var(--accent-color,#17496F);text-decoration:underline;cursor:pointer;padding:0;font:inherit;}

.processing-history .history-hint-pill{
  position:relative;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:help;
  display:inline-block;
}
.processing-history .history-tooltip{
  position:absolute;
  left:50%;
  bottom:130%;
  transform:translateX(-50%) translateY(4px);
  background:#1f2933;
  color:#fff;
  padding:5px 7px;
  border-radius:6px;
  font-size:12px;
  min-width:220px;
  max-width:300px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.12s ease, transform 0.12s ease;
  z-index:12;
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
}
.processing-history .history-hint-pill:hover .history-tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.prism-inboxes-page .prism-inbox-edit{margin-top:1rem;padding:0.8rem;border:1px solid #d5dbe3;border-radius:8px;background:#f8fbff;}
html.dark-mode .prism-inboxes-page .prism-inbox-edit{background:#252d36;border-color:#3d4b5c;}
html.dark-mode .prism-inboxes-page .form-grid section{
    background:transparent;
    box-shadow:none;
    border-color:#4f5d6d;
}
html.dark-mode .prism-inboxes-page .prism-inbox-edit{
    background:transparent;
}

.prism-overlap-chart{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.prism-overlap-row{display:flex;flex-direction:column;gap:4px;}
.prism-overlap-head{display:flex;justify-content:space-between;align-items:center;font-size:0.92em;gap:10px;}
.prism-overlap-track{height:14px;border-radius:999px;background:#e5eaf1;overflow:hidden;}
.prism-overlap-fill{height:100%;border-radius:999px;transition:width .3s ease;}
html.dark-mode .prism-overlap-track{background:#37424f;}

.demo-document{display:flex;gap:20px;}
.demo-left{flex:1;}
.field-table{width:100%;border-collapse:collapse;}
.field-table th,.field-table td{padding:4px 8px;border-bottom:1px solid #ddd;text-align:left;}
.field-table tr:hover,.field-table tr.hovered{background:#FFF9C4;cursor:pointer;}
.field-table + .field-table{margin-top:1em;}
.demo-right{flex:2;}
.image-container{position:relative;}
.image-doc{position:relative;}
.overlay-div{position:absolute;pointer-events:auto;border:2px solid transparent;}
.overlay-div.hovered{outline:2px solid var(--dark-accent-color);box-shadow:0 0 6px var(--dark-accent-color);}
.red-border{border-color:red;background:rgba(255,0,0,0.2);}
.blue-border{border-color:blue;background:rgba(0,0,255,0.2);}
.green-border{border-color:green;background:rgba(0,255,0,0.2);}
.cyan-border{border-color:cyan;background:rgba(0,255,255,0.2);}
.orange-border{border-color:orange;background:rgba(255,165,0,0.2);}
.purple-border{border-color:purple;background:rgba(128,0,128,0.2);}
.json-output{background:#f5f5f5;color:#333;padding:8px;margin-top:1em;white-space:pre;overflow:auto;}

html.dark-mode .field-table th,html.dark-mode .field-table td{border-bottom:1px solid #555;}
html.dark-mode .field-table tr:hover,html.dark-mode .field-table tr.hovered{background:rgba(255,235,59,0.25);}
html.dark-mode .json-output{background:#333;color:#eee;}
html.dark-mode .overlay-div.hovered{outline:2px solid var(--dark-accent-color);box-shadow:0 0 6px var(--dark-accent-color);}

.processing-history .history-settings{margin-bottom:1em;}
.processing-history table{width:100%;border-collapse:collapse;}
.processing-history th,.processing-history td{padding:8px;border-bottom:1px solid #ccc;text-align:left;}

.doc-filters{display:flex;gap:1em;margin-bottom:0.5em;}
.doc-filters label{display:flex;flex-direction:column;font-weight:normal;}


/* ECCO Voicebot Flow */
.vb-page{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:calc(100vh - 220px);
}
.pvf-page{
  padding:12px;
}
.pvf-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:980px;
  background:#f4f7fb;
  border:1px solid #c7d5e3;
  border-radius:8px;
  padding:14px;
}
.pvf-card input,
.pvf-card textarea{
  width:100%;
  border:1px solid #9db4c8;
  border-radius:6px;
  padding:8px;
  font:inherit;
  resize:vertical;
}
.pvf-card textarea{
  min-height:120px;
}
.pvf-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pvf-llm-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
  border:1px solid #b9ccdc;
  border-radius:8px;
  background:#eef5fc;
  padding:10px;
}
.pvf-error-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #d68484;
  border-radius:8px;
  background:#fff1f1;
  color:#7f2222;
  font-size:0.86em;
  padding:8px 10px;
}
.pvf-error-box button{
  background:#b33838;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  font-size:0.82em;
  flex:0 0 auto;
}
.pvf-success-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid #79b58f;
  border-radius:8px;
  background:#edf9f1;
  color:#1f5d35;
  font-size:0.86em;
  padding:8px 10px;
}
.pvf-success-box button{
  align-self:flex-start;
  background:#1f9d49;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  font-size:0.82em;
}
.pvf-success-link-line{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.pvf-success-link-line a{
  word-break:break-all;
}
.vb-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.vb-inline-field{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:180px;
}
.vb-inline-field label{
  font-size:0.72em;
  font-weight:700;
  color:#2b4f68;
  letter-spacing:0.02em;
}
.vb-inline-field input,
.vb-inline-field select{
  border:1px solid #b7c7d4;
  border-radius:6px;
  padding:7px;
  font-size:0.84em;
  background:#fff;
  color:#17384f;
}
.vb-flow-select{
  min-width:220px;
  border:1px solid #b7c7d4;
  border-radius:6px;
  padding:7px;
  font-size:0.84em;
  background:#fff;
  color:#17384f;
}
.vb-toolbar button{
  background:#0f6cae;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  font-size:0.82em;
}
.vb-toolbar button:hover{filter:brightness(1.06);}
.vb-toolbar button.danger{background:#b33838;}
.vb-toolbar button:disabled{opacity:0.6;cursor:not-allowed;}
.vb-toolbar button.active-toggle{background:#1f9d49;}
.vb-toolbar-sep{
  color:#6c8192;
  font-weight:700;
  margin:0 2px;
}
.vb-status{
  margin-left:auto;
  font-size:0.82em;
  color:#1f4f70;
  font-weight:600;
}
.vb-toast{
  position:fixed;
  top:16px;
  right:16px;
  max-width:min(420px, calc(100vw - 32px));
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(20, 73, 109, 0.18);
  background:rgba(255,255,255,0.96);
  color:#17496f;
  box-shadow:0 12px 28px rgba(0,0,0,0.16);
  font-size:0.84em;
  font-weight:600;
  line-height:1.4;
  z-index:1200;
  pointer-events:none;
}

.vb-layout{
  display:grid;
  grid-template-columns:200px minmax(800px,1fr) 260px;
  gap:12px;
  align-items:start;
}
.vb-panel{
  background:rgba(255,255,255,0.88);
  border:1px solid #c7d6e3;
  border-radius:10px;
  padding:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.vb-modules h3,
.vb-inspector h3,
.vb-panel h3,
.vb-panel h4{
  margin:0 0 8px 0;
}
.vb-help{
  font-size:0.85em;
  color:#44596a;
  margin-top:10px;
}
.vb-issue{
  font-size:0.82em;
  padding:5px 7px;
  border-radius:5px;
  margin-bottom:4px;
}
.vb-issue.ok{background:#dff5e5;color:#1c6b39;}
.vb-issue.warning{background:#fff2d6;color:#8d5a00;}
.vb-issue.error{background:#ffdede;color:#8a1a1a;}

.vb-module-btn{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:8px;
  border:1px solid #b7ccde;
  background:#f4f9fd;
  border-radius:7px;
  padding:5px 7px;
  margin-bottom:6px;
  cursor:pointer;
  color:#17384f;
  text-align:left;
  font-size:0.78em;
}
.vb-module-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.vb-module-copy strong{
  font-size:1em;
  font-weight:700;
}
.vb-module-copy small{
  color:#5d7387;
  line-height:1.35;
}
.vb-module-btn:hover{background:#ebf5fc;}
.vb-module-btn.disabled{
  opacity:0.55;
  cursor:not-allowed;
  background:#eceff2;
  border-color:#c6ced6;
  color:#6a7783;
}
.vb-module-btn.disabled:hover{
  background:#eceff2;
}
.vb-module-btn.dragging{
  opacity:0.65;
  border-style:dashed;
}
.vb-module-btn.custom{
  background:#f7f6ff;
  border-color:#c7c1e6;
}
.vb-module-btn.custom:hover{
  background:#efedfd;
}


.vb-canvas-header{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position:sticky;
  top:0;
  z-index:4;
  background:rgba(255,255,255,0.92);
  padding-bottom:6px;
}

.vb-canvas-wrap{
  overflow:auto;
  min-height:720px;
  background:#f8fcff;
  border:1px solid #cddae6;
  border-radius:10px;
  padding:10px;
}
.vb-canvas-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}
.vb-canvas-controls button{
  border:none;
  border-radius:6px;
  width:26px;
  height:24px;
  cursor:pointer;
  background:#0f6cae;
  color:#fff;
  font-weight:700;
  font-size:0.78em;
}
.vb-canvas-controls span{
  min-width:56px;
  text-align:center;
  font-size:0.8em;
  color:#284a62;
  font-weight:700;
}
.vb-canvas-scale{
  position:relative;
}
.vb-canvas{
  position:relative;
  width:2000px;
  height:1200px;
  cursor:grab;
  background-color:#f5f9fc;
  background-image:
    linear-gradient(90deg, rgba(34,90,128,0.08) 1px, transparent 1px),
    linear-gradient(rgba(34,90,128,0.08) 1px, transparent 1px);
  background-size:24px 24px;
  border:1px solid #cddae6;
  border-radius:8px;
}
.vb-canvas.drop-ready{border-color:#4a88b7;}
.vb-canvas.drop-hover{
  border-color:#1f9d49;
  box-shadow:inset 0 0 0 2px rgba(31,157,73,0.22);
}
.vb-canvas.panning{
  cursor:grabbing;
}
.vb-canvas.panning,
.vb-canvas.panning *{
  user-select:none;
}
.vb-edge-layer{
  position:absolute;
  inset:0;
  pointer-events:auto;
}
.vb-edge{
  fill:none;
  stroke:#4f7ea3;
  stroke-width:2;
  pointer-events:stroke;
  cursor:pointer;
}
.vb-edge.selected{stroke:#0b69a9;stroke-width:2.4;}
.vb-edge.temp{stroke-dasharray:7 4;pointer-events:none;}

.vb-node{
  position:absolute;
  border:1px solid #b8cfe0;
  border-radius:10px;
  background:#fff;
  color:#17384f;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
.vb-node.selected{
  border-color:#0b69a9;
  box-shadow:0 0 0 2px rgba(11,105,169,0.25),0 3px 10px rgba(0,0,0,0.08);
}
.vb-node-delete-btn{
  position:absolute;
  top:-11px;
  right:-11px;
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:#c92a2a;
  color:#fff;
  font-size:0.9rem;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.vb-node-delete-btn:hover{background:#a81f1f;}
.vb-node-delete-btn:focus-visible{outline:2px solid #fff;outline-offset:1px;}
.vb-node-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid #d5e2ec;
  font-weight:600;
  font-size:0.82em;
  cursor:move;
  user-select:none;
  background:linear-gradient(180deg,#f4fbff,#e9f3fb);
  border-radius:10px 10px 0 0;
}
.vb-node-body{padding:6px 7px 8px 7px;}
.vb-node-preview{
  margin:6px 1px 0 1px;
  font-size:0.62em;
  line-height:1.2;
  color:#4f6a7f;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}
.vb-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:24px;
  margin-bottom:2px;
}
.vb-cell{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.7em;
}
.vb-cell.out{justify-content:flex-end;text-align:right;}
.vb-port{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #537995;
  background:#fff;
  cursor:pointer;
  padding:0;
  flex:0 0 18px;
}
.vb-port.out{border-color:#0b69a9;}
.vb-port:hover{background:#d6e9f7;}
.vb-port.active{box-shadow:0 0 0 3px rgba(11,105,169,0.25);}
.vb-edge-hit{
  fill:none;
  stroke:transparent;
  stroke-width:16px;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:stroke;
}

.vb-inspector label{
  display:block;
  font-size:0.8em;
  font-weight:600;
  margin:8px 0 4px 0;
}
.vb-inspector input,
.vb-inspector textarea,
.vb-inspector select,
.vb-panel textarea{
  width:100%;
  border:1px solid #b7c7d4;
  border-radius:6px;
  padding:7px;
  font-size:0.85em;
  box-sizing:border-box;
}
.vb-inspector button{
  margin-top:10px;
  padding:8px 10px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  background:#0f6cae;
  color:#fff;
}
.vb-inspector button.danger{background:#b33838;}
.vb-module-summary{
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px dashed #c7d6e3;
}
.vb-module-summary-title{
  font-size:0.95em;
  font-weight:700;
  color:#17384f;
}
.vb-details-toggle{
  background:#e8f2fa !important;
  color:#17496f !important;
  border:1px solid #bdd0e1 !important;
}
.vb-selected-edge{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px dashed #c7d6e3;
}
.vb-selected-edge .vb-help{
  margin:0;
  font-size:0.8em;
}
.vb-selected-edge > div:last-child{
  width:100%;
}
.vb-selected-edge > div:last-child .danger{
  margin-top:0;
}
.vb-topic-list{
  border:1px solid #d7e3ec;
  border-radius:6px;
  background:#f8fbfe;
  max-height:220px;
  overflow:auto;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:6px 2px 8px;
}
.vb-topic-option{
  margin:0;
  font-size:0.8em;
  display:block;
  padding:2px 0 2px 24px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  position:relative;
}
.vb-topic-option input[type="checkbox"]{
  position:absolute;
  left:0;
  top:4px;
  margin:0;
}
.vb-topic-copy{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.vb-topic-name{
  font-size:0.88em;
  font-weight:700;
  color:#183e5c;
}
.vb-topic-create-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.vb-topic-create-row .vb-check{
  margin:0;
  white-space:nowrap;
}
.vb-subflow-preview{
  margin-top:8px;
  border:1px solid #d5e2ec;
  background:#f7fafc;
  border-radius:7px;
  padding:8px;
}
.vb-subflow-title{
  font-size:0.85em;
  font-weight:700;
  color:#1d435e;
  margin-bottom:3px;
}
.vb-subflow-meta{
  font-size:0.7em;
  color:#4d6578;
  margin-bottom:6px;
}
.vb-subflow-list{
  max-height:110px;
  overflow:auto;
  border:1px solid #dbe6ee;
  border-radius:6px;
  background:#fff;
  padding:6px;
  font-size:0.76em;
  line-height:1.35;
}

.vb-sim-log{
  margin-top:8px;
  max-height:180px;
  overflow:auto;
  border:1px solid #d1dbe4;
  background:#f6f9fc;
  border-radius:6px;
  padding:7px;
  font-size:0.78em;
  line-height:1.4;
}
.vb-sim-log.large{
  max-height:none;
  height:calc(100% - 180px);
  min-height:140px;
}
.vb-sim-context{
  margin-top:8px;
  max-height:140px;
  overflow:auto;
  font-size:0.76em;
  background:#f6f9fc;
  border:1px solid #d1dbe4;
  border-radius:6px;
  padding:7px;
}

.vb-io{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

html.dark-mode .vb-panel{
  background:rgba(42,48,55,0.92);
  border-color:#4f5d6b;
  color:#edf2f7;
}
html.dark-mode .vb-module-summary-title{
  color:#edf2f7;
}
html.dark-mode .vb-details-toggle{
  background:#314456 !important;
  color:#edf2f7 !important;
  border-color:#506579 !important;
}
html.dark-mode .vb-status{color:#9ccff0;}
html.dark-mode .vb-toast{
  border-color:rgba(116, 171, 209, 0.28);
  background:rgba(31,40,49,0.96);
  color:#d8ecfb;
}
html.dark-mode .vb-toolbar-sep{color:#9fb8ca;}
html.dark-mode .vb-help{color:#becbd6;}
html.dark-mode .vb-topic-list{
  background:#212d38;
  border-color:#4f6476;
}
html.dark-mode .vb-inline-field label{color:#bfd7ea;}
html.dark-mode .vb-inline-field input,
html.dark-mode .vb-inline-field select{
  background:#25303b;
  color:#f1f4f8;
  border-color:#607181;
}
html.dark-mode .vb-flow-select{
  background:#25303b;
  color:#f1f4f8;
  border-color:#607181;
}
html.dark-mode .pvf-card{
  background:#17242f;
  border-color:#2a465b;
}
html.dark-mode .pvf-card input,
html.dark-mode .pvf-card textarea{
  background:#25303b;
  color:#f1f4f8;
  border-color:#607181;
}
html.dark-mode .pvf-llm-box{
  background:#1f2d39;
  border-color:#3f5568;
}
html.dark-mode .pvf-error-box{
  background:#472a2f;
  border-color:#8b4a54;
  color:#ffd8de;
}
html.dark-mode .pvf-error-box button{
  background:#be4b4b;
}
html.dark-mode .pvf-success-box{
  background:#1f3a2a;
  border-color:#4f8f67;
  color:#d7f4e3;
}
html.dark-mode .pvf-success-box button{
  background:#2ea85a;
}
html.dark-mode .vb-module-btn{
  background:#2c3743;
  border-color:#586a7b;
  color:#e8eef4;
}
html.dark-mode .vb-module-copy small{
  color:#b9c6d3;
}
html.dark-mode .vb-module-btn:hover{background:#334253;}
html.dark-mode .vb-module-btn.disabled{
  background:#1f2731;
  border-color:#3a4a5c;
  color:#8593a0;
}
html.dark-mode .vb-module-btn.disabled:hover{
  background:#1f2731;
}
html.dark-mode .vb-module-btn.custom{
  background:#353148;
  border-color:#67608a;
}
html.dark-mode .vb-module-btn.custom:hover{
  background:#3d3755;
}
html.dark-mode .vb-module-btn.dragging{
  border-color:#8aa4b8;
}
html.dark-mode .vb-canvas{
  background-color:#f5f9fc;
  border-color:#cddae6;
  background-image:
    linear-gradient(90deg, rgba(34,90,128,0.08) 1px, transparent 1px),
    linear-gradient(rgba(34,90,128,0.08) 1px, transparent 1px);
}
html.dark-mode .vb-canvas-wrap{
  background:#f8fcff;
  border-color:#cddae6;
}
html.dark-mode .vb-canvas.drop-ready{border-color:#4a88b7;}
html.dark-mode .vb-canvas.drop-hover{
  border-color:#1f9d49;
  box-shadow:inset 0 0 0 2px rgba(31,157,73,0.22);
}
html.dark-mode .vb-canvas-header{
  background:rgba(42,48,55,0.95);
}
html.dark-mode .vb-canvas-controls button{
  background:#0f6cae;
}
html.dark-mode .vb-canvas-controls span{
  color:#d2e1ec;
}
html.dark-mode .vb-node{
  background:#fff;
  border-color:#b8cfe0;
  color:#17384f;
}
html.dark-mode .vb-node-preview{
  color:#4f6a7f;
}
html.dark-mode .vb-node-head{
  border-color:#d5e2ec;
  background:linear-gradient(180deg,#f4fbff,#e9f3fb);
}
html.dark-mode .vb-port{
  border-color:#537995;
  background:#fff;
}
html.dark-mode .vb-port.out{
  border-color:#0b69a9;
}
html.dark-mode .vb-port:hover{
  background:#d6e9f7;
}
html.dark-mode .vb-inspector input,
html.dark-mode .vb-inspector textarea,
html.dark-mode .vb-panel textarea{
  background:#25303b;
  color:#f1f4f8;
  border-color:#607181;
}
html.dark-mode .vb-sim-log,
html.dark-mode .vb-sim-context{
  background:#222c35;
  border-color:#5a6a79;
}
html.dark-mode .vb-selected-edge{
  border-bottom-color:#556675;
}
html.dark-mode .vb-topic-option{
  background:transparent;
  border-color:transparent;
}
html.dark-mode .vb-topic-name{color:#e3eef7;}
html.dark-mode .vb-topic-synonyms{color:#b8cad8;}
html.dark-mode .vb-subflow-preview{
  border-color:#556675;
  background:#25303b;
}
html.dark-mode .vb-subflow-title{color:#eaf2f8;}
html.dark-mode .vb-subflow-meta{color:#bdd0df;}
html.dark-mode .vb-subflow-list{
  background:#1f2831;
  border-color:#4f5f6f;
  color:#e9f0f6;
}

@media (max-width: 1500px){
  .vb-layout{grid-template-columns:220px minmax(520px,1fr);}
  .vb-inspector{grid-column:1 / -1;}
}
@media (max-width: 900px){
  .vb-layout{display:block;}
  .vb-panel{margin-bottom:10px;}
  .vb-io{grid-template-columns:1fr;}
  .vb-status{margin-left:0;width:100%;}
}

/* ECCO Voicebot Flow simulation enhancements */

.vb-top-boxes{
  display:grid;
  grid-template-columns:minmax(320px,390px) minmax(0,1fr) minmax(210px,260px);
  gap:12px;
  align-items:stretch;
}
.vb-dialog-toggle-box{
  border:1px solid #c8d9e7;
  background:linear-gradient(180deg,#f8fcff,#edf5fb);
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:125px;
}
.vb-dialog-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.vb-dialog-toggle-row button{
  border:none;
  border-radius:7px;
  background:#0f6cae;
  color:#fff;
  padding:8px 10px;
  cursor:pointer;
  font-size:0.84em;
}
.vb-dialog-toggle-row button.active{
  background:#0f6cae;
}
.vb-dialog-toggle-row button.simulate-btn{
  background:#1f9d49 !important;
}
.vb-dialog-toggle-row button.stop-btn{
  background:#d08112;
}
.vb-dialog-toggle-row button.simulate-btn:hover{background:#22a64d;}
.vb-dialog-toggle-row button.stop-btn:hover{background:#de8c19;}

.vb-step-box{
  border:1px solid #c8d9e7;
  background:linear-gradient(180deg,#f8fcff,#edf5fb);
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:125px;
}
.vb-step-box-title{
  font-size:0.78em;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#557289;
  margin-bottom:4px;
}
.er-sim-toolbar-slot{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  flex:1 1 300px;
}
.er-sim-drop-card{
  border:1px dashed #8ea6b9;
  background:rgba(242,248,253,0.6);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  width:min(360px, 100%);
  margin-bottom:0;
}
.er-sim-drop-card input{display:none;}
.vb-node.sim-active{
  border-color:#2f84ba;
  box-shadow:0 0 0 2px rgba(47,132,186,0.26), 0 0 18px rgba(47,132,186,0.52);
}
.vb-node.sim-done{
  border-color:#7d8ea1;
}
.vb-node.sim-final{
  border-color:#2e9e67;
  box-shadow:0 0 0 2px rgba(46,158,103,0.3), 0 0 20px rgba(46,158,103,0.62);
}
.vb-topic-synonyms{
  display:block;
  font-size:0.7em;
  color:#4e687c;
  line-height:1.25;
  margin:0;
  word-break:break-word;
}
.vb-step-title{
  font-size:1em;
  font-weight:700;
  color:#123a57;
  margin-bottom:4px;
}
.vb-step-detail{
  font-size:0.82em;
  color:#2a4f68;
  line-height:1.35;
}
.vb-validation-box{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.vb-validation-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.vb-validation-nav{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.74em;
  color:#557289;
}
.vb-validation-nav-btn{
  border:none;
  background:none;
  color:#0f6cae;
  cursor:pointer;
  padding:0;
  font-size:0.92em;
  line-height:1;
}
.vb-validation-nav-btn:disabled{
  color:#9ab3c5;
  cursor:default;
}
.vb-validation-count{
  min-width:34px;
  text-align:center;
}
.vb-validation-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1 1 auto;
  min-height:0;
  padding-top:6px;
}
.vb-validation-box .vb-issue{
  margin:0;
  font-size:0.76em;
}

.vb-edge.sim-active{stroke:#1f9d49;stroke-width:3;}
.vb-edge.sim-traversed{stroke:#2f8bc4;stroke-width:2.6;}

.vb-node.sim-current{
  border-color:#00c853;
  border-width:3px;
  box-shadow:0 0 0 6px rgba(0,200,83,0.33),0 0 30px rgba(0,200,83,0.55),0 8px 20px rgba(0,0,0,0.28);
  z-index:20;
  animation:vb-current-node-pulse 1s ease-in-out infinite;
}
.vb-node.sim-current .vb-node-head{
  background:linear-gradient(180deg,#ebfff3,#d2ffe4);
  border-bottom-color:#7ad79d;
  color:#0f3f25;
}
.vb-node.sim-visited{
  border-color:#5ea9d9;
}
@keyframes vb-current-node-pulse{
  0% { box-shadow:0 0 0 5px rgba(0,200,83,0.26),0 0 18px rgba(0,200,83,0.45),0 8px 20px rgba(0,0,0,0.24); }
  50% { box-shadow:0 0 0 10px rgba(0,200,83,0.14),0 0 38px rgba(0,200,83,0.68),0 10px 24px rgba(0,0,0,0.32); }
  100% { box-shadow:0 0 0 5px rgba(0,200,83,0.26),0 0 18px rgba(0,200,83,0.45),0 8px 20px rgba(0,0,0,0.24); }
}

.vb-port-placeholder{
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.vb-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0;
  font-size:0.84em;
}
.vb-check input[type="checkbox"]{
  width:auto;
}
.vb-check.vb-topic-option{
  display:block;
  align-items:initial;
  gap:0;
}

.vb-edge-list{
  margin-top:6px;
  border:1px solid #d8e3ec;
  border-radius:6px;
  max-height:150px;
  overflow:auto;
  background:#f7fafd;
}
.vb-conn-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  border-bottom:1px solid #e3ebf2;
  font-size:0.76em;
}
.vb-conn-row:last-child{border-bottom:none;}
.vb-inspector button.small{
  margin-top:0;
  padding:4px 7px;
  font-size:0.78em;
}

.vb-floating-dialog{
  position:fixed;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #c5d6e4;
  border-radius:10px;
  box-shadow:0 8px 30px rgba(5,24,38,0.26);
  overflow:hidden;
}
.vb-floating-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  background:linear-gradient(180deg,#f3f9fe,#e6f1f9);
  border-bottom:1px solid #cadbe8;
  cursor:move;
  user-select:none;
}
.vb-floating-head span{
  font-size:0.82em;
  font-weight:700;
  color:#173c58;
}
.vb-floating-head button{
  border:none;
  border-radius:6px;
  width:26px;
  height:24px;
  background:#dfeaf3;
  color:#1c4665;
  cursor:pointer;
  font-size:1.05em;
  line-height:1;
  padding:0;
}
.vb-floating-head button:hover{
  background:#cbdcea;
}
.vb-floating-body{
  flex:1;
  overflow:auto;
  padding:10px;
}
.vb-floating-body h4{
  margin:10px 0 8px 0;
}
.vb-floating-body label{
  display:block;
  font-size:0.8em;
  font-weight:600;
  margin:8px 0 4px 0;
}
.vb-floating-body input,
.vb-floating-body select,
.vb-floating-body textarea{
  width:100%;
  border:1px solid #b7c7d4;
  border-radius:6px;
  padding:7px;
  font-size:0.85em;
  box-sizing:border-box;
}
.vb-dialog-actions{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.vb-dialog-actions button{
  border:none;
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  background:#0f6cae;
  color:#fff;
  font-size:0.82em;
}
.vb-floating-resize{
  position:absolute;
  right:0;
  bottom:0;
  width:18px;
  height:18px;
  border:none;
  background:linear-gradient(135deg, transparent 50%, #7897ae 50%);
  cursor:nwse-resize;
  padding:0;
}

html.dark-mode .vb-step-box{
  border-color:#4f5d6b;
  background:linear-gradient(180deg,#32414e,#2a3844);
}
html.dark-mode .vb-step-box-title{color:#9fb8cc;}
html.dark-mode .vb-node.sim-active{
  border-color:#4da8e0;
  box-shadow:0 0 0 2px rgba(77,168,224,0.28), 0 0 20px rgba(77,168,224,0.48);
}
html.dark-mode .vb-node.sim-done{border-color:#7c94a8;}
html.dark-mode .vb-node.sim-final{
  border-color:#38a773;
  box-shadow:0 0 0 2px rgba(56,167,115,0.32), 0 0 22px rgba(56,167,115,0.54);
}
html.dark-mode .er-sim-drop-card{
  border-color:#5f7a8f;
  background:rgba(28,39,50,0.7);
}
html.dark-mode .vb-step-title{color:#ecf3f9;}
html.dark-mode .vb-step-detail{color:#c7d6e3;}
html.dark-mode .vb-validation-nav{color:#9fb8cc;}
html.dark-mode .vb-validation-nav-btn{color:#7fc5ff;}
html.dark-mode .vb-validation-nav-btn:disabled{color:#71889a;}
html.dark-mode .vb-edge-list{
  background:#24303a;
  border-color:#556675;
}
html.dark-mode .vb-conn-row{border-bottom-color:#465565;}
html.dark-mode .vb-dialog-toggle-box{
  border-color:#4f5d6b;
  background:linear-gradient(180deg,#32414e,#2a3844);
}
html.dark-mode .vb-dialog-toggle-row button{
  background:#2f84ba;
}
html.dark-mode .vb-dialog-toggle-row button.active{
  background:#2f84ba;
}
html.dark-mode .vb-dialog-toggle-row button.stop-btn{
  background:#b87424;
}
html.dark-mode .vb-dialog-toggle-row button.stop-btn:hover{
  background:#cf8530;
}
html.dark-mode .vb-floating-dialog{
  background:#2b3540;
  border-color:#5b6b7b;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
}
html.dark-mode .vb-floating-head{
  background:linear-gradient(180deg,#3a4854,#33414d);
  border-bottom-color:#5b6b7b;
}
html.dark-mode .vb-floating-head span{color:#edf3f9;}
html.dark-mode .vb-floating-head button{
  background:#4a5d70;
  color:#edf3f9;
}
html.dark-mode .vb-floating-head button:hover{background:#5a6f83;}
html.dark-mode .vb-floating-body input,
html.dark-mode .vb-floating-body select,
html.dark-mode .vb-floating-body textarea{
  background:#25303b;
  color:#f1f4f8;
  border-color:#607181;
}
html.dark-mode .vb-dialog-actions button{background:#2f84ba;}
html.dark-mode .vb-floating-resize{
  background:linear-gradient(135deg, transparent 50%, #9ab2c4 50%);
}
html.dark-mode .vb-node.sim-current{
  border-color:#54f08f;
  box-shadow:0 0 0 6px rgba(84,240,143,0.28),0 0 32px rgba(84,240,143,0.52),0 8px 20px rgba(0,0,0,0.5);
}
html.dark-mode .vb-node.sim-current .vb-node-head{
  background:linear-gradient(180deg,#2f5a43,#2a4e3a);
  border-bottom-color:#5ba97b;
  color:#ecfff4;
}

@media (max-width: 1500px){
  .vb-top-boxes{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .vb-top-boxes{
    grid-template-columns:1fr;
  }
}

.vb-layout.canvas-fullscreen{
  grid-template-columns:minmax(0,1fr);
}
.vb-layout.canvas-fullscreen .vb-modules,
.vb-layout.canvas-fullscreen .vb-inspector{
  display:none;
}
.vb-layout.canvas-fullscreen .vb-canvas-wrap{
  min-height:calc(100vh - 260px);
}

.app-error-fallback {
  margin: 32px auto;
  max-width: 760px;
  padding: 20px;
  border: 1px solid #f2b8b5;
  border-radius: 10px;
  background: #fff5f4;
  color: #5f2120;
}

.app-error-fallback h2 {
  margin: 0 0 8px;
}

.app-error-fallback p {
  margin: 0 0 10px;
  line-height: 1.45;
}

.app-error-fallback pre {
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(95, 33, 32, 0.08);
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}


.tenant-api-page input,
.tenant-api-page select{
    width:100%;
    max-width:420px;
    margin-bottom:0.8em;
    padding:0.5em;
}

.tenant-api-page button{
    margin-top:0.35em;
}

.tenant-api-key-list,
.tenant-log-list{
    margin:0.8em 0 0;
    padding-left:1.1em;
}

.connector-result{
    margin-top:0.8em;
    padding:0.7em;
    border-radius:8px;
    background:#edf3f9;
    border:1px solid #d2dfec;
    overflow:auto;
}

html.dark-mode .connector-result{
    background:#132333;
    border-color:#39556f;
    color:#dce9f6;
}

.intro-tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,.1);backdrop-filter:blur(1px);z-index:20000}
.intro-tour-modal{width:min(420px,92vw);background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(248,251,255,.82));color:var(--text-color,#111);border:1px solid rgba(37,99,235,.16);border-radius:16px;padding:18px 18px 14px;box-shadow:0 20px 45px rgba(15,23,42,.18);position:fixed}
.intro-tour-arrow{position:absolute;width:0;height:0}
.intro-tour-arrow.top{left:calc(50% - 10px);bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(248,251,255,.86)}
.intro-tour-arrow.bottom{left:calc(50% - 10px);top:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(255,255,255,.86)}
.intro-tour-arrow.left{right:-10px;top:calc(50% - 10px);border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid rgba(255,255,255,.86)}
.intro-tour-arrow.right{left:-10px;top:calc(50% - 10px);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid rgba(255,255,255,.86)}
.intro-tour-arrow.up{left:calc(50% - 10px);bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(248,251,255,.86)}
.intro-tour-arrow.down{left:calc(50% - 10px);top:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(255,255,255,.86)}
.intro-tour-arrow.upLeft{left:18px;bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(248,251,255,.86)}
.intro-tour-arrow.upRight{right:18px;bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(248,251,255,.86)}
.intro-tour-arrow.downLeft{left:18px;top:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(255,255,255,.86)}
.intro-tour-arrow.downRight{right:18px;top:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(255,255,255,.86)}
.intro-tour-skip-link{position:absolute;top:10px;right:12px;border:none;background:transparent;color:var(--accent-color,#2563eb);cursor:pointer;text-decoration:underline;font-weight:600}
.intro-tour-step{opacity:.65;font-size:.85rem;margin-bottom:6px}
.intro-tour-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}