/* ========================================
       BASE STYLES
    ======================================== */
    * {
      font-family: 'Prompt', sans-serif;
      box-sizing: border-box;
    }

    html {
      height: 100%;
      height: -webkit-fill-available;
    }

    body {
      height: 100%;
      height: -webkit-fill-available;
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    /* ========================================
       iOS SAFE AREAS
    ======================================== */
    @supports (padding: max(0px)) {
      .safe-top { padding-top: max(1rem, env(safe-area-inset-top)); }
      .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    }

    @supports (height: 100dvh) {
      .h-screen-safe { height: 100dvh !important; }
    }

    /* ========================================
       PREVENT iOS ZOOM
    ======================================== */
    textarea, input, select {
      font-size: 16px !important;
    }

    /* ========================================
       SCROLLBAR UTILITIES
    ======================================== */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .chat-textarea::-webkit-scrollbar { width: 8px; }
    .chat-textarea::-webkit-scrollbar-track { background: transparent; }
    .chat-textarea::-webkit-scrollbar-thumb { 
      background: #888; 
      border-radius: 5px; 
    }
    .chat-textarea::-webkit-scrollbar-thumb:hover { background: #555; }

    /* ========================================
       GLASS EFFECT
    ======================================== */
    .glass {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    :root:not(.dark) .glass {
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* ========================================
       CHAT INPUT CONTAINER
    ======================================== */
    .container-chat-options {
      position: relative;
      display: flex;
      background: linear-gradient(to bottom right, #7e7e7e, #363636, #363636, #363636, #363636);
      border-radius: 16px;
      padding: 1.5px;
      overflow: hidden;
    }

    .container-chat-options::after {
      position: absolute;
      content: "";
      top: -10px;
      left: -10px;
      background: radial-gradient(
        ellipse at center,
        #ffffff,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1),
        rgba(0, 0, 0, 0)
      );
      width: 30px;
      height: 30px;
      filter: blur(1px);
      pointer-events: none;
    }

    .chat-inner {
      display: flex;
      flex-direction: column;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      width: 100%;
      overflow: hidden;
    }

    /* Light Mode Overrides */
    :root:not(.dark) .chat-inner {
      background-color: rgba(255, 255, 255, 0.9);
    }

    :root:not(.dark) .container-chat-options {
      background: linear-gradient(to bottom right, #e0e0e0, #f5f5f5, #f5f5f5, #f5f5f5, #f5f5f5);
    }

    /* ========================================
       TEXTAREA STYLES
    ======================================== */
    .chat-textarea {
      background-color: transparent;
      border: none;
      width: 100%;
      min-height: 60px;
      max-height: 150px;
      color: #ffffff;
      font-size: 15px;
      padding: 15px 18px;
      resize: none;
      outline: none;
    }

    .chat-textarea:focus {
      outline: none;
      box-shadow: none;
    }

    .chat-textarea::placeholder {
      color: rgba(243, 246, 253, 0.6);
      transition: all 0.3s ease;
    }

    .chat-textarea:focus::placeholder {
      color: #363636;
    }

    :root:not(.dark) .chat-textarea {
      color: #1a1a1a;
    }

    :root:not(.dark) .chat-textarea::placeholder {
      color: rgba(54, 54, 54, 0.5);
    }

    :root:not(.dark) .chat-textarea:focus::placeholder {
      color: #999;
    }

    /* ========================================
       BUTTON STYLES
    ======================================== */
    .btns-add button {
      display: flex;
      color: rgba(255, 255, 255, 0.3);
      background-color: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 8px;
      border-radius: 8px;
    }

    .btns-add button:hover {
      transform: translateY(-3px);
      color: #ffffff;
      background-color: rgba(255, 255, 255, 0.1);
    }

    :root:not(.dark) .btns-add button {
      color: rgba(54, 54, 54, 0.4);
    }

    :root:not(.dark) .btns-add button:hover {
      color: #1a1a1a;
      background-color: rgba(0, 0, 0, 0.05);
    }

    /* Submit Button */
    .btn-submit {
      display: flex;
      padding: 2px;
      background-image: linear-gradient(to top, #292929, #555555, #292929);
      border-radius: 10px;
      box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);
      cursor: pointer;
      border: none;
      outline: none;
      transition: all 0.15s ease;
    }

    :root:not(.dark) .btn-submit {
      background-image: linear-gradient(to top, #590df2, #7c3aed, #590df2);
    }

    .btn-submit-inner {
      width: 40px;
      height: 40px;
      padding: 9px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      backdrop-filter: blur(3px);
      color: #8b8b8b;
      transition: all 0.3s ease;
    }

    :root:not(.dark) .btn-submit-inner {
      background: rgba(255, 255, 255, 0.3);
      color: #ffffff;
    }

    .btn-submit:hover .btn-submit-inner {
      color: #f3f6fd;
      filter: drop-shadow(0 0 5px #ffffff);
    }

    .btn-submit:active {
      transform: scale(0.92);
    }

    /* ========================================
       SIDEBAR STYLES
    ======================================== */
    aside {
      transition: width 0.3s ease, transform 0.3s ease;
    }

    .sidebar-text {
      white-space: nowrap;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    #sidebar.collapsed {
      width: 80px;
    }

    #sidebar.collapsed .sidebar-text {
      opacity: 0;
      transform: translateX(-8px);
      pointer-events: none;
    }

    #sidebar:not(.collapsed) .sidebar-text {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 0.12s;
    }

    /* Sidebar Header */
    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
    }

    .logo-wrapper {
      width: 40px;
      height: 40px;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .toggle-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
    }

    /* Collapsed State */
    #sidebar.collapsed .sidebar-header {
      justify-content: center;
      position: relative;
    }

    #sidebar.collapsed .logo-wrapper {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    #sidebar.collapsed .toggle-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      z-index: 1;
    }

    #sidebar.collapsed .sidebar-header:hover .toggle-btn {
      opacity: 1;
    }

    #sidebar.collapsed .sidebar-header:hover .logo-wrapper {
      opacity: 0;
    }

    #sidebar.collapsed #sidebarToggle svg {
      transform: rotate(180deg);
    }

    /* Expanded State */
    #sidebar:not(.collapsed) .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #sidebar:not(.collapsed) .logo-wrapper {
      margin-right: auto;
    }

    #sidebar:not(.collapsed) .toggle-btn {
      margin-left: auto;
    }

    /* ========================================
       MESSAGE BUBBLES
    ======================================== */
    .gradient-bot {
      background: #D3D3D3;
      color: #000000 !important;
    }

    :root:not(.dark) .gradient-bot {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      color: #1a1a1a !important;
    }

    .gradient-user {
      background: linear-gradient(90deg, #1e62ed, #590df2);
      color: white !important;
    }

    :root:not(.dark) .gradient-user {
      background: linear-gradient(90deg, #7c3aed, #590df2);
      color: white !important;
    }

    /* ========================================
       LIGHT MODE OVERRIDES
    ======================================== */
    :root:not(.dark) body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }

    :root:not(.dark) .chatinput {
      background: linear-gradient(to top, rgba(245, 247, 250, 1) 0%, rgba(245, 247, 250, 1) 60%, rgba(245, 247, 250, 0) 100%) !important;
    }

    :root:not(.dark) .text-white {
      color: #1a1a1a !important;
    }

    :root:not(.dark) .material-symbols-outlined {
      color: #1a1a1a !important;
    }

    :root:not(.dark) #newChatBtn,
    :root:not(.dark) .new-chat-desktop {
      background: linear-gradient(135deg, #7c3aed, #590df2) !important;
      color: #ffffff !important;
    }

    :root:not(.dark) #newChatBtn span,
    :root:not(.dark) .new-chat-desktop span {
      color: #ffffff !important;
    }

    :root:not(.dark) .new-chat-desktop:hover {
      background: #7c3aed !important;
    }

    /* Tags */
    :root:not(.dark) .tag-chip {
      background-color: #ffffff;
      border: 1.5px solid #e0e0e0;
      color: #1a1a1a;
    }

    :root:not(.dark) .tag-chip:hover {
      background-color: #f5f5f5;
      border-color: #590df2;
    }
    :root:not(.dark) .hoverbutton:hover {
  background-color: #e2daf1 !important;
}

:root:not(.dark) .hoverbutton:hover,
:root:not(.dark) .hoverbutton:hover span,
:root:not(.dark) .hoverbutton:hover .material-symbols-outlined {
  color: #7c3aed !important;
}

    /* ========================================
       ANIMATIONS
    ======================================== */
    @keyframes fade-in {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in {
      animation: fade-in 0.3s ease-out;
    }

    /* ========================================
       RESPONSIVE ADJUSTMENTS
    ======================================== */
    @media (min-width: 1024px) {
      .btns-add button {
        width: 44px;
        height: 44px;
        padding: 10px;
      }

      .btn-submit-inner {
        width: 44px;
        height: 44px;
        padding: 10px;
      }
    }

    /* iOS Specific */
    @supports (-webkit-touch-callout: none) {
      body {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
      }

      #chatArea {
        padding-bottom: 200px !important;
      }

      .chatinput {
        position: fixed !important;
        bottom: 0 !important;
      }
    }

    /* Hover Effects */
    @media (hover: hover) {
      .hover-lift:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease;
      }
    }

    .btn-active:active {
      transform: scale(0.95);
      transition: transform 0.1s ease;
    }

    :root:not(.dark) #mobileMenu button:hover {
  background-color: #d0c2ea !important;
}