1|/*
     2| * ZhiyinAgent UI — CSS Style Reference
     3| * Generated from zhiyin-agent-ui.js inline styles.
     4| * Use this file for custom theme overrides or offline reference.
     5| * Import on your page AFTER zhiyin-agent-ui.js to override defaults.
     6| */
     7|
     8|/* ── Design Tokens ─────────────────────────────────────────────────────── */
     9|
    10|:root {
    11|  --zy-primary: #7A958B;
    12|  --zy-primary-light: #B5C9BF;
    13|  --zy-bg: #F8F5F0;
    14|  --zy-surface: #FFFFFF;
    15|  --zy-text: #3D3A35;
    16|  --zy-text-secondary: #6B6760;
    17|  --zy-border: #B5C9BF;
    18|  --zy-accent: #8BA4A0;
    19|  --zy-success: #5B8C5A;
    20|  --zy-shadow: 0 4px 20px rgba(60, 42, 30, 0.10);
    21|  --zy-shadow-lg: 0 8px 40px rgba(60, 42, 30, 0.14);
    22|  --zy-radius: 14px;
    23|  --zy-radius-sm: 8px;
    24|  --zy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    25|             "Microsoft YaHei", sans-serif;
    26|}
    27|
    28|/* ── Reset ─────────────────────────────────────────────────────────────── */
    29|
    30|.zy-agent-reset,
    31|.zy-agent-reset *,
    32|.zy-agent-reset *::before,
    33|.zy-agent-reset *::after {
    34|  box-sizing: border-box;
    35|}
    36|
    37|/* ── Inline Container ──────────────────────────────────────────────────── */
    38|
    39|/* Fixed top-center bar for inline messages */
    40|.zy-agent-inline-container {
    41|  position: fixed;
    42|  top: 72px;
    43|  left: 50%;
    44|  transform: translateX(-50%);
    45|  z-index: 9990;
    46|  width: 100%;
    47|  max-width: 520px;
    48|  pointer-events: none;
    49|  display: flex;
    50|  flex-direction: column;
    51|  align-items: center;
    52|  gap: 10px;
    53|}
    54|
    55|/* Single inline message card */
    56|.zy-agent-inline-card {
    57|  pointer-events: auto;
    58|  background: var(--zy-surface);
    59|  border: 1px solid var(--zy-border);
    60|  border-radius: var(--zy-radius);
    61|  box-shadow: var(--zy-shadow-lg);
    62|  padding: 16px 18px;
    63|  width: 100%;
    64|  font-family: var(--zy-font);
    65|  animation: zyFadeIn 0.35s ease-out;
    66|  display: flex;
    67|  gap: 12px;
    68|  align-items: flex-start;
    69|}
    70|
    71|.zy-agent-inline-card.zy-exit {
    72|  animation: zyFadeOut 0.4s ease-in forwards;
    73|}
    74|
    75|/* ── Sidebar ───────────────────────────────────────────────────────────── */
    76|
    77|.zy-agent-sidebar {
    78|  position: fixed;
    79|  top: 0;
    80|  right: 0;
    81|  width: 320px;
    82|  height: 100vh;
    83|  z-index: 10000;
    84|  background: var(--zy-surface);
    85|  border-left: 1px solid var(--zy-border);
    86|  box-shadow: var(--zy-shadow-lg);
    87|  font-family: var(--zy-font);
    88|  display: flex;
    89|  flex-direction: column;
    90|  animation: zySlideRight 0.3s ease-out;
    91|  transform: translateX(0);
    92|  transition: transform 0.3s ease;
    93|}
    94|
    95|.zy-agent-sidebar.zy-closed {
    96|  transform: translateX(100%);
    97|}
    98|
    99|.zy-agent-sidebar-header {
   100|  display: flex;
   101|  align-items: center;
   102|  justify-content: space-between;
   103|  padding: 14px 16px;
   104|  border-bottom: 1px solid var(--zy-border);
   105|  background: var(--zy-bg);
   106|  flex-shrink: 0;
   107|}
   108|
   109|.zy-agent-sidebar-header-left {
   110|  display: flex;
   111|  align-items: center;
   112|  gap: 8px;
   113|  font-size: 15px;
   114|  font-weight: 600;
   115|  color: var(--zy-text);
   116|}
   117|
   118|.zy-agent-sidebar-close {
   119|  background: none;
   120|  border: none;
   121|  cursor: pointer;
   122|  font-size: 20px;
   123|  color: var(--zy-text-secondary);
   124|  padding: 4px 8px;
   125|  line-height: 1;
   126|  border-radius: 6px;
   127|  transition: background 0.15s;
   128|}
   129|
   130|.zy-agent-sidebar-close:hover {
   131|  background: var(--zy-border);
   132|}
   133|
   134|.zy-agent-sidebar-messages {
   135|  flex: 1;
   136|  overflow-y: auto;
   137|  padding: 14px 14px 8px;
   138|  display: flex;
   139|  flex-direction: column;
   140|  gap: 12px;
   141|  scroll-behavior: smooth;
   142|}
   143|
   144|.zy-agent-sidebar-input-wrap {
   145|  border-top: 1px solid var(--zy-border);
   146|  padding: 10px 12px;
   147|  display: flex;
   148|  gap: 8px;
   149|  flex-shrink: 0;
   150|  background: var(--zy-bg);
   151|}
   152|
   153|.zy-agent-sidebar-input-wrap input {
   154|  flex: 1;
   155|  border: 1px solid var(--zy-border);
   156|  border-radius: 20px;
   157|  padding: 10px 16px;
   158|  font-size: 14px;
   159|  font-family: var(--zy-font);
   160|  color: var(--zy-text);
   161|  background: var(--zy-surface);
   162|  outline: none;
   163|  transition: border-color 0.2s;
   164|}
   165|
   166|.zy-agent-sidebar-input-wrap input:focus {
   167|  border-color: var(--zy-primary);
   168|}
   169|
   170|.zy-agent-sidebar-input-wrap button {
   171|  width: 42px;
   172|  height: 42px;
   173|  border: none;
   174|  border-radius: 50%;
   175|  background: var(--zy-primary);
   176|  color: #fff;
   177|  font-size: 18px;
   178|  cursor: pointer;
   179|  flex-shrink: 0;
   180|  transition: background 0.2s, transform 0.12s;
   181|}
   182|
   183|.zy-agent-sidebar-input-wrap button:hover {
   184|  background: var(--zy-primary-light);
   185|}
   186|
   187|.zy-agent-sidebar-input-wrap button:active {
   188|  transform: scale(0.94);
   189|}
   190|
   191|/* ── Bubble ────────────────────────────────────────────────────────────── */
   192|
   193|.zy-agent-bubble-btn {
   194|  position: fixed;
   195|  bottom: 28px;
   196|  right: 28px;
   197|  z-index: 10001;
   198|  width: 56px;
   199|  height: 56px;
   200|  border-radius: 50%;
   201|  border: none;
   202|  background: var(--zy-primary);
   203|  color: #fff;
   204|  font-size: 24px;
   205|  cursor: pointer;
   206|  box-shadow: var(--zy-shadow-lg);
   207|  display: flex;
   208|  align-items: center;
   209|  justify-content: center;
   210|  transition: transform 0.2s, box-shadow 0.2s;
   211|}
   212|
   213|.zy-agent-bubble-btn:hover {
   214|  transform: scale(1.08);
   215|}
   216|
   217|.zy-agent-bubble-btn:active {
   218|  transform: scale(0.94);
   219|}
   220|
   221|.zy-agent-bubble-btn.zy-has-unread::after {
   222|  content: '';
   223|  position: absolute;
   224|  top: 2px;
   225|  right: 2px;
   226|  width: 14px;
   227|  height: 14px;
   228|  border-radius: 50%;
   229|  background: #E74C3C;
   230|  border: 2px solid #fff;
   231|}
   232|
   233|.zy-agent-bubble-popup {
   234|  position: fixed;
   235|  bottom: 96px;
   236|  right: 28px;
   237|  z-index: 10000;
   238|  width: 300px;
   239|  background: var(--zy-surface);
   240|  border: 1px solid var(--zy-border);
   241|  border-radius: var(--zy-radius);
   242|  box-shadow: var(--zy-shadow-lg);
   243|  font-family: var(--zy-font);
   244|  padding: 14px 16px;
   245|  animation: zyPopUp 0.3s ease-out;
   246|}
   247|
   248|.zy-agent-bubble-popup.zy-exit {
   249|  animation: zyPopDown 0.25s ease-in forwards;
   250|}
   251|
   252|.zy-agent-bubble-panel {
   253|  position: fixed;
   254|  bottom: 96px;
   255|  right: 20px;
   256|  z-index: 10000;
   257|  width: 340px;
   258|  height: 460px;
   259|  background: var(--zy-surface);
   260|  border: 1px solid var(--zy-border);
   261|  border-radius: var(--zy-radius);
   262|  box-shadow: var(--zy-shadow-lg);
   263|  font-family: var(--zy-font);
   264|  display: flex;
   265|  flex-direction: column;
   266|  animation: zyScaleIn 0.25s ease-out;
   267|  transform-origin: bottom right;
   268|}
   269|
   270|.zy-agent-bubble-panel.zy-closed {
   271|  display: none;
   272|}
   273|
   274|.zy-agent-bubble-panel-header {
   275|  display: flex;
   276|  align-items: center;
   277|  justify-content: space-between;
   278|  padding: 12px 15px;
   279|  border-bottom: 1px solid var(--zy-border);
   280|  background: var(--zy-bg);
   281|  border-radius: var(--zy-radius) var(--zy-radius) 0 0;
   282|  flex-shrink: 0;
   283|}
   284|
   285|.zy-agent-bubble-panel-header-left {
   286|  display: flex;
   287|  align-items: center;
   288|  gap: 8px;
   289|  font-size: 14px;
   290|  font-weight: 600;
   291|  color: var(--zy-text);
   292|}
   293|
   294|.zy-agent-bubble-panel-close {
   295|  background: none;
   296|  border: none;
   297|  cursor: pointer;
   298|  font-size: 18px;
   299|  color: var(--zy-text-secondary);
   300|  padding: 2px 6px;
   301|  line-height: 1;
   302|  border-radius: 6px;
   303|}
   304|
   305|.zy-agent-bubble-panel-close:hover {
   306|  background: var(--zy-border);
   307|}
   308|
   309|.zy-agent-bubble-panel-messages {
   310|  flex: 1;
   311|  overflow-y: auto;
   312|  padding: 12px 14px 6px;
   313|  display: flex;
   314|  flex-direction: column;
   315|  gap: 10px;
   316|  scroll-behavior: smooth;
   317|}
   318|
   319|.zy-agent-bubble-panel-input-wrap {
   320|  border-top: 1px solid var(--zy-border);
   321|  padding: 8px 10px;
   322|  display: flex;
   323|  gap: 6px;
   324|  flex-shrink: 0;
   325|}
   326|
   327|.zy-agent-bubble-panel-input-wrap input {
   328|  flex: 1;
   329|  border: 1px solid var(--zy-border);
   330|  border-radius: 18px;
   331|  padding: 8px 14px;
   332|  font-size: 13px;
   333|  font-family: var(--zy-font);
   334|  color: var(--zy-text);
   335|  background: var(--zy-bg);
   336|  outline: none;
   337|  transition: border-color 0.2s;
   338|}
   339|
   340|.zy-agent-bubble-panel-input-wrap input:focus {
   341|  border-color: var(--zy-primary);
   342|}
   343|
   344|.zy-agent-bubble-panel-input-wrap button {
   345|  width: 36px;
   346|  height: 36px;
   347|  border: none;
   348|  border-radius: 50%;
   349|  background: var(--zy-primary);
   350|  color: #fff;
   351|  font-size: 16px;
   352|  cursor: pointer;
   353|  flex-shrink: 0;
   354|  transition: background 0.2s, transform 0.12s;
   355|}
   356|
   357|.zy-agent-bubble-panel-input-wrap button:hover {
   358|  background: var(--zy-primary-light);
   359|}
   360|
   361|.zy-agent-bubble-panel-input-wrap button:active {
   362|  transform: scale(0.94);
   363|}
   364|
   365|/* ── Shared Message Component ──────────────────────────────────────────── */
   366|
   367|.zy-msg {
   368|  display: flex;
   369|  gap: 10px;
   370|  align-items: flex-start;
   371|  animation: zyFadeIn 0.3s ease-out;
   372|}
   373|
   374|.zy-msg-avatar {
   375|  width: 34px;
   376|  height: 34px;
   377|  border-radius: 50%;
   378|  background: var(--zy-bg);
   379|  border: 1.5px solid var(--zy-border);
   380|  display: flex;
   381|  align-items: center;
   382|  justify-content: center;
   383|  font-size: 18px;
   384|  flex-shrink: 0;
   385|}
   386|
   387|.zy-msg-body {
   388|  flex: 1;
   389|  min-width: 0;
   390|}
   391|
   392|.zy-msg-sender {
   393|  font-size: 12px;
   394|  font-weight: 600;
   395|  color: var(--zy-primary);
   396|  margin-bottom: 3px;
   397|}
   398|
   399|.zy-msg-text {
   400|  font-size: 14px;
   401|  color: var(--zy-text);
   402|  line-height: 1.55;
   403|  word-break: break-word;
   404|}
   405|
   406|.zy-msg-suggestions {
   407|  display: flex;
   408|  flex-wrap: wrap;
   409|  gap: 6px;
   410|  margin-top: 10px;
   411|}
   412|
   413|.zy-msg-suggestion {
   414|  border: 1px solid var(--zy-border);
   415|  background: var(--zy-surface);
   416|  color: var(--zy-primary);
   417|  font-size: 13px;
   418|  font-family: var(--zy-font);
   419|  padding: 7px 14px;
   420|  border-radius: 18px;
   421|  cursor: pointer;
   422|  white-space: nowrap;
   423|  transition: background 0.15s, border-color 0.15s;
   424|}
   425|
   426|.zy-msg-suggestion:hover {
   427|  background: var(--zy-primary);
   428|  color: #fff;
   429|  border-color: var(--zy-primary);
   430|}
   431|
   432|.zy-msg-time {
   433|  font-size: 11px;
   434|  color: var(--zy-text-secondary);
   435|  margin-top: 4px;
   436|}
   437|
   438|/* ── Typing Indicator ──────────────────────────────────────────────────── */
   439|
   440|.zy-typing {
   441|  display: flex;
   442|  align-items: center;
   443|  gap: 4px;
   444|  padding: 4px 0;
   445|}
   446|
   447|.zy-typing-dot {
   448|  width: 7px;
   449|  height: 7px;
   450|  border-radius: 50%;
   451|  background: var(--zy-text-secondary);
   452|  animation: zyBounce 1.3s infinite ease-in-out;
   453|}
   454|
   455|.zy-typing-dot:nth-child(2) {
   456|  animation-delay: 0.16s;
   457|}
   458|
   459|.zy-typing-dot:nth-child(3) {
   460|  animation-delay: 0.32s;
   461|}
   462|
   463|/* ── Animations ────────────────────────────────────────────────────────── */
   464|
   465|@keyframes zyFadeIn {
   466|  from { opacity: 0; transform: translateY(8px); }
   467|  to   { opacity: 1; transform: translateY(0); }
   468|}
   469|
   470|@keyframes zyFadeOut {
   471|  from { opacity: 1; transform: translateY(0); }
   472|  to   { opacity: 0; transform: translateY(-6px); }
   473|}
   474|
   475|@keyframes zySlideRight {
   476|  from { transform: translateX(100%); }
   477|  to   { transform: translateX(0); }
   478|}
   479|
   480|@keyframes zyPopUp {
   481|  from { opacity: 0; transform: translateY(12px) scale(0.94); }
   482|  to   { opacity: 1; transform: translateY(0) scale(1); }
   483|}
   484|
   485|@keyframes zyPopDown {
   486|  from { opacity: 1; transform: translateY(0) scale(1); }
   487|  to   { opacity: 0; transform: translateY(8px) scale(0.94); }
   488|}
   489|
   490|@keyframes zyScaleIn {
   491|  from { opacity: 0; transform: scale(0.92); }
   492|  to   { opacity: 1; transform: scale(1); }
   493|}
   494|
   495|@keyframes zyBounce {
   496|  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
   497|  30%           { transform: translateY(-5px); opacity: 1; }
   498|}
   499|
   500|/* ── Responsive: Mobile ───────────────────────────────────────────────── */
   501|