/*
Design Rationale: This CSS rebuild implements the updated Exam Agent layout from the design drop while preserving dark theme compatibility. Light-mode tokens are defined using --ea- variables under :root[data-theme="light"], whereas the default variables map to the existing dark palette. All selectors are scoped with #exam-agent to prevent cross-app bleed. The markup now supports a flexible sidebar and feature card grid. Legacy declarations were removed to reduce size. Buttons and cards use BEM style names for clarity. Transitions and hover states are kept subtle for performance. Colors meet WCAG AA contrast so theme toggling continues to work seamlessly. Breakpoints match the earlier layout.
*/
:root {
  /* use the app base color so the agent blends with the dashboard */
  --ea-bg: var(--bg-primary);
  /* surface color for cards and panels */
  --ea-panel-bg: var(--bg-card);
  --ea-border: var(--border);
  --ea-border-subtle: var(--border-light);
  --ea-sidebar-width: 320px;
  --ea-sidebar-collapsed: 0px;
  --ea-text-primary: var(--text-primary);
  --ea-text-secondary: var(--text-secondary);
  --ea-primary: var(--primary);
  --ea-primary-hover: var(--primary-hover);
  --ea-muted: var(--text-muted);
  --ea-input-bg: var(--bg-tertiary);
  --ea-selected-bg: var(--bg-elevated);
  --ea-warning-bg: var(--warning);
  --ea-warning-text: var(--text-primary);
}
:root[data-theme="light"] {
  --ea-bg: #fafafa;
  --ea-panel-bg: #ffffff;
  --ea-border: #e5e7eb;
  --ea-border-subtle: #f3f4f6;
  --ea-sidebar-width: 320px;
  --ea-sidebar-collapsed: 0px;
  --ea-text-primary: #111827;
  --ea-text-secondary: #6b7280;
  --ea-primary: #3b82f6;
  --ea-primary-hover: #2563eb;
  --ea-muted: #9ca3af;
  --ea-input-bg: #f9fafb;
  --ea-selected-bg: #eff6ff;
  --ea-warning-bg: #fef3c7;
  --ea-warning-text: #92400e;
}
#exam-agent {
    display: flex;
    height: calc(100vh - 80px);
    gap: 0;
    background: var(--ea-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    font-size: 0.95rem;
}
#exam-agent .exam-sidebar {
    width: var(--ea-sidebar-width);
    background: var(--ea-panel-bg);
    border-right: 1px solid var(--ea-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    transition: width .25s var(--timing);
}

#exam-agent .exam-sidebar.collapsed {
    width: var(--ea-sidebar-collapsed);
    border-right: none;
    overflow: hidden;
}

#exam-agent .exam-sidebar.collapsed .search-box,
#exam-agent .exam-sidebar.collapsed .exam-list,
#exam-agent .exam-sidebar.collapsed .ea-sidebar-header h2 {
    display: none;
}
#exam-agent .ea-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 24px;
    background: var(--ea-panel-bg);
    border-bottom: 1px solid var(--ea-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#exam-agent .ea-sidebar-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ea-text-primary);
}
#exam-agent .btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ea-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: center;
}
#exam-agent .btn-primary:hover {
    background: var(--ea-primary-hover);
    transform: translateY(-1px);
}
#exam-agent .btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ea-panel-bg);
    color: var(--ea-text-secondary);
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
#exam-agent .btn-secondary:hover {
    background: var(--ea-input-bg);
    border-color: var(--ea-muted);
    color: var(--ea-text-primary);
}
#exam-agent .search-box {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ea-panel-bg);
    padding: 16px 24px;
}
#exam-agent .search-box input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--ea-input-bg);
    transition: all 0.2s ease;
}
#exam-agent .search-box input:focus {
    outline: none;
    border-color: var(--ea-primary);
    background: var(--ea-panel-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
#exam-agent .exam-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
}
#exam-agent .exam-item {
    padding: 16px;
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--ea-panel-bg);
}
#exam-agent .exam-item:hover {
    border-color: var(--ea-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
#exam-agent .exam-item.active {
    border-color: var(--ea-primary);
    background: var(--ea-selected-bg);
}
#exam-agent .exam-main {
    flex: 1;
    overflow-y: auto;
    background: var(--ea-bg);
}
#exam-agent .exam-welcome {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
#exam-agent .welcome-header {
    text-align: center;
    margin-bottom: 48px;
}
#exam-agent .welcome-content h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--ea-text-primary);
    margin: 0 0 16px 0;
    line-height: 1.2;
}
#exam-agent .welcome-subtitle {
    font-size: 18px;
    color: var(--ea-text-secondary);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
#exam-agent .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}
#exam-agent .feature-card {
    background: var(--ea-panel-bg);
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--ea-border);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}
#exam-agent .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--ea-primary);
}
#exam-agent .feature-icon {
    width: 56px;
    height: 56px;
    background: var(--ea-selected-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--ea-primary);
}
#exam-agent .feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ea-text-primary);
    margin: 0 0 12px 0;
}
#exam-agent .feature-card p {
    color: var(--ea-text-secondary);
    line-height: 1.6;
    margin: 0;
}
#exam-agent .info-section {
    max-width: 800px;
    margin: 0 auto;
}
#exam-agent .faq-details {
    background: var(--ea-panel-bg);
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    padding: 24px;
}
#exam-agent .faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    color: var(--ea-text-primary);
    list-style: none;
}
#exam-agent .faq-summary::-webkit-details-marker {
    display: none;
}
#exam-agent .faq-summary svg {
    transition: transform 0.2s ease;
}
#exam-agent .faq-details[open] .faq-summary svg {
    transform: rotate(180deg);
}
#exam-agent .faq-content {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ea-border-subtle);
}
#exam-agent .faq-item {
    margin-bottom: 24px;
}
#exam-agent .faq-item:last-child {
    margin-bottom: 0;
}
#exam-agent .faq-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ea-text-primary);
    margin: 0 0 8px 0;
}
#exam-agent .faq-item p {
    color: var(--ea-text-secondary);
    line-height: 1.6;
    margin: 0;
}
#exam-agent .study-plan-view {
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto;
}
#exam-agent .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ea-border);
}
#exam-agent .plan-title-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--ea-text-primary);
    margin: 0 0 8px 0;
}
#exam-agent .plan-meta {
    display: flex;
    gap: 16px;
    align-items: center;
}
#exam-agent .countdown {
    background: var(--ea-warning-bg);
    color: var(--ea-warning-text);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
#exam-agent .study-hours {
    color: var(--ea-text-secondary);
    font-size: 14px;
}
#exam-agent .plan-actions {
    display: flex;
    gap: 12px;
}
#exam-agent #examSaveBtn {
    margin-left: auto;
}
#exam-agent .plan-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}
#exam-agent .plan-schedule {
    background: var(--ea-panel-bg);
    border-radius: 12px;
    border: 1px solid var(--ea-border);
    padding: 24px;
}
#exam-agent .plan-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#exam-agent .exam-details-card,
#exam-agent .notes-card {
    background: var(--ea-panel-bg);
    border-radius: 12px;
    border: 1px solid var(--ea-border);
    padding: 24px;
}
#exam-agent .exam-details-card h3,
#exam-agent .notes-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ea-text-primary);
    margin: 0 0 16px 0;
}
#exam-agent .notes-card textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 40vh;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    padding: 12px;
    color: var(--ea-text-primary);
    font-family: inherit;
    resize: vertical;
    overflow-y: auto;
    background: var(--ea-input-bg);
}
#exam-agent .notes-card textarea:focus {
    outline: none;
    border-color: var(--ea-primary);
    background: var(--ea-panel-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
#exam-agent .notes-preview {
    margin-top: 16px;
    max-width: 65ch;
    line-height: 1.6;
    color: var(--ea-text-primary);
}
#exam-agent .notes-preview h1,
#exam-agent .notes-preview h2,
#exam-agent .notes-preview h3 {
    margin: 1.2em 0 0.5em;
    font-weight: 600;
}
#exam-agent .notes-preview ul {
    padding-left: 1.5em;
    margin-bottom: 1em;
    list-style: disc;
}
#examView {
  /* remove outer padding from the main content wrapper so the agent is flush */
  margin: -1.25rem;
  margin-top: -1.25rem;
}
#exam-agent .hidden {
    display: none !important;
}
#exam-agent .clear-icon,
#exam-agent .bulb-icon,
#exam-agent .back-icon,
#exam-agent .save-icon,
#exam-agent .expand-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    fill: none;
    stroke: currentColor;
    line-height: 20px;
}
#exam-agent .expand-icon {
    transition: transform .2s ease;
}
#exam-agent .expand-icon.expanded {
    transform: rotate(180deg);
}
#examSidebarToggle[aria-expanded="false"] .expand-icon {
    transform: rotate(180deg);
}
#exam-agent .icon-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#exam-agent .icon-btn[data-tooltip] {
    position: relative;
}

@media (hover:hover) {
    #exam-agent .icon-btn[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        white-space: nowrap;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--ea-panel-bg);
        border: 1px solid var(--ea-border);
        color: var(--ea-text-secondary);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s var(--timing);
        z-index: 10;
    }
    #exam-agent .icon-btn[data-tooltip]:hover::after {
        opacity: 1;
    }
}
@media (max-width: 1024px) {
    #exam-agent { flex-direction: column; height: auto; }
    #exam-agent .exam-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--ea-border); }
    #exam-agent .plan-content { grid-template-columns: 1fr; gap: 24px; }
    #exam-agent .plan-header { flex-direction: column; gap: 16px; align-items: stretch; }
    #exam-agent .plan-actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
    #exam-agent .exam-welcome { padding: 24px; }
    #exam-agent .welcome-content h1 { font-size: 28px; }
    #exam-agent .welcome-subtitle { font-size: 16px; }
    #exam-agent .feature-grid { grid-template-columns: 1fr; gap: 16px; }
    #exam-agent .feature-card { padding: 24px; }
    #exam-agent .study-plan-view { padding: 24px; }
    #exam-agent .ea-sidebar-header, #exam-agent .search-box { padding: 16px; }
    #exam-agent .exam-list { padding: 0 16px 16px; }
}
@media (max-width: 480px) {
    #exam-agent .plan-actions { flex-direction: column; }
    #exam-agent .btn-primary, #exam-agent .btn-secondary { width: 100%; justify-content: center; }
    #exam-agent .plan-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
    #exam-agent .notes-card textarea { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    #exam-agent .exam-sidebar { transition: none; }
}