/* 全域樣式 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
a.btn {
    color: #AB4EF4;
    text-decoration: underline;
}
a.btn:hover {
    color: #AB4EF4;
    text-decoration: none;
}
.btn {
    margin: 2px 0;
}

/* 登入頁 */
.ag-login-wrap {
    height: 100%;
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    background-color: #362D4A;
}
.ag-login-container {
    width: 320px;
    background-color: white; /* 登入區塊背景色 */
    padding: 20px;
    border-radius: 12px;
    border: #844EF4 1px solid;
}
.ag-login-wrap .ag-login-container .ag-logo {
    padding: 20px 0;
    text-align: center;
    color: #844EF4;
}

/* 前台頁 */
.ag-wrap.container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ag-wrap.container-fluid > .row {
    flex-grow: 1;
}
.ag-row-response {
    height: calc(100vh - 305px);
    background: url(../image/logo_bg.png) no-repeat center center, 
                url(../image/line.png) left top no-repeat, 
                url(../image/line.png) right bottom no-repeat  #6217DD;
    padding: 15px 0;
    overflow: hidden;
}
@media(max-width: 1199px) {
    .ag-row-response {
        background-size: 400px auto, auto 150px, auto 150px;
    }
}
@media(max-width: 575px) {
    .ag-row-response {
        background-size: 300px auto, auto 120px, auto 120px;
    }
}
.ag-response-sec {
    height: calc(100vh - 335px); 
    display: flex; 
    flex-direction: column;
}
.ag-response-cont {
    background: #4B3E67; 
    border-radius: 12px; 
    border: #844EF4 1px solid; 
    width: 100%; 
    padding: 15px 15px 15px 55px; 
    color: #ffffff; 
    max-height: 100%; 
    overflow-y: scroll;
    position: relative;
    line-height: 1.5;
}
.ag-response-cont::before {
    content: url('../image/ai_logo.png');
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 15px;
}
/* 卷軸樣式 */
.ag-scrollbar::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}
.ag-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(152, 104, 240, 0.3);
  }
.ag-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(195, 173, 230);
    outline: 1px solid rgb(127, 112, 144);
}
.ag-row-promt {
    height: 265px;
    background-color: #E2DCEF;
    padding: 15px 0;
    overflow: hidden;
}
.ag-promt-cont {
    border: #844EF4 1px solid; 
    border-radius: 12px; 
    background: url(../image/chat-right-dots-fill\ 1.png) #ffffff no-repeat 15px 23px; 
    padding: 15px 15px 15px 45px;
}
.ag-promt-cont .form-select {
    border: none;
}
.ag-promt-cont textarea.form-control {
    background: #E9E9E9;
}
.ag-promt-cont .button-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.ag-row-foo {
    height: 40px;
    background-color: #444444;
    overflow: hidden;
}
footer.ag-copyright {
    font-size: 13px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    opacity: .5;
}

/* 內頁，管理頁面 */
.ag-inner-wrap {
    display: flex;
    min-height: 100vh;        /* 保持滿版高 */
    align-items: flex-start;   /* sticky 在 flex 子元素更穩定 */
}
footer.ag-inner-copyright {
    font-size: 13px;
    line-height: 1.5;
    padding-top: 10px;
    text-align: right;
    color: #666666;
    opacity: .5;
}
/* 解決內容超過視窗高度時，背景無法延伸問題 */
.ag-inner-bg-left,
.ag-inner-bg-right {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -1; /* 將背景放在最底層 */
}
.ag-inner-bg-left {
    width: 280px;
    left: 0;
    background-color:#362D4A; /* 左側欄位背景色 */
}
.ag-inner-bg-right {
    width: 100%;
    right: 0;
    background-color: #ededed; /* 右側欄位背景色 */
}

/* 左欄：保留原本寬度設定（不破壞佈局） */
.ag-inner-wrap .ag-left-column {
    width: 280px;
    min-width: 280px;
    padding: 0 15px;
}

/* ✅ 左欄改 sticky：不抽離文件流，版面不跑掉 */
.ag-left-column {
    position: sticky;
    top: 0;
    max-height: 100vh;   /* 左欄過長時自身可捲動 */
    overflow-y: auto;
}

/* 右欄維持自適應，不需讓位 */
.ag-inner-wrap .ag-right-column {
    flex: 1 1 auto;
    min-width: 0;        /* 避免子元素撐破寬度 */
}

.ag-inner-wrap .ag-left-column .ag-logo {
    padding: 30px 0;
    text-align: center;
    border-bottom: rgba(255, 255, 255, .3) 1px solid;
}
.ag-inner-wrap .ag-left-column ul.ag-left-nav {
    padding: 25px 0;
}
.ag-inner-wrap .ag-left-column ul.ag-left-nav li a {
    display: block;
    padding: 10px 15px;
    margin: 2px 0;
    color: #ffffff;
    text-decoration: none;
}
.ag-inner-wrap .ag-left-column ul.ag-left-nav li a:hover,
.ag-inner-wrap .ag-left-column ul.ag-left-nav li a.active {
    background: rgb(97, 92, 152, 1);
    border-radius: 12px;
}
.ag-inner-wrap .ag-left-column ul.ag-left-nav li a:active {
    background: rgb(97, 92, 152, .5);
}

.ag-inner-main {
    border: #844EF4 1px solid; 
    border-radius: 12px; 
    background: #ffffff; 
    padding: 20px;
}
.ag-inner-main .ag-main-ti {
    color: #844EF4;
    font-weight: bold;
    margin-bottom: 20px;
}
.ag-sub-ti {
    font-size: 1.6rem;
    color: #555555;
}
.ag-inner-form-wrap {
    background: #E9E9E9;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.ag-form-ti {
    padding: 0 15px 10px;
    font-weight: bold;
    font-size: 1.2rem;
}
.ag-table-wrap {
    overflow:hidden;
    border-radius:12px 12px 0px 0px;
}
table.ag-table {
    width: 100%;
    border-collapse:collapse;
}
table.ag-table th {
    background-color: #884ef4;
    color:#ffffff;
    text-align: left;
    padding: 15px;
}
table.ag-table td {
    background-color:#ffffff;
    padding: 10px 15px;
    text-align: left;
}
table.ag-table tr {
    border-bottom: 1px solid #dddddd;
}
table.ag-table tr:last-of-type {
    border-bottom: 2px solid #cccccc;
}
table.ag-table tr:nth-of-type(even) td {
    background-color:#f3f3f3;
}