:root {
  /* Brand neutrals */
  --vw-bg:        hsl(210 8% 6%);    /* #0B0D0E-ish */
  --vw-surface:   hsl(210 8% 10%);
  --vw-elev:      hsl(210 8% 14%);
  --vw-text:      hsl(0 0% 98%);
  --vw-muted:     hsl(210 5% 64%);

  /* Brand accents */
  --vw-primary:   hsl(160, 72%, 42%);  /* Teal */
  --vw-secondary: hsl(210, 90%, 56%);  /* Azure */
  --vw-warm:      hsl(30 95% 55%);   /* Amber for highlights */

  /* Radii & shadows (rounded icons preference remembered) */
  --vw-radius: 16px;
  --vw-shadow: 0 8px 24px hsl(0 0% 0% / 0.28);
  --vw-orange:#fb8569;
  --vw-purple:#9b99ff;
  --vw-green:#f4fcc0;
  --vw-blue:#2a8ff4;
  --vw-magenta: #ff4d9a;  /* vivid magenta — pairs with blue */
  --vw-teal:    #14b8a6;  /* teal — complements orange */
  --vw-gold:    #f5b700;  /* gold — attention without harshness */
  --vw-lime:    #84cc16;  /* lime — fresh, distinct from your pale green */
  --vw-indigo:  #4f46e5;  /* deep indigo — balances the periwinkle */
}

.vw-gradient { background: linear-gradient(135deg,#232526 0%,#414345 100%); }
body {
    background: linear-gradient(135deg,#232526 0%,#414345 100%);;
    color:var(--vw-text)
}

.text-bg-orange {
    background-color: var(--vw-orange);
    color:#fff
}

.text-bg-purple {
    background-color: var(--vw-purple);
    color:#fff
}

.text-bg-blue {
    background-color: var(--vw-blue);
    color:#fff
}
.text-bg-green {
    background-color: var(--vw-green);
    color:var(--vw-bg)
}
.text-bg-magenta {
    background-color: var(--vw-magenta);
    color:var(--vw-bg)
}
.text-bg-teal {
    background-color: var(--vw-teal);
    color:var(--vw-bg)
}
.text-bg-gold {
    background-color: var(--vw-gold);
    color:var(--vw-bg)
}
.text-bg-lime {
    background-color: var(--vw-lime);
    color:var(--vw-bg)
}
.text-bg-indigo {
    background-color: var(--vw-indigo);
    color:var(--vw-bg)
}
.text-bg-body {
    background-color:transparent;
    color:#fff ;
    border: 1px dashed #a7a6a8
}


.whiteboard-grid {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.white-board-column {
    width:220px;
}
.wb-card {
    position: relative;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wb-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.wb-card:focus-within {
    outline: 2px dashed rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

/* Reduced motion: straighten cards */
@media (prefers-reduced-motion: reduce) {
    .wb-card {
        transform: none !important;
    }
}



.message+.message {
    margin-top: 1rem
}

@media (min-width: 992px) {
    .message+.message {
        margin-top:1.5rem
    }
}

.message-divider {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center
}

@media (min-width: 992px) {
    .message-divider {
        margin-top:2rem;
        margin-bottom: 2rem
    }
}

.message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.message.message-out {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}



.message-out .message-inner {
    margin-left: 0;
}



.message-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.message-content+.message-content {
    margin-top: .75rem
}

.message-out .message-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.message-gallery,.message-text {
    overflow: hidden;
    margin-right: .25rem
}

.message-out .message-gallery,.message-out .message-text {
    margin-left: .25rem;
    margin-right: 0
}

.message-text {
    background: var(--vw-bg);
    border-radius:  .6rem .6rem .6rem 0 ;
    padding: 1rem 1.25rem;
    color: #fff
}

.message-out .message-text {
    background:var(--vw-surface);
    border-radius: .6rem .6rem 0 .6rem;
    color: #a7a6a8
}

.message-content:not(:last-child) .message-text {
    border-bottom-left-radius: .25rem
}

.message-out .message-content:not(:last-child) .message-text {
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .25rem
}

.message-content:not(:first-child) .message-text {
    border-top-left-radius: .15rem
}

.message-out .message-content:not(:first-child) .message-text {
    border-top-left-radius: .6rem;
    border-top-right-radius: .15rem
}

.message-footer {
    line-height: 1.3;
    margin-top: .25rem
}

.message-out .message-footer {
    text-align: right
}

.message-inner {
    max-width: 100%;
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media (min-width: 992px) {
    .message-inner {
        max-width:70%
    }
}

@media (min-width: 1200px) {
    .message-inner {
        max-width:50%
    }
}

@media (min-width: 1440px) {
    .message-inner {
        max-width:45%
    }
}