html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: 14px;
  line-height: 1.231;
  padding: 0;
}
body,
input,
select,
textarea {
  font-family: "Helvetica Neue", sans-serif;
  color: #000;
}
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
small {
  font-size: 85%;
}
ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 30px;
}
img {
  border: 0;
  vertical-align: middle;
}
form {
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
label {
  cursor: pointer;
}
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
input {
  line-height: normal;
  *overflow: visible;
}
table input {
  *overflow: auto;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  vertical-align: top;
}
th {
  text-align: left;
  font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset {
  margin: 0;
  padding: 0;
}
/* Typography */
a, .link {
  color: #0072bc;
  text-decoration: none;
  display: inline;
  margin-bottom: 1px;
}
a:hover, .link:hover {
    border-bottom: 1px dotted #0072bc;
    margin-bottom: 0;
    cursor: pointer;
}
h1 {
  color: #00AEEF;
  font-weight: normal;
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
h2, .subject {
  font-size: 16px;
  color: black;
}
/* Helpers */
.centered {
  text-align: center;
}
.clear {
  clear: both;
  height: 1px;
  visibility: none;
}
.hidden {
  display: none;
}
.faded {
  color: #666;
}
/* Pagination */
#pagination {
  border: 0;
  margin: 0 0 40px 0;
  padding: 0;
}
#pagination li {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 11px;
  list-style: none;
  display: inline;
}
#pagination li a {
  margin-right: 2px;
  display: block;
  float: left;
  padding: 3px 6px;
  text-decoration: none;
}
#pagination li a:hover {
  color: #ff0084;
}
#pagination .previousOff,
#pagination .nextOff {
  color: #666;
  display: block;
  float: left;
  font-weight: bold;
  padding: 3px 4px;
}
#pagination .next a,
#pagination .previous a {
  font-weight: bold;
}
#pagination .active {
  color: #000;
  font-weight: bold;
  margin-right: 2px;
  display: block;
  float: left;
  padding: 3px 6px;
  text-decoration: none;
}
/* Alerts & Notices */
#msg_notice {
  margin: 0;
  padding: 5px 10px 5px 36px;
  height: 16px;
  line-height: 16px;
  margin-bottom: 10px;
  border: 1px solid #0a0;
  background: url('../images/icons/ok.png') 10px 50% no-repeat #e0ffe0;
}
#msg_warning, .warning-banner {
  margin: 0;
  padding: 5px 10px 5px 36px;
  height: 16px;
  line-height: 16px;
  margin-bottom: 10px;
  border: 1px solid #f26522;
  background: url('../images/icons/alert.png') 10px 50% no-repeat #ffffdd;
}
#msg_error {
  margin: 0;
  padding: 5px 10px 5px 36px;
  height: 16px;
  line-height: 16px;
  margin-bottom: 10px;
  border: 1px solid #a00;
  background: url('../images/icons/error.png') 10px 50% no-repeat #fff0f0;
}
#msg_info { margin: 0; padding: 5px; margin-bottom: 10px; color: #3a87ad; border: 1px solid #bce8f1;  background-color: #d9edf7; }
.warning {
  background: #ffc;
  font-style: italic;
}
.warning strong {
  text-transform: uppercase;
  color: #a00;
  font-style: normal;
}
.error {
  color: #f00;
}
.error input {
  border: 1px solid #f00;
}
.button,
.button:visited {
  background: #222;
  border: none;
  display: inline-block;
  font-size: 16px;
  padding: 4px 16px 4px 16px;
  max-width: 220px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  cursor: pointer;
  font-family: helvetica, arial, sans-serif;
}
.button:hover {
  background-color: #111;
  color: #fff;
}
.button:active {
  top: 1px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.button,
.button:visited,
.green.button,
.green.button:visited {
  background-color: #91bd09;
}
.green.button:hover {
  background-color: #749a02;
}
.blue.button,
.blue.button:visited {
  background-color: #00AEEF;
}
.blue.button:hover {
  background-color: #0299d2;
}
body {
  background: url('../images/page_bg.png') top left repeat-x #c8c8c8;
}
#container {
  background: #fff;
  width: 840px;
  margin: 0 auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
#header {
  position: relative;
  height: 71px;
  padding: 0 20px;
}
#logo {
    height: 100%;
}
#header #logo img {
  max-height: 65px;
  max-width: 380px;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.valign-helper {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#header p {
  width: 400px;
  margin: 0;
  padding: 10px 0 0;
}
#nav {
  margin: 0 20px;
  padding: 2px 10px;
  height: 20px;
  background: url('../images/nav_bg.png') top left repeat-x;
  border-top: 1px solid #aaa;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
#nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
}
#nav li a {
  display: inline-block;
  width: auto;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 10px 0 32px;
  margin-left: 10px;
  color: #333;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  background-position: 10px 50%;
  background-repeat: no-repeat;
}
.rtl #nav li a {
  background-position: right center;
  background-position: calc(100% - 10px) center;
  padding-left: 10px;
  padding-right: 32px;
  margin-right: 10px;
  margin-left: 0;
}
#nav li a.active,
#nav li a:hover {
  background-color: #dbefff;
  color: #000;
}
#nav li a:hover {
  background-color: #ededed;
  color: #0054a6;
}
#nav li a.home {
  background-image: url('../images/icons/home.png');
}
#nav li a.kb {
  background-image: url('../images/icons/kb.png');
}
#nav li a.new {
  background-image: url('../images/icons/new.png');
}
#nav li a.status {
  background-image: url('../images/icons/status.png');
}
#nav li a.tickets {
  background-image: url('../images/icons/tix.png');
}
#content {
  padding: 20px 0;
  margin: 0 20px;
  height: auto !important;
  height: 350px;
  min-height: 350px;
}
#footer {
  text-align: center;
  font-size: 11px;
  color: #333;
}
#footer a {
  color: #333;
}
#footer p {
  margin: 10px 0 0 0;
}
#footer #poweredBy {
  display: block;
  width: 126px;
  height: 23px;
  outline: none;
  text-indent: -9999px;
  margin: 0 auto;
  background: url('../images/poweredby.png') top left no-repeat;
  background-size: auto 20px;
}
.front-page-button {
}
.main-content {
  width: 565px;
}
#landing_page #new_ticket {
  margin-top: 40px;
  background: url('../images/new_ticket_icon.png') top left no-repeat;
}
#landing_page #new_ticket,
#landing_page #check_status {
  width: 295px;
  padding-left: 75px;
}
#landing_page #check_status {
  margin-top: 40px;
  background: url('../images/check_status_icon.png') top left no-repeat;
}
#landing_page h1, #landing_page h2, #landing_page h3 {
    margin-bottom: 10px;
}
/* Landing page FAQ not yet implemented. */
#faq {
  clear: both;
  margin: 0;
  padding: 5px;
}
#faq ol {
  font-size: 15px;
  margin-left: 0;
  padding-left: 0;
  border-top: 1px solid #ddd;
}
#faq ol li {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #999;
}
#faq ol li a {
  display: block;
  padding: 5px 0;
  height: auto !important;
  overflow: hidden;
  margin: 0;
  border-bottom: 1px solid #ddd;
  line-height: 16px;
  padding-left: 24px;
  background: url('../images/icons/page.png') 0 50% no-repeat;
}
#faq ol li a:hover {
  background-color: #e9f5ff;
}
#faq .article-meta {
  padding: 5px;
  background: #fafafa;
}
#kb {
  margin: 2px 0;
  padding: 5px;
  overflow: hidden;
}
#kb > li {
  padding: 10px;
  height: auto !important;
  overflow: hidden;
  margin: 0;
  background: url(../images/kb_category_bg.png) bottom left repeat-x;
  border-bottom: 1px solid #ddd;
  display: block;
}
#kb > li h4 span {
  color: #666;
}
#kb > li h4 a {
  font-size: 14px;
}
#kb > li > i {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 6px;
  background: url(../images/kb_large_folder.png) top left no-repeat;
}
.featured-category {
    margin-top: 10px;
    width: 49.7%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}
.category-name {
    display: inline-block;
    font-weight: 400;
    font-size: 120%;
}
.featured-category i {
    color: rgba(0,174,239, 0.8);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    vertical-align: middle;
}
.article-headline {
    margin-left: 34px;
}
.rtl .article-headline {
    margin-left: 0;
    margin-right: 34px;
}
.article-teaser {
    font-size: 90%;
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
}
.article-title {
    font-weight: 500;
}
.faq-content .article-title {
    font-size: 17pt;
    margin-top: 15px;
}
#kb-search {
  padding: 10px 0;
  overflow: hidden;
}
#kb-search div {
  clear: both;
  overflow: hidden;
  padding-top: 5px;
}
#kb-search #query {
  margin: 0;
  display: inline-block;
  float: left;
  width: 200px;
  margin-right: 5px;
}
#kb-search #cid {
  margin: 0;
  display: inline-block;
  float: left;
  width: 200px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}
#kb-search #topic-id {
  margin: 0;
  display: inline-block;
  float: left;
  width: 410px;
}
#kb-search #searchSubmit {
  margin: 0;
  display: inline-block;
  float: left;
  position: relative;
  top: 2px;
}
#kb-search #breadcrumbs {
  color: #333;
  margin-bottom: 15px;
}
#kb-search #breadcrumbs #breadcrumbs a {
  color: #555;
}
#ticketForm div.clear,
#clientLogin div.clear {
  clear: both;
  padding: 3px 0;
  overflow: hidden;
}
#ticketForm div label,
#clientLogin div label {
  display: block;
}
label.required, span.required {
  font-weight: bold;
}
#ticketForm div label.required,
#clientLogin div label.required {
  text-align: left;
}
#ticketForm div input,
#clientLogin div input,
#ticketForm div textarea,
#clientLogin div textarea {
  width: auto;
  border: 1px solid #aaa;
  background: #fff;
  display: block;
}
#ticketForm div input[type=file],
#clientLogin div input[type=file] {
  border: 0;
}
#ticketForm div select,
#clientLogin div select {
  display: block;
  float: left;
}
#ticketForm div div.captchaRow,
#clientLogin div div.captchaRow {
  line-height: 31px;
}
#ticketForm div div.captchaRow input,
#clientLogin div div.captchaRow input {
  position: relative;
  top: 6px;
}
#ticketForm > table {
    table-layout: fixed;
}
#ticketForm > table td {
    width: 160px;
}
#ticketForm > table td + td {
    width: auto;
}
#ticketForm td textarea,
#clientLogin td textarea,
#ticketForm div textarea,
#clientLogin div textarea {
  width: 600px;
}
#ticketForm td em,
#clientLogin td em,
#ticketForm div em,
#clientLogin div em {
  color: #777;
}
#ticketForm td .captcha,
#clientLogin td .captcha,
#ticketForm div .captcha,
#clientLogin div .captcha {
  width: 88px;
  height: 31px;
  background: #000;
  display: block;
  float: left;
  margin-right: 20px;
}
#ticketForm td label.inline,
#clientLogin td label.inline,
#ticketForm div label.inline,
#clientLogin div label.inline {
  width: auto;
  padding: 0 10px;
}
#ticketForm div.error input,
#clientLogin div.error input {
  border: 1px solid #a00;
}
#ticketForm div.error label,
#clientLogin div.error label {
  color: #a00;
}
#ticketTable th {
  padding-left: 3px;
  font-weight: normal;
  text-align: left;
}
#ticketTable th.required,
#ticketTable td.required {
  font-weight: bold;
  text-align: left;
}
#clientLogin {
    display: block;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  background: url('../images/lock.png?1319655200') 95% 50% no-repeat #f6f6f6;
}
.rtl #clientLogin {
    background-position: 5% 50%;
}
#clientLogin .instructions {
    display:table-cell;
    padding-left: 2em;
    padding-right:90px;
}
.rtl #clientLogin .instructions {
    padding-left: 0;
    padding-right:0;
    padding-right: 2em;
    padding-left:90px;
}
#clientLogin p {
  clear: both;
}
#clientLogin strong {
  font-size: 11px;
  color: #d00;
  display: block;
}
#clientLogin #email,
#clientLogin #ticketno {
  margin-right: 0;
}
#clientLogin input[type=text],
#clientLogin input[type=password] {
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 15px;
}
#clientLogin input[type=submit] {
    padding: 3px 10px;
    border-radius: 4px;
}
#reply {
  margin-top: 5px;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ccc;
}
#reply h2 {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px dotted rgba(0,0,0,0.1);
}
#reply > table {
  width: auto;
}
#reply table td {
  vertical-align: top;
}
#reply textarea {
  width: 628px !important;
}
#reply input[type=text],
#reply #response_options textarea {
  border: 1px solid #aaa;
  background: #fff;
}
/* Ticket icons */
.Icon {
  width: auto;
  padding-left: 20px;
  background-position: top left;
  background-repeat: no-repeat;
  color: #006699;
  text-decoration: none;
}
.Icon.Ticket {
  background-image: url('../images/icons/ticket.gif');
}
.Icon.webTicket {
  background-image: url('../images/icons/ticket_source_web.gif');
}
.Icon.emailTicket {
  background-image: url('../images/icons/ticket_source_email.gif');
}
.Icon.phoneTicket {
  background-image: url('../images/icons/ticket_source_phone.gif');
}
.Icon.otherTicket, .Icon.apiTicket  {
  background-image: url('../images/icons/ticket_source_other.gif');
}

.Icon.attachment {
  background-image: url('../images/icons/attachment.gif');
}
.Icon.file {
  background-image: url('../images/icons/attachment.gif');
}
.Icon.refresh {
  background-image: url('../images/icons/refresh.gif');
}
.Icon.thread {
  font-weight: bold;
  font-size: 1em;
  background-image: url('../images/icons/thread.gif?1319556657');
}
#ticketTable {
  border: 1px solid #aaa;
  border-left: none;
  border-bottom: none;
}
#ticketTable caption {
  padding: 5px;
  text-align: left;
  color: #000;
  background: #ddd;
  border: 1px solid #aaa;
  border-bottom: none;
  font-weight: bold;
}
#ticketTable th {
  height: 24px;
  line-height: 24px;
  background: #e1f2ff;
  border: 1px solid #aaa;
  border-right: none;
  border-top: none;
  padding: 0 5px;
}
#ticketTable th a {
  color: #000;
}
#ticketTable td {
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-right: none;
  border-top: none;
}
#ticketTable tr.alt td {
  background: #f9f9f9;
}
i.refresh {
  color: #0a0;
  font-size: 80%;
  vertical-align: middle;
}
.states small {
    font-size: 70%;
}
.active.state {
    font-weight: bold;
}
.search.well {
    padding: 10px;
    background-color: rgba(0,0,0,0.05);
    margin-bottom: 10px;
    margin-top: -15px;
}
.infoTable {
  background: #F4FAFF;
}
.infoTable th {
  text-align: left;
  padding: 3px 8px;
}
.action-button {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  color: #777 !important;
  display: inline-block;
  border: 1px solid #aaa;
  cursor: pointer;
  font-size: 11px;
  overflow: hidden;
  background-color: #dddddd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100% #dddddd));
  background-image: -webkit-linear-gradient(top, #efefef 0%, #dddddd 100%);
  background-image: -moz-linear-gradient(top, #efefef 0%, #dddddd 100%);
  background-image: -ms-linear-gradient(top, #efefef 0%, #dddddd 100%);
  background-image: -o-linear-gradient(top, #efefef 0%, #dddddd 100%);
  background-image: linear-gradient(top, #efefef 0%, #dddddd 100%);
  padding: 0 5px;
  text-decoration: none;
  line-height:18px;
  margin-left:5px;
}
.action-button span,
.action-button a {
  color: #777 !important;
  display: inline-block;
  float: left;
}
.action-button a {
  color: #777;
  text-decoration: none;
}
table.padded tr > td,
table.padded tr > th {
  height: 20px;
  padding-bottom: 5px;
}

.external-auth + .external-auth {
    margin-top: 4px;
}

a.external-sign-in {
    text-decoration: none;
}
.external-auth-box {
    vertical-align: middle;
    border-radius: 4px;
    border: 1px solid #777;
}
.external-auth-icon {
    display: inline-block;
    color: #333;
    width: 30px;
    padding: 5px 10px;
    border-right: 1px solid #ddd;
}
.external-auth-name {
    color: #333;
    width: 100px;
    padding: 5px 10px;
    line-height:30px;
    font-size: 11pt;
}
img.sign-in-image {
    border: none;
    max-height: 40px;
    max-width: 200px;
    width: auto;
    height: auto;
}
.login-box {
    width:40%;
    display:table-cell;
    box-shadow: 12px 0 15px -15px rgba(0,0,0,0.4);
    padding:15px;
}
.rtl .login-box {
    box-shadow: -12px 0 15px -15px rgba(0,0,0,0.4);
}
.flush-right {
    text-align: right;
}
.flush-left {
    text-align: left;
}
.sidebar {
    margin-bottom: 20px;
    margin-left: 20px;
    width: 215px;
}
.rtl .sidebar {
    margin-left: 0;
    margin-right: 20px;
}
.sidebar .content {
    padding: 10px; border: 1px solid #C8DDFA; background: #F7FBFE;
}
.sidebar .content:empty {
    display: none;
}

.sidebar section .header {
    font-weight: bold;
    margin-bottom: 0.3em;
}
.sidebar section + section {
    margin-top: 15px;
}
.search-form {
    padding-top: 12px;
}
.searchbar .search,
.search-form .search {
    display: inline-block;
    width: 400px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.searchbar .search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.bleed {
    margin: 0 !important;
    padding: 0 !important;
}
.row {
}
.span4 {
    display: inline-block;
    width: 29.5%;
    margin: 0 1%;
    vertical-align: top;
}
.span8 {
    display: inline-block;
    width: 66.0%;
    margin: 0 1%;
    vertical-align: top;
}
.truncate {
    display: inline-block;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.image-hover a.action-button:hover,
.image-hover a.action-button {
    color: initial !important;
    text-decoration: none;
}
table.custom-data {
    margin-top: 10px;
}
table.custom-data th {
    width: 25%;
}
table.custom-data th {
    background-color: #F4FAFF;
    padding: 3px 8px;
}
table .headline,
table.custom-data .headline {
    border-bottom: 2px solid #ddd;
    border-bottom: 2px solid rgba(0,0,0,0.15);
    font-weight: bold;
    background-color: white;
}
#ticketInfo h1 {
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.15);
}
#ticketInfo h1 small {
    font-weight: normal;
}
.thread-entry {
    margin-bottom: 15px;
}
.thread-entry.avatar {
    margin-left: 60px;
}
.thread-entry.response.avatar {
    margin-right: 60px;
    margin-left: 0;
}
.thread-entry > .avatar {
    margin-left: -60px;
    display:inline-block;
    width:48px;
    height:auto;
    border-radius: 5px;
}
.thread-entry.response > .avatar {
    margin-left: initial;
    margin-right: -60px;
}
img.avatar {
    border-radius: inherit;
}
.avatar > img.avatar {
    width: 100%;
    height: auto;
}
.thread-entry .header {
    padding: 8px 0.9em;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,0.2);
    border-radius: 5px 5px 0 0;
}
.thread-entry.avatar .header:before {
  position: absolute;
  top: 7px;
  right: -8px;
  content: '';
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #b0b0b0;
  display: inline-block;
}
.thread-entry.avatar .header:after {
  position: absolute;
  top: 7px;
  right: -8px;
  content: '';
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  display: inline-block;
  margin-top: 1px;
}

.thread-entry.avatar .header {
    position: relative;
}

.thread-entry.response .header {
    background:#dddddd;
}
.thread-entry.avatar.response .header:after {
    border-left: 7px solid #dddddd;
    margin-right: 1px;
}

.thread-entry.message .header {
    background:#C3D9FF;
}
.thread-entry.avatar.message .header:before {
    top: 7px;
    left: -8px;
    right: initial;
    border-left: none;
    border-right: 8px solid #CCC;
}
.thread-entry.avatar.message .header:before {
    border-right-color: #9cadcc;
}
.thread-entry.avatar.message .header:after {
    top: 7px;
    left: -8px;
    right: initial;
    border-left: none;
    border-right: 7px solid #c3d9ff;
    margin-left: 1px;
}

.thread-entry .header .title {
    max-width: 500px;
    vertical-align: bottom;
    display: inline-block;
    margin-left: 15px;
}

.thread-entry .thread-body {
    border: 1px solid #ddd;
    border-top: none;
    border-bottom:2px solid #aaa;
    border-radius: 0 0 5px 5px;
}
.thread-body .attachments {
  background-color: #f4faff;
  margin: 0 -0.9em;
  position: relative;
  top: 0.9em;
  padding: 0.3em 0.9em;
  border-top: 1px dotted #ccc;
  border-top-color: rgba(0,0,0,0.2);
  border-radius: 0 0 6px 6px;
}
.thread-body .attachments .filesize {
  margin-left: 0.5em;
}
.thread-body .attachments a,
.thread-body .attachments a:hover {
  text-decoration: none;
}
.thread-body .attachment-info {
    margin-right: 10px;
    display: inline-block;
    width: 48%;
}
.thread-body .attachment-info .filename {
  max-width: 80%;
  max-width: calc(100% - 70px);
}
.label {
  font-size: 11px;
  padding: 1px 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
}
.label-bare {
  background-color: transparent;
  background-color: rgba(0,0,0,0);
  border: 1px solid #999999;
  color: #999999;
  text-shadow: none;
}
.thread-event {
    padding: 0px 2px 15px;
    margin-left: 60px;
}
.type-icon {
    border-radius: 8px;
    background-color: #f4f4f4;
    padding: 4px 6px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
    font-size: 1.1em;
    border: 1px solid #eee;
    vertical-align: top;
}
.type-icon.dark {
    border-color: #666;
    background-color: #949494;
}
.thread-event img.avatar {
    vertical-align: middle;
    border-radius: 3px;
    width: auto;
    max-height: 24px;
    margin: -3px 3px 0;
}
.thread-event .description {
    margin-left: -30px;
    padding-top: 6px;
    padding-left: 30px;
    display: inline-block;
    width: 642px;
    width: calc(100% - 95px);
    line-height: 1.4em;
}
.thread-event .type-icon {
  position:relative;
}
.thread-event .type-icon::after {
  content: "";
  border: 16px solid white;
  position: absolute;
  top: -3px;
  bottom: 0;
  left: -3px;
  right: 0;
  z-index: -1;
}
.thread-entry::after {
  content: "";
  border-bottom: 2px solid white;
  display: block;
}
.thread-entry::before {
  content: "";
  display: block;
  border-top: 2px solid white;
}
#ticketThread::before {
  border-left: 2px dotted #ddd;
  border-bottom-color: rgba(0,0,0,0.1);
  position: absolute;
  margin-left: 74px;
  z-index: -1;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
#ticketThread {
  z-index: 0;
  position: relative;
  border-bottom: 2px solid #ddd;
  border-bottom-color: rgba(0,0,0,0.1);
}

.freetext-files {
    padding: 10px;
    margin-top: 10px;
    border: 1px dotted #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
}
.freetext-files .file {
    margin-right: 10px;
    display: inline-block;
    width: 48%;
    padding-top: 0.2em;
}
.freetext-files .title {
    font-weight: bold;
    margin-bottom: 0.3em;
    font-size: 1.1em;
}

/* ===== SURFAPP: inicio do bloco gerado por scripts/build-tema-suporte.sh ===== */
/*
 * ARQUIVO GERADO. NÃO EDITE DAQUI PARA BAIXO.
 *
 * Tudo ACIMA deste marcador é o theme.css do osTicket, íntegro.
 * Tudo ABAIXO saiu de suporte/tema/surfapp.css — é lá que se edita.
 *
 * Para regerar:  ./scripts/build-tema-suporte.sh
 * Por que assim: docs/UPGRADE.md, secao "Patches em vigor hoje".
 */
/* =========================================================================
   SurfApp — identidade visual do PORTAL DO CLIENTE do osTicket
   -------------------------------------------------------------------------
   ESTE ARQUIVO NÃO É PUBLICADO SOZINHO.

   Ele é o NOSSO bloco. Quem o publica é `scripts/build-tema-suporte.sh`, que
   monta o `theme.css` final assim:

       theme.css do upstream (íntegro, byte a byte)
       /* ==== SURFAPP:INICIO ==== * /
       este arquivo
       /* ==== SURFAPP:FIM ==== * /

   O upstream nunca é editado — só concatenado. No upgrade, o script roda de
   novo sobre o `theme.css` NOVO e o bloco volta ao fim dele. É a diferença
   entre reconciliar 300 linhas nossas e reconciliar 1.284 linhas de terceiro.
   Ver `docs/UPGRADE.md`, seção "Patches em vigor hoje".

   -------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO E NÃO UM `<link>` A MAIS

   O osTicket 1.18 não tem sistema de temas: `ASSETS_PATH` é fixo em
   `client.inc.php` (`ROOT_PATH.'assets/default/'`) e o cabeçalho do cliente
   não tem gancho de folha de estilo. Existe `osTicket::addExtraHeader()`, que
   o cabeçalho ecoa no `<head>` — mas chegar nele exigiria um plugin, com
   instalação e ativação manuais em cada ambiente, para carregar um arquivo
   estático. Concatenar sai mais barato e não depende de passo de painel.

   -------------------------------------------------------------------------
   ESCOPO: SÓ O CLIENTE.

   `theme.css` é carregado por `include/client/header.inc.php` via
   `ASSETS_PATH` — e `ASSETS_PATH` só existe em `client.inc.php`. O painel do
   agente (`/scp/`) carrega `scp/css/scp.css` e NUNCA este arquivo. Nada aqui
   pode alcançá-lo, mesmo que o seletor bata (o `#container` do painel existe,
   mas a folha não é servida lá).

   -------------------------------------------------------------------------
   COMO ESTE ARQUIVO VENCE O UPSTREAM — sem `!important` em cascata

   O cabeçalho do cliente carrega, NESTA ORDEM:

       1. css/osticket.css
       2. assets/default/css/theme.css   ← upstream + este bloco
       3. css/typeahead.css
       4. css/ui-lightness/jquery-ui-…
       5. css/jquery-ui-timepicker-addon.css
       6. css/thread.css
       7. css/redactor.css
       8. css/font-awesome.min.css, flags.css, rtl.css, select2.min.css

   Contra os itens 1 e 2 basta ORDEM: como o bloco vem depois, empate de
   especificidade já ganha. Contra 3–8 a ordem está contra nós, então todo
   seletor que precise vencê-los é prefixado com `#container` — a `<div>` que
   embrulha o portal inteiro. Um `#container .redactor-box` (1,1,0) ganha de
   `.redactor-box` (0,1,0) do `redactor.css`; um `#container .thread-body`
   ganha de `.thread-body` do `thread.css`.

   O prefixo é usado de forma UNIFORME, e não só onde é estritamente
   necessário: assim ninguém precisa lembrar quais das nove folhas vêm depois
   para saber se uma regra nova vai pegar.

   `!important` NÃO é usado para vencer disputa de especificidade — para isso
   serve o `#container`. Ele aparece em exatamente QUATRO declarações, e em
   todas porque não existe outra saída:

     a) `.action-button` (cor) — o upstream declara `color:#777 !important`
        duas vezes (theme.css do 1.18.4, ~861 e ~881). #777 sobre branco dá
        4,48:1 e reprova AA em texto de 11px. Só outro `!important` vence um
        `!important`.
     b) `#reply textarea` (largura) — o upstream fixa `width:628px !important`
        (~749), o que estoura qualquer tela de celular.
     c) e d) as duas colunas da tela de entrar — o `display:table-row` e o
        `padding:15px` estão em atributos `style=` dentro do
        `include/client/login.inc.php`. Estilo em linha vence QUALQUER seletor
        de folha; a única alternativa seria editar aquele arquivo, que é
        justamente o que a regra da casa proíbe.

   Cada uma está marcada no corpo do arquivo, no ponto de uso.

   -------------------------------------------------------------------------
   TIPOGRAFIA: sem `@font-face`, igual ao site

   `public/css/site.css` do SurfApp declara Montserrat e Open Sans com queda
   para a pilha do sistema e NÃO baixa fonte nenhuma. Aqui é idêntico — mesma
   pilha, mesma queda. O ganho não é só evitar requisição externa: é que os
   dois lados caem para a MESMA fonte na mesma máquina, então a Central de
   Suporte nunca destoa do site por causa de uma fonte que carregou num lugar
   e no outro não.

   -------------------------------------------------------------------------
   CONTRASTE: medido, não estimado

   Todos os pares abaixo foram calculados pela fórmula da WCAG 2.1 (luminância
   relativa) e conferidos na página renderizada. Os números estão ao lado de
   cada uso. O que a paleta do site NÃO entrega, este arquivo corrige:

   - `--linha-forte` (#D5CFC3) é a borda de campo do site e dá 1,55:1 sobre
     branco — reprova o 3:1 que a WCAG 1.4.11 exige para o contorno que
     IDENTIFICA um controle. Aqui a borda de campo é `--sa-borda-campo`
     (#77878F, 3,73:1). Filete decorativo continua claro; contorno de campo,
     não.
   - `--acao` (#1A828E) dá 4,54:1 sobre branco (passa) mas 4,10:1 sobre a
     areia da página (reprova). Por isso link em superfície tingida usa
     `--sa-acao-forte`.

   O logotipo NÃO está aqui: ele é configurável em
   Admin > Settings > Pages > Logos, e é por lá que a marca entra.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------
   Espelham `public/css/site.css` do SurfApp (bloco `:root`), com prefixo
   `--sa-` para não colidir com nada que o osTicket venha a declarar. Os que
   não existem lá estão marcados; foram derivados aqui e o motivo está junto.
   ------------------------------------------------------------------------- */
:root {
    /* Marca (config/surfapp.php: brand.palette) */
    --sa-navy: #0A2638;
    --sa-acao: #1A828E;         /* única cor de marca aprovada para texto */
    --sa-acao-forte: #14646E;   /* a mesma, escurecida, para fundo tingido */
    --sa-teal: #4AA5A6;         /* superfície e filete — NUNCA texto (2,91:1) */
    --sa-mint: #C2DFDB;
    --sa-sand: #ECE8DF;

    /* Superfícies */
    --sa-pagina: #F6F3EC;
    --sa-superficie: #FFFFFF;
    --sa-turquesa-fundo: #E7F2F1;
    --sa-linha: #E3DED3;
    --sa-linha-forte: #D5CFC3;

    /* Tinta */
    --sa-tinta: #16303F;        /* 13,74:1 sobre branco */
    --sa-tinta-media: #4E606A;  /*  6,55:1 sobre branco */

    /* NOVO AQUI, não vem do site: a borda que identifica um campo.

       O site usa `--linha-forte` (#D5CFC3, 1,55:1 sobre branco) e reprova em
       WCAG 1.4.11 — o contorno é o que diz "aqui se escreve", e ele precisa
       de 3:1. Mas escurecer demais afasta a Central de Suporte do cadastro do
       site, que foi a referência; então o valor é o MAIS CLARO que ainda
       passa com folga.

       A CONTA TEM DE SER FEITA SOBRE A SUPERFÍCIE ONDE O CAMPO REALMENTE
       ASSENTA, e não sobre o branco por hábito: aqui os formulários são
       painéis de areia (`--sa-pagina`), então a areia é quem manda. Medido:

                    branco   areia    turquesa
           #87949B   3,12     2,81      2,73    ← reprova na areia
           #818E96   3,36     3,04      2,94    ← passa raspando
           #7B8890   3,64     3,29      3,19    ← escolhido
           #77878F   3,72     3,36      3,25    ← passa, mas lê mais pesado

       O tom é o azul-ardósia do `--sa-tinta` dessaturado, não um cinza
       neutro: continua da família da marca. */
    --sa-borda-campo: #7B8890;

    /* Estados (pares fundo/texto do site, já medidos lá) */
    --sa-sucesso-fundo: #DFF0E8;  --sa-sucesso-texto: #1F6B4E;
    --sa-alerta-fundo:  #FBF0DC;  --sa-alerta-texto:  #8A5F14;
    --sa-erro-fundo:    #F9E6E3;  --sa-erro-texto:    #9C2B2B;
    --sa-info-fundo:    #E7F2F1;  --sa-info-texto:    #1F5F66;

    /* Forma */
    --sa-raio-sm: 9px;
    --sa-raio: 14px;
    --sa-raio-lg: 16px;
    --sa-raio-pill: 999px;

    --sa-sombra-sm: 0 1px 2px rgba(10, 38, 56, .06);
    --sa-sombra: 0 1px 2px rgba(10, 38, 56, .05), 0 8px 24px rgba(10, 38, 56, .08);
    --sa-sombra-foco: 0 0 0 3px rgba(26, 130, 142, .18);

    /* Espaçamento (4/8/12/16/24/32/48) */
    --sa-1: 4px;  --sa-2: 8px;  --sa-3: 12px; --sa-4: 16px;
    --sa-5: 24px; --sa-6: 32px; --sa-7: 48px;

    /* Tipografia — sem @font-face, igual ao site */
    --sa-fonte-titulo: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sa-fonte-corpo: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Alvo de toque de 44px, como no site. */
    --sa-toque: 44px;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */

/* O upstream põe um degradê cinza (`images/page_bg.png`) sobre #c8c8c8. A
   forma abreviada `background` zera a imagem junto — é de propósito. */
body {
    background: var(--sa-pagina);
    font-family: var(--sa-fonte-corpo);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sa-tinta);
    padding: 0 var(--sa-4) var(--sa-7);
}

/* `input, select, textarea` não herdam fonte do `body` em navegador nenhum;
   o upstream já os lista, e a regra precisa listar de novo. */
body,
input,
select,
textarea,
button {
    font-family: var(--sa-fonte-corpo);
    color: var(--sa-tinta);
}

/* Sem `* { box-sizing }` global: mexer no modelo de caixa de 25 mil elementos
   de terceiro é como quebrar layout de um jeito que só aparece na tela que
   ninguém abriu. A propriedade entra por componente, onde a largura é nossa.

   MAS TODO ELEMENTO QUE RECEBE `min-height` OU `width` NOSSO PRECISA ESTAR
   AQUI. É a lição de um defeito real, e vale registrar por extenso:

   a folha do NAVEGADOR já dá `box-sizing: border-box` a `<input>` e
   `<button>`, mas NÃO a `<a>`. O portal tem botão nas três formas — o
   `sidebar.tmpl.php` usa `<a class="blue button">`, o `index.php` usa
   `<button class="green button">`, os formulários usam `<input type=submit>` —
   então o MESMO `min-height: 44px` produzia caixas diferentes. Medido no
   navegador:

       <input type=submit>      border-box    44,8px   sobra  0,0px
       <button class=button>    border-box    44,8px   sobra  0,0px
       <a class="button">       CONTENT-BOX   70,0px   sobra 25,3px  ← o defeito
       <a class=action-button>  CONTENT-BOX   42,0px   sobra 10,0px

   No `<a>` os 44px eram a área de CONTEÚDO e os 24px de padding entravam por
   fora. A linha de texto (18,75px) assentava no TOPO dessa área de 44px e
   sobrava 25px de vazio embaixo — o que se lê na tela como "margem embaixo
   grande demais", mas não é margem nem padding: é `min-height` na caixa
   errada. */
#container,
#container input,
#container select,
#container textarea,
#container table,
#container .redactor-box,
#container .button,
#container .action-button,
#container button,
/* O `<a>` de cada aba do menu também recebe `min-height` nosso — e `<a>` é
   content-box. Sem esta linha a aba media 60px (44 de conteúdo + 16 de
   recuo) em vez de 44: exatamente o mesmo defeito dos botões, reaparecendo
   noutra tela. Regra prática: se você escreveu `min-height` ou `width` para
   um elemento, o nome dele tem de estar nesta lista. */
#container #nav li a {
    box-sizing: border-box;
}

#container img {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   3. Moldura: container, cabeçalho, navegação, conteúdo, rodapé
   ------------------------------------------------------------------------- */

/* O upstream trava `width: 840px`. Isso é o que faz o portal rolar para o
   lado no celular — a página inteira fica 840px de largura numa tela de 390.
   `width:auto` + `max-width` resolve sem media query. */
#container {
    width: auto;
    max-width: 1000px;
    margin: var(--sa-5) auto;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio-lg);
    box-shadow: var(--sa-sombra);
}

#header {
    height: auto;
    min-height: 0;
    padding: var(--sa-5) var(--sa-5) var(--sa-4);
}

#logo {
    height: auto;
    display: inline-block;
}

#header #logo img {
    max-height: 44px;
    max-width: 240px;
}

/* `width: 400px` fixo no upstream: no celular empurra a página. */
#header p {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--sa-tinta-media);   /* 6,55:1 sobre branco */
}

#header p a {
    color: var(--sa-acao);          /* 4,54:1 sobre branco */
    font-weight: 600;
}

/* A barra de navegação vira uma fileira de pílulas sobre um filete, no lugar
   do degradê com sombra projetada do upstream. `height: 20px` fixo também
   sai: com pílulas de 36px o texto ficava cortado. */
#nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-2);
    height: auto;
    margin: 0 var(--sa-5);
    padding: var(--sa-2) 0 var(--sa-3);
    background: none;
    border-top: 0;
    border-bottom: 1px solid var(--sa-linha);
    box-shadow: none;
    white-space: normal;
}

#nav li {
    display: block;
}

/* AS MEDIDAS SÃO AS DO `.site-nav__link` DO SITE, uma a uma: 44px de alvo,
   recuo 8/12, cápsula, 15px, peso 600. O menu era a última peça do portal
   ainda com cara de upstream.

   `inline-flex` com `align-items: center` para o rótulo ficar no meio da
   cápsula mesmo quando o nome da aba quebra em duas linhas — o que acontece em
   pt-BR ("Base de conhecimento") numa tela estreita. `white-space: nowrap` NÃO
   entra aqui, ao contrário do site: lá o menu some no celular e vira gaveta;
   aqui ele continua na tela, e proibir a quebra empurraria a página para o
   lado. */
#nav li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: var(--sa-toque);
    line-height: 1.3;
    padding: var(--sa-2) var(--sa-3);
    margin: 0;
    border-radius: var(--sa-raio-pill);
    font-family: var(--sa-fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    color: var(--sa-tinta);         /* 13,74:1 sobre branco */
    background: none;
    text-align: center;
    /* Só cor faz transição. Nada aqui muda a caixa entre estados. */
    transition: background-color .15s ease, color .15s ease;
}

/* Os ícones do upstream são PNGs azuis da marca osTicket. Saem — e com eles o
   `padding-left: 32px` que abria espaço para o ícone. A especificidade aqui
   iguala a do upstream (`#nav li a.home` etc.), e a ordem decide. */
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets {
    background-image: none;
    /* O MESMO valor do recuo direito da regra base. Estava em `--sa-4` (16px)
       contra 12px do outro lado: o rótulo ficava fora do centro da cápsula, e
       cada aba tinha um respiro diferente do vizinho. */
    padding-left: var(--sa-3);
}

.rtl #nav li a {
    padding-right: var(--sa-3);
    margin-right: 0;
}

/* O MENU USA A COR DOS BOTÕES DA PLATAFORMA — decisão do Rafael. As abas
   deixam de usar a cápsula clara e passam ao mesmo par de turquesas que o
   botão primário usa: `--sa-acao` e `--sa-acao-forte`.

   HOVER E FOCO SÃO O MESMO DESENHO. Quem chega pelo teclado vê exatamente o
   que quem chega pelo mouse vê, mais o anel de foco.

   `text-decoration: none` explícito porque a regra genérica de link
   (`#container a:hover`) sublinha, e ela ALCANÇA as abas: `#container a:hover`
   pesa (1,1,1) e o seletor daqui, (1,1,2), só vence nas propriedades que
   declara. Era esse sublinhado aparecendo e sumindo que fazia o menu parecer
   mudar de espaçamento no hover. */
#nav li a:hover,
#nav li a:focus-visible {
    background-color: var(--sa-acao);
    color: var(--sa-superficie);    /* 4,54:1 sobre #1A828E */
    text-decoration: none;
}

/* A ABA ATUAL fica no tom MAIS FUNDO do par (`--sa-acao-forte`, que é o mesmo
   tom do botão primário sob o mouse), e em peso 700.

   Dois sinais, e nenhum deles posicional:

     aba sob o mouse   #1A828E, peso 600
     aba atual         #14646E, peso 700

   Só o peso separaria os dois se ambos usassem o mesmo fundo — 700 contra 600
   em branco sobre turquesa é uma diferença fina demais para carregar sozinha a
   informação de "em que página estou". O tom mais fundo faz o trabalho pesado;
   o peso confirma. Nenhum dos dois depende de onde o mouse está, que é o que
   permite distinguir as duas abas ao mesmo tempo na tela.

   `.active:hover` não muda: quem já está na página não precisa de resposta a
   um convite que não existe, e o tom já é o mais fundo do par. */
#nav li a.active,
#nav li a.active:hover,
#nav li a.active:focus-visible {
    background-color: var(--sa-acao-forte);
    color: var(--sa-superficie);    /* 6,82:1 sobre #14646E */
    font-weight: 700;
    text-decoration: none;
}

#content {
    padding: var(--sa-5) 0 var(--sa-6);
    margin: 0 var(--sa-5);
    min-height: 280px;
}

#footer {
    margin-top: var(--sa-4);
    font-size: 12px;
    color: var(--sa-tinta-media);   /* 5,91:1 sobre a areia da página */
}

#footer a {
    color: var(--sa-tinta-media);
}

/* O rodapé fica FORA do `#container`, então o `a:hover` do upstream ainda o
   alcança e desenha um pontilhado azul osTicket embaixo do link. Aqui o
   sublinhado é sublinhado de verdade — e a borda sai, com a margem que a
   compensava. */
#footer a:hover,
#footer a:focus-visible {
    color: var(--sa-navy);          /* 14,07:1 sobre a areia */
    border-bottom: 0;
    margin-bottom: 0;
    text-decoration: underline;
}

#footer a:focus-visible {
    outline: 3px solid var(--sa-acao);
    outline-offset: 2px;
}

#footer p {
    margin: var(--sa-3) 0 var(--sa-2);
}

/* -------------------------------------------------------------------------
   4. Tipografia
   ------------------------------------------------------------------------- */

#container h1,
#container h2,
#container h3,
#container h4 {
    font-family: var(--sa-fonte-titulo);
    color: var(--sa-navy);          /* 15,59:1 sobre branco */
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

/* O upstream pinta o h1 de #00AEEF (azul osTicket, 2,4:1 sobre branco — não
   passaria nem como cor decorativa de texto). */
#container h1 {
    font-size: 26px;
    letter-spacing: -.01em;
    margin: 0 0 var(--sa-3);
}

#container h2,
#container .subject {
    font-size: 19px;
    color: var(--sa-navy);
}

#container h3 {
    font-size: 16px;
}

#container a,
#container .link {
    color: var(--sa-acao);          /* 4,54:1 sobre branco */
    margin-bottom: 0;
}

/* O upstream sublinha por `border-bottom: 1px dotted` no hover. Sublinhado de
   verdade quebra junto com a linha do texto; a borda pontilhada, não. */
#container a:hover,
#container .link:hover {
    color: var(--sa-acao-forte);    /* 6,82:1 sobre branco */
    border-bottom: 0;
    margin-bottom: 0;
    text-decoration: underline;
}

/* LINK SOBRE SUPERFÍCIE TINGIDA.

   `--sa-acao` (#1A828E) dá 4,54:1 sobre branco e PASSA. Sobre a areia dos
   painéis cai para 4,10:1 e sobre o turquesa claro para 3,97:1 — reprova AA
   nos dois. Medido na página, não estimado: foi assim que o link
   "escolha-os no computador", dentro do painel de anexos, apareceu.

   Toda superfície tingida do portal está listada aqui. `--sa-acao-forte`
   (#14646E) devolve 6,16:1 na areia e 5,97:1 no turquesa. */
#container #ticketForm a,
#container #reply a,
#container #clientLogin a,
#container .search.well a,
#container .infoTable a,
#container .sidebar .content a,
#container .featured-category a,
#container .thread-body .attachments a,
#container #faq .article-meta a,
#container #ticketTable caption a {
    color: var(--sa-acao-forte);
}

#container .faded,
#container em {
    color: var(--sa-tinta-media);
}

/* Foco visível em tudo que recebe teclado. O upstream não desenha nenhum, e
   o `outline` padrão do Chrome some assim que alguém declara `box-shadow`
   no `:focus` de um campo — por isso as duas coisas, e não uma. */
#container a:focus-visible,
#container button:focus-visible,
#container input:focus-visible,
#container select:focus-visible,
#container textarea:focus-visible {
    /* 3px e offset 2px são exatamente o `:focus-visible` global do site. O
       `outline` não entra no fluxo, então o anel não desloca nada — é por isso
       que ele, e não uma borda, é o desenho certo para foco. */
    outline: 3px solid var(--sa-acao);
    outline-offset: 2px;
}

/* Sem foco visível, o portal fica inutilizável no teclado — e é o estado que
   ninguém testa. Navegadores que ainda não entendem `:focus-visible` não podem
   ficar sem nada, então o `:focus` puro só é apagado onde o `:focus-visible`
   existe. Mesma construção do site. */
#container :focus:not(:focus-visible) {
    outline: none;
}

/* O `<hr>` do site é uma onda. Aqui é a mesma máscara, mesmo período (32×8),
   pintada por `--sa-linha-forte`: onde a página respira, ela respira com a
   forma da marca. Quem não tem `mask-image` cai no filete reto. */
#container hr {
    border: 0;
    height: 8px;
    margin: var(--sa-5) 0;
    background: var(--sa-linha-forte);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0,4 Q8,1.4 16,4 T32,4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0,4 Q8,1.4 16,4 T32,4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 32px 8px;
    mask-size: 32px 8px;
}

@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    #container hr {
        height: 0;
        border-top: 1px solid var(--sa-linha);
        background: none;
    }
}

/* -------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------
   O portal tem TRÊS famílias de botão, e o upstream desenha cada uma de um
   jeito. Todas viram a mesma pílula:

     .button           links de ação da barra lateral e a busca da home
     input[type=…]     os botões reais dos formulários (Criar chamado, Entrar)
     .action-button    Imprimir / Editar, no topo do chamado

   O `box-sizing` das três está normalizado lá em cima (seção 2) — sem isso as
   caixas divergem entre telas mesmo com a aparência igual.

   `display: inline-flex` NEM SEMPRE PEGA, e é de propósito que a altura não
   dependa dele: o `sidebar.tmpl.php` escreve `style="display:block"` no `<a>`,
   e estilo em linha vence qualquer seletor. Nesse caso o botão vira um bloco
   de largura cheia (que é o certo para uma chamada de barra lateral) e a
   centralização horizontal fica por conta do `text-align: center`, que vale
   nos dois modos. A vertical sai do padding simétrico, não do `align-items`.
   ------------------------------------------------------------------------- */

#container .button,
#container .button:visited,
#container .green.button,
#container .green.button:visited,
#container .blue.button,
#container .blue.button:visited,
#container input[type="submit"],
#container input[type="button"],
#container input[type="reset"],
#container button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-2);
    min-height: var(--sa-toque);
    max-width: none;
    padding: var(--sa-3) var(--sa-5);
    background: var(--sa-acao);
    border: 1.5px solid transparent;
    border-radius: var(--sa-raio-pill);
    box-shadow: 0 6px 18px rgba(10, 38, 56, .12);
    font-family: var(--sa-fonte-titulo);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sa-superficie);    /* 4,54:1 sobre #1A828E */
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* MESMA CAUSA DO MENU: `#container a:hover` sublinha, e pesa (1,1,1) — mais
   que a regra base do botão, (1,1,0). Um `<a class="button">` ganhava um risco
   sob o rótulo ao passar o mouse. O site trata isso do mesmo jeito, com um
   `.site-btn:hover { text-decoration: none }` explícito.

   O foco entra junto com o hover, como no site: quem navega por teclado vê a
   mesma mudança de cor, mais o anel. */
#container .button:hover,
#container .button:focus-visible,
#container .green.button:hover,
#container .green.button:focus-visible,
#container .blue.button:hover,
#container .blue.button:focus-visible,
#container input[type="submit"]:hover,
#container input[type="submit"]:focus-visible,
#container button.btn:hover,
#container button.btn:focus-visible {
    background-color: var(--sa-acao-forte);  /* 6,82:1 com o rótulo branco */
    color: var(--sa-superficie);
    text-decoration: none;
}

/* CLIQUE. O upstream desloca o botão 1px para baixo (`position:relative` na
   regra base mais `top:1px` no `:active`) — o rótulo pula sob o dedo e, num
   grupo de botões, um deles desce enquanto os vizinhos ficam. `top: 0`
   cancela isso.

   No lugar, a sombra afunda. Sombra não ocupa espaço: a caixa medida é
   idêntica nos três estados, que é a condição que o Rafael notou faltar.

   O site não define `:active` para `.site-btn`, mas define a sombra como parte
   da transição do botão primário — então isto usa o vocabulário que já existe
   lá, sem inventar um terceiro comportamento. */
#container .button:active,
#container input[type="submit"]:active,
#container input[type="reset"]:active,
#container input[type="button"]:active,
#container button.btn:active,
#container .action-button:active {
    top: 0;
    box-shadow: 0 2px 6px rgba(10, 38, 56, .16);
}

/* Uma ação primária por tela: "Restaurar" e "Cancelar" saem do turquesa. */
#container input[type="reset"],
#container input[type="button"] {
    background: var(--sa-superficie);
    border-color: var(--sa-borda-campo);   /* 3,73:1 — o contorno é o que o identifica */
    box-shadow: none;
    color: var(--sa-navy);
}

#container input[type="reset"]:hover,
#container input[type="reset"]:focus-visible,
#container input[type="button"]:hover,
#container input[type="button"]:focus-visible {
    background: var(--sa-turquesa-fundo);
    border-color: var(--sa-teal);   /* a borda já existe em repouso: só troca de cor */
    color: var(--sa-acao-forte);    /* 5,97:1 sobre #E7F2F1 */
    text-decoration: none;
}

/* Imprimir / Editar: pílula pequena e discreta.

   `!important` (a) — ver o cabeçalho. O upstream declara
   `color: #777 !important` em `.action-button` (theme.css do 1.18.4, ~861) e
   de novo em `.action-button span, .action-button a` (~881). #777 sobre
   branco dá 4,48:1 e reprova AA em texto de 11px. */
/* 36px, e não os 44 de uma ação primária: Imprimir e Editar são controles
   secundários que assentam DENTRO do `<h1>` do chamado, e 44px ali dobrariam a
   altura da linha do título. 36px passa com folga no piso de 24×24 da WCAG
   2.5.8 (AA) e continua confortável no dedo. Com `box-sizing: border-box`
   normalizado, 36px é a altura FINAL — antes eram 42px, porque os 32px de
   `min-height` eram só a área de conteúdo. */
#container .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-1);
    min-height: 36px;
    padding: var(--sa-1) var(--sa-3);
    background: var(--sa-superficie);
    background-image: none;
    border: 1px solid var(--sa-borda-campo);
    border-radius: var(--sa-raio-pill);
    font-family: var(--sa-fonte-titulo);
    font-size: 12px;
    font-weight: 600;
    /* `line-height` relativo, não os 22px fixos de antes: com valor fixo
       sobravam 4px dentro da caixa, e num `<a>` (que é `inline-block`, não
       flex por padrão) essa sobra ia toda para baixo do rótulo. Aqui a
       centralização vem do flex e vale para as duas formas que o portal usa —
       `<a class="action-button">` em Imprimir/Editar e
       `<button class="action-button">` no "Detectar automaticamente" do
       perfil, que vem de um template do painel do agente. */
    line-height: 1.25;
    color: var(--sa-navy) !important;   /* 15,59:1 */
    margin-left: var(--sa-2);
}

#container .action-button span,
#container .action-button a {
    color: var(--sa-navy) !important;
}

#container .action-button:hover,
#container .action-button:focus-visible {
    background: var(--sa-turquesa-fundo);
    border-color: var(--sa-teal);   /* borda de 1px já existe em repouso */
    color: var(--sa-acao-forte) !important;   /* 5,97:1 sobre #E7F2F1 */
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   6. Campos — abrir chamado, responder, entrar
   -------------------------------------------------------------------------
   É o vocabulário de `.site-input` do site: borda fina, canto de 9px, 16px de
   corpo (abaixo disso o Safari do iPhone dá zoom ao focar) e anel turquesa no
   foco.

   Os tipos são listados um a um, e não com `input:not([type=submit])…`: a
   lista é mais longa mas se lê, e a especificidade fica previsível.
   ------------------------------------------------------------------------- */

#container input[type="text"],
#container input[type="email"],
#container input[type="password"],
#container input[type="tel"],
#container input[type="url"],
#container input[type="number"],
#container input[type="search"],
#container input[type="date"],
#container input[type="time"],
#container select,
#container textarea,
#container .searchbar .search,
#container .search-form .search {
    width: 100%;
    max-width: 100%;
    min-height: var(--sa-toque);
    padding: var(--sa-3) var(--sa-4);
    background: var(--sa-superficie);
    border: 1.5px solid var(--sa-borda-campo);  /* 3,73:1 sobre branco */
    border-radius: var(--sa-raio-sm);
    color: var(--sa-tinta);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#container textarea {
    min-height: 132px;
    resize: vertical;
}

/* MEDIDA DO CAMPO DE UMA LINHA.

   O formulário do osTicket é uma tabela de coluna única: com `width:100%` um
   campo de "Nome" ficaria com 940px, o que é péssimo de ler e de mirar, e
   deixa o asterisco de obrigatório — que o `open.inc.php` imprime DEPOIS do
   campo, no mesmo `<td>` — cair sozinho na linha de baixo.

   560px é a mesma medida que o cadastro do site entrega numa das duas colunas
   do `.site-form__grid` em telas grandes. Caixa de texto e editor continuam
   em 100%: ali a largura ajuda. */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="password"],
#ticketForm input[type="tel"],
#ticketForm input[type="url"],
#ticketForm input[type="number"],
#ticketForm input[type="date"],
#ticketForm input[type="time"],
#ticketForm select {
    max-width: 560px;
}

/* A seta do `<select>` é o mesmo SVG do site, na cor `--tinta-media`.

   O RECUO DA DIREITA É CALCULADO, não escolhido: a seta tem 14px e assenta a
   16px da borda, então o texto precisa parar 16 + 14 + 8 de folga = 38px antes.
   Eram 48px (`--sa-7`), que reservavam 10px a mais do que a seta ocupa — e
   `<select>` não põe reticência: o rótulo é simplesmente cortado, em silêncio.
   Numa coluna estreita esses 10px são a diferença entre ler e não ler. */
#container select {
    padding-right: calc(var(--sa-4) + 14px + var(--sa-2));
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%234E606A' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sa-4) center;
    -webkit-appearance: none;
    appearance: none;
}

/* SEM `outline: none` AQUI. Esta regra e a do `:focus-visible` empatam em
   especificidade (1,1,1), e esta vem depois no arquivo — então um
   `outline: none` aqui apagaria o anel de foco de TODO campo do portal, e
   quem navega por teclado ficaria só com o brilho de 18% de opacidade.

   O site faz igual: `.site-input:focus` pinta borda e brilho e NÃO toca no
   `outline`, deixando o `:focus-visible` global desenhar o anel por cima. Quem
   chega com o mouse não vê anel nenhum, porque o `:focus:not(:focus-visible)`
   logo acima cuida disso. */
#container input:focus,
#container select:focus,
#container textarea:focus {
    border-color: var(--sa-acao);
    box-shadow: var(--sa-sombra-foco);
}

/* Sem `opacity` no placeholder: opacidade mistura a cor com o fundo e o
   contraste real deixa de ser o que a paleta diz. `--sa-tinta-media` cheio dá
   6,55:1 sobre branco, medido. O Firefox aplica `opacity:.54` por padrão —
   daí o `1` explícito. */
#container ::placeholder {
    color: var(--sa-tinta-media);
    opacity: 1;
}

/* Campo em erro: borda, fundo e a mensagem escrita. Nunca só a cor. */
#container div.error input,
#container div.error select,
#container div.error textarea,
#container .error input {
    border-color: var(--sa-erro-texto);
    background-color: var(--sa-erro-fundo);
}

#container div.error label,
#container .error,
#container font.error {
    color: var(--sa-erro-texto);     /* 7,53:1 sobre branco */
    font-weight: 600;
}

/* --- Formulário de abrir chamado -------------------------------------- */

/* O FORMULÁRIO É UMA SUPERFÍCIE, e não campos soltos numa página.

   É a assinatura do cadastro do site: a seção tem uma cor, e o formulário
   vive num painel próprio dentro dela. Aqui a página já é a areia e o
   `#container` já é o branco, então quem inverte é o painel — areia dentro do
   branco, com os campos em branco por cima. O resultado é o mesmo: o campo
   ganha contorno por diferença de superfície, além da borda.

   `#reply` (responder um chamado) e `#clientLogin` (entrar) usam exatamente
   este mesmo painel — as três telas de formulário do portal ficam iguais. */
#ticketForm,
/* "Meu perfil" (`profile.inc.php`) abre um `<form>` SEM id e SEM classe — não
   há gancho melhor que o `action`. Sem esta linha o perfil ficava sendo a
   única tela de formulário do portal com os campos soltos no branco, o que lê
   como outro produto. É a mesma tela que o link "Meu perfil" do topo abre em
   qualquer página, então ela aparece bastante. */
#container #content > form[action="profile.php"] {
    padding: var(--sa-5);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio-lg);
}

/* A tabela do perfil traz `width="800"` e `class="padded"`, com um par
   rótulo/campo por linha. */
#container #content > form[action="profile.php"] > table {
    width: 100%;
}

#container table.padded tr > td {
    height: auto;
    padding-bottom: var(--sa-3);
}

/* `<table width="800">` no HTML. Atributo de apresentação perde para CSS. */
#ticketForm > table,
#container table#ticketTable {
    width: 100%;
}

#ticketForm > table td,
#ticketForm > table td + td {
    width: auto;
    padding: 0;
}

/* Rótulo: 14px/700 em navy, como `.site-label`. O upstream deixa o rótulo com
   o peso do corpo e o campo colado nele. */
#ticketForm label,
#clientLogin label,
#container .form-header b,
#container td > label > span {
    display: block;
    margin-bottom: var(--sa-2);
    font-family: var(--sa-fonte-corpo);
    font-size: 14px;
    font-weight: 700;
    color: var(--sa-navy);
}

/* O `<label>` do osTicket EMBRULHA o campo (rótulo e controle no mesmo
   elemento), então o peso 700 vazaria para dentro do campo. */
#ticketForm label input,
#ticketForm label select,
#ticketForm label textarea,
#clientLogin label input {
    font-weight: 400;
}

#container .form-header {
    margin-top: var(--sa-5);
}

/* O olho de seção do site (`.site-form__legenda`): 13px, versalete, muito
   espaçado, na cor de ação escura, com um filete embaixo separando do resto. */
#container .form-header h3 {
    margin: 0 0 var(--sa-3);
    padding-bottom: var(--sa-2);
    border-bottom: 1px solid var(--sa-linha-forte);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sa-acao-forte);     /* 6,82:1 sobre branco e 6,0:1 sobre a areia */
}

#container .form-header + div,
#container .form-header div {
    color: var(--sa-tinta-media);
}

/* O asterisco de obrigatório: reforço visual, nunca a única informação. */
#container label.required,
#container span.required,
#container .required > .error {
    font-weight: 700;
    color: inherit;
}

/* Respiro entre campos. O upstream usa `padding-top:10px` inline no `<td>`;
   a regra aqui soma o resto sem depender daquele estilo. */
#ticketForm > table > tbody > tr > td {
    padding-bottom: var(--sa-4);
}

/* O `open.inc.php` abre a tabela com uma linha que só contém um `<hr/>`.
   Encostado na borda de cima do painel, ele vira um risco solto antes de
   qualquer conteúdo. Só o PRIMEIRO some — os outros continuam separando os
   blocos do formulário. (Para quem não está autenticado o primeiro `<tbody>`
   é o formulário de cadastro, que não tem esse `<hr>`; a regra não pega nada
   e nada quebra.) */
#ticketForm > table > tbody:first-of-type > tr:first-child hr {
    display: none;
}

#container p.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-3);
    justify-content: center;
    margin-top: var(--sa-5);
}

/* --- Editor de texto rico (redactor) ----------------------------------
   `redactor.css` é carregado DEPOIS de `theme.css`; sem o `#container` na
   frente, nada aqui pegaria. */
#container .redactor-box {
    width: auto;
    border: 1.5px solid var(--sa-borda-campo);
    border-radius: var(--sa-raio-sm);
    overflow: hidden;
}

#container .redactor-box:focus-within {
    border-color: var(--sa-acao);
    box-shadow: var(--sa-sombra-foco);
}

#container .redactor-toolbar {
    background: var(--sa-pagina);
    border-bottom: 1px solid var(--sa-linha);
}

#container .redactor-toolbar li a {
    color: var(--sa-tinta-media);
}

#container .redactor-toolbar li a:hover {
    background: var(--sa-turquesa-fundo);
    color: var(--sa-acao-forte);
}

#container .redactor-editor {
    min-height: 140px;
    font-family: var(--sa-fonte-corpo);
    font-size: 15px;
    color: var(--sa-tinta);
}

/* A faixa de anexos ("Solte arquivos aqui"). */
#container .dropzone,
#container .filedrop {
    border-color: var(--sa-linha-forte);
    background: var(--sa-pagina);
    border-radius: 0 0 var(--sa-raio-sm) var(--sa-raio-sm);
}

/* -------------------------------------------------------------------------
   7. Tela de entrar
   -------------------------------------------------------------------------
   O cliente normalmente chega autenticado pelo handoff do SurfApp
   (`docs/AUTH_INTEGRATION.md`), mas esta tela existe e aparece sempre que o
   código expira ou o handoff falha. O upstream a desenha com um cadeado PNG
   de fundo, sombra interna e cantos de 5px.
   ------------------------------------------------------------------------- */

/* O mesmo painel de areia do `#ticketForm` e do `#reply`. */
#clientLogin {
    display: block;
    max-width: 720px;
    margin: var(--sa-5) 0 0;
    padding: var(--sa-6);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio-lg);
    box-shadow: none;
}

/* `!important` (c). O `display:table-row` está num atributo `style=` do
   `include/client/login.inc.php` — estilo em linha vence QUALQUER seletor de
   folha, por mais específico que seja. Sem isto as duas colunas não empilham
   no celular. Editar o `login.inc.php` é o que a regra da casa proíbe
   (`suporte/custom/LEIA-ME.md`). */
#clientLogin > div {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--sa-5);
}

#container .login-box {
    display: block;
    width: auto;
    flex: 1 1 260px;
    padding: 0;
    box-shadow: none;
    border-right: 1px solid var(--sa-linha);
    padding-right: var(--sa-5);
}

.rtl #container .login-box {
    box-shadow: none;
    border-right: 0;
    border-left: 1px solid var(--sa-linha);
}

/* `!important` (d): mesmo motivo — o `padding:15px` desta coluna também é
   atributo `style=` no `login.inc.php`. */
#clientLogin > div > div:last-child {
    flex: 1 1 220px;
    padding: 0 !important;
}

#clientLogin div {
    margin-bottom: var(--sa-3);
}

#clientLogin p {
    margin: var(--sa-4) 0 0;
}

#clientLogin strong {
    display: block;
    color: var(--sa-erro-texto);
}

#clientLogin input[type="text"],
#clientLogin input[type="password"] {
    width: 100%;
    height: auto;
}

#container .external-auth-box {
    border-color: var(--sa-borda-campo);
    border-radius: var(--sa-raio-sm);
}

#container .external-auth-icon {
    color: var(--sa-navy);
    border-right-color: var(--sa-linha);
}

#container .external-auth-name {
    color: var(--sa-navy);
}

/* -------------------------------------------------------------------------
   8. Lista de chamados
   ------------------------------------------------------------------------- */

/* A barra de busca do upstream é uma faixa `rgba(0,0,0,.05)` com margem
   negativa para cima. Vira um painel. */
#container .search.well {
    margin: 0 0 var(--sa-5);
    padding: var(--sa-4);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio);
}

/* O SELETOR DE TÓPICO ESTÁ DENTRO DO `<form>`, não ao lado dele: no
   `tickets.inc.php` a `<div class="pull-right">` do "Tópico" é filha do
   `#ticketSearchForm`. Quem distribui a linha, portanto, é o formulário — não
   o painel. Descobrir isso importa: flexbox no painel deixaria o `float:right`
   do filho sem efeito e o seletor colaria no botão. */
#container #ticketSearchForm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sa-2);
}

#container #ticketSearchForm input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}

#container #ticketSearchForm input[type="submit"] {
    flex: 0 0 auto;
}

/* `white-space: nowrap` para o rótulo ("Tópico:") não quebrar em duas linhas
   quando o seletor ao lado engorda. Se o conjunto não couber, quem quebra é o
   `flex-wrap` do formulário — a `.pull-right` inteira desce uma linha, que é o
   comportamento certo; rótulo partido no meio, não. */
#container #ticketSearchForm .pull-right {
    /* `flex: 0 0 auto` para o bloco do seletor NÃO encolher. Sem isto ele é um
       item comum do formulário e cede espaço junto com todo mundo, o que anula
       a largura pedida pelo `<select>` lá embaixo — foi assim que o seletor
       ficou com folga zero mesmo depois de eu aumentar o `flex-basis` dele.
       Quem absorve a falta de espaço é o campo de busca, que tem
       `flex: 1 1 200px` e texto que rola. */
    flex: 0 0 auto;
    float: none;
    display: flex;
    align-items: center;
    gap: var(--sa-2);
    margin-left: auto;
    color: var(--sa-tinta-media);
    font-size: 14px;
    white-space: nowrap;
}

/* 280px e não 220: o rótulo mais longo do seletor em pt-BR
   ("— Todas as categorias —", e depois o nome de cada categoria com a
   contagem) trunca em 220px. `<select>` corta sem reticência e sem aviso —
   quem lê não descobre que faltou texto. */
/* `min-width`, e NÃO `flex-basis`, porque aqui o `flex-basis` não tem como
   vencer: a `.pull-right` se dimensiona pelo conteúdo (`flex-basis: auto`), e
   o conteúdo é a largura INTRÍNSECA do `<select>` — a maior opção mais os
   recuos. O seletor pedia 320px de base, a `.pull-right` media 316px por
   conteúdo, e o seletor encolhia de volta para 242px dentro dela. Circular.
   `min-width` entra na conta intrínseca, então a coluna cresce junto.

   O pior rótulo não é o placeholder e sim o nome de uma categoria com a
   contagem colada ("Financeiro / pagamentos (12)"), que só aparece para quem
   tem chamado naquela categoria — ou seja, o corte não apareceria em dev. */
#container #ticketSearchForm .pull-right select {
    flex: 0 1 auto;
    width: auto;
    min-width: 280px;
}

/* `.states` (Abertos / Fechados) é `pull-right` no HTML e continua à direita
   do título — só o espaçamento interno muda. Em `@media (max-width:760px)` ela
   desce para uma linha própria. */
#container .states {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sa-3);
    align-items: center;
}

/* Ícones de fonte (font-awesome) que o upstream pinta com a paleta osTicket:
   `i.refresh` em #0a0 (verde de 3,03:1) e `.Icon` em #006699. */
#container i.refresh,
#container .Icon {
    color: var(--sa-acao);
}

#container a.state {
    color: var(--sa-tinta-media);
    font-weight: 600;
}

#container a.state.active,
#container .active.state {
    color: var(--sa-acao-forte);     /* 6,82:1 sobre branco */
    font-weight: 700;
}

/* A tabela: cabeçalho em maiúsculas pequenas, linhas separadas por filete,
   zebrado no tom da página. Em telas largas ela continua sendo tabela e ocupa
   a largura toda; a rolagem lateral só entra no `@media` do fim do arquivo. */
#container #ticketTable {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio);
    background: var(--sa-superficie);
}

#container #ticketTable caption {
    padding: var(--sa-3) var(--sa-4);
    background: var(--sa-pagina);
    border-bottom: 1px solid var(--sa-linha);
    font-family: var(--sa-fonte-titulo);
    font-size: 13px;
    font-weight: 700;
    color: var(--sa-navy);
    text-align: left;
}

#container #ticketTable th {
    padding: var(--sa-3) var(--sa-4);
    background: var(--sa-superficie);
    border: 0;
    border-bottom: 2px solid var(--sa-linha-forte);
    font-family: var(--sa-fonte-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sa-tinta-media);    /* 6,55:1 sobre branco */
    text-align: left;
    white-space: nowrap;
}

#container #ticketTable th a {
    color: var(--sa-tinta-media);
}

#container #ticketTable td {
    padding: var(--sa-3) var(--sa-4);
    border: 0;
    border-bottom: 1px solid var(--sa-linha);
    font-size: 14px;
    vertical-align: middle;
}

#container #ticketTable tr.alt td {
    background: var(--sa-pagina);
}

#container #ticketTable tbody tr:hover td {
    background: var(--sa-turquesa-fundo);
}

#container #pagination li a {
    border: 1px solid var(--sa-linha-forte);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-acao);
}

#container #pagination li a:hover {
    background: var(--sa-turquesa-fundo);
    border-color: var(--sa-teal);
    color: var(--sa-acao-forte);
}

#container #pagination .active {
    background: var(--sa-acao);
    border-color: var(--sa-acao);
    color: var(--sa-superficie);
    border-radius: var(--sa-raio-sm);
}

/* -------------------------------------------------------------------------
   9. Ver o chamado — cabeçalho, dados e a conversa
   ------------------------------------------------------------------------- */

#container #ticketInfo {
    width: 100%;
}

#container #ticketInfo h1 {
    padding-bottom: var(--sa-3);
    margin-bottom: var(--sa-4);
    border-bottom: 1px solid var(--sa-linha);
}

#container #ticketInfo h1 small {
    color: var(--sa-tinta-media);
    font-size: 16px;
}

/* Os dois quadros de dados ("Informações do chamado" / "Do cliente"). O
   upstream os pinta de #F4FAFF, um azul-gelo que é da paleta do osTicket. */
#container .infoTable {
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio);
    overflow: hidden;
    border-collapse: separate;
}

#container .infoTable th,
#container table.custom-data th {
    padding: var(--sa-2) var(--sa-4);
    background: transparent;
    font-family: var(--sa-fonte-corpo);
    font-size: 13px;
    font-weight: 600;
    color: var(--sa-tinta-media);
    text-align: left;
}

#container .infoTable td,
#container table.custom-data td {
    padding: var(--sa-2) var(--sa-4);
    font-size: 14px;
    color: var(--sa-tinta);
}

#container table .headline,
#container table.custom-data .headline {
    padding: var(--sa-3) var(--sa-4);
    background: var(--sa-superficie);
    border-bottom: 1px solid var(--sa-linha-forte);
    font-family: var(--sa-fonte-titulo);
    font-weight: 700;
    color: var(--sa-navy);
}

/* --- A conversa --------------------------------------------------------
   Quem falou é a informação mais importante desta tela. O upstream separa
   cliente (#C3D9FF, azul) de atendente (#dddddd, cinza) — dois tons claros
   que, impressos ou numa tela ruim, viram o mesmo cinza.

   Aqui a distinção é de PESO, não só de matiz: a mensagem do cliente é uma
   faixa turquesa clara com texto navy; a resposta do atendente é navy cheio
   com texto branco. Some a dúvida de quem escreveu o quê. */

#container .thread-entry {
    margin-bottom: var(--sa-5);
}

#container .thread-entry .header {
    padding: var(--sa-3) var(--sa-4);
    border: 1px solid var(--sa-linha-forte);
    border-bottom: 0;
    border-radius: var(--sa-raio) var(--sa-raio) 0 0;
    font-size: 14px;
    color: var(--sa-navy);
}

#container .thread-entry .header .title {
    margin-left: var(--sa-3);
    color: var(--sa-tinta-media);    /* 6,55:1 sobre branco; ver ajuste abaixo */
    font-size: 13px;
}

/* Cliente */
#container .thread-entry.message .header {
    background: var(--sa-turquesa-fundo);
    border-color: var(--sa-mint);
}

#container .thread-entry.message .header .title {
    color: var(--sa-info-texto);     /* #1F5F66 sobre #E7F2F1 = 5,54:1 */
}

/* Atendente */
#container .thread-entry.response .header {
    background: var(--sa-navy);
    border-color: var(--sa-navy);
    color: var(--sa-superficie);     /* 15,59:1 */
}

#container .thread-entry.response .header .title {
    color: var(--sa-mint);           /* #C2DFDB sobre #0A2638 = 11,71:1 */
}

/* As setinhas que ligam a faixa ao avatar são bordas de um pseudo-elemento;
   cada uma tem de acompanhar a cor nova da faixa ao lado. */
#container .thread-entry.avatar.message .header:before {
    border-right-color: var(--sa-mint);
}

#container .thread-entry.avatar.message .header:after {
    border-right-color: var(--sa-turquesa-fundo);
}

#container .thread-entry.avatar.response .header:before {
    border-left-color: var(--sa-navy);
}

#container .thread-entry.avatar.response .header:after {
    border-left-color: var(--sa-navy);
}

#container .thread-entry .thread-body {
    padding: var(--sa-4);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-linha-forte);
    border-top: 0;
    border-bottom-width: 1px;
    border-radius: 0 0 var(--sa-raio) var(--sa-raio);
    font-family: var(--sa-fonte-corpo);
    line-height: 1.65;
    color: var(--sa-tinta);
}

/* NÃO declare `font-size` aqui. O `css/thread.css` — que é carregado DEPOIS
   desta folha — fixa `.thread-body { font-size: 14px !important }` (linha 30).
   Especificidade não vence `!important`, então uma declaração de 15px ficaria
   no arquivo sem nunca valer: o CSS passaria a mentir sobre o que a tela faz,
   que é pior do que ficar em 14px. Os 14px passam em contraste (13,74:1) e
   a altura de linha de 1,65 daqui VALE, porque a do thread.css não é
   `!important`. Se um dia 14px doer, o caminho é um quarto `!important`
   documentado — não uma declaração inerte. */

/* `thread.css` vem DEPOIS desta folha e declara `.thread-body p`, `strong`,
   `a` etc. Sem o `#container` na frente, o corpo da mensagem continuaria com
   a tipografia de lá. */
#container .thread-body p {
    margin: 0 0 var(--sa-3);
}

#container .thread-body p:last-child {
    margin-bottom: 0;
}

#container .thread-body strong,
#container .thread-body b {
    color: var(--sa-navy);
    font-weight: 700;
}

#container .thread-body a:not(.button) {
    color: var(--sa-acao);
}

#container .thread-body .attachments {
    background: var(--sa-pagina);
    border-top: 1px solid var(--sa-linha);
    border-radius: 0 0 var(--sa-raio) var(--sa-raio);
    margin: var(--sa-4) calc(var(--sa-4) * -1) calc(var(--sa-4) * -1);
    padding: var(--sa-3) var(--sa-4);
    top: 0;
}

#container .thread-body .attachments .filesize {
    color: var(--sa-tinta-media);
}

/* Eventos do histórico ("criado por", "fechado em"). */
#container .thread-event .description,
#container .thread-event {
    color: var(--sa-tinta-media);
    font-size: 13px;
}

#container .thread-event .type-icon {
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha-forte);
    color: var(--sa-tinta-media);
}

/* A LINHA DO TEMPO. O upstream desenha um fio pontilhado vertical atrás das
   entradas: é o `#ticketThread::before`, uma caixa absoluta de área inteira
   (top/right/bottom/left: 0, z-index:-1) cuja ÚNICA borda visível é a
   esquerda. Só a cor dessa borda muda aqui — dar `background-color` a ela
   pintaria a área toda e o fundo do histórico viraria uma faixa cheia. */
#container #ticketThread::before {
    border-left-color: var(--sa-linha-forte);
}

#container #ticketThread {
    border-bottom-color: var(--sa-linha);
}

/* Os `::before`/`::after` de cada entrada são filetes de 2px da cor do fundo,
   usados para INTERROMPER o fio pontilhado na altura de cada mensagem. Eles
   têm de continuar da cor da superfície, não da cor do filete — senão viram
   dois riscos horizontais atravessando a conversa. */
#container .thread-entry::before,
#container .thread-entry::after {
    border-color: var(--sa-superficie);
}

/* --- Responder --------------------------------------------------------- */

#container #reply {
    margin-top: var(--sa-6);
    padding: var(--sa-5);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio-lg);
}

#container #reply h2 {
    margin: 0 0 var(--sa-4);
    padding-bottom: var(--sa-3);
    border-bottom: 1px solid var(--sa-linha-forte);
}

#container #reply > table {
    width: 100%;
}

/* `!important` herdado: o upstream fixa `#reply textarea { width: 628px
   !important }` (theme.css do 1.18.4, linha ~749). 628px estoura qualquer
   tela de celular, e só outro `!important` desfaz um `!important`. */
#container #reply textarea {
    width: 100% !important;
}

#container #reply input[type="text"] {
    border: 1.5px solid var(--sa-borda-campo);
    background: var(--sa-superficie);
}

/* -------------------------------------------------------------------------
   10. Base de conhecimento
   ------------------------------------------------------------------------- */

#container #kb {
    margin: 0;
    padding: 0;
}

/* Cada categoria vira um cartão. O upstream desenha um degradê PNG
   (`kb_category_bg.png`) com filete cinza embaixo. */
#container #kb > li {
    margin-bottom: var(--sa-4);
    padding: var(--sa-5);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-linha);
    border-left: 4px solid var(--sa-teal);   /* filete, não texto — 2,91:1 é irrelevante aqui */
    border-radius: var(--sa-raio);
    box-shadow: var(--sa-sombra-sm);
}

/* O ícone de pasta é um PNG da marca osTicket. Sai — o cartão já tem o filete
   turquesa como marcador, e um ícone a mais só competiria com o título. */
#container #kb > li > i,
#container .featured-category i {
    display: none;
}

#container #kb > li h4 {
    margin: 0 0 var(--sa-2);
    font-family: var(--sa-fonte-titulo);
}

#container #kb > li h4 a {
    font-size: 17px;
    font-weight: 700;
    color: var(--sa-navy);           /* 15,59:1 */
}

#container #kb > li h4 span {
    color: var(--sa-tinta-media);
    font-weight: 400;
}

#container #faq {
    margin-top: var(--sa-3);
}

#container #faq ol {
    margin: 0;
    padding: 0;
}

#container #faq ol li {
    color: var(--sa-tinta-media);
}

/* O marcador de artigo era `images/icons/page.png`. Vira um losango turquesa
   desenhado em SVG — some a dependência do PNG da outra marca. */
#container #faq ol li a {
    padding: var(--sa-2) 0 var(--sa-2) var(--sa-5);
    border-bottom: 1px solid var(--sa-linha);
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%231A828E' d='M4 0 8 4 4 8 0 4Z'/%3E%3C/svg%3E") 0 50% no-repeat;
    color: var(--sa-acao);
    font-size: 15px;
    line-height: 1.5;
}

#container #faq ol li a:hover {
    background-color: var(--sa-turquesa-fundo);
    color: var(--sa-acao-forte);
}

#container #faq .article-meta {
    padding: var(--sa-3) var(--sa-4);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-tinta-media);
    font-size: 13px;
}

#container .featured-category {
    background: var(--sa-turquesa-fundo);
    border: 1px solid var(--sa-mint);
    border-radius: var(--sa-raio);
    padding: var(--sa-4);
}

#container .category-name,
#container .article-title,
#container .article-headline {
    font-family: var(--sa-fonte-titulo);
    font-weight: 700;
    color: var(--sa-navy);
}

#container .article-teaser {
    color: var(--sa-tinta-media);
}

/* A busca da base de conhecimento. */
#container #kb-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-2);
    align-items: center;
    margin-bottom: var(--sa-5);
}

#container #kb-search div {
    display: contents;
}

#container #kb-search #query {
    flex: 1 1 240px;
    min-width: 0;
    width: auto;
}

#container #kb-search #cid,
#container #kb-search #topic-id {
    flex: 0 1 200px;
    width: auto;
}

#container #kb-search #searchSubmit {
    flex: 0 0 auto;
    width: auto;
}

#container #kb-search #breadcrumbs {
    flex: 1 1 100%;
    color: var(--sa-tinta-media);
    font-size: 13px;
}

/* A COLUNA LATERAL PRECISA CABER O SELETOR QUE MORA NELA.

   O upstream fixa `.sidebar { width: 215px }`. Descontando o recuo do campo
   (16px à esquerda, 38px para a seta) e a borda, sobravam 149px de texto — e o
   rótulo "—Navegar por categoria—" mede 198px. O `<select>` cortava sem
   reticência: virava "—Navegar por categ", e nada na tela dizia que faltava
   texto. Não era a tradução que estava grande demais; era a coluna que estava
   estreita demais para o que o upstream põe dentro dela.

   270px devolvem 213px de texto — 15px de folga sobre o pior rótulo de hoje,
   que é o espaço para a próxima tradução crescer um pouco sem quebrar nada.
   A coluna principal continua limitada a 620px, então a página não muda. */
#container .sidebar {
    width: 270px;
}

#container .sidebar .content {
    padding: var(--sa-4);
    background: var(--sa-pagina);
    border: 1px solid var(--sa-linha);
    border-radius: var(--sa-raio);
}

#container .sidebar section .header {
    font-family: var(--sa-fonte-titulo);
    font-weight: 700;
    color: var(--sa-navy);
}

/* -------------------------------------------------------------------------
   10-B. Home autenticada (`index.php`)
   -------------------------------------------------------------------------
   É a primeira tela que o cliente vê ao chegar pelo handoff do SurfApp, e a
   única com barra lateral de chamadas à ação. A marcação é o `index.php` mais
   o `include/client/templates/sidebar.tmpl.php`.
   ------------------------------------------------------------------------- */

#container #landing_page {
    display: flow-root;   /* contém os floats da barra lateral sem `.clear` */
}

/* A BUSCA DA HOME.

   O `index.php` põe campo e botão soltos dentro do `<form>`. Como a regra de
   campo dá `width:100%` a `.search-form .search`, o botão era empurrado para a
   linha de baixo — sobrava um "Buscar" órfão embaixo da caixa. O formulário
   vira uma linha flex; o campo estica, o botão fica do tamanho dele. */
#container .search-form {
    padding-top: 0;
    margin-bottom: var(--sa-5);
}

#container .search-form form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sa-2);
}

#container .search-form .search {
    flex: 1 1 240px;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

#container .search-form .button {
    flex: 0 0 auto;
}

/* AS DUAS CHAMADAS DA BARRA LATERAL.

   Cada `<a class="button">` vem embrulhado num `<p>`, e o upstream zera a
   margem de `h1..h6`, `form` e `fieldset` — mas NÃO a de `p`. Sobravam os
   15px que o navegador dá por padrão, acima e abaixo de cada botão: espaço que
   ninguém escolheu e que não pertence à escala de espaçamento da marca.

   O primeiro perde a margem de cima para o topo da barra lateral alinhar com o
   campo de busca ao lado. */
#container .front-page-button p {
    margin: 0 0 var(--sa-3);
}

#container .front-page-button p:first-child {
    margin-top: 0;
}

#container .front-page-button p:last-child {
    margin-bottom: var(--sa-5);
}

/* A segunda chamada ("Consultar chamado") é a alternativa, não a oferta
   principal: uma ação primária por tela, como no site. */
#container .front-page-button .green.button,
#container .front-page-button .green.button:visited {
    background: var(--sa-superficie);
    border-color: var(--sa-borda-campo);   /* 3,64:1 sobre branco */
    box-shadow: none;
    color: var(--sa-navy);                 /* 15,59:1 */
}

#container .front-page-button .green.button:hover {
    background: var(--sa-turquesa-fundo);
    border-color: var(--sa-teal);
    color: var(--sa-acao-forte);           /* 5,97:1 sobre #E7F2F1 */
}

/* O corpo da página inicial é um `.thread-body` — a mesma classe do corpo de
   uma mensagem —, então herda a moldura de mensagem do `thread.css`. Aqui ele
   é texto de página, não uma fala de ninguém: sai a caixa. */
#container #landing_page .thread-body {
    padding: 0;
    background: none;
    border: 0;
    overflow-x: visible;
}

#container #landing_page .main-content {
    width: auto;
    max-width: 620px;
}

/* Os artigos em destaque, quando a base de conhecimento está ligada. */
#container .featured-category.front-page {
    margin-bottom: var(--sa-4);
}

#container .article-headline {
    margin-bottom: var(--sa-3);
}

/* -------------------------------------------------------------------------
   11. Avisos e etiquetas
   -------------------------------------------------------------------------
   Os quatro pares fundo/texto vêm do site já medidos; aqui só entram nos
   seletores do osTicket.
   ------------------------------------------------------------------------- */

#msg_notice,
#container #msg_notice {
    background: var(--sa-sucesso-fundo);
    border: 1px solid rgba(31, 107, 78, .25);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-sucesso-texto);   /* #1F6B4E sobre #DFF0E8 = 4,88:1 */
    padding: var(--sa-3) var(--sa-4);
}

#msg_warning,
#container #msg_warning,
#container .warning-banner {
    background: var(--sa-alerta-fundo);
    border: 1px solid rgba(138, 95, 20, .25);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-alerta-texto);    /* #8A5F14 sobre #FBF0DC = 5,05:1 */
    padding: var(--sa-3) var(--sa-4);
}

#msg_error,
#container #msg_error {
    background: var(--sa-erro-fundo);
    border: 1px solid rgba(156, 43, 43, .25);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-erro-texto);      /* #9C2B2B sobre #F9E6E3 = 6,17:1 */
    padding: var(--sa-3) var(--sa-4);
}

#msg_info,
#container #msg_info {
    background: var(--sa-info-fundo);
    border: 1px solid rgba(31, 95, 102, .25);
    border-radius: var(--sa-raio-sm);
    color: var(--sa-info-texto);      /* #1F5F66 sobre #E7F2F1 = 5,54:1 */
    padding: var(--sa-3) var(--sa-4);
}

/* As faixas do topo da página (`.error_bar`, `.warning_bar`, `.notice_bar`)
   ficam FORA do `#container` — são irmãs dele no `header.inc.php`. */
.error_bar,
.warning_bar,
.notice_bar {
    max-width: 1000px;
    margin: var(--sa-5) auto 0;
    padding: var(--sa-3) var(--sa-4);
    border-radius: var(--sa-raio-sm);
    font-family: var(--sa-fonte-corpo);
}

#container .label {
    padding: 2px var(--sa-2);
    border-radius: var(--sa-raio-pill);
    font-family: var(--sa-fonte-titulo);
    font-size: 11px;
    font-weight: 700;
    text-shadow: none;
    background-color: var(--sa-acao);
    color: var(--sa-superficie);
}

/* -------------------------------------------------------------------------
   12. Larguras pequenas
   -------------------------------------------------------------------------
   O upstream não tem UMA media query — foi desenhado quando o portal só era
   aberto no computador. Hoje quem abre um chamado costuma estar no celular,
   na praia, com o aparelho na mão.

   O grosso já é fluido pelas regras acima (`#container` sem largura fixa,
   tabelas em 100%, campos em 100%). O que sobra aqui é o que só faz sentido
   estreito.
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
    body {
        padding: 0 var(--sa-2) var(--sa-5);
    }

    #container {
        margin: var(--sa-3) auto;
        border-radius: var(--sa-raio);
    }

    /* O bloco de identificação ("Ana Handoff | Perfil | Sair") vira uma linha
       PRÓPRIA, embaixo do logotipo — lado a lado, em 390px, ele espremia a
       marca.

       O `order` é necessário porque no `header.inc.php` esse bloco vem ANTES
       do logotipo na marcação (ele depende do `float:right` para ir ao topo).
       Tirando o float sem reordenar, o nome do cliente apareceria ACIMA da
       marca — que é exatamente o contrário do que se quer. */
    #header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sa-2);
        padding: var(--sa-4) var(--sa-4) var(--sa-3);
    }

    #header .pull-right,
    #header .flush-right {
        float: none;
        order: 2;
        text-align: left;
    }

    #header #logo {
        order: 1;
    }

    #header #logo img {
        max-height: 36px;
        max-width: 200px;
    }

    #nav {
        margin: 0 var(--sa-4);
        gap: var(--sa-1);
    }

    #nav li a {
        padding: var(--sa-2) var(--sa-3);
        font-size: 13px;
    }

    #content {
        margin: 0 var(--sa-4);
        padding: var(--sa-4) 0 var(--sa-5);
    }

    #container h1 {
        font-size: 22px;
    }

    /* Os dois quadros de dados do chamado são `<td width="50%">` lado a lado
       dentro do `#ticketInfo`. Em 390px cada um fica com ~180px e o e-mail
       estoura. `width` ali é ATRIBUTO de apresentação, não estilo em linha —
       qualquer declaração de folha o vence, sem `!important`. */
    #container #ticketInfo > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 0 0 var(--sa-4);
    }

    #container .thread-entry.avatar,
    #container .thread-entry.response.avatar {
        margin-left: 0;
        margin-right: 0;
    }

    /* Sem os 60px de recuo, o avatar deslocado por margem negativa sairia
       para fora do cartão. */
    #container .thread-entry > .avatar {
        display: none;
    }

    #container .thread-entry.avatar .header:before,
    #container .thread-entry.avatar .header:after {
        display: none;
    }

    #container p.buttons {
        flex-direction: column;
        align-items: stretch;
    }

    #container #reply {
        padding: var(--sa-4);
    }

    #container #ticketSearchForm {
        flex-direction: column;
        align-items: stretch;
    }

    /* `flex-basis` mede o eixo PRINCIPAL. Em coluna, o eixo principal é o
       vertical — o `flex: 1 1 200px` da linha larga viraria 200px de ALTURA e
       o campo de busca ficaria com cara de caixa de texto. */
    #container #ticketSearchForm input[type="text"] {
        flex: 0 0 auto;
    }

    #container #ticketSearchForm .pull-right {
        margin-left: 0;
        flex-wrap: wrap;
    }

    /* O piso de 280px da linha larga estouraria o painel em 390px, onde
       sobram ~278px úteis. Aqui a coluna já é inteira, então não há disputa
       de espaço e o piso não faz falta. */
    #container #ticketSearchForm .pull-right select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* As duas colunas da base de conhecimento (`.span8` de 66% e `.span4` de
       29,5%) empilham: em 390px o cartão de categoria ficava com 110px e cada
       título quebrava em quatro linhas. */
    #container .span4,
    #container .span8 {
        display: block;
        width: auto;
        margin: 0 0 var(--sa-4);
    }

    #container .sidebar {
        float: none;
        width: auto;
    }

    #container .states {
        float: none;
        display: flex;
        margin-top: var(--sa-2);
    }

    /* A LISTA DE CHAMADOS EM 390px.

       `#ticketTable` tem cinco colunas e NENHUM invólucro no HTML — não há
       onde pendurar um `overflow-x` sem editar `tickets.inc.php`. Por isso a
       própria tabela vira o contêiner de rolagem.

       A alternativa seria esconder colunas por `nth-child`. Foi descartada:
       as colunas saem de `tickets.inc.php` e mudam de ordem conforme a
       configuração — esconder pela posição apagaria a coluna errada no dia em
       que isso acontecer, e apagaria calado. Rolar preserva os cinco dados.

       `min-width` no `<tbody>` porque, com `display:block` na tabela, o
       navegador monta uma tabela anônima interna que encolhe até caber; sem
       um piso, as colunas se espremem em vez de rolar. */
    #container #ticketTable {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #container #ticketTable thead,
    #container #ticketTable tbody {
        min-width: 560px;
    }

    #container #ticketTable th,
    #container #ticketTable td {
        padding: var(--sa-2) var(--sa-3);
    }

    #container #kb > li {
        padding: var(--sa-4);
    }
}

/* -------------------------------------------------------------------------
   13. Impressão e movimento
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #container * {
        transition: none;
    }
}
/* ===== SURFAPP: fim do bloco gerado ===== */