@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/static/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}


body {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
}
 
/* eNav */ 
.enav{
    position: sticky;
    background-color: #fff;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    padding: 8px 5px 12px 20px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
    overflow: hidden; /* Ensure shadow doesn't overflow */
    box-sizing: border-box;
    height: 105px;
    
}
.email-list-cover{
    overflow: hidden;
    display: block;
}
.emenu{
	height: 22px;
	margin-top: auto;
	margin-bottom: auto;
    left: 2px;
    position: absolute;
    padding-top: 2px;
    cursor: pointer;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.settingbtn{
    height: 18px;
    position: absolute !important;
    right: 2px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 5px;
    opacity: 0.4;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}
.settingbtn:hover{
	background-color: #EDEDE2;
	cursor: pointer;
}
.ehead{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
        padding: 5px 0 5px 0;
}

.ehead .hiai{
    padding-right: 10px;
    font-family: "Work Sans", sans-serif;
    position: relative;
    font-weight: 400;
    font-size: 26px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.ehead h2{
    margin-top: 5px;
    margin-bottom: 5px;
}
.search{
	position: relative;
  display: inline-block; 
	width: 100%;
}
.searchbar {
    padding-right: 30px; /* Space for the icon */
    height: 36px; /* Adjust height as needed */
    font-size: 16px; /* Adjust font size as needed */
    border: 1px solid #f1f1f1; /* Example border style */
    border-radius: 3px; /* Rounded corners */
    box-sizing: border-box; /* Ensure padding and border are included in width/height */
    transition: border-color 0.3s ease; /* Example transition for border color */
	padding-left: 10px;
	width: 100%;
	min-width: none;
	max-width: none;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

.searchbar::placeholder{
    color: #bbb;
}
.searchbar:focus{
    outline: 1px solid #ddd;
}
.searchicon {
    position: absolute;
    right: 3px; /* Adjust distance from the right edge */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Adjust to perfectly center vertically */
    width: 24px; /* Adjust icon size as needed */
    height: 24px; /* Adjust icon size as needed */
    fill: #999; /* Icon color */
    pointer-events: none; /* Ensure icon doesn't interfere with input focus */
    opacity: 0.3;
}
.search:focus-within .searchicon {
    opacity: 0.5;
}
.esearch{
	display: flex;
}
.refresh{
	height: 18px;
	margin-top: auto;
	margin-bottom: auto;
	padding-left: 8px;
	padding-right: 5px;
     cursor: pointer;
}

.container {
    display: flex;
    align-items: stretch; 
    max-width: min(95vw, 2700px);
    margin: 15px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
    overflow: hidden;
    position: relative;
}
.container-connect{
    display: flex;
    align-items: stretch; 
    max-width: min(95vw, 2700px);
    margin: 15px auto;
    background-color: #fff;
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
    overflow: hidden;
    position: relative;
}
.main-slider {
    display: grid;
    grid-template-columns: minmax(480px, 35%) minmax(0, 1fr);
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-panel {
    display: grid;
    grid-template-columns: 200px 1fr; /* Instead of 30% 70% */
}

.account-list {
    position: relative;
    width: 100%;
    max-height: 97vh;
    max-height: 97dvh;
    min-width: 200px;
}
.email-list {
    width: 99%;
    max-height: calc(100dvh - 30px);
    box-shadow: 1px 0 0 #EAEAEA;
    position: relative;
    overflow: hidden;
    border-left: 1px solid #EAEAEA;
}
.email-panel {
    flex: 1;
}
.email-panel.hideoverflow{
	position: relative;
	overflow: hidden;
}
.email-content-demo {
    display: flex;
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
    min-width: 0; 
    position: relative;
    flex: 1;
    overflow-y: auto; /* Use 'auto' instead of 'scroll' */
    scrollbar-width: thin; /* Modern browsers */
    scrollbar-color: transparent transparent; /* Modern browsers */
    background-color: #fff;
}


.resizer {
    width: 5px; /* Width of the resize handle */
    height: 100%;
    position: absolute;
    right: -3px;
    z-index: 30000;
    top: 0;
    cursor: ew-resize; /* Cursor style for resizing */
    background-color: transparent; /* Optional: for visual feedback */
}
/* new error states */
/* Empty State Styles */
.empty-state-container,
.error-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 40px 20px;
}

.empty-state,
.error-state {
    text-align: center;
    max-width: 400px;
}

.empty-email,
.error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.6;

}

.empty-state h3,
.error-state h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
}

.empty-state p,
.error-state p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.8;
}

.retry-btn {
    padding: 8px 16px;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.retry-btn:hover {
    opacity: 0.8;
}

/* Supporting elements */
#email-list-container {
  overflow: hidden;
  position: relative;
  height: 100%;
  background-color: #fff;
}

.email-list-content {
  box-sizing: border-box; /* padding-bottom must come out of the calc() height below, not add to it,
                              or the box overflows .email-list's clipped bottom edge by 10px and cuts
                              off the scrollbar when scrolled all the way down */
  overflow-y: auto;
  height: calc(100vh - 135px);
  height: calc(100dvh - 135px);
  padding-bottom: 10px;
  margin-left: 10px;
  border-right: 5px solid transparent;
  overflow-x: hidden;

}


.email-list-content {
    /* WebKit browsers (Safari, Chrome, Edge) */
    scrollbar-width: thin; /* "thin" is preferred for macOS-like appearance */
    scrollbar-color: #c1c1c1 transparent; /* thumb color and no track color */
}

.email-list-content::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.email-list-content::-webkit-scrollbar-track {
    background-color: transparent; /* No background color for track */
}

.email-list-content::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /* Thumb color */
    border-radius: 4px; /* Rounded corners */
    border: 2px solid transparent; /* Transparent border around the thumb */
}

.email-list-content::-webkit-scrollbar-thumb:hover {
    background-color: #a1a1a1; /* Thumb color on hover */
}
 

/* email items */
.email-item-container{
    border-top: 1px solid #e2e2e2e2;
    display: flex;
    flex-direction: column;

    transition: height 0.4s ease-out, opacity 0.3s ease-out;
    overflow: hidden;
}

.email-item-container.collapsing {
    opacity: 0;
    height: 0 !important;
    margin: 0;
    padding: 0;
    border: 0;
}
.email-item-container:first-child{
    border: none;

}

.email-item {
    margin: 0px 10px 0px 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-top: 1px solid #e2e2e2e2;
    position: relative;

}

.email-item:first-child{
    border: none;

}

.email-item:before {
    content: '';
    position: absolute;
    top: 51%;
    bottom: 51%;
    left: 0;
    width: 3px; /* Width of the border */
    background-color: rgba(16,163,127,1);; /* Same as active border color */
	 transition: top 0.3s ease, bottom 0.3s ease; 
}
.email-item.active:before {
    top: 20%; /* Move top position closer to the center */
    bottom: 20%; /* Move bottom position closer to the center */
}
.email-item.loader.first{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.email-item.loader{
    text-align: center;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    width: 100%;
}
.thread-subject{
    text-align: center;
    width: 80%;
    margin: auto;
    border-bottom: 1px solid #eee;
}
.email-navigation{
    display: none;
    width: 50%;
    position: fixed;
    right: 0px;
    height: 70px;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background-color: #fff;
    top: 0px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.inboxopen{
    height: 40px;
    position: absolute;
    left: 5px;
    top: 15px;
	cursor: pointer;
}
.email-controls {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.email-controls button{
    height: 25px;
    width: 25px;
    padding: 3px;
}
.email-navigation button{
    border: none;
    background-color: transparent;
}
.email-navigation .email-delete-btn{
    position: absolute;
    right: 25px;
    padding: 0;
    height: 20px;
    width: 20px;
}
.email-delete-btn img{
    height: 100%;
    
}

/* new */
.thread-full-content {
    transition: opacity 0.3s ease-out;
}

.email-iframe {
    transition: height 0.3s ease-out;
}

.thread-message.expanded .thread-full-content {
    opacity: 1;
}

.thread-message.collapsed .thread-full-content {
    opacity: 0;
}

.thread-message {
    transition: all 0.3s ease-out;
}
.email-item {
    position: relative;
    background: white;
    overflow: hidden;
}

.email-item-inner {
    position: relative;
    width: 100%;
    background: white;
    z-index: 1;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.delete-action {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background-color: #dc2626;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-item.swiped .email-item-inner {
    transform: translateX(-100px);
}

.email-item.swiped .delete-action {
    transform: translateX(0);
}

.email-dropdown {
    position: absolute;
    top: 100%;
    max-width: 250px;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 99999;
    display: none;
    overflow: hidden;
}

.contact-item {
    padding: 12px 16px;
    cursor: pointer;
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f3f4f6;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item:hover {
    background: #f8fafc;
}

.contact-item.selected {
    background: #eff6ff;
    color: #1d4ed8;
}
/* UNDO */
      .email-item.loader{
          display: none;
      }
      #email-list-container{
            overflow: hidden; /* Hide the default scrollbar of email-list */
            position: relative;
          height: 100%;
      }
  .email-body.plain-text {
    white-space: pre-wrap;
    font-family: monospace;
    padding: 1em;
    line-height: 1.5;
    max-width: 80ch;
}
      
      .refresh {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.refresh.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
      
      
.undo-popup-notification {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #374151;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    transition: top 0.3s ease-out;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    max-width: 400px;
    box-sizing: border-box;
}

.undo-popup-notification.undo-popup-show {
    top: 20px;
}

.undo-popup-text {
    flex: 1;
    text-align: center;
    padding-right: 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.undo-popup-shortcut-key {
    background: #f3f4f6;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    margin: 0 2px;
    box-sizing: border-box;
}

.undo-popup-close-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    box-sizing: border-box;
}

.undo-popup-close-btn:hover {
    color: #9ca3af;
    opacity: 1;
}

/* Network Error Popup Notification */
.network-error-popup {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fef2f2;
    color: #991b1b;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    transition: top 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
    max-width: 90%;
    border: 1px solid #fecaca;
}

.network-error-popup.network-error-popup-show {
    top: 20px;
}

.network-error-popup-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.network-error-popup-icon svg {
    width: 100%;
    height: 100%;
}

.network-error-popup-message {
    flex-grow: 1;
    line-height: 1.4;
}

.network-error-popup-close-btn {
    background: none;
    border: none;
    color: #991b1b;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.6;
    box-sizing: border-box;
}

.network-error-popup-close-btn:hover {
    color: #7f1d1d;
    opacity: 1;
}

.tab-arrow {
  fill: white;
  stroke: #eee;
  stroke-width: 1;
  /* Removed horizontal offset (0) to make shadow uniform on all sides */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}
.tab-text{
    font-size: 17px;
	font-weight: 500;
	position: relative;
}

.thread-subject h2{
    margin: 10px 0 10px 0;
       flex-grow: 1;
}
.thread-messages{
     transition: height 0.3s ease-out;
    overflow: hidden;
    display: none;
}
.thread-messages .thread-message{
    margin: 5px 0px 5px 0px;
    padding: 10px 10px 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    position: relative;
    background-color: #F0F8FF;
}
.thread-messages .thread-message:first-child{
    margin-top: 0;
}
.thread-messages .thread-message:last-child{
    margin-bottom: 10px;
}
.thread-messages .thread-message.active{
    background-color: #CFE7F8;
}
.lds-loader {
  /* change color here */
  color: #1c4c5b
}
.lds-loader,
.lds-loader div {
  box-sizing: border-box;
}
.lds-loader {
    
  display: inline-block;
  position: relative;
  width: 80px;
  height: 50px;
}
.lds-loader div {
  display: inline-block;
  width: 10px;
  background: currentColor;
  animation: lds-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-loader div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-loader div:nth-child(2) {
  left: 25px;
  animation-delay: -0.12s;
}
.lds-loader div:nth-child(3) {
  left: 42px;
  animation-delay: 0s;
}
@keyframes lds-loader {
  0% {
    top: 8px;
    height: 50px;
  }
  50%, 100% {
    top: 24px;
    height: 20px;
  }
}


/* Loading Bar */
.loadingbar {
    height: 4px;
    width: 130px;
    --c: no-repeat linear-gradient(#007bff 0 0);
    background: var(--c), var(--c), #cce5ff;
    background-size: 60% 100%;
    animation: loadingbar 2s infinite;
    border-radius: 4px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes loadingbar {
    0%   { background-position: -150% 0, -150% 0 }
    66%  { background-position: 250% 0, -150% 0 }
    100% { background-position: 250% 0, 250% 0 }
}

/* Email CONTENT */
/* Styles for the email header */
/* Change avatar-cell to profile-cell */
.profile-cell {
    width: 65px;
    padding: 15px 0 15px 15px;
}

/* Email hover functionality */
.email-hover {
    display: inline-block;
    position: relative;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
    padding-left: 3px;
    padding-right: 3px;
    left: -3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-hover:hover, .email-hover.active {
    background-color: #f3f4f6;
    box-shadow: 0 0 0 4px #f3f4f6;
}
.email-hover .dropdown-arrow {
    display: none;
    margin-left: 4px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    cursor: pointer;
}
.email-hover:hover .dropdown-arrow, .email-hover.active .dropdown-arrow {
    display: inline-block;
}

/* Updated Dropdown */
.more-email-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.11);
    overflow: hidden;
    margin-top: 6px;
    min-width: 180px;
    z-index: 1000;
    display: none;
}
.more-email-dropdown.show {
    display: block;
}
.email-dropdown-item {
    padding: 13px 17px 13px 35px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
}
.email-dropdown-item:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #f1f3f4;
    border-radius: 1px;
}
.email-dropdown-item:hover {
    background: #f7f8f9;
}

/* Icons via CSS */
.email-dropdown-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.8;
    background-size: contain;
    background-repeat: no-repeat;
}

.email-dropdown-item:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.email-dropdown-item:last-child::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}
.email-header {
    padding: 10px 10px 10px 0px;
    border-radius: 5px;
}

.sender-info{
    flex:1
}

.sender-email{
    color:#999;font-size:14px;font-weight:400;margin:2px 0 0 0
}
.profile-pic{
    height: 50px;
    margin-right: 15px;
}
.email-subject {
    font-size: 18px;
    font-weight: 500;
    margin: 12px 0 8px 0;
}
.to-row {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #666;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
}

.to-label {
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 3px;
    letter-spacing: 0.5px;
     white-space: nowrap;
    flex-shrink: 0;
}
.enquiry-header {
  color: #333;
  font-size: 1.2rem;
  margin: 0rem 0;
  padding: 0.5rem 0;
}

.recipient-header {
  color: #666;
  font-size: 1rem;
  margin: 0.5rem 0;
  font-weight: normal;
}

.sender-header {
  color: #666;
  font-size: 1rem;
  margin: 0.5rem 0;
  font-weight: normal;
}
.email-address {
  color: #2563eb;
}

.email-recipient {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}
.email-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.email-table tr:first-child td:last-child {
    position: relative;
    text-align: right;
}
.email-table td {
    padding: 0px;
    vertical-align: top;
}

.email-inbox {
    color: #666;
    font-size: 14px;
}

.email-date-time {
    color: #999;
    font-size: 12px;
}
.email-date-time-mobile {
    color: #999;
    font-size: 12px;
}

/* Fixed column widths */
.inbox-cell {
    width: 280px;
    white-space: nowrap;
    text-align: right;
}

.date-cell {
    width: 1px; /* Forces minimal width */
    white-space: nowrap; /* Prevents text wrapping */
    text-align: right;
}

.name-cell,
.email-cell {
    width: auto; /* Takes remaining space */
}

/* Text truncation with ellipsis */
.name-cell h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Note: .sender-email, .email-hover, and .to-row don't have overflow:hidden 
   to allow the .more-email-dropdown to display properly */

/* Add spacing from meta section */
.name-cell {
    padding-right: 20px;
}

.to-cell {
    padding-right: 20px;
}

.inboxsvg {
    width: 16px; /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    vertical-align: middle;
    margin-right: 5px;
}

.email-header h2 {
    font-size: 20px;
    margin: 0;
}

.email-item {
    position: relative;
    background: white;

}

.email-item-inner {
    position: relative;
    width: 100%;
    background: white;
    z-index: 1;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    right: 10px;
    padding-left: 5px;
}

.delete-action {
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 3px;
    width: 100px;
    background-color: #ff453a;
    color: white;
    display: flex;
    align-items:center;
    flex-direction: column;
    justify-content:center;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 12px;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 3px;
    font-family: arial;
    gap: 3px;
}

.delete-action:before{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" width="800" height="800" viewBox="0 0 512 512" xmlns:v="https://vecta.io/nano"><path d="M447.55,96H336V48a16,16,0,0,0-16-16H192a16,16,0,0,0-16,16V96H64.45L64,136H97l20.09,314A32,32,0,0,0,149,480H363a32,32,0,0,0,31.93-29.95L415,136h33ZM176,416l-9-256h33l9,256Zm96,0H240V160h32ZM296,96H216V68a4,4,0,0,1,4-4h72a4,4,0,0,1,4,4Zm40,320H303l9-256h33Z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    width: 20px;
    height: 20px;
}
.email-item.swiped .email-item-inner {
    transform: translateX(-100px);
}

.email-item.swiped .delete-action {
    transform: translateX(0);
}
/* TOGGLE HTML - PLAIN TEXT */
.format-toggle {
    display: flex;
    justify-content: flex-end;
    align-items:center;
    padding: 0px;
    margin-bottom: 10px;
    
}
.format-toggle:before{
    content: '';
    width: calc(100% - 110px);
    height: 1px;
    background-color: #e2e8f0;
    margin-right: auto;
}


.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
    min-width: 100px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 24px;  /* Reduced from 48px */
    height: 12px; /* Reduced from 24px */
    background-color: #e0e0e0;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    height: 8px;  /* Reduced from 20px */
    width: 8px;   /* Reduced from 20px */
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4285f4;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(12px); /* Reduced from 24px */
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 1px #4285f4;
}

.toggle-label {
    margin-left: 6px;  /* Reduced from 10px */
    font-size: 12px;   /* Reduced from 14px */
    color: #5f6368;
    user-select: none;
}


select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

/* Hover effects */
.toggle-switch:hover .toggle-slider {
    background-color: #d0d0d0;
}

.toggle-switch:hover input:checked + .toggle-slider {
    background-color: #3367d6;
}

/* Active/pressed state */
.toggle-switch:active .toggle-slider:before {
    width: 14px;   /* Reduced from 24px */
    transform: translateX(-2px);
}

.toggle-switch:active input:checked + .toggle-slider:before {
    transform: translateX(10px); /* Adjusted for new size */
}

/* Disabled state if needed */
.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Optional: Animation for smooth transition */
@keyframes toggleOn {
    0% { transform: translateX(0); }
    50% { transform: translateX(14px); }
    100% { transform: translateX(12px); }
}

@keyframes toggleOff {
    0% { transform: translateX(12px); }
    50% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.toggle-switch input:checked + .toggle-slider:before {
    animation: toggleOn 0.3s ease forwards;
}

.toggle-switch input:not(:checked) + .toggle-slider:before {
    animation: toggleOff 0.3s ease forwards;
}


.quoted-content {
    position: relative;
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #e0e0e0;
    display: block;
}

.quoted-content.collapsed {
    cursor: pointer;
}

.expand-collapse {
    color: #666;
    font-size: 14px;
    padding: 5px 0;
}

.quoted-content.collapsed:hover .expand-collapse {
    color: #1a73e8;
}

.quoted-text {
    margin-top: 10px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
}

.thread-message-email {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
    transition: all 0.2s ease;
}

.thread-message-email.collapsed {
    cursor: pointer;
    background: #f5f5f5;
    max-height: 64px;
    overflow: hidden;
    position: relative;
}

.thread-message-email.collapsed:hover {
    background: #eee;
}

.thread-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.thread-preview .profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.thread-preview-content {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #202124;
    font-size: 14px;
    margin-bottom: 4px;
}

.thread-preview-header .sender-name {
    font-weight: 500;
}

.thread-preview-header .date {
    color: #5f6368;
    font-size: 12px;
}

.thread-preview-snippet {
    color: #5f6368;
    font-size: 13px;
}

.thread-message-email.expanded {
    background: #fff;
    border: 1px solid #dadce0;
    padding: 20px;
}

.thread-actions {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.thread-message-email:hover .thread-actions {
    display: flex;
    gap: 8px;
}



/* Most recent message styles */
.most-recent {
    background: #fff;
    border: 1px solid #dadce0;
    padding: 20px;
    margin-top: 16px;
}

.email-content {
    position: relative;
    flex: 1;
	height: calc(100vh - 30px);
	height: calc(100dvh - 30px);
    overflow-y: auto; /* Use 'auto' instead of 'scroll' */
    scrollbar-width: thin; /* Modern browsers */
    scrollbar-color: transparent transparent; /* Modern browsers */
    background-color: #fff;
}
#democontainer{

    position: relative;
    border-radius: 10px;
}

.email-demo-container {
    width: 100%;
    min-width: 0; 
}
.thread-container{
    position: relative;
    padding: 20px;
}
.email-container-full{
    position: relative;
    cursor: pointer;
    background: white;
    border: 1px solid #eef1f5;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 14px 24px;
    margin: 20px 0;
}

.email-container-full:focus {
    outline: none;
    border-color: #e5e8ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.delete-email-btn{
    cursor: pointer;
    background: none;
    border: none;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0.2;
    padding: 0;
}
.delete-email-btn:hover{
    opacity: 1;
}
.email-trash-icon{
    height: 14px;
    opacity: 0.5;
}
/* recent only */
.recent-only-checkbox {
  position: absolute;
  right: 25px;
  top: 6px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.recent-only-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border: 1.2px solid #e0e0e0;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 0;
}

.recent-only-checkbox input[type="checkbox"]:checked {
  border-color: #22c55e;
}

.recent-only-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  width: 2.5px;
  height: 5.5px;
  border: solid #22c55e;
  border-width: 0 1px 1px 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
}

.recent-only-checkbox input[type="checkbox"]:hover {
  border-color: #bbb;
}
/* For clicked/selected state */
.email-container-full.selected {
    border-color: #e5e8ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
	.inboxsvg{
	height: 20px;
	}
    .email-body {
        width: 100%;
        line-height: 1.6;
        border: none;
    }
    .email-body p {
        margin: 0 0 10px;
    }
    .email-body a {
        color: #007bff;
        text-decoration: none;
    }
    .email-body a:hover {
        text-decoration: underline;
    }

	.datetime{
		float: right;
		font-weight: 400;
		font-size: 10px;
        display: flex;
        align-items: center;
        height: 21px;
        display: flex;
        gap: 3px;
	}



.show-more-messages{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.show-more-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    height: 35px;
    width: 35px;
    padding: 0;
    background-color: #fff;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgb(218, 220, 224);
    color: #5f6368;
    position: relative;
    cursor: pointer;
    padding-left: 4px;
}

.show-more-btn::after{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" xmlns:v="https://vecta.io/nano"><path d="M99.9 28.5L60.5 67.7l-3.2 3.2c-4.8 4.8-9.7 5.3-13.5 1.5-3.5-3.6-3-8.6 1.5-13.2l19.1-19.1 28.3-28.3c5-5 9.3-5.1 14.2-.1l47.7 47.7c4.4 4.4 4.8 9.6 1.1 13.2s-8.5 3.1-13.1-1.5l-38.8-38.9c-1.2-1.2-2.4-2.3-3.8-3.6zm43.5 99.6c4-4 8.9-4.2 12.4-.8 3.4 3.4 3.4 8.5-.5 12.5l-48.8 48.8c-4.4 4.3-8.7 4.3-13.1-.1L44.9 140c-4.1-4.2-4.3-9.4-.6-12.8 3.6-3.3 8.3-3.1 12.4 1l44 43.8"/></svg>');
    height: 10px;
    width: 7px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.8;
}

.show-more-messages::after{
    content: '';
    position: absolute;
    right: 0;
    border-top: 1px solid rgba(100,121,143,0.12);
    border-bottom: 1px solid rgba(100,121,143,0.12);
    height: 4px;
    width: 100%;
}
.email-body iframe {
    width: 100%;
    border: none;
    flex: 1;
}

/* Add this class to your .match-marker */
.match-marker {
    height: 5px;
    width: 5px;
    position: absolute;
    background-color: #22c55e;
    border: none;
    border-radius: 5px;
    top: 7px;
    transform: translateX(4px);
    animation: radarPulseWithPause 4s ease-out infinite; /* Longer cycle to include pause */
}

@keyframes radarPulseWithPause {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
        transform: translateX(4px) scale(1);
    }
    25% { /* Pulse completes at 25% of cycle */
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
        transform: translateX(4px) scale(1.1);
    }
    26%, 100% { /* Pause from 26% to 100% of cycle */
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        transform: translateX(4px) scale(1);
    }
}

/* Add webkit prefixes for better browser support */
@-webkit-keyframes radarPulseWithPause {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
        -webkit-transform: translateX(4px) scale(1);
        transform: translateX(4px) scale(1);
    }
    25% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
        -webkit-transform: translateX(4px) scale(1.1);
        transform: translateX(4px) scale(1.1);
    }
    26%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        -webkit-transform: translateX(4px) scale(1);
        transform: translateX(4px) scale(1);
    }
}

.unanswered-marker{
    height: 4px;
    width: 4px;
    background-color: #0066CC;
    border: none;
    border-radius: 5px;
    top: 7px;
}
.from.unread{
    font-weight: 700 !important;
}
.subject.unread{
    font-weight: 600 !important;
}
.body.unread{
    font-weight: 600 !important;
}
.from{
	font-size: 16px;
	font-weight: 600;
    position: relative;
}
.from.hasreply::before{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.2 26.2" xmlns:v="https://vecta.io/nano"><path d="M.3 11.9c.1-.2.3-.4.4-.5 2.8-3 5.9-5.7 8.8-8.6.1-.1.3-.3.5-.3.5 0 .9.3.9.8v4.2.3h1.2a14.5 14.5 0 0 1 8.4 3.6c2.8 2.4 4.5 5.4 5.1 9 .1.8.2 1.7.2 2.5 0 .4-.2.8-.6.9-.4 0-.7 0-.9-.4-1.6-2.9-3.9-4.9-7-6.1-1.6-.6-3.2-.9-4.9-.9h-1.6v.3 4.2c0 .6-.5 1-1 .8a.76.76 0 0 1-.4-.2c-1.6-1.5-3.1-3-4.7-4.6L.6 13c-.2-.2-.3-.4-.5-.6v-.5z" fill="%232196f2"/></svg>');
    height: 20px;
    width: 20px;
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: -20px;
    opacity: 0.8;
}
.email-item .from {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap; /* Ensure subject stays in one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if subject overflows */
    height: 21px;
}
.thread-message .to{
	font-size: 16px;
	font-weight: 600;
    position: relative;
}
.thread-message .to.hasreply::before{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.2 26.2" xmlns:v="https://vecta.io/nano"><path d="M.3 11.9c.1-.2.3-.4.4-.5 2.8-3 5.9-5.7 8.8-8.6.1-.1.3-.3.5-.3.5 0 .9.3.9.8v4.2.3h1.2a14.5 14.5 0 0 1 8.4 3.6c2.8 2.4 4.5 5.4 5.1 9 .1.8.2 1.7.2 2.5 0 .4-.2.8-.6.9-.4 0-.7 0-.9-.4-1.6-2.9-3.9-4.9-7-6.1-1.6-.6-3.2-.9-4.9-.9h-1.6v.3 4.2c0 .6-.5 1-1 .8a.76.76 0 0 1-.4-.2c-1.6-1.5-3.1-3-4.7-4.6L.6 13c-.2-.2-.3-.4-.5-.6v-.5z" fill="%232196f2"/></svg>');
    height: 20px;
    width: 20px;
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: -20px;
    opacity: 0.8;
}
.email-item .to {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap; /* Ensure subject stays in one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if subject overflows */
    height: 21px;
}

.email-item .subject-container{
    display: flex;
      align-items: center;
    height: 17px;
}
.email-item .subject {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap; /* Ensure subject stays in one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if subject overflows */
    width: 100%;
}

.email-item .body {
    font-size: 12px;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    -webkit-font-smoothing: antialiased;
    letter-spacing: normal;
    font-feature-settings: "kern" 1;
}

.thread-message .body{
    width: 100%;            
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-count{
    color: #2563eb;
    font-size: 8px;
    text-align: center;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    transition: 0.3s ease;
    align-self: flex-end;
    margin-left: auto; 
}

.thread-count.expanded::after{
    transform: rotate(90deg);
}
.thread-count::after{
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" standalone="no"%3F><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 9.5L13.5 12L11 14.5" stroke="%232563eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style=""/><path d="M15.0496 3.35288C17.827 4.00437 19.9956 6.17301 20.6471 8.95043C21.1176 10.9563 21.1176 13.0437 20.6471 15.0496C19.9956 17.827 17.827 19.9956 15.0496 20.6471C13.0437 21.1176 10.9563 21.1176 8.95044 20.6471C6.17301 19.9956 4.00437 17.827 3.35288 15.0496C2.88237 13.0437 2.88237 10.9563 3.35288 8.95044C4.00437 6.17301 6.173 4.00437 8.95043 3.35288C10.9563 2.88237 13.0437 2.88237 15.0496 3.35288Z" stroke="%232563eb" stroke-width="1.5" style=""/><path d="M15.0496 3.35288C13.0437 2.88237 10.9563 2.88237 8.95043 3.35288C6.173 4.00437 4.00437 6.17301 3.35288 8.95044C2.88237 10.9563 2.88237 13.0437 3.35288 15.0496C4.00437 17.827 6.17301 19.9956 8.95044 20.6471C10.9563 21.1176 13.0437 21.1176 15.0496 20.6471C17.827 19.9956 19.9956 17.827 20.6471 15.0496" stroke="%232563eb" stroke-width="1.5" stroke-linecap="round" style=""/></svg>');
    background-size: 15px;
    background-position: center 2px;
    background-repeat: no-repeat;
    
}

.attachment-icon { /* Adjust space between text and icon */
    width: 55px; /* Adjust size as needed */
    height: 15px; /* Adjust size as needed */   
    background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 280.067 280.067" xml:space="preserve" fill="%2314a185" stroke="%2314a185"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><g><path style="fill:%2314a185;" d="M149.823,257.142c-31.398,30.698-81.882,30.576-113.105-0.429 c-31.214-30.987-31.337-81.129-0.42-112.308l-0.026-0.018L149.841,31.615l14.203-14.098c23.522-23.356,61.65-23.356,85.172,0 s23.522,61.221,0,84.586l-125.19,123.02l-0.044-0.035c-15.428,14.771-40.018,14.666-55.262-0.394 c-15.244-15.069-15.34-39.361-0.394-54.588l-0.044-0.053l13.94-13.756l69.701-68.843l13.931,13.774l-83.632,82.599 c-7.701,7.596-7.701,19.926,0,27.53s20.188,7.604,27.88,0L235.02,87.987l-0.035-0.026l0.473-0.403 c15.682-15.568,15.682-40.823,0-56.39s-41.094-15.568-56.776,0l-0.42,0.473l-0.026-0.018l-14.194,14.089L50.466,158.485 c-23.522,23.356-23.522,61.221,0,84.577s61.659,23.356,85.163,0l99.375-98.675l14.194-14.089l14.194,14.089l-14.194,14.098 l-99.357,98.675C149.841,257.159,149.823,257.142,149.823,257.142z"/></g></g></svg>');
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    align-self: flex-end;
    margin-bottom: 2px;
    margin-right: 3px;
    margin-left: auto;
}

.body{
	font-size: 12px;
}

.voice-input-container {
    position: relative;
    margin-bottom: 20px;
}
.addnotes {
    background-color: #ffffff;
    color: #666666;
    padding: 1em;
    margin: 2px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0 1px #e8e9e8;
    font-weight: 500;
    height: 125px;
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    min-height: 0px;
    box-sizing: border-box;
    resize: none;
    transition: height 0.2s;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
    -webkit-appearance: none; /* Critical for iOS Safari to render custom styles properly */
    -moz-appearance: none;
    appearance: none;
}

/* Webkit browsers scrollbar */
.addnotes::-webkit-scrollbar {
    width: 4px;
}

.addnotes::-webkit-scrollbar-track {
    background: transparent;
}

.addnotes::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

.addnotes::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

.addnotes.sticky {
    border-bottom: 40px solid #ffffff !important;
}

.addnotes:focus {
    cursor: text;
    color: #333333;
    background-color: white;
    box-shadow: 0 0 0 1px #e1e3e1;
    outline: none; /* Remove default outline */
}

.addnotes::placeholder {
    transform: translateY(20px);
    text-align: center;
    color: #8e8ea0;
    font-style: italic;
    font-size: 16px;
}

.composer-btn {
    background: transparent;
    border: none;
    color: #8e8ea0;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.composer-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ececec;
}
.composer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.voice-record-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
}
.voice-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: none;
    align-items: center;
    gap: 6px;
}
.voice-controls.active {
    display: flex;
}
.voice-visualizer {
    width: 100%;
    height: 32px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin: 16px 0;
    display: none;
}
.voice-visualizer.active {
    display: block;
}
.flex {
    display: flex;
}
.gap-x-1\.5 {
    gap: 6px;
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.icon {
    width: 20px;
    height: 20px;
}

.voice-status {
    margin-bottom: 12px;
    font-size: 14px;
    color: #8e8ea0;
    text-align: center;
}
.error {
    color: #ff6b6b;
}
.loadcontenterror{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.success {
    color: #10a37f;
}
.empty-inbox {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
}

.empty-icon {
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

.empty-inbox h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 500;
}

.empty-inbox p {
    margin: 0;
    font-size: 14px;
    opacity: 0.7;
}

/*STICKY*/

        .sticky-container {
     
            max-width: 400px;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .header h3 {
            margin: 0;
            font-size: 22px;
        }
        
        .add-sticky-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #475569;
            background: #fdfdfe;
            border: 1px solid #e2e8f0;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 400;
            transition: all 0.2s;
        }

        .add-sticky-btn:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #334155;
        }

        .add-sticky-btn:disabled {
            background: #f1f5f9;
            color: #94a3b8;
            cursor: not-allowed;
        }
        .add-sticky-btn:disabled .svg-plus{
             stroke: #94a3b8;
        }
        
        .svg-plus {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: #333;
            stroke-width: 2;
        }
        
        .sticky-notes-container {
            position: relative;
            min-height: 200px;
            width: 100%;
        }

        .sticky-note {
            position: absolute;
            width: 250px;
            height: 150px;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            box-sizing: border-box;
        }
        
        .sticky-container p {
                color: #6b7280;
                font-size: 13px;
            text-align: center;
                line-height: 1.6;
                margin-bottom: 0;
                font-weight: 400;
            }

        .sticky-note:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        /* Color themes */
        .sticky-note.color-0 {
            border: 1px solid #ff6b6b;
            background: #ffe0e0;
        }

        .sticky-note.color-1 {
            border: 1px solid #4ecdc4;
            background: #e0f7f5;
        }

        .sticky-note.color-2 {
            border: 1px solid #45b7d1;
            background: #e0f3ff;
        }

        .sticky-note.color-3 {
            border: 1px solid #9b59b6;
            background: #f4e6ff;
        }

        .sticky-note.color-4 {
            border: 1px solid #feca57;
            background: #fff4d6;
        }

        .sticky-note-content {
            width: 100%;
            height: 100px;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.4;
            resize: none;
            outline: none;
            /* Modern browsers scrollbar */
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.2) transparent;
        }

        /* Webkit browsers scrollbar */
        .sticky-note-content::-webkit-scrollbar {
            width: 4px;
        }

        .sticky-note-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .sticky-note-content::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 2px;
        }

        .sticky-note-content::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.3);
        }

        .char-counter {
            position: absolute;
            bottom: 8px;
            right: 8px;
            font-size: 11px;
            color: #999;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }

        .char-counter.at-limit {
            font-weight: bold;
            color: #666;
        }

        .sticky-note.focused .char-counter {
            opacity: 1;
        }

        .sticky-note-actions {
            position: absolute;
            top: 2px;
            right: 4px;
            transition: opacity 0.2s;
        }
        
        .sticky-note .delete-sticky-btn {
            opacity: 0;
            transition: opacity 0.2s;
        }

        .sticky-note.focused .delete-sticky-btn {
            opacity: 1;
        }

        .delete-sticky-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            padding: 2px;
        }

        .empty-sticky-state {
            text-align: center;
            color: #666;
            font-style: italic;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 90%;
            transform: translate(-50%, -50%);
        }
        .sticky-actions{
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sticky-note-count {
            color: #666;
            font-size: 13px;
        }

        /* Sticky Notes Selector Inside Textarea */
        .sticky-selector {
            position: absolute;
            bottom: 8px;
            left: 8px;
            right: 50px;
            background: transparent;
            border-radius: 6px;
            padding: 6px 8px;
            display: none;
            align-items: center;
            gap: 6px;
            opacity: 0;
            transform: translateY(5px);
            transition: all 0.2s ease;
            z-index: 10;
            backdrop-filter: blur(2px);
        }

        .sticky-selector-label {
            font-size: 10px;
            color: #666;
            font-weight: 500;
            white-space: nowrap;
        }

        .sticky-mini-notes {
            display: flex;
            gap: 4px;
            align-items: center;
            flex: 1;
        }

        .sticky-mini-notes::-webkit-scrollbar {
            display: none;
        }

        .sticky-mini-note {
            min-width: 50px;
            height: 24px;
            border-radius: 3px;
            border: 1px solid;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 500;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .sticky-mini-note:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .sticky-mini-note-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 3px;
        }

        /* Colors */
        .sticky-mini-note.color-0 {
            border-color: #ff6b6b;
            background: #ffe0e0;
            color: #c92a2a;
        }

        .sticky-mini-note.color-1 {
            border-color: #4ecdc4;
            background: #e0f7f5;
            color: #0b7266;
        }

        .sticky-mini-note.color-2 {
            border-color: #45b7d1;
            background: #e0f3ff;
            color: #1c7293;
        }

        .sticky-mini-note.color-3 {
            border-color: #9b59b6;
            background: #f4e6ff;
            color: #7B1DA8;
        }

        .sticky-mini-note.color-4 {
            border-color: #feca57;
            background: #fff4d6;
            color: #c49000;
        }


/* ATTACHMENTS */
/* Add this CSS with unique class names */

.email-attachments-wrapper {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    margin: 12px 0;
}

.email-attach-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 8px;
}

.email-attach-header svg {
    color: #6c757d;
}

.email-attach-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.email-file-icon {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 3px;
    flex-shrink: 0;
}

.email-file-details {
    flex: 1;
}

.email-file-title {
    font-size: 14px;
    color: #212529;
    font-weight: 500;
    line-height: 1.3;
}

.email-file-bytes {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

/* Attachment cards that open/download the file (AttachmentCards.php) */
a.email-file-card {
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}

a.email-file-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.email-file-details {
    min-width: 0;
}

.email-file-title {
    overflow-wrap: anywhere;
}

.email-file-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--border);
    flex-shrink: 0;
}

/* "Include attachments in AI reply" checkbox above the generate buttons */
.email-content label.ai-attach-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: auto;
    margin: var(--space-1) 0;
    padding: 0;
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.email-content label.ai-attach-toggle input {
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}


.generateresponse {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between lines and text */
    margin: 0 auto;
    font-size: 24px;
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 10px 0;
}

.generateresponse::before,
.generateresponse::after {
    content: '';
    flex: 1; /* Lines will grow to fill available space */
    height: 1px;
    background-color: #e2e2e2;
}

.otherways{
	    -webkit-box-orient: horizontal;
    flex-direction: row;
	    color: #aaa;
	position: relative;
	display: flex;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	font-weight: 200;
    margin-top: 20px;
    margin-bottom: 20px;
}
.otherways::after{
	
	content: "";
    display: block;
	margin-left: 1rem;
    width: 4rem;
    border-top: 1px solid #dfdfdf;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
.otherways::before{
	    content: "";
    display: block;
    width: 4rem;
	margin-right: 1rem;
    border-top: 1px solid #dfdfdf;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

.accountinfo{
    margin-top: 10px;
      text-align: center;
    border: 1px solid transparent;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-left: 10px;
    position: relative;
    padding: 12px;
    cursor: move;
}
.accountinfo:nth-child(2){
    margin-top: 0;

}

.accountinfo p4{
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.remove-account{
    background-color: transparent;
    border: none;
    height: 13px;
    padding: 0px;
    position: absolute;
    right: 7px;
    top: 10px;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
     transition: 0.1s opacity;
}

#accounts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accountinfo:active {
    cursor: grabbing;
}

.drag-ghost {
    opacity: 0.4;
}


.unopen-badge {
    position: absolute;
    right: 5px;
    font-size: 0.7em;
    color: #aaa;
    padding: 2px 2px;
    background-color: transparent;
    border: 1px solid transparent;     
    border-radius: 3px;    
    font-weight: 300;
}
.folders.active .unopen-badge {
    color: #333;                
    background-color: #e5e4fb;  
    border: 1px solid #e5e0fb;     
    border-radius: 3px;
    font-weight: 400;
}

.accountinfo:hover .remove-account {
    visibility: visible;
    opacity: 1;
    transition: 0.2s opacity;
}

.acctrash{
    height: 13px;
    margin: auto;
    opacity: 0.5;
    user-select: none; /* Prevent text selection */
    -webkit-user-drag: none; /* For Safari */
}
.acctrash:hover{
    opacity: 1;
}
.folders{
    height: 28px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    width: 100%;
    margin: 10px auto auto auto;
    border: 1px solid transparent;
    border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-decoration: none;
}
.folders a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    margin: auto;
    text-align: left;
    gap: 5px;
    min-width: 75px;
}

.folders a[data-lang="fr"]:has(.unopen-badge),
.folders a[data-lang="es"]:has(.unopen-badge),
.folders a[data-lang="pt"]:has(.unopen-badge) {
    font-size: 11px;
}
.accountinfo:has(.unopen-badge) .folders a {
    padding-right: 15px;
}
.folders a[data-lang="fr"],
.folders a[data-lang="es"],
.folders a[data-lang="pt"] {
    font-size: 12px;
}
.folders:hover{
    cursor: pointer;
}
.folders.active{
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.folders img{
    height: 20px;
}

.addaccount[data-lang="ru"]{
    margin-top: 10px;
   font-size: 10px;
}
.addaccount[data-lang="ru"] .addsvg{
    height: 14px;
}
.addaccount{
    margin-top: 20px;
    font-size: 13px;
    letter-spacing: 1.5px;
}
.addaccount div{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 95%;
    margin: auto;
    cursor: pointer;
}
.addsvg{
    height: 20px;
    margin-right: 7px;
     
}
/* help */
.get-help{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    opacity: 0.3;
    font-size: 12px;        
    cursor: pointer;
    text-transform: lowercase;
}
/* Accounts */
.myaccount{
    height: 100px;
}
.myaccount span{
    display: flex;
        align-items: center;
    justify-content: center;
    column-gap: 7px;

    padding: 4px 0;
    width: 70%;
    margin: 5px 15%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.myaccount span:hover{
    background-color: rgb(249 250 251 / 1);
}
.accountcrcl{
    min-height: 27px;
    min-width: 27px;
    color: #fefefe;
    background-color: #9f50b7;
    border: 2px solid #fffbff;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: arial;
    font-weight: 400;
	z-index: 1;
}
.accountcrcl img{
    height: 27px;
    width: 27px;
    border: 1px solid #fffbff;
    border-radius: 50%;
}
.ms-2{
    height: 15px;
}
.signout{
    padding: 10px 10px 10px 10px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
	border: none;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
    cursor: pointer;
    color: #1a1a1a;
}
.signoutimg{
    height: 10px;
    transform: rotate(180deg);
    padding-left: 8px;
}
@media(max-width: 600px) {
    
}
@media(max-width: 1550px) {
    .addaccount{
        font-size: 11px;
    }
}
@media(max-width: 1150px) {
    .email-table tr:first-child td:last-child {
        white-space: normal;
        text-align: right;
    }

    td .email-inbox,
    td .email-date-time, td .email-date-time-mobile {
        display: block;
        width: max-content;
        white-space: nowrap; 
        font-size: 10px;
    }
}

@media(max-width: 1100px){
    .addaccount{
        margin-top: 10px;
        font-size: 10px;
    }
    .addaccount .addsvg{
        height: 15px;
    }
    .main-slider {
    grid-template-columns: minmax(450px, 35%) minmax(0, 1fr);
    }
}

   /* Mobile view */
@media (max-width: 600px) {
    .header h3 {
        font-size: 20px;
    }
    .header {
    display: flex;
    align-items: center;
    flex-direction: column;
    }
    
    .sticky-note {
        width: 200px;
        height: 120px;
        padding: 12px;
    }
    
    .sticky-note-content {
        height: 80px;
        font-size: 13px;
    }
}

@media (max-width: 450px) {
    .header h3 {
        font-size: 18px;
    }
    
    .sticky-note {
        width: 150px;
        height: 100px;
        padding: 10px;
    }
    
    .sticky-note-content {
        height: 65px;
        font-size: 12px;
    }
    .accountinfo {
        padding: 10px 5px;
        margin-left: 0;
    }
    .generateresponse{
        font-size: 20px;
    }
}
@media (max-width: 1000px) {
  body:not(.what-is-hiai-body) .email-navigation {
    display: flex;
  }

  body:not(.what-is-hiai-body) .main-slider {
    display: grid;
    grid-template-columns: 50% 50%;
    min-width: 200%;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    transform: translateX(0); 

  }
    
  body:not(.what-is-hiai-body) .account-list {
   min-width: 100%;
  }

  body:not(.what-is-hiai-body) .email-list {
    min-width: 100%;
    border-left: 1px solid #EAEAEA;
    box-shadow: none;
      
  }
  body:not(.what-is-hiai-body) .folders{
        width: 90%;
    }
  /* Only apply transform on demo pages, not on what-is-hiai page */
  body:not(.what-is-hiai-body) .container.email-open .main-slider {
    transform: translateX(-50%);
  }
    
  /* header */
  body:not(.what-is-hiai-body) .thread-container{
        padding: 60px 20px 20px 20px;
    }
  body:not(.what-is-hiai-body) .email-navigation{
        display: flex;
    }

  body:not(.what-is-hiai-body) .email-trash-icon{
        display: none;
    }
}

@media (min-width: 500px){
    td .email-date-time{
        display: block;
    }
    td .email-date-time-mobile{
        display: none;
    }
}
@media (max-width: 500px){
    .email-header{
        padding: 10px 0;
    }
    .profile-cell .profile-pic{
        height: 35px;
        margin-right: 0;
        margin-top: 5px;
    }
    .profile-cell{
        width: 45px;
    }
    .email-header h2{
        font-size: 18px;
    }
    .recipient-header{
        font-size: 14px;
    }
    .sender-header{
        font-size: 14px;
    }
    .toggle-switch{
        min-width: 80px;
    }
    td .email-date-time{
        display: none;
    }
    .email-container-full{
        padding: 10px 15px;
    }
 
    /* Posteingang text font size for German */
    .folders a[data-lang="de"] {
        font-size: 10px;
    }

    /* Padding adjustment when unopen-badge is present and lang is German */
    .accountinfo:has(.unopen-badge) .folders a[data-lang="de"] {
        padding-right: 18px;
    }

    /* Image height for German folders */
    .folders a[data-lang="de"] img {
        height: 16px;
    }

    /* Add account font size for German */
    .addaccount[data-lang="de"] {
        font-size: 8px;
    }
} 

@media (max-width: 500px){
    .ehead h2 {
        font-size: 22px;
    }
    .ehead .hiai{
        font-size: 22px;
    }
    .settingbtn{
        height: 15px;
    }
    .emenu{
        font-size: 20px;
    }
    .list-panel{
        grid-template-columns: 150px 1fr;
    }
}
@media (max-width: 425px){
    .settingbtn{
        height: 15px;
    }
    .emenu{
        left: 0px;
    }
    .enav{
        padding: 8px 3px 12px 8px;
    }
    .list-panel{
        grid-template-columns: 130px 1fr;
    }
}

/* Responsive Email Header Styles - Container Queries */
/* Set up container context */
.email-container-full {
    container-type: inline-size;
    container-name: email-container;
}

/* Inbox wrapper */
.inbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Responsive text visibility - Base styles */
.inbox-full { display: inline !important; }
.inbox-short { display: none !important; }
.mobile-time { display: none !important; }
.desktop-time { display: inline !important; }

/* Medium: 600px - 768px container width */
@container email-container (max-width: 768px) {
    .inbox-full { display: none !important; }
    .inbox-short { display: inline !important; }
    .inbox-cell { width: 160px; }
}

/* Small: < 600px container width */
@container email-container (max-width: 420px) {
    .inbox-full { display: none !important; }
    .inbox-short { display: none !important; }
    .mobile-time { display: inline !important; }
    .desktop-time { display: none !important; }
    .inbox-cell { width: 80px; }
    .name-cell { padding-right: 10px; }
    .to-cell { padding-right: 10px; }
}

/* ==========================================================================
   DARK MODE — email client chrome only (v1)

   Opt-in only: applies when data-theme="dark" is set on <html>, which only
   happens when the user picks "Dark" in Settings > Preferences (see
   settings.js.blade.php for the real dashboard, demo/ui-components.js.blade.php
   for the homepage demo). Never applied automatically from OS preference yet
   ("system" currently behaves like "light" — not implemented).

   Deliberately does NOT touch the read email body: that renders in a
   sandboxed <iframe srcdoc="...">  built server-side in getEmailContent.php /
   getGmailContent.php / getOmailContent.php, with its own hardcoded light
   styling and the original sender's inline styles on top of that. Reversing
   arbitrary third-party HTML for dark mode is a separate, harder problem
   (see buildIframeContent() in those files) — out of scope here by design,
   same as Gmail/most clients leave the message body on a white card.

   This file is also loaded on marketing pages (homepage demo widget, /demo,
   what-is-hiai), so every rule below is deliberately scoped under
   html[data-theme="dark"] AND to selectors that only exist in the app/demo
   markup (.email-list, .account-list, etc.) — marketing pages never set
   data-theme, and don't contain these classes even if they did.
   ========================================================================== */
html[data-theme="dark"] {
    --dm-bg: #1a1a1a;
    --dm-surface: #242424;
    --dm-surface-hover: #2e2e2e;
    --dm-border: #3a3a3a;
    --dm-text: #e8e8e6;
    --dm-text-muted: #9a9a97;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-connect,
html[data-theme="dark"] .email-content,
html[data-theme="dark"] .email-content-demo {
    /* .email-content-demo (line 264) is a separate class from .email-content, not a
       typo - the demo's reading pane uses it instead, with its own background: #fff. */
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme="dark"] .enav,
html[data-theme="dark"] .email-navigation {
    background-color: var(--dm-bg);
}

html[data-theme="dark"] .settingbtn:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme="dark"] .searchbar {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .searchbar::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .searchbar:focus { outline-color: var(--dm-border); }
html[data-theme="dark"] .searchicon { fill: var(--dm-text-muted); }

html[data-theme="dark"] .account-list {
    background-color: var(--dm-surface);
}
html[data-theme="dark"] .accountinfo p4 { color: var(--dm-text); }
html[data-theme="dark"] .folders a { color: var(--dm-text); }
html[data-theme="dark"] .folders { box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .folders.active { box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .unopen-badge { color: var(--dm-text-muted); }
html[data-theme="dark"] .folders.active .unopen-badge {
    color: var(--dm-text);
    background-color: #3a3660;
    border-color: #45406f;
}
html[data-theme="dark"] .get-help { color: var(--dm-text); }

html[data-theme="dark"] .email-list {
    background-color: var(--dm-bg);
    box-shadow: 1px 0 0 var(--dm-border);
    border-left: 1px solid var(--dm-border);
}
html[data-theme="dark"] #email-list-container {
    /* Line 337 above sets this to #fff. .email-list-content's margin-left:10px sits
       inside this element, not .email-list, so it was revealing THIS white background,
       not .email-list's - confirmed with elementFromPoint() sampling across the gap. */
    background-color: var(--dm-bg);
}
html[data-theme="dark"] .email-list-content {
    /* Explicit, not inherited: the 10px margin-left on this element and the
       10px margin-right .email-item sets on itself both reveal whatever this
       element's own background is. It was transparent, relying on .email-list
       showing through - that works everywhere except the scrollbar gutter,
       which the browser doesn't treat as covered by an ancestor's background,
       so it was rendering as plain white there. Painting it directly here
       removes that gap. */
    background-color: var(--dm-bg);
    scrollbar-color: #555 transparent;
}
html[data-theme="dark"] .email-list-content::-webkit-scrollbar-thumb {
    background-color: #555;
}
html[data-theme="dark"] .email-list-content::-webkit-scrollbar-thumb:hover {
    background-color: #6b6b6b;
}

html[data-theme="dark"] .email-item-container { border-top-color: var(--dm-border); }
html[data-theme="dark"] .email-item {
    background: var(--dm-bg);
    border-top-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .email-item-inner { background: var(--dm-bg); }
html[data-theme="dark"] .email-item .subject,
html[data-theme="dark"] .email-item .from,
html[data-theme="dark"] .email-item .to { color: var(--dm-text); }
html[data-theme="dark"] .email-item .body { color: var(--dm-text-muted); }
/* Light text on a dark background reads optically heavier than the same weight does on
   light (halation) - drop a step to compensate. Light mode is untouched (600/500 there,
   700/600 unread). !important is required: .from.unread / .subject.unread already use it
   for the unread-bold state, which otherwise wins regardless of selector specificity. */
html[data-theme="dark"] .email-item .from { font-weight: 500 !important; }
html[data-theme="dark"] .email-item .subject { font-weight: 400 !important; }
/* .from.unread / .subject.unread are +100 over their read weight in light mode (700/600
   vs 600/500) - keep that same step in dark mode rather than flattening read vs unread
   to the same weight. */
html[data-theme="dark"] .from.unread { font-weight: 600 !important; }
html[data-theme="dark"] .subject.unread { font-weight: 500 !important; }
html[data-theme="dark"] .thread-subject { border-bottom-color: var(--dm-border); }

html[data-theme="dark"] .thread-message-email.collapsed { background: var(--dm-surface); }
html[data-theme="dark"] .thread-message-email.collapsed:hover { background: var(--dm-surface-hover); }
html[data-theme="dark"] .thread-message-email.expanded,
html[data-theme="dark"] .most-recent {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .thread-preview-header { color: var(--dm-text); }
html[data-theme="dark"] .thread-preview-header .date,
html[data-theme="dark"] .thread-preview-snippet { color: var(--dm-text-muted); }

/* Reply editor chrome (.generateresponse / .addnotes only - the rest of the reply
   editor is rich-text-area.css). See that file's dark-mode block for #editormain's
   has-content behaviour. */
html[data-theme="dark"] .generateresponse {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}
html[data-theme="dark"] .generateresponse::before,
html[data-theme="dark"] .generateresponse::after {
    background-color: var(--dm-border);
}
html[data-theme="dark"] .addnotes {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    box-shadow: 0 0 0 1px var(--dm-border);
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
html[data-theme="dark"] .addnotes:focus {
    color: var(--dm-text);
    background-color: var(--dm-surface);
    box-shadow: 0 0 0 1px var(--dm-border);
}
html[data-theme="dark"] .addnotes::placeholder {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .addnotes.sticky {
    border-bottom-color: var(--dm-bg) !important;
}
html[data-theme="dark"] .addnotes::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .addnotes::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Icons: these are all <img src="imgs/*.svg"> references to solid black/near-black
   monochrome SVGs (public/imgs/*.svg), not inline <svg> markup, so `fill`/`stroke` CSS
   can't reach them - that's why they were sitting there as near-invisible dark glyphs
   on the dark background. invert(1) flips black -> white; grayscale(1) neutralises any
   icon whose original colour isn't pure black (e.g. add.svg's #1C274C stroke) into a
   clean white/grey instead of an inverted colour cast. The one icon that IS inline SVG
   (.searchicon) is already themed above via a plain `fill` rule and doesn't need this. */
html[data-theme="dark"] .settingbtn,
html[data-theme="dark"] .emenu,
html[data-theme="dark"] .refresh,
html[data-theme="dark"] .signoutimg,
html[data-theme="dark"] .acctrash,
html[data-theme="dark"] .addsvg,
html[data-theme="dark"] .folders img {
    filter: invert(1) grayscale(1);
}
html[data-theme="dark"] .signout {
    color: var(--dm-text-muted);
}