/* Fathom-style meeting notes — two-column layout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.doc-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; line-height: 1.6; color: #37352f; }

/* Paper container */
.paper { background: #ffffff; color: #37352f; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); }

/* Tab bar */
.tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
    border: none;
    outline: none;
}
.tab-btn:hover { color: #d1d5db; }
.tab-btn.active { color: #c4e541; border-bottom-color: #c4e541; }

/* Headings — tight, Notion-style */
.doc-body h2 { font-size: 1.25rem; font-weight: 700; color: #37352f; margin: 1.5rem 0 0.25rem 0; padding: 0; border: none; letter-spacing: -0.01em; }
.doc-body h3 { font-size: 1rem; font-weight: 600; color: #37352f; margin: 1.25rem 0 0.15rem 0; }
.doc-body h4 { font-size: 0.8rem; font-weight: 600; color: #9b9a97; margin: 1rem 0 0.1rem 0; }

/* Body text */
.doc-body .text-block { color: #37352f; margin: 0.1rem 0; }

/* Bullets — tight like Notion */
.doc-body .bullet { margin: 0; padding: 0.05rem 0 0.05rem 1.5rem; position: relative; color: #37352f; }
.doc-body .bullet::before { content: '\2022'; position: absolute; left: 0.5rem; color: #37352f; }

/* Numbered items */
.doc-body .numbered { margin: 0; padding: 0.05rem 0 0.05rem 1.5rem; color: #37352f; }

/* Blockquotes — clean left border */
.doc-body blockquote { border-left: 3px solid #e9e9e7; padding: 0.15rem 0 0.15rem 0.85rem; margin: 0.4rem 0; color: #37352f; font-style: italic; background: none; border-radius: 0; }
.doc-body blockquote span { font-style: normal; color: #9b9a97; font-size: 0.8rem; }

/* Bold */
.doc-body strong { color: #37352f; font-weight: 600; }

/* Tables — clean Notion-style */
.doc-body table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.8rem; }
.doc-body th { background: #f7f6f3; padding: 0.4rem 0.6rem; border: 1px solid #e9e9e7; font-weight: 600; color: #37352f; text-align: left; }
.doc-body td { padding: 0.4rem 0.6rem; border: 1px solid #e9e9e7; color: #37352f; }
.doc-body tr:hover td { background: #f7f6f3; }

/* Action items */
.doc-body .action-item { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.15rem 0 0.15rem 0.25rem; font-size: 0.875rem; }
.doc-body .action-item input { accent-color: #2eaadc; margin-top: 0.2rem; width: 15px; height: 15px; }

/* Divider */
.doc-body hr { border: none; border-top: 1px solid #e9e9e7; margin: 1rem 0; }

/* Meta pill */
.meta-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 500; font-family: 'Inter', sans-serif; }

/* Toolbar buttons */
.toolbar-btn { padding: 0.3rem 0.5rem; border-radius: 0.25rem; color: #9ca3af; font-size: 0.8rem; cursor: pointer; transition: all 0.1s; border: none; background: transparent; font-family: 'Inter', sans-serif; }
.toolbar-btn:hover { background: #2d3e54; color: #f3f4f6; }

/* WYSIWYG */
.paper.editing { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 2px #2eaadc; }

/* AI chat response styling */
.ai-response h2, .ai-response h3 { color: #e5e7eb; margin-top: 0.75rem; }
.ai-response strong { color: #e5e7eb; }
.ai-response .bullet { color: #d1d5db; }
.ai-response .bullet::before { color: #9ca3af; }

/* Transcript line */
.transcript-line { transition: background-color 0.1s; }

/* Toast */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.6rem 1rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 500; z-index: 100; transition: opacity 0.3s; font-family: 'Inter', sans-serif; background: #37352f; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Responsive: stack on mobile */
@media (max-width: 900px) {
    #notes-layout { flex-direction: column; }
    #notes-layout > div:last-child { max-width: none; min-width: 0; }
}

/* Print */
@media print {
    body { background: white !important; }
    nav, .no-print { display: none !important; }
    .paper { box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
    #notes-layout { flex-direction: column; }
    #notes-layout > div:last-child { max-width: none; }
}