/* CS (Customer Support) styles */
:root{
  --cs-blue:#3db7ff;
  --cs-indigo:#1f58d1;
  --cs-bg:#f7fbff;
  --cs-border:#e7eef7;
  --cs-text:#222;
  --cs-muted:#6b7480;
}

#km-cs .inner{ width:min(1100px, 92%); margin:0 auto; }

.cs-hero{ padding:64px 0 24px; background:linear-gradient(180deg, #e9f6ff 0%, #ffffff 70%); border-bottom:1px solid var(--cs-border); }
.cs-hero h1{ font-size:36px; font-weight:800; color:var(--cs-indigo); letter-spacing:-0.02em; margin:0 0 6px; }
.cs-hero p{ color:var(--cs-muted); margin:0 0 18px; }
.cs-hero .actions{ margin:8px 0 16px; }
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid #d8e7f5;background:#fff;cursor:pointer;}
.btn.primary{ background:linear-gradient(180deg, var(--cs-blue), #5ec7ff); border:0; color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(61,183,255,.35); }
.btn.small{ padding:6px 10px; font-size:13px; border-radius:8px; }
.btn.line{background:#fff;border:1px solid var(--cs-border);height: 42px;background: #1f58d1;color: #fff;}

.cs-search{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.cs-search input[type="text"]{ flex:1; height:42px; border-radius:10px; border:1px solid var(--cs-border); padding:0 12px; }

.cs-list{ padding:26px 0 80px; }
.list-head{ display:flex; align-items:end; gap:10px; margin:10px 0 12px; }
.list-head h2{ margin:0; font-size:22px; font-weight:800; }
.list-head .muted{ color:var(--cs-muted); font-size:14px; }

.empty{ padding:26px; border:1px dashed var(--cs-border); border-radius:12px; color:#7f8a97; background:#fafcff; text-align:center; }

.q-list{ display:grid; grid-template-columns:1fr; gap:10px; }
.q{ padding:14px 16px; border:1px solid var(--cs-border); border-radius:12px; background:#fff; display:flex; justify-content:space-between; align-items:center; }
.q .title{ display:flex; gap:10px; align-items:center; font-weight:700; color:#2d2d2d; }
.q .title .subj{ font-weight:500; color:#4b5563; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.q .meta{ display:flex; gap:8px; align-items:center; color:#6b7480; }
.chip{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; font-size:12px; background:#eef4ff; color:#4162d0; border:1px solid #dfe9ff; }
.chip.waiting{ background:#eef7ff; color:#1f58d1; border-color:#d9e9ff; }
.chip.answered{ background:#eafff5; color:#008d49; border-color:#b9f1d7; }

.pager{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px; }
.pages a, .pages .cur{ margin:0 3px; }
.pages .cur{ font-weight:800; color:var(--cs-indigo); }

/* Modal */
.modal{position:fixed;inset:0;display:block;z-index: 2000;}
.modal[hidden]{ display:none; }
.modal-dim{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px, 92vw);background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.2);}
.modal-x{ position:absolute; right:12px; top:10px; width:36px; height:36px; border:0; background:transparent; font-size:26px; cursor:pointer; }
.modal-body h3{ margin:0 0 12px; font-size:20px; font-weight:800; color:#1f2c45; }
.modal-body label{ display:block; margin:10px 0; }
.modal-body input[type="text"], .modal-body input[type="password"], .modal-body textarea{ width:100%; border:1px solid var(--cs-border); border-radius:10px; padding:10px 12px; }
.modal-body .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-body .tip{ color:#7a8697; font-size:13px; margin-top:6px; }
.modal-body .btns{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.view-result{ margin-top:8px; background:#f9fbff; border:1px solid var(--cs-border); border-radius:12px; padding:12px; }
.view-result .v-subj{ margin:0 0 8px; font-size:18px; font-weight:800; color:#2b3f76; }
.view-result .v-msg{ white-space:pre-wrap; color:#1f2c45; margin-bottom:12px; overflow-wrap:anywhere; word-break:break-word; }
.view-result .v-reply-head{ margin:8px 0 6px; font-size:16px; font-weight:800; color:#0b4a2f; }
.view-result .v-reply{ white-space:pre-wrap; background:#f3fdf7; border:1px solid #c9f1d9; border-radius:10px; padding:10px; color:#0b4a2f; }

@media (max-width: 640px){
  .cs-hero h1{ font-size:28px; }
  .modal-body .grid{ grid-template-columns:1fr; }
}

/* Tables inside CS page: prevent breaking with long text */
#km-cs table{ width:100%; border-collapse:collapse; table-layout:fixed; }
#km-cs th, #km-cs td{ padding:8px 10px; border-top:1px solid var(--cs-border); color:var(--cs-text); vertical-align:top; word-break:break-word; overflow-wrap:anywhere; }

/* Mobile refinements: <=500px */
@media (max-width: 500px){
  .cs-search{flex-direction: row;align-items:stretch;}
  .cs-search button{width: 50px;height: 40px;font-size: 14px;padding: 0;display: flex;align-items: center;justify-content: center;}

  .q{ flex-direction:column; align-items:flex-start; gap:6px; }
  .q .meta{ width:100%; justify-content:space-between; flex-wrap:wrap; row-gap:6px; }
  .q .title{ flex-wrap:wrap; }
  .q .title .who{ flex:0 0 auto; }
  .q .title .subj{ flex:1 1 100%; }

  .pager{ flex-wrap:wrap; row-gap:6px; }

  /* Make tables resilient on very small screens */
  #km-cs table{ table-layout:fixed; }
  #km-cs th, #km-cs td{ white-space:normal; }
  .list-head{
    flex-direction: column;
    align-items: flex-start;
  }
}