.aiweb-comparebar {
position: fixed;
inset-inline: 0;
inset-block-end: calc(var(--space-16) + var(--space-12) + var(--space-2) + var(--space-10) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-overlay);
padding-inline: var(--space-4);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(var(--space-5));
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.aiweb-comparebar.is-shown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .25s ease, transform .25s ease;
}
.aiweb-comparebar__inner.aiweb-app {
pointer-events: auto;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background-color: var(--color-ink);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-nav);
color: var(--text-on-primary);
}
.aiweb-comparebar__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--color-primary);
}
.aiweb-comparebar__text {
flex: 1 1 auto;
min-inline-size: 0;
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-comparebar__link {
flex: 0 0 auto;
color: var(--color-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
text-decoration: none;
white-space: nowrap;
}
.aiweb-comparebar__link:hover {
text-decoration: underline;
}
.aiweb-comparebar__clear {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-6);
block-size: var(--space-6);
border: 0;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--text-on-primary);
cursor: pointer;
}
.aiweb-comparebar__clear:hover {
background-color: color-mix(in srgb, var(--text-on-primary) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-comparebar {
transform: none;
transition: opacity .2s ease, visibility 0s linear .2s;
}
.aiweb-comparebar.is-shown {
transform: none;
transition: opacity .2s ease;
}
}
.aiweb-compare-page {
padding-block: var(--space-5) var(--space-8);
}
.aiweb-compare__title {
margin-block-end: var(--space-5);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-compare__scroll {
overflow-x: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
background-color: var(--surface);
}
.aiweb-compare__table {
border-collapse: collapse;
inline-size: 100%;
min-inline-size: 560px;
}
.aiweb-compare__table th,
.aiweb-compare__table td {
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--border);
text-align: start;
vertical-align: middle;
font-size: var(--fs-body);
font-weight: var(--fw-regular);
}
.aiweb-compare__rowhead {
position: sticky;
inset-inline-start: 0;
z-index: 1;
inline-size: 120px;
background-color: var(--surface);
color: var(--text-secondary);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
}
.aiweb-compare__col {
position: relative;
min-inline-size: 140px;
text-align: center;
vertical-align: top;
}
.aiweb-compare__remove {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-2);
display: grid;
place-items: center;
inline-size: var(--space-6);
block-size: var(--space-6);
border-radius: var(--radius-pill);
background-color: var(--background);
color: var(--text-secondary);
}
.aiweb-compare__remove:hover {
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-compare__thumb {
display: block;
margin-block: var(--space-2);
margin-inline: auto;
inline-size: 72px;
block-size: 72px;
background-color: var(--background);
border-radius: var(--radius-md);
overflow: hidden;
}
.aiweb-compare__thumb-img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-compare__pname {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
color: var(--text-primary);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
font-weight: var(--fw-medium);
text-decoration: none;
}
.aiweb-compare__dash {
color: var(--text-muted);
}