:root {
        --bg: #f7f8fa;
        --bubble-user: #d1ecf1;
        --bubble-ai: #fff;
    }

    html,
    body {
        height: 100%;
        background: var(--bg);
    }

    .app {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 0;
    }

    .app-header .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-scroll {
        flex: 1 1 auto;
        overflow: auto;
        padding: 16px;
        scroll-behavior: smooth;
        background: linear-gradient(#fafbfc, #f7f8fa);
        background: white;
    }

    .msg {
        max-width: 880px;
        margin: 0 auto 10px auto;
        display: flex;
    }

    .msg .bubble {
        border-radius: 16px;
        padding: 10px 14px;
        line-height: 1.55;
        /*box-shadow: 0 1px 2px rgba(0, 0, 0, .06);*/
    }

    .msg.user {
        justify-content: flex-end;
    }

    .msg.user .bubble {
        background: var(--bubble-user);
        border: 1px solid #bee5eb;
    }

    .msg.ai {
        justify-content: flex-start;
    }

    .msg.ai .bubble {
        background: var(--bubble-ai);
        border: 1px solid #e9ecef;
        background: #f5f5f5;
    }

    #chat>div:nth-child(7)>div.bubble>div>button:nth-child(2) {
        /* border-bottom-color: rgb(125 136 146);
        border-left-color: rgb(193 205 215);
        border-right-color: rgb(171 184 195);
        border-top-color: rgb(182 195 207);
        background-color: rgb(162 166 170); */
    }

    .ai-feedback {
        font-size: 13px;
        user-select: none;
    }

    .ai-feedback .btn-feedback {
        padding: 2px 6px;
        margin-left: 4px;
        position: relative;
        left: 0px;
        border-width: 0px !important;
        background-color: initial;
    }


    .composer-wrap {
        position: sticky;
        bottom: 0;
        /* background: linear-gradient(180deg, rgba(247, 248, 250, 0), rgba(247, 248, 250, 1) 40%); */
        background: white;

    }

    .composer {
        max-width: 920px;
        margin: 0 auto;
        padding: 12px 16px 10px;
        position: relative;
    }

    /* 工具列與對話框左對齊 */
    .composer .left-toolbar {
        position: absolute;
        top: -30px;
        left: 16px;
        display: flex;
        gap: 8px;
    }

    .composer .btn-mini {
        width: 36px;
        height: 36px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .composer .btn-mini:hover {
        background: #f9fafb;
    }

    .composer textarea {
        width: 100%;
        min-height: 44px;
        max-height: 220px;
        resize: none;
        overflow: auto;
        border-radius: 16px;
        padding: 10px 50px 10px 14px;
        border: 1px solid #dfe3e8;
        background: #fff;
        display: block;
    }

    /* 送出按鈕：垂直置中於輸入框右邊（依你目前設定） */
    .composer .send-btn {
        position: absolute;
        right: 30px;
        top: calc(50% - 10px);
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .composer .hint-text {
        font-size: 12px;
        color: #888;
        margin-top: 4px;
        text-align: center;
    }

    .tooltip-inner {
        white-space: nowrap;
    }

    .icon {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* 附註區塊（顯示意圖/引用等） */
    .meta {
        font-size: 12px;
        color: #6c757d;
        margin-top: 6px;
    }

    .meta .badge {
        font-weight: 500;
    }

    .ai-answer {
        line-height: 2.5rem;
    }

    .ai-answer button {
        position: relative;
        top: -0.125rem;
    }

    /****** */
    #serious-main-container {
        margin-top: 100px;
        margin-bottom: 3rem;
        min-height: 60VH;
    }

    .Seri_Div {
        margin: 1em 2em;
        cursor: pointer;
        position: relative;
    }

    .Seri_Div.Hide {
        display: none;
    }

    .Hurt-list {
        width: 100%;
        display: inline-block;
        background-color: #1ca9e9;
        margin: 5px auto;
        padding: 10px;
        color: white;
        border-radius: 6px;
        cursor: pointer;
        font-size: large;
        text-align: left;
        transition: .3s;
        max-width: 1180px;
    }


    table.Seri,
    table.SeriH,
    div.Seri,
    div.SeriH {
        border: 2px solid gray;
        border-spacing: 0;
        font-family: 微軟正黑體;
        /* margin: 0em auto; */
        /* width:95%; */
    }

    .Seri_Div.active {
        transition: .6s;
        transform: translate(0px, 0px) scale(1.05);
        z-index: 10;
    }

    .Seri_Div.active .Seri.hid {
        max-height: 1000px;
        border: 2px solid gray;
        border-top: 0;
        width: 100%;
        box-shadow: 0 10px 20px 0 grey;
        display: block;
    }

    .Seri_Div.active .SeriH.hid {
        box-shadow: 0 -4px 20px 0 grey;
    }


    #Searious01-Result {
        /* max-width: 1440px; */
        text-align: center;
        display: block;
    }

    #Seri_cont {
        text-align: center;
        width: 100%;
        display: block;
    }

    div.SeriH {
        /* cursor: pointer; */
    }



    table.Seri,
    div.Seri {
        /* background-color: white;
      border-top: 0px; */
    }

    table.Seri ul,
    div.Seri ul {
        list-style-type: decimal;
    }

    table.Seri td {
        border: 0;
    }

    table.SeriH tr:nth-child(1),
    div.SeriH>div:nth-child(1) {
        background-color: #005c8e;
        color: white;
        font-size: 1.1em;
        font-weight: 400;
        text-align: center;
    }

    table.SeriH tr:nth-child(2),
    div.SeriH>div:nth-child(2) {
        background-color: #eff5e7;
        font-size: 1.1em;
        font-weight: 400;
        text-align: center;
    }

    table.Seri tr:nth-child(1) {
        background-color: #b3e1f6;
        font-size: 1.05em;
        font-weight: 400;
        text-align: center;
    }

    table.Seri tr td {
        padding: 0.25em;
        border-bottom: 0.1em solid gray;
    }

    table.Seri tr:last-child {
        background-color: #d7e4ea;
        display: none;
    }

    table.Seri tr:last-child td {
        border-bottom: 0px;
        border-top: 0px;
    }

    table.Seri tr:nth-last-child(2) td {
        border-bottom: 0px;
    }

    table.Seri tr td:nth-child(1) {
        text-align: center;
    }

    table.Seri tr td:nth-child(2) {
        padding-left: 1em;
    }

    table.Seri tr td:nth-child(4),
    table.Seri tr td:nth-child(3) {
        max-width: calc(25%);
    }

    .Sg {
        background-color: #d7e4ea;
        border-left: 1px solid #c3c6ca !important;
        max-width: 16em !important;
        word-wrap: break-word;
        /* padding: 0.5em !important; */
        overflow-wrap: break-word;
    }


    .Seri.hid {
        /* display: none;
      max-height: 0px;
      display: block;
      overflow: hidden;
      border: 0;
      transition: .6s;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
      position: relative;
      border-collapse: collapse;
      position: absolute;
      z-index: 10; */
        width: 100%;
    }

    .SeriH {
        border-radius: 10px;
    }

    .SeriH>tbody>tr:nth-child(2)>td,
    div.SeriH>div:nth-child(2) {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .SeriH>tbody>tr:nth-child(1)>td,
    div.SeriH>div:nth-child(1) {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }

    .SeriH.hid {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        transition: 0.5s;
    }

    .SeriH.hid>tbody>tr:nth-child(2)>td,
    div.SeriH.hid>div:nth-child(2) {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        transition: 0.5s;
    }

    .Seri>tbody>tr:last-child>td {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .Seri {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .Seri_Div a {
        font-size: 1.5em;
    }

    .Sg a {
        margin-right: 0.15em;
        margin-left: 0.15em;
        word-wrap: break-word;
        white-space: nowrap;
        display: inline-block;
    }

    .Seri tr>td:first-child {
        border-right: 0.05em solid gray;
    }

    .Seri tr:last-child>td:first-child {
        border-right: 0px;
    }

    .Seri_Div a {
        color: #1c5ef3 !important;
        text-decoration: underline !important;
        /* word-wrap: break-word !important; */
        word-break: keep-all;
    }

    .Seri.SepTable {}

    /*1.*/
    table.SepTable>tbody>tr>td:nth-child(1) {
        border-right: 0.05em solid white;
        width: 2em;
        text-align: right;
        /* vertical-align: top; */
    }

    table.SepTable>tbody>tr>td:nth-child(2) {
        padding-left: 0em;
    }

    table.SepTable>tbody>tr>td:nth-child(1):after {
        content: ". ";
    }

    /*3. 重度*/
    table.SepTable>tbody>tr>td[rowspan]:nth-child(1) {
        border-right: 0.05em solid gray;
        width: 3em;
        text-align: center;
        vertical-align: middle;
        border-bottom: 0.05em solid gray;
        border-top: 0.075em solid gray;
    }

    table.SepTable>tbody>tr>td[rowspan]:nth-child(1):after {
        content: "";
    }


    /******/
    table.SepTable>tbody>tr>td[rowspan]+td {
        border-right: 0.05em solid white !important;
        width: 2em;
        text-align: right !important;
        /* vertical-align: top !important; */
        padding: 0.25em !important;
        border-top: 0.075em solid gray;
    }

    table.SepTable>tbody>tr>td[rowspan]+td[colspan="2"] {
        text-align: left !important;
        padding-left: 0.75em !important;
    }

    table.SepTable>tbody>tr>td[rowspan]:nth-child(1)+td:after {
        content: ". ";
    }

    table.SepTable>tbody>tr>td[rowspan]:nth-child(1)+td[colspan]:after {
        content: "";
    }

    table.SepTable>tbody>tr>td[rowspan]+td+td {
        padding-left: 0em;
        border-top: 0.080em solid #676767;
    }

    table.SepTable>tbody>tr>td[rowspan]+td+td+td {
        border-top: 0.075em solid gray;
    }

    table.SepTable tr td {
        border-bottom: 0.025em solid #d0d0d0;
    }

    table.SepTable>tbody>tr:nth-child(1)>td:nth-child(1),
    table.SepTable>tbody>tr:nth-child(2)>td:nth-child(1) {
        text-align: center;
        border-right: 0.05em solid gray !important;
    }

    table.SepTable>tbody>tr:nth-child(1)>td:nth-child(1):after,
    table.SepTable>tbody>tr:nth-child(2)>td:nth-child(1):after {
        content: "";
    }

    table.SepTable>tbody>tr:nth-child(2)>td:nth-child(2) {
        padding-left: 0.75em !important;
    }

    .modal-item-title {
        background: #3e66d1;
        color: white;
        border-radius: 6px;
    }

    /*---------------------------------------------------------------------*/
    .SWAL2_Modal {
        width: 90%;
        max-width: 1100px;
    }

    #swal2-html-container>.container-fluid ol,
    #swal2-html-container>.container-fluid ul {
        padding-left: 1rem;
    }

    #swal2-html-container>.container-fluid>.row {
        margin-bottom: 2rem;
    }

    /*---------------------------------------------------------------------*/
    .ai-thinking.d-flex.align-items-center {
        position: relative;
    }

    .ai-thinking.d-flex.align-items-center:hover .ai-thinking-reason-container {
        opacity: 1;
    }

    .ai-thinking-reason-container {
        position: absolute;
        top: -150px;  /* 初始位置，之後會被 JavaScript 動態調整 */
        left: -180px;
        transition: opacity 0.3s ease, top 0.3s ease;  /* 添加 top 的過渡效果 */
        opacity: 0;
        user-select: none;
        pointer-events: none;
        width: 220px;
    }

    .ai-thinking-reason-img {
        width: 220px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .ai-thinking-reason-text {
        position: absolute;
        top: 34px;
        left: 25px;
        width: 167px;
        height: 87px;
        font-size: 14px;
        line-height: 1.4;
        color: #333;
        text-align: center;
        word-wrap: break-word;
        /* background-color: antiquewhite; */
        display: flex;
        align-items: center;
        user-select: none;
        pointer-events: none;
    }


    /*---------------------------------------------------------------------*/

    @keyframes puppet-swing {
        0% {
            transform: rotate(0deg) translateX(0);
        }

        25% {
            transform: rotate(3deg) translateX(1px);
        }

        50% {
            transform: rotate(0deg) translateX(0);
        }

        75% {
            transform: rotate(-3deg) translateX(-1px);
        }

        100% {
            transform: rotate(0deg) translateX(0);
        }
    }

    .swing-puppet {
        animation: puppet-swing 6.8s ease-in-out infinite;
        transform-origin: bottom center;
    }

    @media screen and (max-width: 768px) {
        .msg.ai {
            flex-direction: column;
        }

        div:where(.swal2-container) {
            padding: .25rem;
        }

        .SWAL2_Modal {
            width: 100%;
            max-width: initial;
        }

        #swal2-html-container {
            padding: 0.25rem;
            padding-top: 2.5rem;
        }

        #swal2-html-container>.container-fluid {
            padding-right: 5px;
            padding-left: 5px;
        }

        #swal2-html-container>.container-fluid>.row {
            margin-bottom: 0;
        }

        #swal2-html-container>.container-fluid>.row>div {
            margin-bottom: 2.5rem;
        }
    }