/**
 * HSD Conversations Styles
 * Clean, flat design for conversation threads and forms
 */

/* ========================================
   Back Link
   ======================================== */
.hsd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hsd-text-secondary, #6b7280);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hsd-back-link:hover {
    color: var(--hsd-primary, #6366f1);
}

.hsd-back-link svg {
    flex-shrink: 0;
}

/* ========================================
   Conversation Header
   ======================================== */
.hsd-conversation__header {
    background: var(--hsd-surface, #ffffff);
    border-radius: var(--hsd-card-radius, 12px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.hsd-conversation__header-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.hsd-conversation__id {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hsd-text-secondary, #9ca3af);
}

.hsd-conversation__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hsd-text-primary, #18181b);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.hsd-conversation__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hsd-conversation__meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--hsd-text-secondary, #6b7280);
}

.hsd-conversation__meta-item svg {
    flex-shrink: 0;
    color: var(--hsd-gray-400, #9ca3af);
}

/* ========================================
   Status Badge
   ======================================== */
.hsd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 9999px;
}

.hsd-status-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hsd-status-badge--active {
    color: #15803d;
    background: #dcfce7;
}

.hsd-status-badge--pending {
    color: #b45309;
    background: #fef3c7;
}

.hsd-status-badge--closed {
    color: #4b5563;
    background: #f3f4f6;
}

.hsd-status-badge--spam {
    color: #dc2626;
    background: #fee2e2;
}

/* ========================================
   Conversation Threads
   ======================================== */
.hsd-conversation__threads {
    display: flex;
    flex-direction: column;
    gap: var(--hsd-thread-spacing, 16px);
}

/* Regular Thread */
.hsd-thread {
    display: flex;
    gap: 1rem;
}

.hsd-thread__avatar {
    flex-shrink: 0;
}

.hsd-thread__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.hsd-thread__content {
    flex: 1;
    min-width: 0;
    background: var(--hsd-thread-customer-bg, var(--hsd-gray-50, #f9fafb));
    border-radius: var(--hsd-thread-radius, var(--hsd-card-radius, 12px));
    overflow: hidden;
}

.hsd-thread__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
}

.hsd-thread__author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hsd-thread__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hsd-text-primary, #18181b);
}

.hsd-thread__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--hsd-primary, #6366f1);
    background: color-mix(in srgb, var(--hsd-primary, #6366f1) 15%, transparent);
    border-radius: 9999px;
}

.hsd-thread__time {
    font-size: 0.75rem;
    color: var(--hsd-text-secondary, #9ca3af);
}

.hsd-thread__body {
    padding: 0 1rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--hsd-text-primary, #374151);
}

.hsd-thread__body p {
    margin: 0 0 0.75rem;
}

.hsd-thread__body p:last-child {
    margin-bottom: 0;
}

.hsd-thread__body a {
    color: var(--hsd-primary, #6366f1);
    text-decoration: none;
}

.hsd-thread__body a:hover {
    text-decoration: underline;
}

.hsd-thread__body blockquote {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--hsd-primary, #6366f1);
    border-radius: 0 8px 8px 0;
}

.hsd-thread__body pre,
.hsd-thread__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875em;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.hsd-thread__body code {
    padding: 0.125rem 0.375rem;
}

.hsd-thread__body pre {
    padding: 1rem;
    overflow-x: auto;
}

.hsd-thread__body pre code {
    padding: 0;
    background: none;
}

.hsd-thread__footer {
    padding: 0.5rem 1rem 0.75rem;
}

.hsd-thread__number {
    font-size: 0.6875rem;
    color: var(--hsd-text-secondary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Agent Thread Styling */
.hsd-thread--agent .hsd-thread__content {
    background: var(--hsd-thread-agent-bg, #eef2ff);
}

/* Customer Thread */
.hsd-thread--customer .hsd-thread__content {
    background: var(--hsd-thread-customer-bg, var(--hsd-gray-50, #f9fafb));
}

/* Line Item (Status Change) */
.hsd-thread--line-item {
    padding: 0 0 0 52px;
}

.hsd-thread__line-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--hsd-text-secondary, #9ca3af);
}

.hsd-thread__line-content svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--hsd-gray-400, #9ca3af);
}

.hsd-thread__line-content time {
    margin-left: auto;
    font-size: 0.75rem;
}

/* ========================================
   Attachments
   ======================================== */
.hsd-thread__attachments {
    padding: 0.75rem 1rem 1rem;
    margin: 0 1rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.hsd-attachments__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hsd-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.hsd-attachments__header svg {
    width: 14px;
    height: 14px;
}

.hsd-attachments__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.hsd-attachment-image {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.hsd-attachment-image:hover {
    opacity: 0.85;
}

.hsd-attachment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hsd-attachments__files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hsd-attachment-file a,
.hsd-attachment-disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    color: var(--hsd-primary, #6366f1);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.hsd-attachment-file a:hover {
    opacity: 0.7;
}

.hsd-attachment-file svg {
    width: 14px;
    height: 14px;
}

.hsd-attachment-disabled {
    color: var(--hsd-gray-400, #9ca3af);
    cursor: not-allowed;
}

/* ========================================
   Alert Messages
   ======================================== */
.hsd-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--hsd-card-radius, 12px);
    font-size: 0.9375rem;
}

.hsd-alert svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.hsd-alert--error {
    color: #991b1b;
    background: #fef2f2;
}

.hsd-alert--success {
    color: #166534;
    background: #f0fdf4;
}

.hsd-alert--warning {
    color: #92400e;
    background: #fffbeb;
}

/* ========================================
   Form Styles
   ======================================== */
.hsd-form {
    background: var(--hsd-surface, #ffffff);
    border-radius: var(--hsd-card-radius, 12px);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.hsd-form-group {
    margin-bottom: 1.25rem;
}

.hsd-form-group:last-of-type {
    margin-bottom: 0;
}

.hsd-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hsd-text-primary, #374151);
}

.hsd-required {
    color: #dc2626;
}

.hsd-input,
.hsd-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--hsd-text-primary, #18181b);
    background: var(--hsd-gray-50, #f9fafb);
    border: none;
    border-radius: var(--hsd-button-radius, 8px);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hsd-input:hover,
.hsd-textarea:hover {
    background: var(--hsd-gray-100, #f3f4f6);
}

.hsd-input:focus,
.hsd-textarea:focus {
    outline: none;
    background: var(--hsd-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--hsd-primary, #6366f1);
}

.hsd-input::placeholder,
.hsd-textarea::placeholder {
    color: var(--hsd-gray-400, #9ca3af);
}

.hsd-textarea {
    min-height: 140px;
    resize: vertical;
}

.hsd-form-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--hsd-text-secondary, #6b7280);
}

/* File Upload */
.hsd-file-upload {
    position: relative;
}

.hsd-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hsd-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--hsd-text-secondary, #9ca3af);
    background: var(--hsd-gray-50, #f9fafb);
    border-radius: var(--hsd-button-radius, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.hsd-file-label:hover {
    background: var(--hsd-gray-100, #f3f4f6);
    color: var(--hsd-text-primary, #6b7280);
}

.hsd-file-input:focus + .hsd-file-label {
    box-shadow: 0 0 0 2px var(--hsd-primary, #6366f1);
}

.hsd-file-label svg {
    width: 28px;
    height: 28px;
    opacity: 0.5;
}

.hsd-file-label__text {
    font-size: 0.875rem;
    font-weight: 500;
}

.hsd-file-label__hint {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Form Actions */
.hsd-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

/* Button */
.hsd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: none;
    border-radius: var(--hsd-button-radius, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.hsd-btn--primary {
    color: #ffffff;
    background: var(--hsd-primary, #6366f1);
}

.hsd-btn--primary:hover {
    background: var(--hsd-primary-hover, #4f46e5);
}

.hsd-btn--primary:active {
    transform: scale(0.98);
}

.hsd-btn--primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hsd-primary, #6366f1) 30%, transparent);
}

.hsd-btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .hsd-conversation__header {
        padding: 1.25rem;
    }

    .hsd-conversation__title {
        font-size: 1.25rem;
    }

    .hsd-conversation__meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hsd-thread {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hsd-thread__avatar {
        display: none;
    }

    .hsd-thread--line-item {
        padding-left: 0;
    }

    .hsd-thread__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .hsd-form {
        padding: 1.25rem;
    }

    .hsd-file-label {
        padding: 1.25rem;
    }
}

/* ========================================
   Conversation Table
   ======================================== */
.hsd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hsd-surface, #ffffff);
    border-radius: var(--hsd-card-radius, 12px);
    overflow: hidden;
}

.hsd-table thead {
    background: var(--hsd-gray-50, #f9fafb);
}

.hsd-table th {
    padding: 0.875rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hsd-text-secondary, #9ca3af);
    text-align: left;
}

.hsd-table td {
    padding: 1rem 1.25rem;
    vertical-align: top;
}

.hsd-table__row {
    transition: background 0.15s ease;
}

.hsd-table__row:not(:last-child) {
    border-bottom: 1px solid var(--hsd-gray-100, #f3f4f6);
}

.hsd-table__row:hover {
    background: var(--hsd-gray-50, #fafafa);
}

.hsd-table__col--status {
    width: 120px;
}

.hsd-table__col--date {
    width: 130px;
}

.hsd-conversation-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hsd-conversation-link:hover .hsd-conversation-subject {
    color: var(--hsd-primary, #6366f1);
}

.hsd-conversation-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
}

.hsd-conversation-subject {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--hsd-text-primary, #18181b);
    transition: color 0.15s ease;
}

.hsd-conversation-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.125rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hsd-text-secondary, #9ca3af);
    background: var(--hsd-gray-100, #f3f4f6);
    border-radius: 9999px;
}

.hsd-conversation-preview {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--hsd-text-secondary, #9ca3af);
    line-height: 1.4;
}

.hsd-conversation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.hsd-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--hsd-primary, #6366f1);
    background: color-mix(in srgb, var(--hsd-primary, #6366f1) 10%, transparent);
    border-radius: 9999px;
}

.hsd-date-wrapper {
    white-space: nowrap;
}

.hsd-date {
    font-size: 0.8125rem;
    color: var(--hsd-text-secondary, #9ca3af);
}

/* Empty State */
.hsd-empty-state--inline {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--hsd-surface, #ffffff);
    border-radius: var(--hsd-card-radius, 12px);
}

.hsd-empty-state--inline svg {
    width: 48px;
    height: 48px;
    color: var(--hsd-gray-300, #d1d5db);
    margin-bottom: 1rem;
}

.hsd-empty-state--inline h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hsd-text-primary, #3f3f46);
    margin: 0 0 0.25rem;
}

.hsd-empty-state--inline p {
    font-size: 0.875rem;
    color: var(--hsd-text-secondary, #9ca3af);
    margin: 0;
}

/* Pagination */
.hsd-pagination {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.hsd-pagination a,
.hsd-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hsd-text-secondary, #6b7280);
    background: var(--hsd-gray-50, #f9fafb);
    border-radius: var(--hsd-button-radius, 8px);
    text-decoration: none;
    transition: all 0.15s ease;
}

.hsd-pagination a:hover {
    background: var(--hsd-gray-100, #f3f4f6);
    color: var(--hsd-text-primary, #374151);
}

.hsd-pagination .current {
    color: #ffffff;
    background: var(--hsd-primary, #6366f1);
}

/* Table Responsive */
@media (max-width: 640px) {
    .hsd-table {
        display: block;
    }

    .hsd-table thead {
        display: none;
    }

    .hsd-table tbody {
        display: block;
    }

    .hsd-table__row {
        display: block;
        padding: 1rem;
    }

    .hsd-table td {
        display: block;
        padding: 0;
    }

    .hsd-table__cell--status {
        margin-bottom: 0.625rem;
    }

    .hsd-table__cell--date {
        margin-top: 0.625rem;
    }
}

/* ========================================
   Flat Design Overrides
   Ensure clean, borderless appearance
   ======================================== */
.hsd-conversation,
.hsd-conversation__header,
.hsd-conversation__threads,
.hsd-thread,
.hsd-thread__content,
.hsd-table,
#hsd_support_conversation,
#hsd_support_table,
#hsd_conversations_table {
    border: none !important;
    box-shadow: none;
    outline: none;
}

/* Remove any potential borders from parent containers */
.hsd-conversations-container,
.hsd-conversations-table {
    border: none !important;
    box-shadow: none;
}

/* Ensure table has no borders */
.hsd-table,
.hsd-table th,
.hsd-table td,
.hsd-table tr {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Keep only subtle row separators */
.hsd-table__row:not(:last-child) td {
    border-bottom: 1px solid var(--hsd-gray-100, #f3f4f6);
}