/* Custom CSS file for development */

/* Support for browsers that support dvh (dynamic viewport height) */
@supports (height: 100dvh) {
    :root {
        --real-vh: 1dvh;
        --mobile-viewport-height: 100dvh;
    }
}

html {
    font-family: Arial;
    font-size: 14px;
}

/* Links */
a, a:hover, .page-item:not(active) .page-link {
    color: #0003f4;
}
.page-item.active .page-link{
	background-color: #0003f4;
}

/* Help page anchors */
.help-section {
    scroll-margin-top: 60px;
}

/* Large font option */
.font-large {
    font-size: 2em;
}

/* Sitewide Widths */

#mainContainer {
    min-width: 1200px;
    min-height: 84vh;
}

#mainContentColumn {
    min-width: 1200px;
    max-width: 1600px;
}

.container-xl#login-content {
    min-width: 552px;
    max-width: 1600px;
}

/* Page title */

.page_title {
}

h5 {
    font-size: 1.15em;
    margin-bottom: 0px;
}

/* Tables */

.table {
    /* So that buttons line up correctly at the bottom of tables */
    margin-bottom: 0;
    /* table-layout: fixed; */
}

.table.table-sm th, .table.table-sm td {
    padding: .15rem .5rem .15rem .5rem;
}

.table-striped thead tr{background-color: #e6e6e6;}
.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,0)}
.table-striped tbody tr:nth-of-type(even){background-color: #e6e6e6}
.table-hover tbody tr:hover{background-color:rgba(0,0,0,.15)}

/* Individual table cell hover */
.table-cell-hover tbody td:hover{color:#212529;background-color:rgba(0,0,0,.075)}

/* Modals */

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Success Modal - ensure it appears above chat sidebar */
#successModal {
    z-index: 10000; /* Higher than chat-sidebar z-index */
}

/* Favorite Star Icon */

#set_favorite_star_icon {
    font-size: 1.3em;
}

/* Search bar inputs; needed so that the top and bottom of all inputs are flush with the rest of the inputs */
.input-group-text,.custom-select {
    border: 0;
    color: black;
}

/* Border between label and input for search bar inputs, excluding the actual search bar input */
.input-group-append > :not(button) {
    border-left: 1px solid #343a40;
    margin: 0;
}

.input-group-prepend {
    border-right: 1px solid #343a40;
    margin: 0;
}

/* IE 11 Compatibility search bar adjustments */

.irs-category-input {
    min-width: 20em;
}

.min-max-input {
    min-width: 21em;
}

.ch-category-input {
    min-width: 16em;
}

.ch-tax-year-input {
    min-width: 11em;
}

select {
    max-height: 31.5px;
}

/* Custom colors */
.bg-red {background-color: #ee1a17 !important;}
.border-red {border-color: #ee1a17 !important;}
.text-red {color: #ee1a17 !important;}
.badge-red{color:#ffffff; background-color:#ee1a17 !important;}

.bg-pink {background-color: #ee3843 !important;}
.border-pink {border-color: #ee3843 !important;}
.text-pink {color: #ee3843 !important;}
.badge-pink{color:#ffffff; background-color:#ee3843 !important;}

.bg-green {background-color: green !important;}
.border-green {border-color: green !important;}
.text-green {color: green !important;}
.badge-green {color:#ffffff; background-color: green !important;}

.bg-hrb-green {background-color: #79c337 !important;}
.border-hrb-green {border-color: #79c337 !important;}
.text-hrb-green {color: #79c337 !important;}
.badge-hrb-green {color:#ffffff; background-color: #79c337 !important;}

.bg-pink-light {background-color: #ffd6d5 !important;}

.bg-black {background-color: #000000 !important;}
.border-black {border-color: #000000 !important;}
.text-black {color: #000000 !important;}

.bg-gray {background-color: #e6e6e6 !important;}
.border-gray {border-color: #e6e6e6 !important;}
.text-gray {color: #e6e6e6 !important;}

.bg-dark-gray {background-color: #868686 !important;}
.border-dark-gray {border-color: #868686 !important;}
.text-dark-gray {color: #868686 !important;}

.bg-light-gray {background-color: #f0f0f0 !important;}
.border-light-gray {border-color: #f0f0f0 !important;}
.text-light-gray {color: #f0f0f0 !important;}

.bg-blue {background-color: #092c62 !important;}
.border-blue {border-color: #092c62 !important;}
.text-blue {color: #092c62 !important;}

.bg-danger-light {background-color: #ffcccc !important;}
.border-danger-light {border-color: #ffcccc !important;}
.text-danger-light {color: #ffcccc !important;}

.bg-danger {background-color: #ff4444 !important;}
.text-danger {color: #ff4444 !important;}

.bg-danger-dark {background-color: #cc0000 !important;}
.border-danger-dark {border-color: #cc0000 !important;}
.text-danger-dark {color: #cc0000 !important;}

.bg-warning-light {background-color: #ffecc7 !important;}
.border-warning-light {border-color: #ffecc7 !important;}
.text-warning-light {color: #ffe9bc !important;}

.bg-warning {background-color: #ffbb33 !important;}
.text-warning {color: #ffbb33 !important;}

.bg-warning-dark {background-color: #ff8800 !important;}
.border-warning-dark {border-color: #ff8800 !important;}
.text-warning-dark {color: #ff8800 !important;}

.bg-success-light {background-color: #9ce49f !important;}
.border-success-light {border-color: #9ce49f !important;}
.text-success-light {color: #9ce49f !important;}

.bg-success {background-color: #00c80a !important;}
.text-success {color: #00c80a !important;}

.bg-success-dark {background-color: #007e33 !important;}
.border-success-dark {border-color: #007e33 !important;}
.text-success-dark {color: #007e33 !important;}

.bg-purple-light {background-color: #e0b9ff !important;}
.border-purple-light {border-color: #e0b9ff !important;}
.text-purple-light {color: #e0b9ff !important;}

.bg-purple {background-color: #ac4dfa !important;}
.border-purple {border-color: #ac4dfa !important;}
.text-purple {color: #ac4dfa !important;}

.bg-purple-dark {background-color: #910efd !important;}
.text-purple-dark {color: #910efd !important;}

.bg-info-light {background-color: #93d4e5 !important;}
.text-info-light {color: #93d4e5 !important;}

.bg-info {background-color: #33b5e5 !important;}
.text-info {color: #33b5e5 !important;}

.bg-info-dark {background-color: #0099cc !important;}
.border-info-dark {border-color: #0099cc !important;}
.text-info-dark {color: #0099cc !important;}

/* Tables */
.thead-black {background-color: #000000 !important; color: #ffffff !important;}
.table-bordered-black td:not(.p-0), .table-bordered-black th {border: 1px #000000 solid !important;}

/* Links */
a.link-white, a.link-white:hover {color: #ffffff !important;}
a.link-blue, a.link-blue:hover {color: blue !important;}
a.link-red, a.link-red:hover {color: #ee1a17 !important;}
a.link-black, a.link-black:hover {color: #000000 !important;}
a.link-dark-gray, a.link-dark-gray:hover {color: #868686 !important;}
.stretched-link-container {transform: rotate(0);}

/* Make text unselectable */
.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

/* Radio Buttons */

/* The container */
.radio-container {
    position: relative;
    padding-left: 25px;
    margin-right: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
    width: 21px;
    background-color: #e6e7e8;
    border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radio-container:hover input ~ .radio {
    background-color: #cccccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radio-container input:checked ~ .radio {
    background-color: #cccccc;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .radio:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio-container input:checked ~ .radio:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio-container .radio:after {
       top: 2px;
      left: 2px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: #ee3a43;
  }
  
/* Nav buttons */
.docNavButton {
    margin: 0 1px 0 1px;
}

/* Button Size */

.btn-sm, .btn-group-sm > .btn {
    padding: 0.1rem 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}


/* Button Colors */


/* Primary (Blue) */
.btn-primary {
    color: #ffffff;
    background-color: #092c62;
    border-color: #092c62;
}
.btn-primary:hover {
    color: #ffffff;
    background-color: #1d4f99;
    border-color: #1d4f99;
  }
.btn-primary:focus, .btn-primary.focus {
    color: #ffffff;
    background-color: #092c62;
    border-color: #092c62;
    box-shadow: 0 0 0 0.2rem #648fcf;
  }
.btn-primary.disabled, .btn-primary:disabled {
    color: #ffffff;
    background-color: #092c62;
    border-color: #092c62;
}
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #ffffff;
    background-color: #092c62;
    border-color: #092c62;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0rem #092c62;
}


/* Dark (Black) */
.btn-dark {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}
.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}
.btn-dark:focus, .btn-dark.focus {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}
.btn-dark.disabled, .btn-dark:disabled {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

/* Light */
.btn-light {
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

.btn-light:hover {
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #999999;
    box-shadow: 0 0 0 0.1rem #999999;
}

.btn-light:focus, .btn-light.focus {
    color: #212529;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 0 0.1rem #999999;
}

.btn-light.disabled, .btn-light:disabled {
    color: #212529;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    color: #212529;
    background-color: #ffffff;
    border-color: #999999;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #999999;
}


/* Primary Outline (White Fill, Blue Outline) */
.btn-outline-primary {
    color: #092c62;
    background-color: #ffffff;
    border-color: #092c62;
    border-width: 0.1rem;
}
.btn-outline-primary:hover {
    color: #092c62;
    background-color: #ffffff;
    border-color: #092c62;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem #092c62;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #092c62;
    background-color: #ffffff;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #092c62;
    background-color: #ffffff;
    border-color: #092c62;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #092c62;
}

/* Secondary (Gray) */
.btn-secondary {
    color: #000000;
    background-color: #e6e7e8;
    border-color: #000000;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-secondary:focus, .btn-secondary.focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

/* Sidebar */

/* Makes it possible for the sidebar to work as either a sideways-collapsing navbar or regular; 
adapted from user Zim: https://stackoverflow.com/questions/12498476/twitter-bootstrap-collapse-plugin-direction-horizontal-instead-of-vertical/18602739#18602739 */
.collapse {
    visibility: hidden;
  }
.collapse.show {
    visibility: visible;
}
.collapsing.width {
    -webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    width: 0;
    height: auto;
  }
.collapse.width {
    height: 0;
    width: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}
.collapse.height {
    height: auto;
    width: auto;
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

/* Sidebar nav links */

.sidenav-link:hover {
    background-color: #bbbbbb;
}

.left-nav-alert ul {
    margin: 0;
    margin-left: 20px;
    padding: 0;
}

#sidebarMainContent {
    min-width: 180px;
    max-width: 180px;
}

/* Collapse - changing read more/less text */

#course_detail_expand_button {
    content: '+ Read More';
}

/* Forms */
.form-control {
    border: 1px solid #000000;
}

/* Gets rid of input invalidation icon inside red input boxes */
.form-control.is-invalid{
    background-image: none;
}

/* Border radius */
/* (So that .rounded-0 doesn't override these classes; for the cpe_header search icon) */

.rounded-right {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.rounded-top {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

/* Alerts */
.alert {
    margin-bottom: 0;
}

.alert-danger {
    color: #ff4444;
    background-color: #ffffff;
    border-color: #ff4444;
}

.alert-success {
    color: #00c851;
    background-color: #ffffff;
    border-color: #00c851;
}

.alert-warning {
    color: #ffbb33;
    background-color: #ffffff;
    border-color: #ffbb33;
}

.alert-info {
    color: #33b5e5;
    background-color: #ffffff;
    border-color: #33b5e5;
}

/* Dropdowns */

.dropdown-divider {
    border-color: black;
}
.dropdown-menu {
    border: 1px solid;
    border-color: black;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #000000;
    text-decoration: none;
    background-color: #ffffff;
    outline: none;
}

.dropdown-item.active, .dropdown-item:active {
    color: #000000;
    text-decoration: none;
    background-color: transparent;
} 

/* Custom Bootstrap-like styles */
.w-75 {
    width: 75% !important;
}
.w-70 {
    width: 70% !important;
}
.w-60 {
    width: 60% !important;
}
.w-45 {
    width: 45% !important;
}
.w-40 {
    width: 40% !important;
}
.w-35 {
    width: 35% !important;
}
.w-30 {
    width: 30% !important;
}
.w-20 {
    width: 20% !important;
}
.w-15 {
    width: 15% !important;
}
.w-10 {
    width: 10% !important;
}

/* Course Catalog */

/* Special breakpoint for catalog course tiles */
@media(min-width: 1525px){
    .catalogCourseTile {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}


.take_exam_answer:hover {
    background-color: #bdc2c7;
    color: black;
}

.nasba_info_tooltip:hover {
    cursor:pointer;
}


/*taxbert CSS */

.taxbert-header-container {
    display: flex;
    align-items: center;
    margin-right: auto;
    padding-right: 25px;
}

.taxbert-header-container #taxbert-icon {
    margin-left: 225px;
}

.taxbert-header-container span {
    margin-left: 10px;
    padding-right: 20px;
}

.chat-sidebar {
    position: fixed;
    top: 97px;
    right: 0;
    height: calc(100vh - 97px - 60px);
    background-color: #3a3a3a;
    color: #ffffff;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid #2d2d2d;
    transform: translateX(100%); /* Hidden to the right */
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
    z-index: 9999;
    width: 840px;
}

.chat-sidebar.open {
    transform: translateX(0); /* Slide in */
    visibility: visible;
    opacity: 1;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    background-color: #222222;
}

/* Responsive adjustments for chat sidebar when open */
@media (max-width: 1200px) {
    .chat-sidebar.open {
        left: clamp(50px, calc(100vw - 840px), 100vw); /* Ensure the left doesn't go past 0 */
    }
}






/* Favorites Section */
.sidebar-section {
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-heading {
    font-size: 16px;
    font-weight: 500;
    color: #cccccc;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #4a4a4a;
    margin-top: 10px; /* Reduced space above the Favorites heading by half */
}

/* Search container styling */
#chat-search-container {
    padding: 5px 10px 0 0 !important; /* Removed bottom and left padding */
    margin-bottom: 0 !important; /* Removed margin */
}

.favorite-placeholder {
    background-color: #4a4a4a;
    border: 1px dashed #666666;
    border-radius: 5px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
}

.favorite-placeholder p {
    color: #bbbbbb;
    font-size: 14px;
    margin: 0;
}

/* Favorites list styling */
#favorites-list {
    margin-top: 0;
    padding: 0;
}

#favorites-list .chat-item {
    background-color: #555555;
    border-left: 3px solid #f8c200;
    padding-left: 13px; /* Adjust padding to account for border, matching active items */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

#favorites-list .chat-item:hover {
    background-color: #666666;
}

#favorites-list .chat-item.active {
    background-color: #777777;
}

/* Chat List */
.chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto; /* Explicitly enable vertical scrolling */
    padding-right: 10px;
    padding-bottom: 0; /* Ensure no padding at the bottom */
}

/* Chat Items List - For nested lists without scrolling */
.chat-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-right: 10px;
    padding-bottom: 0;
}

/* Date header styling - ensure no extra space at bottom */
.date-header {
    margin-top: 8px;
    padding-bottom: 0;
}

.date-header:last-child {
    margin-bottom: 0;
}

.chat-item {
    padding: 3px 8px ;
    margin-bottom: 8px ;
    background: #4a4a4a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    border: 1px solid transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Remove margin from last chat item to prevent extra space */
.chat-list .chat-item:last-child {
    margin-bottom: 0 ;
}

.chat-item:hover {
    background: #5a5a5a;
    border-color: #666666;
}

.chat-item-title {
    margin-right: 10px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 14px;
    max-width: 70%; /* Limit width to prevent overflow */
    box-sizing: border-box;
}

.chat-item-actions {
    display: flex;
    gap: 4px; /* Reduced gap */
    opacity: 0.7; /* Slightly visible by default */
    flex-shrink: 0; /* Prevent shrinking */
    box-sizing: border-box;
    max-width: 30%; /* Limit width */
    overflow: hidden;
}

.chat-item:hover .chat-item-actions {
    opacity: 1;
}

.chat-item-actions button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #cccccc;
}

.chat-item-actions button:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.chat-item.active {
    background: #666666;
    border-color: #777777;
    border-left: 3px solid #007bff; /* Add blue left border for active chat */
    padding-left: 13px; /* Adjust padding to account for border */
}

.favorite-button .fa-star.fas {
    color: #f8c200; /* Gold color for favorited star */
}

/* Chat Header UI (for the top navigation) */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #0d2957; /* Dark blue like in the original */
    color: #ffffff;
    border-bottom: 1px solid #1a3b6d;
}

.chat-title-container {
    display: flex;
    align-items: center;
}

.chat-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
}

.chat-label {
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
}

.chat-title-dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
}

.chat-title-dropdown:hover {
    background-color: rgba(255,255,255,0.1);
}

.chat-title-dropdown span {
    margin-right: 5px;
}

/* Chat Header Buttons */
.chat-header-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
    position: absolute;
    right: 20px;
}

.chat-header-button {
    height: 31px; /* Match height of jurisdiction buttons */
    padding: 0 10px; /* Adjust padding to maintain proper height */
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 5px;
    font-size: 14px;
    color: #333;
    line-height: 29px; /* Ensure text is vertically centered */
}

.chat-header-button:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
    color: #0d6efd;
}

.chat-header-button i {
    font-size: 14px;
}

/* Chat header button styling - ensure consistent heights */
#new-chat-button, #chat-list-button {
    height: 31px !important; /* Force same height */
    line-height: 29px !important; /* Force same line height */
    box-sizing: border-box !important; /* Ensure padding and border are included in height */
}

/* New Chat button styling - Match Primary button */
#new-chat-button {
    background-color: #092c62; /* Match .btn-primary background */
    color: #ffffff; /* Match .btn-primary text color */
    border-color: #092c62; /* Match .btn-primary border */
}

#new-chat-button:hover {
    background-color: #1d4f99; /* Match .btn-primary:hover background */
    border-color: #1d4f99; /* Match .btn-primary:hover border */
    color: #ffffff; 
}

.taxbert-body {

    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.taxbert-wrapper {
    display: flex;
    flex-direction: column;
    height: 80vh;
    position: relative; /* Added for absolute positioning context */
    overflow: hidden; /* Added to hide collapsed sidebar */
    max-width: 100%; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Include padding in width calculation */
    width: 100%; /* Ensure it takes full width */
    overflow-x: hidden; /* Explicitly hide horizontal overflow */
    overflow-y: hidden; /* Explicitly hide vertical overflow */
}

.taxbert-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #000;
    box-sizing: border-box;
    max-width: 100%; /* Prevent horizontal overflow */
    overflow-x: hidden; /* Hide horizontal overflow */
    width: 100%; /* Ensure it takes full width */
}



.taxbert-input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 0;
    padding: 5px;
    position: sticky;
    bottom: 0;
    margin-top: 1vh;
    height: auto;
    max-width: 100%; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal overflow */
    width: 100% ; /* Ensure container takes full width - added !important */
    flex-shrink: 0; /* Prevent container from shrinking */
}

.taxbert-clear-container {
    /* display: none; */
    display: flex; 
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: sticky;
    bottom: 0;
    margin-top: 1vh;
}



.taxbert-messages {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 5px;
   /* font-family: 'Poppins', sans-serif; */
}

.taxbert-user-message {
    display: block;
    margin-left: auto;
    width: 70%;
    text-align: left;
    margin-bottom: 10px;
    color: white;
    background-color: #757575;
    border-radius: 5px;
    padding: 10px;
    word-break: break-word;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
}

.taxbert-user-message::after {
    content: '';
    position: absolute;
    right: -8px; 
    bottom: 10px;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 4px  solid transparent;
    border-left: 15px solid #757575;

}

.taxbert-bot-message-container {
    display: flex;
    align-items: flex-end;
    align-self: flex-start;
    margin-left: 0;
}

.taxbert-bot-icon {
    background-color: #cce6ff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0px;
    overflow: hidden;
}

.taxbert-bot-icon img {
    height: 30px; 
    width: 35px;
    object-position: center;
    object-fit: cover; 
}

.taxbert-bot-message {
    display: block;
    margin-right: auto;
    width: 70%;
    text-align: left;
    margin-bottom: 10px;
    color: #333;
    background-color: #e0e0e0;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    max-width: 100%;
    margin-left: 10px;
    word-break: break-word;
    box-sizing: border-box;
}
.taxbert-bot-message::before {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 4px  solid transparent;
    border-right: 15px solid #e0e0e0;
}


.taxbert-icon {
    flex-shrink: 0;
    margin-right: 10px;
    width: 100px;
}

.taxbert-intro-message {
    float: left;
    text-align: left;
    margin-bottom: 10px;
    color: #333;
    background-color: #e0e0e0;
    border-radius: 5px;
    padding: 10px;
}

.taxbert-question {
    resize: none;
    height: 41px; 
    padding: 10px;
    border: none;
    outline: none;
    width: 100%; /* Make the textarea take up all available width */
    flex-grow: 1; /* Allow the textarea to grow and fill available space */
    margin-right: 10px; /* Add some spacing between the textarea and the button */
    transition: height 0.2s ease-in-out; /* Smooth transition for height changes */
    overflow-y: hidden; /* Hide scrollbar by default */
}

.taxbert-question.expanded {
    height: auto; /* Allow height to adjust based on content */
}
.taxbert-header {
    display: flex;
    align-items: flex-start;
}

.taxbert-bot-message:has(.message-actions) hr {
    margin-bottom: 5px; 
}
.taxbert-clear-button {
    padding: 10px 20px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid;
}
.taxbert-submit-button {
    background-color: #bbbbbb;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto; 
}
.taxbert-clear-button:hover {
    background-color: #c82333;
}

.taxbert-clear-button.cleared {
    background-color: #c82333;
}
.message-actions {
    margin: 0;
    margin-top: 5px; /* Small margin above the actions */
    display: flex;
    float: left;
}

.message-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
}

.thumbs-up.active { color: green; }
.thumbs-down.active { color: red; }
.thumbs-up:hover:not(.active):not(:disabled), 
.thumbs-down:hover:not(.active):not(:disabled) { color: grey; }
.copy-message:hover { color: blue; }
.copy-message.copied { color: green; }

.thumbs-up,.thumbs-down, .copy-message {
    transform: scale(0.75);  
}
.custom-select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style for the state select container and dropdown */
.select2-state {
    height: 35px !important;
    background-color: white !important;
    color: black !important;
    line-height: 35px !important;
}

/* For the placeholder text */
.select2-state option {
    background-color: white !important;
    color: black !important;
}

/* Style for the select container to match button height */
.state-select-container {
    height: 31px !important;
    display: none;
    align-items: center;
}

/* Style for the dropdown when open */
.select2-state:focus {
    background-color: white !important;
    color: black !important;
    border-color: #000 !important;
}
.federal-btn, .state-btn {
    display: flex;
    align-items: center;
    background-color: #e6e6e6;
    border: 1px solid #ccc;
    color: #333;
    font-size: 14px;
}
.select2-container .select2-selection--single {
    height: 31px !important;
}


.select2-container .select2-selection--single {
    height: 31px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 2px !important; 
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    position: relative !important;
    top: -1px !important; 
    line-height: 31px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 31px !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.input[type="radio"] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

#state-select-container {
    border-left: 1px solid black !important;
}

.state-select-hidden {
    display: none;
}

.select2 {
    display: inline-block !important;
}

/* Custom container class */
.state-select-wrapper {
    display: inline-block;
    vertical-align: middle;
}
.custom-light-blue:hover {
  background-color: blue !important; /* Slightly darker blue on hover */
  border-color: blue !important;
}
/* Chat list and sidebar interaction styles */
.chat-overlay-active #response-container,
.chat-overlay-active .taxbert-input-container,
.chat-overlay-active .taxbert-input-container + div {
    opacity: 0.7;
    pointer-events: none;
}

.chat-overlay-active .taxbert-container,
.chat-overlay-active .taxbert-input-container {
    border-color: #999999;
}

.chat-area-normal #response-container,
.chat-area-normal .taxbert-input-container,
.chat-area-normal .taxbert-input-container + div {
    opacity: 1;
    pointer-events: auto;
}

.chat-area-normal .taxbert-container,
.chat-area-normal .taxbert-input-container {
    border-color: #000;
    background-color: #fff;
}

.button-disabled {
    opacity: 0.6;
}

.button-enabled {
    opacity: 1;
}

.button-semi-disabled {
    opacity: 0.5;
}

/* Title animation container styles */
.title-animation-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.title-prefix {
    opacity: 1;
}

.title-actual {
    opacity: 0;
}

.title-actual.visible {
    opacity: 1;
}

/* Container styles when sidebar is open */
.container-sidebar-open {
    margin-right: 0;
    width: 100%;
}

/*End taxbert CSS*/

/* Hide header and jurisdiction selector only in landscape orientation when keyboard is open */
/* Landscape orientation adjustments */
@media screen and (orientation: landscape) {
    body.mobile-device-detected .mobile-chat-view,
    body.mobile-device-detected .mobile-chat-interface {
        width: 100vw;
        height: var(--real-vh);
    }
}

/* Enhanced orientation change handling */
body.mobile-device-detected.orientation-changing {
    /* Prevent layout shifts during orientation change */
    overflow: hidden;
}

body.mobile-device-detected.orientation-changing * {
    /* Temporarily disable transitions during orientation change */
    transition: none;
    animation: none;
}

/* Ensure the mobile chat view uses full height when keyboard is open */
body.mobile-keyboard-open .mobile-chat-view {
    height: calc(var(--real-vh) * 100) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* Prevent over-scrolling and bouncing */
    overscroll-behavior: contain !important;
    /* Ensure content doesn't exceed container bounds */
    contain: layout style paint !important;
    /* Lock the view in place */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}


/* Hide collapsed divs when the keyboard is open */
body.mobile-keyboard-open .collapsed {
    height: 0 !important;
    overflow: hidden;
}



/* Ensure input wrapper stays visible and functional */
body.mobile-keyboard-open .mobile-input-wrapper {
    z-index: 999999;
    position: relative;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    padding: 8px;
    border: 1px solid #000000;
}

/* Ensure send button stays visible and functional */
body.mobile-keyboard-open .mobile-send-btn {
    z-index: 999999;
    position: relative;
    background-color: #092c62;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto;
    touch-action: manipulation;
}

/* Ensure message input stays visible and functional */
body.mobile-keyboard-open .mobile-message-input {
    z-index: 999999;
    position: relative;
    border: none;
    background: none;
    padding: 10px 12px;
    font-size: 16px;
    resize: none;
    height: 36px;
    max-height: 200px;
    outline: none;
    color: #000000;
    line-height: 16px;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}

/* Adjust messages container when keyboard is open */
body.mobile-keyboard-open .mobile-messages-container {
    top: 0 !important;
    padding-top: 10px !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    perspective: 1000 !important;
    -webkit-perspective: 1000 !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

body.mobile-keyboard-open .mobile-messages-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--keyboard-height, 0) + 80px) !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    z-index: 1 !important;
}

/* Mobile viewport fixes for both iOS and Android */
body.mobile-keyboard-open {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

body.mobile-keyboard-open .mobile-messages-container {
    flex: 1 0 0;
    position: relative;
    height: calc(100% - 80px);
    max-height: calc(100% - 80px);
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}


/* Hide mobile interface by default on desktop to prevent flash */
.mobile-chat-interface {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
}

/* Mobile interface styles - applied via JavaScript when actual mobile device is detected */
body.mobile-device-detected .mobile-chat-interface {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--real-vh) * 100) !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    background-color: #f0f0f0 !important;
    z-index: 99999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: calc(16px * var(--mobile-font-scale)) !important;
}

/* CRITICAL: Hide desktop TaxBert content when mobile interface is active */
body.mobile-device-detected .taxbert-wrapper,
body.mobile-device-detected .chat-sidebar,
body.mobile-device-detected .taxbert-header-container,
body.mobile-device-detected .chat-header-buttons {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    overflow: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* Override desktop layout constraints specifically for TaxBert page on mobile */
body.mobile-device-detected {
    /* Reset any desktop layout constraints */
    overflow: hidden !important;
    position: fixed !important;
    width: 100vw !important;
    height: var(--real-vh) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Override desktop minimum widths */
    min-width: auto !important;
    max-width: 100vw !important;
    min-height: auto !important;
}



/* Disable zoom/pinch on mobile TaxBert interface */
body.mobile-device-detected {
    /* Prevent zoom gestures */
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    /* Prevent double-tap zoom */
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Disable zoom on all mobile interface elements */
body.mobile-device-detected * {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* Specifically disable zoom on input elements which commonly trigger zoom */
body.mobile-device-detected input,
body.mobile-device-detected textarea,
body.mobile-device-detected select {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    /* Prevent iOS zoom on focus */
    font-size: 16px;
    transform-origin: left top;
    zoom: 1;
}

/* Only apply mobile styles when JavaScript has detected a mobile device */
body.mobile-device-detected {
    /* Mobile Chat Header */
    .mobile-chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 15px;
            background-color: #ffffff;
            color: #000000;
            box-shadow: 0 1px 0 rgba(0,0,0,0.1);
            height: 60px;
            position: relative;
            z-index: 1000;
            transition: transform 0.3s ease, opacity 0.3s ease;
            flex-shrink: 0;
        }
        
    /* Hide header when keyboard is open */
    
    .mobile-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
    .mobile-header-center {
            flex: 1;
            text-align: center;
        }
        
    .mobile-title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
    .mobile-chat-title {
            font-size: 18px;
            font-weight: 600;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
        }
        
    .mobile-rename-icon {
            display: none; /* Hidden by default */
            font-size: 16px;
            color: #092c62;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

    .mobile-rename-icon.show {
            display: inline-block; /* Show when class is added */
        }
        
    .mobile-rename-icon:hover {
            background-color: rgba(9,44,98,0.1);
        }
        
    .mobile-rename-icon:active {
            background-color: rgba(9,44,98,0.2);
        }
        
    .mobile-rename-icon.hidden {
            display: none;
        }
        
    .mobile-header-right {
            display: flex;
            align-items: center;
        }
        
    .mobile-back-btn,
    .mobile-new-chat-btn,
    .mobile-library-btn {
            background: none;
            border: none;
            color: #092c62;
            font-size: 18px;
            padding: 8px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
            cursor: pointer;
        }
        
    .mobile-back-btn:hover,
    .mobile-new-chat-btn:hover,
    .mobile-library-btn:hover {
            background-color: rgba(9,44,98,0.1);
        }
        
    .mobile-back-btn:active,
    .mobile-new-chat-btn:active,
    .mobile-library-btn:active {
            background-color: rgba(9,44,98,0.2);
        }
        
    .mobile-back-btn.disabled,
    .mobile-back-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
    .mobile-rename-btn {
            background: none;
            border: none;
            color: #092c62;
            font-size: 18px;
            padding: 8px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
            cursor: pointer;
        }
        
    .mobile-rename-btn:hover {
            background-color: rgba(9,44,98,0.1);
        }
        
    .mobile-rename-btn:active {
            background-color: rgba(9,44,98,0.2);
        }
        
    .mobile-rename-btn.disabled,
    .mobile-rename-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
    /* Mobile Chat List View */
    .mobile-chat-list-view {
            flex: 1;
            display: flex !important;
            flex-direction: column;
            background-color: #3a3a3a;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
            width: 75vw;
            height: calc(var(--real-vh) * 100);
            z-index: 10001;
            transform: translateX(-100%);
            transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
            visibility: hidden;
            opacity: 0;
        }
        
    .mobile-chat-list-view.mobile-sidebar-open {
            transform: translateX(0);
            visibility: visible;
            opacity: 1;
            background-color: #222222;
        }
        
    .mobile-chat-view.mobile-chat-dimmed {
            opacity: 0.3;
            pointer-events: none;
        }
        
    .mobile-chat-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #4a4a4a;
        }
        
    .mobile-chat-list-header h3 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
            color: #ffffff;
        }
        
    .mobile-new-chat-list-btn {
            background-color: #092c62;
            border: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
            min-width: 120px;
        }

    .mobile-new-chat-list-btn:hover {
            background-color: #1d4f99; /* Match mobile send button hover */
        }

    .mobile-new-chat-list-btn:active {
            background-color: #092c62; /* Match mobile send button active */
        }
        
    .mobile-chat-search {
            padding: 10px 20px;
            border-bottom: 1px solid #4a4a4a;
        }
        
    .mobile-search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #4a4a4a;
            border-radius: 5px;
            font-size: 16px;
            background-color: #ffffff;
            color: #000000;
        }
        
    .mobile-search-input::placeholder {
            color: #666666;
        }
        
    .mobile-chat-items {
            flex: 1;
            overflow-y: auto;
            padding: 0 10px;
            padding-bottom: 67px; /* Add padding to prevent content from being hidden behind bottom section */
            height: calc(var(--real-vh) * 100 - 200px);
            max-height: calc(var(--real-vh) * 100 - 200px);
        }
        
    /* Mobile Date Headers */
    .mobile-chat-items .date-header {
            margin-top: 8px;
            padding-bottom: 0;
            font-size: 14px;
            color: #cccccc;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
    /* Mobile Favorites Container */
    .mobile-chat-items .favorites-container {
            display: none;
        }
        
    .mobile-chat-items .favorites-container.show {
            display: block;
        }
        
    .mobile-chat-items .recent-container {
            display: block;
        }
        
    .mobile-chat-items .recent-container.hide {
            display: none;
        }
        
    /* Mobile Favorite Placeholder */
    .mobile-chat-items .favorite-placeholder {
            background-color: #4a4a4a;
            border: 1px dashed #666666;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
            text-align: center;
        }
        
    .mobile-chat-items .favorite-placeholder p {
            color: #bbbbbb;
            font-size: 14px;
            margin: 0;
        }
        
    /* Mobile Chat List Bottom Section */
    .mobile-chat-list-bottom {
            position: absolute;
            bottom: env(safe-area-inset-bottom, 0px);
            left: 0;
            right: 0;
            height: calc(67px + env(safe-area-inset-bottom, 0px));
            background-color: #3a3a3a;
            border-top: 1px solid #4a4a4a;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 20px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-sizing: border-box;
        }
        
    .mobile-home-button {
            background-color: #ee1a17;
            border: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
            min-width: 120px;
        }

    .mobile-home-button:hover {
            background-color: #c91614; /* Slightly darker red for hover */
        }

    .mobile-home-button:active {
            background-color: #a81210; /* Even deeper red for active */
        }

        
    .mobile-home-button i {
            font-size: 18px;
        }
        
    .mobile-chat-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid #4a4a4a;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: #4a4a4a;
            border-radius: 5px;
            margin: 3px 8px;
            border: 1px solid transparent;
        }
        
    .mobile-chat-item:hover {
            background-color: #5a5a5a;
            border-color: #666666;
        }
        
    .mobile-chat-item.active {
            background-color: #666666;
            border-color: #777777;
            border-left: 3px solid #007bff;
            padding-left: 13px;
        }
        
    .mobile-chat-item-content {
            flex: 1;
            min-width: 0;
            margin-right: 8px;
        }
        
    .mobile-chat-item-title {
            font-weight: 600;
            font-size: 14px;
            color: #ffffff;
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }
        
    .mobile-chat-item-preview {
            font-size: 12px;
            color: #8e8e93;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.1;
        }
        
    .mobile-chat-item-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 3px;
            flex-shrink: 0;
            min-width: 60px;
        }

    .mobile-chat-item-time {
            font-size: 10px;
            color: #8e8e93;
            text-align: right;
            white-space: nowrap;
        }

    .mobile-chat-item-actions {
            display: flex;
            gap: 8px;
            opacity: 1; /* Always visible on mobile */
            flex-shrink: 0;
        }

    .mobile-chat-item-actions button {
            background-color: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: #ffffff;
            font-size: 12px;
            padding: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            transition: background-color 0.2s, color 0.2s;
        }

    .mobile-chat-item-actions button:hover {
            background-color: rgba(255,255,255,0.2);
            color: #ffffff;
        }

    .mobile-chat-item-actions .text-warning {
            color: #f8c200 !important; /* Ensure favorite star is gold */
        }
        
/* Mobile Chat View */
.mobile-chat-view {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
            overflow: hidden;
            height: calc(var(--real-vh) * 100);
            min-height: 0; /* Allow flex children to shrink */
            position: relative;
        }
        
    /* Mobile Jurisdiction Selector */
    .mobile-jurisdiction-selector {
            background-color: #ffffff;
            border-top: 2px solid #000000 !important;
            border-bottom: 2px solid #000000 !important;
            overflow: hidden;
            transition: all 0.3s ease;
            z-index: 1001;
            position: relative;
        }
        
    .mobile-jurisdiction-toggle {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            background-color: #ffffff;
            border: none;
            width: 100%;
            color: #000000;
            font-size: 16px;
            font-weight: 500;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }
        
    .mobile-jurisdiction-toggle:hover {
            background-color: #f0f0f0;
        }
        
    .mobile-jurisdiction-toggle:focus {
            outline: none;
            box-shadow: none;
        }
        
    .mobile-jurisdiction-toggle:active {
            outline: none;
            box-shadow: none;
        }
        
    .mobile-jurisdiction-arrow {
            transition: transform 0.3s ease;
            color: #092c62;
            font-size: 14px;
        }
        
    .mobile-jurisdiction-selector.expanded .mobile-jurisdiction-arrow {
            transform: rotate(180deg);
        }
        
        
    .mobile-jurisdiction-content {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        
    .mobile-jurisdiction-selector.expanded .mobile-jurisdiction-content {
            max-height: 200px;
            padding: 15px 20px;
            opacity: 1;
            visibility: visible;
        }
        
    .mobile-jurisdiction-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
    .mobile-jurisdiction-btn {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #092c62;
            background-color: #ffffff;
            color: #092c62;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }
        
    .mobile-jurisdiction-btn:focus {
            outline: none;
            box-shadow: none;
        }
        
    .mobile-jurisdiction-btn:active {
            outline: none;
            box-shadow: none;
        }
        
    .mobile-jurisdiction-btn.active {
            background-color: #092c62;
            color: white;
            outline: none;
        }
        
    .mobile-state-selector {
            margin-top: 10px;
        }
        
    .mobile-state-select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #000000;
            border-radius: 8px;
            font-size: 16px;
            background-color: #ffffff;
            color: #000000 !important;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            min-height: 48px;
            line-height: 1.6;
            box-sizing: border-box;
            vertical-align: middle;
        }
        
    .mobile-state-select option {
            background-color: #ffffff;
            color: #000000;
        }

/* Set jurisdiction selector height CSS variable */
.mobile-jurisdiction-selector {
            background-color: #ffffff;
            border-top: 2px solid #000000 !important;
            border-bottom: 2px solid #000000 !important;
            overflow: hidden;
            transition: all 0.3s ease;
            z-index: 1001;
            position: fixed;
            top: 60px; /* Fixed position below header */
            left: 0;
            right: 0;
            height: var(--jurisdiction-selector-height, 60px); /* Default to 60px when not expanded */
            width: 100%;
        }

/* Update jurisdiction selector height when expanded */
.mobile-jurisdiction-selector.expanded {
            --jurisdiction-selector-height: 200px;
            height: 200px;
        }

/* Update jurisdiction selector height when collapsed */
.mobile-jurisdiction-selector:not(.expanded) {
            --jurisdiction-selector-height: 60px;
            height: 60px;
        }

/* Handle hidden jurisdiction selector */
.mobile-jurisdiction-selector.hidden {
            --jurisdiction-selector-height: 0;
            height: 0;
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        
/* iOS-compatible watermark using a pseudo-element on the body */
body.mobile-device-detected::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--real-vh); /* Fallback for older browsers */
    height: calc(var(--real-vh, 1vh) * 100); /* Use dynamic viewport height */
    background-image: url('../images/icons/TaxBertSmall.png?cb=524284725');
    background-size: 300px 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; /* This should be safe on the body pseudo-element */
    opacity: 0.6;
    z-index: 99998; /* Position it just behind the mobile interface */
    pointer-events: none;
}
        
        /* Ensure messages appear above the watermark */
        .mobile-message {
            position: relative;
            z-index: 2;
        }
        
        .mobile-message.bot {
            z-index: 2;
        }
        
        .mobile-bot-icon {
            position: relative;
            z-index: 2;
        }
        
        .mobile-bot-content {
            position: relative;
            z-index: 2;
        }
        
        .mobile-message {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 16px;
            line-height: 1.4;
            word-wrap: break-word;
            margin-bottom: 8px;
        }
        
        .mobile-message.user {
            align-self: flex-end;
            background-color: #757575;
            color: white;
            border-bottom-right-radius: 4px;
            margin-left: auto;
        }
        
        .mobile-message.bot {
            align-self: flex-start;
            background-color: #e0e0e0;
            color: #333333;
            border: 1px solid #cccccc;
            border-bottom-left-radius: 4px;
            margin-right: auto;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        
        .mobile-bot-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #cce6ff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            align-self: flex-end;
            margin-top: 0;
            margin-bottom: 0;
        }
        
        .mobile-bot-icon img {
            width: 24px;
            height: 24px;
            object-fit: cover;
        }
        
        .mobile-bot-content {
            flex: 1;
            padding: 12px 16px;
            background-color: #e0e0e0;
            border-radius: 18px;
            border-bottom-left-radius: 4px;
            color: #333333;
            position: relative;
        }
        
        /* Mobile Message Actions */
        .mobile-message-actions {
            display: flex;
            gap: 8px;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 8px;
        }
        
        /* Mobile Copy Button - positioned on the left */
        .mobile-message-actions .mobile-copy {
            order: -1;
        }
        
        /* Mobile Thumbs Buttons - positioned on the right */
        .mobile-message-actions .mobile-thumbs-up,
        .mobile-message-actions .mobile-thumbs-down {
            order: 1;
        }
        
        /* Group thumbs buttons together on the right */
        .mobile-thumbs-group {
            display: flex;
            gap: 8px;
        }
        
        /* Mobile Message Actions HR Line */
        .mobile-bot-content:has(.mobile-message-actions)::after {
            content: '';
            position: absolute;
            bottom: 52px;
            left: 12px;
            right: 12px;
            height: 1px;
            background-color: #2c2c2e;
        }
        
        .mobile-action-btn {
            background: none;
            border: 1px solid #3a3a3c;
            color: #8e8e93;
            padding: 6px 8px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 36px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-action-btn:hover {
            background-color: #2c2c2e;
            color: #ffffff;
        }
        
        .mobile-action-btn:active {
            background-color: #3a3a3c;
        }
        
        .mobile-action-btn.active {
            background-color: #007AFF;
            color: white;
            border-color: #007AFF;
        }
        
        .mobile-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* Mobile Feedback Modal */
        .mobile-feedback-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: calc(var(--real-vh) * 100);
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .mobile-feedback-content {
            background-color: #ffffff;
            border-radius: 12px;
            width: 100%;
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid #000000;
        }
        
        .mobile-feedback-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 20px 10px 20px;
            border-bottom: 1px solid #000000;
        }
        
        .mobile-feedback-header h3 {
            margin: 0;
            color: #000000;
            font-size: 18px;
            font-weight: 600;
        }
        
        .mobile-feedback-close {
            background: none;
            border: none;
            color: #000000;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-feedback-body {
            padding: 20px;
        }
        
        .mobile-feedback-body p {
            color: #000000;
            margin-bottom: 15px;
            font-size: 16px;
            line-height: 1.4;
        }
        
        .mobile-feedback-textarea {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            border: 1px solid #000000;
            border-radius: 8px;
            background-color: #ffffff;
            color: #000000;
            font-size: 16px;
            resize: vertical;
            box-sizing: border-box;
        }
        
        .mobile-feedback-textarea::placeholder {
            color: #666666;
        }
        
        .mobile-feedback-footer {
            display: flex;
            gap: 10px;
            padding: 20px;
            border-top: 1px solid #000000;
        }
        
        .mobile-feedback-cancel,
        .mobile-feedback-submit {
            flex: 1;
            padding: 12px 20px;
            border: 1px solid #000000;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .mobile-feedback-cancel {
            background-color: #e6e7e8;
            color: #000000;
        }
        
        .mobile-feedback-cancel:hover {
            background-color: #d0d1d2;
        }
        
        .mobile-feedback-submit {
            background-color: #092c62;
            color: #ffffff;
        }
        
        .mobile-feedback-submit:hover {
            background-color: #1d4f99;
        }
        
        /* Mobile Copy Modal */
        .mobile-copy-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: calc(var(--real-vh) * 100);
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .mobile-copy-content {
            background-color: #ffffff;
            border-radius: 12px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid #000000;
        }
        
        .mobile-copy-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 20px 10px 20px;
            border-bottom: 1px solid #000000;
        }
        
        .mobile-copy-header h3 {
            margin: 0;
            color: #000000;
            font-size: 18px;
            font-weight: 600;
        }
        
        .mobile-copy-close {
            background: none;
            border: none;
            color: #000000;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-copy-body {
            padding: 20px;
        }
        
        .mobile-copy-body p {
            color: #000000;
            margin-bottom: 15px;
            font-size: 16px;
            line-height: 1.4;
        }
        
        .mobile-copy-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .mobile-copy-with-citations,
        .mobile-copy-without-citations {
            padding: 12px 20px;
            border: 1px solid #092c62;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: #ffffff;
            color: #092c62;
        }
        
        .mobile-copy-with-citations:hover,
        .mobile-copy-without-citations:hover {
            background-color: #092c62;
            color: #ffffff;
        }

        /* Mobile Toast */
        .mobile-toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 20px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 10001;
            opacity: 0;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .mobile-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Mobile Loading Overlay */
        .mobile-loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        
        .mobile-loading-spinner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: #ffffff;
            font-size: 16px;
        }
        
        .mobile-loading-spinner i {
            font-size: 24px;
            color: #007AFF;
        }

        /* Mobile Chat Item Loading State */
        .mobile-chat-item {
            position: relative;
        }
        
        .mobile-chat-item.mobile-chat-item-loading {
            background-color: #2c2c2e;
            opacity: 0.7;
        }
        
        .mobile-chat-item.mobile-chat-item-loading::after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border: 2px solid #007AFF;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: translateY(-50%) rotate(0deg); }
            100% { transform: translateY(-50%) rotate(360deg); }
        }

body.mobile-device-detected .mobile-chat-view {
    display: flex !important;
    flex-direction: column !important;
    height: var(--real-vh) !important;
    height: 100dvh !important; /* Use dynamic viewport height where supported */
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    z-index: 1000 !important;
}
body.mobile-device-detected .mobile-jurisdiction-selector {
    grid-row: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
}

body.mobile-device-detected .mobile-messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    position: fixed;
    top: calc(var(--mobile-header-height, 0px) + var(--jurisdiction-selector-height, 0px));
    left: 0;
    right: 0;
    bottom: 80px;
    z-index: 1;
    padding: 20px;
    margin: 0;
    border: none;
    box-sizing: border-box;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
}

        
.mobile-message-input::placeholder {
            color: #666666;
        }
        
.mobile-send-btn {
            background-color: #3a3a3c;
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: background-color 0.2s;
            cursor: pointer;
            flex-shrink: 0;
        }
        
.mobile-send-btn:not(:disabled) {
            background-color: #092c62;
            cursor: pointer;
        }
        
.mobile-send-btn:not(:disabled):hover {
            background-color: #1d4f99;
        }
        
.mobile-send-btn:disabled {
            background-color: #3a3a3c;
            cursor: not-allowed;
        }
        
/* Mobile Input Container - Prevent scrolling */
.mobile-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    padding: 15px 20px;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0));
    margin: 0;
    background-color: #ffffff;
    border-top: 2px solid #000000;
    box-sizing: border-box;
    z-index: 2147483647;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
    pointer-events: auto;
    transition: transform 0.3s ease, bottom 0.3s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body.mobile-keyboard-open .mobile-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 15px 20px !important;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0)) !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border-top: 2px solid #000000 !important;
    box-sizing: border-box !important;
    z-index: 2147483647 !important;
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
    overscroll-behavior: none !important;
    pointer-events: auto !important;
    transition: none !important;
    transform: translateY(0) translateZ(0) !important;
    -webkit-transform: translateY(0) translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}


.mobile-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 8px;
    border: 1px solid #000000;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
}

/* Message Input - Prevent scrolling */
.mobile-message-input {
    flex: 1;
    border: none;
    background: none;
    padding: 10px 12px;
    font-size: 16px;
    height: 36px;
    max-height: 36px;
    min-height: 36px;
    outline: none;
    color: #000000;
    line-height: 16px;
    box-sizing: border-box;
    overflow: hidden;
    resize: none;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
    -webkit-user-select: text;
    user-select: text;
}

/* Send Button - Prevent scrolling */
.mobile-send-btn {
    background-color: #092c62;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
}

/* Adjust main layout containers */
#mainContainer {
            flex-direction: column !important; /* Ensure vertical stacking on mobile */
            min-width: auto !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important; /* Remove padding to maximize space */
            box-sizing: border-box;
        }
#mainHeader {
            display: none !important;
        }
#mainContentColumn {
            min-width: auto !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 10px !important; /* Add some horizontal padding */
            box-sizing: border-box;
        }

/* Hide the left sidebar on mobile */
#sidebarMainContent {
            display: none !important;
            width: 0 !important; /* Ensure it takes no space */
            overflow: hidden !important; /* Hide any overflowing content */
        }

/* Hide the left sidebar on mobile */
#sidebarMainContent,
        aside, /* Common tag for sidebars */
        nav.main-navigation, /* Common class for main navigation */
        .left-sidebar, /* Common class name */
        .sidebar { /* Common class name */
            display: none !important;
            width: 0 !important;
            overflow: hidden !important;
        }

/* Adjust main header layout */
.taxbert-header-container {
            flex-direction: column;
            align-items: center;
            padding: 10px 0 !important; /* Add some vertical padding */
            margin: 0 auto !important; /* Center the container */
            width: 95%; /* Slightly less than 100% to prevent edge issues */
            box-sizing: border-box;
        }

.taxbert-header-container #taxbert-icon {
            margin-left: 0 !important;
            margin-top: 0; /* Reset margin-top */
            margin-bottom: 10px; /* Add space below icon */
        }

.taxbert-header-container span { /* TaxBert title */
            margin: 0 !important; /* Remove all margins */
            padding: 0 !important; /* Remove all padding */
            font-size: 18px; /* Adjust font size for mobile */
            text-align: center;
            width: 100%; /* Ensure it takes full width */
            margin-bottom: 10px; /* Space below title */
        }

/* Adjust jurisdiction buttons and state select */
.taxbert-header-container > .m-1 {
            margin: 5px 0 !important; /* Adjust margin for vertical stacking */
            width: 100%; /* Ensure full width */
            display: flex; /* Use flex to align inner elements */
            justify-content: center; /* Center content */
        }

.taxbert-header-container .input-group {
            width: 100%; /* Ensure input group takes full width */
            max-width: 300px; /* Limit max width for better appearance */
        }

.state-select-hidden {
            display: block !important; /* Ensure it can be shown by JS */
            width: 100%;
        }

/* Adjust chat header buttons */
.chat-header-buttons {
            position: static;
            margin: 10px auto 0 auto; /* Center buttons and add top margin */
            width: 95%; /* Adjust width */
            flex-wrap: wrap; /* Allow buttons to wrap */
            justify-content: center;
            gap: 10px; /* Increase gap for better touch targets */
        }

.chat-header-button {
            flex-grow: 1;
            max-width: 150px; /* Set a max-width for buttons */
            min-width: 120px; /* Ensure a minimum width */
            justify-content: center;
            padding: 8px 10px; /* Increase padding for better touch targets */
            font-size: 16px; /* Increase font size */
        }

/* Adjust chat sidebar for mobile */
.chat-sidebar {
            width: 100%; /* Take full width on mobile */
            height: calc(var(--real-vh) - 97px); /* Adjust height to fill screen */
            top: 97px; /* Position below header */
            left: 0; /* Slide in from left */
            transform: translateX(-100%); /* Hidden to the left */
            border-left: none;
            border-right: 1px solid #2d2d2d; /* Add border to the right */
        }

.chat-sidebar.open {
            transform: translateX(0); /* Slide in from left */
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); /* Adjust shadow */
        }

/* Main content adjustments */
.taxbert-wrapper {
            height: auto; /* Allow height to adjust */
            padding-top: 10px; /* Add some padding at the top */
        }

.taxbert-container {
            padding: 10px; /* Reduce padding */
        }

.taxbert-user-message,
.taxbert-bot-message {
            width: 90%; /* Make message bubbles wider */
        }

.taxbert-bot-message {
            margin-left: 5px; /* Adjust margin for bot message */
        }

.taxbert-bot-icon {
            margin-right: 5px; /* Adjust margin for bot icon */
        }

.taxbert-input-container {
            flex-wrap: wrap; /* Allow items to wrap */
            padding: 10px;
        }

.taxbert-question {
            width: 100%; /* Full width for textarea */
            margin-right: 0;
            margin-bottom: 10px; /* Space below textarea */
        }

#submit-button {
            width: 100%; /* Full width for send button */
            margin-right: 0 !important;
        }

#current-chat-title {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 10px;
            text-align: center;
            width: 100%;
        }
}

/* Unified behavior for both new and loaded chats when keyboard is open */
body.mobile-keyboard-open .mobile-chat-header,
body.mobile-keyboard-open .mobile-jurisdiction-selector {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    visibility: hidden !important;
    overflow: hidden !important;
    transform: translateY(-100%) !important;
    z-index: -1 !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
    overscroll-behavior: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease !important;
}

/* Unified messages container behavior */
body.mobile-keyboard-open .mobile-messages-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--keyboard-height, 0) + 80px) !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    z-index: 1 !important;
}

/* Watermark is commented out */
.mobile-messages-container {
    overflow-y: auto;
    padding: 20px 20px 0 20px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    -webkit-overflow-scrolling: touch;
    border: none;
    margin: 0;
    box-sizing: border-box;
    position: fixed;
    top: calc(60px + var(--jurisdiction-selector-height, 60px)); /* Add this line */
    left: 0;
    right: 0;
    bottom: 80px;
    height: auto !important; /* Add this line */
    transform: translateZ(0);
    will-change: transform;
    z-index: 1;
    transition: height 0.3s ease, top 0.3s ease;
    /* background-image: url('/images/icons/TaxbertSmallWatermark.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 225px 171px;
    background-attachment: fixed; */

}
.mobile-messages-container > * {
    position: relative;
    z-index: 2; /* messages on top of watermark */
}
/* Unified chat view behavior */
body.mobile-keyboard-open .mobile-chat-view {
    height: calc(var(--real-vh) * 100) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    contain: layout style paint !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}

/* Ensure consistent input container behavior */
body.mobile-keyboard-open .mobile-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 15px 20px !important;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0)) !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border-top: 2px solid #000000 !important;
    box-sizing: border-box !important;
    z-index: 2147483647 !important;
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
    overscroll-behavior: none !important;
    pointer-events: auto !important;
    transition: none !important;
    transform: translateY(0) translateZ(0) !important;
    -webkit-transform: translateY(0) translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}


/* PDF Print Styles */
@media print {
    /* Set page margins */
    @page {
        margin: 40pt 60pt 30pt 60pt !important; /* Top 40pt, right/left 60pt, bottom 30pt (reduced by 25%) */
        size: auto;
    }
    
    body {
        margin: 40pt 60pt 30pt 60pt !important; /* Top 40pt, right/left 60pt, bottom 30pt (reduced by 25%) */
        padding: 0 !important;
        width: calc(100% - 120pt) !important; /* Adjust width to account for margins */
    }
    
    /* Ensure content has proper margins for printing */
    .conversation-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Adjust message positioning */
    .taxbert-user-message {
        width: 70% !important; /* Restored to original width */
        margin-left: -15pt !important; /* Pull left to create more whitespace on right - reduced from -30pt */
        margin-right: auto !important;
    }
    
    /* Bot messages and icon */
    .pdf-bot-flex-container {
        width: 100% !important;
        margin-left: 15pt !important; /* Push right to create more whitespace on left - reduced from 30pt */
        margin-right: 0 !important;
        justify-content: flex-end !important;
    }
    
    .taxbert-bot-message {
        width: 65% !important; /* Reduced from 70% */
    }
    
    /* Adjust header layout */
    .pdf-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin-bottom: 50pt !important; /* More space below header - increased from 40pt */
        width: 100% !important;
    }
    
    .pdf-header h1 {
        font-size: max(10pt, min(16pt, 3vw)) !important; /* Smaller max size, minimum 10pt */
        margin-left: auto !important; /* Push title to the right */
        margin-right: 0 !important;
        text-align: right !important;
        max-width: 60% !important; /* Reduced from 65% */
    }
    
    .pdf-header span {
        text-align: left !important;
        white-space: nowrap !important;
        margin-right: auto !important; /* Push date to the left */
        margin-left: -30pt !important; /* Pull date more to the left */
    }
}