/* Container & Layout */
.ts-form-container { 
    max-width: 650px; 
    margin: 40px auto; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

/* WooCommerce My Account Menu Icon Integration */
.woocommerce-MyAccount-navigation-link--tickets a::before {
    content: "\f486" !important; /* Dashicons ticket code */
    font-family: dashicons !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    margin-right: 12px !important;
    margin-bottom: -2px !important;
    font-size: 18px !important;
    vertical-align: middle !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The Card Style */
.ts-card { 
    background: #ffffff; 
    padding: 40px; 
    border-radius: 12px; 
    border: 2px solid #ccc; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
}

/* Typography */
.ts-card h2 { 
    margin-top: 0; 
    color: #1a1a1a !important; 
    font-size: 26px; 
    font-weight: 800;
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 15px; 
    margin-bottom: 25px; 
}

/* Form Groups */
.ts-group { margin-bottom: 20px; }
.ts-group label { 
    display: block; 
    font-weight: 700; 
    margin-bottom: 8px; 
    color: #333 !important; 
}

/* Inputs & Textarea */
.ts-input, .ts-textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid #bbb; 
    border-radius: 6px; 
    font-size: 16px; 
    box-sizing: border-box; 
    background: #fff !important;
    color: #000 !important;
    transition: all 0.2s ease-in-out;
}

.ts-textarea { resize: vertical; min-height: 120px; }

/* Focus States */
.ts-input:focus, .ts-textarea:focus { 
    outline: none; 
    border-color: #000; 
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05); 
}

/* Submit Button */
.ts-btn-submit { 
    color: #fff; 
    border: none; 
    padding: 16px 30px; 
    border-radius: 6px; 
    font-size: 18px; 
    font-weight: bold; 
    cursor: pointer; 
    width: 100%; 
    transition: transform 0.1s, opacity 0.2s; 
}

.ts-btn-submit:hover { opacity: 0.9; }
.ts-btn-submit:active { transform: scale(0.98); }

/* Success Alert */
.ts-alert { 
    padding: 20px; 
    border-radius: 8px; 
    margin-bottom: 25px; 
    text-align: center; 
    font-weight: bold; 
    background: #e6fffa; 
    color: #234e52; 
    border: 1px solid #38b2ac; 
}

/* Grid for Name/Email */
.ts-grid {
    display: flex;
    gap: 20px;
}

@media (max-width: 480px) {
    .ts-grid { flex-direction: column; gap: 0; }
    .ts-card { padding: 20px; }
}

/* Portal Header Adjustment */
@media (max-width: 600px) {
    .ts-portal-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
}

/* WooCommerce My Account Table Tweaks */
.woocommerce-account .shop_table mark.order-status {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 4px;
    display: inline-block;
    min-width: 80px;
    text-align: center;
}

/* Ensure form card looks good in account area */
.woocommerce-account .ts-card {
    border: 1px solid #e2e2e2;
    padding: 20px;
}

/* Frontend Conversation Styling */
.ts-frontend-history {
    max-height: 500px;
    overflow-y: auto;
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Reusing your bubble logic from admin */
.ts-msg { 
    max-width: 85%; 
    padding: 15px; 
    border-radius: 12px; 
    line-height: 1.5; 
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.ts-msg-left { 
    align-self: flex-start; 
    background: #fff; 
    border: 1px solid #ddd; 
}

.ts-msg-right { 
    align-self: flex-end; 
    background: #e2f7cb; 
    border: 1px solid #b7e195; 
}

.ts-msg-system {
    align-self: center;
    background: #f0f0f0;
    font-style: italic;
    font-size: 12px;
    color: #777;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #ddd;
}

.ts-msg-meta { 
    display: block; 
    font-size: 11px; 
    font-weight: bold; 
    margin-bottom: 5px; 
    color: #888; 
    text-transform: uppercase;
}

.ts-timestamp {
    font-weight: normal;
    margin-left: 5px;
    opacity: 0.7;
}