1037 lines
21 KiB
CSS
1037 lines
21 KiB
CSS
.crop-logic-chat {
|
|
--cl-primary: #2b8a3e;
|
|
--cl-accent: #2d9cdb;
|
|
--cl-bg: #f5f7f1;
|
|
--cl-surface: #ffffff;
|
|
--cl-border: rgba(43, 138, 62, 0.15);
|
|
--cl-text: #16331b;
|
|
--cl-muted: #5f6f62;
|
|
--cl-user-bubble: rgba(43, 138, 62, 0.12);
|
|
--cl-assistant-bubble: #ffffff;
|
|
--cl-input-bg: #ffffff;
|
|
--cl-radius: 28px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 760px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: var(--cl-radius);
|
|
background:
|
|
radial-gradient(circle at top right, rgba(45, 156, 219, 0.12), transparent 28%),
|
|
linear-gradient(180deg, var(--cl-bg) 0%, rgba(43, 138, 62, 0.05) 100%);
|
|
color: var(--cl-text);
|
|
box-shadow: 0 26px 60px rgba(22, 51, 27, 0.12);
|
|
}
|
|
|
|
.crop-logic-chat,
|
|
.crop-logic-chat * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.crop-logic-chat button,
|
|
.crop-logic-chat textarea,
|
|
.crop-logic-chat input {
|
|
font: inherit;
|
|
}
|
|
|
|
.crop-logic-chat svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: block;
|
|
}
|
|
|
|
.crop-logic-chat__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 6;
|
|
background: rgba(10, 18, 12, 0.22);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.24s ease;
|
|
}
|
|
|
|
.crop-logic-chat.is-sidebar-open .crop-logic-chat__overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.crop-logic-chat__sidebar {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
z-index: 7;
|
|
width: min(88%, 320px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
backdrop-filter: blur(16px);
|
|
border-right: 1px solid var(--cl-border);
|
|
box-shadow: 0 10px 32px rgba(15, 26, 17, 0.16);
|
|
transform: translateX(-104%);
|
|
transition: transform 0.28s ease;
|
|
}
|
|
|
|
.crop-logic-chat.is-sidebar-open .crop-logic-chat__sidebar {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.crop-logic-chat__sidebar-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 18px;
|
|
border-bottom: 1px solid var(--cl-border);
|
|
}
|
|
|
|
.crop-logic-chat__sidebar-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.crop-logic-chat__thread,
|
|
.crop-logic-chat__thread-empty {
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.crop-logic-chat__thread {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 8px;
|
|
background: transparent;
|
|
color: var(--cl-text);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__thread:hover,
|
|
.crop-logic-chat__thread.is-active {
|
|
background: rgba(43, 138, 62, 0.1);
|
|
}
|
|
|
|
.crop-logic-chat__thread:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.crop-logic-chat__thread-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.crop-logic-chat__thread-copy strong,
|
|
.crop-logic-chat__thread-copy small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-logic-chat__thread-copy small {
|
|
margin-top: 4px;
|
|
color: var(--cl-muted);
|
|
}
|
|
|
|
.crop-logic-chat__thread-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
flex: 0 0 34px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
background: rgba(43, 138, 62, 0.1);
|
|
color: var(--cl-primary);
|
|
}
|
|
|
|
.crop-logic-chat__thread-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 140px;
|
|
padding: 16px;
|
|
color: var(--cl-muted);
|
|
text-align: center;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(43, 138, 62, 0.04));
|
|
}
|
|
|
|
.crop-logic-chat__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 18px 20px 14px;
|
|
background: linear-gradient(135deg, rgba(43, 138, 62, 0.08), rgba(45, 156, 219, 0.08));
|
|
border-bottom: 1px solid var(--cl-border);
|
|
}
|
|
|
|
.crop-logic-chat__header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.crop-logic-chat__icon-button,
|
|
.crop-logic-chat__send,
|
|
.crop-logic-chat__chip,
|
|
.crop-logic-chat__new-chat,
|
|
.crop-logic-chat__context-toggle {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.crop-logic-chat__icon-button {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 14px;
|
|
color: var(--cl-text);
|
|
background: rgba(43, 138, 62, 0.08);
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__icon-button:hover:not(:disabled) {
|
|
background: rgba(43, 138, 62, 0.16);
|
|
color: var(--cl-primary);
|
|
}
|
|
|
|
.crop-logic-chat__icon-button:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
|
|
.crop-logic-chat__new-chat {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 42px;
|
|
padding: 0 14px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, var(--cl-primary), #1f6b2f);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
box-shadow: 0 10px 22px rgba(43, 138, 62, 0.24);
|
|
}
|
|
|
|
.crop-logic-chat__assistant-badge {
|
|
width: 48px;
|
|
height: 48px;
|
|
flex: 0 0 48px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 18px;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, var(--cl-primary), var(--cl-accent));
|
|
box-shadow: 0 12px 24px rgba(43, 138, 62, 0.25);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.crop-logic-chat__header-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.crop-logic-chat__title {
|
|
margin: 0;
|
|
font-size: 1.15rem;
|
|
line-height: 1.2;
|
|
background: linear-gradient(135deg, #1f6b2f, var(--cl-accent));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.crop-logic-chat__subtitle {
|
|
margin: 4px 0 0;
|
|
color: var(--cl-muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.crop-logic-chat__context {
|
|
margin: 14px 18px 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: 22px;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(43, 138, 62, 0.05));
|
|
box-shadow: 0 8px 22px rgba(18, 35, 20, 0.04);
|
|
}
|
|
|
|
.crop-logic-chat__context-toggle {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
color: var(--cl-muted);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.crop-logic-chat__context-toggle:hover {
|
|
background: rgba(43, 138, 62, 0.04);
|
|
}
|
|
|
|
.crop-logic-chat__chevron {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--cl-primary);
|
|
transition: transform 0.24s ease;
|
|
}
|
|
|
|
.crop-logic-chat:not(.is-context-collapsed) .crop-logic-chat__chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.crop-logic-chat__context-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
padding: 0 18px 18px;
|
|
}
|
|
|
|
.crop-logic-chat.is-context-collapsed .crop-logic-chat__context-grid {
|
|
display: none;
|
|
}
|
|
|
|
.crop-logic-chat__context-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(43, 138, 62, 0.12);
|
|
border-radius: 16px;
|
|
background: rgba(43, 138, 62, 0.05);
|
|
}
|
|
|
|
.crop-logic-chat__context-item.is-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.crop-logic-chat__context-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
color: var(--cl-primary);
|
|
}
|
|
|
|
.crop-logic-chat__context-item small,
|
|
.crop-logic-chat__context-item strong {
|
|
display: block;
|
|
}
|
|
|
|
.crop-logic-chat__context-item small {
|
|
color: var(--cl-muted);
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.crop-logic-chat__context-item strong {
|
|
color: var(--cl-text);
|
|
font-size: 0.92rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.crop-logic-chat__messages {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 200px;
|
|
padding: 18px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.crop-logic-chat__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 280px;
|
|
padding: 40px 18px;
|
|
text-align: center;
|
|
color: var(--cl-muted);
|
|
}
|
|
|
|
.crop-logic-chat__empty-badge {
|
|
width: 82px;
|
|
height: 82px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 30px;
|
|
background: linear-gradient(145deg, rgba(43, 138, 62, 0.12), rgba(45, 156, 219, 0.1));
|
|
color: var(--cl-primary);
|
|
font-size: 36px;
|
|
}
|
|
|
|
.crop-logic-chat__row {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
animation: crop-logic-fade 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__row--user {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.crop-logic-chat__avatar {
|
|
width: 38px;
|
|
height: 38px;
|
|
flex: 0 0 38px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, var(--cl-primary), var(--cl-accent));
|
|
box-shadow: 0 10px 18px rgba(43, 138, 62, 0.18);
|
|
font-size: 19px;
|
|
}
|
|
|
|
.crop-logic-chat__bubble,
|
|
.crop-logic-chat__section {
|
|
max-width: min(88%, 720px);
|
|
}
|
|
|
|
.crop-logic-chat__bubble {
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: 22px;
|
|
background: var(--cl-assistant-bubble);
|
|
box-shadow: 0 10px 20px rgba(20, 33, 22, 0.04);
|
|
}
|
|
|
|
.crop-logic-chat__row--user .crop-logic-chat__bubble {
|
|
border-top-right-radius: 8px;
|
|
background: linear-gradient(145deg, var(--cl-user-bubble), rgba(255, 255, 255, 0.95));
|
|
}
|
|
|
|
.crop-logic-chat__row--assistant .crop-logic-chat__bubble {
|
|
border-top-left-radius: 8px;
|
|
}
|
|
|
|
.crop-logic-chat__bubble p {
|
|
margin: 0;
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__section-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-width: min(88%, 720px);
|
|
}
|
|
|
|
.crop-logic-chat__section {
|
|
padding: 16px;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: 22px;
|
|
background: linear-gradient(160deg, var(--cl-assistant-bubble), rgba(43, 138, 62, 0.06));
|
|
box-shadow: 0 12px 20px rgba(20, 33, 22, 0.05);
|
|
}
|
|
|
|
.crop-logic-chat__section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
color: var(--cl-primary);
|
|
}
|
|
|
|
.crop-logic-chat__section-header strong {
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__section-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
}
|
|
|
|
.crop-logic-chat__section-list {
|
|
margin: 10px 0 0;
|
|
padding-left: 18px;
|
|
color: var(--cl-muted);
|
|
}
|
|
|
|
.crop-logic-chat__section-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.crop-logic-chat__stat {
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
background: rgba(43, 138, 62, 0.05);
|
|
}
|
|
|
|
.crop-logic-chat__stat small,
|
|
.crop-logic-chat__stat strong {
|
|
display: block;
|
|
}
|
|
|
|
.crop-logic-chat__stat small {
|
|
color: var(--cl-muted);
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.crop-logic-chat__stat strong {
|
|
margin-top: 4px;
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__warning {
|
|
border-color: rgba(196, 129, 24, 0.35);
|
|
background: linear-gradient(135deg, rgba(196, 129, 24, 0.16), rgba(196, 129, 24, 0.08));
|
|
}
|
|
|
|
.crop-logic-chat__toggle-detail {
|
|
margin-top: 10px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--cl-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.crop-logic-chat__toggle-detail span:last-child {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__toggle-detail.is-open span:last-child {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.crop-logic-chat__detail {
|
|
margin-top: 10px;
|
|
color: var(--cl-muted);
|
|
}
|
|
|
|
.crop-logic-chat__typing {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.crop-logic-chat__typing span {
|
|
width: 8px;
|
|
height: 8px;
|
|
display: block;
|
|
border-radius: 999px;
|
|
background: var(--cl-primary);
|
|
animation: crop-logic-bounce 1.4s ease-in-out infinite both;
|
|
}
|
|
|
|
.crop-logic-chat__typing span:nth-child(2) {
|
|
animation-delay: 0.16s;
|
|
}
|
|
|
|
.crop-logic-chat__typing span:nth-child(3) {
|
|
animation-delay: 0.32s;
|
|
}
|
|
|
|
.crop-logic-chat__chips {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 0 18px 10px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.crop-logic-chat__chip {
|
|
flex: 0 0 auto;
|
|
min-height: 42px;
|
|
padding: 0 16px;
|
|
border: 1px solid rgba(43, 138, 62, 0.18);
|
|
border-radius: 999px;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(43, 138, 62, 0.08));
|
|
color: var(--cl-text);
|
|
cursor: pointer;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-logic-chat__chip:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 16px rgba(22, 51, 27, 0.08);
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(43, 138, 62, 0.12));
|
|
}
|
|
|
|
.crop-logic-chat__composer-wrap {
|
|
padding: 8px 18px 18px;
|
|
background: linear-gradient(to top, rgba(245, 247, 241, 0.96), rgba(245, 247, 241, 0.82), transparent);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.crop-logic-chat__attachments {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.crop-logic-chat__attachment {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
max-width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.84);
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__attachment-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-logic-chat__attachment-remove {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: rgba(43, 138, 62, 0.08);
|
|
color: var(--cl-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.crop-logic-chat__composer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border: 1px solid var(--cl-border);
|
|
border-radius: 24px;
|
|
background: var(--cl-input-bg);
|
|
box-shadow: 0 12px 24px rgba(22, 51, 27, 0.08);
|
|
}
|
|
|
|
.crop-logic-chat__file-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.crop-logic-chat__input {
|
|
flex: 1 1 auto;
|
|
min-height: 48px;
|
|
max-height: 140px;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--cl-text);
|
|
padding: 10px 8px;
|
|
}
|
|
|
|
.crop-logic-chat__input::placeholder {
|
|
color: rgba(95, 111, 98, 0.78);
|
|
}
|
|
|
|
.crop-logic-chat__send {
|
|
width: 46px;
|
|
height: 46px;
|
|
flex: 0 0 46px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
background: linear-gradient(135deg, var(--cl-primary), #1f6b2f);
|
|
box-shadow: 0 12px 24px rgba(43, 138, 62, 0.24);
|
|
transition: transform 0.18s ease, opacity 0.18s ease;
|
|
}
|
|
|
|
.crop-logic-chat__send:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.crop-logic-chat__send:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@keyframes crop-logic-bounce {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0.75);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes crop-logic-fade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.crop-logic-chat {
|
|
min-height: 620px;
|
|
}
|
|
|
|
.crop-logic-chat__header {
|
|
gap: 12px;
|
|
padding: 16px 14px 12px;
|
|
}
|
|
|
|
.crop-logic-chat__header-actions {
|
|
order: 3;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.crop-logic-chat__header {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.crop-logic-chat__context,
|
|
.crop-logic-chat__messages,
|
|
.crop-logic-chat__chips,
|
|
.crop-logic-chat__composer-wrap {
|
|
margin-left: 14px;
|
|
margin-right: 14px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.crop-logic-chat__context {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.crop-logic-chat__messages {
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
}
|
|
|
|
.crop-logic-chat__context-grid,
|
|
.crop-logic-chat__section-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.crop-logic-chat__bubble,
|
|
.crop-logic-chat__section-stack {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
body.crop-logic-auth-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.crop-logic-chat__auth-modal[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.crop-logic-chat__auth-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 999998;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: clamp(18px, 4vw, 42px);
|
|
background: rgba(8, 16, 11, 0.4);
|
|
backdrop-filter: blur(18px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
|
}
|
|
|
|
.crop-logic-chat__auth-dialog {
|
|
width: min(100%, 520px);
|
|
max-height: min(88vh, 760px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(22, 51, 27, 0.08);
|
|
border-radius: 32px;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(45, 156, 219, 0.12), transparent 35%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 251, 247, 0.98));
|
|
box-shadow: 0 34px 110px rgba(6, 18, 10, 0.28);
|
|
animation: crop-logic-auth-pop 220ms ease-out;
|
|
}
|
|
|
|
.crop-logic-chat__auth-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 22px 24px 14px;
|
|
border-bottom: 1px solid rgba(22, 51, 27, 0.08);
|
|
}
|
|
|
|
.crop-logic-chat__auth-head strong {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__auth-body {
|
|
padding: 0 24px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.crop-logic-chat__auth-hero {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 22px 0 18px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-badge {
|
|
width: 54px;
|
|
height: 54px;
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 18px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--cl-primary), #1d6330);
|
|
box-shadow: 0 18px 34px rgba(43, 138, 62, 0.28);
|
|
}
|
|
|
|
.crop-logic-chat__auth-copy {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-kicker {
|
|
color: var(--cl-primary);
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.crop-logic-chat__auth-copy h4 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.crop-logic-chat__auth-copy p {
|
|
margin: 0;
|
|
color: var(--cl-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.crop-logic-chat__auth-switcher {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
padding: 6px;
|
|
margin-bottom: 18px;
|
|
border-radius: 18px;
|
|
background: rgba(22, 51, 27, 0.06);
|
|
}
|
|
|
|
.crop-logic-chat__auth-switch {
|
|
min-height: 46px;
|
|
border: 0;
|
|
border-radius: 14px;
|
|
background: transparent;
|
|
color: var(--cl-muted);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
|
|
}
|
|
|
|
.crop-logic-chat__auth-switch.is-active {
|
|
color: var(--cl-text);
|
|
background: #fff;
|
|
box-shadow: 0 12px 24px rgba(16, 39, 22, 0.08);
|
|
}
|
|
|
|
.crop-logic-chat__auth-notice {
|
|
margin: 0 0 16px;
|
|
padding: 12px 14px;
|
|
border-radius: 16px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.crop-logic-chat__auth-notice.is-success {
|
|
color: #165728;
|
|
background: rgba(43, 138, 62, 0.12);
|
|
}
|
|
|
|
.crop-logic-chat__auth-notice.is-error {
|
|
color: #8c2334;
|
|
background: rgba(190, 53, 77, 0.12);
|
|
}
|
|
|
|
.crop-logic-chat__auth-notice.is-info {
|
|
color: #11537d;
|
|
background: rgba(45, 156, 219, 0.12);
|
|
}
|
|
|
|
.crop-logic-chat__auth-form {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-grid {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-grid.is-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.crop-logic-chat__auth-field {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-field span {
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
color: var(--cl-text);
|
|
}
|
|
|
|
.crop-logic-chat__auth-field input {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
padding: 0 16px;
|
|
border: 1px solid rgba(22, 51, 27, 0.1);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__auth-field input:focus {
|
|
outline: 0;
|
|
border-color: rgba(43, 138, 62, 0.38);
|
|
background: #fff;
|
|
box-shadow: 0 0 0 4px rgba(43, 138, 62, 0.12);
|
|
}
|
|
|
|
.crop-logic-chat__auth-submit {
|
|
min-height: 52px;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, var(--cl-primary), #1f6b2f);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
box-shadow: 0 18px 34px rgba(43, 138, 62, 0.26);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.crop-logic-chat__auth-submit:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 20px 38px rgba(43, 138, 62, 0.3);
|
|
}
|
|
|
|
.crop-logic-chat__auth-submit:disabled {
|
|
opacity: 0.7;
|
|
cursor: wait;
|
|
}
|
|
|
|
.crop-logic-chat__auth-inline,
|
|
.crop-logic-chat__auth-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.crop-logic-chat__auth-footer {
|
|
padding-top: 2px;
|
|
color: var(--cl-muted);
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
.crop-logic-chat__auth-link {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--cl-primary);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.crop-logic-chat__auth-link.is-muted {
|
|
color: var(--cl-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.crop-logic-chat__auth-dialog {
|
|
width: min(100%, 100vw - 24px);
|
|
max-height: min(90vh, 760px);
|
|
border-radius: 26px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-head,
|
|
.crop-logic-chat__auth-body {
|
|
padding-right: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-hero {
|
|
gap: 12px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-badge {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.crop-logic-chat__auth-copy h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.crop-logic-chat__auth-grid.is-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@keyframes crop-logic-auth-pop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|