/* BOT VIỆT AI V1.0.270 — Inbox Reference Lock
   Scope: .inbox-v267 only.
   Desktop reference canvas: 1672 × 941 screenshots supplied by the user.
   No backend, route, credit logic, sidebar, or other module styles are changed. */

.inbox-v267{
  --v270-cyan:#24d6ff;
  --v270-blue:#2787ff;
  --v270-violet:#a755ff;
  --v270-green:#20d99a;
  --v270-amber:#ffbd36;
  --v270-line:rgba(56,132,210,.54);
  --v270-panel:rgba(8,31,55,.96);
}

/* Right rail is intentionally a vertical stack; only the two bottom cards share a row. */
.inbox-v267 .inbox-ops-info-scroll{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:unset!important;
  gap:8px!important;
  min-width:0!important;
  min-height:0!important;
  padding:8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable;
}
.inbox-v267 .inbox-ops-info-scroll > *{
  grid-column:auto!important;
  min-width:0!important;
  flex:0 0 auto;
}
.inbox-v267 .inbox-ops-side-bottom{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%;
}
.inbox-v267 .inbox-ops-side-bottom > *{
  min-width:0!important;
  height:100%;
}

/* Composer never lets controls push the center column wider than its grid track. */
.inbox-v267 .inbox-ops-compose-row,
.inbox-v267 .inbox-ops-compose-row > *,
.inbox-v267 .inbox-ops-compose-row textarea{
  min-width:0!important;
}
.inbox-v267 .inbox-ops-compose-row textarea{
  width:100%!important;
  line-height:1.42!important;
}
.inbox-v267 .inbox-composer-live{
  overflow:hidden!important;
}

/* Continuous operational motion. */
.inbox-v267 .inbox-ops-live-dot,
.inbox-v267 .inbox-ops-stability i,
.inbox-v267 .inbox-ops-ai-ready i,
.inbox-v267 .inbox-ops-selected-dot,
.inbox-v267 .inbox-ops-running i{
  animation:v270-live-pulse 1.35s ease-in-out infinite!important;
}
.inbox-v267 .inbox-ops-sparkline polyline{
  stroke-dasharray:128;
  stroke-dashoffset:0;
  animation:v270-spark-run 2.8s ease-in-out infinite!important;
}
.inbox-v267 .inbox-ops-system-card::after{
  transform-origin:70% 70%;
  animation:v270-wave-float 2.6s ease-in-out infinite!important;
}
.inbox-v267 .inbox-ops-channel-tab.active{
  animation:v270-active-tab 2.2s ease-in-out infinite!important;
}
.inbox-v267 .inbox-ops-send{
  animation:v270-send-glow 1.8s ease-in-out infinite!important;
}
.inbox-v267 .inbox-ops-script-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.inbox-v267 .inbox-ops-script-btn::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-45% auto -45% -34%;
  width:26%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:v270-button-sheen 3.4s ease-in-out infinite;
}
.inbox-v267 .inbox-ops-system-card::before,
.inbox-v267 .inbox-ops-metric-card::before{
  animation:v270-border-scan 3.2s linear infinite;
}

@keyframes v270-live-pulse{
  0%,100%{opacity:1;transform:scale(1);filter:brightness(1)}
  50%{opacity:.46;transform:scale(.74);filter:brightness(1.35)}
}
@keyframes v270-spark-run{
  0%{stroke-dashoffset:128;opacity:.5}
  45%,100%{stroke-dashoffset:0;opacity:1}
}
@keyframes v270-wave-float{
  0%,100%{transform:translate3d(0,0,0);opacity:.48}
  50%{transform:translate3d(-7px,-2px,0);opacity:.82}
}
@keyframes v270-active-tab{
  0%,100%{filter:brightness(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px color-mix(in srgb,var(--ops-accent) 18%,transparent),0 7px 18px rgba(0,0,0,.18)}
  50%{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--ops-accent) 36%,transparent),0 0 22px color-mix(in srgb,var(--ops-accent) 24%,transparent)}
}
@keyframes v270-send-glow{
  0%,100%{filter:brightness(1);box-shadow:0 10px 24px rgba(36,90,208,.28),inset 0 1px 0 rgba(255,255,255,.16)}
  50%{filter:brightness(1.12);box-shadow:0 0 26px color-mix(in srgb,var(--ops-accent) 44%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
}
@keyframes v270-button-sheen{
  0%,58%{left:-34%;opacity:0}
  68%{opacity:.92}
  84%,100%{left:118%;opacity:0}
}
@keyframes v270-border-scan{
  0%{opacity:.2;transform:translateX(-42%)}
  45%,55%{opacity:.9}
  100%{opacity:.2;transform:translateX(42%)}
}

/* Exact desktop lock for screenshots 3–6.
   Combined with the app's existing 16px content gutter:
   x = 26px, inner width = 1620px at a 1672px viewport.
   Vertical rows: 12/56/12/67/7/89/10/85/9/572/22 = 941px. */
@media (min-width:1421px){
  .inbox-v267{
    display:grid!important;
    gap:0!important;
    min-width:0!important;
    padding:12px 10px 22px!important;
    background:
      radial-gradient(920px 250px at 30% 0%,rgba(24,126,255,.14),transparent 62%),
      radial-gradient(760px 260px at 78% 0%,rgba(102,72,255,.13),transparent 64%),
      linear-gradient(180deg,#041526 0%,#03101e 100%)!important;
  }

  .inbox-v267::before{
    background-size:22px 22px!important;
    opacity:.27!important;
    animation:v270-grid-drift 16s linear infinite;
  }

  .inbox-v267 .inbox-ops-header{
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:0 2px!important;
    display:grid!important;
    grid-template-columns:minmax(370px,1fr) auto!important;
    align-items:center!important;
    gap:18px!important;
  }
  .inbox-v267 .inbox-ops-heading{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .inbox-v267 .inbox-ops-heading h1{
    font-size:34px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:-.045em!important;
  }
  .inbox-v267 .inbox-ops-heading p{
    margin-top:5px!important;
    font-size:13px!important;
    line-height:1.1!important;
  }
  .inbox-v267 .inbox-ops-stability{
    min-height:28px!important;
    padding:0 12px!important;
    font-size:10px!important;
  }
  .inbox-v267 .inbox-ops-header-actions{
    gap:12px!important;
    flex-wrap:nowrap!important;
  }
  .inbox-v267 .inbox-ops-channel-tabs{
    min-height:50px!important;
    gap:5px!important;
    padding:4px!important;
    border-radius:13px!important;
  }
  .inbox-v267 .inbox-ops-channel-tab{
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    gap:8px!important;
    border-radius:9px!important;
  }
  .inbox-v267 .inbox-ops-channel-tab .inbox-platform-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
  .inbox-v267 .inbox-ops-channel-tab span:last-child{
    font-size:11px!important;
  }
  .inbox-v267 .inbox-ops-script-btn{
    min-width:258px!important;
    height:50px!important;
    min-height:50px!important;
    padding-inline:20px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }

  .inbox-v267 .credit-cost-box{
    height:67px!important;
    min-height:67px!important;
    margin:12px 0 0!important;
    padding:7px 13px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:14px!important;
    border-radius:14px!important;
  }
  .inbox-v267 .credit-cost-icon{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    border-radius:12px!important;
  }
  .inbox-v267 .credit-cost-icon>span{font-size:15px!important}
  .inbox-v267 .credit-cost-head small{font-size:10px!important}
  .inbox-v267 .credit-cost-head b{font-size:17px!important}
  .inbox-v267 .credit-cost-meta{
    gap:16px!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
  .inbox-v267 .credit-cost-note{font-size:10px!important}

  .inbox-v267 .inbox-ops-system-grid{
    height:89px!important;
    min-height:89px!important;
    margin-top:7px!important;
    gap:10px!important;
  }
  .inbox-v267 .inbox-ops-metric-grid{
    height:85px!important;
    min-height:85px!important;
    margin-top:10px!important;
    gap:10px!important;
  }
  .inbox-v267 .inbox-ops-system-card{
    height:89px!important;
    min-height:89px!important;
    padding:11px 14px!important;
    border-radius:13px!important;
  }
  .inbox-v267 .inbox-ops-metric-card{
    height:85px!important;
    min-height:85px!important;
    padding:11px 14px!important;
    border-radius:13px!important;
  }
  .inbox-v267 .inbox-ops-system-icon,
  .inbox-v267 .inbox-ops-metric-icon{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    border-radius:13px!important;
  }
  .inbox-v267 .inbox-ops-system-copy small,
  .inbox-v267 .inbox-ops-metric-copy small{font-size:11px!important}
  .inbox-v267 .inbox-ops-system-copy b{
    font-size:19px!important;
    line-height:1.08!important;
  }
  .inbox-v267 .inbox-ops-system-copy em{font-size:10px!important}
  .inbox-v267 .inbox-ops-metric-copy b{
    font-size:29px!important;
    line-height:1!important;
  }
  .inbox-v267 .inbox-ops-metric-copy span.up,
  .inbox-v267 .inbox-ops-metric-copy span.down{
    font-size:11px!important;
    margin-left:7px!important;
  }
  .inbox-v267 .inbox-ops-sparkline{
    width:108px!important;
    height:34px!important;
    right:10px!important;
    bottom:7px!important;
  }
  .inbox-v267 .inbox-ops-live-dot{
    right:13px!important;
    top:12px!important;
    width:10px!important;
    height:10px!important;
  }

  .inbox-v267 .inbox-ops-workspace{
    height:572px!important;
    min-height:572px!important;
    max-height:572px!important;
    margin-top:9px!important;
    grid-template-columns:24.9% 49% 26.1%!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .inbox-v267 .inbox-ops-mailbox,
  .inbox-v267 .inbox-ops-thread,
  .inbox-v267 .inbox-ops-info{
    height:570px!important;
    min-height:0!important;
    max-height:570px!important;
  }

  .inbox-v267 .inbox-ops-mailbox > .inbox-ops-column-title,
  .inbox-v267 .inbox-ops-info > .inbox-ops-column-title{
    height:50px!important;
    min-height:50px!important;
    padding:0 13px!important;
  }
  .inbox-v267 .inbox-ops-column-title span{
    font-size:19px!important;
  }
  .inbox-v267 .inbox-ops-column-title small{
    font-size:10px!important;
    margin-top:1px!important;
  }
  .inbox-v267 .inbox-ops-column-title b{
    min-width:40px!important;
    height:29px!important;
    font-size:12px!important;
  }

  .inbox-v267 .inbox-ops-search{
    padding:8px 10px 7px!important;
    gap:8px!important;
  }
  .inbox-v267 .inbox-ops-search .inbox-search-input,
  .inbox-v267 .inbox-filter-icon{
    height:40px!important;
    min-height:40px!important;
    border-radius:10px!important;
  }
  .inbox-v267 .inbox-filter-icon{
    width:40px!important;
  }
  .inbox-v267 .inbox-ops-status-tabs{
    height:43px!important;
    min-height:43px!important;
    gap:5px!important;
    padding:0 10px 8px!important;
  }
  .inbox-v267 .inbox-status-tabs button{
    height:35px!important;
    min-height:35px!important;
    padding:0 8px!important;
    border-radius:9px!important;
    font-size:9px!important;
  }
  .inbox-v267 .inbox-status-tabs em{
    min-width:18px!important;
    height:18px!important;
    font-size:8px!important;
  }
  .inbox-v267 .inbox-conversation-list{
    padding:0 8px 8px!important;
  }
  .inbox-v267 .inbox-conversation-item{
    min-height:76px!important;
    margin-bottom:6px!important;
    padding:9px 10px!important;
    gap:10px!important;
    border-radius:12px!important;
  }
  .inbox-v267 .inbox-conversation-avatar .inbox-avatar-fallback{
    width:48px!important;
    height:48px!important;
    font-size:24px!important;
  }
  .inbox-v267 .inbox-conversation-head strong{
    font-size:12px!important;
  }
  .inbox-v267 .inbox-conversation-head span,
  .inbox-v267 .inbox-conversation-body p{
    font-size:10px!important;
  }
  .inbox-v267 .inbox-status-pill,
  .inbox-v267 .inbox-reply-state{
    min-height:20px!important;
    padding:0 7px!important;
    font-size:8px!important;
  }

  .inbox-v267 .inbox-ops-thread{
    grid-template-rows:70px minmax(0,1fr) auto!important;
  }
  .inbox-v267 .inbox-ops-thread-head{
    height:70px!important;
    min-height:70px!important;
    padding:0 15px!important;
  }
  .inbox-v267 .inbox-thread-avatar .inbox-avatar-fallback{
    width:46px!important;
    height:46px!important;
  }
  .inbox-v267 .inbox-thread-profile strong{
    font-size:17px!important;
  }
  .inbox-v267 .inbox-thread-profile small{
    font-size:10px!important;
  }
  .inbox-v267 .inbox-thread-actions{gap:7px!important}
  .inbox-v267 .icon-btn{
    width:36px!important;
    height:36px!important;
  }
  .inbox-v267 .btn.small,
  .inbox-v267 .inbox-ops-handoff{
    min-height:36px!important;
    padding:0 13px!important;
    font-size:10px!important;
  }
  .inbox-v267 .inbox-message-scroll{
    padding:12px 16px 10px!important;
  }
  .inbox-v267 .inbox-ops-day-separator{
    margin:1px 0 10px!important;
  }
  .inbox-v267 .inbox-ops-day-separator span{
    min-height:29px!important;
    padding:0 15px!important;
    font-size:10px!important;
  }
  .inbox-v267 .inbox-message-row{
    margin-bottom:9px!important;
    gap:9px!important;
  }
  .inbox-v267 .inbox-message-bubble{
    max-width:min(78%,420px)!important;
    padding:12px 14px 10px!important;
    border-radius:14px!important;
  }
  .inbox-v267 .inbox-message-bubble p{
    font-size:11px!important;
    line-height:1.42!important;
  }
  .inbox-v267 .inbox-message-bubble small{
    margin-top:6px!important;
    font-size:9px!important;
  }

  .inbox-v267 .inbox-composer-live{
    margin:0 13px 13px!important;
    border-radius:13px!important;
  }
  .inbox-v267 .inbox-ops-compose-row{
    grid-template-columns:36px 36px 36px minmax(0,1fr) auto 52px!important;
    align-items:center!important;
    gap:9px!important;
    padding:10px!important;
  }
  .inbox-v267 .inbox-ops-compose-tool{
    width:36px!important;
    height:36px!important;
  }
  .inbox-v267 .inbox-ops-compose-row textarea{
    min-height:42px!important;
    max-height:92px!important;
    padding:11px 13px!important;
    font-size:10px!important;
  }
  .inbox-v267 .inbox-ops-ai-ready{
    min-height:36px!important;
    padding:0 13px!important;
    font-size:10px!important;
  }
  .inbox-v267 .inbox-ops-send{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    border-radius:12px!important;
  }

  .inbox-v267 .inbox-ops-info-scroll{
    height:520px!important;
    min-height:0!important;
    padding:8px!important;
    gap:7px!important;
  }
  .inbox-v267 .inbox-ops-side-card{
    padding:9px!important;
    border-radius:11px!important;
  }
  .inbox-v267 .inbox-ops-profile-top{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
  }
  .inbox-v267 .inbox-ops-profile-avatar .inbox-avatar-fallback,
  .inbox-v267 .inbox-ops-profile-avatar{
    width:50px!important;
    height:50px!important;
    font-size:24px!important;
  }
  .inbox-v267 .inbox-ops-profile-top h3{
    margin:0 0 3px!important;
    font-size:12px!important;
  }
  .inbox-v267 .inbox-ops-profile-top span,
  .inbox-v267 .inbox-ops-profile-top small,
  .inbox-v267 .inbox-ops-profile-top em{
    font-size:8px!important;
    line-height:1.35!important;
  }
  .inbox-v267 .inbox-ops-profile-card select{
    min-height:33px!important;
    height:33px!important;
    margin-top:7px!important;
    font-size:9px!important;
  }
  .inbox-v267 .inbox-section-head{
    margin-bottom:6px!important;
    gap:7px!important;
    align-items:center!important;
  }
  .inbox-v267 .inbox-section-head strong{
    font-size:10px!important;
  }
  .inbox-v267 .inbox-section-head span,
  .inbox-v267 .inbox-side-empty,
  .inbox-v267 .inbox-note-copy{
    font-size:8px!important;
    line-height:1.42!important;
  }
  .inbox-v267 .inbox-ops-side-icon{
    width:27px!important;
    height:27px!important;
  }
  .inbox-v267 .inbox-section-head .btn.tiny{
    min-height:27px!important;
    padding:0 8px!important;
    font-size:8px!important;
  }
  .inbox-v267 .inbox-ops-order-item{
    margin-top:4px!important;
    padding:6px!important;
  }
  .inbox-v267 .inbox-ops-side-bottom{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .inbox-v267 .inbox-suggestions.inbox-ops-ai-card button{
    min-height:28px!important;
    margin-top:4px!important;
    padding:5px 7px!important;
    font-size:8px!important;
  }
  .inbox-v267 .inbox-setting-row{
    min-height:28px!important;
  }
  .inbox-v267 .inbox-setting-row span,
  .inbox-v267 .inbox-setting-row b{
    font-size:9px!important;
  }
  .inbox-v267 .inbox-settings-card small{
    margin-top:6px!important;
    font-size:7px!important;
  }
}

@keyframes v270-grid-drift{
  from{background-position:0 0,0 0}
  to{background-position:0 22px,22px 0}
}

/* Mid desktop: keep the same three-column geometry but let height grow naturally. */
@media (min-width:1181px) and (max-width:1420px){
  .inbox-v267{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .inbox-v267 .inbox-ops-workspace{
    grid-template-columns:25% 49% 26%!important;
    min-height:620px!important;
  }
  .inbox-v267 .inbox-ops-mailbox,
  .inbox-v267 .inbox-ops-thread,
  .inbox-v267 .inbox-ops-info{
    min-height:0!important;
  }
  .inbox-v267 .inbox-ops-info-toggle{
    display:none!important;
  }
  .inbox-v267 .inbox-ops-info{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .inbox-v267 .inbox-ops-info-scroll{
    display:flex!important;
    flex-direction:column!important;
  }
  .inbox-v267 .inbox-ops-side-bottom{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Existing tablet/mobile drawer behavior remains authoritative below 1180px. */
@media (max-width:1180px){
  .inbox-v267 .inbox-ops-info-scroll{
    display:flex!important;
    flex-direction:column!important;
  }
  .inbox-v267 .inbox-ops-side-bottom{
    grid-template-columns:1fr!important;
  }
  .inbox-v267 .inbox-composer-live{
    overflow:visible!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .inbox-v267 *,
  .inbox-v267 *::before,
  .inbox-v267 *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}