* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100dvh;
min-height: 100%;
overflow: hidden;
overscroll-behavior: none;
font-family: var(--font);
color: var(--text);
background:
radial-gradient(circle at 4% 0%, rgba(242, 103, 34, 0.16), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 28%),
linear-gradient(180deg, var(--white) 0%, var(--concrete-75) 48%, var(--concrete-300) 100%);
}
body {
height: 100dvh;
min-height: 100dvh;
overflow: hidden;
}
button,
textarea,
select,
input {
font: inherit;
}
button {
cursor: pointer;
border: none;
}
button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible {
outline: 3px solid rgba(242, 103, 34, 0.22);
outline-offset: 2px;
}
button:disabled,
textarea:disabled,
select:disabled,
input:disabled {
cursor: not-allowed;
opacity: 0.72;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.hidden {
display: none !important;
}
.app-shell {
position: fixed;
inset: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
height: 100dvh;
min-height: 0;
overflow: hidden;
}
/* MAIN */
.main-panel {
padding: 12px;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* WORKSPACE */
.workspace {
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(320px, 0.9fr);
gap: 16px;
min-height: 0;
flex: 1;
overflow: hidden;
}
.chat-card,
.results-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
border: 1px solid rgba(15, 23, 42, 0.09);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.results-card__header {
display: none !important;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--border);
align-items: flex-start;
justify-content: space-between;
gap: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88));
}
.results-card__header h3 {
margin: 0 0 3px;
font-size: 1rem;
color: var(--text-strong);
letter-spacing: 0;
}
.results-card__header p {
margin: 0;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.35;
}
.results-count {
white-space: nowrap;
padding: 8px 12px;
border-radius: 999px;
background: var(--success-soft);
color: var(--green-700);
border: 1px solid rgba(21, 150, 111, 0.18);
font-size: 0.82rem;
font-weight: 850;
}
/* CHAT MESSAGES */
.chat-messages {
flex: 1;
min-height: 0;
max-height: none;
padding: 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
scroll-behavior: smooth;
overscroll-behavior: contain;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(248, 250, 252, 0.78));
}
.chat-messages::-webkit-scrollbar,
.results-list::-webkit-scrollbar {
width: 10px;
}
.chat-messages::-webkit-scrollbar-thumb,
.results-list::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.14);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
}
.chat-messages::-webkit-scrollbar-track,
.results-list::-webkit-scrollbar-track {
background: transparent;
}
.message-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.message-row--user {
justify-content: flex-end;
}
.message-avatar {
width: 38px;
height: 38px;
border-radius: 13px;
flex: 0 0 38px;
display: grid;
place-items: center;
font-size: 0.84rem;
font-weight: 850;
box-shadow: var(--shadow-sm);
}
.message-avatar--assistant {
background: linear-gradient(135deg, var(--white), var(--concrete-200));
color: var(--primary);
border: 1px solid rgba(242, 103, 34, 0.18);
}
.message-avatar--user {
background: linear-gradient(135deg, var(--primary), var(--primary-2));
color: var(--white);
box-shadow: 0 10px 24px rgba(242, 103, 34, 0.24);
}
.message-content {
max-width: min(82ch, 100%);
}
.message-bubble {
max-width: min(82ch, 100%);
padding: 16px 18px;
border-radius: 18px;
line-height: 1.65;
font-size: 0.98rem;
white-space: pre-wrap;
word-break: break-word;
}
.message-bubble--assistant {
background: var(--white);
border: 1px solid var(--border);
color: var(--text);
box-shadow: var(--shadow-sm);
}
.message-bubble--user {
background: linear-gradient(135deg, var(--primary), var(--primary-2));
color: var(--white);
box-shadow: 0 14px 28px rgba(242, 103, 34, 0.22);
}
.message-meta {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--muted);
}
.message-meta__text {
color: var(--muted);
}
.message-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.message-report-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 7px 11px;
border-radius: 999px;
color: var(--red-700);
background: var(--danger-soft);
border: 1px solid rgba(217, 45, 32, 0.18);
font-size: 0.78rem;
font-weight: 850;
transition:
transform 0.16s ease,
background 0.16s ease,
border-color 0.16s ease;
}
.message-report-button:hover {
transform: translateY(-1px);
background: var(--red-100);
border-color: rgba(217, 45, 32, 0.28);
}
.answer-block + .answer-block {
margin-top: 10px;
}
.answer-section-title {
margin: 12px 0 4px;
color: var(--text-strong);
font-size: 0.92rem;
font-weight: 850;
letter-spacing: 0;
}
.answer-section-title:first-child {
margin-top: 0;
}
.answer-list {
margin: 8px 0 0 0;
padding-left: 18px;
}
.answer-list li {
margin: 4px 0;
}
/* STATUS PILLS */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 850;
font-size: 0.78rem;
border: 1px solid transparent;
}
.status-pill::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
}
.status-pill--concrete {
background: var(--success-soft);
color: var(--green-700);
border-color: rgba(21, 150, 111, 0.18);
}
.status-pill--general {
background: var(--accent-soft);
color: var(--blue-600);
border-color: rgba(37, 99, 235, 0.16);
}
.status-pill--clarification {
background: var(--warning-soft);
color: var(--amber-700);
border-color: rgba(183, 121, 31, 0.20);
}
.status-pill--expert {
background: var(--expert-soft);
color: var(--expert);
border-color: rgba(124, 58, 237, 0.18);
}
/* TYPING */
.typing-indicator {
padding: 0 22px 14px;
display: flex;
gap: 6px;
align-items: center;
}
.typing-indicator span {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--primary);
animation: pulse 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.15s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes pulse {
0%,
80%,
100% {
transform: scale(0.7);
opacity: 0.40;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* FORM */
.chat-form {
padding: 14px 18px 16px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.98));
}
.chat-form__input-wrap {
background: var(--white);
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
box-shadow: var(--shadow-sm);
}
.chat-form__input-wrap:focus-within {
border-color: rgba(242, 103, 34, 0.52);
box-shadow:
0 0 0 4px rgba(242, 103, 34, 0.10),
var(--shadow-md);
}
#messageInput {
width: 100%;
min-height: 48px;
max-height: 180px;
resize: none;
background: transparent;
color: var(--text);
border: none;
outline: none;
padding: 10px 10px 10px 12px;
line-height: 1.5;
}
#messageInput::placeholder {
color: var(--steel-400);
}
.send-button,
#disclaimerAcceptButton {
min-width: 112px;
padding: 14px 18px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--primary-2));
color: var(--white);
font-weight: 850;
box-shadow: 0 12px 24px rgba(242, 103, 34, 0.22);
transition:
transform 0.16s ease,
opacity 0.16s ease,
box-shadow 0.16s ease;
}
.send-button:hover:not(:disabled),
#disclaimerAcceptButton:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(242, 103, 34, 0.28);
}
.chat-form__footer {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
color: var(--muted);
font-size: 0.82rem;
}
/* RESET / FEEDBACK */
#resetChatButton,
.feedback-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 13px;
border-radius: 999px;
background: var(--white);
color: var(--text);
border: 1px solid var(--border);
font-weight: 850;
box-shadow: var(--shadow-sm);
transition:
transform 0.16s ease,
background 0.16s ease,
border-color 0.16s ease;
}
#resetChatButton:hover,
.reset-chat-button:hover,
.feedback-button:hover {
transform: translateY(-1px);
background: var(--primary-soft);
border-color: rgba(242, 103, 34, 0.30);
}
/* PRODUCTS */
.results-list {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(248, 250, 252, 0.78));
}
.product-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-sm);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.product-card:hover {
transform: translateY(-1px);
border-color: rgba(242, 103, 34, 0.25);
box-shadow: var(--shadow-md);
}
.product-card__top {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.product-card__name {
margin: 0;
font-size: 1rem;
line-height: 1.35;
color: var(--text-strong);
letter-spacing: 0;
}
.product-card__brand {
margin-top: 4px;
color: var(--muted);
font-size: 0.9rem;
}
.product-badge {
white-space: nowrap;
font-size: 0.78rem;
font-weight: 850;
color: var(--orange-700);
background: var(--primary-soft);
border: 1px solid rgba(242, 103, 34, 0.20);
padding: 7px 10px;
border-radius: 999px;
}
.product-badge--secondary {
width: fit-content;
color: var(--blue-600);
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.18);
}
.product-image-wrap {
width: 76px;
aspect-ratio: 1;
flex: 0 0 76px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--concrete-50);
display: grid;
place-items: center;
}
.product-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: var(--white);
}
.product-image-wrap--missing::before {
content: "Bilde mangler";
padding: 8px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 750;
line-height: 1.2;
text-align: center;
}
.product-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-group-title {
margin: 4px 2px -4px;
color: var(--muted-strong);
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0;
}
.meta-pill {
font-size: 0.82rem;
color: var(--muted-strong);
background: var(--concrete-50);
border: 1px solid var(--border);
padding: 7px 10px;
border-radius: 999px;
font-weight: 750;
}
.product-card__details {
display: grid;
gap: 8px;
}
.product-card__detail {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.86rem;
color: var(--muted-strong);
}
.product-card__label {
color: var(--muted);
min-width: 92px;
}
.product-card__extra {
border-top: 1px solid var(--border);
padding-top: 8px;
}
.product-card__extra summary {
color: var(--muted-strong);
cursor: pointer;
font-size: 0.84rem;
font-weight: 850;
}
.product-card__extra .product-card__detail {
margin-top: 8px;
}
/* EMPTY STATE */
.empty-state {
margin: auto 0;
padding: 24px;
text-align: center;
color: var(--muted);
border: 1px dashed rgba(15, 23, 42, 0.18);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.92));
}
.empty-state__icon {
width: 52px;
height: 52px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border-radius: 17px;
background: var(--primary-soft);
color: var(--primary);
font-size: 1.35rem;
font-weight: 900;
}
.empty-state h4 {
margin: 0 0 8px;
color: var(--text-strong);
}
.empty-state p {
margin: 0;
line-height: 1.55;
}
/* DISCLAIMER MODAL - CRITICAL */
#disclaimerModal {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100vw !important;
height: 100vh !important;
padding: 24px !important;
background:
radial-gradient(circle at 8% 0%, rgba(242, 103, 34, 0.20), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.14), transparent 28%),
rgba(15, 23, 42, 0.48) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
#disclaimerModal.hidden {
display: none !important;
}
#disclaimerModal > * {
position: relative !important;
width: min(760px, calc(100vw - 32px)) !important;
max-height: min(780px, calc(100vh - 48px)) !important;
overflow-y: auto !important;
background: var(--white) !important;
color: var(--text) !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
border-radius: 30px !important;
box-shadow: 0 34px 100px rgba(15, 23, 42, 0.32) !important;
padding: 30px !important;
animation: disclaimerPop 180ms ease-out;
}
#disclaimerModal h1,
#disclaimerModal h2,
#disclaimerModal h3 {
margin-top: 0 !important;
color: var(--text-strong) !important;
letter-spacing: 0 !important;
}
#disclaimerModal p,
#disclaimerModal li,
#disclaimerText {
color: var(--muted-strong) !important;
line-height: 1.65 !important;
}
#disclaimerText {
margin: 18px 0 22px !important;
padding: 18px !important;
border-radius: 20px !important;
background: linear-gradient(180deg, var(--concrete-50), var(--concrete-150)) !important;
border: 1px solid var(--border) !important;
}
#disclaimerModal button,
#disclaimerAcceptButton {
border-radius: 16px !important;
}
#reportModal {
position: fixed;
inset: 0;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
padding: 24px;
background:
radial-gradient(circle at 10% 0%, rgba(242, 103, 34, 0.18), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.12), transparent 28%),
rgba(15, 23, 42, 0.48);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#reportModal.hidden {
display: none;
}
.report-modal-card {
width: min(720px, calc(100vw - 32px));
max-height: min(820px, calc(100vh - 48px));
overflow-y: auto;
padding: 28px;
color: var(--text);
background: var(--white);
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 28px;
box-shadow: 0 34px 100px rgba(15, 23, 42, 0.32);
animation: disclaimerPop 180ms ease-out;
}
.modal-card__meta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 7px 10px;
border-radius: 999px;
color: var(--green-700);
background: var(--success-soft);
border: 1px solid rgba(21, 150, 111, 0.18);
font-size: 0.78rem;
font-weight: 900;
}
.modal-card__title {
margin: 0 0 20px;
color: var(--text-strong);
font-size: 1.45rem;
line-height: 1.2;
letter-spacing: 0;
}
.modal-card__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.report-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.report-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.report-field {
display: flex;
flex-direction: column;
gap: 7px;
color: var(--text-strong);
font-size: 0.9rem;
font-weight: 850;
}
.report-field select,
.report-field textarea {
width: 100%;
border: 1px solid var(--border-strong);
border-radius: 16px;
color: var(--text);
background: var(--concrete-50);
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
.report-field select {
min-height: 46px;
padding: 0 13px;
}
.report-field textarea {
resize: vertical;
min-height: 116px;
padding: 12px 13px;
line-height: 1.5;
}
.report-checkbox {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted-strong);
font-size: 0.9rem;
font-weight: 800;
}
.report-checkbox input {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
.report-privacy {
margin: 0;
padding: 12px 14px;
border-radius: 16px;
color: var(--amber-700);
background: var(--warning-soft);
border: 1px solid rgba(183, 121, 31, 0.22);
line-height: 1.5;
}
.report-error {
padding: 11px 13px;
border-radius: 14px;
color: var(--red-700);
background: var(--danger-soft);
border: 1px solid rgba(217, 45, 32, 0.22);
font-weight: 800;
}
.report-actions {
padding-top: 4px;
}
.report-toast {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 100000;
max-width: min(420px, calc(100vw - 32px));
padding: 14px 16px;
border-radius: 16px;
color: var(--green-700);
background: var(--white);
border: 1px solid rgba(21, 150, 111, 0.22);
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
font-weight: 850;
}
@keyframes disclaimerPop {
from {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* RESPONSIVE */
@media (max-width: 1280px) {
.app-shell {
grid-template-columns: minmax(0, 1fr);
}
.hero {
display: none;
}
.workspace {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1.65fr) minmax(0, 0.48fr);
}
.chat-card,
.results-card {
height: auto;
min-height: 0;
}
}
@media (max-width: 980px) {
.app-shell {
grid-template-columns: 1fr;
}
.main-panel {
padding: 14px;
}
.workspace {
gap: 12px;
}
}
@media (max-width: 640px) {
.main-panel {
padding: 14px;
}
.results-card__header,
.chat-messages,
.chat-form,
.results-list {
padding-left: 16px;
padding-right: 16px;
}
.results-card__header {
flex-direction: column;
}
.chat-form__input-wrap {
grid-template-columns: 1fr;
}
.send-button {
width: 100%;
}
.chat-form__footer {
flex-direction: column;
align-items: flex-start;
}
.message-bubble,
.message-content {
max-width: 100%;
}
.message-row--user {
padding-left: 16px;
}
.message-row:not(.message-row--user) {
padding-right: 16px;
}
#disclaimerModal,
#reportModal {
padding: 14px !important;
align-items: flex-start !important;
overflow-y: auto !important;
}
#disclaimerModal > *,
.report-modal-card {
width: 100% !important;
max-height: none !important;
margin-top: 12px !important;
border-radius: 22px !important;
padding: 22px !important;
}
.report-form__grid {
grid-template-columns: 1fr;
}
.report-actions {
flex-direction: column-reverse;
}
.report-actions button {
width: 100%;
}
}
/* PREMIUM RETAIL ASSISTANT UI */
body {
background:
linear-gradient(180deg, var(--concrete-25) 0%, var(--concrete-125) 48%, var(--concrete-250) 100%);
}
.app-shell {
/* tre rader: banner-stabel (0 når tom) · topbar · arbeidsflate.
Tidligere «auto minmax(0,1fr)» var for 2 barn; banner-stabelen som nytt
første barn skjøv radene og klemte toppen. */
grid-template-rows: auto auto minmax(0, 1fr);
background:
linear-gradient(90deg, rgba(242, 103, 34, 0.05), transparent 26%),
linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent 38%);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 12px 18px;
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(18px);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
z-index: 20;
}
.topbar__brand,
.topbar__actions {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.topbar__mark {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
color: var(--white);
font-weight: 950;
background: linear-gradient(135deg, var(--primary), var(--primary-2));
box-shadow: 0 12px 24px rgba(242, 103, 34, 0.22);
}
.topbar h1 {
margin: 0;
color: var(--text-strong);
font-size: 1.08rem;
line-height: 1.1;
letter-spacing: 0;
}
.topbar p {
margin: 3px 0 0;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.2;
}
.topbar__status,
.topbar__session,
.topbar__report,
.topbar__new-chat {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
white-space: nowrap;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 850;
}
.topbar__status {
padding: 8px 12px;
color: var(--green-700);
background: var(--success-soft);
border: 1px solid rgba(21, 150, 111, 0.18);
}
.topbar__status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 5px rgba(21, 150, 111, 0.12);
}
.topbar__status[data-state="loading"] {
color: var(--blue-600);
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.18);
}
.topbar__status[data-state="warning"] {
color: var(--amber-700);
background: var(--warning-soft);
border-color: rgba(183, 121, 31, 0.22);
}
.topbar__status[data-state="error"] {
color: var(--red-700);
background: var(--danger-soft);
border-color: rgba(217, 45, 32, 0.22);
}
.topbar__session {
padding: 8px 12px;
color: var(--muted-strong);
background: var(--concrete-50);
border: 1px solid var(--border);
}
.topbar__report {
padding: 9px 13px;
color: var(--red-700);
background: var(--danger-soft);
border: 1px solid rgba(217, 45, 32, 0.22);
transition:
transform 0.16s ease,
background 0.16s ease,
border-color 0.16s ease;
}
.topbar__report:hover {
transform: translateY(-1px);
background: var(--red-100);
border-color: rgba(217, 45, 32, 0.32);
}
.topbar__new-chat {
padding: 9px 14px;
color: var(--white);
background: linear-gradient(135deg, var(--text-strong), var(--steel-700));
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
background 0.16s ease;
}
#resetChatButton.topbar__new-chat {
color: var(--white);
background: linear-gradient(135deg, var(--text-strong), var(--steel-700));
border: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 999px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}
.topbar__new-chat span {
width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
font-weight: 950;
}
.topbar__new-chat:hover {
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
}
#resetChatButton.topbar__new-chat:hover {
color: var(--white);
background: linear-gradient(135deg, var(--steel-700), var(--text-strong));
border-color: rgba(15, 23, 42, 0.26);
}
.main-panel {
padding: 16px;
min-height: 0;
}
.workspace {
grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.95fr);
gap: 16px;
}
.chat-card,
.results-card {
border-radius: 20px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}
.results-card__header {
display: flex !important;
padding: 14px 18px;
min-height: 72px;
}
.results-card__header {
position: sticky;
top: 0;
z-index: 4;
}
.results-card__header h3 {
font-size: 1.02rem;
}
.chat-messages {
/* panelhodet er fjernet (rettepass 2026-07-14): samtalen starter øverst —
litt ekstra topp-luft så første boble ikke klistres mot panelkanten */
padding: 22px 18px 18px;
gap: 14px;
}
.message-row--user .message-content {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.message-bubble--assistant {
border-radius: 6px 18px 18px 18px;
}
.message-bubble--user {
border-radius: 18px 6px 18px 18px;
}
.answer-block {
white-space: normal;
}
.answer-alerts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.answer-alert {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 900;
border: 1px solid transparent;
}
.answer-alert::before {
content: "!";
width: 17px;
height: 17px;
display: grid;
place-items: center;
border-radius: 999px;
color: var(--white);
font-size: 0.68rem;
}
.answer-alert--expert {
color: var(--red-700);
background: var(--danger-soft);
border-color: rgba(217, 45, 32, 0.22);
}
.answer-alert--expert::before {
background: var(--red-700);
}
.answer-alert--clarification {
color: var(--amber-700);
background: var(--warning-soft);
border-color: rgba(183, 121, 31, 0.22);
}
.answer-alert--clarification::before {
background: var(--amber-700);
}
.answer-alert--warning {
color: var(--blue-600);
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.18);
}
.answer-alert--warning::before {
background: var(--blue-600);
}
.chat-form {
padding: 14px 18px 14px;
}
.chat-form__footer {
align-items: center;
}
.results-list {
padding: 14px;
}
.product-group-title {
position: sticky;
top: 0;
z-index: 2;
width: fit-content;
padding: 6px 10px;
margin: 2px 0 -2px;
border-radius: 999px;
color: var(--muted-strong);
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.product-card {
padding: 12px;
gap: 10px;
border-radius: 16px;
}
.product-card__top {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: start;
}
.product-card__summary {
min-width: 0;
}
.product-card__name {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 0.96rem;
}
.product-image-wrap {
width: 76px;
flex-basis: 76px;
border-radius: 12px;
}
.product-meta {
gap: 6px;
}
.meta-pill {
padding: 6px 9px;
font-size: 0.78rem;
}
.meta-pill--primary {
color: var(--green-700);
background: var(--success-soft);
border-color: rgba(21, 150, 111, 0.18);
}
.meta-pill--required {
color: var(--blue-600);
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.18);
}
.meta-pill--risk {
color: var(--red-700);
background: var(--danger-soft);
border-color: rgba(217, 45, 32, 0.22);
}
.meta-pill--tool,
.meta-pill--finish,
.meta-pill--secondary {
color: var(--amber-700);
background: var(--warning-soft);
border-color: rgba(183, 121, 31, 0.18);
}
.product-docs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.document-badge {
display: inline-flex;
align-items: center;
padding: 5px 8px;
border-radius: 999px;
color: var(--green-700);
background: var(--success-soft);
border: 1px solid rgba(21, 150, 111, 0.18);
font-size: 0.72rem;
font-weight: 900;
}
.product-card__details {
gap: 7px;
}
.product-card__detail {
align-items: flex-start;
padding: 7px 0;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.product-card__detail:first-child {
border-top: none;
}
.product-card__label {
font-weight: 850;
}
.product-card__extra {
border-top: 1px solid var(--border);
border-radius: 12px;
background: var(--concrete-50);
padding: 8px 10px;
}
.product-card__extra summary {
list-style-position: inside;
}
.empty-state {
margin: auto;
max-width: 420px;
}
@media (max-width: 1280px) and (min-width: 901px) {
.workspace {
grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.9fr);
grid-template-rows: none;
}
}
@media (max-width: 900px) {
.topbar {
align-items: flex-start;
flex-direction: column;
}
.topbar__actions {
width: 100%;
flex-wrap: wrap;
}
.topbar__new-chat {
margin-left: auto;
}
.workspace {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}
}
@media (max-width: 640px) {
.topbar {
padding: 10px 12px;
}
.topbar__brand {
align-items: flex-start;
}
.topbar__actions {
gap: 8px;
}
.topbar__session {
display: none;
}
.topbar__report,
.topbar__new-chat {
width: 100%;
margin-left: 0;
}
.main-panel {
padding: 10px;
}
.chat-card,
.results-card {
border-radius: 16px;
}
.product-card__top {
grid-template-columns: 64px minmax(0, 1fr);
}
.product-image-wrap {
width: 64px;
flex-basis: 64px;
}
}
/* ============================================================================
PREMIUM & MOTION-FUNDAMENT (fase 7.0)
Kun transform/opacity animeres (GPU-vennlig, ingen layout-shift). Varighet
og easing kommer fra tokens. prefers-reduced-motion nullstiller bevegelse
via token-overstyringen i tokens.css + eksplisitt fallback nederst.
============================================================================ */
/* Materiell «ankomst»: elementet fader og glir svakt inn. Plass reserveres av
layouten FØR innhold ankommer, så innfasingen aldri flytter naboer. */
@keyframes arrive {
from { opacity: 0; transform: translateY(8px) scale(0.995); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Skeleton-shimmer: en rolig lyssveip over ventende flate (ingen spinner). */
@keyframes shimmer {
from { transform: translateX(-60%); }
to { transform: translateX(160%); }
}
.motion-arrive {
animation: arrive var(--motion-base) var(--ease-out) both;
}
/* Sekvensiell innflyting: hvert kort forsinkes ett stagger-steg. Settes som
inline custom property (--i) fra JS; her defineres kun timingen. */
.stagger-item {
animation: arrive var(--motion-base) var(--ease-out) both;
animation-delay: calc(var(--i, 0) * var(--stagger-step));
}
/* Skeleton-kort: reserverer nøyaktig plass så det ekte kortet ikke skyver. */
.skeleton {
position: relative;
overflow: hidden;
background: var(--concrete-200);
border-radius: var(--radius-sm);
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.65) 50%,
transparent 100%
);
transform: translateX(-60%);
animation: shimmer 1.25s var(--ease-in-out) infinite;
will-change: transform;
}
/* Diskret blueprint-grid: teknisk presisjonsdetalj bak innhold, svært lav
kontrast så det aldri konkurrerer med lesbarhet. */
.blueprint-grid {
background-image:
linear-gradient(var(--border-blueprint) 1px, transparent 1px),
linear-gradient(90deg, var(--border-blueprint) 1px, transparent 1px);
background-size: var(--blueprint-size) var(--blueprint-size);
}
/* Mikrointeraksjon: trykk-respons på knapper/kort uten layout-endring. */
.pressable {
transition: transform var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out);
}
.pressable:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.motion-arrive,
.stagger-item {
animation: fade-in 1ms linear both;
animation-delay: 0ms;
}
.skeleton::after {
animation: none;
}
.pressable {
transition: none;
}
.pressable:active {
transform: none;
}
* {
scroll-behavior: auto !important;
}
}
/* ============================================================================
7.1 PREMIUM PRODUKTKORT + DISKMODUS (nettbrett, touch ≥ 44px)
Bygger på tokens; ingen løse hex. Kortene får subtil dybde og en diskret
presisjonslinje; NOBB løftes som plukkreferanse; lav konfidens vises rolig.
============================================================================ */
.product-card {
position: relative;
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: transform var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out);
}
/* Diskret teknisk aksentlinje i toppen — antydet blueprint/presisjon. */
.product-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
background: linear-gradient(90deg, var(--primary), var(--primary-2));
opacity: 0.0;
transition: opacity var(--motion-fast) var(--ease-out);
}
.product-card:hover::before,
.product-card:focus-within::before {
opacity: 0.9;
}
/* Plukkliste-avkrysning: stort touch-mål, øverst til høyre. */
.product-pick {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 44px;
height: 44px;
display: grid;
place-items: center;
cursor: pointer;
z-index: var(--z-base);
}
.product-pick__box {
position: absolute;
opacity: 0;
width: 44px;
height: 44px;
margin: 0;
cursor: pointer;
}
.product-pick__mark {
width: 26px;
height: 26px;
border-radius: var(--radius-xs);
border: 2px solid var(--border-strong);
background: var(--white);
transition: background var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out);
}
.product-pick__box:checked + .product-pick__mark {
background: var(--primary);
border-color: var(--primary);
box-shadow: inset 0 0 0 4px var(--white);
transform: scale(1.05);
}
.product-pick__box:focus-visible + .product-pick__mark {
box-shadow: var(--focus-ring);
}
.product-card--picked {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}
.product-card__summary {
padding-right: 48px; /* plass til avkrysning */
}
.product-card__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* NOBB som plukkreferanse — stor, monospace, lett å lese på en armlengde. */
.product-nobb {
display: flex;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: var(--concrete-100);
border: 1px solid var(--hairline);
}
.product-nobb__label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.product-nobb__value {
font-family: var(--font-mono);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-strong);
}
.meta-pill--dimension {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text-strong);
}
/* Touch-mål ≥ 44px for alt interaktivt bak disk. */
.feedback-button,
.message-report-button,
.send-button,
.topbar__report,
.topbar__new-chat {
min-height: 44px;
}
/* --- Nettbrett: stående (768) og liggende (1024), samt 834 (iPad Air) --- */
@media (min-width: 768px) and (max-width: 1024px) {
.product-card__name {
font-size: 1.06rem;
}
.product-nobb__value {
font-size: 1.5rem; /* lesbar på armlengdes avstand */
}
.product-card {
padding: var(--space-5);
}
}
/* Stående nettbrett: chat og treff stables, treff får rikelig plass. */
@media (min-width: 768px) and (max-width: 833px) and (orientation: portrait) {
.results-card {
min-height: 46vh;
}
}
/* ============================================================================
7.4 TILSTANDER OG FEIL (banner-stabel, utilgjengelig-overlay, etappetekst)
============================================================================ */
.banner-stack {
position: sticky;
top: 0;
z-index: var(--z-banner);
display: grid;
gap: var(--space-2);
padding: 0;
}
.banner {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 650;
box-shadow: var(--shadow-xs);
animation: fade-in var(--motion-base) var(--ease-out) both;
}
.banner[data-level="warning"] {
color: var(--warning-strong);
background: var(--warning-soft);
border: 1px solid rgba(183, 121, 31, 0.25);
}
.banner[data-level="danger"] {
color: var(--danger-strong);
background: var(--danger-soft);
border: 1px solid rgba(217, 45, 32, 0.22);
}
.banner[data-level="info"] {
color: var(--accent-strong);
background: var(--accent-soft);
border: 1px solid rgba(37, 99, 235, 0.18);
}
/* Utilgjengelig: en tydelig, rolig heldekkende tilstand — aldri halvdød side. */
.unavailable-overlay {
position: absolute;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--space-6);
background: rgba(246, 248, 251, 0.86);
backdrop-filter: blur(3px);
animation: fade-in var(--motion-base) var(--ease-out) both;
}
.unavailable-card {
max-width: 420px;
text-align: center;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-8) var(--space-6);
display: grid;
gap: var(--space-3);
justify-items: center;
}
.unavailable-card__mark {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
font-size: 1.6rem;
font-weight: 800;
color: var(--warning-strong);
background: var(--warning-soft);
}
.unavailable-card h2 {
margin: 0;
font-size: 1.15rem;
color: var(--text-strong);
}
.unavailable-card p {
margin: 0;
color: var(--muted-strong);
}
/* Etappetekst i tenker-indikatoren. */
.typing-indicator {
display: flex;
align-items: center;
gap: var(--space-3);
}
.typing-stage {
font-size: 0.9rem;
color: var(--muted-strong);
font-weight: 600;
}
/* ============================================================================
7.2 PLUKKLISTE (skjerm-knapp + utskriftsvennlig ark via @media print)
============================================================================ */
.results-card__head-actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.picklist-button {
min-height: 40px;
padding: 0 var(--space-4);
border-radius: var(--radius-pill);
font-weight: 750;
color: var(--white);
background: var(--primary);
transition: background var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out);
}
.picklist-button:hover:not(:disabled) {
background: var(--primary-strong);
}
.picklist-button:disabled {
color: var(--muted-strong);
background: var(--concrete-200);
}
.picklist-button:focus-visible {
box-shadow: var(--focus-ring);
}
/* Print-arket er skjult på skjerm; bygges av picklist.js ved utskrift. */
.picklist-print {
display: none;
}
@media print {
/* Skjul appen, vis kun plukkarket. Ingen bakgrunner/skygger på papir. */
body * {
visibility: hidden;
}
.picklist-print,
.picklist-print * {
visibility: visible;
}
.picklist-print {
display: block;
position: absolute;
inset: 0;
padding: 16px;
}
.picklist-sheet {
font-family: var(--font);
color: rgb(0, 0, 0);
}
.picklist-head {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid rgb(0, 0, 0);
padding-bottom: 8px;
margin-bottom: 12px;
}
.picklist-head h1 {
margin: 0;
font-size: 20px;
}
.picklist-generated {
font-size: 12px;
}
.picklist-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.picklist-table th,
.picklist-table td {
text-align: left;
padding: 8px 6px;
border-bottom: 1px solid rgb(153, 153, 153);
vertical-align: top;
}
.picklist-check {
width: 26px;
}
.picklist-check::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1.5px solid rgb(0, 0, 0);
}
.picklist-nobb {
font-family: var(--font-mono);
font-weight: 700;
white-space: nowrap;
}
.picklist-qty {
white-space: nowrap;
min-width: 90px;
}
.picklist-dim {
display: block;
color: rgb(68, 68, 68);
font-size: 11px;
}
}
/* ============================================================================
7.3 FRIKSJONSFRI TILBAKEMELDING (tommel + hurtigårsaker)
============================================================================ */
/* ============================================================================
7.5 VERSJONSBANNER (relast) + a11y-detaljer
============================================================================ */
.banner--reload {
justify-content: space-between;
}
.banner__action {
min-height: 36px;
padding: 0 var(--space-4);
border-radius: var(--radius-pill);
font-weight: 750;
color: var(--white);
background: var(--accent);
white-space: nowrap;
}
.banner__action:hover {
background: var(--accent-strong);
}
.banner__action:focus-visible {
box-shadow: var(--focus-ring);
}
/* ============================================================================
7.6 ONBOARDING-KORT + HJELP-KNAPP
============================================================================ */
.topbar__help {
min-height: 40px;
padding: 0 var(--space-4);
border-radius: var(--radius-pill);
font-weight: 700;
color: var(--accent-strong);
background: var(--accent-soft);
border: 1px solid rgba(37, 99, 235, 0.18);
}
.topbar__help:hover {
background: var(--white);
}
.topbar__help:focus-visible {
box-shadow: var(--focus-ring);
}
.onboarding-card {
max-width: 720px;
width: min(92vw, 720px);
background: var(--panel-solid);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-8) var(--space-6);
animation: arrive var(--motion-base) var(--ease-out) both;
}
.onboarding-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin: var(--space-5) 0;
}
.onboarding-tip {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
background: var(--concrete-50);
}
.onboarding-tip__num {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
font-weight: 800;
color: var(--white);
background: var(--primary);
margin-bottom: var(--space-2);
}
.onboarding-tip h3 {
margin: 0 0 var(--space-1);
font-size: 1rem;
color: var(--text-strong);
}
.onboarding-tip p {
margin: 0;
font-size: 0.9rem;
color: var(--muted-strong);
line-height: 1.5;
}
@media (max-width: 720px) {
.onboarding-cards {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
BLÅKOPI LEVENDE — designpass v4 (GJELDENDE skin; sist i filen = vinner)
Blåkopi-blå canvas/chrome; ALL lesetekst på hvite flater (absolutt).
Fasit: docs/design/hero/hero-fasit.md + v4-spec. Alle verdier via tokens.
========================================================================== */
/* ---- Canvas: blå + hvisket rutenett + arkramme m/ hjørne-ticks ---- */
body {
background:
linear-gradient(var(--bp-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
var(--bp-blue);
background-size: var(--bp-grid-size) var(--bp-grid-size),
var(--bp-grid-size) var(--bp-grid-size), auto;
color: var(--bp-on-blue);
}
.app-shell {
position: fixed; /* behold basens fixed-grid */
background: transparent;
box-shadow: none;
/* Prosjektfane-raden er FJERNET (brukerbeslutning 2026-07-13) —
tilbake til basens tre rader: banner · topbar · arbeidsflate. */
grid-template-rows: auto auto minmax(0, 1fr);
/* A3: klaring så arkrammen (fixed inset 10/18px) aldri krysser innhold */
padding: 24px 26px 20px;
}
.app-shell::before,
.app-shell::after {
content: "";
position: fixed;
pointer-events: none;
z-index: var(--z-base);
}
.app-shell::before {
inset: 10px;
border: 1.5px solid var(--bp-frame-outer);
}
.app-shell::after {
inset: 18px;
border: 1px solid var(--bp-frame-inner);
}
/* Hjørne-ticks på arkrammen */
.topbar::before,
.topbar::after {
content: "";
position: fixed;
width: 14px;
height: 14px;
pointer-events: none;
border-color: var(--bp-frame-outer);
border-style: solid;
z-index: var(--z-base);
}
.topbar::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.topbar::after { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
/* ---- Topbar: chrome på blått (korte etiketter/mono — aldri brødtekst) ---- */
.topbar {
background: transparent;
border: 0;
box-shadow: none;
color: var(--bp-on-blue);
display: flex;
align-items: center;
gap: var(--space-4);
}
/* A4: brand-blokken har minbredde; status-gruppen wrapper FØR taglinen */
.topbar__brand { flex: 0 0 auto; }
.topbar__brand h1 { color: var(--bp-on-blue); }
.topbar .tagline { color: var(--bp-on-blue-muted); white-space: nowrap; }
.topbar__actions {
flex: 0 1 auto;
margin-left: auto; /* uten midt-avlesningen må actions selv søke høyre */
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
}
.topbar__mark {
width: 44px;
height: 44px;
background: var(--bp-card);
border: 2px solid var(--bp-signal);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 196, 43, 0.18);
/* overflow visible KUN som headroom for vinkearmen (is-happy) — selve
figuren under dimensjoneres til å stå HELT innenfor sirkelen */
overflow: visible;
}
/* Figuren må ha eksplisitt høyde: uten den faller SVG-en tilbake til
viewBox-målene (40×54) og støvlene stikker ut av 44px-sirkelen
(størrelsen bodde i det slettede Byggeplass-laget — v4 eier den nå). */
.topbar__mark .mascot-full {
display: block;
height: 33px; /* hele figuren, hjelm til støvler, inne i ringen */
width: auto;
}
.topbar__status,
.topbar__session,
.topbar__sound {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--bp-on-blue-mono);
background: transparent;
border: 1px solid var(--bp-frame-inner);
border-radius: var(--radius-pill);
}
.topbar__status[data-state="ready"]::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 6px;
border-radius: 50%;
background: var(--bp-stock-on-blue);
}
/* B1: lydbryteren er et NØYTRALT ikon — aldri gul (gul-regelen: «Ny samtale»
er eneste gulfylte i headeren; plukkliste-badgen er eneste gule detalj). */
.topbar__sound {
cursor: pointer;
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.topbar__sound svg { width: 18px; height: 18px; }
.topbar__sound .sound-icon-line {
stroke: var(--bp-on-blue-mono);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.topbar__sound[aria-pressed="true"] { border-color: var(--bp-on-blue); }
.topbar__sound[aria-pressed="true"] .sound-icon-line { stroke: var(--bp-on-blue); }
.topbar__sound [data-sound-icon][hidden] { display: none; }
.topbar__help,
.topbar__report {
color: var(--bp-on-blue);
background: transparent;
border: 1px solid var(--bp-frame-outer);
border-radius: var(--radius-pill);
}
.topbar__help:hover,
.topbar__report:hover { background: rgba(255, 255, 255, 0.12); }
/* «Ny samtale» = ENESTE gulfylte knapp i headeren (B1). Basen eier knappen
med #resetChatButton.topbar__new-chat (ID+klasse slår klasse) — v4 må
matche spesifisiteten, ellers vinner den mørke gradienten stille. */
.topbar__new-chat,
#resetChatButton.topbar__new-chat {
background: var(--bp-signal);
color: var(--bp-signal-ink);
border: 0;
border-radius: var(--radius-pill);
font-weight: 600;
box-shadow: none;
}
.topbar__new-chat:hover,
#resetChatButton.topbar__new-chat:hover {
background: var(--bp-signal);
color: var(--bp-signal-ink);
border: 0;
filter: brightness(1.05);
transform: none;
box-shadow: none;
}
.topbar__new-chat span { background: rgba(65, 36, 2, 0.14); color: var(--bp-signal-ink); }
/* Plukkliste-knapp: NØYTRAL på blått — badgen er det gule (alltid synlig). */
#makePickListButton.picklist-button {
min-height: 34px;
background: transparent;
color: var(--bp-on-blue);
border: 1px solid var(--bp-frame-outer);
border-radius: var(--radius-pill);
font-weight: 500;
}
#makePickListButton.picklist-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
#makePickListButton.picklist-button:disabled {
opacity: 1;
background: transparent;
color: var(--bp-on-blue-muted);
}
.pick-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
margin-left: 6px;
border-radius: var(--radius-pill);
background: var(--bp-signal);
color: var(--bp-signal-ink);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
}
/* v4: header-avlesningen er FJERNET (brukerbeslutning 2026-07-13 —
teksten dyttet på headeren). Atlas-tenkevrikk + status-chip gir livstegn.
Tenker-indikatoren i chatflaten forblir skjult som før. */
.typing-indicator { display: none !important; }
/* Kube-loaderen (brukerbestilt 2026-07-14, erstatter goo-blobben):
fire isometriske klosser i evig rullering — passer blåkopi-metaforen
(byggeklosser). ALT er transform-animasjon (regelkonform som originalen);
fargene er tokens (--kube-*). Wrapper gir fast høyde → CLS 0. */
.kube-loader {
height: 84px;
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-3) auto var(--space-2);
}
.kuber {
--kube-size: 26px;
height: calc(var(--kube-size) * 2);
width: calc(var(--kube-size) * 3);
position: relative;
transform-style: preserve-3d;
transform-origin: 50% 50%;
transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}
.kube {
width: var(--kube-size);
height: var(--kube-size);
top: 0;
left: 0;
position: absolute;
transform-style: preserve-3d;
}
.kube:nth-child(1) { transform: translate(100%, 0); animation: kube1 800ms linear infinite; }
.kube:nth-child(2) { transform: translate(0, 100%); animation: kube2 800ms linear infinite; }
.kube:nth-child(3) { transform: translate(100%, 100%); animation: kube3 800ms linear infinite; }
.kube:nth-child(4) { transform: translate(200%, 0); animation: kube4 800ms linear infinite; }
.kube > div {
--kube-flate: var(--kube-topp);
--kube-z: calc(var(--kube-size) / 2);
--kube-rot-y: 0deg;
--kube-rot-x: 0deg;
position: absolute;
width: 100%;
height: 100%;
background: var(--kube-flate);
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: rotateY(var(--kube-rot-y)) rotateX(var(--kube-rot-x)) translateZ(var(--kube-z));
}
.kube > div:nth-child(1) { top: 0; left: 0; }
.kube > div:nth-child(2) { --kube-flate: var(--kube-side); --kube-rot-y: 90deg; right: 0; }
.kube > div:nth-child(3) { --kube-flate: var(--kube-front); --kube-rot-x: -90deg; }
.kube > div:nth-child(4) { --kube-flate: var(--kube-spor); --kube-z: calc(var(--kube-size) * 3 * -1); top: 0; left: 0; }
@media (prefers-reduced-motion: reduce) {
.kube { animation: none !important; }
}
/* ---- To-sone-grid: samtalen ~60 % / Produktvalg ~40 % ---- */
.workspace { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
/* ---- Samtaleflaten: lys panelflate m/ dobbel hvit ramme ---- */
.chat-card,
.results-card {
background: var(--bp-panel);
border: 1.5px solid var(--bp-frame-outer);
box-shadow: inset 0 0 0 4px var(--bp-blue), inset 0 0 0 5px var(--bp-frame-inner);
border-radius: var(--radius-md);
color: var(--bp-ink);
}
.results-card__header {
background: transparent;
border-bottom: 1px solid var(--bp-hairline);
}
.results-card__header h3 { color: var(--bp-ink); }
.results-card__header p { color: var(--bp-ink-2); }
.results-count {
font-family: var(--font-mono);
color: var(--bp-blue-800);
background: var(--bp-primary-fill);
border: 1px solid var(--bp-hairline);
}
/* ---- Meldinger: metallic agent-boble m/ hel hvit dobbeltramme + kantet hale ---- */
.message-bubble--assistant {
background: linear-gradient(180deg, var(--bp-metallic-1), var(--bp-metallic-2));
border: 1.5px solid var(--bp-card);
box-shadow: 0 0 0 1px var(--bp-line-strong), var(--shadow-sm);
color: var(--bp-ink);
position: relative;
}
.message-bubble--assistant::before {
content: "";
position: absolute;
left: -8px;
top: 14px;
width: 10px;
height: 10px;
background: var(--bp-metallic-1);
border-left: 1.5px solid var(--bp-card);
border-top: 1.5px solid var(--bp-card);
clip-path: polygon(0 0, 100% 0, 0 100%); /* kantet hale */
}
.message-bubble--user {
background: var(--bp-primary-fill);
border: 1px solid var(--bp-line-strong);
color: var(--bp-ink);
}
.message-avatar--assistant {
background: var(--bp-card);
border: 1.5px solid var(--bp-blue-accent);
}
.message-avatar--user {
background: var(--bp-blue-800);
color: var(--bp-on-blue);
}
.message-meta__text { color: var(--bp-ink-2); }
/* ---- Forstått-strimmel som målestrek (gul markør + endepunkter) ---- */
.understood-strip {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--bp-blue-800);
background: var(--bp-card);
border: 1px solid var(--bp-hairline);
border-left: 4px solid var(--bp-signal);
border-radius: var(--radius-xs);
padding: 6px 12px;
position: relative;
}
.understood-strip::before,
.understood-strip::after {
content: "";
position: absolute;
top: 50%;
width: 1.5px;
height: 12px;
transform: translateY(-50%);
background: var(--bp-blue-accent);
}
.understood-strip::before { left: -14px; }
.understood-strip::after { right: -14px; }
.understood-strip__icon { color: var(--bp-blue-accent); }
/* ---- MÅLKJEDEN (flaggskip): mono-ledd + blå målestreker + rav kjøpsenhet ---- */
.maalkjede {
display: flex;
flex-direction: column;
gap: var(--space-2);
background: var(--bp-card);
border: 1px solid var(--bp-hairline);
border-radius: var(--radius-xs);
padding: var(--space-3) var(--space-4);
margin: var(--space-2) 0;
}
.maalkjede__chain {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 2px;
}
.maalkjede__step {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 10px;
border: 1px solid var(--bp-line-strong);
border-radius: var(--radius-xs);
background: var(--bp-panel);
}
.maalkjede__value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--bp-ink);
white-space: nowrap;
}
.maalkjede__op {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--bp-ink-2);
white-space: nowrap;
}
.maalkjede__step--buy {
background: var(--bp-buy-soft);
border-color: var(--bp-buy);
}
.maalkjede__step--buy .maalkjede__value { color: var(--bp-buy); }
.maalkjede__link {
align-self: center;
width: 26px;
height: 1.5px;
background: var(--bp-blue-accent);
position: relative;
margin: 0 2px;
}
.maalkjede__link::before,
.maalkjede__link::after {
content: "";
position: absolute;
top: 50%;
width: 1.5px;
height: 9px;
transform: translateY(-50%);
background: var(--bp-blue-accent);
}
.maalkjede__link::before { left: 0; }
.maalkjede__link::after { right: 0; }
.maalkjede__assumptions {
font-size: 12px;
color: var(--bp-ink-2);
border-top: 1px dashed var(--bp-hairline);
padding-top: var(--space-2);
}
/* ---- ARBEIDSBENKEN: mono-gruppeetiketter + kompakte kort ---- */
/* A2: første kort skal aldri klippes; gruppetittel er en STATISK rad i flyt */
.results-list { padding-top: var(--space-2); }
.product-group-title {
position: static;
display: block;
font-family: var(--font-mono);
font-size: 11.5px;
text-transform: lowercase;
letter-spacing: 0.08em;
color: var(--bp-blue-800);
background: transparent;
border: 0;
border-bottom: 1px solid var(--bp-hairline);
border-radius: 0;
padding: 0 0 3px;
margin: var(--space-2) 0 var(--space-1);
}
.results-list .product-group-title:first-child { margin-top: 0; }
.product-card {
position: relative;
overflow: hidden;
background: var(--bp-card);
border: 1px solid var(--bp-hairline);
border-radius: var(--radius-xs);
box-shadow: none;
padding: var(--space-3);
color: var(--bp-ink);
}
/* ---- BENCH-CARD (rettepass 4): EKSAKT referanse-markup/CSS, hex → tokens.
Egen BEM-blokk — rømmer .product-card-basens spøkelser (oransje ::before-
toppkant m.m.). Strukturen er låst av dom.bench.test.js. ---- */
.results-list { padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.bench-card {
display: grid;
grid-template-columns: auto 52px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
background: var(--bp-card);
border: 1px solid var(--bp-hairline);
border-radius: 10px;
padding: 10px 12px;
position: relative;
}
.bench-card--picked { border-color: var(--bp-blue-accent); }
.bench-card__select { display: flex; align-items: center; }
.bench-card__select input { width: 16px; height: 16px; accent-color: var(--bp-blue-accent); cursor: pointer; }
.bench-card__thumb {
width: 52px;
height: 52px;
border: 1px solid var(--bp-hairline-soft);
border-radius: 8px;
background: var(--bp-card);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bench-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bench-card__thumb svg { width: 30px; height: 30px; }
.thumb-sketch {
stroke: var(--bp-blue-accent);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
opacity: 0.55;
}
.bench-card__body { min-width: 0; }
.bench-card__name {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--bp-ink);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bench-card__spec {
margin: 2px 0 0;
font-size: 11.5px;
color: var(--bp-ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bench-card__nobb {
margin: 3px 0 0;
font-size: 12px;
font-family: var(--font-mono);
color: var(--bp-steel);
letter-spacing: 0.5px;
}
.bench-card--hero .bench-card__nobb { color: var(--bp-blue-accent); }
.bench-card__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bench-card__conf { display: flex; gap: 2px; }
.bench-card__conf i { width: 11px; height: 3px; background: var(--bp-hairline-soft); border-radius: 1px; }
.bench-card__conf[data-level="high"] i { background: var(--bp-steel); }
.bench-card--hero .bench-card__conf[data-level="high"] i { background: var(--bp-signal); }
.bench-card__conf[data-level="medium"] i:nth-child(-n+2) { background: var(--bp-steel); }
.bench-card__conf[data-level="low"] i:first-child { background: var(--bp-line-strong); }
.bench-card--low { border-style: dashed; }
.bench-card--hero::before,
.bench-card--hero::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 0 solid var(--bp-signal);
}
.bench-card--hero::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.bench-card--hero::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
/* ---- Benk-footer: gul CTA + tittelfelt (teknisk tegning) ---- */
.results-card__footer {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid var(--bp-hairline);
}
.bench-cta {
width: 100%;
padding: 10px 14px;
border: 0;
border-radius: var(--radius-xs);
background: var(--bp-signal);
color: var(--bp-signal-ink);
font-weight: 700;
cursor: pointer;
}
.bench-cta:disabled { opacity: 0.55; cursor: default; }
.titleblock {
display: flex;
justify-content: flex-end;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bp-ink-2);
border: 1px solid var(--bp-line-strong);
border-radius: 2px;
overflow: hidden;
background: var(--bp-card);
}
.titleblock:empty { display: none; }
.titleblock__cell {
padding: 4px 10px;
border-left: 1px solid var(--bp-line-strong);
white-space: nowrap;
}
.titleblock__cell:first-child {
border-left: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.titleblock__label { color: var(--bp-blue-800); font-weight: 700; }
/* ---- Komposer (A1-fasit): ÉN kompakt pille-rad ≤56 px —
skann · input (flex 1) · mic · rund gul send. Flex tåler [hidden]-barn. ---- */
.chat-form { background: transparent; border-top: 1px solid var(--bp-hairline); }
.chat-form__input-wrap {
display: flex; /* erstatter basens 2-kolonne-grid */
align-items: center;
gap: var(--space-2);
padding: 5px 5px 5px 8px;
min-height: 54px;
max-height: 56px;
background: var(--bp-card);
border: 1.5px solid var(--bp-line-strong);
border-radius: var(--radius-pill);
box-shadow: none;
}
.chat-form__input-wrap:focus-within {
border-color: var(--bp-blue-accent);
box-shadow: var(--focus-ring-paper); /* blå ring på hvit flate — aldri gul/oransje glød */
}
#messageInput {
flex: 1;
min-width: 0;
min-height: 40px;
max-height: 42px;
padding: 10px 4px;
color: var(--bp-ink);
background: transparent;
}
#messageInput::placeholder { color: var(--bp-ink-2); }
/* [hidden]-vern: attributtet skal ALLTID vinne over display-regler under */
.scan-button[hidden],
.mic-button[hidden] { display: none !important; }
/* B2-fasit: gulfylt send m/ mørk pil. ID-selektor eier knappen (basen har
.send-button-gradient + min-width 112px som ellers lekker inn). */
#sendButton {
flex: 0 0 auto;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--bp-signal);
color: var(--bp-signal-ink);
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0; /* «Send»-teksten skjules; pilen tegnes under */
}
#sendButton::before { content: "➤"; font-size: 16px; line-height: 1; }
#sendButton:hover:not(:disabled) { background: var(--bp-signal); filter: brightness(0.96); transform: none; box-shadow: none; }
#sendButton:disabled { background: var(--bp-line-strong); color: var(--bp-ink-2); }
/* Modal-/dialogknapper beholder tekstform (gjenbruker .send-button) */
.modal-card__actions .send-button,
.unavailable-card .send-button {
min-width: 0;
padding: 10px 18px;
border-radius: var(--radius-pill);
background: var(--bp-signal);
color: var(--bp-signal-ink);
box-shadow: none;
}
.scan-button,
.mic-button {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--bp-signal);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.scan-button svg,
.mic-button svg { width: 20px; height: 20px; }
.scan-icon-line {
stroke: var(--bp-blue-800);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.chat-form__footer { color: var(--bp-ink-2); font-family: var(--font-mono); font-size: 11px; }
/* ---- Startskjerm / tomtilstander (lys flate, blå strektegning) ---- */
.empty-state { color: var(--bp-ink-2); }
.empty-state h4 { color: var(--bp-ink); }
.sketch-line { stroke: var(--bp-blue-accent); }
.empty-state .tagline { color: var(--bp-blue-800); }
/* ---- Feedback/banners/modaler: lyse flater m/ blekk ---- */
.feedback-button {
background: var(--bp-panel);
border: 1px solid var(--bp-line-strong);
color: var(--bp-ink);
}
.banner { font-family: var(--font-mono); }
.modal-card,
.onboarding-card,
.report-modal-card,
.unavailable-card {
background: var(--bp-card);
color: var(--bp-ink);
border: 1.5px solid var(--bp-frame-outer);
box-shadow: 0 0 0 4px var(--bp-blue), 0 0 0 5px var(--bp-frame-inner), var(--shadow-xl);
}
/* ---- ATLAS LEVENDE (§4) — kun bevegelse; fills/geometri urørt ---- */
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes m-bob {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-3px) rotate(1.5deg); }
}
@keyframes kube1 {
0%, 50% { transform: translate(100%, 0); }
100% { transform: translate(200%, 0); }
}
@keyframes kube2 {
0% { transform: translate(0, 100%); }
50% { transform: translate(0, 0); }
100% { transform: translate(100%, 0); }
}
@keyframes kube3 {
0%, 50% { transform: translate(100%, 100%); }
100% { transform: translate(0, 100%); }
}
@keyframes kube4 {
0% { transform: translate(200%, 0); }
50% { transform: translate(200%, 100%); }
100% { transform: translate(100%, 100%); }
}
@keyframes m-think { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes m-wave {
/* v2 — anerkjennende hammerløft, mindre utslag enn robotens veiving */
0%, 100% { transform: rotate(0); }
30% { transform: rotate(-26deg); }
55% { transform: rotate(-8deg); }
80% { transform: rotate(-26deg); }
}
@keyframes m-nod {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(2.5px); }
60% { transform: translateY(0.5px); }
}
@keyframes m-squint { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
.mf-eye,
.mascot-eye {
transform-box: fill-box;
transform-origin: center;
animation: m-blink 5.2s infinite;
}
.mascot-full {
animation: m-bob 4.5s ease-in-out infinite;
transform-origin: center 80%;
overflow: visible;
}
.mascot-full .mf-arm-right,
.mascot-full .ma-arm-left { transform-box: fill-box; transform-origin: 50% 10%; }
.topbar__mark.is-thinking .mascot-full { animation: m-think 1.1s ease-in-out infinite; }
.topbar__mark.is-happy .mascot-full { animation: m-nod 0.5s ease-in-out 2; }
.topbar__mark.is-happy .mf-arm-right { animation: m-wave 0.7s ease-in-out 2; }
.topbar__mark.is-happy .mf-eye { animation: m-squint 0.5s ease-in-out 2; }
.mascot-full .ma-brow { transform-box: fill-box; transition: transform 220ms var(--ease-out); }
.topbar__mark.is-thinking .ma-brow { transform: translateY(-0.5px); }
/* v2: hodet vippes lett ned mot arbeidet i thinking (origin i nakken) */
.mascot-full .mf-head {
transform-box: fill-box;
transform-origin: 50% 92%;
transition: transform 260ms var(--ease-out);
}
.topbar__mark.is-thinking .mf-head { transform: rotate(2.5deg); }
.topbar__mark.is-thinking .atlas-eyes { transform: translateY(-0.4px); }
.mascot-full .atlas-eyes { transform-box: fill-box; transition: transform 220ms var(--ease-out); }
@keyframes ma-sheen-sweep { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.25; } }
.topbar__mark:hover .mascot-full { animation: m-nod 0.5s ease-in-out 1; }
.topbar__mark:hover .ma-goggle-sheen { animation: ma-sheen-sweep 0.9s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
.mf-eye,
.mascot-eye,
.mascot-full,
.topbar__mark.is-thinking .mascot-full,
.topbar__mark.is-happy .mascot-full,
.topbar__mark.is-happy .mf-arm-right,
.topbar__mark:hover .mascot-full,
.topbar__mark:hover .ma-goggle-sheen,
.topbar__mark.is-happy .mf-eye { animation: none !important; }
.mascot-full .ma-brow,
.mascot-full .mf-head,
.mascot-full .atlas-eyes { transition: none; }
}
/* Maskot-fyll i v4-palett (samme geometri) */
/* Atlas-håndverkeren (avatar-redesign 2026-07-14) — flate toner fra
--atlas-*-paletten; delene er separat adresserbare (ma-*). Munn/nese/bryn
er STROKE (konsistent strektykkelse), resten fills m/ én skyggetone. */
.mascot-full .ma-skin, .mascot .ma-skin { fill: var(--atlas-hud); }
.mascot-full .ma-skin-shade { fill: var(--atlas-hud-skygge); }
.mascot-full .ma-hair, .mascot .ma-hair { fill: var(--atlas-haar); }
.mascot-full .ma-beard, .mascot .ma-beard { fill: var(--atlas-haar-moerk); }
.mascot-full .mf-eye, .mascot .mascot-eye { fill: var(--atlas-haar-moerk); }
.mascot-full .ma-eye-glint, .mascot .ma-eye-glint { fill: var(--bp-card); opacity: 0.9; }
.mascot-full .ma-brow, .mascot .ma-brow {
stroke: var(--atlas-haar-moerk);
stroke-width: 1.05;
stroke-linecap: round;
fill: none;
}
/* smil INNE i skjegget (runde 4): lys strek mot mørk skjeggflate */
.mascot-full .ma-mouth-lys, .mascot .ma-mouth-lys {
stroke: var(--atlas-hud);
stroke-width: 1.15;
stroke-linecap: round;
fill: none;
}
.mascot-full .ma-nose, .mascot .ma-nose {
stroke: var(--atlas-hud-skygge);
stroke-width: 0.95;
stroke-linecap: round;
fill: none;
}
.mascot-full .ma-goggle-band, .mascot .ma-goggle-band { fill: var(--atlas-brille-baand); }
.mascot-full .ma-goggle-glass, .mascot .ma-goggle-glass {
fill: var(--atlas-brille-glass);
}
.mascot-full .ma-goggle-bridge, .mascot .ma-goggle-bridge { fill: var(--atlas-brille-baand); }
.mascot-full .ma-goggle-sheen, .mascot .ma-goggle-sheen { fill: var(--bp-card); opacity: 0.75; }
/* v2: tegneserie-kontur — mørk strek m/ runde avslutninger på hovedformene */
.mascot-full .ma-line, .mascot .ma-line {
stroke: var(--atlas-kontur);
stroke-width: 0.95; /* godkjent runde 4-look; oppleves ~2,5–3px i topbar */
stroke-linejoin: round;
stroke-linecap: round;
}
.mascot-full .ma-aksent, .mascot .ma-aksent { fill: var(--atlas-aksent); }
.mascot-full .ma-shirt { fill: var(--atlas-skjorte); }
.mascot-full .ma-sleeve { fill: var(--atlas-skjorte-moerk); }
.mascot-full .ma-forearm { fill: var(--atlas-hud); }
.mascot-full .ma-hand { fill: var(--atlas-hud); }
.mascot-full .mf-vest { fill: var(--atlas-forkle); }
.mascot-full .ma-apron { fill: var(--atlas-forkle); }
.mascot-full .ma-pocket { fill: var(--atlas-forkle-moerk); }
.mascot-full .ma-strap { fill: var(--atlas-stropp); }
.mascot-full .ma-pants { fill: var(--atlas-bukse); }
.mascot-full .mf-boot { fill: var(--atlas-stovler); }
.mascot-full .ma-hammer-skaft { fill: var(--atlas-bukse); }
.mascot-full .ma-hammer-hode { fill: var(--atlas-brille-baand); }
/* ---- Scrollbar/fokus på blå canvas ---- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ---- Hero-preview demo-kontroller (kun /static/hero-preview.html) ---- */
.hero-demo {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--space-2);
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--bp-card);
border: 1.5px solid var(--bp-frame-outer);
box-shadow: 0 0 0 4px var(--bp-blue), 0 0 0 5px var(--bp-frame-inner), var(--shadow-lg);
z-index: var(--z-toast);
}
.hero-demo__label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--bp-blue-800);
font-weight: 700;
}
.hero-demo button {
font-family: var(--font-mono);
font-size: 12px;
padding: 6px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--bp-line-strong);
background: var(--bp-panel);
color: var(--bp-ink);
cursor: pointer;
}
.hero-demo button:hover { border-color: var(--bp-blue-accent); color: var(--bp-blue-800); }
/* Mengde i NOBB-linja på benk-kort (fra mengdemotoren der den finnes) */
.product-nobb__qty { color: var(--bp-buy); font-weight: 700; }
/* B4: tommel-ikoner (SVG, aldri emoji) + B3: tydelig dempet CTA/plukk ved 0 */
.picklist-button:disabled {
opacity: 1;
color: var(--bp-on-blue-muted);
border-color: var(--bp-frame-inner);
cursor: default;
}
.picklist-button:disabled .pick-badge { opacity: 0.75; }
.bench-cta:disabled {
/* Rettepass 2026-07-14 (brukerutpekt): den gule flaten ved 0 varer leste
som uthevet firkant — deaktivert = nøytral flate; gul KUN når aktiv. */
background: var(--bp-card);
color: var(--bp-ink-2);
border: 1px solid var(--bp-hairline);
opacity: 1;
cursor: default;
}
.empty-state__atlas-line {
font-size: 12.5px;
color: var(--bp-ink-2);
margin-top: var(--space-2);
}
/* ============================================================
DETALJARK (mikropass detaljark) — delt ProductDetail-komponent
for «Vis detaljer» på benk-kort og skann-treff (v4 §3).
Bottom sheet: overlay → CLS 0 for kortlisten by construction.
Kun transform/opacity animeres; reduced-motion nuller alt.
============================================================ */
/* Kortets tilleggsrad — ADDITIV under låst anatomi (rettepass 4 urørt) */
.bench-card__more-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 2px;
padding-top: 4px;
border-top: 1px solid var(--bp-hairline-soft);
}
.bench-card__variants {
font-family: var(--font-mono);
font-size: 11px;
color: var(--bp-blue-800);
background: var(--bp-blue-50);
border: 1px solid var(--bp-hairline-soft);
border-radius: 999px;
padding: 1px 8px;
}
.bench-card__more {
display: inline-flex;
align-items: center;
gap: 4px;
border: 0;
background: none;
font: inherit;
font-size: 12px;
color: var(--bp-blue-800);
cursor: pointer;
padding: 2px 4px;
}
.bench-card__more:hover,
.bench-card__more:focus-visible { text-decoration: underline; }
.bench-card__more .detail-chevron { width: 10px; height: 10px; transition: transform 150ms; }
.bench-card__more[aria-expanded="true"] .detail-chevron { transform: rotate(180deg); }
/* Backdrop + ark */
.detail-backdrop {
position: fixed;
inset: 0;
background: var(--bp-scrim);
opacity: 0;
transition: opacity 180ms ease;
z-index: 60;
}
.detail-backdrop.is-open { opacity: 1; }
.product-detail {
position: fixed;
left: 50%;
bottom: 0;
width: min(560px, 100vw - 16px);
max-height: min(78vh, 640px);
overflow-y: auto;
background: var(--bp-card); /* ALL lesetekst på hvit flate */
color: var(--bp-ink);
border: 1px solid var(--bp-hairline-soft);
border-bottom: 0;
border-radius: 10px 10px 0 0;
box-shadow: var(--bp-sheet-shadow);
padding: 14px 16px 16px;
z-index: 61;
transform: translate(-50%, 100%);
opacity: 0;
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}
.product-detail.is-open { transform: translate(-50%, 0); opacity: 1; }
.product-detail__head {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 12px;
align-items: start;
}
.product-detail__thumb {
width: 96px;
height: 96px;
border: 1px solid var(--bp-hairline-soft);
border-radius: 8px;
display: grid;
place-items: center;
overflow: hidden;
background: var(--bp-card);
}
.product-detail__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__thumb svg { width: 64px; height: 64px; }
/* fallback-streken arver .thumb-sketch (aksentblå) — lys-blå varianten
var nesten usynlig i den store hvite boksen («tomt bilde»-funnet) */
.product-detail__thumb .thumb-sketch { stroke-width: 1.2; }
.product-detail__name { font-size: 15px; line-height: 1.3; margin: 0 0 4px; }
.product-detail__nobb {
font-family: var(--font-mono);
font-size: 12px;
color: var(--bp-blue-800);
margin: 0;
}
.product-detail__close {
border: 1px solid var(--bp-hairline-soft);
background: var(--bp-card);
color: var(--bp-ink);
border-radius: 8px;
width: 32px;
height: 32px;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.product-detail__close:focus-visible { outline: 2px solid var(--bp-blue-accent); }
.product-detail__why {
margin: 10px 0 0;
font-size: 12.5px;
color: var(--bp-blue-800);
background: var(--bp-blue-50);
border-left: 3px solid var(--bp-blue-accent);
padding: 6px 10px;
border-radius: 0 6px 6px 0;
}
.product-detail__variants { margin-top: 12px; }
.product-detail__variants-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bp-blue-800);
margin: 0 0 6px;
}
.product-detail__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.variant-pill {
font-family: var(--font-mono); /* måledata = mono */
font-size: 12px;
border: 1px solid var(--bp-blue-300);
background: var(--bp-card);
color: var(--bp-ink);
border-radius: 999px;
padding: 4px 10px;
cursor: pointer;
}
.variant-pill--active {
background: var(--bp-blue-accent);
border-color: var(--bp-blue-accent);
color: var(--bp-card);
}
.variant-pill:focus-visible { outline: 2px solid var(--bp-blue-accent); outline-offset: 1px; }
.product-detail__specs {
margin: 12px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px 16px;
}
.product-detail__specs div { border-top: 1px solid var(--bp-hairline-soft); padding-top: 6px; }
.product-detail__specs dt {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bp-blue-800);
}
.product-detail__specs dd {
margin: 2px 0 0;
font-family: var(--font-mono);
font-size: 12.5px;
}
.product-detail__docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.doc-chip {
font-family: var(--font-mono);
font-size: 11px;
border: 1px solid var(--bp-hairline-soft);
background: var(--bp-blue-50);
color: var(--bp-blue-800);
border-radius: 6px;
padding: 3px 8px;
text-decoration: none;
}
a.doc-chip:hover, a.doc-chip:focus-visible { border-color: var(--bp-blue-accent); text-decoration: underline; }
.product-detail__foot { margin-top: 14px; }
.product-detail__pick {
/* plukkliste-CTA → signalgul (gul-regelen: CTA er tillatt bruk) */
width: 100%;
border: 0;
border-radius: 8px;
background: var(--sig-yellow);
color: var(--sig-yellow-ink);
font: inherit;
font-weight: 600;
font-size: 14px;
padding: 10px 14px;
cursor: pointer;
}
.product-detail__pick.is-picked {
background: var(--bp-card);
border: 1px solid var(--bp-blue-accent);
color: var(--bp-blue-800);
}
.product-detail__pick:focus-visible { outline: 2px solid var(--bp-blue-accent); outline-offset: 2px; }
.product-detail__error { margin: 0; font-size: 13px; }
/* Skeleton — opacity-puls (motion-regelen: aldri layout-animasjon) */
.product-detail__skeleton { display: grid; gap: 10px; }
.skel {
display: block;
background: var(--bp-blue-50);
border-radius: 6px;
animation: skel-pulse 1.1s ease-in-out infinite;
}
.skel--thumb { width: 96px; height: 96px; }
.skel--line { height: 14px; width: 80%; }
.skel--short { width: 45%; }
.skel--pills { height: 28px; width: 65%; }
@keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
.product-detail,
.detail-backdrop,
.bench-card__more .detail-chevron { transition: none; }
.skel { animation: none; }
}