:root {
    /* Color Palette - M3 Teal Based */
    --md-sys-color-primary: #006A6A;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #6FF7F6; /* Derived/Estimated */
    --md-sys-color-on-primary-container: #002020; /* Derived/Estimated */
    
    --md-sys-color-secondary: #4A6363; /* Estimated based on usage */
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #CCE8E7; /* Used in rail active state */
    --md-sys-color-on-secondary-container: #051F1F;

    --md-sys-color-surface: #F5FBFB;
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-on-surface-variant: #49454F;
    
    --md-sys-color-outline: #6F7979;
    --md-sys-color-outline-variant: #CAC4D0;
    
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F2F5F5; /* Estimated */
    --md-sys-color-surface-container: #F1ECF5; /* Used in code block */
}

/* Basic Reset & Accessibility - M3 Compliant (Teal系統一) */
body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
}

/* Scrollbar Customization: Keep it minimal */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.drawer-scroll::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar { width: 4px; }

.drawer-scroll::-webkit-scrollbar-track,
.chat-scroll::-webkit-scrollbar-track { background: transparent; }

.drawer-scroll::-webkit-scrollbar-thumb,
.chat-scroll::-webkit-scrollbar-thumb { 
    background-color: rgba(0,0,0,0.1); 
    border-radius: 20px; 
}
.chat-scroll::-webkit-scrollbar { width: 6px; }

/* Ripple Effect for interactions */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s;
}
.ripple:active::after { transform: scale(0, 0); opacity: .1; transition: 0s; }

/* Tooltip Tail */
.tooltip-tail::before {
    content: ""; position: absolute; top: 50%; right: 100%; margin-top: -6px;
    border-width: 6px; border-style: solid; border-color: transparent #191C1C transparent transparent;
}

/* Typography Utilities - M3 Writing Best Practices */
.text-balance { 
    text-wrap: balance; 
}

/* Japanese Body Text - M3 Compliant: Clear, concise, user-centered */
.jp-body { 
    line-height: 1.75; 
    letter-spacing: 0.015em; 
    text-align: justify;
    /* M3: Optimal reading line length (45-75 characters) */
    max-width: 65ch;
    /* M3: Improve readability with proper word spacing */
    word-spacing: 0.05em;
}

/* M3: Ensure sufficient contrast for all text */
p, li, span, div {
    color: var(--md-sys-color-on-surface); /* on-surface: WCAG AA compliant (4.5:1 contrast) */
}

/* M3: Variant text should maintain readability */
.text-on-surface-variant {
    color: var(--md-sys-color-on-surface-variant); /* on-surface-variant: WCAG AA compliant */
}

/* M3: Headings should be clear and hierarchical */
h1, h2, h3, h4, h5, h6 {
    color: var(--md-sys-color-on-surface);
    font-weight: 500; /* M3: Medium weight for headings */
    line-height: 1.2;
    letter-spacing: 0;
}

/* M3: Links should be clear and actionable */
a {
    color: var(--md-sys-color-primary); /* primary color */
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: #005050; /* darker primary for hover - keeping hardcoded for specific shade or use calc/filter if supported well enough, but hardcoded is safe */
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:focus {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* M3: Lists should be scannable */
ul, ol {
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

/* M3: Paragraphs should have proper spacing */
p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* M3: Emphasis should be clear but not overwhelming */
strong, b {
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

em, i {
    font-style: italic;
}

/* M3: Code and technical terms */
code, kbd, samp {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
    background-color: var(--md-sys-color-surface-container); /* surface-container */
    padding: 0.125em 0.25em;
    border-radius: 4px;
    color: var(--md-sys-color-on-surface);
}

/* M3: Blockquotes for important information */
blockquote {
    border-left: 4px solid var(--md-sys-color-primary); /* primary color */
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    color: var(--md-sys-color-on-surface-variant); /* on-surface-variant */
    font-style: italic;
}

/* M3: Tables should be readable */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    font-weight: 500;
    text-align: left;
    color: var(--md-sys-color-on-surface);
}

td {
    color: var(--md-sys-color-on-surface-variant); /* on-surface-variant for less emphasis */
}

/* M3: Form elements should be clear */
input, textarea, select {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container-lowest); /* surface-container-lowest */
    border: 1px solid var(--md-sys-color-outline-variant); /* outline-variant */
    border-radius: 4px;
    padding: 0.5em;
    font-size: 1em;
    line-height: 1.5;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--md-sys-color-primary); /* primary */
    outline-offset: 2px;
    border-color: var(--md-sys-color-primary);
}

label {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
    display: block;
    margin-bottom: 0.25em;
}

/* Utility Classes for JS Logic */
.page-hidden { display: none !important; }
.fab-hidden { opacity: 0; transform: scale(0.8) translateY(20px); pointer-events: none; }