/* WerkSelekt Anfragen – hochwertiges, responsives UI
   Datei: assets/ws-anfragen.css
*/
 
:root {
  --ws-primary: #1F3A5F;
  --ws-primary-2: #274B7A;
  --ws-primary-soft: #EFF6FF;
  --ws-primary-border: #B5D4F4;
  --ws-bg: #F6F8FB;
  --ws-surface: #FFFFFF;
  --ws-surface-soft: #F8FAFC;
  --ws-border: #E2E8F0;
  --ws-border-soft: #EEF2F7;
  --ws-text: #0F2744;
  --ws-text-soft: #5E718D;
  --ws-muted: #94A3B8;
  --ws-success-bg: #EAF3DE;
  --ws-success: #27500A;
  --ws-warning-bg: #FAEEDA;
  --ws-warning: #633806;
  --ws-danger-bg: #FCEBEB;
  --ws-danger: #A32D2D;
  --ws-radius-lg: 18px;
  --ws-radius-md: 12px;
  --ws-radius-sm: 9px;
  --ws-shadow-soft: 0 18px 45px rgba(15, 39, 68, 0.08);
  --ws-shadow-card: 0 8px 24px rgba(15, 39, 68, 0.07);
}
 
.ws-anfragen-app,
.ws-anfragen-app *,
.ws-ak-modal,
.ws-ak-modal * { box-sizing: border-box; }
 
.ws-anfragen-app {
  display: flex;
  height: calc(100vh - 150px);
  min-height: 620px;
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ws-border);
  font-size: 14px;
  background: var(--ws-bg);
  color: var(--ws-text);
  box-shadow: var(--ws-shadow-soft);
}
 
.ws-sidebar {
  width: 310px;
  flex-shrink: 0;
  background: var(--ws-surface);
  border-right: 1px solid var(--ws-border);
  display: flex;
  flex-direction: column;
}
 
.ws-sidebar-head {
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--ws-border-soft);
}
 
.ws-sidebar-head h3 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ws-primary);
  margin: 0 0 8px;
}
 
.ws-sidebar-head span { font-size: 13px; color: var(--ws-muted); }
 
.ws-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ws-border-soft);
  overflow: visible;
}
 
.ws-fr {
  width: 100%;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--ws-border);
  background: #fff;
  color: var(--ws-text-soft);
  border-radius: 999px;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .16s ease;
}
 
.ws-fr:hover { background: var(--ws-surface-soft); color: var(--ws-primary); border-color: var(--ws-primary-border); }
.ws-fr.active { background: var(--ws-primary-soft); color: var(--ws-primary); border-color: var(--ws-primary-border); box-shadow: inset 0 0 0 1px rgba(181, 212, 244, .35); }
 
.ws-neue-anfrage-btn {
  margin: 14px;
  padding: 11px 14px;
  background: var(--ws-primary);
  color: #fff;
  border: none;
  border-radius: var(--ws-radius-sm);
  font-size: 13px;
  cursor: pointer;
  width: calc(100% - 28px);
  font-weight: 700;
  transition: all .18s ease;
  box-shadow: 0 8px 18px rgba(31, 58, 95, .18);
}
.ws-neue-anfrage-btn:hover { background: var(--ws-primary-2); transform: translateY(-1px); }
.ws-neue-anfrage-btn:active { transform: translateY(0); }
 
.ws-chat-list { flex: 1; overflow-y: auto; padding: 0 0 8px; }
 
.ws-ci {
  position: relative;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ws-border-soft);
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background .16s ease, border-color .16s ease;
}
.ws-ci:hover { background: var(--ws-surface-soft); }
.ws-ci.active { background: var(--ws-primary-soft); }
.ws-ci.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: var(--ws-primary); }
 
.ws-ci-av,
.ws-ch-av { border-radius: 50%; background: linear-gradient(135deg, #E6F1FB, #F4F8FD); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0C447C; flex-shrink: 0; }
.ws-ci-av { width: 42px; height: 42px; font-size: 12px; }
.ws-ci-body { flex: 1; min-width: 0; }
.ws-ci-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ws-ci-name { font-size: 14px; font-weight: 700; color: var(--ws-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ci-time { font-size: 12px; color: var(--ws-muted); flex-shrink: 0; }
.ws-ci-prev { font-size: 13px; color: var(--ws-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.ws-ci-foot { display: flex; gap: 6px; align-items: center; }
.ws-sbadge { font-size: 11px; padding: 4px 9px; border-radius: 999px; font-weight: 700; }
.ws-s-offen { background: var(--ws-primary-soft); color: var(--ws-primary); }
.ws-s-bearb { background: var(--ws-warning-bg); color: var(--ws-warning); }
.ws-s-termin { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-s-done, .ws-s-bestaetigt { background: #F1F5F9; color: #475569; }
.ws-prio { color: #F59E0B; font-size: 13px; }
 
.ws-chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ws-bg); }
.ws-chat-head { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); padding: 14px 18px; border-bottom: 1px solid var(--ws-border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ws-ch-av { width: 44px; height: 44px; font-size: 13px; }
.ws-chat-meta { min-width: 0; }
.ws-ch-name { font-size: 15px; font-weight: 800; color: var(--ws-text); letter-spacing: -0.01em; }
.ws-ch-sub { font-size: 12px; color: var(--ws-muted); max-width: 760px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ch-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
 
.ws-ico-btn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--ws-border); background: var(--ws-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ws-primary); transition: all .16s ease; font-size: 0 !important; box-shadow: 0 3px 10px rgba(15, 39, 68, .04); }
.ws-ico-btn:hover { background: var(--ws-primary-soft); color: var(--ws-primary); border-color: var(--ws-primary-border); transform: translateY(-1px); }
.ws-ico-btn.active { background: var(--ws-primary-soft); color: var(--ws-primary); border-color: var(--ws-primary-border); }
.ws-prio-icon::before, #wsPrioBtn::before { content: "☆"; font-size: 19px; line-height: 1; }
.ws-prio-icon.active::before, #wsPrioBtn.active::before { content: "★"; color: #F59E0B; }
.ws-kal-icon::before, #wsKalBtn::before { content: "📅"; font-size: 15px; }
.ws-auftrag-icon::before, #wsAuftragBtn::before { content: "📋"; font-size: 15px; }
#wsWeiterleitungBtn::before { content: "🔀"; font-size: 15px !important; }
 
.ws-status-sel { min-height: 36px; font-size: 12px; border: 1px solid var(--ws-primary-border); border-radius: 10px; padding: 0 12px; color: var(--ws-primary); background: #fff; cursor: pointer; outline: none; font-weight: 700; }
 
.ws-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: radial-gradient(circle at top left, rgba(239, 246, 255, .55), transparent 38%), var(--ws-bg); }
.ws-msg { max-width: min(68%, 760px); display: flex; flex-direction: column; gap: 4px; }
.ws-msg.them { align-self: flex-start; }
.ws-msg.me { align-self: flex-end; }
.ws-mb { padding: 11px 15px; border-radius: 18px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.ws-msg.them .ws-mb { background: #fff; border: 1px solid var(--ws-border); color: var(--ws-text); border-radius: 5px 18px 18px 18px; box-shadow: 0 4px 14px rgba(15, 39, 68, .04); }
.ws-msg.me .ws-mb { background: var(--ws-primary); color: #fff; border-radius: 18px 18px 5px 18px; box-shadow: 0 8px 18px rgba(31, 58, 95, .16); }
.ws-mt { font-size: 11px; color: var(--ws-muted); display: flex; align-items: center; gap: 4px; }
.ws-msg.me .ws-mt { justify-content: flex-end; }
.ws-read { color: #2563EB; }
 
.ws-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ws-muted); gap: 10px; font-size: 14px; }
.ws-empty-icon { width: 54px; height: 54px; border-radius: 18px; background: #fff; border: 1px solid var(--ws-border); display: flex; align-items: center; justify-content: center; box-shadow: var(--ws-shadow-card); font-size: 24px; }
 
.ws-ak-card { background: #fff; border: 1px solid var(--ws-primary); border-radius: 16px; padding: 18px; max-width: 330px; align-self: flex-start; box-shadow: var(--ws-shadow-card); }
.ws-ak-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ws-ak-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ws-primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ws-ak-t { font-size: 14px; font-weight: 800; color: var(--ws-primary); }
.ws-ak-s { font-size: 11px; color: var(--ws-muted); }
.ws-ak-row { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--ws-border-soft); }
.ws-ak-row:last-of-type { border-bottom: none; }
.ws-akl { color: var(--ws-muted); }
.ws-akv { color: var(--ws-text); font-weight: 700; text-align: right; }
.ws-ak-btns { display: flex; gap: 8px; margin-top: 14px; }
.ws-ak-ok, .ws-ak-no, .ws-ak-dl { border-radius: 10px; padding: 10px; font-size: 12px; cursor: pointer; font-weight: 700; transition: all .16s ease; }
.ws-ak-ok { flex: 1; background: var(--ws-primary); color: #fff; border: none; }
.ws-ak-ok:hover { background: var(--ws-primary-2); }
.ws-ak-no { flex: 1; background: #fff; color: var(--ws-text-soft); border: 1px solid var(--ws-border); }
.ws-ak-confirmed { background: var(--ws-success-bg); border-radius: 10px; padding: 11px 12px; font-size: 12px; color: var(--ws-success); font-weight: 800; text-align: center; margin-top: 12px; }
.ws-ak-dl { width: 100%; background: var(--ws-surface-soft); color: var(--ws-primary); border: 1px solid var(--ws-border); text-align: center; margin-top: 8px; }
 
.ws-kal-panel { background: #fff; border-bottom: 1px solid var(--ws-border); padding: 16px 18px; flex-shrink: 0; }
.ws-kal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ws-kal-head button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--ws-border); background: #fff; color: var(--ws-primary); cursor: pointer; font-size: 18px; }
.ws-kal-title { font-size: 14px; font-weight: 800; color: var(--ws-primary); }
.ws-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; margin-bottom: 10px; }
.ws-kd { font-size: 10px; color: var(--ws-muted); padding: 4px; font-weight: 700; }
.ws-kday { font-size: 12px; padding: 7px 4px; border-radius: 9px; cursor: pointer; background: var(--ws-surface-soft); color: var(--ws-text-soft); }
.ws-kday.frei { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-kday.teil { background: var(--ws-warning-bg); color: var(--ws-warning); }
.ws-kday.voll { background: var(--ws-danger-bg); color: var(--ws-danger); }
.ws-kday.termin { background: var(--ws-primary); color: #fff; font-weight: 800; }
.ws-kday.grau { color: #CBD5E1; background: transparent; }
.ws-kal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ws-text-soft); }
.ws-kleg { display: flex; align-items: center; gap: 5px; }
.ws-kleg-dot { width: 9px; height: 9px; border-radius: 4px; }
 
.ws-input-bar { background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--ws-border); padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ws-ib-ico { width: 38px; height: 38px; border-radius: 13px; border: 1px solid var(--ws-border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ws-muted); flex-shrink: 0; font-size: 0 !important; transition: all .16s ease; }
.ws-ib-ico:hover { color: var(--ws-primary); background: var(--ws-primary-soft); border-color: var(--ws-primary-border); }
.ws-upload-icon::before, .ws-ib-ico::before { content: "📎"; font-size: 16px; }
.ws-ib-input { flex: 1; min-height: 42px; border: 1px solid var(--ws-border); border-radius: 999px; padding: 0 18px; font-size: 14px; outline: none; background: #fff; color: var(--ws-text); transition: all .16s ease; }
.ws-ib-input:focus { border-color: var(--ws-primary-border); box-shadow: 0 0 0 4px rgba(181, 212, 244, .25); }
.ws-send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--ws-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0 !important; transition: all .18s ease; box-shadow: 0 8px 18px rgba(31, 58, 95, .18); }
.ws-send-btn:hover { background: var(--ws-primary-2); transform: translateY(-1px); }
.ws-send-btn::before { content: "➤"; font-size: 16px; color: #fff; transform: translateX(1px); }
 
.ws-ak-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(15, 39, 68, .42); backdrop-filter: blur(5px); padding: 18px; }
.ws-ak-modal-content { background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 460px; box-shadow: 0 30px 80px rgba(15, 39, 68, .22); border: 1px solid rgba(255,255,255,.75); }
.ws-ak-modal-title { font-size: 18px; font-weight: 800; color: var(--ws-primary); margin-bottom: 18px; letter-spacing: -0.02em; }
.ws-form-row { margin-bottom: 14px; }
.ws-form-label { font-size: 12px; color: var(--ws-text-soft); margin-bottom: 6px; display: block; font-weight: 700; }
.ws-form-input { width: 100%; border: 1px solid var(--ws-border); border-radius: 11px; padding: 11px 13px; font-size: 14px; outline: none; color: var(--ws-text); background: #fff; transition: all .16s ease; }
.ws-form-input:focus { border-color: var(--ws-primary-border); box-shadow: 0 0 0 4px rgba(181, 212, 244, .25); }
 
#naFirmaSelect.ws-firma-select { display: block !important; width: 100% !important; height: 56px !important; min-height: 56px !important; padding: 0 42px 0 14px !important; font-size: 15px !important; line-height: normal !important; color: var(--ws-text) !important; background-color: #fff !important; border: 1px solid var(--ws-primary-border) !important; border-radius: 12px !important; font-family: inherit !important; font-weight: 600 !important; box-sizing: border-box !important; appearance: auto !important; -webkit-appearance: menulist !important; }
#naFirmaSelect.ws-firma-select option { font-size: 15px !important; color: var(--ws-text) !important; background: #fff !important; }
 
.ws-modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.ws-modal-ok, .ws-modal-cancel { flex: 1; border-radius: 12px; padding: 12px; font-size: 14px; cursor: pointer; font-weight: 800; transition: all .16s ease; }
.ws-modal-ok { background: var(--ws-primary); color: #fff; border: none; }
.ws-modal-ok:hover { background: var(--ws-primary-2); }
.ws-modal-cancel { background: #fff; color: var(--ws-text-soft); border: 1px solid var(--ws-border); }
.ws-modal-cancel:hover { background: var(--ws-surface-soft); }
.ws-loading { text-align: center; padding: 28px 16px; color: var(--ws-muted); font-size: 13px; }
 
.ws-chat-list::-webkit-scrollbar, .ws-messages::-webkit-scrollbar { width: 8px; }
.ws-chat-list::-webkit-scrollbar-thumb, .ws-messages::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
.ws-chat-list::-webkit-scrollbar-track, .ws-messages::-webkit-scrollbar-track { background: transparent; }
 
/* ── Mobile Fix ─────────────────────────────────────────── */
@media (max-width: 900px) {
 
  /* Elementor Container drumherum auf volle Höhe zwingen */
  .elementor-widget-shortcode,
  .elementor-widget-shortcode > .elementor-widget-container {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 70px);
  }
 
  .ws-anfragen-app {
    flex: 1;
    height: 100%;
    min-height: unset;
    flex-direction: column;
    border-radius: 0;
    border-left: none;
    border-right: none;
    overflow: hidden;
  }
 
  .ws-sidebar {
    width: 100%;
    max-height: 260px;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--ws-border);
  }
 
  .ws-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
 
  .ws-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
 
  .ws-input-bar {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
 
  .ws-msg { max-width: 86%; }
  .ws-ch-sub { max-width: 420px; }
}
 
@media (max-width: 560px) {
  .elementor-widget-shortcode,
  .elementor-widget-shortcode > .elementor-widget-container {
    height: calc(100dvh - 70px);
  }
 
  .ws-anfragen-app {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
 
  .ws-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-chat-head { align-items: flex-start; flex-wrap: wrap; }
  .ws-ch-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .ws-status-sel { flex: 1; }
  .ws-msg { max-width: 92%; }
  .ws-modal-btns { flex-direction: column; }
  .ws-ak-modal-content { padding: 22px; }
}