/* VigVag · UX refinement, 24.10.2026
   Scoped to notifications, public request timeline and Sales.
   Purpose: readable 320–430px mobile layouts without changing app logic. */

/* Shared sizing / typography on work surfaces */
.vv08-center,
.vvcr-wrap,
.vv10-sales-panel,
.vvs-main,
.vvs-workspace,
.vvs-panel { min-width:0; }

.vv08-center *, .vvcr-wrap *, .vv10-sales-panel *,
.vvs-panel *, .vvs-panel *::before, .vvs-panel *::after {
  box-sizing:border-box;
}
.vv08-stream-item, .vv08-stream-content,
.vv08-stream-top, .vv08-stream-actions,
.vv10-sales-panel, .vv10-events, .vv10-event,
.vv10-event-top, .vvs-panelhead,
.vvs-panelhead > *, .vvs-chip {
  min-width:0;
}
.vv08-stream-top strong, .vv08-stream-text,
.vv10-event p, .vv10-event-top *,
.vv10-sales-panel p, .vvs-panel h2,
.vvs-panel h3, .vvs-panel h4, .vvs-help,
.vvs-result, .vvs-listrow,
.vvcr-card, .vvcr-card p, .vvcr-card strong {
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

/* Notification center */
.vv08-center {
  --vvux-line:#e3e9f2;
  --vvux-navy:#192b43;
  --vvux-muted:#647891;
  width:100%;
  max-width:980px;
}
.vv08-titlebar {
  gap:12px 18px;
  align-items:flex-start;
  margin:8px 0 20px;
}
.vv08-titlebar h1,.vv08-titlebar h2 {
  color:var(--vvux-navy);
  font-weight:820;
  letter-spacing:-.035em;
  line-height:1.12;
}
.vv08-titlebar p {
  color:var(--vvux-muted);
  line-height:1.5;
  font-weight:450;
}
.vv08-mark-all {
  min-height:44px;
  padding:10px 15px;
  border-radius:14px;
  color:#2364bb;
  background:#fff;
  border:1px solid #dbe5f2;
  transition:background .15s ease,transform .15s ease;
}
.vv08-mark-all:not(:disabled):active { transform:scale(.985);background:#eff5ff; }
.vv08-mark-all:disabled { opacity:.54; background:#f4f6fa;color:#71859c; }
.vv08-stream {gap:13px}
.vv08-stream-item {
  width:100%;
  max-width:100%;
  border-radius:20px;
  border:1px solid var(--vvux-line);
  background:#fff;
  box-shadow:0 5px 18px rgba(27,48,75,.055);
  padding:18px;
  gap:13px;
  transition:box-shadow .16s,border-color .16s;
}
.vv08-stream-item.unread {background:#fffef9;border-color:#eedfae}
.vv08-stream-icon {
  flex:0 0 46px;
  width:46px;height:46px;
  border-radius:15px;
  background:#edf3fd;
  color:#2067ce;
  font-size:21px;
}
.vv08-stream-content {flex:1;min-width:0;gap:8px}
.vv08-stream-top {
  display:flex;gap:7px 10px;
  align-items:center;flex-wrap:wrap;
}
.vv08-stream-top strong {
  flex:1 1 170px;
  color:#172c44;
  font-size:16px;
  font-weight:790;
  line-height:1.32;
  letter-spacing:-.013em;
}
.vv08-type-tag {
  flex:0 0 auto;
  max-width:100%;
  font-size:11px;
  line-height:1.4;
  border-radius:999px;
  background:#edf2f8;
  color:#506580;
  padding:5px 10px;
  white-space:normal;
}
.vv08-stream-text {
  font-size:14px;line-height:1.55;
  color:#5d7088;
  white-space:normal;
}
.vv08-stream-time {font-size:12px;color:#8a9bad}
.vv08-stream-actions {gap:10px}
.vv08-stream-open {
  min-height:43px;
  border-radius:12px;
  background:#eaf2ff;
  color:#195eb9;
  padding:10px 16px;
  font-size:14px;
  font-weight:750;
  max-width:100%;
  text-align:center;
  white-space:normal;
}
.vv08-stream-open:active{background:#dceaff}
.vv08-stream-read{min-height:42px}

/* Sales detail headings — do not put a 240px badge beside a 160px heading. */
.vvs-panelhead{
  gap:10px 14px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.vvs-panelhead h2,.vvs-panelhead h3 {
  flex:1 1 180px;
  min-width:0;
  margin-top:0;
  line-height:1.25;
  letter-spacing:-.018em;
}
.vvs-panelhead .vvs-chip {
  max-width:100%;
  flex:0 1 auto;
  white-space:normal;
  line-height:1.4;
  overflow-wrap:anywhere;
  text-align:center;
}
.vv10-sales-panel,.vvs-panel {
  max-width:100%;
}
.vv10-sales-panel .vvs-help,.vv10-sales-panel p {
  font-size:14px;
  line-height:1.58;
}
.vv10-events{gap:10px;margin:14px 0}
.vv10-event {
  max-width:100%;
  border:1px solid #e2e9f2;
  border-radius:15px;
  background:#f7f9fc;
  padding:16px;
}
.vv10-event-top {
  align-items:flex-start;
  gap:8px;
}
.vv10-event-top b,.vv10-event-top strong {
  font-size:15px;
  line-height:1.35;
  font-weight:760;
}
.vv10-event p {font-size:15px;line-height:1.58}
.vv10-event time {font-size:12px;white-space:normal}
.vv10-sales-form details,.vv10-sales-panel details {
  max-width:100%;
}
.vv10-sales-panel textarea,.vv10-sales-panel input,.vv10-sales-panel select,
.vvs-panel textarea,.vvs-panel input,.vvs-panel select {
  max-width:100%;
  min-width:0;
}
.vvs-panel .vvi06-editor summary, .vv10-sales-panel summary {
  border-radius:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

/* Request and offer cards */
.vvcr-section,.vvs-panel {
  border-color:#e1e8f1;
  box-shadow:0 4px 18px rgba(20,40,65,.035);
}
.vvs-panel a,.vvcr-section a {
  overflow-wrap:anywhere;
}
.vv5-head {
  min-width:0;
  align-items:flex-start;
}
.vv5-head>*{min-width:0;max-width:100%}
.vv4-table {width:100%;font-variant-numeric:tabular-nums}
.vv4-table td,.vv4-table th {overflow-wrap:anywhere}
.vv4-form textarea,.vv5-form textarea {line-height:1.5}

@media (max-width:620px) {
  .vv08-center {padding:10px 0 calc(126px + env(safe-area-inset-bottom,0px))}
  .vv08-titlebar {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-items:start;
    margin:10px 0 18px;
    gap:16px;
  }
  .vv08-titlebar h1,.vv08-titlebar h2{font-size:clamp(25px,6.2vw,29px)}
  .vv08-titlebar p {font-size:14px;margin-top:9px}
  .vv08-mark-all {font-size:13px}
  .vv08-stream-item {padding:16px 14px;gap:11px;border-radius:18px}
  .vv08-stream-icon {width:42px;height:42px;flex-basis:42px;border-radius:14px}
  .vv08-stream-top {align-items:flex-start}
  .vv08-stream-top strong {flex-basis:100%;font-size:15.5px}
  .vv08-type-tag {font-size:11px}
  .vv08-stream-text {font-size:13.5px}
  .vv08-stream-open {width:max-content;font-size:13.5px;min-height:43px}
  .vvs-panelhead{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .vvs-panelhead h2,.vvs-panelhead h3{
    width:100%;
    max-width:100%;
    flex:0 1 auto;
    margin:0;
    font-size:clamp(17px,4.4vw,21px);
  }
  .vvs-panelhead .vvs-chip{
    display:inline-flex;
    width:fit-content;
    max-width:100%;
    align-self:flex-start;
    font-size:11px;
    white-space:normal;
  }
  .vv10-sales-panel .vv10-event{padding:15px 13px}
  .vv10-sales-panel .vv10-event p{font-size:14.5px}
  .vv10-sales-panel .vvs-help {font-size:13.5px}
  .vv10-sales-panel .vv10-sales-form label {font-size:13px}
  .vvs-panel {min-width:0}
  .vvs-panel .vvs-form {max-width:100%}
  .vv5-head{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .vv5-head a{width:fit-content}
}
@media (max-width:355px) {
  .vv08-stream-item{padding:13px 11px;gap:9px}
  .vv08-stream-icon{flex-basis:38px;width:38px;height:38px}
  .vv08-stream-top strong{font-size:14.5px}
  .vv08-stream-text{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .vv08-stream-item,.vv08-mark-all{transition:none}
}

/* Anchor offset for in-app navigation from RFQ notifications. */
#vv5-workflow,#vv4-commercial,#vv10-public-history{scroll-margin-top:104px}

/* Compact mobile create button: slightly smaller and 5px higher. */
@media (max-width:760px) {
  .pwa2-fab {
    width:50px;
    height:50px;
    bottom:calc(31px + env(safe-area-inset-bottom,0px));
    border-width:4px;
    font-size:27px;
    line-height:1;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
  }
}


/* In-place actions: non-blocking save/error toast and anchor offsets. */
.vv-nav-toast{
  position:fixed;
  bottom:calc(98px + env(safe-area-inset-bottom, 0px));
  left:50%;
  transform:translateX(-50%);
  z-index:1100;
  width:max-content;
  max-width:calc(100vw - 28px);
  background:#203349;
  color:#fff;
  padding:12px 17px;
  border-radius:13px;
  font:600 14px/1.45 system-ui,-apple-system,Arial,sans-serif;
  box-shadow:0 9px 24px rgba(15,32,52,.22);
  text-align:center;
  overflow-wrap:anywhere;
}
.vv-nav-toast.is-error{background:#963b39}
.vv-nav-toast[hidden]{display:none!important}
.vvs-app[aria-busy="true"] button[aria-busy="true"]{opacity:.65;cursor:wait}
#main-sales,.vvs-panel[id],.vv08-center[id]{scroll-margin-top:82px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* Mobile shortcuts: always show map; staff also sees workspace selector */
.pwa3-top-shortcuts{display:flex;align-items:center;gap:8px;margin-left:auto}.pwa3-top-shortcuts .pwa2-top-action{flex:0 0 40px;font-size:19px}