/* /public/styles/project-view.css */
*, *::before, *::after { box-sizing: border-box; }

.project-page { 
    max-width: var(--sm-container); 
    margin: 0 auto; 
    padding: 28px 24px 48px; 
}

.title-row { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: 24px; 
    align-items: end; 
    margin-bottom: 20px; 
}

.title-row__left { display: flex; flex-direction: column; gap: 8px; }
.title-row__label { display: flex; align-items: center; gap: 12px; }

.title-row__meta { 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    margin-top: 6px; 
    font-family: var(--sm-font-mono); 
    font-size: 12px; 
    color: var(--sm-grey-text); 
    letter-spacing: 0.6px; 
}

.title-row__meta .dot { 
    display: inline-block; 
    width: 4px; 
    height: 4px; 
    background: var(--sm-grey-mid); 
    border-radius: 50%; 
    margin: 0 -4px; 
}

.title-row__meta .status { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    color: var(--sm-navy); 
}

.title-row__meta .status::before { 
    content: ''; 
    width: 6px; 
    height: 6px; 
    border-radius: 50%; 
    background: var(--sm-accent); 
    animation: uk-pulse 2s infinite; 
}

h1.proj-title { 
    font-family: var(--sm-font-display); 
    font-size: clamp(28px, 3vw, 38px); 
    line-height: 1; 
    margin: 0; 
    letter-spacing: -0.3px; 
}

.top-actions { display: flex; gap: 8px; align-items: center; }

.theme-toggle { 
    display: inline-flex; 
    background: #fff; 
    border: 1px solid var(--sm-grey-light); 
    border-radius: 20px; 
    padding: 3px; 
}

.theme-toggle button { 
    font-family: var(--sm-font-body); 
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: 0.4px; 
    padding: 6px 14px; 
    border: none; 
    background: transparent; 
    color: var(--sm-grey-text); 
    border-radius: 18px; 
    cursor: pointer; 
    transition: background var(--sm-ease), color var(--sm-ease); 
}

.theme-toggle button.active { background: var(--sm-navy); color: #fff; }

.icon-btn { 
    width: 38px; height: 38px; 
    display: inline-flex; align-items: center; justify-content: center; 
    background: #fff; border: 1px solid var(--sm-grey-light); 
    border-radius: var(--sm-radius); cursor: pointer; color: var(--sm-navy); 
    transition: all var(--sm-ease); 
}

.icon-btn:hover { background: var(--sm-off-white); border-color: var(--sm-navy-light); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.toolbar { 
    background: #fff; 
    border: 1px solid rgba(0,0,0,0.125); 
    border-radius: var(--sm-radius-md) var(--sm-radius-md) 0 0; 
    border-bottom: none; 
    padding: 12px 14px; 
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center; 
}

.toolbar__group { display: flex; align-items: center; gap: 6px; }
.toolbar__group + .toolbar__group { border-left: 1px solid var(--sm-grey-light); padding-left: 18px; }
.toolbar__label { font-family: var(--sm-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sm-grey-mid); margin-right: 4px; }

.tb-btn { 
    font-family: var(--sm-font-body); 
    font-size: 12px; font-weight: 700; 
    padding: 7px 11px; background: transparent; border: 1px solid transparent; 
    border-radius: var(--sm-radius-sm); color: var(--sm-navy); 
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; 
    transition: all var(--sm-ease); white-space: nowrap; 
}

.tb-btn:hover { background: var(--sm-off-white); }
.tb-btn.active { background: var(--sm-navy); color: #fff; border-color: var(--sm-navy); }
.tb-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none !important; stroke-width: 1.6; }

.bg-swatches { display: inline-flex; gap: 4px; align-items: center; }
.bg-swatches button { width: 26px; height: 26px; border: 1.5px solid var(--sm-grey-light); border-radius: var(--sm-radius-sm); cursor: pointer; padding: 0; transition: all var(--sm-ease); }
.bg-swatches button.active { border-color: var(--sm-accent); box-shadow: 0 0 0 2px rgba(212,160,0,0.2); }
.bg-swatches button[data-bg="cad"] { background: #0d1f33; }
.bg-swatches button[data-bg="dark"] { background: linear-gradient(135deg, #1a242e, #2a3d54); }
.bg-swatches button[data-bg="light"] { background: linear-gradient(135deg, #f5f7fa, #e8edf3); }
.bg-swatches button[data-bg="studio"] { background: radial-gradient(circle at 30% 30%, #fff, #c5cdd6 80%); }

.viewport-wrap { 
    background: #0d1f33; 
    border: 1px solid rgba(0,0,0,0.125); 
    border-radius: 0 0 var(--sm-radius-md) var(--sm-radius-md); 
    position: relative; overflow: hidden; height: 640px; 
    box-shadow: var(--sm-shadow); 
}

.viewport-wrap.fullscreen { position: fixed; inset: 0; height: 100vh; width: 100vw; max-width: none; border-radius: 0; z-index: 9999; }
#canvas3d { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

.vp-grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(91,175,232,0.07) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(91,175,232,0.07) 40px); opacity: 0; transition: opacity var(--sm-ease); }
.vp-grid.show { opacity: 1; }

.vp-corner { position: absolute; pointer-events: none; font-family: var(--sm-font-mono); font-size: 10px; letter-spacing: 1.4px; color: rgba(255,255,255,0.55); }
.vp-corner--tl { top: 14px; left: 16px; }
.vp-corner--tr { top: 14px; right: 16px; text-align: right; }
.vp-corner--bl { bottom: 16px; left: 16px; display: flex; align-items: flex-end; gap: 12px; }
.vp-corner--br { bottom: 16px; right: 16px; text-align: right; }
.vp-corner__line { display: block; line-height: 1.45; }
.vp-corner__line strong { color: #fed049; font-weight: 700; }

.vp-ucs { width: 48px; height: 48px; }
.vp-scale { display: flex; flex-direction: column; gap: 6px; font-size: 9px; letter-spacing: 1px; }
.vp-scale__bar { display: flex; height: 10px; border: 1px solid rgba(255,255,255,0.4); width: 120px; }
.vp-scale__bar span { flex: 1; border-right: 1px solid rgba(255,255,255,0.4); }
.vp-scale__bar span:nth-child(odd) { background: rgba(255,255,255,0.25); }

.vp-zoom { 
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%); 
    display: flex; flex-direction: column; background: rgba(13,31,51,0.75); 
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); 
    border-radius: var(--sm-radius); overflow: hidden; z-index: 5; 
}
.vp-zoom button { width: 38px; height: 38px; background: transparent; border: none; color: rgba(255,255,255,0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vp-zoom button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vp-zoom button + button { border-top: 1px solid rgba(255,255,255,0.1); }
.vp-zoom svg {
  fill: none !important;
  stroke: currentColor;
}

.vp-hints { 
    position: absolute; left: 18px; bottom: 80px; background: rgba(13,31,51,0.75); 
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); 
    border-radius: var(--sm-radius); padding: 10px 12px; color: rgba(255,255,255,0.78); 
    font-size: 11px; line-height: 1.7; display: flex; flex-direction: column; z-index: 5; transition: opacity var(--sm-ease); 
}
.vp-hints.hidden { opacity: 0; pointer-events: none; }
.vp-hints .kb { display: inline-block; font-family: var(--sm-font-mono); background: rgba(255,255,255,0.12); border-radius: 2px; padding: 1px 5px; margin-right: 6px; color: #fed049; }
.vp-hints__close { position: absolute; right: 6px; top: 4px; background: transparent; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 14px; }

.vp-dims { 
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); 
    display: none; gap: 14px; background: rgba(13,31,51,0.85); 
    border: 1px solid rgba(255,200,80,0.5); border-radius: var(--sm-radius); 
    padding: 8px 14px; color: #fff; font-family: var(--sm-font-mono); font-size: 12px; z-index: 5; 
}
.vp-dims.show { display: inline-flex; }
.vp-dims b { color: #fed049; }

.vp-loader { position: absolute; inset: 0; background: #0d1f33; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; z-index: 20; transition: opacity 0.6s var(--sm-ease); }
.vp-loader.gone { opacity: 0; pointer-events: none; }
.vp-loader__progress { font-family: var(--sm-font-display); font-size: 28px; font-weight: 700; color: #fed049; }
.vp-loader__svg { width: 200px; height: 140px; }

.no-model { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 16px; color: rgba(255,255,255,0.55); font-family: var(--sm-font-mono); }
.no-model svg { width: 48px; height: 48px; stroke: rgba(255,255,255,0.3); fill: none; }

.tips { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--sm-grey-text); }
.tips__chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--sm-grey-light); border-radius: var(--sm-radius); padding: 6px 10px; }
.tips__chip svg {
  fill: none !important;
  stroke: var(--sm-navy);
}
.tips__chip svg {
    width: 20px;  /* или 24px, как тебе больше нравится */
    height: 20px;
    min-width: 20px; /* чтобы flex не сжимал иконку */
    margin-right: 4px;
    flex-shrink: 0;
}

/* Если хочешь, чтобы иконка восклицательного знака была чуть жирнее */
.tips__chip svg circle[r="0.5"] {
    r: 1px; /* делаем точку внизу заметнее */
}

/* Исправляем перенос ссылки Telegram */
.tips__chip a {
    color: var(--sm-navy);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(59, 84, 115, 0.2);
    transition: all var(--sm-ease);
}

.tips__chip a:hover {
    border-bottom-color: var(--sm-navy);
    color: var(--sm-accent);
}

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a242e; color: #fff; padding: 12px 20px; border-radius: var(--sm-radius); opacity: 0; transition: all 0.25s ease; z-index: 10000; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.qr-modal { position: fixed; inset: 0; background: rgba(13,31,51,0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 10001; }
.qr-modal.show { display: flex; }
.qr-modal__card { background: #fff; border-radius: var(--sm-radius-md); padding: 32px; max-width: 360px; width: 100%; text-align: center; position: relative; }

/* THEME: MINIMAL OVERRIDES */
body[data-theme="minimal"] .toolbar { background: #fafbfc; border-color: var(--sm-grey-light); }
body[data-theme="minimal"] .viewport-wrap { background: #eef1f5; border-color: var(--sm-grey-light); }
body[data-theme="minimal"] .vp-zoom, body[data-theme="minimal"] .vp-hints { background: rgba(255,255,255,0.9); border-color: var(--sm-grey-light); color: var(--sm-grey-text); }
body[data-theme="minimal"] .vp-zoom button { color: var(--sm-navy); }

/* RESPONSIVE */
@media (max-width: 900px) {
    .title-row { grid-template-columns: 1fr; }
    .viewport-wrap { height: 520px; }
}
@media (max-width: 720px) {
    .viewport-wrap { height: 440px; }
    /*
    .toolbar { flex-direction: column; align-items: stretch; gap: 0; }
    .toolbar__group + .toolbar__group { border-left: none; border-top: 1px solid var(--sm-grey-light); }
    */
    .toolbar {
        flex-direction: row;              /* ✅ обратно в строку */
        flex-wrap: nowrap;                /* ✅ запрещаем перенос */
        overflow-x: auto;                 /* ✅ включаем скролл */
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 10px;
    }

    .toolbar__group {
        flex: 0 0 auto;                  /* ✅ не сжимаются */
        border: none !important;
        padding: 0 !important;
    }

    .toolbar__group + .toolbar__group {
        border-left: none;
    }

    .toolbar__label {
        display: none;                   /* ✅ как в оригинале */
    }

    .tb-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ---- VP LOADER SVG ANIMATION ---- */
.vp-loader__svg .dim {
  stroke: rgba(91,175,232,0.3);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 4;
}

.vp-loader__svg .draw {
  stroke: #5bafe8;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: vp-draw 2s ease forwards infinite;
}

.vp-loader__svg .dot {
  fill: #fed049;
  stroke: none;
}

@keyframes vp-draw {
  0%   { stroke-dashoffset: 300; opacity: 0.4; }
  60%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0.6; }
}

.vp-loader__title {
  font-family: var(--sm-font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.vp-loader__sub {
  font-family: var(--sm-font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: rgba(91,175,232,0.5);
  text-transform: uppercase;
}