:root {
      --drawer-max-width: 400px;
      --drawer-min-width: 50px;
    }

    .tgabby-drawer {
      display: flex;
      position: fixed;
      top: 0;
      /* right: 0; */
      right: -350px;
      width: var(--drawer-max-width);
      height: 100vh;
      z-index: 9999;
      transition: 0.3s;
    }

    .tgabby-drawer.is-open {
      /* width: var(--drawer-max-width); */
      transition: 0.3s;
      right: 0;
    }

    .tgabby-drawer.is-close {
      width: var(--drawer-max-width);
      transition: 0.3s;
    }

    .tgabby-drawer.is-full-open {
      width: 100%;
      /* right: 0; */
      transition: 0.3s;
    }

    .tgabby-drawer__navi {
      display: flex;
      flex-flow: column nowrap;
      padding: 5px;
      height: 100vh;
      background-color: #ebebeb;
    }

    .tgabby-drawer__navi__btn {
      width: 40px;
      height: 50px;
      padding: 5px 0;
      cursor: pointer;
      border: none;
      background-color: #ebebeb;
      box-sizing: border-box;
    }
    @media(hover: hover) {
      .tgabby-drawer__navi__btn:hover {
        opacity: 0.8;
      }
    }
    .tgabby-drawer__navi__btn--small {
      width: 24px;
      height: 38px;
      margin: 0 0 0 auto;
      padding: 5px 0;
      margin-right: 3px;
    }

    .tgabby-drawer__navi__btn.is-active:last-child {
      border-top: 1px solid #dddddd;
      border-bottom: none;
      margin-bottom: 0;
    }

    .tgabby-drawer__navi__btn.is-close {
      display: none;
      /* visibility: hidden;
      transition: 3.3s; */
    }
    .tgabby-drawer__navi__btn.is-active {
      border-bottom: 1px solid #dddddd;
    }

    .tgabby-panel {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #ebebeb;
      display: block;
      border-left: 1px solid #dddddd;
      box-sizing: border-box;
      align-items: flex-start;
      background-color: #ebebeb;
    }

    .tgabby-panel.is-close {
      /* display: none; */
      display: block;
      transition: 0.3s;
    }

    /* .tgabby-panel__iframe {
        width: 100%;
        height: 100%;
      } */
    .wrapper {
      /* display: flex; */
      overflow-x: hidden;
      width: calc(100% - var(--drawer-min-width));
      flex-flow: row wrap;
      align-items: flex-start;
      align-content: flex-start;
      transition: 0.3s;
    }

    .wrapper.is-shrink {
      width: calc(100% - var(--drawer-max-width));
      transition: 0.3s;
    }
    header.is-shrink .header_bottom {
      width: calc(100% - var(--drawer-max-width));
      transition: 0.3s;
      box-sizing: border-box;
    }
    /* .container_inner.is-shrink {
      width: calc(100% - var(--drawer-max-width));
      transition: 0.3s;
    } */
    #tgabbySelector {
      padding: 30px 20px;
      text-align: center;
      margin-top: 80px;
    }

    #tgabbySelector h1 {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      color: #000000;
      margin-bottom: 20px;
    }

    #tgabbySelector button {
      display: block;
      margin: 10px auto;
      padding: 15px 20px;
      width: 90%;
      max-width: 400px;
      font-size: 16px;
      color: #fff;
      background-color: #d01e1e;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

    #tgabbySelector button:hover {
      background-color: #b51a1a;
    }

    #tgabby-chat-area {
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    #tgabby-chat-header {
      background-color: #d01e1e;
      color: white;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #tgabby-chat-header button {
      background: none;
      border: none;
      font-size: 18px;
      color: white;
      cursor: pointer;
      margin-left: 10px;
    }

    /* ── Native chat window (replaces the hosted-Dify iframe) ── */
    #tgabby-messages {
      flex-grow: 1;
      overflow-y: auto;
      padding: 15px 12px;
      background-color: #ffffff;
      -webkit-overflow-scrolling: touch;
    }

    .gabby-msg {
      display: flex;
      margin-bottom: 12px;
    }
    .gabby-msg--user {
      justify-content: flex-end;
    }
    .gabby-msg__bubble {
      max-width: 88%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1.55;
      color: #222;
      background-color: #f1f1f1;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-align: left;
    }
    .gabby-msg--user .gabby-msg__bubble {
      background-color: #d01e1e;
      color: #ffffff;
      border-bottom-right-radius: 4px;
      white-space: pre-wrap;
    }
    .gabby-msg--bot .gabby-msg__bubble {
      background-color: #f1f1f1;
      border-bottom-left-radius: 4px;
    }
    .gabby-msg--error .gabby-msg__bubble {
      background-color: #fdecea;
      color: #8a1f1f;
    }
    .gabby-msg__bubble p {
      margin: 0 0 8px 0;
    }
    .gabby-msg__bubble p:last-child {
      margin-bottom: 0;
    }
    .gabby-msg__bubble .gabby-h {
      font-weight: bold;
      font-size: 15px;
    }
    .gabby-msg__bubble ul,
    .gabby-msg__bubble ol {
      margin: 0 0 8px 18px;
      padding: 0;
    }
    .gabby-msg__bubble li {
      margin-bottom: 3px;
    }
    .gabby-msg__bubble code {
      background: rgba(0, 0, 0, 0.07);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 13px;
    }
    .gabby-msg__bubble pre {
      background: #2b2b2b;
      color: #eee;
      padding: 10px;
      border-radius: 8px;
      overflow-x: auto;
      font-size: 13px;
    }
    .gabby-msg__bubble pre code {
      background: none;
      padding: 0;
      color: inherit;
    }
    .gabby-msg__bubble a {
      color: #cc0000;
      text-decoration: underline;
    }
    .gabby-msg--user .gabby-msg__bubble a {
      color: #ffffff;
    }
    .gabby-table-wrap {
      overflow-x: auto;
      margin: 0 0 8px 0;
    }
    .gabby-msg__bubble table {
      border-collapse: collapse;
      font-size: 13px;
      min-width: 60%;
    }
    .gabby-msg__bubble th,
    .gabby-msg__bubble td {
      border: 1px solid #ddd;
      padding: 5px 8px;
      text-align: left;
    }
    .gabby-msg__bubble th {
      background: #f5f5f5;
      font-weight: bold;
    }

    /* typing indicator */
    .gabby-typing {
      display: inline-flex;
      gap: 4px;
      padding: 4px 0;
    }
    .gabby-typing span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #b5b5b5;
      animation: gabby-blink 1.2s infinite ease-in-out;
    }
    .gabby-typing span:nth-child(2) { animation-delay: 0.2s; }
    .gabby-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes gabby-blink {
      0%, 80%, 100% { opacity: 0.25; }
      40% { opacity: 1; }
    }

    /* input bar */
    #tgabby-input-bar {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      padding: 10px 12px;
      background: #ffffff;
      border-top: 1px solid #e0e0e0;
    }
    #tgabby-input {
      flex-grow: 1;
      resize: none;
      border: 1px solid #cccccc;
      border-radius: 10px;
      padding: 9px 12px;
      font-size: 14px;
      line-height: 1.4;
      font-family: inherit;
      max-height: 120px;
      box-sizing: border-box;
      background: #ffffff;
      color: #222;
    }
    #tgabby-input:focus {
      outline: none;
      border-color: #d01e1e;
    }
    #tgabby-input:disabled {
      background: #f7f7f7;
    }
    #tgabby-send {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 10px;
      background-color: #d01e1e;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #tgabby-send:hover {
      background-color: #b51a1a;
    }
    #tgabby-send:disabled {
      background-color: #d8a0a0;
      cursor: default;
    }
    #tgabby-new-chat {
      font-size: 20px;
      line-height: 1;
    }

    /* Shared popup overlay */

    /* Shared popup box */
    .tgabby-popup-box strong {
      font-weight: bold;
    }

    /* Guide popup wider and left-aligned for readability */
    #tgabby-guide-popup .tgabby-guide-box {
      min-width: 50%;
      max-width: 98%;
      text-align: left;
      max-height: 90vh;
      overflow-y: auto;
      font-size: 15px;
    }

    #tgabby-guide-popup .tgabby-guide-box h2 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 22px;
      font-weight: bold;
    }

    #tgabby-guide-popup .tgabby-guide-box p {
      margin: 0 0 12px 0;
      line-height: 1.5;
      color: #333;
    }

    #tgabby-guide-popup .tgabby-guide-box ul {
      margin: 0 0 14px 20px;
      padding: 0;
      line-height: 1.5;
      color: #333;
    }

    #tgabby-guide-popup.is-open {
      display: block;
    }

    #tgabby-guide-link {
      cursor: pointer;
    }

    /* Responsive */
    @media (max-width: 768px) {
      #tgabbySelector button {
        font-size: 14px;
        padding: 12px;
      }

      #tgabby-chat-header span {
        font-size: 16px;
      }
    }

    /* Sticky bottom disclaimer */
    #tgabby-disclaimer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #f8f8f8;
      border-top: 1px solid #e0e0e0;
      font-size: 12px;
      text-align: center;
      color: #666;
      padding: 15px 20px;
      line-height: 1.4;
      margin-top: 20px;
      box-sizing: border-box;
    }

    #tgabby-disclaimer a {
      color: #cc0000;
      text-decoration: underline;
      cursor: pointer;
    }

    /* Full Disclaimer Modal */
    #tgabby-disclaimer-modal {
      display: none;
    }

    #tgabby-disclaimer-modal.is-open {
      display: block;
    }

    #tgabby-disclaimer-modal .tgabby-overlay {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      ;
      background: rgba(0, 0, 0, 0.5);
    }

    #tgabby-read-disclaimer {
      cursor: pointer;
      /* color: #d40025; */
      text-decoration: underline;
      position: relative;
    }
    #tgabby-read-disclaimer:after {
      content: '';
      position: absolute;
      top: 0;
      right: -20px;
      width: 16px;
      height: 16px;
      background-image: url("icons/icon_expand.svg");
      background-size: cover;
    }

    .tgabby-modal-content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      min-width: 50%;
      max-width: 98%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      z-index: 101;
      font-size: 14px;
      line-height: 1.5;
    }

    .tgabby-modal-content h2 {
      font-size: 27px;
      font-weight: bold;
      margin-top: 0;
    }
    .tgabby-modal-content p {
      font-size: 15px;
      font-family: Heebo, sans-serif;
      margin: 15px 0;
    }

    .tgabby-modal-content button {
      margin-top: 20px;
      padding: 8px 18px;
      background: #cc0000;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    /* default shrink */
    .wrapper.is-shrink header .container_inner {
      width: 100%;
    }
    .wrapper.is-shrink header.sticky .header_bottom {
      width: calc(100% - var(--drawer-max-width));
      box-sizing: border-box;
    }
    .wrapper.is-shrink header.sticky .header_bottom .container_inner {
      width: 100%;
    }

    .wrapper.is-shrink footer .container_inner {
      width: 100% !important;
    }


    /* change main page width + drawer version */
    @media (width < calc(1000px + 400px)) {
      .wrapper.is-shrink header {
        top: 0 !important;
        margin-top: 0 !important;
        display: block;
        position: relative !important;
      }
      .wrapper.is-shrink header .header_top {
        height: auto;
        display: block !important;
        background-color: #0a0a0a !important;
      }
      .wrapper.is-shrink header .header_top .container {
          display: inline-block;
      }
      .wrapper.is-shrink header .header_top .left, .wrapper.is-shrink header .header_top .right {
          text-align: center;
          float: none;
          max-height: 30px;
      }
      .wrapper.is-shrink header nav.mobile_menu {
        display: block;
      }
      .wrapper.is-shrink header nav.main_menu {
        display: none;
      }
      /* .wrapper.is-shrink header .header_bottom {
        width: 100%;
        padding: 0;
      } */
      .wrapper.is-shrink header .header_bottom .container_inner {
        width: 100%;
        background-color: #0a0a0a;
      }
      .wrapper.is-shrink header .header_inner_left {
        top: 0;
        position: relative !important;
        left: 0 !important;
        margin-bottom: 0;
      }
      .wrapper.is-shrink header .logo_wrapper, .wrapper.is-shrink header .mobile_menu_button {
        display: table;
      }
      .wrapper.is-shrink header .logo_wrapper {
      height: 100px !important;
      left: 50%;
      display: table;
      position: absolute;
      /* margin-left: -50px; */
      }
      .wrapper.is-shrink header .side_menu_button {
        height: 100px !important;
      }
      .wrapper.is-shrink header nav.main_menu.right {
        margin-right: 0;
      }
      .wrapper.is-shrink header nav.mobile_menu {
        background-color: #0a0a0a !important;
        display: block;
      }
      .wrapper.is-shrink header nav.mobile_menu>ul {
          width: 768px;
          margin: 0 auto;
      }
      .wrapper.is-shrink .vc_gitem-animated-block, .wrapper.is-shrink .vc_gitem-zone , .wrapper.is-shrink .vc_gitem-zone-c {
        width: 100% !important;
      }
      .wrapper.is-shrink rs-module-wrap, .wrapper.is-shrink rs-module {
        width: calc(100vw - var(--drawer-max-width)) !important;
      }
      .wrapper.is-shrink .section_inner {
        width: calc(100vw - var(--drawer-max-width)) !important;
      }
    }

    @media (width < calc(768px + 400px)) {
      .wrapper.is-shrink .resources-link-item {
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        padding: 20px 20px 0 20px;
        height: 220px;
      }
      .wrapper.is-shrink footer .container_inner {
        width: 100% !important;
      }
      .wrapper.is-shrink footer .four_columns>div {
        width: 100% !important;
      }
    }
    @media (width < calc(576px + 400px)) {
      .wrapper.is-shrink .vc_column_container {
        width: 100%;
      }
      @media (width < 576px) {
        .wrapper {
          display: block;
          width: 100%;
        }
        .wrapper.is-shrink {
          /* display: block; */
          width: 100%;
          overflow: hidden;
        }
        .tgabby-drawer {
          height: calc(100svh - 50px);
          right: unset;
          width: 100%;
          /* position: relative; */
          /* height: 100%; */
          /* transition: 0.3s; */
        }
        .tgabby-drawer.is-close {
          width: 100%;
          /* top: 200%; */
          top: unset;
          bottom: -100%;
          transition: 0.3s;
        }
        .tgabby-drawer__navi {
          position: fixed;
          flex-flow: row nowrap;
          /* top: 100px; */
          bottom: 0;
          right: 0;
          height: fit-content;
          border-radius: 6px 0 0 0;
          height: 50px;
          /* width:  90px; */
          box-sizing: border-box;
          transition: 0.3s;
        }
        .tgabby-drawer__navi__btn {
          width: 40px;
          height: 40px;
          padding: 0 5px;
          box-sizing: border-box;
        }
        .tgabby-drawer__navi__btn.is-active:last-child {
          border-top: none;
        }
        .tgabby-drawer__navi__btn.is-active {
          border-bottom: none;
        }
        .tgabby-drawer__navi__btn img {
          max-width: 100%;
          height: auto;
          vertical-align: middle;
        }
        #tgabbyFullBtn, #tgabbyCloseBtn, #tgabbyNewWinBtn {
          display: none;
        }
        .tgabby-drawer.is-open .tgabby-drawer__navi {
          right: 0;
          bottom: calc(100% - 50px);
          border-radius: 0;
          width: 100%;
          justify-content: flex-end;
          transition: 0.3s;
        }
        .tgabby-panel {
          position: absolute;
          border-left: none;
          border-top: 1px solid #dddddd;
        }
        .tgabby-panel.is-close {
          /* top: -100vh; */
           transition: 0.3s;
           bottom: -100%;
        }
        .tgabby-panel.is-open {
          /* top: 50px; */
          bottom: -50px;
          transition: 0.3s;
        }
        .wrapper.is-shrink header .logo_wrapper {
          margin-left: 0;
        }
         #tgabby-chat-area {
          height: calc(100svh - 50px);
         }
      }

    }