/* VYNNY_UI_UX_R3_2_1_CONSOLIDATED_BEGIN */
/*
  VYNNY UI/UX contract layer.
  Scope: server-delivered Web + VYNNY Internal UI only.
  No auth/session/access/voice/provider/API/database semantics.
  Loaded last in index.html and desktop.html.
*/
:root{
  --vynny-r32-bg:#050709;
  --vynny-r32-surface:#090c10;
  --vynny-r32-panel:#11151b;
  --vynny-r32-panel2:#151a20;
  --vynny-r32-line:#2b3441;
  --vynny-r32-text:#f5f7fa;
  --vynny-r32-muted:#a9b3bf;
  --vynny-r32-red:#c42750;
  --vynny-r32-gap:10px;
  --vynny-r32-float-right:18px;
  --vynny-r32-proof-bottom:18px;
  --vynny-r32-voice-bottom:78px;
}

/* ---------- canonical dark shell ---------- */
html,body,
.app-shell,#appShell,
.workspace,#workspace,
main,.main,.main-content,.content-shell{
  background:var(--vynny-r32-bg)!important;
  color:var(--vynny-r32-text)!important;
}
.sidebar,#sidebar,
.topbar,header.topbar,
.sidebar-bottom,.mobile-nav{
  background:var(--vynny-r32-surface)!important;
  color:var(--vynny-r32-text)!important;
  border-color:var(--vynny-r32-line)!important;
}
.topbar .search-box,.search-box,
.topbar input,#globalSearch{
  background:#11151a!important;
  color:var(--vynny-r32-text)!important;
  border-color:#303844!important;
  box-shadow:none!important;
}
.topbar input::placeholder,#globalSearch::placeholder{color:#8994a1!important;opacity:1!important}

/* ---------- text safety ---------- */
#workspace h1,#workspace h2,#workspace h3,#workspace h4,
.workspace h1,.workspace h2,.workspace h3,.workspace h4,
#workspace strong,.workspace strong,
#workspace label,.workspace label{color:var(--vynny-r32-text)!important;max-width:100%;overflow-wrap:anywhere;word-break:normal}
#workspace p,#workspace small,#workspace .muted,
.workspace p,.workspace small,.workspace .muted{color:var(--vynny-r32-muted)!important;max-width:100%;overflow-wrap:anywhere;word-break:normal}
#workspace span,.workspace span{max-width:100%}

/* ---------- cards / panels / forms ---------- */
#workspace .card,.workspace .card,
#workspace .panel,.workspace .panel,
.modal,.drawer,.profile-menu,.toast,
#workspace .kpi,.workspace .kpi,
#workspace .dcc-r2-program-card,.workspace .dcc-r2-program-card{
  background:linear-gradient(180deg,#151a20 0%,#101419 100%)!important;
  color:var(--vynny-r32-text)!important;
  border-color:#303844!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
#workspace input,#workspace select,#workspace textarea,
.workspace input,.workspace select,.workspace textarea,
.modal input,.modal select,.modal textarea,
.drawer input,.drawer select,.drawer textarea{
  min-width:0!important;
  max-width:100%!important;
  background:#0d1116!important;
  color:var(--vynny-r32-text)!important;
  border-color:#343d49!important;
  box-sizing:border-box!important;
}
#workspace input::placeholder,#workspace textarea::placeholder,
.workspace input::placeholder,.workspace textarea::placeholder{color:#7f8995!important;opacity:1!important}

/* ---------- buttons: content-driven, never clip ---------- */
#workspace .btn,.workspace .btn,
.modal .btn,.drawer .btn,
#workspace button.btn,.workspace button.btn{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:38px!important;
  max-height:none!important;
  padding:9px 14px!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.2!important;
  text-align:center!important;
}
#workspace .btn.primary,.workspace .btn.primary{background:var(--vynny-r32-red)!important;border-color:var(--vynny-r32-red)!important;color:#fff!important}
#workspace .btn:not(.primary),.workspace .btn:not(.primary),.modal .btn,.drawer .btn{background:#181d23!important;border-color:#39434f!important;color:#fff!important}

/* Every action group owns spacing and wrapping. */
.page-head,.page-head>* ,.page-actions,.row-actions,.actions,
.card-head,.drawer-actions,.modal-actions,.creative-tool-actions,
.integration-actions,.directory-actions,.dashboard-action-card,
.dashboard-action-card>*{
  min-width:0!important;
  box-sizing:border-box!important;
}
.page-actions,.row-actions,.actions,.drawer-actions,.modal-actions,
.creative-tool-actions,.integration-actions,
.dashboard-action-card .row-actions,.dashboard-action-card .actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:var(--vynny-r32-gap)!important;
}
.page-actions>*,.row-actions>*,.actions>*,.drawer-actions>*,.modal-actions>*,
.creative-tool-actions>*,.integration-actions>*{margin:0!important}
.page-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important}
.page-head>div:first-child{flex:1 1 340px!important;min-width:0!important}
.page-head .page-actions{flex:0 1 auto!important;justify-content:flex-end!important;max-width:100%!important}

/* Admin and directory action columns: remove legacy rigid button boxes. */
#adminUserBody tr>td:last-child,
#adminDeviceBody tr>td:last-child,
#channelDirectoryBody td.directory-actions{
  width:auto!important;
  min-width:220px!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
}
#adminUserBody tr>td:last-child .btn,#adminUserBody tr>td:last-child button,
#adminDeviceBody tr>td:last-child .btn,#adminDeviceBody tr>td:last-child button,
#channelDirectoryBody td.directory-actions>.btn{
  width:auto!important;
  min-width:104px!important;
  max-width:100%!important;
  height:auto!important;
  min-height:36px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  margin:4px!important;
}

/* ---------- tables: do not crush text/buttons ---------- */
.table-wrap,.table-scroll,.directory-table-wrap,.data-table-wrap,
#workspace .table-container,.workspace .table-container{
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch;
}
#workspace table,.workspace table{max-width:100%;border-collapse:collapse}
#workspace th,#workspace td,.workspace th,.workspace td{white-space:normal!important;overflow-wrap:anywhere!important;vertical-align:top}

/* ---------- content-driven banners / heroes ---------- */
.creative-hero,.brand-context-bar,.vynny-klaviyo-cockpit,
.magic-r30-hero,.result-preview-r12,.proof-user-polish-r3 .proof-metric-card,
.vynny-assistant-r31 .vynny-r31-chat,.vynny-assistant-r31 .vynny-r31-voice,
.internal-human-studio-header,.human-v2-own-request{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.creative-hero,.brand-context-bar,.vynny-klaviyo-cockpit,.magic-r30-hero{max-width:100%!important}
.brand-context-bar span:not(.status):not(.tag),.vgd-account-badge,.system-name span{
  width:auto!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important
}

/* ---------- responsive grids ---------- */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;gap:12px!important}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;gap:12px!important}
.creative-tool-grid,.creative-tool-grid.full{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;gap:12px!important}
.dcc-r2-program-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;gap:12px!important}
.dcc-r2-kpis{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:10px!important}
.dcc-r2-program-card{min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important}
.dcc-r2-program-card.active{border-color:var(--vynny-r32-red)!important}

/* ---------- R31 assistant sizing ---------- */
.vynny-assistant-r31{grid-template-columns:minmax(0,1fr) minmax(240px,320px)!important;gap:14px!important;align-items:start!important}
.vynny-assistant-r31 .vynny-r31-chat{min-height:clamp(360px,52vh,680px)!important}
.vynny-r31-compose{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:end!important}
.vynny-r31-compose textarea{height:auto!important;min-height:48px!important;max-height:180px!important;resize:vertical!important}
.vynny-r31-compose .btn{height:auto!important;min-height:48px!important}
.vynny-r31-voice .jarvis-orb{width:clamp(92px,10vw,128px)!important;height:clamp(92px,10vw,128px)!important}
.vynny-r31-voice .voice-settings-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important}
.vynny-r31-voice .voice-settings-grid input,.vynny-r31-voice .voice-settings-grid select{height:auto!important;min-height:40px!important}
.vynny-r31-safety{background:#17120f!important;color:#e6d2bd!important;overflow:visible!important;height:auto!important}

/* ---------- floating controls: one coordinated dock ---------- */
.vynny-proof-launcher-r2{
  right:var(--vynny-r32-float-right)!important;
  bottom:var(--vynny-r32-proof-bottom)!important;
  width:auto!important;min-width:118px!important;max-width:calc(100vw - 36px)!important;
  height:auto!important;min-height:44px!important;
}
#r18GlobalVoice,.r18-global-voice{
  right:var(--vynny-r32-float-right)!important;
  bottom:var(--vynny-r32-voice-bottom)!important;
  width:auto!important;max-width:min(360px,calc(100vw - 36px))!important;
}
#r18GlobalVoice .r18-global-voice-button,.r18-global-voice .r18-global-voice-button{
  width:auto!important;min-width:190px!important;max-width:100%!important;
  height:auto!important;min-height:46px!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
#r18GlobalVoice[data-stage="ready"] .r18-global-voice-popover,
.r18-global-voice[data-stage="ready"] .r18-global-voice-popover{display:none!important}
#r18GlobalVoice:not([data-stage="ready"]) .r18-global-voice-popover,
.r18-global-voice:not([data-stage="ready"]) .r18-global-voice-popover{
  right:0!important;left:auto!important;bottom:56px!important;top:auto!important;
  width:min(340px,calc(100vw - 36px))!important;max-width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;
}
.toast-stack{right:18px!important;bottom:146px!important;max-width:min(360px,calc(100vw - 36px))!important}
.profile-menu{right:18px!important;max-width:min(340px,calc(100vw - 36px))!important}
#workspace,.workspace{padding-bottom:max(120px,env(safe-area-inset-bottom))!important;scroll-padding-bottom:150px!important}

/* ---------- footer: canonical rights line is allowed to wrap ---------- */
.sidebar-bottom .copyright{color:#788491!important;font-size:8px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;padding:8px 10px 4px!important}

/* ---------- zoom/narrow width behavior ---------- */
@media(max-width:1180px){
  .page-head .page-actions{flex:1 1 100%!important;justify-content:flex-start!important}
  .page-head .page-actions>.btn{flex:1 1 160px!important}
  .vynny-assistant-r31{grid-template-columns:1fr!important}
  .vynny-assistant-r31 .vynny-r31-voice{width:100%!important}
}
@media(max-width:900px){
  .page-actions>.btn,.row-actions>.btn,.actions>.btn,.drawer-actions>.btn,.modal-actions>.btn{flex:1 1 140px!important}
  #adminUserBody tr>td:last-child,#adminDeviceBody tr>td:last-child,#channelDirectoryBody td.directory-actions{min-width:180px!important}
  #r18GlobalVoice .r18-global-voice-button,.r18-global-voice .r18-global-voice-button{min-width:150px!important}
}
@media(max-width:680px){
  .page-actions,.row-actions,.actions,.drawer-actions,.modal-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .page-actions>.btn,.row-actions>.btn,.actions>.btn,.drawer-actions>.btn,.modal-actions>.btn{width:100%!important}
  .dcc-r2-program-grid,.dcc-r2-kpis,.grid.two,.grid.three,.creative-tool-grid,.creative-tool-grid.full{grid-template-columns:1fr!important}
  #r18GlobalVoice,.r18-global-voice{right:12px!important;bottom:72px!important;max-width:calc(100vw - 24px)!important}
  .vynny-proof-launcher-r2{right:12px!important;bottom:12px!important;max-width:calc(100vw - 24px)!important}
  .toast-stack{right:12px!important;bottom:132px!important;max-width:calc(100vw - 24px)!important}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* VYNNY_UI_UX_R3_2_1_CONSOLIDATED_END */