/* ADD these Use Case styles to styles.css */
.usecase-full-content {
    width: 100%;
    height: 100vh;
    display: none;
    flex-direction: row; /* Make sure it's horizontal */
}

.usecase-full-content.active {
    display: flex;
}

/* Main flex container for Use Case */
.main-flex-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
}

/* Chat Section in Use Case */
.chat-section {
    flex: 0 0 400px; /* Fixed width for chat */
    min-width: 350px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #23252C 0%, #2a2d35 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Chat within Use Case section */
.chat-section .chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Use Case Workspace */
.workspace-area.active {
    flex: 1; /* Take remaining space */
    width: auto !important; /* Override any width restrictions */
    opacity: 1;
    background: linear-gradient(135deg, #23252C 0%, #2a2d35 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    position: relative;
}

/* Use Case Library */
.usecase-library {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0; /* Remove padding to let workspace-content handle it */
}

.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(244, 244, 244, 0.1);
}

.library-actions {
    display: flex;
    gap: 10px;
}

.library-action-btn {
    background: rgba(114, 216, 239, 0.1);
    border: 1px solid #72D8EF;
    border-radius: 6px;
    padding: 8px 12px;
    color: #72D8EF;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.library-action-btn:hover {
    background: #72D8EF;
    color: #14161C;
}

.library-action-btn.primary {
    background: #72D8EF;
    color: #14161C;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(20, 22, 28, 0.5);
    border: 1px solid #444;
    border-radius: 8px;
    color: #F4F4F4;
    font-size: 14px;
}

.search-bar input:focus {
    outline: none;
    border-color: #72D8EF;
}

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Slightly smaller for side layout */
    gap: 15px; /* Reduced gap */
    overflow-y: auto;
    flex: 1;
    padding-right: 5px; /* Small padding for scrollbar */
}

.usecase-card {
    background: linear-gradient(135deg, #2a2d35 0%, #23252C 100%);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px; /* Slightly reduced padding */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.usecase-card:hover {
    border-color: #72D8EF;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(114, 216, 239, 0.15);
}

.usecase-card.selected {
    border-color: #72D8EF;
    background: linear-gradient(135deg, #72D8EF15 0%, #72D8EF10 100%);
}

.usecase-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.usecase-title {
    font-weight: 600;
    font-size: 14px; /* Slightly smaller */
    color: #F4F4F4;
    flex: 1;
    margin-right: 8px;
}

.usecase-status {
    padding: 3px 6px; /* Slightly smaller */
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.usecase-status.active {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.usecase-status.draft {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
}

.usecase-status.paused {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
}

.usecase-status.archived {
    background: rgba(96, 125, 139, 0.2);
    color: #607D8B;
}

.usecase-category {
    font-size: 11px;
    color: #72D8EF;
    margin-bottom: 8px;
    font-weight: 500;
}

.usecase-description {
    color: #ccc;
    font-size: 12px; /* Slightly smaller */
    line-height: 1.3;
    margin-bottom: 12px;
    display: block;
    max-height: calc(1.3em * 2); /* Reduced to 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

.usecase-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usecase-priority {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.usecase-priority.low {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.usecase-priority.medium {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
}

.usecase-priority.high {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
}

.usecase-priority.critical {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
}

.usecase-actions {
    display: flex;
    gap: 4px;
}

.card-action-btn {
    background: rgba(244, 244, 244, 0.1);
    border: none;
    border-radius: 4px;
    width: 24px; /* Slightly smaller */
    height: 24px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-action-btn:hover {
    background: rgba(244, 244, 244, 0.2);
}

.card-action-btn.danger:hover {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
}

/* Use Case Editor */
.usecase-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(244, 244, 244, 0.1);
}

.editor-actions {
    display: flex;
    gap: 8px;
}

.editor-action-btn {
    background: rgba(114, 216, 239, 0.1);
    border: 1px solid #72D8EF;
    border-radius: 6px;
    padding: 6px 10px; /* Slightly smaller */
    color: #72D8EF;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.editor-action-btn:hover {
    background: #72D8EF;
    color: #14161C;
}

.editor-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.editor-action-btn.danger {
    border-color: #F44336;
    color: #F44336;
}

.editor-action-btn.danger:hover {
    background: #F44336;
    color: white;
}

.usecase-form {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #F4F4F4;
    font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px; /* Slightly smaller padding */
    background: rgba(20, 22, 28, 0.5);
    border: 1px solid #444;
    border-radius: 6px;
    color: #F4F4F4;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #72D8EF;
}

.form-group textarea {
    resize: vertical;
    min-height: 70px;
}

/* Templates */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Smaller for side layout */
    gap: 15px;
}

.template-card {
    background: linear-gradient(135deg, #2a2d35 0%, #23252C 100%);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.template-card:hover {
    border-color: #72D8EF;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(114, 216, 239, 0.15);
}

.template-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.template-icon {
    font-size: 28px; /* Slightly smaller */
    margin-bottom: 8px;
}

.template-title {
    font-weight: 600;
    font-size: 14px;
    color: #F4F4F4;
}

.template-category {
    color: #72D8EF;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-description {
    color: #ccc;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 15px;
}

.use-template-btn {
    background: #72D8EF;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #14161C;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.use-template-btn:hover {
    background: #5ab0bf;
    transform: translateY(-1px);
}

/* Empty and Loading States */
.empty-state {
    text-align: center;
    padding: 40px 15px; /* Reduced padding */
    color: #888;
}

.empty-icon {
    font-size: 40px; /* Slightly smaller */
    margin-bottom: 15px;
}

.empty-state h4 {
    margin-bottom: 8px;
    color: #F4F4F4;
    font-size: 16px;
}

.create-first-btn {
    background: #72D8EF;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: #14161C;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
    font-size: 13px;
}

.create-first-btn:hover {
    background: #5ab0bf;
    transform: translateY(-2px);
}

.loading-card {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: 14px;
}

.error-card {
    text-align: center;
    padding: 30px;
    color: #F44336;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 8px;
    font-size: 14px;
}

.retry-btn {
    background: #F44336;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    margin-top: 10px;
    font-size: 12px;
}

/* Preview */
.usecase-preview {
    background: rgba(20, 22, 28, 0.5);
    border-radius: 8px;
    padding: 15px;
}

.preview-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.preview-category,
.preview-priority,
.preview-status {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.preview-section {
    margin-bottom: 15px;
}

.preview-section h4 {
    color: #72D8EF;
    margin-bottom: 8px;
    font-size: 14px;
}

.preview-section pre {
    background: rgba(20, 22, 28, 0.8);
    padding: 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.3;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .chat-section {
        flex: 0 0 350px;
        min-width: 300px;
    }
    
    .usecase-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .main-flex-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .chat-section {
        flex: 0 0 300px;
        min-width: auto;
    }
    
    .usecase-grid {
        grid-template-columns: 1fr;
    }
    
    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .library-header,
    .editor-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .library-actions,
    .editor-actions {
        justify-content: center;
    }
}