/* Combined stylesheet
   - From original stylesheet.css
   - Plus styles extracted from index.html <style>
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
    color: #1772d0;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #f09228;
    text-decoration: none;
}

body,
td,
th,
tr,
p,
a {
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    font-size: 14px;
}

strong {
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    font-size: 14px;
}

h2 {
    margin: 0;
    font-weight: normal;
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    font-size: 22px;
}

.papertitle {
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.name {
    padding-top: 20px;
    margin: 0;
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    font-size: 32px;
}

.one {
    width: 160px;
    height: 160px;
    position: relative;
}

.two {
    width: 160px;
    height: 160px;
    position: absolute;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}

.fade {
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}

span.highlight {
    background-color: #ffffd0;
}

/* Global box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Light mode (default) - OpenAI Style: Black & White with Blue Accents */
:root {
    color-scheme: light;
    --bg-color: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --text-color: #1A1A1A;
    --text-secondary: #6B6B6B;
    --heading-color: #000000;
    --link-color: #3B82F6;
    --link-hover: #2563EB;
    --border-color: #E5E5E5;
    --news-bg: #FAFAFA;
    --caption-color: #8A8A8A;
    --focus-color: #3B82F6;
    --error-color: #EF4444;
    --accent-blue: #3B82F6;
    --accent-sky: #60A5FA;
    --accent-slate: #64748B;
}

/* Dark mode - OpenAI Style: Black & White with Blue Accents */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #131416;
    --bg-secondary: #1A1A1A;
    --text-color: #E0E0E0;
    --text-secondary: #9A9A9A;
    --heading-color: #FFFFFF;
    --link-color: #60A5FA;
    --link-hover: #93C5FD;
    --border-color: #2D2D2D;
    --news-bg: #0D0D0D;
    --caption-color: #7A7A7A;
    --focus-color: #60A5FA;
    --error-color: #F87171;
    --accent-blue: #60A5FA;
    --accent-sky: #7DD3FC;
    --accent-slate: #94A3B8;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 80px;
    letter-spacing: -0.015em;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
}

table {
    color: inherit;
}

p,
td,
th {
    color: var(--text-color) !important;
    font-weight: 400;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 0.4em;
}

h2 {
    font-size: 1.75em;
    margin-bottom: 0.6em;
    font-weight: 700;
}

strong {
    font-weight: 600;
    color: var(--heading-color);
}

.name {
    font-family: 'Inter', sans-serif;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

/* Hide mobile line break on desktop */
.name br.mobile-break {
    display: none;
}

/* Paper title styling */
.papertitle {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--heading-color);
    letter-spacing: -0.02em;
}

/* Fix borders/backgrounds in the News box */
div[style*="border: 1px solid #ccc"] {
    border-color: var(--border-color) !important;
    background: var(--news-bg) !important;
    border-radius: 8px;
}

/* Caption texts under logos */
.sr-reveal p {
    color: var(--caption-color) !important;
    font-size: 14px;
}

.logo-caption {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary) !important;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.logo-caption .org {
    display: block;
    color: var(--heading-color) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.logo-caption .role {
    display: block;
    font-size: 13px;
}

.logo-caption .time {
    display: block;
    font-size: 12px;
    opacity: 0.9;
}

/* Dark mode logo adjustments using CSS filters */
[data-theme="dark"] .logo-nycu img {
    filter: brightness(2.0) contrast(1.2) saturate(1.2);
}

[data-theme="dark"] .logo-hdmap img {
    filter: invert(1) brightness(0.9);
}

[data-theme="dark"] .logo-ncku img {
    filter: saturate(1.2) brightness(1.05);
}

/* Navigation bar - OpenAI Minimalist Style */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 40px;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

[data-theme="dark"] .navbar {
    background-color: var(--bg-color);
}

.navbar-brand {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    text-decoration: none;
    letter-spacing: -0.025em;
}

.navbar-brand .brand-typing {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-right: 0px;
    font-size: inherit;
    line-height: 1;
    min-height: 1em;
}

.navbar-brand .brand-typing::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2px;
    height: 1em;
    background-color: currentColor;
    animation: brand-caret 0.7s step-end infinite;
}

.navbar-brand .brand-typing.typing-complete::after {
    display: none;
}

@keyframes brand-caret {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.navbar-links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.navbar-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease;
    letter-spacing: -0.01em;
}

.navbar-links a:hover {
    color: var(--heading-color);
}

/* Dark mode toggle button - OpenAI Minimalist Style */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    cursor: pointer;
    padding: 8px 14px;
    z-index: 1000;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.theme-toggle:hover {
    background: var(--bg-secondary);
    color: var(--heading-color);
    border-color: var(--heading-color);
}

/* Icon styling */
#theme-icon {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide text span */
#theme-text {
    display: none;
}

/* Mobile menu toggle button */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 2001;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--text-color);
    transition: transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
    transform-origin: center;
}

.menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Container for positioning the theme toggle */
.main-container {
    position: relative;
}

/* Offset anchor points to account for fixed navbar */
#about,
#news,
#research,
#projects {
    scroll-margin-top: 80px;
}

#news th[scope="row"] {
    color: var(--text-secondary) !important;
    white-space: nowrap;
    padding-right: 30px;
    vertical-align: top;
}

#news td {
    vertical-align: top;
}

#news table {
    border-collapse: separate;
    border-spacing: 0 6px;
}

.profile-img {
    outline: 1.5px solid var(--border-color);
    outline-offset: 0;
}

.one video,
.one img {
    border: 1px solid var(--border-color);
    border-radius: 6px;    /* safe default; your inline video radius can still override */
}

.section-sep {
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* NEW badge styling - Watercolor Flow Effect */
.new-badge {
    display: inline-block;
    background: linear-gradient(135deg,
    rgba(96, 165, 250, 0.9) 0%,
    rgba(59, 130, 246, 1) 25%,
    rgba(96, 165, 250, 0.8) 50%,
    rgba(147, 197, 253, 0.9) 75%,
    rgba(96, 165, 250, 1) 100%);
    background-size: 300% 300%;
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    cursor: default;
    position: relative;
    animation: watercolor-flow 6s ease-in-out infinite, morph 4.5s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
    transform-origin: 50% 50%;
}

/* Watercolor flowing animation */
@keyframes watercolor-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Morphing animation for NEW badge */
@keyframes morph {
    0% {
        border-radius: 12px 9px 14px 10px / 10px 14px 9px 13px;
        transform: skew(0deg, 0deg) rotate(0deg);
    }

    15% {
        border-radius: 16px 11px 18px 9px / 11px 17px 10px 12px;
        transform: skew(-1deg, 1.4deg) rotate(-1.5deg);
    }

    32% {
        border-radius: 9px 17px 11px 15px / 15px 11px 16px 10px;
        transform: skew(1.8deg, -0.6deg) rotate(2.2deg);
    }

    48% {
        border-radius: 18px 12px 9px 16px / 13px 18px 9px 14px;
        transform: skew(-2.3deg, 1deg) rotate(-1.1deg);
    }

    65% {
        border-radius: 11px 19px 15px 9px / 16px 12px 18px 10px;
        transform: skew(1.6deg, -1.8deg) rotate(1.5deg);
    }

    82% {
        border-radius: 17px 10px 19px 11px / 11px 19px 12px 17px;
        transform: skew(-1.2deg, 2deg) rotate(-0.8deg);
    }

    100% {
        border-radius: 12px 9px 14px 10px / 10px 14px 9px 13px;
        transform: skew(0deg, 0deg) rotate(0deg);
    }
}

/* Fix Twitter button styling in dark mode */
[data-theme="dark"] iframe[id^="twitter-widget"] {
    filter: invert(0.9) hue-rotate(180deg);
}

[data-theme="dark"] .twitter-follow-button {
    background: transparent !important;
    border: none !important;
}

/* Mobile responsive design */
@media screen and (max-width: 768px) {

    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
        padding-top: 65px;
    }

    /* Mobile navbar */
    .navbar {
        padding: 12px 20px;
        flex-wrap: wrap;
    }

    .navbar-brand {
        font-size: 20px;
    }

    /* Show hamburger menu button on mobile */
    .menu-toggle {
        display: flex;
    }

    /* Hide navbar links by default on mobile */
    .navbar-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        background-color: var(--bg-color);
        padding: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, padding 0.5s ease;
    }

    /* Show navbar links when menu is open */
    .navbar-links.active {
        max-height: 500px;
        padding: 20px 0;
    }

    .navbar-links a {
        font-size: 15px;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .navbar-links a:last-of-type {
        border-bottom: none;
    }

    /* Theme toggle in mobile menu */
    .navbar-links .theme-toggle {
        margin: 12px 20px;
        align-self: flex-start;
    }

    /* Adjust anchor offset for mobile navbar */
    #about,
    #news,
    #research,
    #projects {
        scroll-margin-top: 65px;
    }

    /* Ensure main table doesn't exceed viewport */
    table {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Make profile section stack vertically on mobile */
    .profile-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Override justified text to left align on mobile */
    p[style*="text-align: justify"],
    td[style*="text-align: justify"],
    div[style*="text-align: justify"] {
        text-align: left !important;
    }

    .profile-table tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .profile-table tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Profile image cell - show first (on top) */
    .profile-image-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        order: -1;
        box-sizing: border-box;
    }

    /* Profile text cell - show second (below) */
    .profile-text-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        order: 1;
        box-sizing: border-box;
    }

    /* Adjust profile image container for mobile */
    .profile-image-wrapper {
        width: 60% !important;
        max-width: 250px !important;
    }

    /* Adjust name font size for mobile */
    .name {
        font-size: 2em !important;
    }

    /* Break name into two lines on mobile */
    .name br.mobile-break {
        display: inline;
    }

    /* Adjust heading sizes for mobile */
    h1 {
        font-size: 2em !important;
    }

    h2 {
        font-size: 1.5em !important;
    }

    /* Adjust body font size for mobile */
    body {
        font-size: 15px;
    }

    /* Adjust theme toggle for mobile */
    .theme-toggle {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    #theme-icon {
        font-size: 16px;
    }

    /* Fix contact links wrapping */
    .contact-links p {
        font-size: 14px;
        word-wrap: break-word;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Fix video thumbnails */
    video {
        max-width: 100%;
        height: auto;
    }

    /* Make research preview wrappers span full width */
    .one {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0;
    }

    .one .two {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .one img,
    .one video {
        width: 100% !important;
        max-width: 150px;
        height: auto !important;
    }

    /* Stack video/text rows vertically on mobile */
    td[style*="width:25%"][style*="vertical-align:middle"],
    td[style*="width:75%"][style*="vertical-align:middle"] {
        display: block;
        width: 100% !important;
    }

    td[style*="width:75%"][style*="vertical-align:middle"] {
        padding-top: 0 !important;
    }

    td[style*="width:25%"][style*="vertical-align:middle"] {
        text-align: center !important;
        padding-bottom: 10px !important;
    }

    td[style*="width:25%"][style*="vertical-align:middle"]>div {
        max-width: 420px;
        margin: 0 auto;
    }

    td[style*="width:25%"][style*="vertical-align:middle"] video {
        display: block;
        margin: 0 auto;
    }

    /* Ensure all content boxes fit within viewport */
    td,
    th,
    div {
        box-sizing: border-box;
    }

    /* Logo container - no wrap on mobile, uniform scaling, top align */
    .logo-container {
        flex-wrap: nowrap !important;
        gap: 10px !important;
        justify-content: space-around !important;
        align-items: flex-start !important;
    }

    /* Logo items - uniform scaling on mobile, top align */
    .logo-nycu,
    .logo-ntpu {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Logo images - scale down on mobile, top align */
    .logo-nycu img,
    .logo-ntpu img {
        height: 60px !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Logo caption - adjust font sizes for mobile, top align */
    .logo-caption {
        min-height: 60px !important;
        font-size: 11px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    .logo-caption .org {
        font-size: 12px !important;
    }

    .logo-caption .role {
        font-size: 11px !important;
    }

    .logo-caption .time {
        font-size: 10px !important;
    }
}