/* Page-specific styles for all app views. */



*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
}

input,
textarea,
select{
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--surface);
    color:var(--text);
    padding:2px 3px;
    margin-top:1px;
    margin-bottom:1px;
    margin-left: 5px;
    box-shadow:0 0 0 1px var(--separator);
}

textarea{
    resize:none;
    min-height:3rem;
}

label{
    font-size:0.9em;
    color:var(--text2);
    font-weight:600;
    vertical-align: center;
}

.ios-navbar{
    position:sticky;
    top:0;
    z-index:100;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.navbar-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
}

.navbar-back{
    position:absolute;
    left:12px;
    top:-13px;
    width:36px;

    border:none;
    background:none;

    font-size:40px;

    cursor:pointer;
    color:var(--primary);
}

.login-page{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;
}

.login-card{
    width:320px;

    background:white;

    padding:28px;

    border-radius:14px;

    box-shadow:0 8px 24px var(--shadow);

    display:flex;
    flex-direction:column;
    gap:14px;
}

.login-card input{
    padding:8px;

    border:1px solid var(--border);
}

.login-error{
    color:var(--danger-text);
    font-size:14px;
}

.login-link{
    margin-top:10px;

    background:none;

    border:none;

    color:var(--link);

    cursor:pointer;

    font-size:14px;
}

.login-link:hover{
    text-decoration:underline;
}

.fab-add{
    position:fixed;
    right:24px;
    bottom:60px;

    width:58px;
    height:58px;
    border-radius:50%;

    border:none;
    outline:none;

    font-size:36px;
    cursor:pointer;
    background:var(--primary);
    color:white;

    box-shadow:0 4px 12px var(--overlay-dark);

    z-index:1000;

    transition:transform .15s;
}

.fab-add:hover{
    transform:scale(1.05);
}

.fab-add:active{
    transform:scale(.95);
}

.page-content{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

.full-page{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    width:100%;
    height:100%;
    padding-bottom:50px;
}

.dialog-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    margin-bottom:14px;
}

.dialog-field{
    margin-bottom:4px;
}

.dialog-field:last-child{
    margin-bottom:0;
}

.dialog-field-group{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.chat-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.empty-list{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    color:var(--text3);
}

.chat-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:7px 7px;

    background:var(--surface);

    border-bottom:1px solid var(--gallery-border);

    cursor:pointer;
}

.chat-item:active{
    background:var(--pressed-bg);
}

.chat-item.selected{
    background:var(--selected-bg);
}

.chat-avatar-count{
    width:2.2em;
    height:2.2em;

    font-weight:700;
    font-size:1.2em;

    border:2px solid var(--divider);
    border-radius:50%;
    color:var(--text2);
    background:var(--surface2);

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.chat-main{
    flex:1;
    min-width:0;
}

.chat-title{
    font-size:17px;
    font-weight:600;
    color:var(--text);
}

.chat-description{
    font-size:14px;
    color:var(--text2);
}

.chat-record-count{
    margin-left:auto;
    margin-right:7px;
    color:var(--text3);
    font-size:12px;
    white-space:nowrap;
    align-self:center;
}

.chat-item.empty-record{
    color:var(--text3);
}

.chat-item.empty-record .chat-title,
.chat-item.empty-record .chat-description,
.chat-item.empty-record .chat-record-count,
.chat-item.empty-record .chat-avatar-count{
    color:var(--text3);
}

.add-list-item{
    height:22px;
    width:22px;
    margin:4px auto;
    border-radius:28px;
    background:var(--primary);
    color:white;
    font-size:20px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
}

.add-list-item:hover{
    opacity:0.85;
}

.settings-gear{
    background:transparent;
    border:none;
    font-size:14px;
    cursor:pointer;
    color:var(--error-text);
    flex-shrink:0;
}

.settings-overlay{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    z-index:1000;
}

.settings-panel{
    flex:1;
    overflow-y:auto;
    background:var(--surface);
    padding:20px;
    max-width:100%;
    box-shadow:none;
}

.search-box{
    width:100%;
    height:38px;
    padding:0 14px 0 40px;
    border:none;
    border-radius:12px;
    background:var(--divider);
    color:var(--text);
    font-size:16px;
    line-height:38px;
    outline:none;
    box-shadow:none;
    transition:background .18s ease;
    appearance:none;
    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px;
}

.search-box:focus{
    background:var(--divider);
}

.search-box::placeholder{
    color:var(--text3);
}

.photo-view-page{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    background:var(--pressed-bg);
    overflow:hidden;
}

.viewer{
    position:relative;
    flex:1;
    display:flex;
    background:var(--text);
    overflow:hidden;
}

.viewer-content{
    position:absolute;
    inset:0;
    flex:1;
    overflow:hidden;
    touch-action:none;
    cursor:grab;
}

.viewer-image{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.viewer-sidebar{
    position:absolute;
    right:-5px;
    top:10px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    padding:2px 2px;

    background:var(--overlay-light);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:10;
    border-radius:15px;
}

.sidebar-buttons{
    display:flex;
    flex-direction:column;

    gap:10px;

    width:100%;
}

.viewer-sidebar .toggle{
    width:50px;
    height:22px;

    font-size:10px;
}

.calibrate-button{
    width:56px;
    height:28px;

    border:none;

    border-radius:16px;

    background:var(--primary);

    color:white;

    font-weight:700;

    font-size:11px;
}

.vertical-blend{
    margin-top:auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:6px;

    height:170px;
}

.vertical-blend input[type=range]{
    writing-mode:vertical-lr;

    width:26px;
    height:100px;

    transform:rotate(180deg);

    margin:0;
}

.vertical-blend-label{
    font-size:10px;
    color:white;
    opacity:.9;
}

.overlay-canvas{
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
    opacity:0;
    transition:opacity 1000ms ease-in-out;
    will-change:opacity;
}

.overlay-canvas.visible{
    opacity:1;
}

.toggle{
    width:52px;
    height:24px;
    border-radius:16px;
    background:var(--disabled-bg);
    position:relative;
    transition:var(--transition);
}

.toggle::after{
    content:"";
    position:absolute;
    left:3px;
    top:2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--overlay-light);
    transition:var(--transition);
}

.toggle.active{
    background:var(--success);
    color:var(--success-text);
}

.toggle.active::after{
    left:28px;
}

.viewer-thumbnails{
    display:flex;
    gap:6px;
    padding:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    background:var(--overlay-gray);
    border-top:1px solid var(--divider);
}

.viewer-thumbnails::-webkit-scrollbar{
    display:none;
}

.pose-thumbnail{
    flex:0 0 auto;

    width:48px;
    height:80px;

    padding:0;

    overflow:hidden;

    border:2px solid transparent;
    border-radius:8px;

    background:var(--text-inverse);

    cursor:pointer;
}

.pose-thumbnail.active{
    border-color:var(--primary);
}

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

.pose-thumbnail-label{
    flex:0 0 auto;

    font-size:11px;
    color:var(--divider);
    text-align:center;
}

.thumb-bar{
    display:flex;
    gap:10px;
    padding:1px;
    background:var(--overlay-gray);
    scrollbar-width:none;
    position:absolute;
    bottom:50px;
    z-index:20;
}

.thumb-bar::-webkit-scrollbar{
    display:none;
}

.pose-button{
    width:15%;
    height:40px;
    border:none;
    border-radius:14px;
    background:var(--divider);
    color:var(--error-text);
    font-size:13px;
    font-weight:600;
}

.pose-button.active{
    background:var(--primary);
    color:var(--surface);
}

.button-row{
    display:flex;
    gap:12px;
}

.button-row .btn{
    flex:1;
}

.chat{
    inset:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;
    background:var(--chat-bg);
}

.chat-messages{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;

    overscroll-behavior:contain;

    padding:15px;
    -webkit-overflow-scrolling:touch;

    background-color:var(--chat-bg);
    background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cdc4' fill-opacity='0.35'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.chat-message{
    display:flex;
    align-items:flex-end;
    margin-bottom:14px;
}

.chat-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    margin-right:10px;
    object-fit:cover;
    flex-shrink:0;
}

.chat-bubble{
    background:white;
    border-radius:12px;
    padding:10px;
    max-width:70%;
    box-shadow:0 1px 2px var(--shadow);
}

.chat-text{
    white-space:pre-wrap;
    word-break:break-word;
}

.chat-image{
    width:220px;
    max-width:100%;
    border-radius:8px;
    margin-top:8px;
}

.chat-file{
    display:block;
    margin-top:8px;
    color:var(--link);
    text-decoration:none;
}

.chat-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin-top:6px;
}

.chat-time{
    color:var(--text3);
    font-size:11px;
}

.chat-empty{
    color:var(--text3);
    text-align:center;
    margin-top:40px;
}

.edited{
    color:var(--text3);
    font-size:11px;
}

.chat-edit-button{
    border:none;
    background:none;
    cursor:pointer;
    color:var(--text3);
}

.chat-composer{
    flex-shrink:0;
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:8px;

    padding:10px;
    background:var(--surface);
    border-top:1px solid var(--divider);

    padding-bottom:max(10px, env(safe-area-inset-bottom));
}

.chat-input{
    overflow-y:auto;
    line-height:1.4;
    min-height:42px;
    field-sizing:content;
    flex:1;
    resize:none;
    border:none;
    outline:none;
    background:var(--input-bg);
    border-radius:22px;
    padding:11px 15px;
    font:inherit;
    max-height:140px;
    cursor:text;
    user-select:text;
    -webkit-user-select:text;
}

.attach-button{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:var(--input-bg);
    cursor:pointer;
    font-size:18px;
}

.send-button{
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    cursor:pointer;
    font-size:20px;
}

.dialog-hint{
    color:var(--text3);
    font-size:14px;
    padding:8px 0;
}

.sync-result{
    margin-top:10px;
    font-size:14px;
    color:var(--text);
    word-break:break-word;
}

.dialog-buttons-row{
    display:flex;
    flex-direction:row;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}