/* Clean & Compact Profile List */

/* Main container - super minimal */
.tk-profile-list-conversation {
    background: white !important;
    border-radius: 6px !important;
    padding: 8px !important;
    border: 1px solid #e5e7eb !important;
}

/* Remove default list styling */
.tk-profile-list-conversation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Compact list items */
.tk-profile-list-conversation li {
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    margin: 2px 0 !important;
    border-radius: 4px !important;
    transition: background 0.2s !important;
}

.tk-profile-list-conversation li:hover {
    background: #f9fafb !important;
}

/* Hide the default ugly icons */
.tk-profile-list-conversation li i.tk-icon {
    display: none !important;
}

/* Add new clean icons using CSS */
.tk-profile-list-conversation li:before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-right: 8px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Conversation ID - chat bubble */
.tk-profile-list-conversation li[data-id="conversation-id"]:before {
    content: '\f086' !important;
    color: #667eea !important;
}

/* User ID - user icon */
.tk-profile-list-conversation li[data-id="id"]:before {
    content: '\f007' !important;
    color: #10b981 !important;
}

/* User type - tag icon */
.tk-profile-list-conversation li[data-id="user_type"]:before {
    content: '\f02b' !important;
    color: #f59e0b !important;
}

/* Creation time - calendar */
.tk-profile-list-conversation li[data-id="creation_time"]:before {
    content: '\f073' !important;
    color: #6366f1 !important;
}

/* Last activity - clock */
.tk-profile-list-conversation li[data-id="last_activity"]:before {
    content: '\f017' !important;
    color: #ec4899 !important;
}

/* Hide token field completely - it's ugly */
.tk-profile-list-conversation li[data-id="token"] {
    display: none !important;
}

/* Facebook ID - facebook icon */
.tk-profile-list-conversation li[data-id="facebook-id"]:before {
    content: '\f09a' !important;
    font-family: 'Font Awesome 6 Brands' !important;
    color: #1877f2 !important;
}

/* WhatsApp fields */
.tk-profile-list-conversation li[data-id*="whatsapp"]:before {
    content: '\f232' !important;
    font-family: 'Font Awesome 6 Brands' !important;
    color: #25d366 !important;
}

/* Instagram fields */
.tk-profile-list-conversation li[data-id*="instagram"]:before {
    content: '\f16d' !important;
    font-family: 'Font Awesome 6 Brands' !important;
    color: #e4405f !important;
}

/* Email fields */
.tk-profile-list-conversation li[data-id*="email"]:before {
    content: '\f0e0' !important;
    color: #ea4335 !important;
}

/* Phone fields */
.tk-profile-list-conversation li[data-id*="phone"]:before {
    content: '\f095' !important;
    color: #0ea5e9 !important;
}

/* Label styling - super compact */
.tk-profile-list-conversation li span {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-right: 8px !important;
    min-width: 80px !important;
}

/* Value styling - clean */
.tk-profile-list-conversation li label {
    font-size: 12px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Make IDs stand out */
.tk-profile-list-conversation li[data-id="conversation-id"] label,
.tk-profile-list-conversation li[data-id="id"] label {
    color: #667eea !important;
    font-weight: 600 !important;
}

/* User type badge style */
.tk-profile-list-conversation li[data-id="user_type"] label {
    background: #fef3c7 !important;
    color: #92400e !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Time fields - make them subtle */
.tk-profile-list-conversation li[data-id="creation_time"] label,
.tk-profile-list-conversation li[data-id="last_activity"] label {
    font-size: 11px !important;
    color: #6b7280 !important;
}

/* Compact layout for mobile */
@media (max-width: 768px) {
    .tk-profile-list-conversation li span {
        min-width: 60px !important;
        font-size: 10px !important;
    }
}