:root{--page-padding:24px;--tg-safe-area-top:env(safe-area-inset-top, 0px);--tg-safe-area-right:env(safe-area-inset-right, 0px);--tg-safe-area-bottom:env(safe-area-inset-bottom, 0px);--tg-safe-area-left:env(safe-area-inset-left, 0px);--tg-safe-area-raw-top:env(safe-area-inset-top, 0px);--tg-content-safe-area-top:0px;--tg-safe-area-gap-top:0px;--radius-lg:10px;--radius-xl:1.025rem;--borderRadius:var(--radius-lg);--color-accent:#4c6ef5;--color-text-primary:#1b1b1b;--color-text-secondary:#6d6d6d;--color-bg-page:#f7f7f8;--color-bg-card:#ffffff;--color-border:#e3e3e8;--color-comment-bg:#f2f2f3;--color-comment-my:#e5e5e7;--color-comment-system:#f8f8f9;--color-info-bg:#eef4ff;--color-support-bg:#eaf0ff;--color-red:#ef4444;--color-yellow:#f59e0b;--color-green:#22c55e;--color-bg:var(--color-bg-page);--color-fg:var(--color-text-primary);--color-fg_hover:var(--color-text-secondary);--color-bg_nav:var(--color-bg-card);--color-bg_second:var(--color-bg-card);--color-bg_hover:var(--color-comment-bg);--color-prime:var(--color-accent);--color-primary:var(--color-prime);--color-grey:#888;--color-error:#D33131;--color-danger:var(--color-error);--color-warn:#FFB020;--invert:invert(0)}:root[data-theme=dark],.dark{--color-accent:#4c6ef5;--color-text-primary:#e9e9ea;--color-text-secondary:#9a9a9d;--color-bg-page:#111214;--color-bg-card:#1a1b1d;--color-border:#2a2b2d;--color-comment-bg:#25262a;--color-comment-my:#2a2b2d;--color-comment-system:#1f2022;--color-info-bg:#1e2540;--color-support-bg:#1a2440;--invert:invert(1)}:root[data-theme=light]{--color-accent:#4c6ef5;--color-text-primary:#1b1b1b;--color-text-secondary:#6d6d6d;--color-bg-page:#f7f7f8;--color-bg-card:#ffffff;--color-border:#e3e3e8;--color-comment-bg:#f2f2f3;--color-comment-my:#e5e5e7;--color-comment-system:#f8f8f9;--color-info-bg:#eef4ff;--color-support-bg:#eaf0ff;--invert:invert(0)}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-accent:#4c6ef5;--color-text-primary:#e9e9ea;--color-text-secondary:#9a9a9d;--color-bg-page:#111214;--color-bg-card:#1a1b1d;--color-border:#2a2b2d;--color-comment-bg:#25262a;--color-comment-my:#2a2b2d;--color-comment-system:#1f2022;--color-info-bg:#1e2540;--color-support-bg:#1a2440;--invert:invert(1)}}
@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(../font/inter_regular.woff2)format('woff2')}@font-face{font-family:inter;font-style:normal;font-weight:500;font-display:swap;src:url(../font/inter_bold.woff2)format('woff2')}@font-face{font-family:inter;font-style:normal;font-weight:600;font-display:swap;src:url(../font/inter_bold.woff2)format('woff2')}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(../font/inter_bold.woff2)format('woff2')}html{height:100%;overflow:hidden}body{height:100%;display:flex;flex-direction:column}*{margin:0;padding:0;&, &::before, &::after { box-sizing: border-box; }}html,body{background-color:var(--color-bg);color:var(--color-fg);font-family:inter,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.5}.layout{display:flex;flex:auto;min-height:0;& #aside_toggler { z-index: 99; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); display: none; border-radius: 0 var(--borderRadius) var(--borderRadius) 0; box-shadow: 0px 0px 10px 5px var(--color-bg_hover); @media (max-width: 768px) { display: block; } } & #aside { width: clamp(220px, 280px, 25%); display: flex; flex-direction: column; background: var(--color-bg_second); overflow: auto; min-height: 0; max-width: 400px; flex-shrink: 0; @media (max-width: 768px) { display: none; &.open { position: absolute; display: block; z-index: 2; max-width: unset; min-width: none; width: 100%; height: 100%; } } } & .main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .75rem; padding: calc(var(--page-padding, 1rem) * 1) calc(var(--page-padding, 1rem) * 1 + var(--tg-safe-area-right)) calc(var(--page-padding, 1rem) * 1 + var(--tg-safe-area-bottom)) calc(var(--page-padding, 1rem) * 1 + var(--tg-safe-area-left)); overflow-x: hidden; overflow-y: auto; min-height: 0; }}body>main.main{padding:calc(var(--page-padding,1rem) * 1 + var(--tg-safe-area-top))calc(var(--page-padding,1rem) * 1 + var(--tg-safe-area-right))calc(var(--page-padding,1rem) * 1 + var(--tg-safe-area-bottom))calc(var(--page-padding,1rem) * 1 + var(--tg-safe-area-left))}h1,h2,h3,h4,h5,h6,p,a,label,li{color:var(--color-fg)}h1{font-size:20px;font-weight:600;line-height:1.3}h2{font-size:16px;font-weight:500;line-height:1.4}.text-secondary{color:var(--color-text-secondary)}.text-small{font-size:13px;font-weight:400}.text-tiny{font-size:12px;font-weight:400}.text-name{font-size:14px;font-weight:500}.container{width:100%;max-width:760px;margin-inline:auto}.client-toolbar{display:flex;justify-content:flex-end;gap:8px;position:relative;padding:calc(10px + var(--tg-safe-area-top))calc(14px + var(--tg-safe-area-right))10px calc(14px + var(--tg-safe-area-left));background-color:var(--color-bg-card);border-bottom:1px solid var(--color-border)}.client-toolbar .toolbar-left{margin-right:auto;display:inline-flex;align-items:center;gap:8px}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:16px}.card.card-lg{padding:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:1rem;font-weight:500;background:0 0;color:var(--color-fg);border:1px solid var(--color-border);padding:.45rem .75rem;border-radius:var(--borderRadius);cursor:pointer;transition:box-shadow .1s,transform .1s,background .2s;&:disabled { cursor:default; opacity:.5; } @media (hover:hover) { &:hover:enabled { background:var(--color-comment-bg); } } &.primary { background-color:var(--color-prime); color:#fff; border-color:transparent; @media (hover:hover) { &:hover { background-color:color-mix(in srgb,var(--color-prime),white 8%); } } } &.danger { border-color:var(--color-danger); color:var(--color-danger); @media (hover:hover) { &:hover:enabled { background:color-mix(in srgb,var(--color-danger),transparent 90%); } } }}.btn.btn-sm{padding:.375rem .75rem;font-size:13px;font-weight:500}.btn.btn-lg{height:36px;padding:0 16px;font-size:15px;font-weight:500}.btn.icon{padding:.5rem;& img { filter: var(--invert); pointer-events: none; width: 16px; height: 16px; } & svg { width: 16px; height: 16px; display: block; }}.theme-toggle-glyph{font-size:16px;line-height:1}.settings-popover{position:relative;display:inline-flex}.settings-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;padding:12px;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-bg-card);box-shadow:0 10px 24px rgba(0,0,0,.12);display:none;z-index:1200}.settings-panel.is-open{display:block}.settings-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-text-secondary);cursor:pointer}.settings-item input{accent-color:var(--color-accent)}body:not(.ticket-page):not(.agent-split-pane) .settings-popover{display:none}#navDropdown{overflow:visible}.icon-btn{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--borderRadius);border:none;background:0 0;cursor:pointer;transition:background .15s;&:hover { background:var(--color-comment-bg); } & img,& svg { filter:var(--invert); width:20px; height:20px; pointer-events:none; }}.form-control{width:100%;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--borderRadius);padding:10px 12px;color:var(--color-fg);font-size:15px}.form-control:focus{outline:none;border-color:color-mix(in srgb,var(--color-accent),white 30%);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent),transparent 85%)}.row{display:flex;flex-direction:row}
form#profileForm{margin:50px 0}textarea{width:100%;resize:none;background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--borderRadius);padding:10px;color:var(--color-fg);font-size:15px}.input-group{position:relative;margin:10px 0 15px;& .input~label { position: absolute; left: 1rem; color: var(--color-text-secondary); cursor: text; transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease; pointer-events: none; top: 0; font-size: 1rem; } & .input { background: var(--color-bg-card); display: block; width: 100%; padding-top: 1rem; border: 1px solid var(--color-border); border-radius: var(--borderRadius); color: var(--color-fg); font-size: 15px; padding-inline: 1rem; padding-bottom: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; &::placeholder { color: transparent; } &:placeholder-shown ~ label { top: 1rem; font-size: 14px; color: var(--color-text-secondary); } &:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 85%); &:valid { border-color: var(--color-accent); & ~ label { color: var(--color-accent); } } &:invalid { border-color: var(--color-danger); & ~ label { color: var(--color-danger); } } } &:user-invalid { border-color: var(--color-danger); & ~ label { color: var(--color-danger); } } &:disabled { border-color: transparent; } }}
li.dropdown{position:relative;display:inline-block}div.dropdown-content{display:none;position:absolute;z-index:100;right:0;border-radius:var(--borderRadius);background-color:var(--color-bg-card);border:1px solid var(--color-border);min-width:160px;box-shadow:0 8px 16px rgba(0,0,0,.2);overflow:hidden;&.show { display: block; } & a { color: var(--color-text-primary); border-radius: 0; padding: 12px 16px; text-decoration: none; display: block; &:hover { background-color: var(--color-comment-bg); } }}#navDropdown .row .icon{margin-inline:8px}#langSwitch{padding:0;width:32px;border:1px solid var(--color-bg_second);overflow:hidden}
nav{display:flex;flex-direction:row;justify-content:space-between;position:relative;background-color:var(--color-bg-card);padding:calc(10px + var(--tg-safe-area-top))calc(14px + var(--tg-safe-area-right))10px calc(14px + var(--tg-safe-area-left));box-shadow:none;border-bottom:1px solid var(--color-border);& ul { list-style: none; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.2rem; & li { margin: 0; padding: 0; & a { text-decoration: none; color: var(--color-text-primary); font-weight: 500; padding: 0.5rem 1rem; border-radius: 12px; transition: background-color 0.3s ease, color 0.3s ease; &:hover { background-color: var(--color-comment-bg); } &.active { background-color: var(--color-accent); color: white; } } } }}.tg-safe-area-title{position:absolute;top:var(--tg-safe-area-raw-top);left:0;right:0;height:var(--tg-safe-area-gap-top);display:none;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--color-text-secondary);pointer-events:none}.tg-safe-area-title-visible .tg-safe-area-title{display:flex}
.notification-container{position:fixed;bottom:20px;right:20px;z-index:1050;display:flex;flex-direction:column;gap:10px;align-items:flex-end}.notification-bubble{background-color:var(--color-bg_second);color:var(--color-fg);padding:15px 20px;border-radius:var(--borderRadius);box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:15px;animation:notification-slide-in .5s forwards;opacity:0;transform:translateX(100%);max-width:350px;word-wrap:break-word;&.notification-hiding { animation: notification-slide-out 0.5s forwards; } &.notification-success { background-color: #28a745; color: white; } &.notification-error { background-color: #dc3545; color: white; } &.notification-warning { background-color: #ffc107; color: #212529; } & .close-btn { background: none; border: none; color: inherit; font-size: 1.5rem; line-height: 1; padding: 0; margin-left: auto; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; &:hover { opacity: 1; } }}@keyframes notification-slide-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes notification-slide-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}h4.notification-ticket-title{display:inline-block}ul.notification-list{padding-left:20px}span.notification-time{padding:2px 5px;background-color:var(--color-bg_second);border-radius:5px}#notifications-container{& .unread-bell { filter: invert(35%) sepia(79%) saturate(2708%) hue-rotate(335deg) brightness(98%) contrast(90%); } & #unread-count-badge { margin: 0 2px; }}.btn-delete-group,.btn-delete-notification{cursor:pointer;opacity:.5;filter:invert(1)}#responsible-assign-form{margin:15px 0}