* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #1a1a1a 100%);
          height: 100vh;
          display: flex;
          overflow: hidden;
          color: #e0e0e0;
      }

      /* Sidebar */
      .sidebar {
          width: 280px;
          background: rgb(35 28 20 / 28%);
          border-right: 1px solid rgba(255, 140, 0, 0.2);
          display: flex;
          flex-direction: column;
          transition: transform 0.3s ease;
          box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
      }

      .sidebar.hidden {
          transform: translateX(-100%);
      }

      .sidebar-header {
          padding: 20px;
          border-bottom: 1px solid #222222;
          display: flex;
          gap: 10px;
      }

      .sidebar-close {
          background: #533613;
          border: none;
          color: #b1b1b1;
          padding: 14px 20px;
          border-radius: 8px;
          display: none;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 20px;
          font-weight: bold;
          transition: all 0.3s ease;
          flex-shrink: 0;
          width: 52px;
      }

      .sidebar-close:hover {
          transform: translateY(-2px);
          box-shadow: 0 0 20px rgb(255 0 0 / 15%);
          background: linear-gradient(135deg, #e5121240 0%, #a9220c73 100%);
          color: #ff4c4c;
      }


      .sidebar-close:active {
          transform: translateY(0);
      }

      @media (max-width: 767px) {
          .sidebar-close {
              display: flex;
          }

          .new-chat-btn {
              flex: 1;
          }
      }

      .new-chat-btn {
          width: 100%;
          padding: 14px 20px;
          background: linear-gradient(135deg, #e58212 0%, #c7562a 100%);
          color: #ffffff;
          border: none;
          border-radius: 8px;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
      }

      .new-chat-btn:active {
          transform: translateY(0);
      }

      .new-chat-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 0 20px rgba(255, 136, 0, 0.493);
          background: linear-gradient(135deg, #f08d1b 0%, #e9642f 100%);
      }

      .new-chat-btn:active {
          transform: translateY(0);
      }

      .history-list {
          flex: 1;
          overflow-y: auto;
          padding: 10px;
      }

      .history-list::-webkit-scrollbar {
          width: 6px;
      }

      .history-list::-webkit-scrollbar-track {
          background: transparent;
      }

      .history-list::-webkit-scrollbar-thumb {
          background: #333333;
          border-radius: 3px;
      }

      .history-list::-webkit-scrollbar-thumb:hover {
          background: #444444;
      }

      .history-item {
          padding: 12px 14px;
          margin-bottom: 6px;
          background: rgb(45 37 30 / 60%);
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          border: 1px solid transparent;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }

      .history-item:hover {
          background: rgba(105, 58, 16, 0.178);
          border-color: rgba(255, 115, 0, 0.24);
          transform: translateX(4px);
      }

      .history-item.active {
          background: rgba(255, 140, 0, 0.2);
          border-color: #ff8c00;
      }

      .history-item-content {
          flex: 1;
          min-width: 0;
      }

      .history-title {
          color: #e0e0e0;
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 4px;
      }

      .history-date {
          color: #888888;
          font-size: 12px;
      }

      .history-delete {
          color: #666666;
          font-size: 16px;
          cursor: pointer;
          padding: 4px 8px;
          opacity: 0;
          transition: all 0.2s ease;
          border-radius: 4px;
      }

      .history-item:hover .history-delete {
          opacity: 1;
      }

      .history-delete:hover {
          color: #ff4444;
          background: rgba(255, 68, 68, 0.1);
      }

      .sidebar-footer {
          padding: 15px 20px;
          border-top: 1px solid #222222;
          color: #666666;
          font-size: 11px;
          text-align: center;
      }

      /* Main Container */
      .main-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;
      }

      @media (max-width: 767px) {
          .main-container {
              width: 100%;
          }
      }

      .chat-wrapper {
          flex: 1;
          display: flex;
          flex-direction: column;
          max-width: 1100px;
          width: 100%;
          margin: 0 auto;
          padding: 20px;
      }

      @media (max-width: 767px) {
          .chat-wrapper {
              padding: 0;
              max-width: 100%;
              height: 100vh;
          }
      }

      .chat-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          background: rgb(35 28 20 / 28%);
          border-radius: 16px;
          overflow: hidden;
          border: 1px solid rgba(255, 140, 0, 0.2);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      }

      .chat-header {
          background: linear-gradient(135deg, #e58212 0%, #c7562a 100%);
          padding: 20px 30px;
          display: flex;
          align-items: center;
          gap: 15px;
          position: relative;
      }

      .header-menu-btn {
          position: absolute;
          left: 20px;
          background: rgb(135 79 20);
          border: none;
          color: #ffb668;
          width: 43px;
          height: 43px;
          border-radius: 8px;
          display: none;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 20px;
          font-weight: bold;
          transition: all 0.3s ease;
      }

      .header-menu-btn:hover {
          background: rgba(0, 0, 0, 0.4);
          transform: scale(1.05);
      }

      .header-menu-btn:active {
          transform: scale(0.95);
      }

      @media (max-width: 767px) {
          .header-menu-btn {
              display: flex;
          }

          .chat-header {
              padding-left: 70px;
          }
      }

      .header-icon {
          width: 45px;
          height: 45px;
          background: rgb(24 22 20 / 78%);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
      }

      .header-text {
          flex: 1;
      }

      .header-title {
          color: #ffebd8;
          font-size: 20px;
          font-weight: 800;
          margin-bottom: 2px;
          display: inline-flex;
      }

      img.logo {
          width: 40px;
      }

      img.avatarai {
          width: 32px;
      }

      .header-subtitle {
          color: rgb(255 235 216);
          font-size: 12px;
          font-weight: 600;
      }

      .status-indicator {
          width: 10px;
          height: 10px;
          background: #00ff00;
          border-radius: 50%;
          animation: pulse 2s infinite;
          box-shadow: 0 0 10px #00ff00;
      }

      @keyframes pulse {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: 0.5;
          }
      }

      html,
      body,
      .main-container,
      .chat-wrapper,
      .chat-container {
          height: 100%;
      }

      .chat-wrapper,
      .chat-container,
      .chat-messages {
          min-height: 0;
      }

      .chat-messages {
          flex: 1 1 auto;
          overflow-y: auto;
          overflow-x: hidden;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          padding: 30px;
          min-height: 0;
          /* critical for scroll inside flex */
          -webkit-overflow-scrolling: touch;
      }

      .main-container,
      .chat-wrapper,
      .chat-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          min-height: 0;
      }

      .typing-indicator {
          align-self: flex-start;
          margin-top: auto;
      }


      /* Enhanced welcome message styles */
      .welcome-message {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 60px 30px;
          margin: auto;
      }

      .welcome-icon {
          width: 80px;
          height: 80px;
          background: linear-gradient(135deg, #ff8c005e 0%, #ff6b0038 100%);
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 40px;
          margin-bottom: 24px;
          box-shadow: 0 0px 30px rgb(255 140 0 / 15%);
      }

      .welcome-message h2 {
          color: #ff852c;
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 12px;
      }

      .welcome-message p {
          color: #b0b0b0;
          font-size: 15px;
          line-height: 1.6;
          max-width: 500px;
      }

      /* Make sure chat messages can scroll */
      .chat-messages {
          overflow-y: auto !important;
          display: flex;
          flex-direction: column;
      }


      .chat-messages::-webkit-scrollbar {
          width: 8px;
      }

      .chat-messages::-webkit-scrollbar-track {
          background: transparent;
      }

      .chat-messages::-webkit-scrollbar-thumb {
          background: #333333;
          border-radius: 4px;
      }

      .chat-messages::-webkit-scrollbar-thumb:hover {
          background: #444444;
      }

      .message {
          margin-bottom: 24px;
          display: flex;
          animation: messageSlide 0.4s ease-out;
      }

      @keyframes messageSlide {
          from {
              opacity: 0;
              transform: translateY(20px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .message.user {
          justify-content: flex-end;
      }

      .message-avatar {
          width: 38px;
          height: 38px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
      }

      .message.bot .message-avatar {
          background: linear-gradient(135deg, #ff8c0045 0%, #ff6b0024 100%);
          margin-right: 12px;
      }

      .message.user .message-avatar {
          background: linear-gradient(135deg, #fb963b99 0%, #7b3414c2 100%);
          margin-left: 12px;
          order: 2;
      }

      i.fa-solid.fa-user.avataruser {
          color: #ffc0a1;
      }

      .message-content {
          max-width: 70%;
          padding: 14px 18px;
          border-radius: 16px;
          word-wrap: break-word;
          line-height: 1.6;
          font-size: 17px;
      }

      .message.user .message-content {
          background: linear-gradient(135deg, #e58212 0%, #c7562a 100%);
          color: #ffffff;
          font-weight: 500;
          border-bottom-right-radius: 4px;
          box-shadow: 0 4px 20px rgb(255 140 0 / 17%);
      }

      .message.bot .message-content {
          background: linear-gradient(135deg, #b1732d00 0%, #792f0b0d 100%);
          color: #ffffff;
          border-bottom-left-radius: 4px;
          border: 1px solid rgb(151 78 36 / 36%);
          box-shadow: 0 4px 25px rgb(102 53 20 / 19%);
      }

      .message-time {
          font-size: 10px;
          color: rgba(255, 255, 255, 0.4);
          margin-top: 6px;
          display: block;
          font-weight: 400;
      }

      .message.user .message-time {
          color: rgb(255 206 156);
      }

      .typing-indicator {
          display: none;
          padding: 14px 18px;
          backdrop-filter: blur(10px);
          border-radius: 16px;
          width: fit-content;
          border: 1px solid rgba(255, 140, 0, 0.2);
          margin-left: 50px;
      }

      .typing-indicator.active {
          display: block;
          animation: messageSlide 0.3s ease-out;
      }

      .typing-indicator span {
          height: 8px;
          width: 8px;
          background: #ff7800;
          border-radius: 50%;
          display: inline-block;
          margin: 0 3px;
          animation: typingBounce 1.4s infinite ease-in-out;
      }

      .typing-indicator span:nth-child(1) {
          animation-delay: -0.32s;
      }

      .typing-indicator span:nth-child(2) {
          animation-delay: -0.16s;
      }

      @keyframes typingBounce {

          0%,
          60%,
          100% {
              transform: translateY(0);
          }

          30% {
              transform: translateY(-10px);
          }
      }

      .welcome-message {
          text-align: center;
          padding: 60px 20px;
          color: #666666;
      }

      img.logomain {
          width: 70px;
      }





      .welcome-message p {
          font-size: 15px;
          line-height: 1.6;
          color: #888888;
      }

      .error-message {
          background: rgba(255, 68, 68, 0.1);
          border: 1px solid rgba(255, 68, 68, 0.3);
          color: #ff6b6b;
          padding: 12px 20px;
          border-radius: 8px;
          margin: 10px 30px;
          display: none;
          font-size: 14px;
      }

      .error-message.active {
          display: block;
          animation: messageSlide 0.3s ease-out;
      }

      .chat-input-container {
          padding: 20px 30px;
          background: rgb(35 28 20 / 68%);
          backdrop-filter: blur(10px);
          border-top: 1px solid rgba(255, 140, 0, 0.2);
          display: flex;
          gap: 12px;
          align-items: center;
      }

      #userInput {
          flex: 1;
          padding: 14px 20px;
          background: rgb(12 11 10 / 26%);
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 140, 0, 0.2);
          border-radius: 12px;
          color: #e0e0e0;
          font-size: 15px;
          outline: none;
          transition: all 0.3s ease;
      }

      #userInput:focus {
          border-color: #ff8c0080;
          background: rgba(12, 11, 10, 0.705);
          box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
      }

      #userInput::placeholder {
          color: #555555;
      }

      #sendButton {
          padding: 14px 32px;
          background: linear-gradient(135deg, #e58212 0%, #c7562a 100%);
          color: #ffffff;
          border: none;
          border-radius: 12px;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 20px rgb(214 108 30 / 43%);
      }

      #sendButton:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(255, 140, 0, 0.5);
      }

      #sendButton:active:not(:disabled) {
          transform: translateY(0);
      }

      #sendButton:disabled {
          opacity: 0.4;
          cursor: not-allowed;
      }

      /* Small Phones (up to 480px) */
      @media (max-width: 480px) {
          .sidebar {
              width: 85%;
              max-width: 280px;
          }

          img.logo {
              width: 35px;
          }

          .sidebar-close {
              display: flex;
          }

          .chat-container {
              border-radius: 0;
          }

          .header-icon {
              width: 38px;
              height: 38px;
              font-size: 20px;
          }

          .header-title {
              font-size: 16px;
          }

          .header-subtitle {
              font-size: 10px;
          }

          .chat-messages {
              padding: 15px 10px;
          }

          .message-content {
              max-width: 85%;
              font-size: 14px;
              padding: 12px 16px;
          }

          .message-avatar {
              width: 34px;
              height: 34px;
              font-size: 16px;
          }

          .chat-input-container {
              padding: 12px;
              gap: 8px;
          }

          #userInput {
              font-size: 14px;
              padding: 12px 14px;
          }

          #sendButton {
              padding: 12px 20px;
              font-size: 13px;
          }

          .welcome-message {
              padding: 30px 15px;
          }

          .welcome-message h2 {
              font-size: 20px;
          }

          .welcome-message p {
              font-size: 13px;
          }

          .new-chat-btn {
              padding: 12px 16px;
              font-size: 14px;
          }

          .history-item {
              padding: 10px 12px;
          }
      }

      /* Regular Phones (481px - 767px) */
      @media (min-width: 481px) and (max-width: 767px) {
          .sidebar {
              width: 300px;
          }

          .sidebar-close {
              display: flex;
          }

          .chat-container {
              border-radius: 0;
          }

          .header-icon {
              width: 42px;
              height: 42px;
              font-size: 22px;
          }

          .header-title {
              font-size: 18px;
          }

          .header-subtitle {
              font-size: 11px;
          }

          .chat-messages {
              padding: 20px 15px;
          }

          .message-content {
              max-width: 80%;
              font-size: 14px;
          }

          .chat-input-container {
              padding: 15px;
          }

          #userInput {
              font-size: 14px;
              padding: 12px 16px;
          }

          #sendButton {
              padding: 12px 24px;
              font-size: 14px;
          }

          .welcome-message {
              padding: 40px 15px;
          }

          .welcome-message h2 {
              font-size: 22px;
          }
      }

      /* Tablets Portrait (768px - 1024px) */
      @media (min-width: 768px) and (max-width: 1024px) {
          .sidebar {
              width: 260px;
          }

          .chat-wrapper {
              padding: 15px;
              max-width: 100%;
          }

          .chat-header {
              padding: 18px 24px;
          }

          .chat-messages {
              padding: 25px 20px;
          }

          .message-content {
              max-width: 75%;
          }

          .chat-input-container {
              padding: 18px 24px;
          }
      }

      /* Tablets Landscape & Small Laptops (1025px - 1366px) */
      @media (min-width: 1025px) and (max-width: 1366px) {
          .chat-wrapper {
              max-width: 1000px;
          }
      }

      /* Large Screens (1367px+) */
      @media (min-width: 1367px) {
          .chat-wrapper {
              max-width: 1200px;
          }

          .sidebar {
              width: 300px;
          }

          .chat-messages {
              padding: 35px;
          }
      }

      /* Mobile Devices General (max-width: 767px) */
      @media (max-width: 767px) {
          .sidebar {
              position: fixed;
              z-index: 200;
              height: 100vh;
              box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
          }

          .chat-wrapper {
              max-width: 100%;
          }

          .chat-container {
              height: 100%;
          }
      }

      /* Landscape Mode on Phones */
      @media (max-height: 500px) and (orientation: landscape) {
          .chat-header {
              padding: 12px 20px;
          }

          .header-icon {
              width: 36px;
              height: 36px;
              font-size: 18px;
          }

          .header-title {
              font-size: 16px;
          }

          .chat-messages {
              padding: 15px;
          }

          .chat-input-container {
              padding: 12px 20px;
          }

          .welcome-message {
              padding: 20px 15px;
          }

          .welcome-message h2 {
              font-size: 18px;
          }

          .welcome-message p {
              font-size: 13px;
          }
      }

      /* Overlay for mobile sidebar */
      .sidebar-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(5px);
          z-index: 150;
      }

      @media (max-width: 767px) {
          .sidebar-overlay.active {
              display: block;
          }
      }

      /* Delete Confirmation Modal */
      .delete-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(10px);
          z-index: 300;
          align-items: center;
          justify-content: center;
      }

      .delete-modal.active {
          display: flex;
          animation: fadeIn 0.2s ease;
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
          }

          to {
              opacity: 1;
          }
      }

      .delete-modal-content {
          background: linear-gradient(135deg, #e5821242 0%, #c7562a2b 100%);
          backdrop-filter: blur(20px);
          border: 1px solid rgba(255, 140, 0, 0.3);
          border-radius: 16px;
          padding: 30px;
          max-width: 400px;
          width: 90%;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
          animation: modalSlide 0.3s ease;
      }

      @keyframes modalSlide {
          from {
              transform: translateY(-30px);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      .delete-modal-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 20px;
      }

      .delete-modal-icon {
          width: 48px;
          height: 48px;
          background: rgba(239, 68, 68, 0.2);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
      }

      .delete-modal-title {
          color: #e0e0e0;
          font-size: 20px;
          font-weight: 700;
      }

      .delete-modal-message {
          color: #b0b0b0;
          font-size: 15px;
          line-height: 1.5;
          margin-bottom: 24px;
      }

      .delete-modal-buttons {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
      }

      .delete-modal-btn {
          padding: 12px 24px;
          border: none;
          border-radius: 10px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .delete-modal-btn.cancel {
          background: rgba(100, 100, 120, 0.3);
          color: #e0e0e0;
          border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .delete-modal-btn.cancel:hover {
          background: rgba(100, 100, 120, 0.5);
          transform: translateY(-2px);
      }

      .delete-modal-btn.confirm {
          background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
          color: white;
          box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
      }

      .delete-modal-btn.confirm:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
      }

      .delete-modal-btn:active {
          transform: translateY(0);
      }


      .inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,140,0,0.12);
  border: 1px solid rgba(255,140,0,0.25);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .92em;
}

.code-block {
  background: #0f0f0f;
  border: 1px solid rgba(255,140,0,0.25);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  margin: 14px 0;
}

.code-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(229,130,18,.18), rgba(199,86,42,.12));
  border-bottom: 1px solid rgba(255,140,0,0.25);
}

.code-lang {
  font-size: 12px;
  color: #ffb66f;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.copy-btn {
  background: rgba(255,140,0,0.18);
  color: #ffd9b0;
  border: 1px solid rgba(255,140,0,0.35);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.copy-btn:hover { background: rgba(255,140,0,0.28); }
.copy-btn:disabled { opacity: .6; cursor: default; }

.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
}
.code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre;
  color: #ffeede;
}



.message.bot .message-content {
  color: #f1f1f1; /* brighter text */
  line-height: 1.7; /* a bit more spacing */
  letter-spacing: 0.2px;
}

.message.bot .message-content strong {
  color: #ffd89b; /* bright amber for bolds */
}

.message.bot .message-content em {
  color: #ffae6f; /* warmer highlight for italics */
}

.message.bot .message-content p {
  margin-bottom: 10px; /* separate paragraphs for easier scanning */
}

.message.bot .message-content ul,
.message.bot .message-content ol {
  margin-left: 20px;
  margin-bottom: 10px;
}

.message.bot .message-content li {
  line-height: 1.6;
}

.message.user .message-content {
  color: #fff8f0; /* make user text softer white for comfort */
}


/* ADD THIS TO YOUR style.css - Mobile Fixes */

/* Fix viewport on mobile */
@media (max-width: 767px) {
    
    /* Make sure the page uses full viewport */
    html, body {
        height: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        overflow: hidden;
    }
    
    /* Fix the main container */
    .main-container {
        height: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Fix chat wrapper */
    .chat-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Fix chat container */
    .chat-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }
    
    /* Make messages area scrollable */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }
    
    /* Fix input container at bottom */
    .chat-input-container {
        position: relative;
        flex-shrink: 0;
        padding: 15px;
        background: #2d2d2d;
        border-top: 1px solid #3d3d3d;
    }
    
    /* Make input stay visible */
    #userInput {
        width: 100%;
        min-height: 45px;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Fix send button */
    #sendButton {
        flex-shrink: 0;
    }
}

/* Prevent zoom on input focus (iOS fix) */
input, textarea {
    font-size: 16px !important;
}




/* Fix input area for iPhone home indicator */
.chat-input-container {
    background: rgb(35 28 20 / 68%); /* Your existing color */
    padding-bottom: max(15px, env(safe-area-inset-bottom));
}

:root{
  --bg-top:#0a0a0a; --bg-mid:#111111; --bg-bot:#1a1a1a;
  color-scheme: dark;
}
html,body{
  background: linear-gradient(135deg,var(--bg-top),var(--bg-mid) 50%,var(--bg-bot));
  background-color: var(--bg-top); /* Safari samples this */
}
body{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}


.beta-badge {
    display: inline-block;
    background-color: #fb3333;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}