/* ==========================================================================
   HOMENEX — support.css
   Shared styles for: notice.html, faq.html, inquiry.html
   Import AFTER global.css. No box-shadow.
   ========================================================================== */

/* ==========================================================================
   1. SUPPORT PAGE SEARCH BAR
   ========================================================================== */
.support-search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    padding: 5px 6px;
    margin-left: auto;
    margin-bottom: 20px;
    transition: border-color var(--transition-fast);
    height: 38px;
}

.support-search-bar:focus-within {
    border-color: var(--primary);
}


.support-search-select {
    background: transparent;
    border: none;
    border-right: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    outline: none;
    cursor: pointer;
    padding: 4px 8px 4px 4px;
    font-size: 13px;
    font-weight: 500;
    margin-right: 6px;
}

.support-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--on-surface);
    outline: none;
    font-size: 13px;
    padding: 4px 6px;
}

.support-search-input::placeholder {
    color: var(--outline);
}

.support-search-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.support-search-btn:hover {
    background: var(--primary-container);
}

.support-search-btn:active {
    transform: scale(0.95);
}

.support-search-btn .material-symbols-outlined {
    font-size: 17px;
}

/* ==========================================================================
   2. NOTICE / FAQ / INQUIRY LIST CONTAINER
   ========================================================================== */
.notice-list-container {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Table header row */
.notice-list-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Column widths */
.col-id {
    width: 56px;
    flex-shrink: 0;
    text-align: center;
}

.col-cat {
    width: 130px;
    flex-shrink: 0;
}

.col-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding-right: 12px;
}

.notice-pin {
    font-size: 16px;
    margin-bottom: 3px;
    color: var(--error);
}

.col-author {
    width: 110px;
    flex-shrink: 0;
}

.col-views {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

.col-date {
    width: 110px;
    flex-shrink: 0;
}

/* Row item */
.notice-item {
    border-bottom: 1px solid var(--outline-variant);
}

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

/* Clickable row */
.notice-summary {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.notice-summary:hover {
    background: rgba(9, 102, 255, 0.03);
}

.notice-item.open .notice-summary {
    background: rgba(9, 102, 255, 0.05);
}

/* Expand chevron */
.expand-icon {
    font-size: 22px;
    color: var(--outline);
    transition: transform var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1),
        color var(--transition-fast);
    flex-shrink: 0;
}

.notice-item.open .expand-icon {
    transform: rotate(180deg);
    color: var(--primary);
}

/* ==========================================================================
   3. CATEGORY BADGE SYSTEM (notice, faq, inquiry types)
   ========================================================================== */
.badge-cat {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-cat.announcement {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge-cat.service {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.badge-cat.event {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.badge-cat.general {
    background: var(--surface-container);
    color: var(--outline);
    border: 1px solid var(--outline-variant);
}

.badge-cat.important {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.badge-cat.check {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-cat.policy {
    background: var(--primary-fixed);
    color: var(--primary);
    border: 1px solid var(--surface-container-highest);
}

.badge-cat.inquiry-open {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge-cat.inquiry-done {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

/* ==========================================================================
   4. ACCORDION COLLAPSIBLE ANIMATION
   ========================================================================== */
.notice-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: var(--surface-container-lowest);
    border-top: 0;
}

.notice-item.open .notice-details {
    grid-template-rows: 1fr;
    border-top: 1px solid var(--outline-variant);
}

.notice-details-inner {
    min-height: 0;
    padding: 0 20px;
}

.notice-item.open .notice-details-inner {
    padding: 20px;
}

/* ==========================================================================
   5. WYSIWYG CONTENT AREA
   — Do NOT add child-element overrides here.
     The admin WYSIWYG editor writes inline styles directly into the HTML
     (e.g. <p style="text-align:center;">, <img width="153">).
     Any CSS rule targeting child elements would fight those inline styles.
     Only the container itself is styled here.
   ========================================================================== */
.wysiwyg-content {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--on-surface-variant);
    display: block;
}

/* Safety: keep images from overflowing the container */
.wysiwyg-content img {
    max-width: 100%;
    display: inline-block;
}

/* ==========================================================================
   6. ATTACHMENT SECTION
   ========================================================================== */
.notice-attachment {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attachment-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 5px;
}

.attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.attachment-link:hover {
    background: var(--surface-container);
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.attachment-link .material-symbols-outlined {
    font-size: 15px;
    color: var(--outline);
    transition: color var(--transition-fast);
}

.attachment-link:hover .material-symbols-outlined {
    color: var(--primary);
}

/* ==========================================================================
   7. MOBILE META ROW (for collapsed metadata on mobile)
   ========================================================================== */
.mobile-meta-row {
    display: none;
    gap: 10px;
    font-size: 11px;
    color: var(--on-surface-variant);
    margin-top: 3px;
    font-weight: 500;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   8. FAQ CATEGORY CHIPS
   ========================================================================== */
.faq-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.faq-category-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    flex: 1;
}

.faq-category-chips::-webkit-scrollbar {
    display: none;
}

.faq-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.faq-chip:hover:not(.active) {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface);
}

.faq-chip:active {
    transform: scale(0.96);
}

.faq-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.faq-chip .material-symbols-outlined {
    font-size: 15px;
}

/* ==========================================================================
   9. INQUIRY CONTACT CHANNELS
   ========================================================================== */
.inquiry-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.contact-channels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Horizontal channel card */
.channel-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    min-width: 0;
}

.channel-card:hover {
    border-color: var(--primary);
    background: var(--surface-container-low);
    text-decoration: none;
}

.channel-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.channel-icon-wrap .material-symbols-outlined {
    font-size: 19px;
}

.channel-icon-wrap.email {
    background: var(--info-bg);
    color: var(--info);
}

.channel-icon-wrap.phone {
    background: var(--success-bg);
    color: var(--success);
}

.channel-icon-wrap.whatsapp {
    background: #d1fae5;
    color: #065f46;
}

.channel-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.channel-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}

.channel-card-value {
    font-family: 'Lexend', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-card-desc {
    font-size: 11px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-card-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-fixed);
    border-radius: var(--radius-full);
    padding: 4px 10px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.channel-card:hover .channel-card-action {
    background: var(--surface-container-highest);
}

/* ==========================================================================
   10. INQUIRY FORM CARD
   ========================================================================== */
.inquiry-section-label {
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inquiry-section-label .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
}

.inquiry-form-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.inquiry-form-card .form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.inquiry-form-card .form-group.full-width {
    grid-column: 1 / -1;
}

/* File upload area */
.file-upload-area {
    border: 2px dashed var(--outline-variant);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    background: var(--surface-container-lowest);
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: var(--surface-container-low);
}

.file-upload-area .material-symbols-outlined {
    font-size: 32px;
    color: var(--outline);
    margin-bottom: 8px;
}

.file-upload-label {
    font-size: 13px;
    color: var(--on-surface-variant);
}

.file-upload-label strong {
    color: var(--primary);
}

.file-upload-hint {
    font-size: 11px;
    color: var(--outline);
    margin-top: 4px;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.legal-header-row,
.faq-header-row,
.notice-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    margin-bottom: 20px;
}

.legal-title-icon,
.inq-title-icon,
.faq-title-icon,
.notice-title-icon {
    color: var(--primary);
    font-size: 26px;
    vertical-align: middle;
    margin-right: 6px;
}

/* ==========================================================================
   11. SUPPORT PAGE RESPONSIVE — AT THE BOTTOM
   ========================================================================== */
@media (max-width: 767px) {
    .support-search-bar {
        max-width: 100%;
    }

    /* Hide table header on mobile */
    .notice-list-header {
        display: none;
    }

    /* Stack notice row on mobile */
    .notice-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
    }

    /* Hide non-essential columns on mobile */
    .col-id,
    .col-author,
    .col-views,
    .col-date,
    .col-cat,
    .inquiry-status-col,
    .inquiry-reply-col {
        display: none !important;
    }

    .col-title {
        width: 100%;
        padding-right: 0;
        font-size: 14px;
    }

    /* Show mobile metadata row */
    .mobile-meta-row {
        display: flex;
    }

    /* Collapse details padding */
    .notice-details-inner {
        padding: 0 16px;
    }

    .notice-item.open .notice-details-inner {
        padding: 16px;
    }

    /* FAQ chips scroll */
    .faq-controls-row {
        align-items: flex-start;
    }

    /* Inquiry form single column */
    .inquiry-form-card .form-grid {
        grid-template-columns: 1fr;
    }

    /* Channels grid single column */
    .contact-channels-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .inquiry-top-grid {
        grid-template-columns: 1fr;
    }

    .contact-channels-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .inquiry-top-grid {
        grid-template-columns: 1fr 360px;
    }

    .contact-channels-grid {
        grid-template-columns: 1fr;
    }

    .support-search-bar {
        max-width: 40%;
    }
}

/* Notice Column Styles (migrated from prototype inline style tag) */
.notice-col-id {
    color: var(--outline);
    font-weight: 600;
    font-size: 13px;
}

.notice-col-author,
.notice-col-views,
.notice-col-date {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.release-icon-color {
    color: var(--primary);
}

.build-icon-color {
    color: var(--warning);
}

.event-icon-color {
    color: #7e22ce;
}

/* ==========================================================================
   FAQ still have questions area
   ========================================================================== */
.policy-link,
.support-link {
    color: var(--primary);
    font-weight: 600;
}

.still-help-box {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    margin-top: 8px;
}

.still-help-title {
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.still-help-desc {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 16px;
}

.still-help-btn {
    text-decoration: none;
}


/* ==========================================================================
   CONTACT SUPPORT PAGE
   ========================================================================== */

/* Page-specific: Inquiry status badge within ticket list */
.inquiry-id-col {
    width: 80px;
    flex-shrink: 0;
}

.inquiry-status-col {
    width: 120px;
    flex-shrink: 0;
}

.inquiry-reply-col {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
}

/* New inquiry button */
.btn-new-inquiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.btn-new-inquiry:hover {
    background: var(--primary-container);
}

.btn-new-inquiry:active {
    transform: scale(0.98);
}

.btn-new-inquiry .material-symbols-outlined {
    font-size: 18px;
}

/* Inquiry content inside accordion */
.inquiry-content {
    padding: 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.inquiry-content.reply {
    background: var(--primary-fixed);
    border-radius: var(--radius-md);
    border-bottom: none;
}

.inquiry-reply-box {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--outline-variant);
}

.inquiry-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.inquiry-content-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 6px;
}

.inquiry-content-author .material-symbols-outlined {
    font-size: 14px;
}

.inquiry-content-time {
    font-size: 11px;
    color: var(--on-surface-variant);
}

/* Submit new inquiry modal/panel */
#new-inquiry-panel {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    display: none;
}

#new-inquiry-panel.visible {
    display: block;
}

/* File count indicator */
.file-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 6px;
}

.form-actions-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.icon-small-attach {
    font-size: 14px;
}

.icon-small-action {
    font-size: 13px;
}

.support-hours-box {
    background: var(--surface-container-low);
    border: 1px dashed var(--outline-variant);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 12px;
}

.support-hours-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-hours-title-icon {
    font-size: 16px;
    color: var(--primary);
}

.support-hours-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--on-surface-variant);
}

.support-hours-val {
    font-weight: 600;
}

.support-hours-val.closed {
    color: var(--error);
}

.inquiry-section-label.mt-8 {
    margin-top: 8px;
}

.ticket-id-primary {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.ticket-id-info {
    font-size: 12px;
    font-weight: 700;
    color: var(--info);
}

.ticket-replies-col {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.ticket-date-col {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.ticket-author-staff {
    color: var(--primary);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 280px;
    max-width: 400px;
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);

    display: flex;
    align-items: center;
    gap: 10px;

    background: var(--surface-container-highest);
    color: var(--on-surface);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    pointer-events: auto;

    animation:
        toast-fade-in .3s cubic-bezier(.4, 0, .2, 1),
        toast-fade-out .3s cubic-bezier(.4, 0, .2, 1) 2.7s forwards;
}

.toast.success {
    background: var(--success);
    color: var(--success-active-text);
}

.toast.error {
    background: var(--error);
    color: var(--error-active-text);
}

.toast.warning {
    background: var(--warning-active);
    color: var(--warning-active-text);
}

.toast.info {
    background: var(--primary);
    color: var(--on-primary);
}

.toast .icon-18 {
    font-size: 18px;
}

.toast .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

@keyframes toast-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes toast-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Generic Empty State styling */
.empty-state-container {
    padding: 40px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.empty-state-icon {
    font-size: 32px;
    color: var(--outline);
    margin-bottom: 8px;
}

.empty-state-text {
    color: var(--on-surface-variant);
}

/* Inquiry Attachments styling */
.inquiry-attachments-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed rgba(var(--text-on-surface-rgb), 0.1);
    width: 100%;
}

.inquiry-attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-on-surface-variant);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
    max-width: 280px;
    cursor: pointer;
}

.inquiry-attachment-card:hover {
    background-color: var(--surface-container);
    border-color: var(--outline);
}

.inquiry-attachment-thumbnail {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #f0f0f0;
}

.inquiry-attachment-icon {
    font-size: 24px;
    color: var(--primary);
}

.inquiry-attachment-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}

.inquiry-attachment-name {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-on-surface);
}

.inquiry-attachment-size {
    font-size: 10px;
    color: var(--text-on-surface-variant);
}

/* Selected Files preview listing styles */
.selected-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.selected-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    font-size: 13px;
}

.selected-file-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-on-surface);
}

.selected-file-item-remove {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.selected-file-item-remove:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

.reply-actions-row {
    margin-top: 8px;
    justify-content: space-between;
}

.zalo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    vertical-align: middle;
}