/* --- High-Performance Clean Chat Console Sheet --- */
body {
          font-family: 'Montserrat', sans-serif;
          background: #FAFAFC;
          margin: 0;
          padding: 0;
          overflow: hidden;
          box-sizing: border-box;
}

.chat-container {
          width: 100%;
          height: 100vh;
          background: #ffffff;
          display: flex;
          flex-direction: column;
          overflow: hidden;
}

.chat-header {
          background: #2E2463;
          color: #ffffff;
          padding: 16px 20px;
          display: flex;
          align-items: center;
          border-bottom: 4px solid #E31D2B;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          height: 60px;
          box-sizing: border-box;
          flex-shrink: 0;
}

.chat-header i {
          font-size: 20px;
          margin-right: 14px;
          color: #FFD700;
}

.chat-header h6 {
          margin: 0;
          font-weight: 700;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          font-size: 13px;
}

/* Master Chat Logs Wrapper with Premium Track Scrolling */
.chat-logs {
          flex: 1;
          padding: 20px;
          overflow-y: auto;
          background: #F4F5F8;
          display: flex;
          flex-direction: column;
          gap: 16px;
          scroll-behavior: smooth;
}

.msg-row {
          display: flex;
          width: 100%;
}

.msg-row.user-row {
          justify-content: flex-end;
}

.bubble {
          max-width: 85%;
          padding: 12px 16px;
          font-size: 13px;
          font-weight: 500;
          line-height: 1.5;
          border-radius: 4px;
}

.bot-bubble {
          background: #ffffff;
          color: #2E2463;
          border: 1px solid #ECEEF2;
          border-left: 4px solid #E31D2B;
          box-shadow: 0 4px 12px rgba(46, 36, 99, 0.02);
}

.user-bubble {
          background: #2E2463;
          color: #ffffff;
          border-left: none;
          box-shadow: 0 4px 12px rgba(46, 36, 99, 0.05);
}

.action-card {
          background: #FAFAFC;
          border: 1px solid #E2E4E8;
          padding: 12px;
          margin-top: 10px;
          border-radius: 4px;
}

.action-btn {
          background: #E31D2B;
          color: #ffffff !important;
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
          padding: 8px 16px;
          display: inline-block;
          text-decoration: none !important;
          margin-top: 8px;
          transition: background 0.2s;
}

.action-btn:hover {
          background: #2E2463;
}

/* Fixed Bottom Area Guard Architecture */
.chat-footer-anchor-zone {
          flex-shrink: 0;
          background: #ffffff;
          border-top: 1px solid #EAECEF;
}

.suggestion-zone {
          padding: 12px 16px 6px 16px;
          background: #ffffff;
}

.suggestion-header {
          font-size: 10px;
          font-weight: 700;
          color: #7A7E85;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 8px;
}

/* HIGH-END SCROLL REPAIR FOR CHIPS RAIL */
.chips-wrapper {
          display: flex;
          gap: 6px;
          overflow-x: auto;
          overflow-y: hidden;
          padding-bottom: 8px;
          white-space: nowrap;
          -webkit-overflow-scrolling: touch;
}

.suggest-chip {
          background: #FAFAFC;
          border: 1px solid rgba(46, 36, 99, 0.15);
          color: #2E2463;
          font-size: 10.5px;
          font-weight: 700;
          padding: 6px 12px;
          cursor: pointer;
          transition: all 0.2s ease;
          text-transform: uppercase;
          display: inline-block;
          flex-shrink: 0;
          border-radius: 3px;
}

.suggest-chip:hover {
          background: #2E2463;
          color: #ffffff;
          border-color: #2E2463;
}

.chat-input-bar {
          display: flex;
          border-top: 1px solid #EAECEF;
          background: #ffffff;
          padding: 4px;
          height: 52px;
          box-sizing: border-box;
}

.chat-input-bar input {
          flex: 1;
          border: none;
          padding: 0 15px;
          font-size: 13px;
          font-weight: 500;
          outline: none;
          background: transparent;
}

.chat-input-bar button {
          background: #2E2463;
          color: #ffffff;
          border: none;
          padding: 0 20px;
          cursor: pointer;
          transition: background 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
}

.chat-input-bar button:hover {
          background: #E31D2B;
}

/* PREMIUM VELVET SMOOTH CUSTOM SCROLLBARS BUILD */
.chat-logs::-webkit-scrollbar,
.chips-wrapper::-webkit-scrollbar {
          width: 5px;
          height: 4px;
}

.chat-logs::-webkit-scrollbar-track,
.chips-wrapper::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.02);
}

.chat-logs::-webkit-scrollbar-thumb,
.chips-wrapper::-webkit-scrollbar-thumb {
          background: rgba(46, 36, 99, 0.15);
          border-radius: 10px;
}

.chat-logs::-webkit-scrollbar-thumb:hover,
.chips-wrapper::-webkit-scrollbar-thumb:hover {
          background: #E31D2B;
}