/* ========== 容器与排版 ========== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');

* {
    font-family: "Noto Sans SC", sans-serif;
    font-optical-sizing: auto;
}

.ttapi-wrap {
    max-width: 980px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;

    display:flex;
    flex-direction:column;
}

.ttapi-title {
    text-align: center;
    color: #333;
    margin-top: 0;
}

.ttapi-subtitle {
    margin: 10px 0 6px;
    color: #333;
}

.ttapi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.ttapi-col-flex {
    flex: 1;
    min-width: 340px;
}

.ttapi-col-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ttapi-textarea {
    font-family: "Noto Sans SC", sans-serif;
    font-style:normal;

    min-width: 280px;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    height: 330px;
    resize: none;
}

.tt-toolbar-container{
    display:flex;
}

.ttapi-textarea.is-short {
    height: 54px;
}

.tt-toolbar-preset-container{
    display: flex;
    flex-direction:column;

    gap:8px;
    padding:10px;
}
/* ========== 参数快捷按钮区 ========== */
.ttapi-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.tt-preset {
    text-align: center;
    width: auto;
    background-color: #000000;
    color: white;
    /* border: 2px #000000 solid; */
    border-radius: 15px;
    height: 40px;
    padding: 7px 8px 5px 8px;
    cursor: default;
}

.tt-preset img {
    height: 26px;
    width: 26px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;

    transition:0.3s ease;
}

.tt-preset img:hover{
    transform:scale(1.2,1.2);
}

.tt-toolbar-preset-div {
    gap: 10px;
    display: flex;
    flex-flow: wrap;
    border: 1px #ebebeb solid;
    border-radius: 8px;
    min-width: 280px;
    width: 100%;
    height: 120px;
    padding: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}
/* 通用按钮 */


.ttapi-btn {
    padding: 8px 8px 4px 8px;
    color: #fff;
    border: none;
    /*    border-radius: 8px;*/
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s ease;
}

.ttapi-btn--primary {
    background: #10b981;
}

.ttapi-btn--topleft-radius
{
    border-top-left-radius:8px;
}
.ttapi-btn--topright-radius {
    border-top-right-radius: 8px;
}
.ttapi-btn--bottomright-radius {
    border-bottom-right-radius: 8px;
}
.ttapi-btn--bottomleft-radius {
    border-bottom-left-radius: 8px;
}

.ttapi-btn--info {
    background: #3b82f6;
}
    .ttapi-btn--info:hover {
        background: #1750ad;
    }

.ttapi-btn--warn {
    background: #f59e0b;
}
.ttapi-btn--warn:hover {
    background: #b5760c;
}

.ttapi-btn--gray {
    background: #6b7280;
}
.ttapi-btn--gray:hover {
    background: #474c55;
}

.ttapi-btn--ghost {
    background: #9e9e9e;
    transition: 0.15s ease;
}

    .ttapi-btn--ghost:hover {
        background: #454545;
    }

/* 预设按钮选中态（外边框高亮） */
.flag-btn.is-active {
    outline: 2px solid rgba(16,185,129,.6);
    outline-offset: 2px;
}

/* 提交成功按钮的临时绿色高亮 */
#midjourney-submit.success {
    background-color: #16a34a !important;
    color: #fff !important;
    transition: background-color .3s ease;
}

#midjourney-submit {
    transition: background-color .3s ease;
}

    #midjourney-submit:hover {
        background-color: #0c9d6b;
    }

/* ========== 数值型参数面板 ========== */
.ttapi-numeric {

    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #ddd;
    border-radius: 10px;
    background: #fff;
}

.ttapi-field {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

    .ttapi-field:last-child {
        border-bottom: none;
    }

.ttapi-field__label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.ttapi-hint {
    font-weight: normal;
    color: #6b7280;
    margin-left: 8px;
    font-size: 12px;
}

.ttapi-field__controls {
    display: grid;
    grid-template-columns: 1fr 120px auto auto;
    gap: 10px;
    align-items: center;
}

    .ttapi-field__controls input[type="number"] {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

.ttapi-seg {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ttapi-seg__btn {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: #f9fafb;
    cursor: pointer;
}

    .ttapi-seg__btn.is-active {
        outline: 2px solid rgba(16,185,129,.6);
        outline-offset: 2px;
    }

.ttapi-clear {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: #fff;
    cursor: pointer;
}

/* ========== 结果与历史卡片 ========== */
.ttapi-panel {
    width: 100%;
    margin-top: 15px;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ttapi-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 10px;
}

.ttapi-imgbox img {
    width: 100%;
    border-radius: 8px;
/*    border: 1px solid #e5e5e5;*/
    display: block;
}

.ttapi-imgbox__tools {
    margin-top: 6px;
}

.ttapi-grid {
    flex-flow: wrap;
    display: flex;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 12px;
}

.ttapi-card {
    flex:0 0 250px;
/*    width:250px;*/
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}
    .ttapi-card img{
        width: 100%;
        border-radius: 8px 8px 0px 0px;
/*        margin-bottom: 8px;*/
/*        border: 1px solid #eee;*/
/*        cursor: zoom-in;*/
    }

.ttapi-card__prompt {
    font-weight: bold;
    margin-bottom: 6px;
    word-break: break-word;
    /* 默认折叠为 3 行，避免历史卡片过高 */
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background-color: #EEECEA;
    padding: 10px;
    border-radius: 8px;
}
    /* 展开态 */
    .ttapi-card__prompt.is-expanded {
        max-height: none;
        -webkit-line-clamp: unset;
    }
/* “展开/收起”按钮（轻量文本按钮） */
.ttapi-linkbtn {
    background: transparent;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    margin: 2px 0 6px 0;
}

    .ttapi-linkbtn:hover {
        text-decoration: underline;
    }

/* ========== 分页条 ========== */
.ttapi-pagination {
    justify-content: center;
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

/* ========== 原始 JSON（排障） ========== */
.ttapi-json {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #0b1020;
    color: #e6edf3;
    padding: 10px;
    border-radius: 8px;
    max-height: 320px;
    overflow: auto;
    display: none;
}

/* ========== 消息块 ========== */
.ttapi-msg {
    padding: 8px;
    border-radius: 10px;
}

.ttapi-msg--info {
    color: #0c5460;
    background: #d1ecf1;
    border: 1px solid #bee5eb;
}

.ttapi-msg--ok {
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.ttapi-msg--err {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* ========== 进度条 ========== */
.ttapi-progress {
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
}

.ttapi-progress__text {
    margin-bottom: 8px;
    color: #111827;
}

.ttapi-barwrap {
    width: 100%;
    height: 12px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.ttapi-bar {
    height: 12px;
    width: 0%;
    background: #10b981;
    transition: width .25s;
}

.ttapi-pct {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* ========== 弹窗 ========== */
.ttapi-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ttapi-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    padding: 16px;
    overflow: auto;
}

.ttapi-dialog__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ttapi-dialog__title {
    margin: 0;
    font-size: 16px;
}

.ttapi-dialog__imgs {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 10px;
}

.ttapi-modal-imgbox img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #eee;
}

.ttapi-modal-tools {
    margin-top: 6px;
}

.ttapi-historyCard{
    border-radius: 8px 8px 0px 0px;
}

#ttapi-toolbar-look
{
    transition: 0.2s ease;
}
#ttapi-toolbar-look:hover {
    background-color: #1e5bbe;
}

/* ===== Toast ===== */
.ttapi-toast-wrap {
  position: fixed;
  right: 20%;           /* 想放左边就改为 left:16px; 并去掉 right */
  top: 20%;          /* 想放顶部就改为 top:16px; 并去掉 bottom */
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;  /* 不影响页面操作 */
}

.ttapi-toast {
  min-width: 220px;
  max-width: 420px;
  background: rgba(32, 33, 36, 0.96);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;  /* 不可点击，避免影响当前操作 */
}

.ttapi-toast--show {
  opacity: 1;
  transform: translateY(0);
}

#show-usage {
    text-align: center;
    height: 50px;
    width: 150px;
    border-radius: 10px;
}
/* 状态色：信息/成功/错误 */
.ttapi-toast--info {
    background: rgba(32, 33, 36, 0.96);
}
.ttapi-toast--ok      { background: #16a34a; }   /* 绿色 */
.ttapi-toast--err     { background: #dc2626; }   /* 红色 */

/* 可选：在顶部展示时从上往下堆叠更自然 */
.ttapi-toast-wrap.is-top {
  top: 16px;
  bottom: auto;
  flex-direction: column;
}

.ttapi-card__time {
    border-radius: 8px;
    padding: 6px 0px 6px 0px;
    width: auto;
    text-align: center;
    background-color: #5b5b5b;
    color: white;
    cursor: default;
}

.border{
/*    border: 1px black solid;
    border-radius: 12px;*/
}

.tt-main-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background-color: #121214;
}

.tt-left-container{
    display:flex;
    gap: 12px;
}

.tt-prompt-container{
    display: flex;
    flex:1;
    flex-direction: column;
}

.tt-history-container {
    min-width: 670px;
    overflow-x:hidden;
    height:700px;
    display: flex;
    flex: 2;
    flex-direction:column;
}

.tt-preset-frame {
    padding: 5px;
    color: white;
    border-radius: 8px;
    background-color: #808080;
}

.tt-chip-close {
    cursor: pointer;
    margin-left: 6px;
    user-select: none;
    transition: 0.3s ease;
}

.tt-chip-close:hover{
    transform:scale(1.2,1.2);
}

    .preset-tag-btn {
        vertical-align: middle;
        height: 45px;
        border-radius: 8px;
        width: auto;
        padding: 8px 12px 8px 12px;
        text-align: center;
        cursor: pointer;
        transition: 0.3s ease;
        border: 1px #cdcdcd solid;
        background-color: #efefef;
        user-select: none;
    }

.preset-tag-btn:hover {
    
    background-color: #d0d0d0;
}

    .preset-tag-btn.is-active {
        color: white;
        background: grey;
        transition:0.3s ease;
    }

        .preset-tag-btn.is-active:hover {
            background: #5f5f5f;
        }



.border-radius-all {
    border-radius: 8px;
}

.tt-prompt-btn{
    gap:10px;
    display:flex;
    flex-flow:wrap; 
}

.tt-prompt-btn button{
    text-align:center;
    flex:1;
}

.tt-history-overflow {
    overflow: scroll;
    overflow-x: hidden;
}

#manual-jobid {
    margin-top: 12px;
    height: 40px;
}

/* ========== 历史卡封面：2×2 拼图 ========== */
.ttapi-cover4 {

  position: relative;
  width: 100%;
  height: 228px;                 /* 与“生成中”占位高度一致，视觉稳定 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;                      /* 小分隔，让四格区分更清晰 */
  border-radius: 8px 8px 0 0;    /* 与 .ttapi-card img 的上圆角一致 */
  overflow: hidden;
  background: #f5f5f5;           /* 没图时的底色 */
}

.ttapi-cover4__img,
.ttapi-cover4__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 保持铺满，超出裁切，四格更整齐 */
  display: block;
  background: #eee;              /* 占位/加载时的底色 */
}

/* 可选：鼠标悬停时稍微亮一点（与按钮风格相近） */
.ttapi-cover4__img:hover,
.ttapi-cover4__placeholder:hover {
  filter: brightness(1.03);
}

/* ===== 选项卡样式（新增） ===== */
.tt-tabs { margin: 16px auto; }
.tt-tab-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tt-tab {
    font-size: 20px;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tt-tab:hover { background: #e5e7eb; }
.tt-tab.is-active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.tt-tab-panels {
    width: 100%;
    min-width: 990px;
}
.tt-tab-panel { display: none; }
.tt-tab-panel.is-active { display: block; }

/* 默认2、默认3 空面板的行高/占位（按你的要求“加一些行高”） */
.tt-tab-panel--empty {
    line-height: 2.2; /* 提高行高 */
    min-height: 320px; /* 给点高度，空也不显得拥挤 */
    padding: 24px; /* 适度内边距 */
    /*  border: 1px dashed #e5e7eb;*/
    border-radius: 12px;
    color: #666;
    background: #121214;
}

/* Google Gemini Part */

.gemini-title {
    position: relative;
    margin-bottom: 8px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: black;
    text-shadow: 2px 2px 0px #b9b9b9;
    user-select: none;
    transition: 0.3s ease;
}

.gemini-main-container {
/*    box-shadow: 3px 3px 0px black;*/
    border-radius: 12px;
    padding: 20px;
    background-color: #121214;
    display: flex;
    gap: 15px;
/*    border: 1px #d3d3d3 solid;*/
    min-width: 800px;
}

.gemini-secmain-container {
    flex: 1 1 310px;
    flex-flow: column;
    display: flex;
    max-width: 450px;
    border-radius: 10px;
    border: 1px #313136 solid;
    background-color: #1A1A1E;
    padding: 10px;
}

.gemini-trdmain-container {
    flex: 1 1;
    border-radius: 10px;
    border: 1px grey solid;
/*    max-width: 645px;*/
    min-width: 440px;
    padding: 10px;
    flex-flow: wrap;
    display: flex;
    gap: 10px;
}

.gemini-textarea {
    text-shadow: 0px 0px 3px #ffffff6b;
    color: white;
    border: 1px #313136 solid;
    background-color: #18181C;
    min-height: 220px;
    width: 100%;
    box-shadow: 0px 0px 0px black;
    border-radius: 8px;
    padding: 10px;
    transition: 0.3s ease;
    resize: none;
}
.gemini-textarea:hover {
    box-shadow: 3px 3px 0px black;
}

.gemini-prompt-title {
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000;
    font-size: 23px;
    color: #ffffff;
    margin-bottom: 8px;
    user-select: none;
}

.gemini-submit {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #c3b600;
    color: black;
    width: 100%;
    box-shadow: 0px 0px 0px black;
    border-radius: 12px;
    padding: 10px;
    background-color: #ffd01f;
    cursor: pointer;
    user-select: none;
    transition: 0.12s ease;
    border: 1px #e1b200 solid;
    position: relative;
}
.gemini-submit:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-submit:active{
    box-shadow: 1px 1px 0px black;
    transform: translate(2px,2px);
}
.gemini-submit:active::before {
    filter: drop-shadow(2px 2px 0px black);
    width: 34px;
    height: 34px;
    top: -50px;
    left: -50px;
    position: absolute;
    content: url("https://www.pickeri.xyz/wp-content/uploads/2025/09/blink_02.png");
}

.gemini-result-img {
    position: relative;
    width: 100%;
    /*    height: 100%;*/
    border-radius: 10px;
}

.gemini-loading-text {
    text-align: center;
    font-size: 18px;
    color: black;
    margin: 15px;
}

.gemini-history-container {
    flex: 2 1;
}

.gemini-history-card {
    border: 3px #3b3b3b solid;
    /* border: 1px black solid; */
    overflow: hidden;
    border-radius: 12px;
    flex: 0 0 200px;
    cursor: pointer;
    transition: 0.3s ease;
    /* box-shadow: 0px 0px 1px #b5b5b5; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #161616;
    width: 200px;
    aspect-ratio: 1 / 1;
    height: auto;
}
.gemini-history-card:hover {
    box-shadow: 0px 0px 5px #828282;
}

.gemini-history-card:hover .gemini-result-delete {
    opacity: 1;
}
.gemini-history-card:hover .gemini-result-download {
    opacity: 1;
}
.gemini-history-card:hover .gemini-result-star {
    opacity: 1;
}
.gemini-history-card:hover .gemini-result-addref {
     opacity: 1;
}

.gemini-history-card:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 3px #484848;
}

.gemini-result-delete {
    height: 32px;
    width: 32px;
    border: 1px #c10808 solid;
    border-radius: 8px;
    background-color: #fb2f2f;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow:0px 0px 0px black;
}

.gemini-result-delete {
    height: 32px;
    width: 32px;
    border: 1px #c10808 solid;
    border-radius: 8px;
    background-color: #fb2f2f;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}

.gemini-result-download {
    height: 32px;
    width: 32px;
    border: 1px #2063d1 solid;
    border-radius: 8px;
    background-color: #3B82F6;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}
.gemini-result-download-img {
    right: -3px;
    bottom: 4px;
    position: relative;
    height: 80%;
    width: 80%;
}
.gemini-result-download:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-result-download:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}

/* 新按钮：添加为参考图（风格与下载/删除一致，配绿色） */
.gemini-result-addref {
  height: 32px;
  width: 32px;
  border: 1px #0f9d75 solid;
  border-radius: 8px;
  background-color: #10b981; /* 绿：与站内主色一致 */
  opacity: 0;                /* 默认隐藏，悬浮时显现 */
  transition: 0.1s ease;
  box-shadow: 0px 0px 0px black;
}
.gemini-result-addref-img {
  position: relative;
  right: -3px;
  bottom: 4px;
  height: 80%;
  width: 80%;
}
.gemini-result-addref:hover {
  box-shadow: 3px 3px 0px black;
}
.gemini-result-addref:active {
  box-shadow: 1px 1px 0px black;
  transform: translate(2px, 2px);
}


.gemini-result-quote {
    height: 32px;
    width: 32px;
    border: 1px #2063d1 solid;
    border-radius: 8px;
    background-color: #3B82F6;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}
.gemini-result-quote-img {
    right: -3px;
    bottom: 4px;
    position: relative;
    height: 80%;
    width: 80%;
}
.gemini-result-quote:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-result-quote:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}

/*收藏*/
.gemini-result-star {
    height: 32px;
    width: 32px;
    border: 1px #595959 solid;
    border-radius: 8px;
    background-color: #6f6f6f;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}
.gemini-result-star-img {
    right: -3px;
    bottom: 4px;
    position: relative;
    height: 80%;
    width: 80%;
}

.gemini-result-star-img-active {
    right: -3px;
    bottom: 4px;
    position: relative;
    height: 80%;
    width: 80%;
}
.gemini-result-star:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-result-star:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}

/*收藏激活*/
.gemini-result-star-active {
    height: 32px;
    width: 32px;
    border: 1px #E1B200 solid;
    border-radius: 8px;
    background-color: #FFD01F;
    opacity: 0;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}
.gemini-result-star-active:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-result-star-active:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}



.gemini-result-delete:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-result-delete:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}

.gemini-history-toolbar {
    right: 6px;
    position: absolute;
    top: 6px;
    display: flex;
    gap: 5px;
}

.gemini-result-delete-img {
    right: -3px;
    bottom: 4px;
    position: relative;
    height: 80%;
    width: 80%;
}

.gemini-preset-btn-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.gemini-preset-btn {
    white-space: nowrap;
    flex: 1 0;
    text-align: center;
    border-radius: 8px;
    padding: 1px 6px 1px 6px;
    border: 1px #cdcdcd solid;
    background-color: #efefef;
    cursor: pointer;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
    user-select: none;
}
.gemini-preset-btn:hover {
    box-shadow: 3px 3px 0px black;
}
.gemini-preset-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px black;
}

.gemini-preset-btn--active {
    white-space: nowrap;
    flex: 1 0;
    text-align: center;
    font-weight: bold;
    color: #392d00;
    border-radius: 8px;
    padding: 1px 6px 1px 6px;
    border: 1px #e1b200 solid;
    background-color: #ffd01f;
    cursor: pointer;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
    user-select: none;
}
.gemini-preset-btn--active:hover {
    box-shadow: 3px 3px 0px black;
}

.gemini-preset-btn--active:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px black;
}

.Fengefu {
    width: 100%;
    height: 1px;
    background-color: #313136;
    margin: 10px 0px 10px 0px;
}

.gemini-premodel-card {
    border: 1px #1c1c1c solid;
    user-select: none;
    flex: 0 0 133px;
    flex-direction: column;
    display: flex;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: 2px 2px 0px black;
    transition: 0.1s ease;
    cursor: pointer;
}
.gemini-premodel-card:hover {
    box-shadow: 4px 4px 0px black;
}
.gemini-premodel-card:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}


.gemini-premodel-card--active {
    user-select: none;
    flex: 0 0 133px;
    flex-direction: column;
    display: flex;
    background-color: #FFD01F;
    border-radius: 8px;
    box-shadow: 2px 2px 0px black;
    transition: 0.1s ease;
    cursor: pointer;
    border: 3px #ffd01f solid;
}
.gemini-premodel-card--active:hover {
    box-shadow: 4px 4px 0px black;
}
.gemini-premodel-card--active:active {
    box-shadow: 1px 1px 0px black;
    transform: translate(2px, 2px);
}

.gemini-premodel-card-img {
    border-radius: 8px 8px 0px 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0px 0px 0px black;
}


.gemini-premodel-container {
    display: flex;
    flex-flow: wrap;
    gap: 12px;
}

.gemini-premodel-card-text {
    color: white;
    text-align: center;
}

.gemini-textarea-addimg {
    
    background-color: #FFD01F;
    padding: 0px 6px 0px 6px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px #e1b200 solid;
    transition:0.1s ease;
    user-select:none;

    box-shadow: 0px 0px 0px black;
}
.gemini-textarea-addimg:hover{
    box-shadow:3px 3px 0px black;
}
.gemini-textarea-addimg:active {
    box-shadow: 1px 1px 0px black;
    transform:translate(2px,2px);
}

/* lxz */
.gemini-textarea-addimg.is-disabled {
  opacity: .5;
  pointer-events: none;
}


.gemini-textarea-text {
    color: black;
    vertical-align: middle;
    font-size: 16px;
}

.gemini-textarea-img {
    height: 16px;
    width: 16px;
}

.gemini-textarea-success {
    height: 40px;
    border: 1px #c10808 solid;
    cursor: pointer;
    border-radius: 8PX;
    padding: 0px 8px 2px 10px;
    background-color: #fb2f2f;
}

.gemini-textarea-success-text {
    color: #ffffff;
    vertical-align: middle;
    font-size: 16px;
}

.gemini-textarea-clear {
    height: 40px;
    border: 1px #095db7 solid;
    cursor: pointer;
    border-radius: 8PX;
    padding: 0px 8px 2px 10px;
    background-color: #2f92fb;
}

.gemini-textarea-clear-text {
    color: #ffffff;
    vertical-align: middle;
    font-size: 16px;
}

.gemini-btn--show {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    user-select: none;
}

.gemini-btn--show:hover {
    box-shadow: 3px 3px 0px black;
    cursor: pointer;
}

.gemini-btn {
    transition: 
        transform 0.1s ease, 
        box-shadow 0.1s ease;
    user-select: none;
}
.gemini-btn:hover{
    box-shadow: 3px 3px 0px black;
}
.gemini-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px black;
}

.gemini-history-page-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 5px 5px 8px 5px;
    margin-top: 10px;
    border-radius: 8px;
    border: 1px #313136 solid;
    background-color: #1a1a1e;
    cursor: default;
}

.gemini-history-page-btn {
    color: black;
    user-select: none;
    border-radius: 8px;
    padding: 0px 6px;
    border: 1px #e1b200 solid;
    background-color: #FFD01F;
    cursor: pointer;
    transition: 0.1s ease;
    box-shadow: 0px 0px 0px black;
}

.gemini-history-page-num-text {
    font-size: 18px;
    font-weight: bold;
}

.gemini-history-page-num{

}

.gemini-history-page-currentNum{

}

.gemini-tips-container {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px #e3e3e3 solid;
    background-color: #efefef;
    display: flex;
    gap: 8px;
    height: 64px;
    cursor:default;
}

.gemini-tips-img {
    margin: 10px;
    height: 30px;
}

.gemini-tips-text-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: center;
}

.gemini-translate-container {
    display: flex;
    gap: 6px;
}

.gemini-translate-texarea {
    border-radius: 8px;
    flex: 1 0;
    height: 90px;
    padding: 5px;
    resize: none;
    box-shadow:0px 0px 0px black;
    transition:0.1s ease;
}
.gemini-translate-texarea:hover {
    box-shadow: 3px 3px 0px black;
}

.gemini-translate-img-container {
    cursor: pointer;
    border-radius: 8px;
    border: 1px #e1b200 solid;
    padding: 13px;
    background-color: #ffd01f;
    flex: 0 0;
}

.gemini-addImg-card {
    height: 70px;
    width: 70px;
    border-radius: 8px;
    position: relative;
    flex: 0 0 70px;
}

.gemini-addImg-img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}

.gemini-addImg-container {
    gap: 8px;
    display: flex;
    margin-bottom: 10px;
    border: 1px #313136 solid;
    border-radius: 8px;
    padding: 8px;
    background-color: #18181c;
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    overflow-y: hidden;
}

.gemini-addImg-delete-img {
    padding: 3px;
    background-color: #fb2f2f;
    height: 20px;
    width: 20px;
    position: absolute;
    right: 3px;
    top: 3px;
    border: 1px #c10808 solid;
    border-radius: 5px;
}

.gemini-translate-comparison-container {
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px #e3e3e3 solid;
    background-color: #efefef;
    box-shadow: 0px 0px 0px black;
    transition: 0.1s ease;
}

.gemini-translate-comparison-container:hover {
    box-shadow: 3px 3px 0px black;
}

.gemini-submit-text {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #c3b600;
    color: black;
    user-select: none;
}

.gemini-submit-img {
    margin-bottom: 5px;
    width: 40px;
}




.gemini-addImg-btn-container {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
}

/*覆盖*/
.gemini-history-card .gemini-result-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 关键：完整显示整张图 */
    object-position: center; /* 居中显示 */
    border-radius: 10px; /* 保留你的圆角风格 */
    background-color: #161616;
}

/*Tooltip*/
/* ===== 通用 Tooltip（文字+图片） ===== */
.tt-tip {
    position: fixed;
    z-index: 10000; /* 高于 .ttapi-modal 以避免遮挡 */
    pointer-events: none;
    max-width: min(360px, 60vw);
    background: #ffd01f;
    color: black;
/*    text-shadow:1px 1px 0px black;*/
    border-radius: 10px;
    box-shadow: 3px 3px 0px black, 0px 0px 10px #8a8a8a;
    padding: 10px 12px;
    line-height: 1.5;
    font-size: 13px;
    transform: translate(-50%, -100%); /* 默认在目标上方 */
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
}

    .tt-tip.is-show {
        opacity: 1;
    }

.tt-tip__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tt-tip__text {
    word-break: break-word;
}

.tt-tip__imgwrap {
    flex: 0 0 auto;
    max-width: 120px; /* 可被 data-tt-width 覆盖 */
    max-height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: #222;
    display: none; /* 默认无图不占位 */
}

    .tt-tip__imgwrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tt-tip__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd01f;
    transform: rotate(45deg);
    box-shadow: 3px 2px 0px black;
}

/* 上/下/左/右的箭头定位（根据 data-tt-placement 动态切换） */
.tt-tip[data-pos="top"] .tt-tip__arrow {
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
}

.tt-tip[data-pos="bottom"] .tt-tip__arrow {
    left: 50%;
    top: -5px;
    transform: translateX(-50%) rotate(45deg);
}

.tt-tip[data-pos="left"] .tt-tip__arrow {
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.tt-tip[data-pos="right"] .tt-tip__arrow {
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}



/* =====↓↓↓ ↓LXZ临时样式 可以根据需求修改↓ ↓↓↓===== */

/* ===== [FIX] Gemini 子选项卡 & 右栏布局约束 ===== */

/* 左栏固定宽度，避免被压扁；与你原来的 max-width:450px 一致 */
.gemini-secmain-container{
  flex: 0 0 450px;
  width: 450px;
  min-width: 340px;   /* 可按需微调下限 */
}

/* 右栏占剩余空间，但允许内容收缩，避免把左栏挤瘦 */
.gemini-trdmain-container{
  flex: 1 1 auto;
  /*min-width: 0;*/       /* ★ 关键：打破 flex 子项的“最小内容宽度”限制 */
  box-sizing: border-box;
}

/* 子选项卡导航与面板：宽度跟随右栏，不再把右栏撑宽 */
.gem-subtabs-nav,
.gem-subtabs-panels{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.gemini-page-jump-input {
    width: 80px;
}

/* 导航条本身的基础样式（放在历史上方，不再拉成超长一条） */
.gem-subtabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px; /* 在历史列表上方留点间距 */
}

.gem-subtabs-nav .gem-subtab{
  padding: 6px 12px;
  line-height: 1;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
}

.gem-subtabs-nav .gem-subtab.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* [PATCH-CSS-FAV-STATE] 收藏态样式 */
.gemini-history-card.is-favorited .gemini-result-star {
  background-color: #FFD01F;
  border-color: #E1B200;
}
.gemini-history-card.is-favorited .gemini-result-img {
  border: 1px #E1B200 solid;
}

/* 让右上角工具栏永远浮在图片上方并可点击 */
.gemini-history-card { position: relative; }
.gemini-history-toolbar{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;        /* ★ 关键：盖过图片 */
  display: flex;
  gap: 5px;
}

/* 悬停才显现（你已有按单个按钮写的规则，这里收拢一下更稳） */
.gemini-history-toolbar > div {
    opacity: 0;
    pointer-events: auto;
}
.gemini-history-card:hover .gemini-history-toolbar > div { opacity: 1; }

.gemini-fav-container {
    display: flex;
    flex-wrap: wrap;  /* 使图片在容器内自动换行 */
    gap: 10px;  /* 可以根据需要调整间隙 */
}

.gem-subtabs{display:flex;gap:8px;margin:12px 0}
  .gem-subtab{padding:6px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;color:#111;cursor:pointer}
    .gem-subtab.is-active {
        border: 1px #e1b200 solid;
        background-color: #ffd01f;
        color: #000000;
        border-color: #111;
        font-weight:bold;
    }
  .gem-subtab-panel{display:none}
  .gem-subtab-panel.is-active{display:block}

.gemini-pagination {
    justify-content: center;
    gap: 8px;
    display: flex;
    margin-top: 12px;
    border-radius: 10px;
    border: 1px #313136 solid;
    padding: 12px;
    background-color: #1a1a1e;
}

.gemini-modeToggle-container {
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px #313136 solid;
    background-color: #18181c;
    width: 100%;
    display: flex;
    justify-content: center;
}

.gemini-modeToggle-btn {
    text-align: center;
    flex: 1;
    padding: 0px 10px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: 0.3s ease;
}

.gemini-modeToggle-default {
    font-weight: normal;
    color: #9d9d9d;
    background-color: #18181C;
}

.gemini-modeToggle-active {
    font-weight: 500;
    color: black;
    background-color: #ffd01f;
}

/*专业模式*/
.gemini-pro-container {
    height: 52px;
    overflow: hidden;
    border: 1px #c3c3c3 solid;
    border-radius: 8px;
    padding: 8px 14px;
    background-color: #efefef;
    transition:0.2s ease;
}

.gemini-pro-title{
    color: black;
    font-weight: 400;
}

.gemini-pro-container:hover {
    height: auto;
}