@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Light.eot");
  src: local("Segoe UI Light"), local("SegoeUI-Light"), url("../fonts/segoe/SegoeUI-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Light.woff") format("woff"), url("../fonts/segoe/SegoeUI-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-BoldItalic.eot");
  src: local("Segoe UI Bold Italic"), local("SegoeUI-BoldItalic"), url("../fonts/segoe/SegoeUI-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-BoldItalic.woff") format("woff"), url("../fonts/segoe/SegoeUI-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-SemiBold.eot");
  src: local("Segoe UI Semibold"), local("SegoeUI-SemiBold"), url("../fonts/segoe/SegoeUI-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-SemiBold.woff") format("woff"), url("../fonts/segoe/SegoeUI-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI.eot");
  src: local("Segoe UI"), local("SegoeUI"), url("../fonts/segoe/SegoeUI.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI.woff") format("woff"), url("../fonts/segoe/SegoeUI.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Bold.eot");
  src: local("Segoe UI Bold"), local("SegoeUI-Bold"), url("../fonts/segoe/SegoeUI-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Bold.woff") format("woff"), url("../fonts/segoe/SegoeUI-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Italic.eot");
  src: local("Segoe UI Italic"), local("SegoeUI-Italic"), url("../fonts/segoe/SegoeUI-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Italic.woff") format("woff"), url("../fonts/segoe/SegoeUI-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic; }

.mini-messages-list {
  font-size: 12px; }
  .mini-messages-list > li {
    border-bottom: 1px solid #333; }
    .mini-messages-list > li:last-child {
      border-bottom: none; }
  .mini-messages-list .message {
    display: block;
    color: inherit;
    padding: 10px 20px;
    position: relative;
    transition: .1s; }
    .mini-messages-list .message:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 5px;
      background: #ff9100;
      z-index: 2;
      transition: .2s;
      -webkit-transform: scaleY(0);
      transform: scaleY(0); }
    .mini-messages-list .message:hover .text,
    .mini-messages-list .message:hover .title {
      color: #ff9100; }
    .mini-messages-list .message:hover:before {
      -webkit-transform: scaleY(1);
      transform: scaleY(1); }
  .mini-messages-list .title,
  .mini-messages-list .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff; }
  .mini-messages-list .title {
    font-weight: 600; }
  .mini-messages-list .date {
    color: #999; }
  .mini-messages-list .icon {
    display: block;
    text-align: center;
    font-size: 15px;
    color: #ff9100; }
  .mini-messages-list .message.readed .title,
  .mini-messages-list .message.readed .text,
  .mini-messages-list .message.readed .icon {
    color: #999; }
  .mini-messages-list .message.readed:hover .text,
  .mini-messages-list .message.readed:hover .title {
    color: #ff9100; }

/* Enhanced Header Dropdown Styles for Recent Chats */

/* Avatar with online indicator */
.avatar-container {
    position: relative;
    display: inline-block;
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: #44b700;
    border: 2px solid #1a1a1d;
    border-radius: 50%;
}

/* Message metadata styling */
.last-message {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

.message-type-icon {
    font-size: 14px;
    line-height: 1;
}

.you-label {
    font-weight: 500;
    color: #ccc;
}

.delivery-status {
    color: #0084ff;
    font-size: 12px;
    margin-right: 2px;
}

.message-time {
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    flex-shrink: 0;
}

.paid-chat-badge {
    margin-left: 4px;
    font-size: 12px;
    color: #9b59b6;
}

/* Unread conversation styling enhancement */
.recent-conversation-item .last-message.has-unread {
    font-weight: 600;
    color: #fff;
}

.recent-conversation-item .last-message.has-unread .you-label {
    color: #fff;
}

/* Recent conversation items */
.recent-conversation-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #2a2a2d;
    cursor: pointer;
    transition: background-color 0.2s;
}

.recent-conversation-item:hover {
    background-color: #2c2c30;
}

.recent-conversation-item:last-child {
    border-bottom: none;
}

.recent-conversation-item .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.recent-conversation-details {
    flex: 1;
    min-width: 0;
}

.recent-conversation-details .name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.recent-conversation-details .unread-badge {
    display: inline-block;
    background-color: #ff9100;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
}

/* Loading spinner */
.icon-spinner-rotate {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message-time {
        display: none;
    }
    
    .recent-conversation-item {
        padding: 10px 15px;
    }
    
    .recent-conversation-item .avatar {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    
    .last-message {
        font-size: 12px;
    }
}