:root {
    --ww-font-pretendard: 'Pretendard Variable', 'Pretendard', 'SUIT', 'NanumSquare', sans-serif;
    --ww-font-ibm-sans-kr: 'IBM Plex Sans KR', 'Pretendard Variable', 'Pretendard', 'SUIT', 'NanumSquare', sans-serif;
    --ww-font-base: var(--ww-font-pretendard);
    --ww-font-heading: var(--ww-font-base);
    --ww-font-light: var(--ww-font-base);
    --ww-font-strong: var(--ww-font-base);
    --ww-font-scale: 1;
}

html[data-font-scheme='pretendard'] {
    --ww-font-base: var(--ww-font-pretendard);
    --ww-font-heading: var(--ww-font-base);
    --ww-font-light: var(--ww-font-base);
    --ww-font-strong: var(--ww-font-base);
    --ww-font-scale: 1;
}

html[data-font-scheme='ibm'] {
    --ww-font-base: var(--ww-font-ibm-sans-kr);
    --ww-font-heading: var(--ww-font-base);
    --ww-font-light: var(--ww-font-base);
    --ww-font-strong: var(--ww-font-base);
    --ww-font-scale: 0.95;
}

[data-font-scheme='ibm'] {
    --ww-font-base: var(--ww-font-ibm-sans-kr);
    --ww-font-heading: var(--ww-font-base);
    --ww-font-light: var(--ww-font-base);
    --ww-font-strong: var(--ww-font-base);
    --ww-font-scale: 0.95;
}


.ff-ibm-sans-kr,
.font-ibm-sans-kr {
/*    font-family: var(--ww-font-ibm-sans-kr) !important;*/
    font-family: 'IBM Plex Sans KR', 'Pretendard', sans-serif !important;  
/*   폰트 갯수가 최소화 되어야 IBM이 적용됨 */
}
html,
body {
    font-family: var(--ww-font-base);
    font-variant-numeric: tabular-nums;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


.cds-bg-darkgray {
    background-color: #222; 
}

/* ================================
    유틸리티 부족한 내용들 보완
   ================================
*/

.w-94 {
    width:94%;
}

.w-96 {
    width: 96%;
}

.w-98 {
    width: 98%;
}

/* ====================================
   메일
   ==================================== */
.mail-top-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.mail-list-top .cds-btn {
    height: 47px;
    padding: 14px 64px 14px 16px;
    color: var(--cds-text-primary, #161616);
}

.mail-list-top .cds-icon-only-btn {
    padding: 13px;
}

.cds-mail-nav {
    max-width: 180px;
    border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

.cds-mail-nav .cds-mailfolder-name {
    width: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cds-mail-nav .cds-list-content .cds-list-item {
    height: 40px !important;
    padding: 7px 16px !important;
}

.cds-mail-list-wrap {
    width: 460px;
    border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

@media (max-width:1279px) {
    .cds-mail-list-wrap {
        width: 320px !important;
    }

    .cds-mail-title,
    .cds-mail-content {
        width: 260px !important;
    }
}


.cds-mail-list-wrap .cds-empty-state {
    text-align: left;
    padding: 32px;
}

.cds-mail-list-wrap .carbon-checkbox {
    border: 1px solid var(--cds-icon-secondary, #525252) !important
}

.cds-mail-list-wrap .carbon-checkbox:checked {
    background-color: var(--cds-icon-secondary, #525252) !important;
}


.mail-container .rw-slide-viewer-back:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}


.mail-container .cds-search-input-wrap input.carbon-textbox {
    padding: 7px 16px 7px 38px !important;
}

.mail-container .cds-toolbar-btn:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}


.cds-mail-list {
    display: flex;
    position: relative;
    flex-direction: row;
    padding: 0 0 8px 8px;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    border-left: solid 3px transparent;
    font-size: 14px;
    background-color: transparent;
}

.cds-mail-list.focused {
    outline: 2px solid transparent !important;
    outline-offset: -2px !important;
    /*        background-color: transparent !important;*/
}


.cds-mail-list:focus {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}


.cds-mail-list.active {
    border-left: solid 3px var(--cds-focus, #0f62fe);
    background-color: var(--cds-layer-selected, #e0e0e0) !important;
}

.cds-mail-list:hover {
    background-color: var(--cds-layer-hover, #e8e8e8)
}

.cds-mail-list:active {
    /*outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;*/
}

.cds-mail-list:active:has(.cds-icon-only-btn:focus) {
    outline: 0px !important;
    outline-offset: 0 !important;
}

.cds-mail-list .carbon-checkbox:checked::before {
    inset-inline-start: 3.4px;
}


.cds-mail-avatar {
    margin-top: 20px;
    margin-right: 8px;
}

.cds-mail-avatar .cds-btn-icon {
    position: unset;
    display: block;
    color: var(--cds-border-subtle-01, #e0e0e0);
}


.cds-mail-from-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cds-mail-from-wrap .cds-icon-only-btn {
    padding: 4px;
}

.cds-mail-from {
    margin-bottom: 4px;
}

.cds-mail-list-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 12px;
    width: 100%;
    padding: 8px 8px 0 8px;
    color: var(--cds-text-primary, #161616);
}

.cds-mail-title-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cds-mail-title {
    font-weight: 600;
    width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.cds-mail-time {
    font-size: 10px;
    color: var(--cds-text-helper, #6f6f6f);
    flex: 0 0 auto;
}

.cds-mail-content {
    width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--cds-text-secondary, #525252);
}

.cds-mail-content span {
    font-size: 13px;
}

.cds-mail-tool {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.cds-mail-list:hover .cds-mail-tool {
    display: flex;
}


/* 첨부파일 */
.cds-mail-tool-icon {
    padding: 7px;
    color: var(--cds-text-placeholder, #a8a8a8);
}

.cds-mail-tool .cds-icon-only-btn {
    padding: 4px;
    color: var(--cds-text-placeholder, #a8a8a8)
}

.cds-mail-tool .cds-icon-only-btn:hover {
    color: var(--cds-icon-primary, #161616);
}


/* 메일 뷰어 */
.mail-container .cds-content-body {
    max-width: 820px;
}

.cds-mail-view-title span {
    font-size: 16px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.mail-container .text-muted {
    color: var(--cds-text-secondary, #525252) !important;
}

@media (max-width: 1023px) {
    .cds-mail-view-title span {
        line-height: 18px;
        white-space: normal !important;
        word-break: break-word;
        padding-right: 16px;
    }

    .cds-mail-title {
        width: 346px;
    }

    .cds-mail-content {
        width: 330px;
    }
}

.cds-mail-view-toolbar {
    display: flex;
    flex-wrap: wrap;
}

.cds-mail-view-toolbar .cds-btn {
    color: var(--cds-text-primary, #161616) !important;
    height: 50px;
    align-items: center;
}

.cds-mail-view-toolbar .ai-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    height: 24px;
    width: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: default;
    border: 1px solid var(--cds-primary, #0f62fe);
}

/* 버튼 우측 보더 */
.cds-mail-view-toolbar-border {
    border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    margin: 8px 0;
}

/*  더보기 드랍다운 메뉴  */
.cds-mail-view-toolbar .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 3px !important;
    left: -27px !important;
    background-color: var(--cds-field-01, #f4f4f4);
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
}

.cds-mail-view-toolbar .wvs-header-popover .wvs-popover-item {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
}

.cds-mail-view-toolbar .wvs-header-popover .wvs-popover-item:focus,
.cds-mail-view-toolbar .wvs-header-popover .wvs-popover-item:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}

.cds-mail-view-header {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    flex-direction: column;
}

.cds-mail-view-header .cds-mail-avatar {
    margin: 0 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cds-mail-option-wrap {
    flex: 1;
}

.cds-mail-view-time {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 10px;
    color: var(--cds-text-helper, #6f6f6f);
    flex: 0 0 auto;
}

.cds-mail-option {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.cds-mail-option-item {
    display: flex;
    flex: 1 1 auto;
}

.cds-mail-option-item.sender {
    align-items: baseline;
    flex-wrap: wrap;
    white-space: nowrap;
}

.cds-mail-option-item .cds-mail-sender-name {
    font-size: 14px;
    font-weight: 500;
}

.cds-mail-option-title {
    width: 45px;
    flex: 1 0 auto;
}

.cds-mail-option-content {
    width: 100%;
    word-break: break-word;
}

/*  더보기 드랍다운 메뉴  */
.cds-mail-view-file .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 2px !important;
    left: -117px !important;
    background-color: var(--cds-field-01, #f4f4f4);
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
}

.cds-mail-view-file .wvs-header-popover .wvs-popover-item {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
    width: 100%;
    height: 100%;
}

.cds-mail-view-file .wvs-header-popover .wvs-popover-item:focus,
.cds-mail-view-file .wvs-header-popover .wvs-popover-item:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}

.cds-mail-view-body {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
}

.cds-mail-view-wrap .rw-slide-viewer-body {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.cds-mail-view-wrap .cds-empty-state {
    text-align: left;
    padding: 32px;
}

.cds-mail-view-body pre {
    font-size: 16px;
    padding: 16px;
    font-family: var(--ww-font-base);
}

/* 메일 뷰어 iframe */
#mailFrame {
    width: 100%;
    border: 0;
    display: block;
    overflow: hidden;
}

/* 메일 쓰기 */
.cds-mail-write-header {
    padding: 16px;
    border-bottom: 0px solid var(--cds-border-subtle-01, #e0e0e0);
}

.cds-mail-write-title .cds-btn {
    height: 47px;
    padding: 14px 64px 14px 16px;
    color: var(--cds-text-primary, #161616);
}

.cds-mail-write-wrap {
    overflow-y: auto;
    overflow-x: hidden;
}

.cds-mail-write-body {
    background-color: var(--cds-field-02, #F4F4F4) !important;
}

.cds-mail-write-option .cds-control-wrap {
    margin-bottom: 8px;
}

.cds-mail-write-option .autocomplete-container.autocomplete-tagify {
    padding: 0px !important;
}

.cds-mail-write-option .cds-btn {
    font-size: 11px;
    padding: 9px;
    border: 0;
    color: var(--cds-text-primary, #161616) !important;
    background-color: var(--cds-field-02, #F4F4F4) !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
}

.cds-mail-write-option .cds-btn:hover {
    background-color: var(--cds-background-hover, #8d8d8d30) !important;
}

.cds-mail-write-option .cds-icon-only-btn {
    align-items: center;
    padding: 8px;
}

.cds-mail-file-wrap {
    display: flex;
    flex-direction: column;
    max-height: 150px;
    overflow-y: auto;
}

.cds-mail-filedrop-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--cds-white-color, #ffffff);
    border: 1px dashed var(--cds-border-strong-01, #8d8d8d);
    block-size: 96px;
    color: var(--cds-link-primary, #0f62fe);
    /*max-inline-size: 320px;*/
    outline: 2px solid rgba(0, 0, 0, 0);
    outline-offset: -2px;
    transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.cds-mail-filedrop-container:hover {
    outline-color: var(--cds-focus, #0f62fe);
    text-decoration-line: underline;
}

.cds-mail-filedrop-container input:focus {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}

.cds-selected-file {
    display: grid;
    align-items: center;
    background-color: var(--cds-layer-01, #f4f4f4);
    gap: 12px 0;
    grid-auto-rows: auto;
    grid-template-columns: 1fr auto;
    margin-block-end: 8px;
    width: 320px;
    min-block-size: 43px;
    word-break: break-word;
    /*    border-bottom: 1px solid var(--cds-primary, #0f62fe);*/
}

.cds-selected-file .cds-file-name {
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    margin-inline-start: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.cds-selected-file .cds-file-size {
    font-size: 10px;
    font-weight: 400;
    overflow: hidden;
    margin-inline-start: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cds-selected-file .cds-file-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 12px;
    padding-inline-end: 12px;
}

.cds-selected-file .cds-file-state .cds-icon-only-btn {
    padding: 2px;
}

/* Dock base surface extracted from legacy echo.css
   Echo and RxComponents pages should not depend on publish echo.css for layout primitives. */
.dock-wpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.dock-vpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.dock-top,
.dock-bottom,
.dock-left,
.dock-right {
    flex: none;
    position: relative;
}

.dock-content {
    flex: 1;
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

/* CDS motion helpers.
   Use cds-motion for the default reveal, cds-motion-enter for explicit item reveals, and cds-motion-dock-enter for legacy dock-aware layout choreography. */
.cds-motion-enter {
    animation: cds-motion-enter-content 260ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    will-change: auto;
}

.cds-motion:not(.dock-wpanel):not(.dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-motion-dock-enter:not(.dock-wpanel):not(.dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window),
.dock-motion:not(.dock-wpanel):not(.dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 240ms cubic-bezier(0, 0, 0.38, 0.9) both;
    will-change: auto;
}

.cds-motion-chain {
    --cds-motion-chain-delay: 0ms;
    --cds-motion-chain-item-delay: 0ms;
}

.cds-motion-chain.cds-motion-depth,
.cds-motion-chain .cds-motion-depth {
    --cds-motion-chain-delay: 0ms;
}

.cds-motion-chain > :nth-child(1) {
    --cds-motion-chain-item-delay: 0ms;
}

.cds-motion-chain > :nth-child(2) {
    --cds-motion-chain-item-delay: 80ms;
}

.cds-motion-chain > :nth-child(3) {
    --cds-motion-chain-item-delay: 160ms;
}

.cds-motion-chain > :nth-child(4) {
    --cds-motion-chain-item-delay: 240ms;
}

.cds-motion-chain > :nth-child(5) {
    --cds-motion-chain-item-delay: 320ms;
}

.cds-motion-chain > :nth-child(6) {
    --cds-motion-chain-item-delay: 400ms;
}

.cds-motion-chain > :nth-child(7) {
    --cds-motion-chain-item-delay: 480ms;
}

.cds-motion-chain > :nth-child(8) {
    --cds-motion-chain-item-delay: 560ms;
}

.cds-motion-chain > :nth-child(9) {
    --cds-motion-chain-item-delay: 640ms;
}

.cds-motion-chain > :nth-child(10) {
    --cds-motion-chain-item-delay: 720ms;
}

.cds-motion-chain > :nth-child(11) {
    --cds-motion-chain-item-delay: 800ms;
}

.cds-motion-chain > :nth-child(12) {
    --cds-motion-chain-item-delay: 880ms;
}

.cds-motion-chain > .cds-motion-enter:not(.dock-wpanel):not(.dock-vpanel):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-motion-chain > * > .cds-motion-enter:not(.dock-wpanel):not(.dock-vpanel):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-motion-chain > * > * > .cds-motion-enter:not(.dock-wpanel):not(.dock-vpanel):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-chain;
    animation-duration: 360ms;
    animation-delay: calc(var(--cds-motion-chain-delay) + var(--cds-motion-chain-item-delay, 0ms));
    animation-fill-mode: backwards;
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    animation-delay: var(--dock-motion-depth-delay);
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-top;
    animation-duration: 280ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-fade;
    animation-duration: 240ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-left;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-right;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 60ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter:not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-content;
    animation-duration: 260ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 80ms);
}

.rwgrid:is(.cds-motion, .cds-rwgrid) .rw-data-row,
.rwgrid:is(.cds-motion, .cds-rwgrid) .rw-row-detail-row {
    animation: cds-motion-enter-chain 360ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    animation-delay: calc(180ms + (var(--cds-motion-row-depth, 0) * 180ms) + (var(--cds-motion-row-order, 0) * 80ms));
    will-change: auto;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item {
    animation: cds-motion-enter-chain 320ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    animation-delay: var(--cds-motion-list-item-delay, 0ms);
    will-change: auto;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(1) {
    --cds-motion-list-item-delay: 0ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(2) {
    --cds-motion-list-item-delay: 60ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(3) {
    --cds-motion-list-item-delay: 120ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(4) {
    --cds-motion-list-item-delay: 180ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(5) {
    --cds-motion-list-item-delay: 240ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(6) {
    --cds-motion-list-item-delay: 300ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(7) {
    --cds-motion-list-item-delay: 360ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(8) {
    --cds-motion-list-item-delay: 420ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(9) {
    --cds-motion-list-item-delay: 480ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(10) {
    --cds-motion-list-item-delay: 540ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(11) {
    --cds-motion-list-item-delay: 600ms;
}

.cds-list-content:is(.cds-motion, .cds-motion-chain, .cds-motion-list) > .cds-list-item:nth-child(12) {
    --cds-motion-list-item-delay: 660ms;
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) backwards;
    animation-delay: var(--dock-motion-depth-delay);
    will-change: auto;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-top;
    animation-duration: 280ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-fade;
    animation-duration: 240ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-content;
    animation-duration: 260ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 80ms);
}

@media not all {
.cds-motion-enter {
    animation: cds-motion-enter-fade 240ms cubic-bezier(0, 0, 0.38, 0.9) both;
    will-change: auto;
}

.cds-motion:not(.dock-wpanel):not(.dock-vpanel),
.cds-motion-dock-enter:not(.dock-wpanel):not(.dock-vpanel) {
    animation: cds-motion-enter-fade 240ms cubic-bezier(0, 0, 0.38, 0.9) both;
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) both;
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-top;
    animation-duration: 280ms;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-fade;
    animation-duration: 240ms;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-left;
    animation-duration: 280ms;
    animation-delay: 40ms;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-right;
    animation-duration: 280ms;
    animation-delay: 60ms;
}

:is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-content;
    animation-duration: 260ms;
    animation-delay: 80ms;
}

.dock-motion:not(.dock-wpanel):not(.dock-vpanel) {
    animation: cds-motion-enter-fade 240ms cubic-bezier(0, 0, 0.38, 0.9) both;
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter) {
    --dock-motion-depth-delay: 0ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter) {
    --dock-motion-depth-delay: 160ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter) {
    --dock-motion-depth-delay: 320ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter) {
    --dock-motion-depth-delay: 480ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) both;
    animation-delay: var(--dock-motion-depth-delay);
    will-change: auto;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-top;
    animation-duration: 280ms;
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-fade;
    animation-duration: 240ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-left;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-right;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 60ms);
}

:is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter)
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-content;
    animation-duration: 260ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 80ms);
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 160ms;
}

.cds-page-motion > :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 320ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):is(.cds-motion, .dock-motion, .cds-motion-dock-enter):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    --dock-motion-depth-delay: 0ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content):not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation: cds-motion-enter-fade 260ms cubic-bezier(0, 0, 0.38, 0.9) both;
    animation-delay: var(--dock-motion-depth-delay);
    will-change: auto;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-top:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-top;
    animation-duration: 280ms;
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-bottom:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-fade;
    animation-duration: 240ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-left:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-left;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 40ms);
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-right:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-right;
    animation-duration: 280ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 60ms);
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel):not(.rw-slide-viewer):not(.cds-rw-window)
    > .dock-content:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-content;
    animation-duration: 260ms;
    animation-delay: calc(var(--dock-motion-depth-delay) + 80ms);
}

.cds-motion-chain {
    --cds-motion-chain-delay: 180ms;
    --cds-motion-chain-item-delay: 0ms;
}

.cds-motion-chain.cds-motion-depth,
.cds-motion-chain .cds-motion-depth {
    --cds-motion-chain-delay: 360ms;
}

.cds-motion-chain > :nth-child(1) {
    --cds-motion-chain-item-delay: 0ms;
}

.cds-motion-chain > :nth-child(2) {
    --cds-motion-chain-item-delay: 80ms;
}

.cds-motion-chain > :nth-child(3) {
    --cds-motion-chain-item-delay: 160ms;
}

.cds-motion-chain > :nth-child(4) {
    --cds-motion-chain-item-delay: 240ms;
}

.cds-motion-chain > :nth-child(5) {
    --cds-motion-chain-item-delay: 320ms;
}

.cds-motion-chain > :nth-child(6) {
    --cds-motion-chain-item-delay: 400ms;
}

.cds-motion-chain > :nth-child(7) {
    --cds-motion-chain-item-delay: 480ms;
}

.cds-motion-chain > :nth-child(8) {
    --cds-motion-chain-item-delay: 560ms;
}

.cds-motion-chain > :nth-child(9) {
    --cds-motion-chain-item-delay: 640ms;
}

.cds-motion-chain > :nth-child(10) {
    --cds-motion-chain-item-delay: 720ms;
}

.cds-motion-chain > :nth-child(11) {
    --cds-motion-chain-item-delay: 800ms;
}

.cds-motion-chain > :nth-child(12) {
    --cds-motion-chain-item-delay: 880ms;
}

.cds-motion-chain > .cds-motion-enter,
.cds-motion-chain > * > .cds-motion-enter,
.cds-motion-chain > * > * > .cds-motion-enter {
    animation-name: cds-motion-enter-chain;
    animation-duration: 360ms;
    animation-delay: calc(var(--cds-motion-chain-delay) + var(--cds-motion-chain-item-delay, 0ms));
}

.cds-page-motion .cds-motion-chain > .cds-motion-enter,
.cds-page-motion .cds-motion-chain > * > .cds-motion-enter,
.cds-page-motion .cds-motion-chain > * > * > .cds-motion-enter {
    animation-name: cds-motion-enter-chain;
    animation-duration: 360ms;
    animation-delay: calc(var(--cds-motion-chain-delay) + var(--cds-motion-chain-item-delay, 0ms));
}

.cds-page-motion :is(.dock-wpanel, .dock-vpanel).cds-motion-chain
    > .cds-motion-enter:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-page-motion :is(.dock-wpanel, .dock-vpanel).cds-motion-chain
    > * > .cds-motion-enter:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window),
.cds-page-motion :is(.dock-wpanel, .dock-vpanel).cds-motion-chain
    > * > * > .cds-motion-enter:not(.rw-grid-root):not(.rw-slide-viewer):not(.cds-rw-window) {
    animation-name: cds-motion-enter-chain;
    animation-duration: 360ms;
    animation-delay: calc(var(--cds-motion-chain-delay) + var(--cds-motion-chain-item-delay, 0ms));
}

.rwgrid:is(.cds-motion, .cds-rwgrid) .rw-data-row,
.rwgrid:is(.cds-motion, .cds-rwgrid) .rw-row-detail-row {
    animation: cds-motion-enter-chain 360ms cubic-bezier(0, 0, 0.38, 0.9) both;
    animation-delay: calc(180ms + (var(--cds-motion-row-depth, 0) * 180ms) + (var(--cds-motion-row-order, 0) * 80ms));
    will-change: auto;
}
}

@keyframes cds-motion-enter-fade {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

@keyframes cds-motion-enter-top {
    from {
        opacity: 0.55;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cds-motion-enter-content {
    from {
        opacity: 0.55;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cds-motion-enter-chain {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    12% {
        opacity: 0.55;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cds-motion-enter-left {
    from {
        opacity: 0.55;
        transform: translateX(-28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cds-motion-enter-right {
    from {
        opacity: 0.55;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cds-motion,
    .cds-page-motion,
    .cds-motion-enter,
    .dock-motion,
    .cds-motion-dock-enter,
    :is(.dock-wpanel, .dock-vpanel).cds-motion
        > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content),
    .cds-page-motion :is(.dock-wpanel, .dock-vpanel)
        > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content),
    :is(.dock-wpanel, .dock-vpanel).dock-motion
        > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content),
    :is(.dock-wpanel, .dock-vpanel).cds-motion-dock-enter
        > :is(.dock-top, .dock-bottom, .dock-left, .dock-right, .dock-content) {
        animation: none !important;
        transform: none !important;
    }
}

.chat-content-root {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

@media (max-width: 1023px) {
    .chat-content-root {
        padding-left: 3vh;
        padding-right: 3vh;
    }
}

/* 메일 에코 Echo AI */
.cds-copilot-echo {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*    max-width: calc(100vw - 1580px);*/
    /*max-width: calc(100vw - 1620px);*/
/*    max-width: 860px;*/
    min-width: 250px;
    font-size: 12px !important;
}

.cds-copilot-echo .echo-fade-bg::after {
    height: 120px !important;
}

.cds-copilot-echo.echo-ai-bg {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(69 137 255 / 15%) 40%) !important;
    background-size: 100% !important;
}

.echo-ai-bg .chat-content-root {
    position: relative;
    overflow-y: auto;
}

.echo-header {
    height: 50px;
    /*    padding: 12px 20px;*/
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cds-copilot-echo .echo-message-icon .carbon-icon {
    background: linear-gradient(to left, #0f62feb0, #0f62fe7d 50%, #0f62fed9 75%, #0f62fe 75%) !important;
}

.cds-copilot-echo .text-end {
    margin: 0 12px !important;
}

/* 로딩 스피너 */
/* 기본: 모든 assistant 메시지는 아이콘만 보이게 */
.cds-copilot-echo .echo-assistant-container .echo-message-icon .spinner-border {
    display: none;
    width: 14px !important;
    height: 14px !important;
}

.cds-copilot-echo .echo-assistant-container .echo-message-icon .carbon-icon {
    display: inline-block;
}

/* 마지막 assistant 메시지에서만,
                "아이콘에 IsLoading 클래스가 붙어있을 때" 스피너만 보이게 */
.cds-copilot-echo .echo-assistant-container:last-of-type .echo-message-icon:has(.carbon-icon.is-loading) .spinner-border {
    display: inline-block;
}

.cds-copilot-echo .echo-assistant-container:last-of-type .echo-message-icon:has(.carbon-icon.is-loading) .carbon-icon {
    display: none;
}


.echo-title h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
    margin-bottom: 0px;
}

.echo-chat {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message {
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease-in;
}

.cds-copilot-echo .markdown-body {
    word-break: break-all;
    /* 단어 단위와 상관없이 너비 끝에서 줄바꿈 */
    overflow-wrap: break-word;
    /* 긴 단어가 있으면 줄바꿈 (강력 추천) */
    white-space: normal;
    /* 텍스트가 한 줄로 쭉 이어지지 않게 설정 */
}

.cds-copilot-echo .ol, ul {
    padding-left: 14px;
}

.cds-copilot-echo .markdown-body p {
    margin-bottom: 12px !important;
}

.cds-copilot-echo .markdown-body ol li {
    margin-bottom: 8px !important;
}

.cds-copilot-echo .markdown-body ol ul {
    padding-left: 16px !important;
    margin-bottom: 16px;
}

.cds-copilot-echo .markdown-body ol p {
    margin-bottom: 8px !important;
}

.cds-copilot-echo .markdown-body li {
    margin-bottom: 4px;
}

.cds-copilot-echo .markdown-body em {
    font-style: normal;
}

.cds-copilot-echo .markdown-body h3,
.cds-copilot-echo .markdown-body h4 {
    font-size: 13px !important;
}

.cds-copilot-echo .markdown-body blockquote {}

.cds-copilot-echo .blockquote p {
    margin-bottom: 0 !important;
}

.cds-copilot-echo .request-content input::placeholder {
    font-size: 14px;
}





/* 메일쓰기 에코 */
.ai-response-container {
    font-size: 12px !important;
}

.ai-response-container h3 {
    font-size: 14px !important;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai .chat-bubble {
    background-color: transparent !important;
}

.chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-message.user .chat-bubble {
    background-color: var(--cds-interactive);
    color: white;
}

.chat-message.ai .chat-bubble {
    background-color: var(--cds-echo-bubble, #f4f4f4);
    color: var(--cds-text-primary, #161616);
}

.echo-suggestions {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.suggestion-chip {
    padding: 6px 12px;
    background-color: var(----cds-layer-01, #f4f4f4);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 16px;
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
    cursor: pointer;
    transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

.suggestion-chip:hover {
    background-color: var(--cds--cds-background-hover, #8d8d8d30);
}

.echo-input-area {
    padding: 8px;
}

.input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.echo-input {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--cds-text-primary);
    resize: none;
    min-height: 44px;
    max-height: 120px;
    font-family: inherit;
    transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

.echo-input:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.echo-input::placeholder {
    color: var(--cds-text-placeholder, #a8a8a8);
}

.send-button {
    padding: 12px 16px;
    background-color: var(--cds-interactive);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
    height: 44px;
}

.send-button:hover:not(:disabled) {
    background-color: var(--cds-interactive-hover);
}

.send-button:disabled {
    background-color: var(--cds-ui-04);
    cursor: not-allowed;
}

.cds-file-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    width: 100%;
}


.mail-container .request-container {
    position: unset;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 710px;
    margin-inline: auto;
    z-index: 99;
}

.mail-container .request-container .btn:focus,
.mail-container .request-container .btn:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}



/* 모바일 화면 등 좁은 곳에서는 1줄로 */
@media (max-width: 1200px) {
    .cds-file-containercds-file-container {
        grid-template-columns: 1fr;
        /* [] 형태 (한 줄에 하나씩) */
    }
}

.cds-btn-icon-only-32px {
    background-color: transparent;
    border: none;
    padding: 0 0 0 0;
    width: 32px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cds-btn-icon-only-32px.cds-btn-hover-primary:hover {
    background-color: var(--cds-primary) !important;
    color: var(--cds-white-color);
}

.cursor-pointer {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    /* 밑줄과 글자 사이 간격 */
}




/* ====================================
   팀즈 공통
   ==================================== */
/* 리스트(그리드) 디자인  */
.teams-list {
    width: 256px;
    border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

.teams-list-wrap {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    gap: 16px;
}

.teams-list-item {
    position: relative;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 12px 16px;
    border-left: none;
    background-color: var(--cds-field, #ffffff);
}

.teams-list-item:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.teams-list-item:active,
.teams-list-item:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.teams-list-item.active {
    border-left: solid 3px var(--cds-focus, #0f62fe);
    background-color: var(--cds-layer-selected, #e0e0e0);
}


.teams-list-item .teams-list-item-title {
    font-size: 14px;
    display: block;
    white-space: nowrap;
    font-weight: 600;
}



/* 그리드 행 선택 hover 임시*/
.teams-list-griditem {
    position: relative;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 12px 16px;
}

.teams-list-griditem .teams-list-griditem-title {
    font-size: 14px;
    display: block;
    white-space: nowrap;
    font-weight: 600;
}

.teams-card-wrap {
    width: 100%;
    display: grid;
    /*    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));*/
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.teams-card {
    position: relative;
    /*    max-width: 230px;*/
    height: 200px;
    /*    padding: 8px 12px;*/
    background-color: var(--cds-field-03, #f4f4f4);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.teams-card:hover {
/*    background-color: var(--cds-layer-hover, #e8e8e8);*/
}

.teams-card:focus,
.teams-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}

.teams-card.active-none:active {
    outline: none !important;
}

.teams-list-logo {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--cds-field-01, #f4f4f4);
}

.teams-list-logo img {
    height: 50%;
    width: auto;
    /* 비율 유지 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* 잘림 허용 */
    display: block;
}

.teams-card-logo {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teams-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.teams-avatar {
    /*    width: 40px;
    height: 40px;*/
    color: var(--cds-overlay, #16161650);
}

.teams-avatar .cds-btn-icon {
    position: unset;
    display: block;
}




.cds-left-panel {
    /*    max-width: 760px;*/
    max-width: 600px;
    flex: 1;
}

.cds-right-panel {
    max-width: 760px;
    flex: 1;
}

@media (max-width:1023px) {
    .cds-left-panel {
        max-width: 100%;
    }

    .cds-right-panel {
        /*        flex: none;*/
    }
}


.teams-menu-tool {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
}

.teams-view--list .teams-list-wrap {
    display: block;
}

.teams-view--list .teams-card-wrap {
    display: block;
}

.teams-view--card .teams-list-wrap {
    display: none;
}

.teams-view--card .teams-card-wrap {
    display: grid;
}



/* 우측 패널 */
@media(max-width: 1023px) {
    .cds-responsive-form {
        /*        display: inline-block !important;*/
    }
}




/* ====================================
   팀즈
   원격데스크탑
   ==================================== */
.remote-container .teams-list-wrap {
    /*    gap: 0 !important;*/
}

.remote-container .teams-list-item {
    background-color: var(--cds-field-03, #f4f4f4);
}

.remote-container .teams-company-title {
    width: 160px;
}

.remote-container .teams-list-wrap .cds-tag-wrap {
    width: 75px;
}


.remote-container .carbon-textbox {
    background-color: var(--cds-field, #ffffff) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important
}



/* ====================================
   팀즈
   회사관리 
   ==================================== */
/* 회사 리스트*/
.company-list-header {
    display: flex;
    padding: 7px 32px 7px 16px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
    background-color: var(--cds-layer-02, #e0e0e0);
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.company-container .cds-list-item {
    border-left: none;
    padding: 7px 16px;
    font-size: 12px;
}

/* 그리드 최대 높이 지정(스크롤) */
.company-container .cds-grid-contanier {
    max-height: 1800px !important;
    /*730px !important;*/
}


.company-container .cds-search-input-wrap input.carbon-textbox {
    padding: 7px 16px 7px 38px !important;
}

.cds-company-profile .cds-company-img-input {
    overflow: hidden;
}

.cds-company-profile .cds-company-img-input img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}


.cds-company-profile .cds-company-name {
    font-size: 16px;
    font-weight: 600;
}

.cds-contact-avatar {
    color: var(--cds-field-02, #e0e0e0);
}

.cds-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지 비율 유지하면서 꽉 채움 */
}

.company-container .rwgrid .rw-cell .rw-cell-content-container .rw-cell-content {
    padding: 0px !important;
}

@media (max-width:1023px) {
    .company-container .cds-form {
        padding: 0 !important;
    }
}


@media (max-width: 760px) {
    .company-container .teams-list-wrap .teams-list-item {
        gap: 12px !important;
    }

    .company-container .teams-list-wrap .teams-company-title {
        width: 120px !important;
    }

    .company-container .teams-list-wrap .teams-project-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .company-container .teams-list-wrap .cds-progress-wrap {
        width: 100px !important;
    }

    .company-container .teams-company-title {
        width: 200px !important;
    }

    .company-container .teams-list-griditem {
        padding: 12px !important;
    }

    .company-container .teams-list-logo {
        margin-right: 8px !important;
    }

    .cds-company-profile .cds-company-img-input img {
        max-width: 40%;
        max-height: 40%;
        object-fit: contain;
    }


}


/* 소속 연락처 */
.cds-contact-card {
    display: block;
    width: 100%;
    min-width: 200px;
    padding: 8px 12px;
    border: none;
    background-color: var(--cds-field-02, #ffffff);
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    padding: 8px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
}

.cds-contact-card:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.cds-contact-card:focus,
.cds-contact-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
    transition: none !important;
}

/* 프로젝트 */
.cds-project-card {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background-color: var(--cds-field-03, #f4f4f4);
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    padding: 8px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
}

.cds-project-card:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.cds-project-card:focus,
.cds-project-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
    transition: none !important;
}

.company-container .cds-popover-wrap .rx-popover-container .rx-popover-content {
    top: 0 !important;
    left: -112px !important;
}


/* 계약/문서 */
/* 이력 */
.company-container .cds-tab-panel {}

.company-container .cds-textql .ql-editor {
    min-height: 25px !important;
}

/* 카드 더보기 팝오버 */
.teams-thread-item .cds-popover-wrap .rx-popover-container .rx-popover-content {
    left: -96px !important;
}

/* 댓글 더보기 팝오버 */
.teams-menu-tool.comment-tool .cds-icon-only-btn {
    padding: 4px !important;
}

.cds-popover-wrap.teams-menu-tool.comment-tool .rx-popover-container .rx-popover-content {
    left: -113px !important;
}



/* 첨부파일 */
.company-container .cds-selected-file {
    display: grid !important;
    gap: 12px 0 !important;
    background-color: var(--cds-field, #ffffff) !important;
}

.company-container .cds-selected-file .cds-file-item {
    border-radius: 0 !important;
    border: 0 !important;
    background-color: var(--cds-field-03, #f4f4f4) !important;
    font-size: 12px !important;
}


/* ====================================
팀즈
연락처 관리
==================================== */
/* 연락처 리스트*/
.contact-list-header {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(100px, 2fr) minmax(80px, 1fr) 50px 50px;
    padding: 7px 16px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
    background-color: var(--cds-layer-02, #e0e0e0);
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.contact-container .cds-list-item {
    border-left: none;
    padding: 7px 16px;
    font-size: 12px;
}

.contact-container .cds-search-input-wrap input.carbon-textbox {
    padding: 7px 16px 7px 38px !important;
}

.contact-container .cds-user-profile .cds-user-img-input {
    border: none !important;
}

.contact-container .cds-user-profile .cds-user-img-input .carbon-icon {
    background-color: var(--cds-border-subtle-01, #e0e0e0);
}

.cds-user-profile .cds-user-name {
    font-size: 16px;
    font-weight: 600;
}

.cds-user-profile .cds-user-company,
.cds-user-profile .cds-user-rank {
    font-size: 14px;
}

.cds-user-profile .cds-user-company {
    color: var(--cds-link-primary, #0f62fe);
    cursor: pointer;
    font-weight: 500;
}

.contact-container .cds-user-info-btn .cds-btn {
    width: 100%;
    height: 40px;
    align-items: center;
    margin-bottom: 8px;
}

/* 메모 */
.contact-container .cds-notification-wrap {
    min-inline-size: 0;
}

.contact-container .cds-notification-info {
    padding: 0 10px;
    flex-direction: column;
}

.contact-container .cds-notification-info .carbon-icon {
    margin-block-start: 10px;
}

.contact-container .cds-notification-text {
    padding: 10px 0;
}

.contact-container .cds-notification-subtitle {
    font-size: 13px;
}

/* 타임라인 */
.cds-timeline-item {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 8px;
    left: 0;
    border-radius: 50%;
    background-color: var(--cds-primary, #0f62fe);
}

.cds-timeline-card {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    /*    background-color: var(--cds-field-03, #f4f4f4);*/
    background-color: var(--cds-field-02, #ffffff);
    color: var(--cds-text-primary, #161616);
    text-align: left;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
}

.cds-timeline-card:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.cds-timeline-card:focus,
.cds-timeline-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
    transition: none !important;
}

/* 메일 */
.cds-mail-card {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background-color: var(--cds-field-02, #ffffff);
    color: var(--cds-text-primary, #161616);
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    padding: 8px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
}

.cds-mail-card:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.cds-mail-card:focus,
.cds-mail-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
    transition: none !important;
}

.contact-container .cds-mail-title {
    font-size: 14px;
    width: auto !important;
}

.contact-container .cds-mail-content {
    width: auto !important;
}

/* 업무 */
.cds-task-card {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background-color: var(--cds-field-02, #ffffff);
    color: var(--cds-text-primary, #161616);
    text-align: left;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    margin-bottom: 0px;
    position: relative;
}

.cds-task-card:hover {
    background-color: var(--cds-layer-hover, #e8e8e8) !important;
}

.cds-task-card:focus,
.cds-task-card:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
    transition: none !important;
}

/* ====================================
   팀즈
   프로젝트 관리
   ==================================== */

.projects-container input.carbon-textbox {
    background-color: var(--cds-field-02, #ffffff) !important;
}

.projects-container .cds-combobox {
    background-color: var(--cds-field-02, #ffffff) !important;
}

.projects-container .cds-combobox .options-container .option-item {
    /* border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important; */
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    background-color: var(--cds-field-02, #ffff) !important;
}

/* 정렬 드랍다운 라디오박스 */
.cds-popover-wrap.radio-wrap .rx-popover-container .rx-popover-content {
    left: -348px !important;
    padding: 16px !important;
    width: 384px !important;
    background-color: var(--cds-field-02, #ffffff) !important;
}


/* 목록형식 */
.teams-company-name {
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.teams-project-name {
    font-size: 14px;
    font-weight: 600;
}




/*  더보기 드랍다운 메뉴  */
.teams-list-wrap .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 3px !important;
    left: -113px !important;
    background-color: var(--cds-field-01, #f4f4f4);
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
}

.teams-list-wrap .wvs-header-popover .wvs-popover-item {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
}

.teams-list-wrap .wvs-header-popover .wvs-popover-item:focus,
.messenger-container .wvs-header-popover .wvs-popover-item:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}

.teams-list-item:active:has(.cds-popover .cds-icon-only-btn:focus) {
    outline: 0px !important;
    outline-offset: 0 !important;
}


/* 카드형식 */
.teams-menu-tool .cds-icon-only-btn {
    z-index: 9;
    padding: 21px 4px !important;
}

.teams-card .teams-menu-tool .cds-icon-only-btn {
    padding: 8px !important;
}

.teams-card .cds-popover .rx-popover-container .rx-popover-content {
    left: -105px !important;
}

.teams-card:active:has(.teams-menu-tool .cds-icon-only-btn:focus) {
    outline: 0px !important;
    outline-offset: 0 !important;
}

teams-card:focus:has(.cds-popover-wrap .cds-popover-item:focus) {
    outline: 0px !important;
    outline-offset: 0 !important;
}

teams-card:active:has(.cds-popover-wrap .cds-popover-item:active) {
    outline: 0px !important;
    outline-offset: 0 !important;
}


.teams-card .teams-company-name {
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.teams-card .teams-project-name {
    font-size: 16px;
    color: var(--cds-text-primary, #161616);
}


.teams-card .teams-avatar .cds-btn-icon {
    position: unset;
    display: block;
}

/* 진행률 표시 */
.cds-progress-wrap {
    min-width: 0;
}


@media (max-width:760px) {
    .projects-container .teams-list-item {
        gap: 12px !important;
    }

    .projects-container .teams-company-title {
        width: 120px !important;
    }

    .projects-container .teams-project-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .projects-container .cds-progress-wrap {
        width: 100px !important;
    }
}

/* ====================================
   팀즈
   프로젝트-보드
   ==================================== */

.teams-task-name {
    font-size: 14px;
    font-weight: 500;
}



/* ====================================
   팀즈
   프로젝트-쓰레드
   ==================================== */

.teams-thread-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.teams-menu-tool .teams-thread-item a {
    font-size: 12px;
    overflow-y: auto;
    height: 100%;
    color: var(--cds-text-primary, #161616);
}

.teams-thread-item .teams-menu-tool .cds-icon-only-btn {
    padding: 12px !important;
}

.teams-thread-item .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 3px !important;
    left: -96px !important;
    background-color: var(--cds-field-01, #f4f4f4);
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
}

.teams-thread-item .wvs-header-popover .wvs-popover-item {
    color: var(--cds-text-primary, #161616);
    font-size: 12px;
}

.teams-thread-item .wvs-header-popover .wvs-popover-item:focus,
.teams-thread-item .wvs-header-popover .wvs-popover-item:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}


.teams-thread-content {
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}

.teams-thread-time {
    /*    position: absolute;
    top: 0;
    right: 0;*/
    font-size: 10px;
    color: var(--cds-text-helper, #6f6f6f);
    flex: 0 0 auto;
}

.teams-thread-uset {
    font-size: 14px;
    font-weight: 600;
}

.teams-thread-part {
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-secondary, #525252);
}

.cds-comment-wrap .item-comment .cds-btn-secondary {
    background-color: var(--cds-field-, #f4f4f4);
    color: var(--cds-text-secondary, #393939);
}

.cds-comment-wrap .item-comment .cds-btn-secondary:hover {
    background-color: var(--cds-background-hover, #8d8d8d12) !important;
}



/* ====================================
   팀즈
   프로젝트-비용
   ==================================== */
.budget-container .teams-card-wrap {
    max-height: 203px;
}

.budget-container .teams-card {
    position: relative;
    /*    min-width: 220px;*/
    height: 160px;
    padding: 0;
    background: var(--cds-field-03, #f4f4f4);
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--cds-field, #ffffff);
}

.budget-container .teams-card:hover {
    /*        background-color: transparent !important;*/
}

.budget-container .teams-card:focus,
.budget-container .teams-card:active {
    outline: 0 !important;
    outline-offset: 0 !important;
}

.budget-container .wvs-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ====================================
   Echo AI 사용량
   ==================================== */

/* 새로고침 버튼 */
.overview-container .cds-icon-btn {
    padding: 14px 16px !important;
}

.overview-container .teams-card-wrap {
    max-height: 203px;
}

.overview-container .teams-card {
    position: relative;
/*    min-width: 220px;
    height: 160px;*/
    height: auto;
    padding: 0;
    background-color: var(--cds-field-03, #f4f4f4);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.overview-container .teams-card:hover {
    /*        background-color: transparent !important;*/
}

.overview-container .teams-card:focus,
.overview-container .teams-card:active {
    outline: 0 !important;
    outline-offset: 0 !important;
}




/* ====================================
   사용자 관리
   ==================================== */


.cds-user-img-wrap .image-input.image-input-outline .image-input-wrapper {
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cds-user-img-wrap .btn.btn-icon {
    background-color: var(--cds-field-02, #ffffff) !important;
}

.cds-user-img-wrap .btn.btn-icon:hover {
    color: var(--cds-background-hover, #8d8d8d30);
}

/* ====================================
   공통
   ==================================== */
.cds-top-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--cds-text-primary, #161616);
}

/* 서브 타이틀 컨테이너 */
.cds-chtc-2 {
    display: flex;
    align-items:center;
    padding: 16px;
}

/* 서브 타이틀  */
.cds-chtc-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--cds-text-primary, #161616);
}

/* 카테고리 태그 */
.cds-category-tag {
    border: 1px solid var(--cds-support-info, #0043ce);
    color: var(--cds-support-info, #0043ce);
    font-size: 10px !important;
    padding: 2px 5px !important;
}

.cds-provider-tag {
    border: 1px solid var(--cds-support-success, #24a148);
    color: var(--cds-support-success, #24a148);
    font-size: 10px !important;
    padding: 2px 5px !important;
}

/* 즐겨찾기 뱃지 아이콘 */
.prompt-container .cds-list-content .carbon-icon {
    width: 12px;
    height: 12px;
    margin: 0 0 4px 4px;
    color: var(--cds-support-caution, #ff832b);
}

.prompt-container .cds-list-content .cds-list-item {
    align-items: start !important;
    flex-direction: column !important;
}
/* ====================================
   Wave Desk
   ==================================== */
/* 웨이브데스크 아이콘 */
.cds-wavedesk-icon {
    mask-image: url(/lib/svg/wavedesk-icon.svg);
    -webkit-mask-image: url(/lib/svg/wavedesk-icon.svg);
}

.wavedesk-top .cds-btn {
    height: 47px;
    padding: 14px 64px 14px 16px;
    color: var(--cds-text-primary, #161616);
}

/* 고객사 리스트 */
.wavedesk-company-title {
    display: flex;
    flex-direction: column;
    flex: 0 0 140px;
    min-width: 0;
}

.wavedesk-container .cds-list-content .cds-list-item {
    border-left: none !important;
}

.wavedesk-company-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wavedesk-container .carbon-textbox {
    background-color: var(--cds-field, #ffffff) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important
}

.wavedesk-top-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.wavedesk-company-devices {
    flex: 0 0 100px;
    min-width: 0;
}

.wavedesk-company-plan {
    display: flex;
    justify-content: center;
    flex: 0 0 80px;
}

.wavedesk-card-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--cds-text-primary, #161616);
}

.wavedesk-card-content {
    font-size: 24px;
    color: var(--cds-text-primary, #161616);
}

.wavedesk-license-card,
.wavedesk-plan-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100px;
    background-color: var(--cds-field-03, #f4f4f4);
}

.cds-link {
    color: var(--cds-link-primary, #0f62fe);
}

/* 활성 클라이언트 */
.client-header,
.client-list {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(100px, 2fr) minmax(80px, 1fr) 50px 50px;
    gap: 8px;
    padding: 7px 16px;
    align-items: center;
    min-width: max-content;
}

.client-header {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
    background-color: var(--cds-layer-02, #e0e0e0);
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.client-list {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
    background-color: var(--cds-field-03, #f4f4f4) !important;
}

.client-list:hover {
    background-color: #e8e8e8;
}

.client-list-status {
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.client-list-online {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #24a148;
}

.client-list-offline {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--cds-layer-02, #e0e0e0);
}

.client-manage-link,
.manage-link {
    color: #0f62fe;
    cursor: pointer;
    text-decoration: none;
}

.client-manage-link:hover,
.manage-link:hover {
    text-decoration: underline;
}

/* ====================================
   메신저
   ==================================== */
/*.messenger-container {
    max-width: 760px;
}*/

.cds-messenger-nav {
    background-color: var(--cds-white-color, #FFFFFF);
}

.cds-messenger-nav-bottom {
    max-width: 760px;
    display: none;
    background-color: var(--cds-field-01, #f4f4f4);
}
    .cds-messenger-nav-bottom .wvs-sidebar-nav-item {
        border-left: none !important;
    }

    .cds-messenger-nav-bottom .wvs-sidebar-nav-item.selected {
        background-color: var(--cds-white-color, #FFFFFF);
        font-weight: 600;
    }

@media (max-width:1023px) {
    .cds-messenger-nav {
        display: none;
    }
    /* 모바일 리스트 */
    .cds-messenger-nav-bottom {
        width: 100%;
        /*        height: 82px;*/
        display: flex;
        flex-direction: row;
    }

        .cds-messenger-nav-bottom .wvs-sidebar-nav-item {
            height: 52px;
            flex: 1;
            justify-content: center;
            flex-direction: column;
            padding: 6px 0 !important;
            gap: 2px;
        }


    .wvs-sidebar-nav-item.selected::before {
        display: none;
    }

    .messenger-container .rw-slide-viewer-header {
        padding-left: 0 !important;
    }
}

@media (max-width: 760px) {
    .cds-mm-flex-column {
        flex-direction: column;
    }
}

/* 좌측 리스트 공통 */
.messenger-container input.carbon-textbox {
    background-color: var(--cds-field, #ffffff) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

.messenger-container .cds-search-input-wrap {
    background-color: var(--cds-field, #ffffff) !important;
}

/*.messenger-container .cds-list-content .cds-list-item {
    align-items: normal !important;
}*/

.cds-member-avatar {
    color: var(--cds-border-subtle-01, #e0e0e0);
    display: flex;
    justify-content: center;
}

/* 멤버 */
.messenger-container .cds-list {
    width: 320px;
}

.cds-member-item .cds-btn {
    position: absolute;
    top: -12px;
    right: -16px;
}

.cds-member-list-wrap .cds-tree {
    background-color: var(--cds-field, #ffffff) !important;
}

.cds-member-list-wrap .cds-tree-node-label-text {
    font-size: 13px;
}

.cds-member-list-wrap .cds-list-content .cds-list-item {
    padding: 16px 12px !important;
}

.messenger-container .cds-member-item .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 2px !important;
    left: -112px !important;
}

.cds-member-name {
    font-size: 14px;
    font-weight: 600;
}

.cds-member-content {
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-secondary, #525252);
}

.cds-member-tool {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}

.messenger-container .cds-user-img-input .carbon-icon {
    background-color: var(--cds-border-subtle-01, #e0e0e0);
}

/* 멤버 우측 슬라이드 */
.messenger-container .rw-slide-viewer.slide-right {
    top: 0 !important;
    max-height: 100%;
}


/* 채팅 */
.cds-chat-time {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: var(--cds-text-helper, #6f6f6f);
    flex: 0 0 auto;
}

.cds-chat-content {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* 대화상대 초대 */
.cds-invite-team {
    height: 220px;
}

.cds-invite-team .cds-tree {
    background-color: var(--cds-field, #ffffff) !important;
}

.cds-invite-team .cds-tree-node-label-text {
    font-size: 14px;
}

.cds-invite-list {
    height: 230px;
}

.cds-invite-list-item:hover {
    background-color: var(--cds-background-hover, #8d8d8d30) !important;
}

.cds-invite-list-item .cds-icon-only-btn {
    padding: 2px !important;
}


/* 채팅창 헤더 더보기 */
.messenger-container .prompt-list-top .wvs-header-popover .rx-popover-container .rx-popover-content {
    left: -92px !important;
}

/*  더보기 드랍다운 메뉴  */
.messenger-container .wvs-header-popover .rx-popover-container .rx-popover-content {
    width: 140px;
    top: 0px !important;
    left: -106px !important;
    background-color: var(--cds-field-01, #f4f4f4);
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
}

.messenger-container .wvs-header-popover .wvs-popover-item {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
}

.messenger-container .wvs-header-popover .wvs-popover-item:focus,
.messenger-container .wvs-header-popover .wvs-popover-item:active {
    outline: 2px solid var(--cds-focus, #0f62fe) !important;
    outline-offset: -2px !important;
}


.tox-tinymce {
    border: 0px solid #eee !important;
    border-radius: 0px !important;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    overflow: hidden;
    position: relative;
    visibility: inherit !important
}

.tox .tox-edit-area__iframe {
    background-color: transparent !important;
}


.base-control-bg {
    background-color: var(--cds-field-03, #F4F4F4) !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
}




/* ====================================
   에코 ML
   ==================================== */

.app-title-container .selected-model-wrap .cds-combobox .template-item-container {
    color: var(--cds-text-primary, #161616) !important;
    font-style: normal !important;
}
.optimizer-container .app-title-container {
    height: 92px;
}

.optimizer-container .table-responsive {
    overflow-y: hidden;
    overflow-x: hidden;
}

.optimizer-container .table-responsive .table th {
    background-color: var(--cds-table-header, #e0e0e0);
    padding: 7px 16px;
}
.optimizer-container .table-responsive .table-body-scroll td {
    padding: 7px 16px;
}

.optimizer-container .table-wrapper {
    width: 100%;
}

.optimizer-container .table-fixed {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
}

.optimizer-container .table-body-scroll {
/*    max-height: 382px;*/
    overflow-y: auto;
    overflow-x: hidden;
}

    .optimizer-container .table-body-scroll table {
        border-top: none;
    }

.cds-two-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.optimizer-container .section-title {
    font-size: 14px !important;
}

 .cds-modal-heading {
    white-space: pre-wrap !important; /* \n 문자를 실제 줄바꿈으로 렌더링합니다 */
}

.optimizer-container .teams-card {
    background-color: var(--cds-rw-ctrl-bg) !important;
}

/* 다크모드일 경우 */
/*[data-bs-theme=dark] .optimizer-container .cds-notification-info, .optimizer-container .cds-table-tbody {
    background-color: var(--cds-field-03, #f4f4f4) !important;
}*/

[data-bs-theme=dark] .optimizer-container .cds-table-thead {
    background-color: #525252 !important;
}

[data-bs-theme=light] .ai-bg {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0) 80%, rgb(174 204 255 / 16%) 90%, rgb(148 187 255 / 28%) 100%);
}
[data-bs-theme=dark] .ai-bg {
    background: linear-gradient( 180deg, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0) 80%, rgba(46, 72, 116, 0.16) 90%, rgba(74, 116, 188, 0.28) 100% );
}


.optimizer-container .cds-switcher-item {
    box-shadow: inset -1px 0 0 0 var(--cds-border-inverse, #161616), inset 1px 0 0 0 var(--cds-border-inverse, #161616) !important;
}
    .optimizer-container .cds-switcher-item:first-child {
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
        border-inline-end: 0 !important;
    }
    .optimizer-container .cds-switcher-item:not(.is-selected), .optimizer-container .cds-switcher-item:last-child {
        border-start-end-radius: 0 !important;
        border-end-end-radius: 0 !important;
        border-inline-end: 0 !important;
    }


.wave-analysis .cds-tabs-link {
    font-size: 14px !important;
}



/*****************/
/* Echo RxComponents extracted base surface
   Keep RxComponents Echo chat styling available without depending on publish echo.css.
   Legacy host pages may still keep their own echo.css copy. */
.app-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

    .app-title-container .token-wrap {
        display: flex;
        height: 100%;
        align-items: center;
        font-size: 14px;
        padding-left: 16px;
    }

        .app-title-container .token-wrap .token-used {
            font-weight: bold;
        }

    .app-title-container .ai-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        margin-right: 8px;
        height: 24px;
        width: 24px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        cursor: default;
        border: 1px solid var(--cds-text-primary, #161616);
    }

    .app-title-container .selected-model-wrap {
        width: 250px;
        border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
        border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    }

        .app-title-container .selected-model-wrap .cds-combobox {
            background-color: transparent !important;
            border-bottom: none !important;
            height: 49px !important;
        }

            .app-title-container .selected-model-wrap .cds-combobox .options-container {
/*                overflow-y: unset !important;*/
                margin-top: 1px;
                background-color: var(--cds-field, #ffffff);
                color: var(--cds-text-primary, #161616) !important;
                max-height: 356px !important;
            }

        .app-title-container .selected-model-wrap:hover {
            background-color: var(--cds-layer-hover, #E8E8E8) !important;
        }

        .app-title-container .selected-model-wrap:has(.cds-combobox .options-container .option-item:hover) {
            background-color: transparent !important;
        }

        .app-title-container .selected-model-wrap .cds-combobox .rw-textbox-input {
            height: 49px !important;
            cursor: pointer;
        }

        .app-title-container .selected-model-wrap .cds-combobox input::placeholder {
            font-size: 14px;
            color: var(--cds-text-primary, #161616) !important;
        }

        .app-title-container .selected-model-wrap .selected-model-dropdown {
            font-size: 14px;
            font-weight: 400;
            color: var(--cds-text-primary, #161616);
        }

        .app-title-container .selected-model-wrap .selected-model {
            margin-right: 8px;
        }

        .app-title-container .selected-model-wrap .selected-model-title {
            font-size: 14px;
        }

        .app-title-container .selected-model-wrap .selected-model-name {
            font-size: 11px;
            color: var(--cds-link-secondary, #0043CE);
        }

        .app-title-container .selected-model-wrap .selected-model-subtitle {
            font-size: 11px;
            color: var(--cds-text-secondary, #525252);
        }

    .app-title-container .cds-combobox .template-cotainer {
        background-color: transparent !important;
        border: none !important;
    }

    .app-title-container .cds-combobox .options-container .option-item {
        background-color: transparent !important;
        height: 49px !important;
        font-size: 14px;
    }

        .app-title-container .cds-combobox .options-container .option-item:active,
        .app-title-container .cds-combobox .options-container .option-item:focus,
        .app-title-container .cds-combobox .options-container .option-item:hover {
            outline: 2px solid var(--cds-focus, #0f62fe);
            outline-offset: -2px;
        }

    .app-title-container .cds-combobox.echo-ai-model-selector .options-container .option-item {
        height: auto !important;
        min-height: 50px;
        padding: 12px;
    }

    .app-title-container .echo-version {
        padding: 14px 16px;
        cursor: default;
        line-height: 20px;
    }

@media (max-width:1023px) {
    .app-title-container .selected-model-wrap .cds-combobox .options-container {
        max-height: 390px !important;
    }

    .app-title-container .token-wrap {
        font-size: 12px !important;
        padding-left: 0 !important;
        padding-right: 4px !important;
    }
}

.request-content:has(.request-input:focus) {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.request-container textarea.form-control {
    padding: 1.5rem 1rem;
}

.request-container .request-content {
    background-color: var(--cds-field, #ffffff);
    border-radius: 8px !important;
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

.ai-loading .request-content {
    border: 1px solid transparent !important;
}

.request-container .request-input {
    background-color: transparent;
    resize: none;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    border: 0;
    width: 100%;
}

.request-container .form-control.request-input {
    color: var(--cds-text-primary, #161616);
}

.request-container .request-input::placeholder {
    color: var(--cds-text-placeholder, #a8a8a8) !important;
    font-size: 14px;
}

.request-container .request-input:focus {
    background-color: transparent;
    outline: none !important;
    border: none !important;
    box-shadow: none;
}

.request-container .request-content button {
    border: 0 solid;
    background-color: transparent !important;
    outline: none;
}

.thinking-stream {
    line-height: 1.5;
    color: #555;
    white-space: pre-wrap;
    font-size: 0.95em;
}

.thinking-text-container {
    color: var(--bs-gray-600);
    font-size: 14px;
    padding: 12px 28px;
    margin-left: 5px;
    border-radius: 0 !important;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.75;
}

    .thinking-text-container .thinking-text-content {
        white-space: normal;
    }

        .thinking-text-container .thinking-text-content p {
            white-space: pre-wrap;
            margin-top: 1rem;
        }

@media (max-width:767px) {
    .thinking-text-container {
        padding: 20px;
    }
}

.echo-chat-assistant .thinking-text-container span.is-loading {
    display: inline-block;
    background: linear-gradient(90deg, var(--cds-text-secondary, #525252) 0%, var(--cds-text-primary, #161616) 45%, var(--cds-link-primary, #0f62fe) 55%, var(--cds-text-secondary, #525252) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: echoThinkingTextSweep 1.6s linear infinite;
}

.echo-chat-assistant .thinking-text-container span.is-loading::after {
    content: none;
}

.echo-chat-assistant .echo-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    vertical-align: middle;
}

.echo-chat-assistant .echo-thinking-dots--below {
    display: flex;
    margin-top: 7px;
    margin-left: 1px;
}

.echo-chat-assistant .echo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cds-interactive-01, #0f62fe);
    animation: echoDotPulse 1.15s ease-in-out infinite;
}

.echo-chat-assistant .echo-dot:nth-child(2) {
    animation-delay: 0.16s;
}

.echo-chat-assistant .echo-dot:nth-child(3) {
    animation-delay: 0.32s;
}

.echo-chat-assistant .echo-thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 2px 0;
}

.echo-chat-assistant .thinking-text-container .echo-thinking-dots::after,
.echo-chat-assistant .thinking-text-container .echo-dot::after {
    content: none;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .echo-chat-assistant .thinking-text-container span.is-loading {
        animation: none;
        background: none;
        color: var(--cds-text-secondary, #525252);
        -webkit-text-fill-color: currentColor;
    }

    .echo-chat-assistant .echo-dot {
        animation: none;
    }
}

.request-btn .cds-icon-only-btn {
    cursor: pointer;
    border: 0;
}

    .request-btn .cds-icon-only-btn:active {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px !important;
    }

/* EchoChatAssistant scoped legacy surface parity
   Mirror the legacy echo.css surface inside RxComponents only. */
.echo-chat-assistant .app-title-container {
    background: var(--bs-body-bg);
    border-bottom: 1px solid #e5e5e5;
}

.echo-chat-assistant .echo-chat-body-container {
    border: 0 solid #ccc;
    border-radius: 0;
    width: 95%;
    max-width: 720px !important;
    line-height: 1.75em;
    font-size: 16px;
    font-weight: 400;
}

.echo-chat-assistant .chat-assistant-container {
    justify-content: start;
    width: 100%;
}

    .echo-chat-assistant .chat-assistant-container .card {
        border-width: 0;
        background-color: transparent;
        width: 100%;
        padding: 25px 0 25px 0;
        margin-bottom: 25px;
        border-bottom: 0 solid var(--bs-gray-700);
    }

        .echo-chat-assistant .chat-assistant-container .card .echo-message-icon {
            font-size: 14px;
            color: var(--cds-text-primary, #161616);
        }

            .echo-chat-assistant .chat-assistant-container .card .echo-message-icon .carbon-icon {
                background: linear-gradient(to left, #0f62feb0, #0f62fe7d 50%, #0f62fed9 75%, #0f62fe 75%) !important;
            }

    .echo-chat-assistant .chat-assistant-container .echo-message-icon .spinner-border {
        display: none;
    }

    .echo-chat-assistant .chat-assistant-container .echo-message-icon .carbon-icon {
        display: inline-block;
    }

    .echo-chat-assistant .chat-assistant-container:last-of-type .echo-message-icon:has(.carbon-icon.is-loading) .spinner-border {
        display: inline-block;
    }

    .echo-chat-assistant .chat-assistant-container:last-of-type .echo-message-icon:has(.carbon-icon.is-loading) .carbon-icon {
        display: none;
    }

    .echo-chat-assistant .chat-assistant-container .card .card-body {
        padding: 0;
        margin-left: 2px;
    }

    .echo-chat-assistant .chat-assistant-container .card p {
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .echo-chat-assistant .chat-assistant-container .card-body p:first-child {
        word-wrap: break-word;
        margin-top: 10px;
    }

    .echo-chat-assistant .chat-assistant-container .table-responsive .table {
        color: var(--cds-text-primary, #161616);
        border-bottom: 1px solid var(--cds-border-disabled, #c6c6c6);
    }

        .echo-chat-assistant .chat-assistant-container .table-responsive .table th {
            background: transparent;
            text-align: center;
            font-weight: 600;
            border: 1px solid var(--cds-border-disabled, #c6c6c6);
        }

        .echo-chat-assistant .chat-assistant-container .table-responsive .table td {
            background: transparent;
            color: var(--cds-text-primary, #161616);
            border: 1px solid var(--cds-border-disabled, #c6c6c6);
        }

        .echo-chat-assistant .chat-assistant-container .table-responsive .table th,
        .echo-chat-assistant .chat-assistant-container .table-responsive .table td {
            padding: 6px 13px;
        }

    .echo-chat-assistant .chat-assistant-container .blockquote {
        background-color: var(--cds-notification-info, #EDF5FF) !important;
        border: 1px solid #0043CE30;
        border-inline-start: 3px solid var(--cds-support-info, #0043CE);
        font-size: 14px;
    }

.echo-chat-assistant .chat-user-container {
    justify-content: flex-end;
    width: 100%;
    padding: 16px 0 0 0;
}

.echo-chat-assistant .echo-chat-body-container > .echo-chat-assistant__turn:last-of-type {
    padding-bottom: 150px;
}

    .echo-chat-assistant .chat-user-container .card {
        border-radius: 25px 4px 25px 25px;
        border: 0;
        background-color: var(--cds-echo-bubble, #f4f4f4);
        max-width: 450px;
    }

        .echo-chat-assistant .chat-user-container .card .card-body {
            padding: 12px 18px;
        }

.echo-chat-assistant .echo-chat-assistant__image-thumb {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: zoom-in;
}

    .echo-chat-assistant .echo-chat-assistant__image-thumb:focus-visible {
        outline: 2px solid var(--cds-border-interactive, #0f62fe);
        outline-offset: 3px;
    }

.echo-chat-assistant__image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.echo-chat-assistant__image-viewer-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 96px);
}

.echo-chat-assistant__image-viewer-image {
    display: block;
    max-width: calc(100vw - 72px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.echo-chat-assistant__image-viewer-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(38, 38, 38, 0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .echo-chat-assistant__image-viewer-close:hover,
    .echo-chat-assistant__image-viewer-close:focus-visible {
        background: rgba(82, 82, 82, 0.92);
        outline: 2px solid rgba(255, 255, 255, 0.72);
        outline-offset: 2px;
    }

.echo-chat-assistant .messages {
    margin-bottom: 10px;
}

    .echo-chat-assistant .messages .card {
        font-size: 14px;
        color: var(--cds-text-primary, #161616);
    }

    .echo-chat-assistant .messages h2,
    .echo-chat-assistant .messages h3 {
        font-size: 16px;
    }

    .echo-chat-assistant .messages .card-text ul {
        margin-bottom: 24px;
    }

    .echo-chat-assistant .messages .card-text li {
        margin-bottom: 4px;
        padding-left: 4px;
        line-height: 24px;
    }

    .echo-chat-assistant .messages .token-state-wrap {
        font-size: 11px;
        color: var(--bs-gray-600);
    }

    .echo-chat-assistant .messages span.token-state-wrap:first-child {
        margin-left: 0;
    }

.echo-chat-assistant .request-container {
    position: absolute;
    bottom: 10px;
    left: -8px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 710px;
    margin-inline: auto;
    z-index: 99;
    overflow: hidden;
}

.echo-chat-assistant .request-container::before,
.echo-chat-assistant .request-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: -1;
}

.echo-chat-assistant .request-container::before {
    top: -40px;
    height: 44px;
/*    background: linear-gradient(to top, rgba(249, 249, 249, 0.96) 12%, rgba(249, 249, 249, 0.82) 40%, rgba(249, 249, 249, 0) 100%);*/
}

.echo-chat-assistant .request-container::after {
    bottom: -24px;
    height: 24px;
    background: linear-gradient(to bottom, rgba(249, 249, 249, 0.92) 0%, rgba(249, 249, 249, 0) 100%);
}

.echo-chat-assistant .request-container .request-content button:hover {
    background-color: var(--cds-background-hover, #8d8d8d12) !important;
}

.echo-chat-assistant .request-container .request-content button:focus {
    background-color: transparent;
    outline: none;
    border: none;
    box-shadow: none;
}

.echo-chat-assistant .request-container .request-content .dock-left .cds-icon-only-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.echo-chat-assistant .request-container .request-content .dock-right .cds-icon-only-btn {
    border-radius: 0 8px 8px 0;
}

.echo-chat-assistant .request-container .request-content.echo-chat-assistant__composer-surface {
    position: relative;
    overflow: hidden;
    background-color: var(--cds-field, #ffffff);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.echo-chat-assistant .request-container .request-content.echo-chat-assistant__composer-surface:has(.request-input:focus) {
    outline: 2px solid var(--cds-border-interactive, #0f62fe);
    outline-offset: -2px;
}

.echo-chat-assistant .echo-chat-assistant__input.echo-chat-assistant__input-autogrow {
    min-height: 48px;
    max-height: 160px;
    field-sizing: content;
    overflow-y: auto;
    scrollbar-width: thin;
}

.echo-chat-assistant__turn-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -8px;
    padding-top: 0;
    padding-top: 0;
    margin-left: 33px;
    color: var(--bs-gray-600, #525252);
    font-size: 10px;
}

.echo-chat-assistant__turn-meta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.echo-chat-assistant__lineage-btn {
    min-height: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

.echo-chat-assistant__lineage-window .cds-modal-header {
    position: relative;
}

.echo-chat-assistant__lineage-section {
    margin-bottom: 18px;
}

.echo-chat-assistant .request-container.drag-over {
    border-color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
}

    .echo-chat-assistant .request-container.drag-over::before {
        content: "이미지를 여기에 드롭하세요";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(13, 110, 253, 0.9);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: bold;
        z-index: 10;
        pointer-events: none;
    }

@media (max-width:1023px) {
    .echo-chat-assistant .chat-assistant-container .card .echo-message-icon .carbon-icon {
        display: none;
    }

    .echo-chat-assistant .chat-assistant-container .card .card-body,
    .echo-chat-assistant .messages span.token-state-wrap:first-child {
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .echo-chat-assistant .chat-content-root {
        padding-left: 1vh;
        padding-right: 1vh;
    }

    .echo-chat-assistant .chat-assistant-container .card {
        padding: 0 0 25px 0 !important;
    }

    .echo-chat-assistant .request-container {
        width: 94%;
        left: 0 !important;
    }
}
/* Echo Chat dedicated stylesheet.
   Extracted from echo.css for maintainability. */
/* MCP progress state */
.thinking-text-container.mcp-progress-running {
    border-color: #b8b8b8 !important;
}

.thinking-text-container.mcp-progress-done {
    border-color: #24a148 !important;
    background-color: #f3fff6;
}

/* Echo v2 host theme (Carbon + Gemini tone) */
.echo-chat-host {
    --echo-blue-60: #0f62fe;
    --echo-blue-70: #0043ce;
    --echo-gray-10: #f4f4f4;
    --echo-gray-20: #e0e0e0;
    --echo-gray-30: #c6c6c6;
    --echo-gray-60: #525252;
    --echo-gray-80: #393939;
    --echo-user-bubble-bg: linear-gradient(135deg, #edf5ff 0%, #dbe9ff 100%);
    --echo-assistant-bubble-bg: #ffffff;
    --echo-bubble-border: #d0d7e2;
    --echo-thinking-bg: #f8f9fb;
    --echo-orch-planner-bg: #fff4de;
    --echo-orch-planner-border: #f1c98b;
    --echo-orch-execute-bg: #edf4ff;
    --echo-orch-execute-border: #b8d3ff;
    --echo-orch-done-border: #24a148;
    --echo-orch-error-bg: #fff1f1;
    --echo-orch-error-border: #da1e28;
    --echo-code-bg: #161616;
    --echo-code-border: #393939;
    --echo-code-text: #f4f4f4;
/*    background: radial-gradient(1200px 520px at 100% 0%, #edf4ff 0%, #f8fbff 45%, #ffffff 100%);*/
}

.echo-chat-message-row--user {
    display: flex;
    justify-content: flex-end;
}

.echo-chat-message-row--assistant {
    display: flex;
    justify-content: flex-start;
}

.echo-chat-body-container .echo-new-chat .carbon-icon {
    background: linear-gradient(to left, #0f62feb0, #0f62fe7d 50%, #0f62fed9 75%, #0f62fe 75%) !important;
}

.echo-chat-body-container .echo-new-chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

.echo-chat-bubble {
    max-width: min(92%, 960px);
    /*    border: 1px solid var(--echo-bubble-border, #d0d7e2) !important;*/
    /*    border-radius: 12px !important;*/
}

    .echo-chat-bubble.card .card-body {
        padding: 12px 14px !important;
    }

.echo-chat-bubble--user {
    background-color: var(--cds-echo-bubble, #f4f4f4);
}

.echo-chat-bubble--assistant {
    background: var(--echo-assistant-bubble-bg, #ffffff);
}

.echo-chat-plain {
    margin: 0;
    white-space: pre-wrap;
    font-family: "IBM Plex Sans", "Pretendard Variable", "Segoe UI", sans-serif;
    color: var(--cds-text-primary, #161616);
}

.echo-response-metrics {
    margin-top: 8px;
    order: 4;
}

.echo-response-metrics__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /*    color: var(--cds-text-secondary, #525252);*/
    color: var(--text-gray-400, #9ca3af);
    font-size: 12px;
    line-height: 1.2;
}

.echo-response-metrics__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.echo-thinking-block {
    margin-bottom: 8px;
    margin-left: 16px;
    padding: 0px 10px;
    border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    padding-left: 16px;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cds-text-secondary, #525252);
}

.echo-orch-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.echo-progress-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 12px 16px;
    padding-left: 16px;
    border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.echo-progress-panel__headline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(114, 158, 255, 0.5);
    background: linear-gradient(135deg, rgba(15, 98, 254, 0.15) 0%, rgba(36, 99, 235, 0.08) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: var(--cds-text-primary, #161616);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

    .echo-progress-panel__headline.is-live .echo-progress-panel__headline-text {
        background: linear-gradient(90deg, #dbeafe 0%, #ffffff 50%, #bfdbfe 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: echoProgressTextSweep 1.6s linear infinite;
    }

    .echo-progress-panel__headline.is-error {
        border-color: rgba(218, 30, 40, 0.6);
        background: rgba(218, 30, 40, 0.08);
    }

.echo-progress-panel__headline-icon {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: none;
    background: var(--echo-blue-60, #0f62fe);
    box-shadow: 0 0 0 0 rgba(15, 98, 254, 0);
}

.echo-progress-panel__headline.is-live .echo-progress-panel__headline-icon {
    animation: echoProgressPulse 1.15s ease-in-out infinite;
}

.echo-progress-panel__headline.is-error .echo-progress-panel__headline-icon {
    background: var(--echo-orch-error-border, #da1e28);
}

.echo-progress-panel__headline-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.echo-progress-panel__detail {
    padding-left: 6px;
    color: var(--cds-text-secondary, #9ca3af);
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.88;
}

    .echo-progress-panel__detail.is-error {
        color: var(--echo-orch-error-border, #da1e28);
    }

.echo-progress-panel__detail-text {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    letter-spacing: 0.01em;
}

.echo-progress-panel__detail.is-live .echo-progress-panel__detail-text {
    animation: echoProgressDetailFade 1.2s ease-in-out infinite;
}

.echo-orch-item {
    position: relative;
    display: block;
    padding: 4px 10px 4px 0px;
    white-space: pre-wrap;
    font-size: 0.8rem;
    line-height: 1.45;
    font-family: "IBM Plex Sans", "Pretendard Variable", "Segoe UI", sans-serif;
}
/*
.echo-orch-item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8d8d8d;
}
*/
/*.echo-orch-item--planner {
    background: var(--echo-orch-planner-bg);
    border-color: var(--echo-orch-planner-border);
}*/


/*.echo-orch-item--running {
    box-shadow: inset 3px 0 0 var(--echo-blue-60);
}*/

/*.echo-orch-item--running::before {
    background: var(--echo-blue-60);
}*/

/*.echo-orch-item--done {
    border-color: var(--echo-orch-done-border);
    box-shadow: inset 3px 0 0 var(--echo-orch-done-border);
}*/

/*.echo-orch-item--done::before {
    background: var(--echo-orch-done-border);
}*/

.echo-orch-item--error {
    background: var(--echo-orch-error-bg);
    border-color: var(--echo-orch-error-border);
    box-shadow: inset 3px 0 0 var(--echo-orch-error-border);
}

    .echo-orch-item--error::before {
        background: var(--echo-orch-error-border);
    }

.echo-orch-item__text {
    display: inline;
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.echo-orch-item__meta {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 16px;
}

.echo-orch-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.echo-orch-badge--phase {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
}

.echo-orch-badge--status {
    background: #e5e7eb;
    color: #374151;
    border: 1px solid #d1d5db;
}

.echo-orch-item__raw {
    margin-top: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-family: "IBM Plex Mono", "D2Coding", Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Planner hint: no card look, auto-hide when answer content starts rendering */
.echo-orch-item--transient {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 2px 0 2px 2px;
    font-size: 12px;
    color: #6f6f6f;
}

    .echo-orch-item--transient::before {
        display: none;
    }

.echo-chat-bubble--assistant.has-main-content .echo-orch-item--transient {
    display: none;
}

/* Orchestration / Thinking / Response stage controls */
.echo-chat-bubble--assistant .card-body {
    display: flex;
    flex-direction: column;
}

.echo-phase--mcp {
    order: 1;
}

.echo-phase--thinking {
    order: 2;
}

.echo-phase--response {
    order: 3;
}

.echo-phase-card {
    /*    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    background: var(--cds-field-03, #f4f4f4) !important;*/
}

.echo-phase-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-left: 16px;
    padding-bottom: 4px;
}

.echo-phase-card__title {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
    padding: 0px 12px;
}

.echo-phase-card__toggle {
    border: 0;
    border-radius: 20px;
    background-color: var(--cds-layer-03, #fafafa);
    padding: 0 12px;
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
}

    .echo-phase-card__toggle:hover {
        background-color: var(--cds-layer-hover, #e8e8e8);
    }

.echo-phase-card__body {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 4px;
}
    /* 실제 텍스트가 들어가는 div */
    .echo-phase-card__body > div {
        /* 3줄 제한 핵심 코드 */
        max-height: 4.5em; /* line-height(1.5) * 3줄 = 4.5em */
        line-height: 1.5;
        overflow-y: auto; /* 세로 스크롤 활성화 */
        font-size: 14px;
        color: var(--cds-text-secondary, #525252);
        white-space: pre-wrap; /* 줄바꿈 허용 */
        word-break: break-all;
    }

.echo-phase-card.is-collapsed .echo-phase-card__body {
    display: none;
}

.echo-phase-card.is-active .echo-phase-card__head {
    border-bottom: 0;
}

.echo-phase-card--mcp .echo-orch-feed {
    margin-bottom: 0;
}

.echo-orch-feed {
    margin-bottom: 0;
    margin-left: 16px;
    border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    padding-left: 16px;
}

/*.echo-chat-host.mode-normal .echo-thinking-block--preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 68px;
}
*/
.echo-chat-host.mode-normal .echo-thinking-block--preview.is-active {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    padding-left: 16px;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cds-text-secondary, #525252);
}

.echo-chat-host.mode-debug .echo-phase--mcp,
.echo-chat-host.mode-debug .echo-phase--thinking {
    display: block;
    opacity: 1;
    max-height: none;
}

/* Markdown + code styling for Echo host */
.echo-chat-host .markdown-body {
    font-family: "IBM Plex Sans", "Pretendard Variable", "Segoe UI", sans-serif;
    color: var(--cds-text-primary, #161616);
    font-size: 14px;
    line-height: 24px;
    padding-left: 32px;
}

    .echo-chat-host .markdown-body p {
        margin-bottom: 8px;
        margin-top: 8px;
    }

        .echo-chat-host .markdown-body p:last-child {
            margin-top: 0;
            margin-bottom: 0;
        }

    .echo-chat-host .markdown-body h1,
    .echo-chat-host .markdown-body h2,
    .echo-chat-host .markdown-body h3,
    .echo-chat-host .markdown-body h4 {
        margin-top: 8px;
        margin-bottom: 6px;
        font-family: "IBM Plex Sans", "Pretendard Variable", "Segoe UI", sans-serif;
        font-weight: 600;
    }

    .echo-chat-host .markdown-body ul,
    .echo-chat-host .markdown-body ol {
        margin-top: 8px;
        margin-bottom: 8px;
        padding-left: 1.2rem;
    }


    .echo-chat-host .markdown-body .table-responsive {
        margin-top: 12px;
        margin-bottom: 16px
    }

    .echo-chat-host .markdown-body blockquote {
        margin: 0.65rem 0;
        border-left: 3px solid var(--echo-blue-60);
        background: #f6f9ff;
/*        color: #374151;*/
        color: var(--cds-text-secondary);
        border-radius: 0 8px 8px 0;
    }

    .echo-chat-host .markdown-body a {
        color: var(--echo-blue-70);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .echo-chat-host .markdown-body :not(pre) > code {
        background: none;
        color: var(--cds-text-primary, #161616);
        /*    border: 1px solid #d6e3ff;*/
        /*    border-radius: 6px;*/
        /*    padding: 0.12rem 0.38rem;*/
        /*    font-family: "IBM Plex Mono", "D2Coding", Consolas, monospace;*/
        font-size: 12px;
        box-shadow: none;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

    .echo-chat-host .markdown-body .code-block {
        display: flex;
        flex-direction: column;
        margin: 10px 0 16px !important;
        overflow: hidden;
    }

        .echo-chat-host .markdown-body .code-block .code-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #161616;
            color: #ffffff;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }

            .echo-chat-host .markdown-body .code-block .code-header .text-muted {
                color: #ffffff !important;
                font-family: "IBM Plex Mono", Consolas, monospace;
                font-size: 12px;
            }

        .echo-chat-host .markdown-body .code-block .cds-code-body {
            background: var(--echo-code-bg) !important;
            margin: 0 !important;
            padding: 12px 16px !important;
            overflow-x: auto;
        }

        .echo-chat-host .markdown-body .code-block pre,
        .echo-chat-host .markdown-body pre[class*="language-"] {
            background: var(--echo-code-bg) !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .echo-chat-host .markdown-body .code-block code,
        .echo-chat-host .markdown-body code[class*="language-"] {
            background: transparent !important;
            color: var(--echo-code-text) !important;
            font-family: "IBM Plex Mono", "D2Coding", Consolas, monospace;
            font-size: 12px;
            line-height: 1.58;
            text-shadow: none !important;
        }

        .echo-chat-host .markdown-body .code-block .copy-btn {
/*            border: 1px solid #6f6f6f;
            border-radius: 6px;*/
            background-color: transparent !important;
            color: #d0d0d0;
            width: 26px;
            height: 26px;
        }

            .echo-chat-host .markdown-body .code-block .copy-btn:hover {
                border-color: #a8a8a8;
                background: #393939;
                color: #f4f4f4;
            }

.echo-chat-host .request-content .echo-chat-stop-btn {
    min-width: 64px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1;
}

/* Prism token palette */
.echo-chat-host .markdown-body .token.comment,
.echo-chat-host .markdown-body .token.prolog,
.echo-chat-host .markdown-body .token.doctype,
.echo-chat-host .markdown-body .token.cdata {
    color: #8d8d8d;
}

.echo-chat-host .markdown-body .token.punctuation {
    color: #c6c6c6;
}

.echo-chat-host .markdown-body .token.property,
.echo-chat-host .markdown-body .token.tag,
.echo-chat-host .markdown-body .token.constant,
.echo-chat-host .markdown-body .token.symbol,
.echo-chat-host .markdown-body .token.deleted {
    color: #78a9ff;
}

.echo-chat-host .markdown-body .token.boolean,
.echo-chat-host .markdown-body .token.number {
    color: #ff8389;
}

.echo-chat-host .markdown-body .token.selector,
.echo-chat-host .markdown-body .token.attr-name,
.echo-chat-host .markdown-body .token.string,
.echo-chat-host .markdown-body .token.char,
.echo-chat-host .markdown-body .token.builtin,
.echo-chat-host .markdown-body .token.inserted {
    color: #42be65;
}

.echo-chat-host .markdown-body .token.operator,
.echo-chat-host .markdown-body .token.entity,
.echo-chat-host .markdown-body .token.url,
.echo-chat-host .markdown-body .language-css .token.string,
.echo-chat-host .markdown-body .style .token.string {
    color: #a6c8ff;
}

.echo-chat-host .markdown-body .token.atrule,
.echo-chat-host .markdown-body .token.attr-value,
.echo-chat-host .markdown-body .token.keyword {
    color: #be95ff;
}

.echo-chat-host .markdown-body .token.function,
.echo-chat-host .markdown-body .token.class-name {
    color: #08bdba;
}

.echo-chat-host .markdown-body .token.regex,
.echo-chat-host .markdown-body .token.important,
.echo-chat-host .markdown-body .token.variable {
    color: #f1c21b;
}

@media (max-width: 768px) {
    .echo-chat-bubble {
        max-width: 100%;
        border-radius: 10px !important;
    }

        .echo-chat-bubble.card .card-body {
            padding: 10px 11px !important;
        }

    .echo-chat-host .markdown-body .code-block .cds-code-body {
        padding: 0.72rem 0.75rem;
    }
}

/* V2 /echohost/general option panel */
.v2-general-page {
    background-color: var(--cds-field, #FFFFFF);
}

.v2-general-side {
    width: 430px;
    overflow: auto;
    background-color: var(--cds-field, #FFFFFF);
}

.v2-general-title {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.v2-general-subtitle {
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.v2-general-status {
    border: 1px solid #d0d7e2;
    padding: 6px 8px;
    font-size: 12px;
    margin-bottom: 12px;
}

.v2-general-status--info {
    background: #edf5ff;
    color: #003a6d;
}

.v2-general-status--success {
    background: #edf8f1;
    color: #0e6027;
    border-color: #a7f0ba;
}

.v2-general-status--error {
    background: #fff1f1;
    color: #a2191f;
    border-color: #ffd7d9;
}

.v2-general-card {
    /*    border: 1px solid #dfe3eb;*/
    background-color: var(--cds-field-01, #f4f4f4);
    padding: 12px;
    margin-bottom: 10px;
}

.v2-general-card-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.v2-general-field {
    margin-bottom: 10px;
}

    .v2-general-field .form-label,
    .v2-general-field .cds-label {
        margin-bottom: 4px;
        font-size: 12px;
        color: var(--cds-text-secondary, #525252);
    }

    .v2-general-field .cds-combobox,
    .v2-general-field .carbon-textbox {
        height: 32px;
    }

.v2-general-switch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.v2-general-switch-item {
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    padding: 8px;
    background-color: var( --cds-layer-03, #fafafa);
}

.v2-general-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .v2-general-btn-row .cds-btn {
        flex: 1 1 0;
        min-width: 0;
    }

.v2-general-check-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.v2-general-textarea {
    min-height: 82px;
    resize: vertical;
}

.v2-general-help {
    margin-top: 6px;
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

.v2-general-statusbar {
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.v2-general-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border: 1px solid #d0d7e2;
    border-radius: 999px;
    background: #f3f7ff;
    color: #334155;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
}

/* V2 general chat tuning (v1 structure + Gemini user bubble) */
.v2-general-page .echo-chat-host {
    background-color: var(--cds-field, #ffffff);
}

    .v2-general-page .echo-chat-host > .dock-content.rx-scroll {
        padding: 14px clamp(12px, 2.2vw, 28px) 20px !important;
    }

    .v2-general-page .echo-chat-host .echo-chat-message-row--assistant,
    .v2-general-page .echo-chat-host .chat-assistant-container {
        justify-content: center;
        width: 100%;
    }

    .v2-general-page .echo-chat-host .echo-chat-bubble--assistant {
        width: min(100%, 920px);
        max-width: min(100%, 920px);
        box-shadow: none;
        background: transparent;
    }

        .v2-general-page .echo-chat-host .echo-chat-bubble--assistant .card-body {
            padding: 0 !important;
        }

    .v2-general-page .echo-chat-host .echo-chat-message-row--user {
        justify-content: flex-end;
    }

    .v2-general-page .echo-chat-host .echo-chat-bubble--user {
        position: relative;
        width: fit-content;
        font-size: 14px;
        max-width: min(72%, 680px);
        border-color: #c7d8ff !important;
        border-radius: 25px 4px 25px 25px !important;
        /*    background: linear-gradient(180deg, #edf3ff 0%, #e7efff 100%);*/
        background-color: var(--cds-echo-bubble, #f4f4f4);
    }


    .v2-general-page .echo-chat-host .dock-bottom.request-container {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 10px clamp(12px, 2.2vw, 28px) 12px !important;
        z-index: 2;
        background: linear-gradient(180deg, rgba(247, 248, 251, 0) 0%, rgba(247, 248, 251, 0.94) 26%, rgba(247, 248, 251, 1) 100%);
    }

        .v2-general-page .echo-chat-host .dock-bottom.request-container .request-content {
            width: min(100%, 920px);
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 50px;
            border: 1px solid #d9dde6;
            border-radius: 14px;
            background: #ffffff;
            padding: 4px 6px 4px 14px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .v2-general-page .echo-chat-host .dock-bottom.request-container .request-input {
            flex: 1 1 auto;
            min-width: 0;
            height: 40px !important;
            line-height: 40px;
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .v2-general-page .echo-chat-host .dock-bottom.request-container .request-content .cds-icon-only-btn {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: #eef3fb;
            color: #334155;
        }

            .v2-general-page .echo-chat-host .dock-bottom.request-container .request-content .cds-icon-only-btn:hover {
                background: #e2eaf8 !important;
            }

            .v2-general-page .echo-chat-host .dock-bottom.request-container .request-content .cds-icon-only-btn:disabled {
                opacity: 0.55;
            }

        .v2-general-page .echo-chat-host .dock-bottom.request-container .request-content .echo-chat-stop-btn {
            min-width: 72px;
            height: 36px;
            padding: 0 12px;
            border-radius: 10px;
        }

.v2-general-page .request-container .cds-popover-wrap .rx-popover-container .rx-popover-content {
    top: -172px !important;
    left: 0 !important;
    background-color: var(--cds-field, #ffffff) !important;
}

    .v2-general-page .request-container .cds-popover-wrap .rx-popover-container .rx-popover-content .cds-popover-item {
        font-size: 14px !important;
        gap: 16px !important;
        align-items: center;
    }


/* 반짝이는 효과를 가질 부모 요소 */
.echo-phase-card--mcp.is-active, .echo-phase-card--thinking.is-active {
    position: relative;
    overflow: hidden;
    display: inline-block; /* 텍스트 너비만큼만 잡히도록 설정 (필요시 수정) */
    color: #555; /* 글자색은 적절히 조정하세요 */
}

    /* 반짝이는 레이어 (유저님이 주신 코드 기반) */
    .echo-phase-card--mcp.is-active::after, .echo-phase-card--thinking.is-active::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 65%, transparent 100% );
        mix-blend-mode: screen;
        animation: thinkingSweep 1.3s ease-in-out infinite;
        pointer-events: none;
    }

/* 애니메이션 정의 (누락되었던 부분 추가) */
@keyframes thinkingSweep {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes echoThinkingTextSweep {
    0% {
        background-position: 120% 0;
    }

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

/* 로딩 스피너 */
/* 기본: 모든 assistant 메시지는 아이콘만 보이게 */
.chat-assistant-container .echo-message-icon .spinner-border {
    display: none;
}

.chat-assistant-container .echo-message-icon .carbon-icon {
    display: inline-block;
}

/* 마지막 assistant 메시지에서만,
            "아이콘에 IsLoading 클래스가 붙어있을 때" 스피너만 보이게 */
.chat-assistant-container:last-of-type
.echo-message-icon:has(.carbon-icon.is-loading) .spinner-border {
    display: inline-block;
}

.chat-assistant-container:last-of-type
.echo-message-icon:has(.carbon-icon.is-loading) .carbon-icon {
    display: none;
}




/* 이미지 업로드 */
.v2-general-page .request-content {
    position: relative;
    z-index: 10;
}

.v2-general-page .image-preview-section {
    background-color: var(--cds-field, #ffffff) !important;
    border-bottom: none !important;
    position: absolute;
    bottom: 45px;
    padding-bottom: 18px !important;
    width: 100%;
    z-index: 9;
}

.v2-general-page .image-preview-item {
    border: none !important;
    padding: 0 !important;
}

.v2-general-page .image-info {
    background-color: var(--cds-layer-02, #e0e0e0) !important;
    color: var(--cds-text-primary, #161616) !important;
    left: 0 !important;
    right: 0 !important;
    word-break: break-all;
    padding: 2px 18px 2px 6px;
}

/* V1 AI mode switcher */
.ai-mode-selector-bottom {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 8px 16px;
}

.ai-mode-toggle-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .ai-mode-toggle-group .btn {
        min-width: 60px;
        border-radius: 0;
        border-color: #dee2e6;
        font-size: 11px;
        padding: 6px 12px;
        transition: all 0.2s ease;
    }

        .ai-mode-toggle-group .btn:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .ai-mode-toggle-group .btn:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .ai-mode-toggle-group .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }

    .ai-mode-toggle-group .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: #ffffff;
        font-weight: 500;
    }

    .ai-mode-toggle-group .btn-outline-primary {
        background-color: #ffffff;
        border-color: #dee2e6;
        color: #6c757d;
    }

        .ai-mode-toggle-group .btn-outline-primary:hover {
            background-color: #e3f2fd;
            border-color: #007bff;
            color: #007bff;
        }

@media (max-width: 1280px) {
    .v2-general-side {
        width: 380px;
    }

    .v2-general-page .request-container .cds-popover-wrap .rx-popover-container .rx-popover-content {
        top: -163px !important;
        left: 0 !important;
    }
}

@media (max-width: 992px) {
    .v2-general-side {
        width: 340px;
    }

    .v2-general-chip {
        font-size: 0.7rem;
    }

    .v2-general-page .echo-chat-host .echo-chat-bubble--user {
        max-width: 82%;
    }

    .v2-general-page .echo-chat-host .dock-bottom.request-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 768px) {
    .ai-mode-toggle-group .btn {
        min-width: 50px;
        font-size: 10px;
        padding: 4px 8px;
    }

    .ai-mode-selector-bottom {
        padding: 6px 12px;
    }
}

@keyframes echoProgressPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 98, 254, 0.28);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(15, 98, 254, 0);
        transform: scale(1.08);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15, 98, 254, 0);
        transform: scale(1);
    }
}

@keyframes echoDotPulse {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/*****************/
/* V3 */

.cds-popover-wrap button.cds-icon-only-btn {
    background-color: transparent !important;
}

    .cds-popover-wrap button.cds-icon-only-btn:hover {
        background-color: var(--cds-background-hover, #8d8d8d12) !important;
    }



.cds-list-content .cds-list-item:has(.cds-popover-wrap .cds-icon-only-btn:focus){
    outline: 0 !important;
}
.cds-list-content .cds-list-item:has(.cds-popover-wrap .cds-popover-item:focus, .cds-popover-wrap .cds-popover-item:active) {
    outline: 0 !important;
}