.ip-robot-panel {
position: absolute;
right: -5%;
top: 0%;
width: min(360px, 30vw);
z-index: 7;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
padding: 9px;
max-height: 360px;
overflow: hidden;
background:
radial-gradient(circle at 84% 12%, rgba(255, 0, 128, 0.18), transparent 55%),
linear-gradient(155deg, rgba(12, 16, 28, 0.96), rgba(20, 18, 44, 0.94));
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.46), 0 0 18px rgba(255, 0, 140, 0.15);
backdrop-filter: none;
-webkit-backdrop-filter: none;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.ip-robot-panel__head {
color: #f4f6ff;
font: 800 13px/1.2 Arial, Helvetica, sans-serif;
letter-spacing: 0.02em;
}
.ip-robot-panel__sub {
margin-top: 2px;
color: #bbc4ea;
font: 600 10px/1.2 Arial, Helvetica, sans-serif;
}
.ip-robot-question {
margin-top: 6px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
padding: 8px 9px;
background: rgba(255, 255, 255, 0.04);
color: #f4f6ff;
font: 700 11px/1.3 Arial, Helvetica, sans-serif;
min-height: 44px;
}
.ip-robot-question b {
display: block;
}
.ip-robot-question small {
display: block;
margin-top: 4px;
color: #c9d1f0;
font-weight: 600;
}
.ip-robot-picked {
display: none !important;
}
.ip-robot-picked-item {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
padding: 6px 7px;
background: rgba(255, 255, 255, 0.03);
color: #e7ebff;
font: 600 11px/1.2 Arial, Helvetica, sans-serif;
animation: ipRobotPickIn 0.2s ease;
}
.ip-robot-picked-item small {
display: block;
color: #b8c1ea;
font: 600 10px/1.2 Arial, Helvetica, sans-serif;
margin-bottom: 2px;
}
.ip-robot-picked-item b {
color: #ffffff;
font: 700 11px/1.25 Arial, Helvetica, sans-serif;
}
.ip-robot-picked-item.is-empty {
grid-column: 1 / -1;
text-align: center;
color: #c1caee;
}
.ip-robot-picked-item.is-latest {
border-color: rgba(255, 0, 128, 0.72);
box-shadow: 0 0 0 1px rgba(255, 0, 128, 0.36) inset;
}
.ip-robot-picked-item.is-price {
border-color: rgba(109, 51, 255, 0.7);
background: linear-gradient(135deg, rgba(255, 0, 128, 0.1), rgba(109, 51, 255, 0.14));
}
.ip-robot-picked-more {
grid-column: 1 / -1;
color: #b8c2eb;
font: 600 10px/1.2 Arial, Helvetica, sans-serif;
text-align: right;
padding-right: 2px;
}
.ip-robot-options {
margin-top: 7px;
gap: 6px;
max-height: 170px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
}
.ip-robot-options.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ip-robot-list {
display: grid;
gap: 7px;
}
.ip-robot-list.cols-2 {
display: contents;}
.ip-robot-options.is-swap {
animation: ipRobotStepIn 0.2s ease;
}
.ip-robot-btn,
.ip-robot-chip,
.ip-robot-order-btn {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 11px;
background: rgba(255, 255, 255, 0.04);
color: #f7f8ff;
text-align: left;
padding: 8px 9px;
cursor: pointer;
font: 700 11px/1.25 Arial, Helvetica, sans-serif;
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.ip-robot-btn:hover,
.ip-robot-chip:hover,
.ip-robot-order-btn:hover {
border-color: rgba(255, 255, 255, 0.38);
background: rgba(255, 255, 255, 0.11);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}
.ip-robot-btn.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.ip-robot-chip.is-active {
background: linear-gradient(135deg, rgba(255, 0, 128, 0.82), rgba(104, 34, 255, 0.85));
border-color: transparent;
}
.ip-robot-inline {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ip-robot-select {
width: 100%;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: #11182a;
color: #f4f6ff;
padding: 9px 10px;
font: 600 12px/1.2 Arial, Helvetica, sans-serif;
}
.ip-robot-summary {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 11px;
padding: 9px;
background: rgba(255, 255, 255, 0.03);
max-height: 180px;
overflow: auto;
}
.ip-robot-summary-row {
display: flex;
justify-content: space-between;
gap: 10px;
font: 600 11px/1.35 Arial, Helvetica, sans-serif;
color: #dce2ff;
margin-bottom: 6px;
}
.ip-robot-summary-row b {
color: #fff;
}
.ip-robot-order-form {
margin-top: 6px;
display: grid;
gap: 6px;
}
.ip-robot-upload-box {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 10px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
rgba(8, 13, 26, 0.82);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) inset;
}
.ip-robot-upload-box:hover {
border-color: rgba(255, 73, 163, 0.55);
}
.ip-robot-upload-box input[type="file"],
.ip-robot-upload-box input[type="url"] {
width: 100%;
margin-top: 8px;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: #0b1222;
color: #f5f6ff;
padding: 9px 10px;
font: 700 12px/1.2 Arial, Helvetica, sans-serif;
appearance: none;
-webkit-appearance: none;
}
.ip-robot-upload-meta {
color: #cfd6f7;
font: 700 11px/1.25 Arial, Helvetica, sans-serif;
overflow-wrap: anywhere;
}
.ip-robot-upload-sub {
margin-top: 8px;
color: #aeb9e8;
font: 600 10px/1.2 Arial, Helvetica, sans-serif;
}
.ip-robot-file-input {
cursor: pointer;
}
.ip-robot-file-input::file-selector-button {
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: linear-gradient(130deg, #ff2e46, #b700ff);
color: #fff;
padding: 7px 10px;
margin-right: 10px;
font: 700 11px/1 Arial, Helvetica, sans-serif;
cursor: pointer;
}
.ip-robot-file-input::-webkit-file-upload-button {
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: linear-gradient(130deg, #ff2e46, #b700ff);
color: #fff;
padding: 7px 10px;
margin-right: 10px;
font: 700 11px/1 Arial, Helvetica, sans-serif;
cursor: pointer;
}
.ip-robot-url-input::placeholder {
color: #8d97c4;
}
.ip-robot-upload-box input[type="file"]:focus,
.ip-robot-upload-box input[type="url"]:focus {
outline: none;
border-color: rgba(255, 68, 156, 0.65);
box-shadow: 0 0 0 2px rgba(255, 0, 128, 0.16);
}
.ip-robot-pro-check {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
color: #dee4ff;
font: 700 12px/1.2 Arial, Helvetica, sans-serif;
}
.ip-robot-pro-check input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: #ff2e7a;
}
.ip-robot-note {
font: 600 11px/1.25 Arial, Helvetica, sans-serif;
color: #c6cbec;
}
.ip-robot-error {
color: #ffb8cb;
font: 700 11px/1.25 Arial, Helvetica, sans-serif;
min-height: 14px;
}
.ip-robot-order-btn {
text-align: center;
}
.ip-robot-order-btn--primary {
border-color: transparent;
background: linear-gradient(130deg, #ff2e46, #b700ff);
}
.ip-robot-hero .ip-robot-bubble {
display: none !important;
}
@keyframes ipRobotStepIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ipRobotPickIn {
from {
opacity: 0;
transform: translateY(3px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 1280px) {
.ip-robot-panel {
right: 12%;
width: min(280px, 34vw);
}
}
@media (max-width: 1024px) {
.ip-robot-panel {
position: relative;
right: auto;
top: auto;
width: 100%;
margin-top: 14px;
max-width: 100%;
max-height: none;
overflow: visible;
}
.ip-robot-options.cols-2 {
grid-template-columns: 1fr;
}
.ip-robot-list.cols-2 {
grid-template-columns: 1fr;
}
}