:root{
    --bg: #ffffff;
    --text: #2b2f33;
    --muted: #66707a;
    --border: #d8e1f0;
    --brand: #2e74ff;
    --brand-10: rgba(46,116,255,0.10);
    --success: #38c172;
  }

/* Updated General Styles */
    html, body {
     
      height: 100%;
      margin: 0;
      background-color: #f8f9fa; /* Light background for better readability */
    }
    body {
      display: flex;
      flex-direction: column;
      color: #212529; /* Dark text for contrast */
    }

    /* Header Styles */
    header {
      height: 3em;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .75rem .75rem;
      /*border-bottom: 1px solid #ccc;*/
    }
    .global-header {
      width: 100%;
      padding: 0.25rem 1rem;
      background-color: #ddd;
      /*border-bottom: 1px solid #bbb;*/
    }

    /* Main and Navigation Styles */
    main {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    nav {
      width: 3.5rem;
      background-color: #3e4b58;
      color: #f0f0f0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /*padding: 0.6rem 0; /* Added padding for better spacing */
    }
    nav .nav-item {
      display: flex;
      width:100%;
      flex-direction: column;
      align-items: center;
      /*margin: 0.5rem 0; /* Added margin for spacing between nav-items */
      cursor: pointer;
    }
    nav .nav-item i {
      font-size: 1.2rem;
      padding: 0.5rem; /* Adjusted padding for icon spacing */
    }
    nav .nav-item.active {
      background-color: #fff;
      color: #212529; /* Adjusted active state colors */
    }
    nav .top, nav .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Workboard and Page Styles */
    .workboard {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .page {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .page.active {
      display: flex;
    }

    /* Workspace and Section Styles */
    .workspace {
      flex: 1;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .section {
      flex: 1; /* Ensures sections equally spread out to fill available space */
      height: 100%;
      overflow-y: auto;
      padding: 1rem;
      box-sizing: border-box;
    }
    .section:first-child {
      border-left: none; /* Removed border-left for the first section */
    }
    .section-locked {
      display: flex; 
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      padding:0;
    }    

    .sticky-header {      
      padding:.5rem;
      /*border-bottom: 1px solid #ccc;*/
    }
    .sticky-body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: .5rem;
    }
    .sticky-footer {
      flex-shrink: 0;
      display: flex;
      gap: 0.5rem;
      border-top: 1px solid #ccc;
      padding: 0.5rem;
     
    }

    /* Page Header Styles */
    .page-header {
      width: 100%;
      padding: 0.3rem .6rem 0px;
      background-color: #f0f0f0;
      border-top: 1px solid #ccc;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .header-center {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .header-center input {
      width: 30%;
      padding: 0.25rem 0.5rem;
    }
    .header-right {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    /* Offcanvas Styles */
    .offcanvas {
      position: fixed;
      top: 3rem;
      right: -300px;
      width: 300px;
      height: calc(100% - 3rem);
      background-color: #fff;
      border-left: 1px solid #ccc;
      box-shadow: -2px 0 5px rgba(0,0,0,0.1);
      transition: right 0.3s ease;
      z-index: 1000;
    }
    .offcanvas.show {
      right: 0;
    }
    .offcanvas-content {
      padding: 1rem;
    }
    body.offcanvas-open main {
      margin-right: 300px;
      transition: margin-right 0.3s ease;
    }

    /* Section Width Classes */
    .section[class*="sec-"] {
      flex: 0 0 auto;
    }
    .sec-1 { width: 8.33%; }
    .sec-2 { width: 16.66%; }
    .sec-3 { width: 25%; }
    .sec-4 { width: 33.33%; }
    .sec-5 { width: 41.66%; }
    .sec-6 { width: 50%; }
    .sec-7 { width: 58.33%; }
    .sec-8 { width: 66.66%; }
    .sec-9 { width: 75%; }
    .sec-10 { width: 83.33%; }
    .sec-11 { width: 91.66%; }
    .sec-12 { width: 100%; }

    .sec-10p { width: 10%; }
    .sec-20p { width: 20%; }
    .sec-30p { width: 30%; }
    .sec-40p { width: 40%; }
    .sec-50p { width: 50%; }
    .sec-60p { width: 60%; }
    .sec-70p { width: 70%; }
    .sec-80p { width: 80%; }
    .sec-90p { width: 90%; }
    .sec-100p { width: 100%; }

    /* Adjust bi-grid icon size to match nav icons */
    .bi-grid {
      font-size: 1.5rem;
    }
    .sb-toggle {
      font-size: 1.5rem; /* Adjusted size to match bi-grid */
      cursor: pointer; /* Added cursor pointer for better UX */
    }
    .sb-toggle.active {
      border-bottom: 2px solid #3e4b58; /* Added bottom border for active state */
    }
    /* Button Styles */
    .btn-block {
      display: block;
      width: 100%;
    }

   .list-group-item-action{
      cursor: pointer;
   }






/*==========================*/
    .chat-session{
      border-right:1px solid #ddd;
    }
    .chat-list {  
     
      border-radius: 0.5rem;
    
    }
    .chat-item {
      display: flex;
      align-items: center;
      padding: 0.75rem;
      border-bottom: 1px solid #cccccc;
      cursor: pointer;
    }
    .chat-item:hover {
      background-color: #ddd;
    }
    .chat-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #666;
      margin-right: 0.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: white;
      text-transform: uppercase;
      font-size: 0.9rem;
    }
    .chat-content {
      flex-grow: 1;
    }
    .chat-name {
      font-weight: bold;
      font-size: 0.95rem;
    }
    .chat-preview {
      font-size: 0.85rem;
      /*color: #ccc;*/
    }
    .chat-time {
      font-size: 0.75rem;
      /*color: #aaa;*/
      white-space: nowrap;
    }
    .chat-icon {
      margin-left: 0.5rem;
    }
    .icon-whatsapp { color: #25D366; }
    .icon-globe { color: #5bc0de; }
    .icon-chat { color: #0d6efd; }
    .icon-facebook { color: #4267B2; }



  /*===============================*/


.chat-container {
    max-width: 600px;
    margin: 2rem auto;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .chat-bubble {
    max-width: 90%;
    padding: 0.5rem .5rem;
    border-radius: 1rem;
    margin-bottom: 0.25rem;
    position: relative;
    word-wrap: break-word;
    font-size: .8rem;
  }
  .chat-bubble.incoming {
    background-color: #e9ecef;
    align-self: flex-start;
    border-bottom-left-radius: 0;
  }
  .chat-bubble.outgoing {
    background-color: #d1e7dd;
    align-self: flex-end;
    border-bottom-right-radius: 0;
    margin-left: auto;
  }
  .chat-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
  }
  .chat-timestamp {
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    margin: 1rem 0 0.5rem;
  }
  .message-container {
    display: flex;
    flex-direction: column;
  }
  .translated-text {
    font-size: 0.75rem;
    font-style: italic;
    color: #6c757d;
    margin-top: 0.25rem;
  }
  .label-ai {
    font-size: 0.75rem;
    color: #198754;
    text-align: right;
  }
  .label-agent {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
  }
  .label-kli {
    font-size: 0.65rem;
    color: #198754;
    margin-bottom: 0.1rem;
  }
  .chat-input {
    display: flex;
    gap: 0.5rem;
  }
  .chat-input textarea {
    flex: 1;
    resize: none;
  }
  .chat-input-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .kli-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6c757d;
    padding-top: 1rem;
  }
  .kli-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .kli-label {
    margin-left: 0.25rem;
  }
  .kli-toggle {
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    color: #198754;
  }
  .kli-control strong {
    color: #6c757d;
  }
  .kli-control i.bi-gear {
    color: #6c757d;
  }
  .kli-label .highlight {
    color: #198754;
  }





  /*---------------------------------------*/


   .email-container {border-radius: .5rem; }
    .main-header { padding: 1rem 1.5rem; border-bottom: 1px solid #dee2e6; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
    .main-header h5 { margin: 0; font-size: 1.25rem; }
    .email-header-meta { font-size: .9rem; color: #6c757d; }
    .header-options i { margin-left: 1rem; color: #6c757d; cursor: pointer; }
    .header-options i:hover { color: #343a40; }
    .email-message { padding: 1.5rem; border-top: 1px solid #dee2e6; }
    .message-meta { font-size: .85rem; color: #6c757d; display: flex; justify-content: space-between; margin-bottom: .75rem; }
    .email-body { padding: 0 1.5rem; }
    .email-attachment { margin: 1rem 0; }
    .email-reply { border-top: 1px solid #dee2e6; background: #f8f9fa; padding: 1rem 1.5rem; }
    .ribbon { background: #fff; border-bottom: 1px solid #dee2e6; padding: .5rem 1rem; display: flex; justify-content: space-between; align-items: center; }
    .ribbon-tabs span { margin-right: 1rem; cursor: pointer; padding-bottom: .25rem; }
    .ribbon-tabs .active { border-bottom: 2px solid #007bff; color: #007bff; }
    .crm-icons i { margin-left: 1rem; color: #6c757d; cursor: pointer; }
    .crm-icons i:hover { color: #343a40; }
    .ribbon-toolbar { padding: .5rem 1rem; border-bottom: 1px solid #dee2e6; display: flex; justify-content: center; align-items: center; background: #fff; flex-wrap: wrap; }
    .ribbon-toolbar i { font-size: 1.2rem; margin: 0 .5rem; color: #495057; cursor: pointer; }
    #editor { border: 1px solid #ced4da; border-radius: .25rem; padding: .75rem; min-height: 150px; background: #fff; }
    #editor:empty:before { content: attr(data-placeholder); color: #6c757d; }
    .reply-actions { margin-top: .75rem; display: flex; justify-content: flex-end; gap: .5rem; }


    /*-----------------------------------*/


    .email-list {border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; }
    .email-item { display: flex; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #eee; cursor: pointer; }
    .email-item.unread { background-color: #e9f5ff; }
    .email-item:hover { background-color: #f1f1f1; }
    .email-avatar { width: 40px; height: 40px; background-color: #6c757d; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: .75rem; text-transform: uppercase; }
    .email-content { flex: 1; overflow: hidden; }
    .email-subject { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .email-preview { font-size: .85rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .email-meta { text-align: right; margin-left: 1rem; flex-shrink: 0; }
    .email-time { font-size: .75rem; color: #adb5bd; }
    .email-icon { margin-top: .25rem; color: #6c757d; }


    /*+++++++++++++++++++++*/

     .sidebar { background: #fff; border-right: 1px solid #dee2e6; min-height: 100vh; }
    .sidebar .contact-name { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
    .sidebar .nav-link { color: #495057; padding: .5rem 1rem; }
    .sidebar .nav-link.active { background-color: #e9f5ff; font-weight: 500; }
    .history-list { padding: .2rem; }
    .history-item { display: flex; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid #eee; }
    .history-icon { font-size: 1.5rem; margin-right: 1rem; color: #0d6efd; flex-shrink: 0; }
    .history-content { flex: 1; }
    .history-time { font-size: .75rem; color: #adb5bd; }
    .history-title { font-weight: 500; }
    .history-desc { font-size: .875rem; color: #6c757d; }



    .agent-assist-suggestion:hover{
      cursor:pointer;
      color: rgb(0, 55, 128);
    }




  /* Layout container just for demo */
  .bar{
    display:flex;
    align-items:center;
    gap:24px;
    padding:10px 14px;
    border-bottom: 1px solid #eef2f7;
    max-width: 780px;
  }

  /* Call status pill */
  .call-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border: 1px solid var(--brand);
    /*background: var(--brand-10);*/
    /*color: var(--brand);*/
    border-radius: 999px;
    line-height: 1;
    font-size:.9em;
    font-weight: 500;
    user-select:none;
  }
  .call-pill svg{
    width:18px; height:18px; display:block;
  }

  /* User block */
  .user{
    display:flex;
    align-items:center;
    gap:12px;
    min-width: 0; /* enable text truncation */
    border-left:1px solid #eee;
    padding-left:1em;
  }
  .avatar{
    width:30px; height:30px; border-radius:50%;
    background: #eee;
    color: #ccc;
    flex: 0 0 auto;
    padding: 0 2.5px;
  }
  .user-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    min-width:0;
  }
  .name{
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px; /* adjust as needed */
  }
  .status{
    display:flex; align-items:center; gap:6px;
    font-size: 13px; color: var(--muted);
  }
  .dot{
    width:10px; height:10px; border-radius:50%;
    background: var(--success);
    box-shadow: 0 0 0 2px #e8f7ef inset;
  }
  .chevron{
    margin-left: 6px;
    flex:0 0 auto;
    color:#9aa3ad;
    cursor: pointer;
  }
  .chevron:hover{
   
  }


  /* Optional hover affordances if you later wire up menus */
  .user, .call-pill{ cursor: default; }