139 lines
77 KiB
CSS
139 lines
77 KiB
CSS
@import "tailwindcss";
|
|
@source "../../templates/**/*.html";
|
|
@source "../js/**/*.js";
|
|
@font-face{font-family:Vazirmatn;src:url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}@font-face{font-family:Vazirmatn;src:url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
|
|
@theme{--font-sans:Vazirmatn,ui-sans-serif,system-ui;--color-ink:#08376b;--color-ink-soft:#0b4c8c;--color-cream:#eeeeee;--color-soft:#eaeaea;--color-paper:#ffffff;--color-sea:#0693e3;--color-sea-dark:#1977ce;--color-blue:#1977ce;--color-mint:#e5f4ff;--color-coral:#fa9f00;--color-sun:#ffc451;--shadow-panel:0 18px 55px -35px rgba(8,55,107,.35);--shadow-lift:0 22px 55px -28px rgba(6,147,227,.42)}
|
|
:root{--color-ink:#08376b;--color-ink-soft:#0b4c8c;--color-cream:#eeeeee;--color-soft:#eaeaea;--color-paper:#ffffff;--color-sea:#0693e3;--color-sea-dark:#1977ce;--color-blue:#1977ce;--color-mint:#e5f4ff;--color-coral:#fa9f00;--color-sun:#ffc451;--theme-thread:#eaeaea;--theme-own-message:#dcefff;--theme-note:#fff1d5;--shadow-panel:0 18px 55px -35px rgba(8,55,107,.35);--shadow-lift:0 22px 55px -28px rgba(6,147,227,.42)}
|
|
@layer base{*{@apply box-border}html{@apply scroll-smooth}body{@apply m-0 min-h-screen bg-cream font-sans text-ink antialiased}button,a,input,textarea,select{@apply focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-sea/20}a{@apply transition}h1{@apply text-[1.7rem] font-black leading-tight tracking-tight sm:text-4xl}h2{@apply text-xl font-extrabold leading-tight}h3{@apply text-base font-extrabold}p{@apply leading-7}label{@apply mb-2 block text-sm font-bold}input:not([type=checkbox]):not([type=radio]),textarea,select{@apply w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-base shadow-sm transition placeholder:text-slate-400 hover:border-sea/30 focus:border-sea focus:ring-4 focus:ring-sea/10 sm:text-sm}textarea{@apply min-h-36 resize-y}button,.button{@apply inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-ink px-5 py-3 text-sm font-extrabold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-sea-dark hover:shadow-lift disabled:pointer-events-none disabled:opacity-50}form p{@apply mb-5}.errorlist{@apply mb-2 list-none rounded-xl bg-red-50 px-3 py-2 text-xs font-bold text-red-700}}
|
|
@layer components{
|
|
.site-header{@apply sticky top-0 z-40 border-b border-ink/5 bg-cream/90 backdrop-blur-xl}.header-inner{@apply mx-auto flex h-17 max-w-7xl items-center justify-between px-4 sm:px-7}.logo{@apply flex items-center gap-3 text-ink}.logo-mark{@apply grid size-10 place-items-center rounded-[14px] bg-ink text-lg font-black text-white}.logo-copy{@apply font-black}.logo-copy small{@apply block text-[9px] font-medium tracking-wide text-ink/50}.desktop-nav{@apply hidden items-center gap-1 sm:flex}.desktop-nav a{@apply rounded-xl px-3 py-2 text-sm font-bold text-ink/65 hover:bg-white hover:text-sea}.desktop-nav .logout{@apply text-coral}.customer-main{@apply mx-auto w-full max-w-6xl px-4 pb-28 pt-6 sm:px-7 sm:pb-12 sm:pt-10}.mobile-dock{@apply fixed inset-x-3 bottom-3 z-50 grid grid-cols-3 rounded-[22px] border border-white/80 bg-ink/95 p-1.5 shadow-2xl backdrop-blur-xl sm:hidden}.mobile-dock a{@apply flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-2xl text-[10px] font-bold text-white/60}.mobile-dock a.primary{@apply bg-sea text-white}.dock-icon{@apply text-base}
|
|
.staff-shell{@apply min-h-screen lg:grid lg:grid-cols-[250px_1fr]}.staff-sidebar{@apply hidden bg-ink p-5 text-white lg:flex lg:min-h-screen lg:flex-col lg:justify-between}.staff-brand{@apply mb-10 flex items-center gap-3}.staff-brand .logo-mark{@apply bg-sea}.staff-brand small{@apply block text-xs text-white/45}.staff-menu{@apply grid gap-1.5}.staff-menu a{@apply flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-bold text-white/60 hover:bg-white/8 hover:text-white}.staff-menu a.active{@apply bg-sea text-white}.staff-profile{@apply rounded-2xl bg-white/7 p-4}.staff-profile strong{@apply block text-sm}.staff-profile span{@apply text-xs text-white/45}.staff-main{@apply min-w-0}.staff-topbar{@apply sticky top-0 z-30 flex h-17 items-center justify-between border-b border-ink/5 bg-cream/90 px-4 backdrop-blur-xl sm:px-7}.staff-topbar h2{@apply text-base}.staff-topbar-actions{@apply flex items-center gap-2}.staff-topbar a{@apply rounded-xl px-3 py-2 text-xs font-bold text-ink/60 hover:bg-white}.staff-content{@apply mx-auto max-w-[1500px] px-4 pb-24 pt-6 sm:px-7 lg:pb-10}.staff-mobile-dock{@apply fixed inset-x-3 bottom-3 z-50 grid grid-cols-3 rounded-[22px] bg-ink p-1.5 text-white shadow-2xl lg:hidden}.staff-mobile-dock a{@apply flex min-h-12 flex-col items-center justify-center text-[10px] font-bold text-white/60}.staff-mobile-dock a.active{@apply rounded-2xl bg-sea text-white}
|
|
.page-kicker{@apply mb-2 text-xs font-black tracking-wider text-sea}.page-head{@apply mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between}.page-head p{@apply mt-2 max-w-xl text-sm text-ink/55}.back-link{@apply inline-flex items-center gap-2 text-xs font-extrabold text-sea}.card{@apply rounded-[26px] border border-ink/7 bg-paper p-5 shadow-panel sm:p-6}.button.secondary,button.secondary{@apply border border-ink/10 bg-paper text-ink shadow-none hover:border-sea/30 hover:bg-mint}.button.coral,button.coral{@apply bg-coral}.muted{@apply text-sm text-ink/50}.flash{@apply mb-5 rounded-2xl border border-sea/15 bg-mint px-4 py-3 text-sm font-bold text-sea-dark}.flash.error{@apply border-red-200 bg-red-50 text-red-700}.flash.success{@apply border-emerald-200 bg-emerald-50 text-emerald-800}
|
|
.hero-panel{@apply relative mb-7 overflow-hidden rounded-[30px] bg-ink px-5 py-7 text-white sm:px-8 sm:py-9}.hero-panel:after{@apply absolute -left-14 -top-20 size-52 rounded-full bg-sea/45 content-['']}.hero-panel>*{@apply relative z-10}.hero-panel .page-kicker{@apply text-mint}.hero-panel h1{@apply max-w-xl}.hero-panel p{@apply mt-3 max-w-lg text-sm text-white/55}.hero-actions{@apply mt-6 flex flex-col gap-2 sm:flex-row sm:flex-wrap}.hero-panel .hero-actions .button{@apply mt-0 shadow-none hover:shadow-none}.hero-panel .hero-history-button{@apply border border-white/25 bg-white/10 text-white backdrop-blur-sm hover:border-white/45 hover:bg-white/20}.hero-panel .hero-history-button span{@apply text-lg leading-none}.page-head#recent-requests{@apply scroll-mt-24}
|
|
.ticket-grid{@apply grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3}.ticket-card{@apply relative flex min-h-48 flex-col justify-between overflow-hidden rounded-[24px] border border-ink/7 bg-paper p-5 text-ink shadow-panel transition hover:-translate-y-1 hover:border-sea/25 hover:shadow-lift}.ticket-card:before{@apply absolute inset-y-0 right-0 w-1 bg-sea/0 transition content-['']}.ticket-card:hover:before{@apply bg-sea}.ticket-card-top{@apply flex items-start justify-between gap-3}.ticket-number{@apply font-mono text-[11px] font-bold tracking-wide text-ink/40}.ticket-card h2{@apply mt-4 line-clamp-2 text-lg}.ticket-meta{@apply mt-5 flex items-end justify-between gap-3 border-t border-ink/6 pt-4}.ticket-meta small{@apply block text-[11px] text-ink/45}.expert-line{@apply mt-1 text-xs font-bold text-ink/70}.badge{@apply inline-flex w-fit items-center gap-1.5 rounded-full bg-mint px-3 py-1 text-[11px] font-extrabold text-sea-dark}.badge:before{@apply size-1.5 rounded-full bg-sea content-['']}.priority-urgent{@apply bg-red-50 text-red-700}.priority-urgent:before{@apply bg-red-500}.priority-important{@apply bg-amber-50 text-amber-800}.priority-important:before{@apply bg-amber-500}.empty{@apply col-span-full rounded-[28px] border border-dashed border-ink/15 bg-paper/60 px-5 py-16 text-center}.empty-icon{@apply mx-auto mb-4 grid size-14 place-items-center rounded-full bg-mint text-2xl}.empty h2{@apply mb-2}.empty .button{@apply mt-5}
|
|
.request-layout{@apply grid gap-5 lg:grid-cols-[minmax(0,1fr)_300px]}.request-form{@apply order-2 lg:order-1}.request-aside{@apply order-1 lg:order-2}.step-title{@apply mb-5 flex items-center gap-3 border-b border-ink/6 pb-4}.step-number{@apply grid size-8 shrink-0 place-items-center rounded-full bg-ink text-xs font-black text-white}.field{@apply mb-5}.expert-picker{@apply mb-7 grid grid-cols-2 gap-2 border-0 p-0 sm:grid-cols-3}.expert-picker legend{@apply col-span-full mb-3 text-sm font-extrabold}.expert-card{@apply relative flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-[20px] border-2 border-ink/8 bg-white p-3 text-center transition hover:border-sea/30}.expert-card:has(input:checked){@apply border-sea bg-mint shadow-sm}.expert-card input{@apply absolute opacity-0}.expert-card img,.expert-avatar{@apply mb-2 grid size-14 place-items-center rounded-full bg-cream object-cover text-xl font-black text-sea}.expert-card strong{@apply text-xs}.expert-card small{@apply mt-1 text-[10px] text-ink/45}.expert-empty{@apply col-span-full}.upload-zone{@apply my-5 rounded-[22px] border-2 border-dashed border-ink/15 bg-cream/60 p-5 text-center transition hover:border-sea/40}.upload-zone>label{@apply cursor-pointer text-sm text-sea}.file-preview{@apply mt-3 grid grid-cols-2 gap-2 sm:grid-cols-3}.file-chip{@apply relative overflow-hidden rounded-xl border border-ink/8 bg-white p-2}.file-chip img{@apply h-24 w-full rounded-lg object-cover}.file-chip button{@apply absolute left-1 top-1 min-h-0 rounded-lg bg-coral px-2 py-0.5}.voice-recorder,.voice{@apply my-4 rounded-[22px] border border-sea/15 bg-mint/65 p-4}.voice-head,.voice-actions,.voice{@apply flex flex-wrap items-center gap-2}.voice-head{@apply justify-between}.voice-actions{@apply mt-3}.voice-actions button,.voice button{@apply min-h-10 rounded-xl px-3 py-2 text-xs}.ghost{@apply border border-coral/20 bg-white text-coral}.submit-ticket{@apply w-full bg-sea text-base}.help-card{@apply rounded-[26px] bg-ink p-6 text-white}.help-card h3{@apply text-white}.help-list{@apply mt-5 grid gap-4}.help-item{@apply flex gap-3 text-sm text-white/60}.help-item b{@apply grid size-7 shrink-0 place-items-center rounded-full bg-white/10 text-xs text-white}
|
|
.conversation-shell{@apply grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]}.conversation-column{@apply min-w-0}.conversation{@apply flex max-h-[62vh] min-h-72 flex-col gap-3 overflow-y-auto rounded-[26px] bg-[#e9e5dc] p-3 sm:p-5}.message{@apply w-fit max-w-[92%] rounded-[20px] rounded-tr-md bg-paper px-4 py-3 shadow-sm sm:max-w-[78%]}.message.mine{@apply mr-auto rounded-tr-[20px] rounded-tl-md bg-[#cfeee7]}.message.note{@apply max-w-full rounded-[20px] border border-dashed border-amber-400 bg-[#fff3ce]}.message header{@apply mb-1 flex justify-between gap-6 text-[10px]}.message header b{@apply text-ink/65}.message time{@apply text-ink/35}.message p{@apply break-words text-sm leading-7}.attachment{@apply mt-2 flex rounded-xl bg-white/70 px-3 py-2 text-xs font-bold text-sea}.message-actions{@apply mt-2 flex justify-end gap-2 text-[10px]}.message-actions details{@apply m-0}.composer{@apply mt-3 rounded-[26px] border border-ink/7 bg-paper p-4 shadow-panel sm:p-5}.composer textarea{@apply min-h-24 border-0 bg-cream/70 shadow-none}.mode{@apply mb-4 grid grid-cols-2 gap-1 rounded-2xl bg-cream p-1}.mode button{@apply min-h-10 bg-transparent text-ink/50 shadow-none hover:translate-y-0}.mode button.active{@apply bg-ink text-white}.mode button.note-button.active{@apply bg-amber-500 text-ink}.ticket-side{@apply grid gap-3 self-start lg:sticky lg:top-23}.info-card{@apply rounded-[22px] border border-ink/7 bg-paper p-5}.info-list{@apply mt-4 grid gap-3}.info-row{@apply flex items-start justify-between gap-3 border-b border-ink/5 pb-3 text-xs last:border-0 last:pb-0}.info-row span{@apply text-ink/45}.info-row b{@apply text-left}.history-item{@apply mt-2 flex flex-col gap-1 border-t border-ink/6 pt-3 text-xs}.grant{@apply mt-2 flex items-center justify-between gap-2 rounded-xl bg-cream p-2 text-xs}.danger-button{@apply min-h-9 bg-coral px-3 py-1.5}
|
|
.stats-grid{@apply mb-5 grid grid-cols-2 gap-2 lg:grid-cols-4}.stat-card{@apply rounded-[20px] border border-ink/6 bg-paper p-4}.stat-label{@apply text-[11px] font-bold text-ink/40}.stat-value{@apply mt-2 text-2xl font-black}.stat-card.alert .stat-value{@apply text-coral}.dashboard{@apply grid grid-cols-1 gap-4 xl:grid-cols-[270px_minmax(0,1fr)]}.filters{@apply self-start rounded-[24px] border border-ink/7 bg-paper p-4 xl:sticky xl:top-23}.filter-heading{@apply mb-4 flex items-center justify-between}.tabs{@apply mb-5 grid grid-cols-2 gap-1 border-b border-ink/6 pb-4}.tabs a{@apply rounded-xl px-3 py-2 text-[11px] font-bold text-ink/50 hover:bg-mint hover:text-sea-dark}.filter-form{@apply grid gap-3 sm:grid-cols-2 xl:grid-cols-1}.check{@apply flex min-h-11 items-center gap-2 rounded-xl bg-cream px-3}.check input{@apply size-4 accent-sea}.staff-list{@apply grid gap-2}.staff-ticket{@apply grid grid-cols-[1fr_auto] gap-4 rounded-[22px] border border-ink/7 bg-paper p-4 text-ink shadow-panel transition hover:border-sea/25 hover:shadow-lift sm:p-5}.staff-ticket-main{@apply min-w-0}.staff-ticket-head{@apply flex flex-wrap items-center gap-2}.staff-ticket h2{@apply mt-2 truncate text-base}.staff-ticket p{@apply mt-2 text-xs text-ink/50}.staff-ticket-side{@apply flex flex-col items-end justify-between gap-3}.staff-ticket-badges{@apply flex flex-wrap justify-end gap-1}.staff-layout{@apply grid gap-4 xl:grid-cols-[240px_minmax(0,1fr)_240px] xl:items-start}.staff-layout>aside{@apply grid gap-3 self-start xl:sticky xl:top-23}.staff-layout>div{@apply min-w-0}.staff-layout dl{@apply grid grid-cols-[auto_1fr] gap-2 text-xs}.staff-layout dt{@apply text-ink/45}.staff-layout dd{@apply m-0 text-left font-bold}.staff-layout aside form{@apply mt-3 border-t border-ink/6 pt-3}.staff-layout aside form button{@apply w-full}.staff-layout aside details{@apply rounded-xl border border-ink/8 p-3}.staff-layout aside summary{@apply cursor-pointer text-sm font-bold}
|
|
.auth-shell{@apply mx-auto grid min-h-[calc(100vh-9rem)] max-w-5xl items-center gap-8 lg:grid-cols-2}.auth-intro{@apply hidden lg:block}.auth-intro-icon{@apply mb-6 grid size-14 place-items-center rounded-[18px] bg-sea text-2xl text-white}.auth-intro h2{@apply text-5xl}.auth-intro p{@apply mt-4 max-w-md text-ink/55}.auth{@apply mx-auto w-full max-w-md p-6 sm:p-8}.auth form{@apply mt-6}.auth button{@apply w-full}.auth-links{@apply mt-6 flex justify-between gap-3 border-t border-ink/6 pt-5 text-xs font-bold}.eyebrow{@apply mb-2 text-[11px] font-black tracking-wider text-sea}
|
|
}
|
|
.conversation{background-color:var(--theme-thread)}.message.mine{background-color:var(--theme-own-message)}.message.note{background-color:var(--theme-note);border-color:var(--color-coral)}.hero-panel{border-bottom:4px solid var(--color-coral);background-image:linear-gradient(135deg,var(--color-ink),var(--color-ink-soft))}.submit-ticket{box-shadow:0 10px 30px -14px var(--color-sea)}.stats-grid .stat-card:nth-child(1) .stat-value{color:var(--color-sea)}.stats-grid .stat-card:nth-child(2){border-top:3px solid var(--color-sea-dark)}.stats-grid .stat-card:nth-child(3){background:var(--color-mint)}.stats-grid .stat-card:nth-child(4){border-top:3px solid var(--color-coral)}.ticket-card:nth-child(3n+2):before{background-color:var(--color-sea-dark)}.ticket-card:nth-child(3n):before{background-color:var(--color-coral)}.step-title:nth-of-type(2) .step-number{background:var(--color-sea-dark)}.help-card{border-top:4px solid var(--color-coral)}
|
|
|
|
/* Nexus-inspired operational rhythm, adapted for the Persian RTL product. */
|
|
.dashboard-hero{@apply relative mb-4 grid overflow-hidden rounded-[18px] bg-ink p-5 text-white shadow-panel sm:grid-cols-[1fr_auto] sm:items-end sm:p-7}.dashboard-hero:before{@apply pointer-events-none absolute -left-16 -top-24 size-64 rounded-full bg-sea/25 blur-2xl content-['']}.dashboard-hero:after{@apply pointer-events-none absolute bottom-0 right-0 h-1 w-1/3 bg-coral content-['']}.dashboard-hero-copy,.dashboard-signal{@apply relative z-10}.dashboard-overline{@apply mb-5 flex items-center gap-2 text-[10px] font-extrabold tracking-wider text-mint}.live-dot{@apply relative size-2 rounded-full bg-coral}.live-dot:after{@apply absolute inset-0 animate-ping rounded-full bg-coral content-['']}.dashboard-hero h1{@apply text-3xl sm:text-4xl}.dashboard-hero p{@apply mt-2 max-w-2xl text-sm text-white/55}.dashboard-signal{@apply mt-6 flex min-w-48 flex-col border-r border-white/15 pr-4 sm:mt-0}.dashboard-signal span,.dashboard-signal small{@apply text-[10px] text-white/45}.dashboard-signal strong{@apply my-1 text-sm text-white}
|
|
.stats-grid{@apply gap-2}.stat-card{@apply relative min-h-32 overflow-hidden rounded-[14px] p-4 shadow-none transition hover:-translate-y-0.5 hover:border-sea/25 hover:shadow-panel}.stat-card:after{@apply absolute -bottom-8 -left-8 size-20 rounded-full bg-sea/5 content-['']}.stat-head{@apply flex items-start justify-between}.metric-mark,.panel-index{@apply font-mono text-[9px] font-bold tracking-widest text-ink/25}.stat-value{@apply text-3xl leading-none}.stat-card small{@apply mt-3 block text-[10px] text-ink/40}.stats-grid .stat-card:nth-child(3){background:linear-gradient(145deg,var(--color-mint),var(--color-paper))}.stats-grid .stat-card:nth-child(4){background:linear-gradient(145deg,var(--theme-note),var(--color-paper))}
|
|
.dashboard{@apply gap-3 xl:grid-cols-[250px_minmax(0,1fr)]}.filters,.ticket-stream{@apply rounded-[16px] border border-ink/7 bg-paper shadow-panel}.filters{@apply p-4}.filter-heading{@apply items-start border-b border-ink/6 pb-4}.filter-heading h3,.stream-head h2{@apply mt-1 text-sm}.filter-heading a{@apply text-[10px] font-bold text-sea}.tabs{@apply grid-cols-1 gap-0.5}.tabs a{@apply flex min-h-9 items-center justify-between rounded-lg px-3 py-2}.tabs a:after{@apply text-ink/20 content-['←']}.filter-form label{@apply text-xs}.filter-form input,.filter-form select{@apply rounded-xl py-2.5}.ticket-stream{@apply min-w-0 overflow-hidden}.stream-head{@apply flex items-center justify-between border-b border-ink/7 px-4 py-4 sm:px-5}.stream-status{@apply flex items-center gap-2 rounded-full bg-mint px-3 py-1 text-[10px] font-extrabold text-sea-dark}.stream-status i{@apply size-1.5 rounded-full bg-sea}.ticket-stream .staff-list{@apply gap-0}.ticket-stream .staff-ticket{@apply rounded-none border-x-0 border-t-0 p-4 shadow-none last:border-b-0 hover:translate-y-0 hover:border-sea/20 hover:bg-mint/30 hover:shadow-none}.ticket-stream .staff-ticket h2{@apply text-sm}.ticket-stream .staff-ticket p{@apply mt-1}.ticket-stream .staff-ticket:before{@apply absolute right-0 top-0 h-full w-0 bg-sea transition-all content-['']}.ticket-stream .staff-ticket:hover:before{@apply w-1}
|
|
@media (prefers-reduced-motion:reduce){.live-dot:after{animation:none}.stat-card,.staff-ticket{transition:none}}
|
|
|
|
/* Focused ticket conversation workspace */
|
|
body:has(.ticket-workspace){overflow:hidden}.customer-main:has(.ticket-workspace),.staff-content:has(.ticket-workspace){max-width:none;padding:0}.ticket-workspace{height:calc(100dvh - 4.25rem);min-height:32rem;background:var(--color-soft);overflow:hidden}.ticket-workspace-head{@apply flex min-h-18 items-center justify-between gap-3 border-b border-ink/8 bg-paper px-3 py-2 sm:px-5}.ticket-title{@apply flex min-w-0 items-center gap-3}.ticket-title>div{@apply min-w-0}.ticket-title h1{@apply truncate text-base sm:text-xl}.workspace-back,.icon-button{@apply grid size-10 shrink-0 place-items-center rounded-xl border border-ink/8 bg-cream text-ink shadow-none transition hover:border-sea/30 hover:bg-mint}.ticket-head-actions{@apply flex shrink-0 items-center gap-2}.ticket-head-actions form{@apply m-0}.ticket-head-actions form button{@apply min-h-10 rounded-xl px-3 py-2}.workspace-grid{display:grid;height:calc(100% - 4.5rem);min-height:0}.customer-grid{grid-template-columns:minmax(0,1fr) 280px}.staff-conversation-grid{grid-template-columns:240px minmax(0,1fr) 240px}.conversation-pane{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;background:var(--color-paper);border-inline:1px solid rgba(8,55,107,.07)}.conversation-toolbar{@apply flex min-h-12 items-center justify-between border-b border-ink/6 bg-paper px-4}.conversation-toolbar>div{@apply flex items-center gap-2 text-xs}.conversation-toolbar small{@apply text-[10px] text-ink/40}
|
|
.ticket-workspace .conversation{display:block;max-height:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;border-radius:0;padding:1rem;background:linear-gradient(180deg,var(--color-soft),var(--color-cream));scrollbar-gutter:stable}.ticket-workspace .conversation:focus-visible{outline:3px solid color-mix(in srgb,var(--color-sea) 25%,transparent);outline-offset:-3px}.ticket-workspace .message{position:relative;display:flex;width:100%;max-width:none;gap:.625rem;border-radius:0;background:transparent;padding:0;box-shadow:none;margin:.65rem 0}.ticket-workspace .message.mine{flex-direction:row-reverse;background:transparent}.message-avatar{@apply grid size-8 shrink-0 place-items-center rounded-xl bg-ink text-[11px] font-black text-white}.message.mine .message-avatar{@apply bg-sea}.message.note .message-avatar{@apply bg-coral text-ink}.message-bubble{position:relative;max-width:min(78%,46rem);border:1px solid rgba(8,55,107,.07);border-radius:18px 5px 18px 18px;background:var(--color-paper);padding:.7rem .85rem;box-shadow:0 8px 24px -22px rgba(8,55,107,.65)}.message.mine .message-bubble{border-radius:5px 18px 18px 18px;background:var(--theme-own-message)}.message.note{justify-content:center}.message.note .message-bubble{width:min(92%,52rem);max-width:none;border:1px dashed color-mix(in srgb,var(--color-coral) 60%,transparent);border-radius:14px;background:var(--theme-note)}.message-bubble header{@apply mb-1.5 flex flex-wrap items-center gap-2}.message-bubble header time{@apply mr-auto}.internal-label{@apply rounded-full bg-coral/15 px-2 py-0.5 text-[9px] font-black text-ink}.message-bubble>p{@apply text-sm leading-7}.edited-label,.revision-link{@apply ml-2 text-[9px] text-ink/35}.revision-link{@apply font-bold text-sea}.deleted-message{@apply italic text-ink/40}.date-divider{@apply sticky top-1 z-10 my-4 flex items-center justify-center}.date-divider span{@apply rounded-full border border-ink/8 bg-paper/90 px-3 py-1 text-[9px] font-bold text-ink/45 shadow-sm backdrop-blur}
|
|
.attachment-list{@apply mt-3 grid gap-2}.attachment{margin-top:0}.attachment-image{@apply block max-w-72 overflow-hidden p-1}.attachment-image img{@apply max-h-52 w-full rounded-lg object-cover}.attachment-image span{@apply block truncate px-2 py-1 text-[10px]}.attachment-file{@apply flex max-w-sm items-center gap-3 bg-white/75}.file-icon{@apply grid size-9 shrink-0 place-items-center rounded-lg bg-mint text-lg}.attachment-file b,.attachment-file small{@apply block}.attachment-file small{@apply mt-0.5 text-[9px] font-normal text-ink/40}.attachment-audio{@apply block max-w-md}.attachment-audio audio{@apply my-2 h-10 w-full}.attachment-audio>a{@apply text-[10px]}.message-menu{position:absolute;top:.35rem;left:.35rem}.message.mine .message-menu{left:auto;right:.35rem}.message-menu>summary{@apply grid size-8 cursor-pointer list-none place-items-center rounded-full text-xs tracking-widest text-ink/40 transition hover:bg-white hover:text-sea;box-shadow:none}.message-menu>summary::-webkit-details-marker{display:none}.message-menu[open]>summary{@apply bg-white text-sea;box-shadow:0 5px 15px -10px #08376b}.message-menu-panel{@apply absolute left-0 z-20 mt-1 w-72 overflow-hidden rounded-2xl border border-ink/10 bg-paper shadow-xl}.message.mine .message-menu-panel{right:0;left:auto}.message-menu-head{@apply flex items-center justify-between border-b border-ink/8 bg-ink/[.025] px-4 py-3}.message-menu-head b,.message-menu-head small{@apply block}.message-menu-head b{@apply text-xs text-ink}.message-menu-head small{@apply mt-0.5 text-[9px] font-normal text-ink/45}.message-menu-close{@apply grid size-8 min-h-0 place-items-center rounded-full bg-transparent p-0 text-lg font-normal text-ink/45 shadow-none hover:bg-ink/5 hover:text-ink}.message-edit-form{@apply p-4}.message-edit-form label{@apply mb-1.5 text-[10px] text-ink/65}.message-menu-panel textarea{@apply min-h-24 rounded-xl bg-ink/[.025] p-3 text-xs leading-6 shadow-none}.message-menu-actions{@apply mt-3 grid grid-cols-2 gap-2}.message-menu-actions button{@apply m-0 min-h-10 w-full rounded-xl px-3 py-2 text-xs}.message-edit-save{@apply bg-sea}.message-edit-cancel{@apply border border-ink/10 bg-white text-ink/60 shadow-none hover:bg-ink/5 hover:text-ink}.message-delete-zone{@apply flex items-center justify-between gap-3 border-t border-red-200 bg-red-50/50 px-4 py-3}.message-delete-zone b,.message-delete-zone small{@apply block}.message-delete-zone b{@apply text-[10px] text-red-700}.message-delete-zone small{@apply mt-0.5 text-[9px] text-red-700/60}.message-delete-zone form{@apply m-0}.message-delete-button{@apply m-0 min-h-8 rounded-lg border border-red-200 bg-white px-3 py-1 text-[10px] text-red-700 shadow-none hover:bg-red-500 hover:text-white}@media(max-width:639px){.message-menu-panel{position:fixed;right:.75rem!important;bottom:5rem;left:.75rem!important;top:auto;width:auto;max-height:calc(100dvh - 7rem);overflow:auto}}.conversation-empty{@apply grid h-full min-h-64 place-content-center text-center}.conversation-empty>span{@apply mx-auto mb-3 grid size-12 place-items-center rounded-full bg-mint text-sea}.conversation-empty p{@apply mt-1 text-xs text-ink/45}
|
|
.ticket-workspace .composer{position:relative;z-index:15;margin:0;border:0;border-top:1px solid rgba(8,55,107,.08);border-radius:0;padding:.65rem .85rem max(.65rem,env(safe-area-inset-bottom));box-shadow:0 -14px 40px -30px rgba(8,55,107,.55)}.composer-context{@apply mb-2 flex items-start justify-between}.composer-context b,.composer-context small{@apply block}.composer-context b{@apply text-xs}.composer-context small,.composer-context>[data-draft-status]{@apply mt-0.5 text-[9px] text-ink/40}.ticket-workspace .composer textarea{max-height:9rem;min-height:2.75rem;resize:none;border-radius:13px;background:var(--color-cream);padding:.7rem .85rem;line-height:1.7}.ticket-workspace input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.composer-bar{@apply mt-2 flex items-center gap-2}.composer-tools{@apply flex items-center gap-1}.tool-button{@apply mb-0 inline-flex min-h-10 cursor-pointer items-center gap-1 rounded-xl border border-ink/8 bg-paper px-3 text-xs font-bold text-ink shadow-none hover:border-sea/30 hover:bg-mint}.tool-button span{@apply hidden sm:inline}.composer-hint{@apply hidden flex-1 text-center text-[9px] text-ink/30 lg:block}.send-button{@apply mr-auto min-h-10 rounded-xl bg-sea px-4 py-2}.compact-recorder{@apply my-2 rounded-xl p-3}.compact-recorder[hidden],.composer-extra[hidden]{display:none}.composer-extra{@apply mt-2 rounded-xl border border-ink/8 bg-cream p-3}.composer-extra label{@apply text-xs}.new-message-jump{@apply absolute bottom-36 left-1/2 z-20 min-h-9 -translate-x-1/2 rounded-full bg-ink px-4 py-2 text-[10px] shadow-xl}.new-message-jump[hidden]{display:none}.staff-composer .mode{@apply mb-2}.staff-composer.note-mode{background:var(--theme-note);border-top-color:color-mix(in srgb,var(--color-coral) 45%,transparent)}.staff-composer.note-mode textarea{@apply bg-white}.staff-composer.note-mode .send-button{@apply bg-coral text-ink}.file-preview:empty{display:none}.ticket-workspace .file-preview{@apply mb-2 mt-2 grid grid-cols-2 gap-2 sm:grid-cols-4}.ticket-workspace .file-chip{@apply text-[9px]}
|
|
.workspace-side{min-height:0;overflow-y:auto;padding:.75rem;background:var(--color-cream)}.workspace-side .info-card{@apply mb-3 rounded-[14px] p-4 shadow-none}.panel-close{@apply hidden}.ticket-operations form{@apply mt-3 border-t border-ink/6 pt-3}.ticket-operations form button{@apply w-full}.ticket-operations details{@apply mt-3 rounded-xl border border-ink/8 p-3}.ticket-operations summary{@apply cursor-pointer text-xs font-bold}
|
|
@media(max-width:1023px){body:has(.ticket-workspace) .mobile-dock,body:has(.ticket-workspace) .staff-mobile-dock{display:none}.ticket-workspace{height:calc(100dvh - 4.25rem)}.staff-conversation-grid,.customer-grid{grid-template-columns:minmax(0,1fr)}.workspace-side{position:fixed;inset:4.25rem 0 0 auto;z-index:60;width:min(88vw,22rem);transform:translateX(105%);border-left:1px solid rgba(8,55,107,.1);box-shadow:-20px 0 60px -35px rgba(8,55,107,.7);transition:transform .25s ease}.workspace-side.panel-open{transform:translateX(0)}.panel-close{@apply mb-3 grid size-10 place-items-center rounded-xl bg-ink text-white}.message-bubble{max-width:86%}}
|
|
@media(max-width:639px){.site-header{display:none}.customer-main:has(.ticket-workspace){padding:0}.ticket-workspace{height:100dvh}.ticket-workspace-head{@apply min-h-16}.workspace-grid{height:calc(100% - 4rem)}.ticket-title h1{@apply max-w-[48vw] text-sm}.ticket-head-actions .badge{@apply max-w-24 truncate}.conversation-toolbar{@apply min-h-10}.ticket-workspace .conversation{@apply px-2.5 py-3}.message-avatar{@apply size-7 rounded-lg}.message-bubble{max-width:88%;padding:.6rem .7rem}.message.note .message-bubble{width:96%}.ticket-workspace .composer{@apply px-2.5 pt-2}.composer-context small{max-width:70vw}.composer-hint{display:none}.send-button{@apply px-3}.new-message-jump{bottom:8.5rem}.ticket-head-actions form{display:none}}
|
|
@media(prefers-reduced-motion:reduce){.ticket-workspace .conversation{scroll-behavior:auto}.workspace-side{transition:none}}
|
|
.load-older{@apply mx-auto my-3 flex min-h-9 rounded-full border border-ink/10 bg-paper px-4 py-2 text-[10px] font-bold text-sea shadow-sm hover:bg-mint}.load-older.htmx-request{@apply pointer-events-none opacity-60}
|
|
|
|
/* Ticket correspondence: deliberate long-form replies, not instant chat. */
|
|
.ticket-workspace .conversation{background:var(--color-cream)}.ticket-workspace .message,.ticket-workspace .message.mine{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:start;gap:.75rem;margin:1rem auto;max-width:58rem}.ticket-workspace .message.mine{flex-direction:initial}.message-bubble,.message.mine .message-bubble{width:100%;max-width:none;border-radius:10px;border-right:3px solid var(--color-sea);background:var(--color-paper);padding:1rem 1.1rem;box-shadow:0 8px 24px -24px rgba(8,55,107,.7)}.message.mine .message-bubble{border-right-color:var(--color-ink);background:var(--color-paper)}.message.note{display:grid;justify-content:initial}.message.note .message-bubble{width:100%;max-width:none;border:1px solid color-mix(in srgb,var(--color-coral) 45%,transparent);border-right:3px solid var(--color-coral);border-radius:10px;background:var(--theme-note)}.message-bubble>p{font-size:.875rem;line-height:2;text-align:justify}.message-bubble header{padding-bottom:.5rem;border-bottom:1px solid rgba(8,55,107,.06)}.message-avatar{border-radius:9px}.ticket-workspace .composer{padding:1rem 1.1rem max(1rem,env(safe-area-inset-bottom));border-top:3px solid var(--color-sea);background:var(--color-paper)}.composer-context{margin-bottom:.75rem}.composer-context b{font-size:.875rem}.composer-context small{margin-top:.25rem;font-size:.6875rem;line-height:1.7}.ticket-workspace .composer textarea{min-height:7rem;max-height:15rem;border-radius:10px;background:#fff;border-color:rgba(8,55,107,.14);padding:.9rem 1rem}.ticket-workspace .composer textarea:focus{background:#fff}.composer-bar{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(8,55,107,.06)}.send-button{min-height:2.75rem;border-radius:10px;padding-inline:1.1rem}.staff-composer.note-mode{border-top:3px solid var(--color-coral)}.mode{max-width:30rem}.mode button{border-radius:9px}.date-divider{position:static}.date-divider span{background:transparent;border:0;box-shadow:none}.new-message-jump{bottom:17rem}
|
|
@media(max-width:639px){.ticket-workspace .message,.ticket-workspace .message.mine{grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem;margin:.75rem 0}.message-bubble,.message.mine .message-bubble{max-width:none;padding:.8rem}.message-bubble>p{text-align:start}.ticket-workspace .composer textarea{min-height:6rem}.composer-bar{flex-wrap:wrap}.composer-tools{order:2}.send-button{order:1;width:100%;margin:0}.composer-hint{display:block;order:3;width:100%;text-align:right}.new-message-jump{bottom:19rem}}
|
|
|
|
/* Collapsible reply panel keeps the correspondence history dominant. */
|
|
.ticket-workspace .composer.is-collapsed{padding:.55rem .85rem;border-top:1px solid rgba(8,55,107,.1);background:var(--color-paper)}.composer.is-collapsed>form,.composer.is-collapsed>.mode{display:none}.composer-launch{display:none;width:100%;min-height:3.5rem;align-items:center;justify-content:flex-start;gap:.75rem;border:1px solid rgba(8,55,107,.1);border-radius:11px;background:linear-gradient(135deg,var(--color-paper),var(--color-mint));padding:.55rem .75rem;color:var(--color-ink);box-shadow:none;text-align:right}.composer.is-collapsed .composer-launch{display:flex}.composer-launch:hover{transform:none;border-color:color-mix(in srgb,var(--color-sea) 35%,transparent);background:var(--color-mint)}.composer-launch-icon{@apply grid size-9 shrink-0 place-items-center rounded-lg bg-sea text-lg text-white}.composer-launch b,.composer-launch small{display:block}.composer-launch b{@apply text-xs}.composer-launch small{@apply mt-0.5 text-[9px] font-medium text-ink/45}.composer-launch-arrow{@apply mr-auto text-sm text-sea}.composer-close{@apply text-ink/55}.composer:not(.is-collapsed) .composer-launch{display:none}.composer.is-collapsed~*{transition:none}.composer.is-collapsed+.new-message-jump{bottom:5rem}.ticket-workspace .composer.is-collapsed{box-shadow:0 -10px 30px -28px rgba(8,55,107,.65)}
|
|
@media(max-width:639px){.ticket-workspace .composer.is-collapsed{@apply px-2.5 py-2}.composer-launch{min-height:3.25rem}.composer-launch small{max-width:65vw}.new-message-jump{bottom:5.5rem}.staff-ticket-workspace .composer:not(.is-collapsed){position:fixed;inset-inline:0;bottom:0;z-index:55;box-sizing:border-box;max-height:calc(100dvh - .5rem);overflow-y:auto;overscroll-behavior:contain;border-radius:1rem 1rem 0 0;padding-bottom:max(1rem,env(safe-area-inset-bottom));box-shadow:0 -18px 55px -25px rgba(8,55,107,.75)}.staff-ticket-workspace .composer:not(.is-collapsed) .composer-bar{position:sticky;bottom:calc(-1 * max(1rem,env(safe-area-inset-bottom)));z-index:2;margin-inline:-.65rem;margin-bottom:calc(-1 * max(1rem,env(safe-area-inset-bottom)));padding:.75rem .65rem max(1rem,env(safe-area-inset-bottom));background:var(--color-paper)}.staff-ticket-workspace .composer:not(.is-collapsed) .composer-tools{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}.staff-ticket-workspace .composer:not(.is-collapsed) .composer-tools .tool-button{justify-content:center;min-width:0;padding-inline:.4rem}.staff-ticket-workspace .composer:not(.is-collapsed) .composer-close{display:inline-flex;order:initial;color:var(--color-ink)} }
|
|
.conversation-pane:has(.composer.is-collapsed) .new-message-jump{bottom:5rem}.conversation-pane:not(:has(.composer.is-collapsed)) .new-message-jump{bottom:17rem}@media(max-width:639px){.conversation-pane:has(.composer.is-collapsed) .new-message-jump{bottom:5.5rem}.conversation-pane:not(:has(.composer.is-collapsed)) .new-message-jump{bottom:19rem}}
|
|
body:has(.ticket-workspace) .flash{position:fixed;top:5rem;left:50%;z-index:100;width:min(calc(100% - 2rem),42rem);margin:0;transform:translateX(-50%);box-shadow:0 18px 50px -25px rgba(8,55,107,.55);animation:flash-in .22s ease-out}.flash{position:relative;padding-left:3rem}.flash-close{position:absolute;left:.5rem;top:50%;min-height:2rem;width:2rem;transform:translateY(-50%);border-radius:.5rem;background:transparent;padding:0;color:currentColor;box-shadow:none}.flash-close:hover{transform:translateY(-50%);background:rgba(255,255,255,.6)}.flash-leaving{opacity:0;transform:translate(-50%,-.5rem)!important;transition:.25s ease}@keyframes flash-in{from{opacity:0;transform:translate(-50%,-.5rem)}to{opacity:1;transform:translate(-50%,0)}}
|
|
|
|
/* Group context adds a row above the conversation; keep every control inside the viewport. */
|
|
.staff-ticket-workspace:has(.ticket-dispatch-context){display:grid;grid-template-rows:auto auto minmax(0,1fr)}.staff-ticket-workspace:has(.ticket-dispatch-context) .workspace-grid{height:auto}.ticket-dispatch-context{margin:.5rem .65rem 0}
|
|
@media(max-width:639px){.staff-ticket-workspace{min-width:0}.ticket-workspace-head{min-width:0}.ticket-title{flex:1}.ticket-head-actions{gap:.35rem}.ticket-head-actions .icon-button{width:2.35rem;height:2.35rem}.ticket-dispatch-context{margin:.4rem .45rem 0}.composer-launch{min-width:0;padding-inline:.55rem;gap:.5rem}.composer-launch>span:nth-child(2){min-width:0;flex:1}.composer-launch b,.composer-launch small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}.composer-launch-arrow{flex:none;margin-right:0}.staff-ticket-workspace .composer.is-collapsed{position:fixed;right:0;bottom:0;left:0;z-index:45;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}.staff-ticket-workspace .conversation{padding-bottom:5.25rem}}
|
|
.flash.flash-leaving{transform:none!important}body:has(.ticket-workspace) .flash.flash-leaving{transform:translate(-50%,-.5rem)!important}
|
|
|
|
/* Searchable Iran province/city fields shared by profile and new-ticket forms. */
|
|
.location-fields{@apply mb-6 rounded-2xl border border-sea/15 bg-mint/40 p-4 sm:p-5}.location-heading{@apply mb-4 flex items-start justify-between gap-3}.location-heading p{@apply mt-1 text-xs text-ink/50}.location-heading>span{@apply shrink-0 rounded-full bg-sea/10 px-3 py-1 text-[10px] font-black text-sea}.location-fields .field{@apply mb-0}.location-fields input:disabled{@apply cursor-not-allowed bg-slate-100 text-ink/40}.location-hint{@apply mb-0 mt-3 text-[11px] font-medium text-ink/50}.location-hint.is-error{@apply text-red-700}
|
|
|
|
/* Staff operations UI: compact queues, explicit state, and consistent navigation. */
|
|
.staff-shell{@apply bg-soft lg:grid-cols-[264px_minmax(0,1fr)]}.staff-sidebar{position:sticky;top:0;height:100dvh;overflow-y:auto;background:linear-gradient(180deg,var(--color-ink),#06284d);padding:1.25rem}.staff-brand{@apply mb-8 rounded-2xl p-2 text-white hover:bg-white/5}.staff-menu-label{@apply mb-2 px-3 text-[10px] font-black tracking-wider text-white/35}.staff-menu{@apply gap-1}.staff-menu a{position:relative;min-height:2.9rem;border:1px solid transparent;border-radius:.75rem;padding:.65rem .75rem;color:rgba(255,255,255,.62)}.staff-menu a>span{@apply grid size-8 shrink-0 place-items-center rounded-lg bg-white/7 text-base}.staff-menu a>b{@apply text-xs}.staff-menu a:hover{@apply bg-white/7 text-white}.staff-menu a.active{background:linear-gradient(135deg,var(--color-sea),var(--color-blue));border-color:rgba(255,255,255,.15);box-shadow:0 14px 28px -18px rgba(6,147,227,.8)}.staff-menu a.active:after{position:absolute;right:-1.25rem;width:.22rem;height:1.75rem;border-radius:.25rem 0 0 .25rem;background:var(--color-coral);content:''}.staff-menu a.active>span{@apply bg-white/15}.staff-profile{@apply flex items-center gap-3 border border-white/8 bg-white/5 p-3}.staff-profile-avatar{@apply grid size-10 shrink-0 place-items-center rounded-xl bg-coral font-black text-ink}.staff-profile>div>span{@apply block}.staff-topbar{@apply h-[4.5rem] border-ink/7 bg-paper/90}.staff-topbar>div:first-child small{@apply text-[9px] font-bold text-sea}.staff-topbar h2{@apply mt-0.5 text-sm}.staff-content{@apply max-w-[1560px] pt-5 lg:px-8}
|
|
.staff-page-head{@apply mb-5 flex flex-col justify-between gap-4 rounded-2xl border border-ink/7 bg-paper p-5 shadow-panel sm:flex-row sm:items-end sm:p-6}.staff-page-head h1{@apply mt-1 text-2xl sm:text-3xl}.staff-page-head p:last-child{@apply mt-2 max-w-2xl text-xs text-ink/50 sm:text-sm}.staff-sync{@apply flex shrink-0 items-center gap-3 rounded-xl border border-sea/10 bg-mint px-4 py-2.5}.staff-sync b,.staff-sync small{@apply block}.staff-sync b{@apply text-xs text-sea-dark}.staff-sync small{@apply mt-0.5 text-[9px] text-ink/40}
|
|
.stats-grid{@apply gap-3}.stat-card{position:relative;overflow:hidden;border-radius:1rem;padding:1rem;color:var(--color-ink);box-shadow:0 10px 30px -28px rgba(8,55,107,.8);transition:.2s ease}.stat-card[href]:hover{@apply -translate-y-0.5 border-sea/25 shadow-lift}.stat-card.is-active{@apply border-sea bg-mint}.stat-card.is-active:after{position:absolute;inset:auto 0 0;height:.2rem;background:var(--color-sea);content:''}.stat-head{@apply flex items-center gap-2}.stat-icon{@apply grid size-7 place-items-center rounded-lg bg-mint text-xs font-black text-sea}.stat-card.alert .stat-icon{@apply bg-coral/15 text-coral}.stat-value{@apply mt-3}.stat-card small{@apply text-[10px] text-ink/45}
|
|
.queue-switcher{@apply mb-4 flex gap-1 overflow-x-auto rounded-xl border border-ink/7 bg-paper p-1.5 shadow-sm}.queue-switcher a{@apply shrink-0 rounded-lg px-3 py-2 text-[10px] font-bold text-ink/50 hover:bg-mint hover:text-sea-dark}.queue-switcher a.active{@apply bg-ink text-white shadow-sm}.dashboard{@apply items-start xl:grid-cols-[260px_minmax(0,1fr)]}.filters{@apply border-ink/8}.filter-heading{@apply mb-3}.filter-form{@apply gap-2.5}.filter-form label{@apply mb-0}.filter-form button{@apply mt-1 w-full rounded-xl}.search-field input{background-image:linear-gradient(transparent,transparent)}.stream-meta{@apply flex items-center gap-2}.stream-meta>span:first-child{@apply hidden text-[10px] font-bold text-ink/40 sm:inline}.ticket-stream{@apply border-ink/8}.stream-head{@apply min-h-16 bg-cream/45}.stream-head h2{@apply text-base}
|
|
.ticket-stream .staff-ticket{position:relative;grid-template-columns:minmax(0,1fr) auto;min-height:7.25rem;padding:1rem 1.15rem;border-right:3px solid var(--color-sea)}.ticket-stream .staff-ticket.priority-edge-important{border-right-color:var(--color-blue)}.ticket-stream .staff-ticket.priority-edge-urgent{border-right-color:var(--color-coral)}.ticket-stream .staff-ticket:hover{background:linear-gradient(90deg,var(--color-paper),var(--color-mint))}.staff-ticket-head time{@apply text-[9px] font-medium text-ink/35}.staff-ticket h2{@apply mt-2.5 truncate text-[15px]}.ticket-row-meta{@apply mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-ink/45}.ticket-row-meta span{position:relative}.ticket-row-meta span+span:before{position:absolute;right:-.45rem;content:'•';color:rgba(8,55,107,.25)}.ticket-locked{@apply mt-3 rounded-lg bg-coral/10 px-3 py-2 text-[10px] font-bold text-ink/60}.staff-ticket-side{@apply min-w-32}.staff-ticket-badges{@apply flex-nowrap}.ticket-owner{@apply max-w-40 truncate text-[9px] font-bold text-ink/40}.ticket-open{@apply flex items-center gap-1 text-[10px] font-black text-sea}.ticket-open b{@apply transition}.staff-ticket:hover .ticket-open b{@apply -translate-x-1}.staff-list .empty{@apply rounded-none border-0 py-16 shadow-none}
|
|
.staff-mobile-dock{@apply grid-cols-4}.staff-mobile-dock a{@apply rounded-xl px-1}.staff-mobile-dock a.active{background:linear-gradient(135deg,var(--color-sea),var(--color-blue))}
|
|
@media(max-width:639px){.staff-content{@apply px-3 pt-3}.staff-page-head{@apply mb-3 p-4}.staff-page-head h1{@apply text-xl}.staff-sync{@apply w-full}.stats-grid{@apply mb-3}.stat-card{@apply p-3}.stat-value{@apply text-xl}.queue-switcher{@apply -mx-1}.dashboard{@apply gap-3}.filters{@apply p-3}.filter-form{@apply grid-cols-2}.filter-form .search-field,.filter-form .check,.filter-form button{@apply col-span-2}.ticket-stream .staff-ticket{@apply grid-cols-1 gap-3 p-3.5}.staff-ticket-side{@apply min-w-0 flex-row items-center}.ticket-owner{display:none}.ticket-open{@apply mr-auto}.staff-ticket-badges{@apply justify-start}.stream-head{@apply px-3}.stream-status{display:none}}
|
|
|
|
/* High-contrast staff typography and semantic states. Keep critical text opaque. */
|
|
.staff-shell{--staff-text:#123a63;--staff-muted:#526b85;--staff-subtle:#60758b;--staff-border:#ccd8e5;--status-new-bg:#e4f4ff;--status-new-fg:#07517f;--status-open-bg:#e6ebff;--status-open-fg:#263d8f;--status-staff-bg:#fff0cf;--status-staff-fg:#754000;--status-customer-bg:#dff1ff;--status-customer-fg:#07518b;--status-reopened-bg:#ffe4d8;--status-reopened-fg:#8a3511;--status-resolved-bg:#dff5e9;--status-resolved-fg:#17613c;--status-closed-bg:#e9edf2;--status-closed-fg:#44576b;color:var(--staff-text)}
|
|
.staff-menu a{color:#d3e1f0}.staff-menu a:hover{color:#fff}.staff-menu a.active{background:linear-gradient(135deg,var(--color-sea),var(--color-sea-dark))}.staff-menu-label{color:#b6c9dd;font-size:.75rem}.staff-brand small,.staff-profile>div>span{color:#c2d2e3;font-size:.75rem}.staff-menu a>b{font-size:.875rem;line-height:1.6}.staff-menu a em{margin-right:auto;min-width:1.55rem;border-radius:999px;background:var(--color-coral);padding:.15rem .4rem;color:#3d2900;font-size:.75rem;font-style:normal;text-align:center}.staff-action-link:not(.active){background:rgba(250,159,0,.1);border-color:rgba(250,159,0,.22)}
|
|
.staff-topbar>div:first-child small{color:#1977ce;font-size:.75rem}.staff-topbar h2{font-size:1rem}.staff-topbar-actions>span{color:var(--staff-muted)!important;font-size:.8rem}.staff-topbar a{color:var(--staff-text);font-size:.8rem}
|
|
.staff-page-head .eyebrow{color:#1977ce;font-size:.75rem}.staff-page-head h1{color:#08376b;font-size:1.75rem;line-height:1.5}.staff-page-head p:last-child{color:var(--staff-muted);font-size:.875rem;line-height:1.9}.staff-sync b{color:#07517f;font-size:.8125rem}.staff-sync small{color:var(--staff-muted);font-size:.75rem}
|
|
.stat-label{color:var(--staff-muted);font-size:.8125rem}.stat-card small{color:var(--staff-muted);font-size:.75rem}.stat-value{color:#08376b}.panel-index{color:var(--staff-muted);font-family:Vazirmatn,ui-sans-serif,system-ui;font-size:.75rem;letter-spacing:0}.queue-switcher a{color:var(--staff-muted);font-size:.8125rem}.queue-switcher a.active{color:#fff}
|
|
.dashboard{grid-template-columns:minmax(0,1fr)}@media(min-width:1024px){.dashboard{grid-template-columns:280px minmax(0,1fr)}.filters{position:sticky;top:5.75rem}}
|
|
.filters{border-color:var(--staff-border);background:#fff}.filter-heading{align-items:center}.filter-title{display:flex;align-items:center;gap:.65rem}.filter-icon{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:.65rem;background:#e4f4ff;color:#07517f;font-size:1.15rem}.filter-heading h3{margin-top:.15rem;color:#08376b;font-size:.9rem}.filter-heading>a{color:#1269ad;font-size:.75rem;text-decoration:underline;text-underline-offset:3px}.filter-form label{color:#244b72;font-size:.8125rem}.filter-form input,.filter-form select{border-color:#b9c9d9;color:#123a63;font-size:.8125rem}.check{color:#244b72!important}.check span{font-size:.8125rem}
|
|
.stream-head .panel-index{color:#526b85}.stream-head h2{color:#08376b;font-size:1.05rem}.stream-meta>span:first-child{color:var(--staff-muted);font-size:.75rem}.stream-status{color:#07517f;font-size:.75rem}
|
|
.ticket-stream .staff-ticket{border-bottom-color:#d5dee8;border-right-width:4px;color:var(--staff-text)}.ticket-stream .staff-ticket.status-row-waiting_staff,.ticket-stream .staff-ticket.status-row-reopened{background:linear-gradient(90deg,#fff,#fff9ec);border-right-color:#e58d00}.ticket-stream .staff-ticket.status-row-waiting_staff:hover,.ticket-stream .staff-ticket.status-row-reopened:hover{background:linear-gradient(90deg,#fff9ec,#fff2d6)}.staff-ticket-head{gap:.55rem}.staff-ticket-head .ticket-number{color:#365a7d;font-family:Vazirmatn,ui-sans-serif,system-ui;font-size:.75rem;font-weight:800}.staff-ticket-head time{margin-right:auto;color:var(--staff-muted);font-size:.75rem;font-weight:600}.staff-ticket h2{color:#08376b;font-size:1.05rem;line-height:1.8;white-space:normal}.action-required{border:1px solid #e7a027;border-radius:999px;background:#fff0cf;padding:.2rem .55rem;color:#754000;font-size:.7rem;font-weight:900}.ticket-row-meta{gap:.45rem;margin-top:.65rem;color:var(--staff-muted);font-size:.75rem}.ticket-row-meta span{display:inline-flex;align-items:center;min-height:1.8rem;border:1px solid #d3dde7;border-radius:.5rem;background:#f6f8fa;padding:.25rem .55rem;line-height:1.5}.ticket-row-meta span+span:before{display:none}.ticket-locked{color:#65420b;font-size:.75rem}.ticket-owner{max-width:11rem;color:#526b85;font-size:.75rem}.ticket-open{color:#1269ad;font-size:.78rem}.staff-ticket-badges{gap:.35rem}.staff-ticket-badges .badge{border:1px solid transparent;padding:.3rem .65rem;font-size:.75rem;line-height:1.4}.staff-ticket-badges .badge:before{width:.42rem;height:.42rem}.staff-ticket-badges .priority-normal{border-color:#cbd7e2;background:#f0f4f7;color:#3f566d}.staff-ticket-badges .priority-normal:before{background:#60758b}.staff-ticket-badges .priority-important{border-color:#e5b44e;background:#fff3d6;color:#704800}.staff-ticket-badges .priority-urgent{border-color:#e79b91;background:#ffebe8;color:#8b2d22}
|
|
.staff-ticket-badges .status-new{border-color:#93c8e8;background:var(--status-new-bg);color:var(--status-new-fg)}.staff-ticket-badges .status-new:before{background:var(--status-new-fg)}.staff-ticket-badges .status-open{border-color:#aebbed;background:var(--status-open-bg);color:var(--status-open-fg)}.staff-ticket-badges .status-open:before{background:var(--status-open-fg)}.staff-ticket-badges .status-waiting_staff{border-color:#e3b35b;background:var(--status-staff-bg);color:var(--status-staff-fg)}.staff-ticket-badges .status-waiting_staff:before{background:#d98200}.staff-ticket-badges .status-waiting_customer{border-color:#8fc5e9;background:var(--status-customer-bg);color:var(--status-customer-fg)}.staff-ticket-badges .status-waiting_customer:before{background:#1977ce}.staff-ticket-badges .status-reopened{border-color:#e9a184;background:var(--status-reopened-bg);color:var(--status-reopened-fg)}.staff-ticket-badges .status-reopened:before{background:#b64d20}.staff-ticket-badges .status-resolved{border-color:#8dceb0;background:var(--status-resolved-bg);color:var(--status-resolved-fg)}.staff-ticket-badges .status-resolved:before{background:#218653}.staff-ticket-badges .status-closed{border-color:#bdc8d3;background:var(--status-closed-bg);color:var(--status-closed-fg)}.staff-ticket-badges .status-closed:before{background:#60758b}
|
|
.staff-mobile-dock{grid-template-columns:repeat(6,minmax(0,1fr))}.staff-mobile-dock a{color:#c7d6e6;font-size:.6875rem}.staff-mobile-dock a.active{color:#fff;background:linear-gradient(135deg,var(--color-sea),var(--color-sea-dark))}
|
|
@media(max-width:639px){.staff-page-head h1{font-size:1.35rem}.staff-page-head p:last-child{font-size:.8125rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-form label{font-size:.8rem}.staff-ticket h2{font-size:.95rem}.ticket-row-meta{font-size:.72rem}.staff-ticket-head time{margin-right:0}.staff-ticket-side{flex-wrap:wrap}.staff-ticket-badges .badge{font-size:.7rem}.staff-mobile-dock{inset-inline:.5rem;bottom:.5rem}.staff-mobile-dock a{font-size:.625rem}}
|
|
|
|
/* Company identity */
|
|
.header-company-logo{display:block;width:5.5rem;height:auto;max-height:2.4rem;flex-shrink:0;object-fit:contain}
|
|
.staff-brand{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;margin-bottom:1.75rem;padding:.5rem;text-align:center}
|
|
.staff-logo-panel{display:flex;width:100%;min-height:4.5rem;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.42);border-radius:.9rem;background:#fff;padding:.65rem .9rem}
|
|
.staff-company-logo{display:block;width:8.75rem;height:auto;max-height:3.35rem;object-fit:contain}
|
|
.staff-brand-copy{display:block;min-width:0;padding-inline:.35rem}.staff-brand b{display:block;color:#fff;font-size:.92rem;font-weight:900;line-height:1.8}.staff-brand small{display:block;margin-top:.1rem;color:#c7d7e8;font-size:.72rem;font-weight:600;line-height:1.7}.staff-brand:hover .staff-logo-panel{border-color:rgba(6,147,227,.75)}.staff-brand:hover .staff-brand-copy b{color:#fff}.logo-copy{line-height:1.45}
|
|
.auth-panel{width:100%;max-width:28rem;margin-inline:auto}.auth-brand{display:flex;align-items:center;flex-direction:column;gap:.55rem;margin-bottom:1.35rem;padding-bottom:1rem;border-bottom:1px solid rgba(8,55,107,.09);text-align:center}
|
|
.auth-brand img{display:block;width:8.5rem;height:auto;max-height:3.7rem;object-fit:contain;flex-shrink:0}
|
|
.auth-brand strong{display:block;color:var(--color-ink);font-size:.82rem;font-weight:900;line-height:1.6}
|
|
.auth-brand small{display:block;margin-top:.1rem;color:#526b85;font-size:.67rem;font-weight:600}
|
|
.auth-footer{margin:.65rem auto 0;padding:.2rem .75rem;color:#60758b;font-size:.65rem;font-weight:500;line-height:1.8;text-align:center}
|
|
.ticket-company-logo{display:block;width:3.25rem;height:auto;max-height:1.45rem;flex-shrink:0;object-fit:contain}
|
|
.site-footer{display:flex;min-height:2rem;align-items:center;justify-content:center;gap:.35rem;padding:.4rem 1rem;color:#60758b;font-size:.68rem;font-weight:500;text-align:center}
|
|
.staff-main>.site-footer{border-top:1px solid rgba(8,55,107,.06)}
|
|
body:has(.ticket-workspace) .ticket-workspace{height:calc(100dvh - 4.25rem - 2rem)}
|
|
@media(max-width:639px){.logo-copy{font-size:.82rem}.header-company-logo{width:4.75rem;max-height:2.1rem}.auth-brand{gap:.5rem}.auth-brand img{width:7rem;max-height:3.1rem}.auth-brand>div{min-width:0}.auth-footer{font-size:.6rem}.ticket-company-logo{width:2.5rem;max-height:1.1rem}.site-footer{padding-inline:3.5rem;font-size:.62rem;line-height:1.6}body:has(.ticket-workspace) .ticket-workspace{height:calc(100dvh - 2rem)}}
|
|
|
|
/* Session actions, staff-created tickets and install prompt */
|
|
.desktop-nav form,.staff-topbar-actions form{margin:0}.logout-button{min-height:auto;border:0;background:transparent;padding:.5rem .75rem;color:var(--color-coral);box-shadow:none}.logout-button:hover{transform:none;background:#fff;color:#b45309;box-shadow:none}
|
|
.customer-mobile-dock{grid-template-columns:repeat(4,minmax(0,1fr))}.customer-mobile-dock form{margin:0}.customer-mobile-dock form button{display:flex;width:100%;min-height:3rem;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;border-radius:1rem;background:transparent;padding:0;color:rgba(255,255,255,.6);font-size:.625rem;box-shadow:none}.customer-mobile-dock form button:hover{transform:none;background:rgba(255,255,255,.08);box-shadow:none}
|
|
.staff-create-card{max-width:48rem;margin-inline:auto}.staff-create-card form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1rem}.staff-create-card form>p:has(textarea),.staff-create-card form>p:has(input[type=file]),.staff-create-card form>button,.staff-create-card .errorlist{grid-column:1/-1}.staff-create-card textarea{min-height:10rem}
|
|
.pwa-install{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;width:min(30rem,calc(100vw - 2rem));align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(6,147,227,.25);border-radius:1rem;background:#fff;padding:1rem;box-shadow:0 20px 60px -30px rgba(8,55,107,.7)}.pwa-install[hidden]{display:none}.pwa-install b,.pwa-install small{display:block}.pwa-install small{margin-top:.2rem;color:#526b85;font-size:.72rem}.pwa-install>div:last-child{display:flex;gap:.4rem}.pwa-install button{min-height:2.4rem;padding:.45rem .75rem;background:#eaeaea;color:#526b85;box-shadow:none}.pwa-install button.primary{background:var(--color-sea);color:#fff}
|
|
@media(max-width:639px){.staff-create-card form{grid-template-columns:1fr}.pwa-install{right:.65rem;bottom:5.5rem;width:calc(100vw - 1.3rem);align-items:stretch;flex-direction:column}.pwa-install>div:last-child button{flex:1}}
|
|
|
|
/* Media capture, image inspection and message read receipts */
|
|
.customer-mobile-dock a.primary{background:transparent;color:rgba(255,255,255,.6)}.customer-mobile-dock a.active{background:linear-gradient(135deg,var(--color-sea),var(--color-sea-dark));color:#fff}@media(max-width:639px){body:has(.customer-mobile-dock)>.site-footer{margin-bottom:calc(5.5rem + env(safe-area-inset-bottom))}}
|
|
.composer-context{gap:.75rem}.composer-context-actions{display:flex;flex:none;align-items:center;gap:.5rem}.composer-context-actions>[data-draft-status]{color:#60758b;font-size:.58rem}.composer-send-icon{display:grid;width:2.5rem;height:2.5rem;min-height:2.5rem;flex:none;place-items:center;border:1px solid rgba(6,147,227,.25);border-radius:999px;background:var(--color-sea);padding:0;color:#fff;box-shadow:none}.composer-send-icon:hover{transform:none;background:var(--color-sea-dark);box-shadow:none}.composer-send-icon svg{width:1.2rem;height:1.2rem;fill:currentColor}@keyframes submit-attention{0%,100%{outline:0 solid transparent;background-color:var(--color-sea)}45%{outline:4px solid rgba(250,159,0,.24);background-color:var(--color-coral)}}.send-button.submit-attention{animation:submit-attention .7s ease-out 1}@media(prefers-reduced-motion:reduce){.send-button.submit-attention{animation:none;outline:3px solid rgba(250,159,0,.28)}}
|
|
.media-picker-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.media-picker-button{display:flex;min-height:3rem;align-items:center;justify-content:center;border:1px solid #9ec8e5;border-radius:.85rem;background:#fff;padding:.7rem;color:#0b5f9b;font-size:.78rem;font-weight:900;cursor:pointer}.media-picker-button.gallery-button{border-color:#0693e3;background:#e9f7ff}.media-picker>[data-gallery-input],.media-picker>[data-document-input],.canonical-files,.canonical-file-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}.compression-note{display:block;margin-top:.65rem;color:#526b85;font-size:.68rem}.recorder-error{display:block;margin-top:.6rem;color:#9b2c2c;font-size:.7rem}.attachment-image{display:grid!important;gap:.45rem}.attachment-image>button{display:block;min-height:0;background:transparent;padding:0;color:#08376b;box-shadow:none}.attachment-image>button:hover{transform:none;background:transparent;box-shadow:none}.attachment-image img{display:block;width:min(24rem,100%);max-height:18rem;border-radius:.65rem;object-fit:cover}.attachment-image span{display:block;padding:.45rem .25rem;text-align:right;font-size:.68rem}.attachment-download{padding:.35rem;color:#1977ce;font-size:.68rem}.image-viewer{width:min(70rem,calc(100vw - 2rem));max-width:none;border:0;border-radius:1rem;background:#fff;padding:0;color:#08376b;box-shadow:0 25px 80px #031b33aa}.image-viewer::backdrop{background:#031b33d9;backdrop-filter:blur(4px)}.image-viewer header,.image-viewer footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}.image-viewer header{border-bottom:1px solid #dae6ef}.image-viewer header button{min-height:2.3rem;border-radius:.65rem;padding:.3rem .75rem}.image-viewer-stage{display:grid;min-height:14rem;max-height:75vh;place-items:center;overflow:auto;background:#0c2236}.image-viewer-stage img{display:block;max-width:100%;max-height:75vh;object-fit:contain}.image-viewer footer{justify-content:flex-end}.message-receipts{margin-top:.45rem!important;border-top:1px solid #d5e3ec;padding-top:.35rem}.message-receipts summary{color:#526b85;font-size:.62rem;font-weight:700}.message-receipts ul{display:grid;gap:.25rem;margin:.4rem 0 0;padding:0;list-style:none}.message-receipts li{display:flex;justify-content:space-between;gap:.7rem;color:#526b85;font-size:.6rem}.message-receipts time{color:#647b91}
|
|
@media(max-width:639px){.media-picker-actions{grid-template-columns:1fr}.image-viewer{width:calc(100vw - .75rem)}.image-viewer-stage{max-height:78vh}}
|
|
|
|
/* Ticket media and staff sidebar refinements */
|
|
.image-viewer{position:fixed;inset:0;margin:auto;max-height:min(90dvh,56rem)}.image-viewer[open]{display:flex;flex-direction:column}.image-viewer-stage{flex:1;min-height:0}.reply-media-picker{margin:.75rem 0;border:1px dashed #9fc3dc;border-radius:1rem;background:#f6fbff;padding:.75rem}.reply-media-picker>[data-gallery-input],.reply-media-picker>[data-document-input]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.staff-developer-credit{margin:.65rem .4rem 0;border-top:1px solid rgba(255,255,255,.12);padding:.7rem .25rem 0;color:#c7d7e8;font-size:.62rem;line-height:1.8;text-align:center}
|
|
|
|
/* Staff customer directory and assisted ticket creation */
|
|
.customer-page-head{align-items:flex-end}.customer-directory{padding:0;overflow:hidden}.customer-directory-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:.75rem;padding:1.25rem;background:linear-gradient(135deg,#f5faff,#fff)}.customer-directory-search label{display:grid;gap:.4rem;color:var(--color-navy);font-size:.8rem;font-weight:800}.customer-directory-search input{width:100%;min-height:3rem}.customer-directory-search a{padding:.8rem;color:#526b85;font-weight:700}.customer-result-head{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-top:1px solid #dbe8f4;border-bottom:1px solid #dbe8f4;color:#526b85}.customer-result-head span{color:var(--color-navy);font-weight:900}.customer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.25rem;background:#f7fafc}.customer-card{display:grid;gap:1rem;border:1px solid #d7e5f2;border-radius:1rem;background:#fff;padding:1.15rem;box-shadow:0 10px 28px -24px #08376b}.customer-card header{display:flex;align-items:center;gap:.75rem}.customer-card header h2{margin:0;color:#173a5e;font-size:1rem}.customer-card header a{display:inline-block;margin-top:.2rem;color:#1977ce;font-size:.8rem}.customer-avatar{display:grid;width:2.75rem;height:2.75rem;place-items:center;border-radius:.8rem;background:#dff2ff;color:#08376b;font-weight:900}.customer-location{margin:0;color:#526b85;font-size:.78rem}.customer-ticket-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.customer-ticket-stats span{display:grid;gap:.15rem;border-radius:.65rem;background:#f1f5f9;padding:.55rem;text-align:center;color:#526b85;font-size:.65rem}.customer-ticket-stats b{color:#08376b;font-size:1rem}.customer-ticket-stats .needs-action{background:#fff4dd;color:#985f00}.customer-ticket-stats .needs-action b{color:#c67600}.customer-new-ticket{border-top:1px solid #e4edf5;padding-top:.8rem;color:#1977ce;font-size:.78rem;font-weight:900}.customer-ticket-create{display:block}.customer-picker-head{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1rem;border-bottom:1px solid #dbe8f4;padding-bottom:1rem}.customer-picker-head h2{margin:.2rem 0;color:#173a5e;font-size:1.1rem}.customer-picker-head p{margin:0;color:#526b85;font-size:.78rem}.customer-picker-head a{white-space:nowrap;color:#1977ce;font-size:.75rem;font-weight:800}.customer-search-box{display:grid;gap:.4rem;margin-bottom:.75rem;color:#173a5e;font-size:.8rem;font-weight:900}.customer-search-box small{color:#647b91;font-size:.68rem;font-weight:500}.customer-search-results{position:relative;z-index:4;display:grid;gap:.35rem;max-height:18rem;margin-bottom:.8rem;overflow:auto;border:1px solid #cdddeb;border-radius:.75rem;background:#fff;padding:.4rem;box-shadow:0 18px 35px -28px #08376b}.customer-search-results[hidden]{display:none}.customer-search-results button{display:grid;grid-template-columns:1fr auto;gap:.15rem .75rem;width:100%;min-height:auto;border:0;border-radius:.55rem;background:#f7fafc;padding:.7rem;text-align:right;box-shadow:none;color:#173a5e}.customer-search-results button:hover{background:#e8f5ff}.customer-search-results button span{grid-row:1;grid-column:2}.customer-search-results button small{grid-column:1/-1;color:#647b91}.selected-customer{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:1rem;margin-bottom:.8rem;border:1px solid #93d4fa;border-radius:.8rem;background:#eef9ff;padding:.8rem}.selected-customer[hidden]{display:none}.selected-customer div{display:grid;gap:.2rem}.selected-customer b{color:#08376b}.selected-customer span,.selected-customer small{color:#526b85;font-size:.75rem}.selected-customer button{min-height:auto;background:transparent;color:#1977ce;box-shadow:none;padding:.5rem}.customer-lookup-status{margin-bottom:1rem;border-radius:.65rem;background:#f1f5f9;padding:.65rem .8rem;color:#526b85;font-size:.75rem}.customer-lookup-status.is-found{background:#eaf8f0;color:#17603a}.customer-lookup-status.is-new{background:#fff5df;color:#805300}.customer-lookup-status.is-error{background:#fff0f0;color:#a32929}
|
|
@media(max-width:900px){.customer-grid{grid-template-columns:1fr}.customer-ticket-stats{grid-template-columns:repeat(2,1fr)}}
|
|
@media(max-width:639px){.customer-page-head{align-items:stretch}.customer-directory-search{grid-template-columns:1fr}.customer-directory-search button{width:100%}.customer-result-head{align-items:start;flex-direction:column;gap:.2rem}.customer-grid{padding:.7rem}.customer-picker-head{flex-direction:column}.selected-customer{grid-template-columns:1fr}.customer-ticket-create{padding:1rem}}
|
|
|
|
/* Structured staff ticket creation */
|
|
.staff-create-page{max-width:76rem;margin-inline:auto}.create-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1.25rem}.create-page-head h1{margin:.2rem 0;color:#08376b;font-size:1.8rem;line-height:1.5}.create-page-head p:last-child{max-width:45rem;margin:0;color:#526b85;font-size:.85rem;line-height:1.9}.create-back{display:inline-flex;margin-bottom:.65rem;color:#1977ce;font-size:.75rem;font-weight:800}.customer-directory-link{display:flex;min-width:13rem;align-items:center;gap:.7rem;border:1px solid #cbddec;border-radius:1rem;background:#fff;padding:.8rem 1rem;color:#08376b;box-shadow:0 12px 28px -26px #08376b}.customer-directory-link>span{display:grid;width:2.4rem;height:2.4rem;place-items:center;border-radius:.7rem;background:#e7f5ff;color:#1977ce;font-size:1.2rem}.customer-directory-link b,.customer-directory-link small{display:block}.customer-directory-link b{font-size:.8rem}.customer-directory-link small{margin-top:.12rem;color:#60758b;font-size:.65rem}.create-progress{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 1.25rem;padding:0;overflow:hidden;border:1px solid #d8e5f0;border-radius:1rem;background:#fff;list-style:none}.create-progress li{position:relative;display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem}.create-progress li+li{border-right:1px solid #e0e9f1}.create-progress li>span{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.65rem;background:#eef3f7;color:#526b85;font-size:.75rem;font-weight:900}.create-progress li.active>span{background:#08376b;color:#fff}.create-progress b,.create-progress small{display:block}.create-progress b{color:#173a5e;font-size:.75rem}.create-progress small{margin-top:.1rem;color:#667d92;font-size:.62rem}.assisted-ticket-form{display:grid;grid-template-columns:minmax(0,1fr) 18.5rem;align-items:start;gap:1.25rem}.create-form-errors{grid-column:1/-1;border:1px solid #e9a6a6;border-radius:.8rem;background:#fff2f2;padding:.75rem;color:#8e2d2d}.create-form-main{display:grid;gap:1rem}.create-section{border:1px solid #d5e2ee;border-radius:1.1rem;background:#fff;padding:1.25rem;box-shadow:0 18px 40px -36px rgba(8,55,107,.7)}.create-section-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.15rem;border-bottom:1px solid #e4edf4;padding-bottom:1rem}.section-number{display:grid;width:2.25rem;height:2.25rem;flex:0 0 auto;place-items:center;border-radius:.7rem;background:linear-gradient(135deg,#08376b,#1977ce);color:#fff;font-size:.8rem;font-weight:900}.create-section-head h2{margin:0;color:#123a63;font-size:1rem}.create-section-head p{margin:.25rem 0 0;color:#60758b;font-size:.72rem;line-height:1.75}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.field-control{display:grid;align-content:start;gap:.4rem;color:#244b72;font-size:.78rem;font-weight:800}.field-control>span{display:flex;align-items:center;gap:.35rem}.field-control em{color:#d36a00;font-style:normal}.field-control i{border-radius:999px;background:#eef3f7;padding:.12rem .4rem;color:#60758b;font-size:.58rem;font-style:normal;font-weight:600}.field-control input,.field-control select,.field-control textarea,.search-input-shell{width:100%;border:1px solid #b9cada;border-radius:.75rem;background:#fbfdff;color:#123a63}.field-control input,.field-control select{min-height:2.85rem}.field-control textarea{min-height:12rem;resize:vertical;line-height:1.9}.field-control input:focus,.field-control select:focus,.field-control textarea:focus,.search-input-shell:focus-within{border-color:#0693e3;outline:3px solid rgba(6,147,227,.12);background:#fff}.field-control small{color:#6a8094;font-size:.62rem;font-weight:500}.field-control .errorlist,.attachment-field .errorlist{margin:0;padding:0;color:#a32929;font-size:.68rem;list-style:none}.search-input-shell{display:flex;align-items:center;padding-inline:.75rem}.search-input-shell>span{color:#1977ce;font-size:1.2rem}.search-input-shell input{min-height:2.9rem;border:0!important;background:transparent!important;outline:0!important;box-shadow:none!important}.customer-search-box{margin-bottom:.65rem}.selected-customer{grid-template-columns:auto 1fr 1fr auto}.selected-customer-icon{display:grid;width:2rem;height:2rem;place-items:center;border-radius:999px;background:#1f8b58;color:#fff;font-weight:900}.customer-lookup-status{border-right:3px solid #8ba4ba}.customer-lookup-status.is-found{border-right-color:#25875a}.customer-lookup-status.is-new{border-right-color:#e38a00}.location-hint{margin:.65rem 0 0;color:#647b91;font-size:.65rem}.message-field{margin-bottom:1rem}.attachment-field{position:relative;display:flex;align-items:center;gap:.75rem;border:1px dashed #91b4d0;border-radius:.85rem;background:#f6fbff;padding:.9rem;color:#173a5e;cursor:pointer}.attachment-field:hover{border-color:#0693e3;background:#edf8ff}.attachment-field .attachment-icon{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border-radius:.7rem;background:#dff2ff;color:#1977ce;font-size:1.2rem}.attachment-field b,.attachment-field small{display:block}.attachment-field b{font-size:.78rem}.attachment-field small{margin-top:.15rem;color:#60758b;font-size:.62rem}.attachment-field input[type=file]{margin-right:auto;max-width:15rem;color:#526b85;font-size:.65rem}.create-summary{min-width:0}.summary-sticky{position:sticky;top:5.75rem;overflow:hidden;border:1px solid #ccdae6;border-radius:1.05rem;background:#fff;box-shadow:0 20px 45px -38px #08376b}.summary-sticky>header{padding:1rem;background:linear-gradient(135deg,#08376b,#125d9c);color:#fff}.summary-sticky>header span,.summary-sticky>header small{display:block}.summary-sticky>header span{font-size:.9rem;font-weight:900}.summary-sticky>header small{margin-top:.15rem;color:#d5eaff;font-size:.62rem}.summary-sticky dl{margin:0;padding:.4rem 1rem}.summary-sticky dl div{padding:.75rem 0;border-bottom:1px solid #e4edf4}.summary-sticky dt{color:#657c91;font-size:.62rem}.summary-sticky dd{margin:.2rem 0 0;color:#123a63;font-size:.75rem;font-weight:800;line-height:1.6}.secure-delivery{display:flex;gap:.6rem;margin:.6rem;border-radius:.7rem;background:#eef8ff;padding:.7rem;color:#1977ce}.secure-delivery p{margin:0}.secure-delivery b,.secure-delivery small{display:block}.secure-delivery b{color:#07517f;font-size:.7rem}.secure-delivery small{margin-top:.15rem;color:#526b85;font-size:.6rem;line-height:1.7}.create-submit{display:grid;width:calc(100% - 1.2rem);gap:.1rem;margin:.8rem .6rem .4rem;min-height:3.5rem;background:linear-gradient(135deg,#0693e3,#1977ce)}.create-submit span{font-size:.78rem;font-weight:900}.create-submit small{color:#e1f3ff;font-size:.56rem}.create-cancel{display:block;padding:.65rem;text-align:center;color:#60758b;font-size:.68rem;font-weight:700}
|
|
@media(max-width:1000px){.assisted-ticket-form{grid-template-columns:1fr}.create-summary{order:-1}.summary-sticky{position:static}.summary-sticky dl{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.summary-sticky dl div{border-bottom:0}.secure-delivery{display:none}.create-submit{width:auto}.create-cancel{padding-bottom:.9rem}}
|
|
@media(max-width:639px){.create-page-head{align-items:stretch;flex-direction:column;gap:1rem}.create-page-head h1{font-size:1.4rem}.customer-directory-link{min-width:0}.create-progress{grid-template-columns:1fr}.create-progress li{padding:.65rem .8rem}.create-progress li+li{border-top:1px solid #e0e9f1;border-right:0}.create-progress small{display:none}.create-section{padding:1rem}.field-grid{grid-template-columns:1fr}.field-spacer{display:none}.selected-customer{grid-template-columns:auto 1fr}.selected-customer>div:nth-of-type(2){grid-column:2}.selected-customer button{grid-column:1/-1;border-top:1px solid #bee0f3}.summary-sticky dl{grid-template-columns:1fr}.summary-sticky dl div{padding:.45rem 0}.attachment-field{align-items:flex-start;flex-wrap:wrap}.attachment-field input[type=file]{width:100%;max-width:none;margin:0}.create-summary{order:initial}.summary-sticky>header,.summary-sticky dl,.secure-delivery{display:none}.summary-sticky{position:sticky;bottom:4.7rem;z-index:20;border-color:#acd2eb;box-shadow:0 -12px 35px -25px #08376b}.create-submit{margin:.45rem}.create-cancel{display:none}}
|
|
|
|
/* Profile completion guidance and truthful PWA installation states */
|
|
.profile-completion-notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;margin:-.5rem 0 1.5rem;border:1px solid #a9d5ef;border-right:4px solid var(--color-sea);border-radius:1.15rem;background:linear-gradient(135deg,#fff,#edf8ff);padding:1.15rem;box-shadow:0 16px 38px -34px #08376b}.profile-completion-icon{display:grid;width:2.75rem;height:2.75rem;place-items:center;border-radius:.8rem;background:#dff2ff;color:#1977ce;font-size:1.25rem;font-weight:900}.profile-completion-notice h2{margin:0;color:#08376b;font-size:1rem}.profile-completion-notice p{margin:.35rem 0 0;color:#405d78;font-size:.78rem;line-height:1.9}.profile-completion-actions{display:flex;align-items:center;gap:1rem;margin-top:.85rem}.profile-completion-actions .button{min-height:2.55rem;padding:.5rem 1rem}.profile-completion-actions>a:last-child{color:#526b85;font-size:.7rem;font-weight:700}.pwa-install-icon{width:3.5rem;height:3.5rem;flex:none;border-radius:.85rem;object-fit:cover}.pwa-install-copy{min-width:0;flex:1}.pwa-install-actions{display:flex;gap:.4rem}.pwa-install-guidance{border-color:#fac66c}.pwa-install-guidance .pwa-install-copy small{color:#805300}
|
|
@media(max-width:639px){.profile-completion-notice{grid-template-columns:1fr;margin-top:0}.profile-completion-icon{width:2.4rem;height:2.4rem}.profile-completion-actions{align-items:stretch;flex-direction:column;gap:.65rem}.profile-completion-actions>a{text-align:center}.pwa-install{display:grid;grid-template-columns:auto 1fr;align-items:center}.pwa-install-actions{grid-column:1/-1}.pwa-install-actions button{flex:1}}
|
|
.composer-send-icon{cursor:pointer;user-select:none}.composer-send-icon:focus-visible{outline:3px solid rgba(6,147,227,.25);outline-offset:2px}
|
|
|
|
/* Non-blocking guidance when current-page timing/length signals resemble rapid chat. */
|
|
.chat-coach{@apply mt-2 grid grid-cols-[auto_1fr_auto] items-start gap-2.5 rounded-xl border border-amber-400/45 bg-amber-50 px-3 py-2.5 text-right;animation:chat-coach-in .2s ease-out}.chat-coach[hidden]{display:none}.chat-coach-icon{@apply grid size-7 place-items-center rounded-lg bg-amber-400/20 text-sm text-amber-800}.chat-coach b{@apply block text-[11px] text-amber-800}.chat-coach p{@apply mt-0.5 text-[10px] leading-5 text-amber-800/80}.chat-coach button{@apply grid size-7 min-h-0 place-items-center rounded-full bg-transparent p-0 text-base font-normal text-amber-800/60 shadow-none hover:bg-amber-400/15 hover:text-amber-800}@keyframes chat-coach-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
|
|
.chat-coach-floating{position:fixed;z-index:90;left:1rem;bottom:1rem;width:min(28rem,calc(100vw - 2rem));margin:0;box-shadow:0 18px 50px -24px rgba(8,55,107,.7)}
|
|
@media(max-width:639px){.chat-coach-floating{right:.65rem;bottom:5.65rem;left:.65rem;width:auto;padding:.65rem .75rem}}
|
|
|
|
/* Comfortable close target for the short-lived chat guidance toast. */
|
|
.chat-coach [data-chat-coach-dismiss]{width:2.5rem;height:2.5rem;min-height:2.5rem;border:1px solid rgba(217,119,6,.2);background:rgba(255,255,255,.65);font-size:1.5rem;line-height:1;color:rgba(120,53,15,.78);touch-action:manipulation;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
|
|
.chat-coach [data-chat-coach-dismiss]:hover{border-color:rgba(217,119,6,.4);background:rgba(251,191,36,.22);color:#78350f}
|
|
.chat-coach [data-chat-coach-dismiss]:focus-visible{outline:2px solid #d97706;outline-offset:2px}
|
|
|
|
/* Compact message actions: lower-left trigger, two choices, focused editor. */
|
|
.message-menu{top:auto!important;right:auto!important;bottom:.35rem!important;left:.35rem!important}.message-menu-panel{top:auto;right:auto!important;bottom:calc(100% + .35rem);left:0!important;margin:0;width:15rem}.message-menu-choices{@apply grid gap-1 p-1.5}.message-menu-choices form{@apply m-0}.message-choice{@apply m-0 flex min-h-12 w-full items-center justify-start gap-2.5 rounded-xl bg-transparent px-3 py-2 text-right text-ink shadow-none hover:bg-mint hover:text-sea}.message-choice>span:nth-child(2){@apply min-w-0 flex-1}.message-choice b,.message-choice small{@apply block}.message-choice b{@apply text-xs}.message-choice small{@apply mt-0.5 text-[9px] font-medium text-ink/45}.message-choice-icon{@apply grid size-8 shrink-0 place-items-center rounded-lg bg-mint text-base text-sea}.message-choice-arrow{@apply text-lg text-ink/25}.message-choice-delete{@apply text-red-700 hover:bg-red-50 hover:text-red-700}.message-choice-delete .message-choice-icon{@apply bg-red-50 text-red-700}.message-editor-back{@apply grid size-8 min-h-0 place-items-center rounded-full bg-transparent p-0 text-base text-ink/50 shadow-none hover:bg-ink/5 hover:text-ink}.message-edit-meta{@apply mt-1.5 flex justify-between gap-2 text-[8px] text-ink/40}@media(max-width:639px){.message-menu-panel{top:auto!important;right:.75rem!important;bottom:5rem!important;left:.75rem!important;width:auto}.message-menu-choices{@apply p-2}.message-choice{@apply min-h-14}}
|