@keyframes collapse {
0% { width: 350px; transform: translateX(0); }
100% { width: 0px; transform: translateX(100%); }
}
@keyframes expand {
0% { width: 0px; transform: translateX(100%); }
100% { width: 350px; transform: translateX(0); }
}
@keyframes slideFade {
0% { transform: translateY(-20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes zoomIn {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.9); opacity: 0; }
}
@keyframes slideLeft {
0% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
:host(nine-ai) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 350px;
background: #f9f9f9;
z-index: 999;
opacity: 0.99;
animation: expand 0.1s ease-in-out forwards;
border-left: 1px solid #eee;
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3); /* ✅ 퍼지는 그림자 */
.expand-icon {
display: none;
}
.wrapper {
height: 100%;
display: flex;
overflow: hidden;
}
.menu {
z-index: 10;
width: 32px;
background: #ccc;
display: flex;
flex-direction: column;
}
.collapse-icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 32px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.menu-filter {
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.menu-general {
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.menu-db {
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.menu-setting {
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.menu-icon {
display: flex;
/* align-content: space-between; */
justify-content: center;
align-items: center;
height: 32px;
}
.menu-icon.active {
--border-right: 4px solid #999;
background-color: #c0c0c0;
--filter: brightness(170%);
}
.settings {
display: none;
position: absolute;
background: #fff;
left: 0;
right: 30px;
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.settings.expand {
display: flex;
animation: slideLeft 0.3s ease-out forwards;
}
.container {
height: 100%;
display: flex;
--background: white;
width: 100%;
flex-direction: column;
.head {
width: 100%;
height: 64px;
background: #f0f0f0;
--border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 16px;
.logo {
position: relative;
width: 70px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
--background-image: url('data:image/svg+xml;utf8,');
span {
font-weight: bold;
font-size: 12px;
font-style: italic;
color: blue;
vertical-align: top;
}
}
}
.foot {
margin-bottom: 32px;
width: 100%;
height: 200px;
--background: #f0f0f0;
display: flex;
flex-direction: column;
.apply-src {
display: flex;
align-items: center;
font-size: 10px;
padding-left: 8px;
gap: 4px;
div {
display: flex;
align-items: center;
}
}
textarea {
--width: 100%;
height: 100%;
margin: 4px;
outline: none;
border: 1px solid #ccc;
border-radius: 8px;
resize: none;
padding: 8px;
}
textarea:hover {
border: 1px solid #999;
}
textarea:focus {
border: 1px solid green;
}
}
}
}
:host(nine-ai.collapse) {
width: 0px;
animation: collapse 0.1s ease-in-out forwards;
box-shadow: unset;
.expand-icon {
opacity: 0.3;
position: absolute;
width: 48px;
height: 40px;
bottom: 32px;
left: -48px;
background: white;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
cursor: pointer;
box-shadow: 0 0 8px 4px rgba(135, 206, 235, 0.95); /* ✅ 퍼지는 그림자 */
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('data:image/svg+xml;utf8,');
}
.expand-icon:hover {
opacity: 0.7;
}
}
:host(nx-ai-message) {
display: flex;
justify-content: flex-start;
padding: 5px;
flex-direction: column;
.chat-message {
max-width: 70%;
border-radius: 8px;
font-size: 14px;
background-color: #fff;
color: black;
align-self: flex-start;
text-align: left;
position: relative;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
text-overflow: ellipsis;
padding: 8px 16px;
display: flex;
align-items: center;
div.message {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 0;
flex-grow: 1;
/* 줄바꿈 강제 적용 */
/**word-wrap: break-word;*/ /* 긴 단어를 줄바꿈 */
overflow-wrap: anywhere; /* 텍스트 길이에 따라 자동 줄바꿈 */
white-space: normal; /* 공백 처리 */
}
span.more {
right: 4px;
bottom: 0px;
font-size: 9px;
font-weight: 700;
a {
position: relative;
color: green;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: green;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
a:hover::after {
transform: scaleX(1);
}
}
}
.grid {
margin-top: 8px;
}
.chat-menu {
display: flex;
justify-content: space-between; /* 좌우 정렬 */
align-items: center; /* 세로 중앙 정렬 */
width: 100%;
margin-top: 2px;
.left-menu{
display: flex;
gap: 4px;
.filter.disabled, .database.disabled {
pointer-events: none;
color: #ccc;
}
.filter, .database, .excel, .maximize {
margin-left: 0;
cursor: pointer;
color: #999;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.filter svg {
color: #999;
}
.filter:hover, .database:hover, .excel:hover, .maximize:hover {
color: green;
}
.filter {
background-image: url('data:image/svg+xml;utf8,');
}
.database {
background-image: url('data:image/svg+xml;utf8,');
}
.excel {
background-image: url('data:image/svg+xml;utf8,');
}
.maximize {
background-image: url('data:image/svg+xml;utf8,');
}
}
}
}
:host(nx-ai-ing-message) {
display: flex;
justify-content: flex-start;
padding: 0;
.chat-message {
padding: 0px 8px;
color: #999;
align-self: flex-start;
text-align: left;
position: relative;
font-size: 32px;
font-weight: bold;
}
}
:host(nx-ai-my-message) {
display: flex;
justify-content: flex-end;
padding: 5px;
.chat-message {
max-width: 70%;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
background-color: #fef01b;
text-align: left;
color: #333;
align-self: flex-end;
position: relative;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}
}
:host(nx-ai-chat) {
width: 100%;
height: 100%;
overflow: scroll;
}
:host(nine-ai-settings) {
z-index: 9;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: absolute;
background: #fff;
left: 0;
right: 30px;
top: 48px;
bottom: 0;
--opacity: 0;
padding-left: 16px;
padding-right: 16px;
gap: 0;
--transform: translateX(100%);
--transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transition: transform 0.3s ease-out;
.line {
font-size: 12px;
display: flex;
}
.line:first-of-type {
--margin-top: 32px;
}
.subject {
font-weight: 700;
height: 24px;
margin-top: 32px;
}
.contents {
--margin-left: 16px;
width: 100%;
gap: 32px;
}
.analyze {
font-weight: 400;
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
width: 32px;
text-align: center;
margin-left: 4px;
margin-right: 4px;
}
input[type="checkbox"] {
margin-left: 0;
}
}
label {
display: flex;
align-items: center;
input {
margin-bottom: 2px;
}
}
input[type="text"], input[type="number"] {
outline: none;
border-radius: 4px;
width: 100%;
height: 26px;
border: 1px solid #b1b2c8;
padding: 0 4px;
--margin-top: 8px;
color: #666;
}
select {
outline: none;
border-radius: 4px;
width: 100%;
height: 26px;
border: 1px solid #b1b2c8;
padding: 0 4px;
--margin-top: 8px;
color: #666;
}
}
:host(nine-ai-settings.expand) {
animation: slideLeft 0.3s ease-out forwards;
}
:host(nine-ai-settings:not(.expand)) {
animation: slideRight 0.3s ease-out forwards;
}
:host(nine-ai-diff-popup) {
div.buttons {
position: absolute;
right: 16px;
/* width: 100px; */
display: flex;
flex-direction: row;
justify-content: flex-end;
z-index: 1;
}
button.save {
cursor: pointer;
outline: none;
}
}
:host(nine-ai-diff) {
width: 100%;
height: 100%;
.wrapper {
display: flex;
position: relative;
--gap: 8px;
--font-family: monospace;
height: 100%;
}
.panel {
width: 50%;
border: 1px solid #ccc;
--padding: 8px;
overflow: auto;
white-space: pre-wrap;
text-align: left;
display: flex;
justify-content: flex-start; /* 좌측 정렬 */
align-items: flex-start; /* 상단 정렬 */
flex-direction: column;
box-sizing: border-box;
}
.panel pre {
margin: 0;
--padding: 8px;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
}
.cm-editor {
height: 100%;
width: 100%;
--padding-left: 80px;
}
.cm-content { /* CodeMirror 텍스트 내용을 감싸는 내부 div */
}
/* 각 라인에 버튼 공간 확보 */
/* ideDiff.css */
/* 기본적인 CodeMirror 라인 포지셔닝 */
.cm-line {
position: relative;
--display: flex;
padding-left: 18px;
}
/* 병합 버튼 컨테이너 */
.cm-merge-button-container {
position: absolute;
height: 16px;
width: 16px; /* 버튼 너비 고정으로 겹침 방지 */
left: 2px; /* 라인 번호 영역 바로 옆에 배치. 필요에 따라 조절하세요. */
top: 50%;
transform: translateY(-50%);
--z-index: 1; /* 다른 요소 위에 표시되도록 Z-index를 높게 설정 */
display: flex;
--gap: 5px;
justify-content: center; /* 버튼 중앙 정렬 */
}
/* 병합 버튼 기본 스타일 */
.cm-merge-button {
--margin: 2px 0;
width: 100%;
border: none;
border-radius: 3px;
cursor: pointer;
opacity: 0.7; /* 기본적으로 약간 투명하게 */
transition: opacity 0.2s ease-in-out; /* 호버 시 부드러운 전환 */
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
/* 호버 시 버튼 불투명도 증가 */
.cm-merge-button:hover {
opacity: 1;
background-color: #e0e0e0;
}
/* AI 추천을 현재 소스에 '적용'하는 버튼 (오른쪽 TOBE 에디터에 붙음) */
.cm-merge-button.accept {
background-color: #4CAF50; /* 녹색 */
background-image: url('data:image/svg+xml;utf8,');
}
/* AI의 삭제를 현재 소스 기준으로 '되돌리는' 버튼 (왼쪽 ASIS 에디터에 붙음) */
.cm-merge-button.revert {
background-color: #f44336; /* 빨간색 */
background-image: url('data:image/svg+xml;utf8,');
}
/* 삽입된 라인 (AI 추천 소스에 새로 추가된 라인) 배경색 및 경계선 */
.cm-inserted-line-bg {
background-color: #e6ffed; /* 연한 녹색 */
--border-left: 3px solid #66bb6a; /* 진한 녹색 */
}
/* 삭제된 라인 (현재 소스에서 AI가 삭제한 것으로 판단된 라인) 배경색 및 경계선 */
.cm-deleted-line-bg {
background-color: #ffebe9; /* 연한 빨간색 */
--border-left: 3px solid #ef5350; /* 진한 빨간색 */
}
/* CodeMirror 선택 영역 배경색 */
.cm-selectionBackground {
background-color: #d7d4f9 !important; /* 보라색 계열 */
}
/* 텍스트 선택 시 배경색 (브라우저 기본 선택색 재정의) */
.cm-editor ::selection {
background-color: #d7d4f9 !important;
color: inherit !important; /* 텍스트 색상은 유지 */
}
.cm-editor::-moz-selection { /* Firefox를 위한 접두사 */
background-color: #d7d4f9 !important;
color: inherit !important;
}
}
@keyframes slide {
0% { left: -40%; }
50% { left: 60%; }
100% { left: 100%; }
}
:host(nine-ai-tip-popup) {
dialog:modal {
/* [PC 기본값: 다시 견고하게 고정] */
width: 50vw; /* 화면 너비의 절반 */
height: 50vh; /* 화면 높이의 절반 */
min-width: 600px; /* 너무 작아지는 것 방지 */
min-height: 450px; /* 너무 작아지는 것 방지 */
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
background: #333;
resize: none;
box-shadow: 0 0 32px 0 rgba(255, 255, 255, 0.2);
overflow: hidden; /* 내부 요소 삐져나감 방지 */
div.body {
padding: 0;
height: 100%; /* 부모 높이 꽉 채우기 */
}
}
/* [모바일 대응: 화면이 작을 때만 적용] */
@media (max-width: 768px) {
dialog:modal {
width: 90vw;
height: auto;
min-width: unset;
min-height: 300px;
max-height: 300px; /* 세로 모드에서는 300px이 아주 적당합니다 */
}
}
/* ✅ 가로 모드 (Landscape) 대응 */
@media (max-height: 500px) and (orientation: landscape) {
dialog:modal {
width: 50%; /* 가로로 너무 길면 보기 싫으니 폭을 살짝 줄여줍니다 */
min-width: 50%;
max-width: 50%;
height: 80%;
min-height: 80%;
max-height: 80%; /* 화면 높이의 85%만 사용하여 위아래 여백 확보 */
}
/* 가로모드에서 내부 요소가 너무 꽉 차지 않게 패딩 조절 */
:host(nine-ai-loading-tips) .chat-message.loading-tips-message {
padding: 10px 0;
}
:host(nine-ai-loading-tips) .tip-image {
max-height: 120px; /* 이미지가 텍스트를 밀어내지 않도록 축소 */
}
}
.head { display: none; }
.dialog-content {
width: 100%;
height: 100%;
display: flex;
}
}
:host(nine-ai-loading-tips) {
/* 부모의 flex 영향을 받아도 찌그러지지 않게 설정 */
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
.chat-message.loading-tips-message {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: #333;
padding: 0; /* 여백을 조금 더 넉넉히 */
box-sizing: border-box;
}
.loading-bar-wrapper {
width: 100%;
height: 3px; /* 약간 더 선명하게 */
overflow: hidden;
position: relative;
border-radius: 4px;
margin-bottom: 16px;
flex-shrink: 0; /* 로딩바 높이 고정 */
}
.loading-bar {
position: absolute;
height: 100%;
width: 40%;
background-color: cyan;
animation: slide 1.2s ease-in-out infinite;
background: linear-gradient(to right, #333 0%, cyan 50%, #333 100%);
}
.current-tip-wrapper {
height: auto;
min-height: 32px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4px;
padding: 0 16px;
flex-shrink: 0; /* 텍스트 영역 높이 고정 */
}
.current-tip {
font-size: 16px;
font-weight: 700;
color: azure;
text-align: center;
line-height: 1.5;
}
.tip-content {
flex: 1; /* ⭐ 이미지가 남은 공간을 다 차지하도록 */
display: flex;
position: relative;
width: 100%;
overflow: hidden; /* 이미지 넘침 방지 */
}
.tip-image-container {
padding: 0 16px;
width: 100%;
height: 100%;
display: flex; /* JS에서 block/flex로 바꿀 때 대응 */
justify-content: center;
align-items: center;
}
.tip-image {
max-width: 100%;
max-height: 100%; /* 부모 컨테이너(tip-content)를 넘지 않게 */
object-fit: contain; /* 비율 유지하며 꽉 채우기 */
filter: invert(0.8);
}
}